ViewFrame

import { useState } from "react";
import { Picker, Surface, Text, VStack, ViewFrame } from "@/ohmygui";

type FrameSize = "ideal" | "fixed" | "full";

export default function Example() {
  const [size, setSize] = useState<FrameSize>("ideal");
  return (
    <VStack gap="md" align="stretch">
      <Picker label="Width behavior" value={size} onChange={(event) => setSize(event.currentTarget.value as FrameSize)} items={[{ value: "ideal", label: "Ideal width" }, { value: "fixed", label: "Explicit width" }, { value: "full", label: "Fill available width" }]} />
      <ViewFrame as="section" aria-label="Bounded frame" ideal={size === "ideal" ? 320 : undefined} width={size === "fixed" ? 280 : size === "full" ? "100%" : undefined} min={220} max="100%" height={140}>
        <Surface tone="accent" padding="md">
          <Text>{size === "ideal" ? "Ideal 320 px" : size === "fixed" ? "Explicit width 280 px" : "Full available width"} · min 220 px · max 100%</Text>
        </Surface>
      </ViewFrame>
    </VStack>
  );
}