@craftzbay/ui 0.9.0 → 0.11.0

package/dist-lib/components/ui/Select.d.ts

@@ -3,7 +3,12 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 export declare const Select: import('react').FC<SelectPrimitive.SelectProps>;
 export declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
 export interface SelectTriggerProps extends Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'> {
-    /** Placeholder shown when no value is selected. */
+    /**
+     * Placeholder shown when no value is selected. Also used as the trigger's
+     * accessible name when no `aria-label` / `aria-labelledby` / `id` (external
+     * `<Label htmlFor>`) is supplied — `role="combobox"` takes no name from
+     * its content.
+     */
     placeholder?: string;
     /** Trigger height — matches Input sizes. */
     size?: 'sm' | 'md' | 'lg';

package/dist-lib/components/ui/Select.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import * as a from "@radix-ui/react-select";
+import { Check as S, ChevronDown as x, ChevronUp as v, ChevronsUpDown as N } from "../../icons/index.js";
+import { cn as c } from "../../lib/utils.js";
+import { useStrings as y } from "../../hooks/use-strings.js";
+const G = a.Root, L = a.Value, w = l(function({ className: r, placeholder: o, size: e = "md", tone: i = "default", ...n }, g) {
+  const b = y(), h = !!(n["aria-label"] || n["aria-labelledby"] || n.id);
+  return /* @__PURE__ */ d(
+    a.Trigger,
+    {
+      ref: g,
+      "aria-label": h ? void 0 : o ?? b.select.placeholder,
+      className: c(
+        "bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-lg md:text-sm",
+        "[&>span]:min-w-0 [&>span]:truncate",
+        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+        "outline-none",
+        "focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[placeholder]:text-foreground-subtle",
+        e === "sm" && "h-8 px-2.5",
+        e === "md" && "h-9 px-3",
+        e === "lg" && "h-10 px-3.5",
+        i === "default" ? "border-border-input focus-visible:border-accent focus-visible:ring-ring" : "border-danger focus-visible:border-danger focus-visible:ring-danger",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ t(a.Value, { placeholder: o }),
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(N, { className: "text-foreground-subtle size-4 shrink-0", "aria-hidden": !0 }) })
+      ]
+    }
+  );
+});
+w.displayName = "SelectTrigger";
+const u = "flex h-6 cursor-default items-center justify-center text-foreground-subtle", m = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(a.ScrollUpButton, { ref: e, className: c(u, r), ...o, children: /* @__PURE__ */ t(v, { className: "size-4", "aria-hidden": !0 }) });
+});
+m.displayName = "SelectScrollUpButton";
+const p = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(a.ScrollDownButton, { ref: e, className: c(u, r), ...o, children: /* @__PURE__ */ t(x, { className: "size-4", "aria-hidden": !0 }) });
+});
+p.displayName = "SelectScrollDownButton";
+const B = l(function({ className: r, children: o, position: e = "popper", ...i }, n) {
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ d(
+    a.Content,
+    {
+      ref: n,
+      position: e,
+      className: c(
+        "z-[var(--z-popover)] max-h-96 min-w-[var(--radix-select-trigger-width)]",
+        "border-border bg-popover text-popover-foreground overflow-hidden rounded-lg border",
+        "shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        e === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        r
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ t(m, {}),
+        /* @__PURE__ */ t(a.Viewport, { className: "p-1", children: o }),
+        /* @__PURE__ */ t(p, {})
+      ]
+    }
+  ) });
+});
+B.displayName = "SelectContent";
+const f = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(
+    a.Label,
+    {
+      ref: e,
+      className: c("text-foreground-subtle px-2 py-1.5 text-xs font-medium", r),
+      ...o
+    }
+  );
+});
+f.displayName = "SelectLabel";
+const C = l(
+  function({ className: r, children: o, leadingIcon: e, ...i }, n) {
+    return /* @__PURE__ */ d(
+      a.Item,
+      {
+        ref: n,
+        className: c(
+          "relative flex w-full cursor-default items-center gap-2 select-none",
+          "text-foreground rounded-sm px-2 py-1.5 pr-8 text-sm outline-none",
+          "data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          r
+        ),
+        ...i,
+        children: [
+          e && /* @__PURE__ */ t("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: e }),
+          /* @__PURE__ */ t(a.ItemText, { children: o }),
+          /* @__PURE__ */ t("span", { className: "absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { children: /* @__PURE__ */ t(S, { className: "text-accent size-4", "aria-hidden": !0 }) }) })
+        ]
+      }
+    );
+  }
+);
+C.displayName = "SelectItem";
+const z = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(
+    a.Separator,
+    {
+      ref: e,
+      className: c("bg-border -mx-1 my-1 h-px", r),
+      ...o
+    }
+  );
+});
+z.displayName = "SelectSeparator";
+const I = l(
+  function({ label: r, children: o, ...e }, i) {
+    return /* @__PURE__ */ d(a.Group, { ref: i, ...e, children: [
+      r && /* @__PURE__ */ t(f, { children: r }),
+      o
+    ] });
+  }
+);
+I.displayName = "SelectGroup";
+export {
+  G as Select,
+  B as SelectContent,
+  I as SelectGroup,
+  C as SelectItem,
+  f as SelectLabel,
+  p as SelectScrollDownButton,
+  m as SelectScrollUpButton,
+  z as SelectSeparator,
+  w as SelectTrigger,
+  L as SelectValue
+};
+//# sourceMappingURL=Select.js.map

package/dist-lib/components/ui/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/ui/Select.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type ReactNode } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { Check, ChevronDown, ChevronUp, ChevronsUpDown } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Compound API:\n *\n *    <Select value={…} onValueChange={…}>\n *      <SelectTrigger placeholder=\"Pick one\" />\n *      <SelectContent>\n *        <SelectGroup label=\"Active\">\n *          <SelectItem value=\"a\">Apple</SelectItem>\n *          <SelectItem value=\"b\">Banana</SelectItem>\n *        </SelectGroup>\n *      </SelectContent>\n *    </Select>\n *\n *  All accessibility is handled by Radix: keyboard navigation, type-ahead,\n *  focus trap, ARIA roles. We only style.\n * --------------------------------------------------------------------------- */\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\n\nexport interface SelectTriggerProps extends Omit<\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n  'children'\n> {\n  /**\n   * Placeholder shown when no value is selected. Also used as the trigger's\n   * accessible name when no `aria-label` / `aria-labelledby` / `id` (external\n   * `<Label htmlFor>`) is supplied — `role=\"combobox\"` takes no name from\n   * its content.\n   */\n  placeholder?: string;\n  /** Trigger height — matches Input sizes. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Visual tone — `error` swaps the border + ring to danger. */\n  tone?: 'default' | 'error';\n}\n\nexport const SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(function SelectTrigger({ className, placeholder, size = 'md', tone = 'default', ...props }, ref) {\n  const strings = useStrings();\n  const hasName = Boolean(props['aria-label'] || props['aria-labelledby'] || props.id);\n  return (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      aria-label={hasName ? undefined : (placeholder ?? strings.select.placeholder)}\n      className={cn(\n        'bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-lg md:text-sm',\n        '[&>span]:min-w-0 [&>span]:truncate',\n        'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n        'outline-none',\n        'focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[placeholder]:text-foreground-subtle',\n        size === 'sm' && 'h-8 px-2.5',\n        size === 'md' && 'h-9 px-3',\n        size === 'lg' && 'h-10 px-3.5',\n        tone === 'default'\n          ? 'border-border-input focus-visible:border-accent focus-visible:ring-ring'\n          : 'border-danger focus-visible:border-danger focus-visible:ring-danger',\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Value placeholder={placeholder} />\n      <SelectPrimitive.Icon asChild>\n        <ChevronsUpDown className=\"text-foreground-subtle size-4 shrink-0\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n});\nSelectTrigger.displayName = 'SelectTrigger';\n\nconst scrollBtn = 'flex h-6 cursor-default items-center justify-center text-foreground-subtle';\n\nexport const SelectScrollUpButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(function SelectScrollUpButton({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.ScrollUpButton ref={ref} className={cn(scrollBtn, className)} {...props}>\n      <ChevronUp className=\"size-4\" aria-hidden />\n    </SelectPrimitive.ScrollUpButton>\n  );\n});\nSelectScrollUpButton.displayName = 'SelectScrollUpButton';\n\nexport const SelectScrollDownButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(function SelectScrollDownButton({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.ScrollDownButton ref={ref} className={cn(scrollBtn, className)} {...props}>\n      <ChevronDown className=\"size-4\" aria-hidden />\n    </SelectPrimitive.ScrollDownButton>\n  );\n});\nSelectScrollDownButton.displayName = 'SelectScrollDownButton';\n\nexport const SelectContent = forwardRef<\n  ElementRef<typeof SelectPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(function SelectContent({ className, children, position = 'popper', ...props }, ref) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        className={cn(\n          'z-[var(--z-popover)] max-h-96 min-w-[var(--radix-select-trigger-width)]',\n          'border-border bg-popover text-popover-foreground overflow-hidden rounded-lg border',\n          'shadow-md',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n});\nSelectContent.displayName = 'SelectContent';\n\nexport const SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(function SelectLabel({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      className={cn('text-foreground-subtle px-2 py-1.5 text-xs font-medium', className)}\n      {...props}\n    />\n  );\n});\nSelectLabel.displayName = 'SelectLabel';\n\nexport interface SelectItemProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Icon shown to the left of the label. */\n  leadingIcon?: ReactNode;\n}\n\nexport const SelectItem = forwardRef<ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n  function SelectItem({ className, children, leadingIcon, ...props }, ref) {\n    return (\n      <SelectPrimitive.Item\n        ref={ref}\n        className={cn(\n          'relative flex w-full cursor-default items-center gap-2 select-none',\n          'text-foreground rounded-sm px-2 py-1.5 pr-8 text-sm outline-none',\n          'data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground',\n          'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {leadingIcon && (\n          <span className=\"text-foreground-subtle flex items-center [&_svg]:size-4\">\n            {leadingIcon}\n          </span>\n        )}\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n        <span className=\"absolute right-2 flex items-center justify-center\">\n          <SelectPrimitive.ItemIndicator>\n            <Check className=\"text-accent size-4\" aria-hidden />\n          </SelectPrimitive.ItemIndicator>\n        </span>\n      </SelectPrimitive.Item>\n    );\n  },\n);\nSelectItem.displayName = 'SelectItem';\n\nexport const SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(function SelectSeparator({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n});\nSelectSeparator.displayName = 'SelectSeparator';\n\n/** Optional grouping with a label header. Pure composition over Radix Group + Label. */\nexport interface SelectGroupProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {\n  label?: ReactNode;\n}\nexport const SelectGroup = forwardRef<ElementRef<typeof SelectPrimitive.Group>, SelectGroupProps>(\n  function SelectGroup({ label, children, ...props }, ref) {\n    return (\n      <SelectPrimitive.Group ref={ref} {...props}>\n        {label && <SelectLabel>{label}</SelectLabel>}\n        {children}\n      </SelectPrimitive.Group>\n    );\n  },\n);\nSelectGroup.displayName = 'SelectGroup';\n\n/**\n * Compose `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` for a\n * single-choice picker. Keyboard, type-ahead, and ARIA come from Radix.\n *\n * @example Basic\n *   <Select onValueChange={setStatus}>\n *     <SelectTrigger placeholder=\"Status\" />\n *     <SelectContent>\n *       <SelectItem value=\"open\">Open</SelectItem>\n *       <SelectItem value=\"closed\">Closed</SelectItem>\n *     </SelectContent>\n *   </Select>\n *\n * @example Grouped\n *   <SelectContent>\n *     <SelectGroup label=\"People\">\n *       <SelectItem value=\"anu\">Anu</SelectItem>\n *       <SelectItem value=\"bat\">Bat</SelectItem>\n *     </SelectGroup>\n *     <SelectSeparator />\n *     <SelectGroup label=\"Bots\">\n *       <SelectItem value=\"robo\">Robo</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n *\n * @do Use `placeholder` on the trigger when there is no default value.\n * @dont Use Select for more than ~12 options — switch to `Combobox`.\n */\n"],"names":["Select","SelectPrimitive","SelectValue","SelectTrigger","forwardRef","className","placeholder","size","tone","props","ref","strings","useStrings","hasName","jsxs","cn","jsx","ChevronsUpDown","scrollBtn","SelectScrollUpButton","ChevronUp","SelectScrollDownButton","ChevronDown","SelectContent","children","position","SelectLabel","SelectItem","leadingIcon","Check","SelectSeparator","SelectGroup","label"],"mappings":"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"}

