@sableui/react 0.6.2 → 0.7.1

package/dist/components/settings-menu/settings-menu.meta.js

@@ -0,0 +1,177 @@
+// src/components/settings-menu/settings-menu.meta.ts
+var settingsMenuMeta = {
+  name: "SettingsMenu",
+  summary: "A compact trigger that states the current settings, over a menu of rows that change them. Each row shows its own value and opens a submenu.",
+  status: "stable",
+  keywords: [
+    "settings",
+    "model picker",
+    "model switcher",
+    "options menu",
+    "preferences",
+    "submenu",
+    "quality settings",
+    "ai chat"
+  ],
+  usage: {
+    description: "For a cluster of related settings that a reader checks often and changes occasionally \u2014 the model and effort on an AI composer, quality and format on an export control, density and sort on a table. It encodes one shape: summarise the state on the trigger, then open to a list of name \u2192 current value \u2192 submenu. It knows nothing about any particular domain; the AI-model case is one instance of it.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Put the current values in `summary`, not a noun. "5.6 Sol High" tells the reader where they are; a trigger reading "Settings" makes them open it to find out, which is the wrong trade for a control glanced at twenty times a session.'
+      },
+      {
+        guidance: "do",
+        description: "Give every SettingsRow a `value`. One glance at the open menu should answer every setting at once \u2014 a menu of bare names is a menu you have to explore."
+      },
+      {
+        guidance: "do",
+        description: "Use `MenuRadioGroup` + `MenuRadioItem` inside a row for single-choice settings, so the current option is checked rather than merely remembered."
+      },
+      {
+        guidance: "do",
+        description: 'Reach for `variant="subtle"` when the trigger sits on a surface where a ghost control would float unanchored \u2014 inside a ChatComposer, for instance.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a single setting. One choice is a `Select`; the nesting only earns its cost when there are several related settings to summarise."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not put actions in it. Rows change state; a menu that mixes "Effort \u203A" with "Delete conversation" makes destructive commands look like preferences. That is `Menu` or `OverflowMenu`.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not nest more than one level deep. Past that the reader loses the path back, and the thing you have is a settings dialog wearing a menu."
+      },
+      {
+        guidance: "dont",
+        description: "Do not override the upward, end-aligned default without reason. Its home is the bottom of a composer or toolbar, where a downward menu opens off-screen."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Trigger",
+        required: true,
+        description: "The summary control. States the current settings and carries a chevron; quiet at rest, so it does not compete with the primary action beside it."
+      },
+      {
+        name: "SettingsRow",
+        required: true,
+        description: "One setting: its name, its current value, and a submenu of options. Without children it renders flat, for a row that is a statement rather than a choice."
+      },
+      {
+        name: "Submenu contents",
+        required: false,
+        description: "Usually a MenuRadioGroup of MenuRadioItems, so the active option is checked."
+      }
+    ]
+  },
+  related: {
+    components: ["Menu", "OverflowMenu", "Select", "ChatComposer", "Popover"],
+    patterns: ["ChatPanel"]
+  },
+  props: [
+    {
+      name: "summary",
+      type: "ReactNode",
+      description: "What the trigger reads when closed. Give it the current values, not a noun \u2014 the control should answer before it is opened."
+    },
+    {
+      name: "label",
+      type: "string",
+      default: '"Change settings"',
+      description: "Accessible name for the trigger, since the visible summary is data rather than a label."
+    },
+    {
+      name: "variant",
+      type: '"ghost" | "subtle"',
+      default: '"ghost"',
+      description: "Resting treatment. `ghost` disappears into the surface at rest and shows its affordance on hover \u2014 right for a toolbar. `subtle` adds a fill for surfaces where a ghost trigger would float unanchored."
+    },
+    {
+      name: "size",
+      type: '"xs" | "sm"',
+      default: '"sm"',
+      description: "Trigger height, read off the density ladder so a compact scope retunes it with every other control."
+    },
+    {
+      name: "side",
+      type: '"top" | "bottom" | "inline-start" | "inline-end"',
+      default: '"top"',
+      description: "Which side the menu opens on. Upward by default \u2014 its home is the bottom of a composer."
+    },
+    {
+      name: "align",
+      type: '"start" | "center" | "end"',
+      default: '"end"',
+      description: "Alignment along that side."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Disable the trigger."
+    },
+    {
+      name: "...Menu props",
+      type: "Omit<ComponentProps<typeof Menu>, 'children'>",
+      description: "`open` / `defaultOpen` / `onOpenChange` and the rest of Base UI's menu root props."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "SettingsRow",
+      type: "{ label: ReactNode; value?: ReactNode; disabled?: boolean; children?: ReactNode }",
+      description: "One setting. With children it opens a submenu; without them it renders as a flat statement row."
+    },
+    {
+      name: "MenuRadioGroup",
+      type: "{ value?: string; defaultValue?: string; onValueChange?: (value: string) => void }",
+      description: "Single-choice group for a row's submenu. Exported from Menu; re-used here rather than duplicated."
+    },
+    {
+      name: "MenuRadioItem",
+      type: "{ value: string; disabled?: boolean }",
+      description: "One option, with a check in a reserved leading column so labels do not shift as the highlight moves."
+    }
+  ],
+  variants: {
+    variant: ["ghost", "subtle"],
+    size: ["xs", "sm"]
+  },
+  tokensUsed: [
+    "foreground",
+    "muted",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "popover",
+    "popover-foreground",
+    "border",
+    "ring"
+  ],
+  a11y: [
+    "Base UI's Menu underneath, so roving focus, typeahead, Esc and outside-dismissal, and the full menu/menuitemradio ARIA wiring come for free \u2014 including submenu traversal with the arrow keys.",
+    'The trigger carries an explicit `label`, because its visible text is the current state rather than a name: without it, a screen reader announces "5.6 Sol High" with no indication that it is a control or what it changes.',
+    "Radio rows are `menuitemradio` with a real checked state, so the current choice is conveyed to assistive tech rather than only by a visible tick.",
+    "The check occupies a reserved column instead of appearing on selection, so labels never shift sideways as the highlight moves \u2014 a change that reads as motion to anyone tracking position.",
+    "Submenus open on the inline-end side, which flips correctly in RTL rather than always opening right."
+  ],
+  examples: [
+    {
+      label: "A model switcher in a composer",
+      code: '<ChatComposer\n	onSend={send}\n	actions={\n		<SettingsMenu variant="subtle" size="xs" summary={<><span className="text-foreground">{model.name}</span>{" "}<span className="text-muted-foreground">{effort}</span></>}>\n			<SettingsRow label="Model" value={model.name}>\n				<MenuRadioGroup value={model.id} onValueChange={setModelId}>\n					<MenuRadioItem value="sol">5.6 Sol</MenuRadioItem>\n					<MenuRadioItem value="lite">5.6 Lite</MenuRadioItem>\n				</MenuRadioGroup>\n			</SettingsRow>\n			<SettingsRow label="Effort" value={effort}>\n				<MenuRadioGroup value={effort} onValueChange={setEffort}>\n					<MenuRadioItem value="Low">Low</MenuRadioItem>\n					<MenuRadioItem value="High">High</MenuRadioItem>\n				</MenuRadioGroup>\n			</SettingsRow>\n		</SettingsMenu>\n	}\n/>'
+    },
+    {
+      label: "Export options \u2014 the same shape, no chat involved",
+      code: '<SettingsMenu summary={`${format} \xB7 ${quality}`} side="bottom" align="start">\n	<SettingsRow label="Format" value={format}>\n		<MenuRadioGroup value={format} onValueChange={setFormat}>\n			<MenuRadioItem value="PNG">PNG</MenuRadioItem>\n			<MenuRadioItem value="SVG">SVG</MenuRadioItem>\n		</MenuRadioGroup>\n	</SettingsRow>\n	<SettingsRow label="Quality" value={quality}>\n		<MenuRadioGroup value={quality} onValueChange={setQuality}>\n			<MenuRadioItem value="Draft">Draft</MenuRadioItem>\n			<MenuRadioItem value="Final">Final</MenuRadioItem>\n		</MenuRadioGroup>\n	</SettingsRow>\n</SettingsMenu>'
+    },
+    {
+      label: "A flat row for a setting with nothing to choose",
+      code: '<SettingsMenu summary="Standard">\n	<SettingsRow label="Speed" value="Standard">\n		<MenuRadioGroup value="standard">\n			<MenuRadioItem value="standard">Standard</MenuRadioItem>\n			<MenuRadioItem value="priority">Priority</MenuRadioItem>\n		</MenuRadioGroup>\n	</SettingsRow>\n	<MenuSeparator />\n	<SettingsRow label="Plan" value="Team" />\n</SettingsMenu>'
+    }
+  ]
+};
+export {
+  settingsMenuMeta
+};

