@sableui/react 0.6.1 → 0.7.0

package/dist/components/panel-group/panel-group.js

@@ -0,0 +1,168 @@
+"use client";
+
+// src/components/panel-group/panel-group.tsx
+import {
+  useCallback,
+  useId,
+  useSyncExternalStore
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var widthCache = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function clampWidth(value, min, max) {
+  return Math.min(max, Math.max(min, Math.round(value)));
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function readWidth(key, fallback, min, max) {
+  const cached = widthCache.get(key);
+  if (cached !== void 0) return cached;
+  let value = fallback;
+  try {
+    const stored = Number(window.localStorage.getItem(key));
+    if (Number.isFinite(stored) && stored > 0) value = clampWidth(stored, min, max);
+  } catch {
+  }
+  widthCache.set(key, value);
+  return value;
+}
+function usePanelWidth(defaultWidth, { storageKey, min = 200, max = 400 } = {}) {
+  const instanceId = useId();
+  const persist = Boolean(storageKey);
+  const key = storageKey ?? `memory:${instanceId}`;
+  const width = useSyncExternalStore(
+    subscribe,
+    () => persist ? readWidth(key, defaultWidth, min, max) : widthCache.get(key) ?? defaultWidth,
+    () => defaultWidth
+  );
+  const setWidth = useCallback(
+    (next) => {
+      const clamped = clampWidth(next, min, max);
+      if (widthCache.get(key) === clamped) return;
+      widthCache.set(key, clamped);
+      if (persist) {
+        try {
+          window.localStorage.setItem(key, String(clamped));
+        } catch {
+        }
+      }
+      for (const listener of listeners) listener();
+    },
+    [key, persist, min, max]
+  );
+  const bounds = { min, max };
+  return [width, setWidth, bounds];
+}
+function PanelGroup({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 min-w-0 flex-1", className), ...props, children });
+}
+PanelGroup.displayName = "PanelGroup";
+function Panel({
+  label,
+  width,
+  scroll = true,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      "aria-label": label,
+      style: width !== void 0 ? { width: `${width}px` } : void 0,
+      className: cn(
+        "flex min-h-0 min-w-0 flex-col bg-panel",
+        width === void 0 && "flex-1",
+        width !== void 0 && "shrink-0",
+        // Thin scrollbar: a panel is chrome, and the platform default is wider
+        // than the panel's own padding. Contained overscroll so a panel that
+        // runs out of list does not start scrolling the canvas beside it.
+        scroll && "overflow-y-auto overscroll-contain scrollbar-quiet",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+Panel.displayName = "Panel";
+function PanelResizer({
+  side,
+  width,
+  onWidthChange,
+  label,
+  min = 200,
+  max = 400,
+  step = 8,
+  className
+}) {
+  function onPointerDown(e) {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = width;
+    function onMove(ev) {
+      const delta = side === "left" ? ev.clientX - startX : startX - ev.clientX;
+      onWidthChange(startWidth + delta);
+    }
+    function onUp() {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  }
+  function onKeyDown(e) {
+    const grow = side === "left" ? "ArrowRight" : "ArrowLeft";
+    const shrink = side === "left" ? "ArrowLeft" : "ArrowRight";
+    if (e.key === grow) {
+      e.preventDefault();
+      onWidthChange(width + step);
+    } else if (e.key === shrink) {
+      e.preventDefault();
+      onWidthChange(width - step);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      onWidthChange(min);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      onWidthChange(max);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      "aria-valuenow": width,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      tabIndex: 0,
+      onPointerDown,
+      onKeyDown,
+      className: cn(
+        "group relative z-10 w-px shrink-0 cursor-col-resize bg-hairline outline-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-y-0 -left-1 -right-1 block motion-interactive group-hover:bg-hairline-strong group-focus-visible:bg-primary/60"
+        }
+      )
+    }
+  );
+}
+PanelResizer.displayName = "PanelResizer";
+export {
+  Panel,
+  PanelGroup,
+  PanelResizer,
+  usePanelWidth
+};

package/dist/components/panel-group/panel-group.meta.js

@@ -0,0 +1,153 @@
+// src/components/panel-group/panel-group.meta.ts
+var panelGroupMeta = {
+  name: "PanelGroup",
+  summary: "A row of docked chrome panels around a flexible centre, with draggable and keyboard-resizable edges and optional persisted widths.",
+  keywords: [
+    "panel",
+    "panels",
+    "resize",
+    "resizable",
+    "splitter",
+    "docked",
+    "workspace",
+    "tool",
+    "chrome",
+    "inspector",
+    "layout"
+  ],
+  usage: {
+    description: "Use PanelGroup for the body of a tool workspace: fixed-width Panels docked left and/or right, a flexible Panel in the middle for the canvas, and a PanelResizer between them. Panels scroll internally and the group never scrolls. This is the workspace-register counterpart to SplitPane, which only switches between side-by-side and stacked at a breakpoint and cannot be resized.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Give every docked Panel a fixed width and leave the centre Panel width-less so it absorbs the remaining space."
+      },
+      {
+        guidance: "do",
+        description: "Drive the width with usePanelWidth and pass a storageKey, so a user's layout survives a reload. Spread its bounds onto the PanelResizer rather than repeating min and max by hand."
+      },
+      {
+        guidance: "do",
+        description: "Label every Panel \u2014 they are landmarks, and 'Layers' or 'Properties' is what a screen-reader user navigates by."
+      },
+      {
+        guidance: "dont",
+        description: "Let the group scroll. Only panels and the canvas scroll; a scrolling group means the shell lost its height constraint."
+      },
+      {
+        guidance: "dont",
+        description: "Use it for page content columns \u2014 that's Grid or Columns. PanelGroup is chrome, and it sits outside the content grid."
+      },
+      {
+        guidance: "dont",
+        description: "Omit PanelResizer to save effort and then let users live with a fixed panel. If a panel holds a tree or a property grid, its width is a preference."
+      }
+    ],
+    anatomy: [
+      {
+        name: "PanelGroup",
+        required: true,
+        description: "The flex row. Sets min-h-0/min-w-0 so children can actually shrink and scroll."
+      },
+      {
+        name: "Panel",
+        required: true,
+        description: "One column. Fixed-width when `width` is set, flexible otherwise. Scrolls internally."
+      },
+      {
+        name: "PanelResizer",
+        required: false,
+        description: "The draggable edge between two panels: a 1px hairline with a wider hit area, operable by pointer and keyboard."
+      }
+    ]
+  },
+  related: {
+    components: ["PanelSection", "ScrubField", "SplitPane", "Sidebar", "AppShell"]
+  },
+  status: "stable",
+  props: [],
+  subcomponents: [
+    {
+      name: "Panel",
+      type: "{ label: string; width?: number; scroll?: boolean }",
+      description: "A docked or flexible column. `label` names the landmark; omit `width` for the flexible centre. `scroll` defaults to true \u2014 set it false for a header + scrolling body + pinned footer, so the footer doesn't scroll away with the list. When you own the layout, give the header and footer shrink-0 and the middle min-h-0 flex-1 overflow-y-auto. overflow-y-auto only activates if every flex ancestor can shrink: a single missing min-h-0 anywhere up the chain makes the panel grow instead of scroll, and nothing reports it."
+    },
+    {
+      name: "PanelResizer",
+      type: "{ side: 'left' | 'right'; width: number; onWidthChange: (n: number) => void; label: string; min?: number; max?: number; step?: number }",
+      description: "The draggable edge. `side` says which side the resized panel is on, so the drag delta's sign is right."
+    },
+    {
+      name: "usePanelWidth",
+      type: "(defaultWidth: number, options?: { storageKey?: string; min?: number; max?: number }) => readonly [number, (n: number) => void, { min: number; max: number }]",
+      description: "Controlled width for a Panel, clamped and optionally persisted to localStorage (only when `storageKey` is passed). Read through useSyncExternalStore, so there is no server/client hydration mismatch and no setState in an effect; do not hand-roll a localStorage read during render or a write from an effect. Without `storageKey` the width is kept in memory per hook instance. The third element is the `{ min, max }` it clamps to: spread it onto the paired PanelResizer so the separator's aria-valuemin/max and Home/End match the real clamp."
+    }
+  ],
+  a11y: [
+    "PanelResizer is a role=separator with aria-orientation, aria-valuenow/min/max, and is focusable \u2014 a pointer-only resizer is a keyboard trap.",
+    "Arrow keys resize by `step`; Home and End jump to the minimum and maximum.",
+    "Each Panel renders an <aside> with an accessible name from `label`, so panels are navigable landmarks."
+  ],
+  tokensUsed: ["primary", "panel", "hairline", "hairline-strong"],
+  examples: [
+    {
+      label: "Tool body with a resizable left panel",
+      code: `function Body() {
+  const [leftWidth, setLeftWidth, leftBounds] = usePanelWidth(240, { storageKey: "app:panel:left", min: 180, max: 360 })
+  return (
+    <PanelGroup>
+      <Panel label="Layers" width={leftWidth}>
+        <PanelSection title="Layers">
+          <PropertyRow label="Background">
+            <Switch checked />
+          </PropertyRow>
+        </PanelSection>
+      </Panel>
+      <PanelResizer side="left" width={leftWidth} onWidthChange={setLeftWidth} label="Resize layers panel" {...leftBounds} />
+      <Panel label="Canvas">
+        <div className="grid h-full place-items-center bg-canvas text-ui-body text-muted-foreground">Canvas</div>
+      </Panel>
+    </PanelGroup>
+  )
+}`
+    },
+    {
+      label: "Both edges resizable",
+      code: `function Body() {
+  const [left, setLeft, leftBounds] = usePanelWidth(240, { storageKey: "app:left" })
+  const [right, setRight, rightBounds] = usePanelWidth(256, { storageKey: "app:right" })
+  return (
+    <PanelGroup>
+      <Panel label="Layers" width={left} />
+      <PanelResizer side="left" width={left} onWidthChange={setLeft} label="Resize layers panel" {...leftBounds} />
+      <Panel label="Canvas" />
+      <PanelResizer side="right" width={right} onWidthChange={setRight} label="Resize properties panel" {...rightBounds} />
+      <Panel label="Properties" width={right}>
+        <PanelSection title="Blending">
+          <PropertyPair>
+            <ScrubField label="Opacity" icon="grid" suffix="%" value={100} min={0} max={100} />
+            <ScrubField label="Blur" value={0} min={0} max={64} suffix="px" />
+          </PropertyPair>
+        </PanelSection>
+      </Panel>
+    </PanelGroup>
+  )
+}`
+    },
+    {
+      label: "Fixed panel, no resizer",
+      code: `<PanelGroup>
+  <Panel label="Tools" width={56}>
+    <div className="flex flex-col gap-1 p-1">
+      <Button size="icon-xs" variant="ghost" aria-label="Toggle grid"><Icon name="grid" /></Button>
+      <Button size="icon-xs" variant="ghost" aria-label="Hide"><Icon name="eye" /></Button>
+    </div>
+  </Panel>
+  <Panel label="Canvas" />
+</PanelGroup>`
+    }
+  ]
+};
+export {
+  panelGroupMeta
+};

package/dist/components/panel-section/index.js

@@ -0,0 +1,9 @@
+// src/components/panel-section/index.ts
+import { PanelSection, PropertyPair, PropertyRow } from "./panel-section.js";
+import { panelSectionMeta } from "./panel-section.meta.js";
+export {
+  PanelSection,
+  PropertyPair,
+  PropertyRow,
+  panelSectionMeta
+};

package/dist/components/panel-section/panel-section.js

@@ -0,0 +1,115 @@
+"use client";
+
+// src/components/panel-section/panel-section.tsx
+import { cn } from "../../lib/cn.js";
+import { beginScrub } from "../../lib/scrub-gesture.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PanelSection({
+  title,
+  action,
+  className,
+  children,
+  ...props
+}) {
+  return (
+    // Side padding and the first/last section's top/bottom come from a framing
+    // sable-frame-tool, so rows stay concentric with a rounded frame's corners;
+    // in a square Workspace column they fall back to the 8px tool inset.
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col border-t border-hairline first:pt-[var(--panel-edge,0px)] last:pb-[var(--panel-edge,0px)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex h-7 items-center justify-between gap-2 px-[var(--panel-inset,--spacing(2))]", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-ui-section text-foreground", children: title }),
+            action
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 px-[var(--panel-inset,--spacing(2))] pb-2", children })
+        ]
+      }
+    )
+  );
+}
+PanelSection.displayName = "PanelSection";
+function PropertyRow({
+  label,
+  htmlFor,
+  hint,
+  stacked = false,
+  scrub,
+  className,
+  children,
+  ...props
+}) {
+  const scrubProps = scrub ? {
+    onPointerDown: (e) => beginScrub(e, {
+      value: scrub.value,
+      step: scrub.step ?? 1,
+      clamp: (n) => Math.min(scrub.max ?? Number.POSITIVE_INFINITY, Math.max(scrub.min ?? Number.NEGATIVE_INFINITY, n)),
+      onValueChange: scrub.onValueChange,
+      onGestureStart: scrub.onGestureStart,
+      onGestureEnd: scrub.onGestureEnd,
+      disabled: scrub.disabled,
+      preventDefaultOnDown: false
+    }),
+    // The affordance has to be visible before the drag, or nobody finds
+    // it; `select-none` so a slow drag does not highlight the word.
+    className: scrub.disabled ? void 0 : "cursor-ew-resize select-none",
+    title: hint ?? (scrub.disabled ? void 0 : "Drag to change")
+  } : null;
+  if (stacked) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 py-0.5", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor,
+          title: hint,
+          ...scrubProps,
+          className: cn("text-ui-md text-muted-foreground", scrubProps?.className),
+          children: label
+        }
+      ),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-6 items-center gap-2 py-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor,
+        title: hint,
+        ...scrubProps,
+        className: cn(
+          "min-w-0 flex-1 truncate text-ui-md text-muted-foreground",
+          scrubProps?.className
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children })
+  ] });
+}
+PropertyRow.displayName = "PropertyRow";
+function PropertyPair({ labels, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 py-0.5", className), ...props, children: [
+    labels ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: labels.map((text, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "truncate text-ui-md text-muted-foreground",
+        children: text
+      },
+      i
+    )) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children })
+  ] });
+}
+PropertyPair.displayName = "PropertyPair";
+export {
+  PanelSection,
+  PropertyPair,
+  PropertyRow
+};