package/dist-lib/components/ui/Separator.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import * as m from "@radix-ui/react-separator";
+import { cn as f } from "../../lib/utils.js";
+const l = i(function({ className: o, orientation: r = "horizontal", decorative: t = !0, ...a }, e) {
+  return /* @__PURE__ */ p(
+    m.Root,
+    {
+      ref: e,
+      orientation: r,
+      decorative: t,
+      className: f(
+        "bg-border shrink-0",
+        r === "horizontal" ? "h-px w-full" : "h-full w-px",
+        o
+      ),
+      ...a
+    }
+  );
+});
+l.displayName = "Separator";
+export {
+  l as Separator
+};
+//# sourceMappingURL=Separator.js.map

package/dist-lib/components/ui/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../src/components/ui/Separator.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { cn } from '@/lib/utils';\n\n/**\n * Hairline divider. Decorative by default (no role announced). Pass\n * `decorative={false}` when the separator carries semantic meaning, e.g.\n * splitting two regions in a landmark.\n *\n * @example Section divider\n *   <Separator className=\"my-6\" />\n *\n * @example Vertical inside a toolbar\n *   <Separator orientation=\"vertical\" className=\"h-5 mx-2\" />\n */\nexport const Separator = forwardRef<\n  ElementRef<typeof SeparatorPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(function Separator({ className, orientation = 'horizontal', decorative = true, ...props }, ref) {\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      orientation={orientation}\n      decorative={decorative}\n      className={cn(\n        'bg-border shrink-0',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSeparator.displayName = 'Separator';\n"],"names":["Separator","forwardRef","className","orientation","decorative","props","ref","jsx","SeparatorPrimitive","cn"],"mappings":";;;;;AAiBO,MAAMA,IAAYC,EAGvB,SAAmB,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,YAAAC,IAAa,IAAM,GAAGC,EAAA,GAASC,GAAK;AAChG,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,KAAAF;AAAA,MACA,aAAAH;AAAA,MACA,YAAAC;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACAN,MAAgB,eAAe,gBAAgB;AAAA,QAC/CD;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDL,EAAU,cAAc;"}

package/dist-lib/components/ui/Sheet.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
+import { ReturnFocusRef } from '../../lib/return-focus.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 export declare const Sheet: import('react').FC<DialogPrimitive.DialogProps>;
 export declare const SheetTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -10,6 +11,14 @@ declare const sheet: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheet> {
     showClose?: boolean;
+    /**
+     * Element to focus when the overlay closes. Overrides Radix's default
+     * (the element focused when the content mounted), which is `<body>` for
+     * controlled overlays opened from a pointer click on a non-focusable /
+     * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and
+     * wins if it calls `preventDefault()`.
+     */
+    returnFocusTo?: ReturnFocusRef;
 }
 export declare const SheetContent: import('react').ForwardRefExoticComponent<SheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/Sheet.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import * as t from "@radix-ui/react-dialog";
+import { X as g } from "../../icons/index.js";
+import { cn as i } from "../../lib/utils.js";
+import { useStrings as b } from "../../hooks/use-strings.js";
+import { withReturnFocus as x } from "../../lib/return-focus.js";
+import { cva as v } from "class-variance-authority";
+const k = t.Root, A = t.Trigger, V = t.Close, S = t.Portal, l = n(function({ className: e, ...r }, s) {
+  return /* @__PURE__ */ o(
+    t.Overlay,
+    {
+      ref: s,
+      className: i(
+        "bg-overlay fixed inset-0 z-[var(--z-overlay)]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        e
+      ),
+      ...r
+    }
+  );
+});
+l.displayName = "SheetOverlay";
+const y = v(
+  [
+    "fixed z-[var(--z-modal)] bg-card text-card-foreground shadow-lg",
+    "flex flex-col gap-4 p-6",
+    // Safe-area insets for notched devices (consumers set viewport-fit=cover).
+    "pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:duration-[var(--duration-base)] data-[state=open]:duration-[var(--duration-slow)]"
+  ],
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b border-border data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 border-t border-border data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 max-w-md border-r border-border data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+        right: "inset-y-0 right-0 h-full w-3/4 max-w-md border-l border-border data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+      }
+    },
+    defaultVariants: { side: "right" }
+  }
+), N = n(function({
+  className: e,
+  children: r,
+  side: s = "right",
+  showClose: m = !0,
+  returnFocusTo: f,
+  onCloseAutoFocus: c,
+  ...u
+}, h) {
+  const p = b();
+  return /* @__PURE__ */ d(S, { children: [
+    /* @__PURE__ */ o(l, {}),
+    /* @__PURE__ */ d(
+      t.Content,
+      {
+        ref: h,
+        className: i(y({ side: s }), e),
+        onCloseAutoFocus: x(f, c),
+        ...u,
+        children: [
+          r,
+          m && /* @__PURE__ */ o(
+            t.Close,
+            {
+              "aria-label": p.sheet.close,
+              className: i(
+                "text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md",
+                "hover:bg-background-muted hover:text-foreground",
+                "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                "transition-colors duration-[var(--duration-fast)]"
+              ),
+              children: /* @__PURE__ */ o(g, { className: "size-4", "aria-hidden": !0 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+N.displayName = "SheetContent";
+function w({ className: a, ...e }) {
+  return /* @__PURE__ */ o("div", { className: i("flex flex-col gap-1", a), ...e });
+}
+w.displayName = "SheetHeader";
+function C({ className: a, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: i(
+        "mt-auto flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end",
+        a
+      ),
+      ...e
+    }
+  );
+}
+C.displayName = "SheetFooter";
+const z = n(function({ className: e, ...r }, s) {
+  return /* @__PURE__ */ o(
+    t.Title,
+    {
+      ref: s,
+      className: i("text-foreground text-lg leading-tight font-semibold", e),
+      ...r
+    }
+  );
+});
+z.displayName = "SheetTitle";
+const T = n(function({ className: e, ...r }, s) {
+  return /* @__PURE__ */ o(
+    t.Description,
+    {
+      ref: s,
+      className: i("text-foreground-muted text-sm", e),
+      ...r
+    }
+  );
+});
+T.displayName = "SheetDescription";
+export {
+  k as Sheet,
+  V as SheetClose,
+  N as SheetContent,
+  T as SheetDescription,
+  C as SheetFooter,
+  w as SheetHeader,
+  S as SheetPortal,
+  z as SheetTitle,
+  A as SheetTrigger
+};
+//# sourceMappingURL=Sheet.js.map

package/dist-lib/components/ui/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sources":["../../../src/components/ui/Sheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\nimport { withReturnFocus, type ReturnFocusRef } from '@/lib/return-focus';\n\n/* -----------------------------------------------------------------------------\n *  Sheet — drawer-style overlay. Built on Radix Dialog (focus trap, escape,\n *  click-outside come from there). Slides in from one of four sides.\n * --------------------------------------------------------------------------- */\n\nexport const Sheet = DialogPrimitive.Root;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\nexport const SheetPortal = DialogPrimitive.Portal;\n\nconst SheetOverlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function SheetOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n        'bg-overlay fixed inset-0 z-[var(--z-overlay)]',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSheetOverlay.displayName = 'SheetOverlay';\n\nconst sheet = cva(\n  [\n    'fixed z-[var(--z-modal)] bg-card text-card-foreground shadow-lg',\n    'flex flex-col gap-4 p-6',\n    // Safe-area insets for notched devices (consumers set viewport-fit=cover).\n    'pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=closed]:duration-[var(--duration-base)] data-[state=open]:duration-[var(--duration-slow)]',\n  ],\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-border data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-border data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 max-w-md border-r border-border data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',\n        right:\n          'inset-y-0 right-0 h-full w-3/4 max-w-md border-l border-border data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',\n      },\n    },\n    defaultVariants: { side: 'right' },\n  },\n);\n\nexport interface SheetContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheet> {\n  showClose?: boolean;\n  /**\n   * Element to focus when the overlay closes. Overrides Radix's default\n   * (the element focused when the content mounted), which is `<body>` for\n   * controlled overlays opened from a pointer click on a non-focusable /\n   * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and\n   * wins if it calls `preventDefault()`.\n   */\n  returnFocusTo?: ReturnFocusRef;\n}\n\nexport const SheetContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(function SheetContent(\n  {\n    className,\n    children,\n    side = 'right',\n    showClose = true,\n    returnFocusTo,\n    onCloseAutoFocus,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(sheet({ side }), className)}\n        onCloseAutoFocus={withReturnFocus(returnFocusTo, onCloseAutoFocus)}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label={strings.sheet.close}\n            className={cn(\n              'text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md',\n              'hover:bg-background-muted hover:text-foreground',\n              'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </SheetPortal>\n  );\n});\nSheetContent.displayName = 'SheetContent';\n\nexport function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col gap-1', className)} {...props} />;\n}\nSheetHeader.displayName = 'SheetHeader';\n\nexport function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nSheetFooter.displayName = 'SheetFooter';\n\nexport const SheetTitle = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function SheetTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn('text-foreground text-lg leading-tight font-semibold', className)}\n      {...props}\n    />\n  );\n});\nSheetTitle.displayName = 'SheetTitle';\n\nexport const SheetDescription = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function SheetDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nSheetDescription.displayName = 'SheetDescription';\n\n/**\n * @example Right-side filter drawer\n *   <Sheet>\n *     <SheetTrigger asChild><Button variant=\"outline\">Filters</Button></SheetTrigger>\n *     <SheetContent side=\"right\">\n *       <SheetHeader>\n *         <SheetTitle>Filters</SheetTitle>\n *         <SheetDescription>Refine the result set.</SheetDescription>\n *       </SheetHeader>\n *       …\n *       <SheetFooter>\n *         <SheetClose asChild><Button variant=\"outline\">Cancel</Button></SheetClose>\n *         <Button>Apply</Button>\n *       </SheetFooter>\n *     </SheetContent>\n *   </Sheet>\n *\n * @do Use right side for filters/inspectors, left for navigation, bottom for\n *      mobile sheets.\n * @dont Use a full-screen sheet on desktop — prefer Dialog or a dedicated page.\n */\n"],"names":["Sheet","DialogPrimitive","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","forwardRef","className","props","ref","jsx","cn","sheet","cva","SheetContent","children","side","showClose","returnFocusTo","onCloseAutoFocus","strings","useStrings","jsxs","withReturnFocus","X","SheetHeader","SheetFooter","SheetTitle","SheetDescription"],"mappings":"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"}

package/dist-lib/components/ui/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 interface SidebarContextValue {
     collapsed: boolean;
 }
@@ -20,6 +20,7 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
 /**
  * App-level navigation rail. Holds `SidebarSection` → `SidebarItem` lists,
  * and optionally a `footer`. Supports collapse to icon-only on desktop.
+ * Below `md` the rail is hidden — pair it with a Sheet / Drawer for mobile.
  *
  * @example
  *   <Sidebar footer={<UserCard />}>
@@ -45,32 +46,46 @@ export declare function SidebarSection({ label, className, children, ...props }:
 export declare namespace SidebarSection {
     var displayName: string;
 }
-export interface SidebarItemProps extends HTMLAttributes<HTMLAnchorElement> {
+interface SidebarItemBaseProps {
     /** Lucide icon shown to the left. */
     icon?: ReactNode;
     /** Mark as the current page. */
     active?: boolean;
-    /** Optional `href` — when absent, renders as a `<button>` so consumers can
-     *  bind their own handler / routing wrapper via `onClick`. */
-    href?: string;
     /** Trailing badge / counter slot. */
     trailing?: ReactNode;
     /** Render a sub-item indented under a parent. */
     sub?: boolean;
+    /**
+     * Tooltip text shown while the sidebar is collapsed. Defaults to `children`
+     * when that is a plain string.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Render the child element (router `<Link>`) instead of `<a>`/`<button>`.
+     * The child receives className, aria-current and the item content.
+     */
+    asChild?: boolean;
 }
-export declare function SidebarItem({ icon, active, href, trailing, sub, className, children, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SidebarItem {
-    var displayName: string;
-}
+type SidebarItemAnchorProps = SidebarItemBaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Renders an `<a>`. Omit to render a `<button>`. */
+    href: string;
+};
+type SidebarItemButtonProps = SidebarItemBaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+};
+/** Discriminated on `href`: with it the item is an anchor, without it a button. */
+export type SidebarItemProps = SidebarItemAnchorProps | SidebarItemButtonProps;
+export declare const SidebarItem: import('react').ForwardRefExoticComponent<SidebarItemProps & import('react').RefAttributes<HTMLElement>>;
 /** Lightweight collapsible sub-section inside the sidebar. */
-export interface SidebarGroupProps {
+export interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
     icon?: ReactNode;
     label: ReactNode;
+    /** Initial open state (uncontrolled). */
     defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function SidebarGroup({ icon, label, defaultOpen, children }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SidebarGroup {
-    var displayName: string;
-}
+export declare const SidebarGroup: import('react').ForwardRefExoticComponent<SidebarGroupProps & import('react').RefAttributes<HTMLLIElement>>;
 export {};