package/dist/components/settings-menu/settings-menu.variants.js

@@ -0,0 +1,15 @@
+// src/components/settings-menu/settings-menu.variants.ts
+var SETTINGS_TRIGGER_VARIANT = {
+  ghost: "ghost",
+  subtle: "secondary"
+};
+var SETTINGS_TRIGGER_SIZE = {
+  xs: "xs",
+  sm: "sm"
+};
+var settingsMenuTriggerClassName = "max-w-full [--button-icon:0.75rem] data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground";
+export {
+  SETTINGS_TRIGGER_SIZE,
+  SETTINGS_TRIGGER_VARIANT,
+  settingsMenuTriggerClassName
+};

package/dist/components/sheet/index.js

@@ -0,0 +1,29 @@
+// src/components/sheet/index.ts
+import {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetContent,
+  SheetTitle,
+  SheetDescription,
+  SheetHeader,
+  SheetList,
+  SheetFooter
+} from "./sheet.js";
+import { sheetVariants } from "./sheet.variants.js";
+import { sheetMeta } from "./sheet.meta.js";
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetList,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetMeta,
+  sheetVariants
+};

package/dist/components/sheet/sheet.js

@@ -0,0 +1,121 @@
+// src/components/sheet/sheet.tsx
+import { Drawer as Base } from "@base-ui/react/drawer";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { PresentationProvider, StackedActionsContext, usePresentation } from "../../lib/presentation.js";
+import { mergeRefs } from "../../lib/refs.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { sheetVariants } from "./sheet.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SWIPE_DIRECTION = {
+  right: "right",
+  left: "left",
+  top: "up",
+  bottom: "down"
+};
+var SheetSideContext = createContext(null);
+function Sheet(props) {
+  const [side, setSide] = useState("right");
+  return /* @__PURE__ */ jsx(SheetSideContext.Provider, { value: setSide, children: /* @__PURE__ */ jsx(Base.Root, { ...props, swipeDirection: SWIPE_DIRECTION[side] }) });
+}
+var SheetTrigger = Base.Trigger;
+var SheetClose = Base.Close;
+var SheetPortal = withPortalThemeScope(Base.Portal);
+function SheetContent({
+  className,
+  children,
+  side,
+  initialFocus,
+  ref,
+  ...props
+}) {
+  const reportSide = useContext(SheetSideContext);
+  const resolvedSide = side ?? "right";
+  useIsomorphicLayoutEffect(() => {
+    reportSide?.(resolvedSide);
+  }, [reportSide, resolvedSide]);
+  const popupRef = useRef(null);
+  const mergedRef = useMemo(() => mergeRefs(popupRef, ref), [ref]);
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(Base.Backdrop, { className: "fixed inset-0 z-(--z-overlay) bg-overlay/(--scrim-alpha) opacity-[calc(1_-_var(--drawer-swipe-progress))] motion-fade data-[swiping]:transition-none" }),
+    /* @__PURE__ */ jsx(Base.Viewport, { className: "fixed inset-0 z-(--z-overlay)", children: /* @__PURE__ */ jsx(
+      Base.Popup,
+      {
+        ref: mergedRef,
+        initialFocus: initialFocus === void 0 ? (type) => type === "touch" ? popupRef.current : true : initialFocus,
+        className: cn(sheetVariants({ side }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Base.Content, { className: "contents", children: /* @__PURE__ */ jsx(PresentationProvider, { value: resolvedSide === "bottom" ? "sheet" : "page", children }) })
+      }
+    ) })
+  ] });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Title,
+    {
+      className: cn("text-title-lg text-popover-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Description,
+    {
+      className: cn("text-body-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+function SheetList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-list",
+      className: cn(
+        "-mx-(--sheet-p) flex flex-col [--entity-radius:0px] [--entity-px:var(--sheet-p)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, children, ...props }) {
+  const stacked = usePresentation() === "sheet";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-actions": stacked ? "stack" : "row",
+      className: cn(
+        "mt-auto flex items-center justify-end gap-2",
+        className,
+        stacked && "w-full max-w-sm flex-col-reverse items-stretch justify-start self-center"
+      ),
+      ...props,
+      children: stacked ? /* @__PURE__ */ jsx(StackedActionsContext.Provider, { value: true, children }) : children
+    }
+  );
+}
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetList,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+};

package/dist/components/sheet/sheet.meta.js

@@ -0,0 +1,167 @@
+// src/components/sheet/sheet.meta.ts
+var sheetMeta = {
+  name: "Sheet",
+  summary: "Edge-anchored drawer over Base UI Drawer \u2014 focus trap, scroll lock, Esc/outside dismissal, portal backdrop, plus swipe-to-dismiss on touch. Slides in from a viewport edge via side and swipes back out toward the same edge.",
+  status: "stable",
+  keywords: [
+    "sheet",
+    "drawer",
+    "side panel",
+    "overlay",
+    "swipe to dismiss"
+  ],
+  usage: {
+    description: "Use Sheet for secondary workflows that slide in while preserving context from the underlying page.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for inspect, edit, filter, or create flows that relate to the current page."
+      },
+      {
+        guidance: "do",
+        description: "Include clear title, close path, and footer actions for task-oriented sheets."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Sheet for simple confirmations or deeply nested workflows."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it on desktop where a Dialog fits. A sheet's affordance is edge-anchored travel for thumb reach; on a wide viewport it becomes a dialog that arrives from the wrong place."
+      }
+    ],
+    anatomy: [
+      {
+        name: "SheetTrigger",
+        required: false,
+        description: "The element that opens the sheet."
+      },
+      {
+        name: "SheetContent",
+        required: true,
+        description: "The sliding panel content."
+      },
+      {
+        name: "SheetClose",
+        required: false,
+        description: "An explicit close control."
+      },
+      {
+        name: "SheetHeader",
+        required: false,
+        description: "The title and description region."
+      },
+      {
+        name: "SheetTitle",
+        required: false,
+        description: "The sheet heading."
+      },
+      {
+        name: "SheetDescription",
+        required: false,
+        description: "Supporting context for the sheet."
+      },
+      {
+        name: "SheetList",
+        required: false,
+        description: "Edge-to-edge rows (Entity) aligned with the header \u2014 a queue, notifications, a picker."
+      },
+      {
+        name: "SheetFooter",
+        required: false,
+        description: "Footer actions for the workflow."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Dialog",
+      "Popover",
+      "Sidebar"
+    ]
+  },
+  props: [
+    {
+      name: "Sheet (Root)",
+      type: "Base UI Drawer.Root props (open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, disablePointerDismissal, actionsRef, handle) \u2014 minus swipeDirection and snap points",
+      description: `Controls open state. Uncontrolled by default. The dismiss swipe direction is not a prop: it follows SheetContent's side. onOpenChange reports reason "swipe" when a swipe closed it.`
+    }
+  ],
+  subcomponents: [
+    {
+      name: "SheetContent",
+      type: 'Base UI Drawer.Popup props (initialFocus, finalFocus, \u2026) + side: "right" | "left" | "top" | "bottom" + className',
+      description: 'Backdrop + edge-anchored popup; portals to <body>. side picks which viewport edge the sheet anchors to and slides in from (defaults to "right"). Left/right are full-height side panels; top/bottom span the width up to 80vh. On touch it swipes closed toward that same edge (right swipes right, left swipes left, top swipes up, bottom swipes down).'
+    },
+    {
+      name: "SheetTrigger",
+      type: "Base UI Drawer.Trigger props (render)",
+      description: "Element that opens the sheet. Compose via render prop."
+    },
+    {
+      name: "SheetClose",
+      type: "Base UI Drawer.Close props (render)",
+      description: "Element that dismisses the sheet. Compose via render prop."
+    },
+    {
+      name: "SheetHeader",
+      type: 'ComponentProps<"div">',
+      description: "Top section holding SheetTitle/SheetDescription."
+    },
+    {
+      name: "SheetTitle",
+      type: "Base UI Drawer.Title props + className",
+      description: "The sheet's accessible name \u2014 wires aria-labelledby on the popup."
+    },
+    {
+      name: "SheetDescription",
+      type: "Base UI Drawer.Description props + className",
+      description: "Muted supporting line; wires aria-describedby."
+    },
+    {
+      name: "SheetList",
+      type: 'ComponentProps<"div">',
+      description: "Rows that run edge to edge in the sheet, Entity most often. It bleeds through the sheet's padding (--sheet-p) and hands it back to each row as --entity-px, so row content lines up with SheetHeader and a row's hover fill reaches the panel's edges. Without it a list of Entity rows sits 12px in from the header. The Sheet equivalent of CardList."
+    },
+    {
+      name: "SheetFooter",
+      type: 'ComponentProps<"div">',
+      description: "Bottom row for actions, pinned after the scrollable body. In a bottom sheet it stacks: full width, the primary on top, every button at the cta height."
+    }
+  ],
+  variants: {
+    side: ["right", "left", "top", "bottom"]
+  },
+  tokensUsed: ["popover", "popover-foreground", "border", "muted-foreground"],
+  a11y: [
+    "Base UI provides focus trapping, scroll lock, aria-modal, and labelled-by wiring (SheetTitle).",
+    "The panel scrolls its own content (thin scrollbar, contained overscroll) when it outgrows its bound \u2014 the full height on left/right, 80vh on top/bottom.",
+    "Esc and click-outside dismiss by default; on touch, a swipe toward the sheet's own edge dismisses too. A short or slow drag springs back.",
+    "Swipe is an extra path, never the only one: Esc, click-outside and SheetClose all still work.",
+    "Focus matches Dialog: the first tabbable on mouse/keyboard open, the panel itself on touch (so the virtual keyboard stays down); focus returns to the trigger on close.",
+    "Render a SheetClose inside SheetContent so screen-reader users can escape the popup.",
+    "Slide animation runs via data-[starting-style]/data-[ending-style] attributes on the motion-duration token; while swiping the panel tracks the finger directly, and a released swipe finishes on the same token (scaled by flick speed), so reduced motion makes it instant.",
+    "A mouse drag that starts on sheet content selects text rather than dragging the panel; mouse dragging only starts from the padding edge."
+  ],
+  examples: [
+    {
+      label: "List of rows (a queue)",
+      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Queue</Button>} /><SheetContent><SheetHeader><SheetTitle>Up next</SheetTitle></SheetHeader><SheetList>{queue.map((track) => <Entity key={track.id} leading={<GradientArt aria-hidden seed={track.title} className="size-10 rounded-sm" />} title={track.title} subtitle={track.artist} />)}</SheetList></SheetContent></Sheet>'
+    },
+    {
+      label: "Basic (right)",
+      code: '<Sheet><SheetTrigger render={<Button>Open</Button>} /><SheetContent><SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the feed.</SheetDescription></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Cancel</Button>} /><SheetClose render={<Button>Apply</Button>} /></SheetFooter></SheetContent></Sheet>'
+    },
+    {
+      label: "Left side",
+      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Menu</Button>} /><SheetContent side="left"><SheetHeader><SheetTitle>Navigation</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
+    },
+    {
+      label: "Bottom side",
+      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Edition details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
+    }
+  ]
+};
+export {
+  sheetMeta
+};