package/dist/components/panel-section/panel-section.meta.js

@@ -0,0 +1,156 @@
+// src/components/panel-section/panel-section.meta.ts
+var panelSectionMeta = {
+  name: "PanelSection",
+  summary: "A flush group of property rows inside a docked panel \u2014 eyebrow header, hairline separator, rows beneath. The workspace register's answer to Card, which does not belong in a panel.",
+  keywords: [
+    "panel",
+    "section",
+    "inspector",
+    "properties",
+    "property grid",
+    "workspace",
+    "tool",
+    "chrome",
+    "sidebar"
+  ],
+  usage: {
+    description: "Use PanelSection to group properties inside an inspector or docked panel, with PropertyRow for one label-plus-control line and PropertyPair for two controls side by side. This is the workspace register's grouping primitive: it separates with a hairline and nothing else, because a Card inside a 240px panel spends its border and inset on nothing and pushes every row inward.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Group related properties under a short functional title \u2014 Blending, Layout, Fill \u2014 the way a tool inspector names its sections."
+      },
+      {
+        guidance: "do",
+        description: "Reach for PropertyPair before giving each property its own full-width row; pairing halves the vertical cost in a narrow panel."
+      },
+      {
+        guidance: "do",
+        description: "Put a section-scoped control (a visibility toggle, an add action) in the action slot rather than inventing a second header row."
+      },
+      {
+        guidance: "dont",
+        description: "Wrap panel content in Card. Cards are page-register furniture; in a panel they read as a page pasted into chrome."
+      },
+      {
+        guidance: "dont",
+        description: "Repeat the panel's own title as the section title. If the header above already names the selection, title the section by what it controls (Parameters, Blending)."
+      },
+      {
+        guidance: "dont",
+        description: 'Hand-roll a property line (`<div className="flex justify-between"><span>Opacity</span><Slider /></div>`). Use PropertyRow for every label-plus-control line: when each property type invents its own arrangement, a panel of fifteen properties ends up with fifteen layouts.'
+      },
+      {
+        guidance: "dont",
+        description: "Use PropertyRow for page forms \u2014 use Field, which carries label/description/error semantics. PropertyRow is a dense chrome row, not a form control."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Header",
+        required: true,
+        description: "The section title in the UI section tier, with an optional trailing action."
+      },
+      {
+        name: "PropertyRow",
+        required: false,
+        description: "One property: label left, control right. `stacked` moves the control to its own line for full-width controls."
+      },
+      {
+        name: "PropertyPair",
+        required: false,
+        description: "Two controls side by side, with optional captions above each."
+      }
+    ]
+  },
+  related: {
+    components: ["Workspace", "PanelGroup", "ScrubField", "StatusBar", "Field", "Card"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "Section name, rendered as the header in the UI section tier."
+    },
+    {
+      name: "action",
+      type: "ReactNode",
+      description: "Optional trailing control in the header \u2014 a visibility toggle, an add action."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "PropertyRow",
+      type: "{ label: ReactNode; htmlFor?: string; hint?: string; stacked?: boolean; scrub?: { value, onValueChange, step?, min?, max?, onGestureStart?, onGestureEnd?, disabled? } }",
+      description: "One property line. `hint` becomes the label's hover explanation; `stacked` puts the control on its own line. `scrub` makes the property NAME a drag handle for its value \u2014 the Figma/Framer/Paper convention, and the answer for a numeric row with no honest glyph to put in a ScrubField (a schema-generated `levels` or `seed`, where a `#` would be noise pretending to be meaning). Opt-in and additive: a row without it is unchanged. The label stays a real `<label htmlFor>` \u2014 a 2px jitter threshold keeps a click a click, and the click synthesised after a real drag is swallowed so a scrub does not also select the field's text."
+    },
+    {
+      name: "PropertyPair",
+      type: "{ labels?: [ReactNode, ReactNode] }",
+      description: "Two controls side by side in a 2-up grid, with optional captions above each."
+    }
+  ],
+  a11y: [
+    "PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.",
+    "The section title is an h3, so panels contribute a real heading outline rather than styled divs.",
+    "`hint` is exposed as the label's title attribute \u2014 keep the essential meaning in the label itself, since title text is not reliably announced.",
+    "A `scrub` label does not replace keyboard editing and must not be the only way to set the value: the drag is a pointer affordance, so the control it names still has to accept typing and arrow keys. It also keeps its `htmlFor` behaviour, which is the reason the gesture arms on a 2px threshold rather than on pointerdown."
+  ],
+  tokensUsed: ["foreground", "muted-foreground", "hairline"],
+  examples: [
+    {
+      label: "Blending section, 2-up",
+      code: `<PanelSection title="Blending">
+  <PropertyPair>
+    <ScrubField label="Opacity" value={100} min={0} max={100} suffix="%" />
+    <Select value="normal">
+      <SelectTrigger size="xs" />
+      <SelectContent>
+        <SelectItem value="normal">Normal</SelectItem>
+        <SelectItem value="multiply">Multiply</SelectItem>
+      </SelectContent>
+    </Select>
+  </PropertyPair>
+</PanelSection>`
+    },
+    {
+      label: "Rows with a stacked slider",
+      code: `<PanelSection title="Parameters">
+  <PropertyRow label="Block size" hint="Block edge length in reference pixels." stacked>
+    <Slider value={32} min={4} max={256} />
+  </PropertyRow>
+  <PropertyRow label="Direction">
+    <Select value="both">
+      <SelectTrigger size="xs" />
+      <SelectContent>
+        <SelectItem value="both">Both</SelectItem>
+        <SelectItem value="horizontal">Horizontal</SelectItem>
+      </SelectContent>
+    </Select>
+  </PropertyRow>
+  <PropertyRow label="Reverse">
+    <Switch checked={false} />
+  </PropertyRow>
+</PanelSection>`
+    },
+    {
+      label: "Section with a header action",
+      code: `<PanelSection
+  title="Blending"
+  action={
+    <Button size="icon-xs" variant="ghost" aria-label="Hide layer">
+      <Icon name="eye" />
+    </Button>
+  }
+>
+  <PropertyRow label="Opacity">
+    <ScrubField label="Opacity" value={60} min={0} max={100} suffix="%" />
+  </PropertyRow>
+</PanelSection>`
+    }
+  ]
+};
+export {
+  panelSectionMeta
+};