package/dist/components/sheet/sheet.variants.js

@@ -0,0 +1,21 @@
+// src/components/sheet/sheet.variants.ts
+import { cva } from "class-variance-authority";
+var sheetVariants = cva(
+  "fixed z-(--z-overlay) flex flex-col gap-4 overflow-y-auto overscroll-contain border-border-floating bg-popover sable-surface-popover [--sheet-p:--spacing(6)] p-(--sheet-p) text-popover-foreground shadow-lg outline-none transition-transform duration-(--motion-duration-base) ease-emphasized scrollbar-quiet data-[swiping]:select-none data-[swipe-dismiss]:duration-[calc(var(--motion-duration-base)*var(--drawer-swipe-strength))]",
+  {
+    variants: {
+      side: {
+        right: "inset-y-0 right-0 [transform:translateX(var(--drawer-swipe-movement-x))] h-full w-95 max-w-[90vw] border-l data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full",
+        left: "inset-y-0 left-0 [transform:translateX(var(--drawer-swipe-movement-x))] h-full w-95 max-w-[90vw] border-r data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
+        top: "inset-x-0 top-0 [transform:translateY(var(--drawer-swipe-movement-y))] h-auto max-h-[80vh] w-full border-b data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full",
+        bottom: "inset-x-0 bottom-0 [transform:translateY(var(--drawer-swipe-movement-y))] h-auto max-h-[80vh] w-full border-t data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+export {
+  sheetVariants
+};

package/dist/components/show-more/index.js

@@ -0,0 +1,7 @@
+// src/components/show-more/index.ts
+import { ShowMore } from "./show-more.js";
+import { showMoreMeta } from "./show-more.meta.js";
+export {
+  ShowMore,
+  showMoreMeta
+};

package/dist/components/show-more/show-more.js

@@ -0,0 +1,87 @@
+"use client";
+
+// src/components/show-more/show-more.tsx
+import { useCallback, useRef, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useResizeObserver } from "../../lib/use-resize-observer.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function lineHeightOf(el) {
+  const target = el.firstElementChild ?? el;
+  const style = getComputedStyle(target);
+  const lh = Number.parseFloat(style.lineHeight);
+  if (Number.isFinite(lh)) return lh;
+  return (Number.parseFloat(style.fontSize) || 16) * 1.2;
+}
+function ShowMore({
+  children,
+  collapsedHeight = 96,
+  collapsedLines,
+  className,
+  ...props
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const contentRef = useRef(null);
+  const [contentHeight, setContentHeight] = useState(collapsedHeight);
+  const [linesHeight, setLinesHeight] = useState(null);
+  const measure = useCallback(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setContentHeight(el.offsetHeight);
+    setLinesHeight(
+      collapsedLines !== void 0 ? Math.round(collapsedLines * lineHeightOf(el)) : null
+    );
+  }, [collapsedLines]);
+  useResizeObserver(measure, [contentRef]);
+  const collapsed = linesHeight ?? collapsedHeight;
+  const overflowing = contentHeight > collapsed;
+  const maxHeight = expanded ? contentHeight : collapsed;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "overflow-hidden transition-[max-height] duration-(--motion-duration-slow) ease-decelerate",
+          style: { maxHeight },
+          children: /* @__PURE__ */ jsx("div", { ref: contentRef, children })
+        }
+      ),
+      overflowing && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-[var(--sable-surface-bg,var(--background))] to-transparent motion-interactive",
+            expanded && "opacity-0"
+          )
+        }
+      )
+    ] }),
+    overflowing && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "link",
+        size: "sm",
+        onClick: () => setExpanded((prev) => !prev),
+        "aria-expanded": expanded,
+        className: "self-start px-0",
+        iconEnd: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-down",
+            className: cn(
+              "transition-transform duration-(--motion-duration-fast) ease-standard",
+              expanded && "rotate-180"
+            )
+          }
+        ),
+        children: expanded ? "Show less" : "Show more"
+      }
+    )
+  ] });
+}
+ShowMore.displayName = "ShowMore";
+export {
+  ShowMore
+};