package/dist/components/phone/index.js

@@ -0,0 +1,7 @@
+// src/components/phone/index.ts
+import { Phone } from "./phone.js";
+import { phoneMeta } from "./phone.meta.js";
+export {
+  Phone,
+  phoneMeta
+};

package/dist/components/phone/phone.js

@@ -0,0 +1,50 @@
+// src/components/phone/phone.tsx
+import { cn } from "../../lib/cn.js";
+import { StatusIcons } from "./status-icons.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Phone({ statusBar = true, systemChrome = true, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Hardware is the one surface no preset or mode repaints: a titanium
+        // body and band, not a theme's scrim (`overlay` is translucent in some
+        // presets, which drew a grey, see-through phone).
+        // design-lint-disable-next-line inline-color -- fixed device material, deliberately unthemed
+        "@container relative mx-auto w-[280px] [--phone-body:oklch(18%_0.004_265)] [--phone-band:oklch(48%_0.006_265)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[18%] h-[4.5%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[25.5%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[34%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.6cqi] top-[27%] h-[10.5%] w-[0.8cqi] rounded-e-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.4cqi] top-[55%] h-[6%] w-[0.6cqi] rounded-e-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("div", { className: "relative rounded-[18cqi] bg-(--phone-body) p-[3.7cqi] shadow-xl ring-[0.5cqi] ring-(--phone-band) ring-inset", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[402/874] overflow-hidden rounded-[14.3cqi] bg-background text-foreground [clip-path:inset(0_round_14.3cqi)]", children: [
+          /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-auto overscroll-contain scrollbar-hidden", statusBar && "pt-[14.3cqi]"), children }),
+          statusBar ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-x-0 top-0 grid h-[14.3cqi] grid-cols-[1fr_19cqi_1fr] grid-rows-[8cqi] content-start items-center bg-background px-[4cqi] pt-[2.6cqi]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "justify-self-center text-label-md tabular-nums", children: "9:41" }),
+                /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx(StatusIcons, { className: "flex items-center gap-[1.15cqi] justify-self-center [&_svg]:h-[2.8cqi] [&_svg]:w-auto" })
+              ]
+            }
+          ) : null,
+          systemChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 top-[2.6cqi] mx-auto h-[8cqi] w-[19cqi] rounded-full bg-(--phone-body)" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-[1.85cqi] mx-auto h-[1.15cqi] min-h-1 w-[35%] rounded-full bg-foreground" })
+          ] }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+Phone.displayName = "Phone";
+export {
+  Phone
+};