@craftzbay/ui 0.10.0 → 0.11.1

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

@@ -2,17 +2,18 @@
 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 h } from "../../icons/index.js";
+import { X as g } from "../../icons/index.js";
 import { cn as i } from "../../lib/utils.js";
-import { useStrings as p } from "../../hooks/use-strings.js";
-import { cva as g } from "class-variance-authority";
-const P = t.Root, F = t.Trigger, H = t.Close, b = t.Portal, l = n(function({ className: e, ...r }, s) {
+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(
-        "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+        "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
@@ -22,10 +23,12 @@ const P = t.Root, F = t.Trigger, H = t.Close, b = t.Portal, l = n(function({ cla
   );
 });
 l.displayName = "SheetOverlay";
-const x = g(
+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)]"
   ],
@@ -40,74 +43,94 @@ const x = g(
     },
     defaultVariants: { side: "right" }
   }
-), v = n(function({ className: e, children: r, side: s = "right", showClose: c = !0, ...f }, m) {
-  const u = p();
-  return /* @__PURE__ */ d(b, { children: [
+), 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: m, className: i(x({ side: s }), e), ...f, children: [
-      r,
-      c && /* @__PURE__ */ o(
-        t.Close,
-        {
-          "aria-label": u.sheet.close,
-          className: i(
-            "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle",
-            "hover:bg-background-muted hover:text-foreground",
-            "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
-            "transition-colors duration-[var(--duration-fast)]"
-          ),
-          children: /* @__PURE__ */ o(h, { className: "size-4", "aria-hidden": !0 })
-        }
-      )
-    ] })
+    /* @__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 })
+            }
+          )
+        ]
+      }
+    )
   ] });
 });
-v.displayName = "SheetContent";
-function S({ className: a, ...e }) {
+N.displayName = "SheetContent";
+function w({ className: a, ...e }) {
   return /* @__PURE__ */ o("div", { className: i("flex flex-col gap-1", a), ...e });
 }
-S.displayName = "SheetHeader";
-function y({ className: 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),
+      className: i(
+        "mt-auto flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end",
+        a
+      ),
       ...e
     }
   );
 }
-y.displayName = "SheetFooter";
-const N = n(function({ className: e, ...r }, s) {
+C.displayName = "SheetFooter";
+const z = n(function({ className: e, ...r }, s) {
   return /* @__PURE__ */ o(
     t.Title,
     {
       ref: s,
-      className: i("text-lg font-semibold text-foreground leading-tight", e),
+      className: i("text-foreground text-lg leading-tight font-semibold", e),
       ...r
     }
   );
 });
-N.displayName = "SheetTitle";
-const w = n(function({ className: e, ...r }, s) {
+z.displayName = "SheetTitle";
+const T = n(function({ className: e, ...r }, s) {
   return /* @__PURE__ */ o(
     t.Description,
     {
       ref: s,
-      className: i("text-sm text-foreground-muted", e),
+      className: i("text-foreground-muted text-sm", e),
       ...r
     }
   );
 });
-w.displayName = "SheetDescription";
+T.displayName = "SheetDescription";
 export {
-  P as Sheet,
-  H as SheetClose,
-  v as SheetContent,
-  w as SheetDescription,
-  y as SheetFooter,
-  S as SheetHeader,
-  b as SheetPortal,
-  N as SheetTitle,
-  F as SheetTrigger
+  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

@@ -1 +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';\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        'fixed inset-0 z-[var(--z-overlay)] bg-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    '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>,\n    VariantProps<typeof sheet> {\n  showClose?: boolean;\n}\n\nexport const SheetContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(function SheetContent({ className, children, side = 'right', showClose = true, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <DialogPrimitive.Content ref={ref} className={cn(sheet({ side }), className)} {...props}>\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label={strings.sheet.close}\n            className={cn(\n              'absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle',\n              'hover:bg-background-muted hover:text-foreground',\n              'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card',\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('mt-auto flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end', className)}\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-lg font-semibold text-foreground leading-tight', 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-sm text-foreground-muted', 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","strings","useStrings","jsxs","X","SheetHeader","SheetFooter","SheetTitle","SheetDescription"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAQC,EAAgB,MACxBC,IAAeD,EAAgB,SAC/BE,IAAaF,EAAgB,OAC7BG,IAAcH,EAAgB,QAErCI,IAAeC,EAGnB,SAAsB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACpD,SACE,gBAAAC;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDH,EAAa,cAAc;AAE3B,MAAMO,IAAQC;AAAA,EACZ;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,QACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB,EAAE,MAAM,QAAA;AAAA,EAAQ;AAErC,GAQaC,IAAeR,EAG1B,SAAsB,EAAE,WAAAC,GAAW,UAAAQ,GAAU,MAAAC,IAAO,SAAS,WAAAC,IAAY,IAAM,GAAGT,EAAA,GAASC,GAAK;AAChG,QAAMS,IAAUC,EAAA;AAChB,2BACGf,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAM,EAACL,GAAA,EAAa;AAAA,IACd,gBAAAe,EAACnB,EAAgB,SAAhB,EAAwB,KAAAQ,GAAU,WAAWE,EAAGC,EAAM,EAAE,MAAAI,GAAM,GAAGT,CAAS,GAAI,GAAGC,GAC/E,UAAA;AAAA,MAAAO;AAAA,MACAE,KACC,gBAAAP;AAAA,QAACT,EAAgB;AAAA,QAAhB;AAAA,UACC,cAAYiB,EAAQ,MAAM;AAAA,UAC1B,WAAWP;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAA,gBAAAD,EAACW,GAAA,EAAE,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACpC,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ,CAAC;AACDP,EAAa,cAAc;AAEpB,SAASQ,EAAY,EAAE,WAAAf,GAAW,GAAGC,KAAyC;AACnF,SAAO,gBAAAE,EAAC,SAAI,WAAWC,EAAG,uBAAuBJ,CAAS,GAAI,GAAGC,GAAO;AAC1E;AACAc,EAAY,cAAc;AAEnB,SAASC,EAAY,EAAE,WAAAhB,GAAW,GAAGC,KAAyC;AACnF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,uEAAuEJ,CAAS;AAAA,MAC7F,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAe,EAAY,cAAc;AAEnB,MAAMC,IAAalB,EAGxB,SAAoB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAClD,SACE,gBAAAC;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE,EAAG,uDAAuDJ,CAAS;AAAA,MAC7E,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDgB,EAAW,cAAc;AAElB,MAAMC,IAAmBnB,EAG9B,SAA0B,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACxD,SACE,gBAAAC;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,MACvD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDiB,EAAiB,cAAc;"}
+{"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

@@ -60,6 +60,11 @@ interface SidebarItemBaseProps {
      * 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;
 }
 type SidebarItemAnchorProps = SidebarItemBaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** Renders an `<a>`. Omit to render a `<button>`. */
@@ -70,19 +75,17 @@ type SidebarItemButtonProps = SidebarItemBaseProps & ButtonHTMLAttributes<HTMLBu
 };
 /** Discriminated on `href`: with it the item is an anchor, without it a button. */
 export type SidebarItemProps = SidebarItemAnchorProps | SidebarItemButtonProps;
-export declare function SidebarItem(props: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SidebarItem {
-    var displayName: string;
-}
+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 {};

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

@@ -1,58 +1,62 @@
 "use client";
-import { jsx as e, jsxs as m, Fragment as S } from "react/jsx-runtime";
-import { forwardRef as z, useState as y, useContext as N, createContext as j } from "react";
-import { ChevronsRight as I, ChevronsLeft as P, ChevronDown as _ } from "../../icons/index.js";
+import { jsx as e, jsxs as x, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as j, useState as P, useContext as k, useId as G, createContext as T } from "react";
+import { Slot as R } from "@radix-ui/react-slot";
+import { ChevronsRight as D, ChevronsLeft as F, ChevronDown as L } from "../../icons/index.js";
 import { cn as u } from "../../lib/utils.js";
-import { useStrings as G } from "../../hooks/use-strings.js";
-import { Tooltip as R } from "./Tooltip.js";
-const g = j({ collapsed: !1 });
-function H() {
-  return N(g);
+import { useStrings as q } from "../../hooks/use-strings.js";
+import { Tooltip as A } from "./Tooltip.js";
+const y = T({ collapsed: !1 });
+function Y() {
+  return k(y);
 }
-const T = z(function({
-  defaultCollapsed: n = !1,
-  collapsed: s,
-  onCollapsedChange: t,
-  header: o,
-  footer: a,
-  className: b,
-  children: l,
-  ...f
-}, c) {
-  const d = G(), [x, h] = y(n), r = s ?? x, v = (p) => {
-    s === void 0 && h(p), t == null || t(p);
+const B = j(function({
+  defaultCollapsed: d = !1,
+  collapsed: a,
+  onCollapsedChange: l,
+  header: t,
+  footer: s,
+  className: v,
+  children: b,
+  "aria-label": g,
+  ...h
+}, i) {
+  const o = q(), [c, n] = P(d), r = a ?? c, p = (f) => {
+    a === void 0 && n(f), l == null || l(f);
   };
-  return /* @__PURE__ */ e(g.Provider, { value: { collapsed: r }, children: /* @__PURE__ */ m(
-    "aside",
+  return /* @__PURE__ */ e(y.Provider, { value: { collapsed: r }, children: /* @__PURE__ */ x(
+    "nav",
     {
-      ref: c,
-      "aria-label": f["aria-label"] ?? d.sidebar.label,
+      ref: i,
+      "aria-label": g ?? o.sidebar.label,
       className: u(
-        "border-border bg-background-subtle sticky top-0 hidden h-screen shrink-0 flex-col gap-2 border-r md:flex",
-        "transition-[width] duration-[var(--duration-base)] ease-[var(--ease-out)]",
+        "border-border bg-background-subtle sticky top-0 hidden h-dvh shrink-0 flex-col gap-2 border-r md:flex",
+        // Deliberate motion exception: the rail's own width transitions (layout).
+        // Only the rail and the main column it flanks move; no content inside reflows.
+        "transition-[width] duration-[var(--duration-base)] ease-[var(--ease-out)] motion-reduce:transition-none",
         r ? "w-14" : "w-60",
-        b
+        v
       ),
-      ...f,
+      ...h,
       children: [
-        o && /* @__PURE__ */ e(
+        t && /* @__PURE__ */ e(
           "div",
           {
             className: u(
               "border-border flex h-14 shrink-0 items-center overflow-hidden border-b",
               r ? "justify-center px-2" : "px-3"
             ),
-            children: o
+            children: t
           }
         ),
-        /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto py-3", children: l }),
-        a && /* @__PURE__ */ e("div", { className: "border-border border-t p-2", children: a }),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto py-3", children: b }),
+        s && /* @__PURE__ */ e("div", { className: "border-border border-t p-2", children: s }),
+        /* @__PURE__ */ x(
           "button",
           {
             type: "button",
-            onClick: () => v(!r),
-            "aria-label": r ? d.sidebar.expand : d.sidebar.collapse,
+            onClick: () => p(!r),
+            "aria-label": r ? o.sidebar.expand : o.sidebar.collapse,
             "aria-expanded": !r,
             className: u(
               "text-foreground-subtle mx-2 mb-2 flex h-8 items-center gap-2 rounded-md px-2",
@@ -61,8 +65,8 @@ const T = z(function({
               "transition-colors duration-[var(--duration-fast)]"
             ),
             children: [
-              r ? /* @__PURE__ */ e(I, { className: "size-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(P, { className: "size-4", "aria-hidden": !0 }),
-              !r && /* @__PURE__ */ e("span", { className: "text-xs font-medium", children: d.sidebar.collapseShort })
+              r ? /* @__PURE__ */ e(D, { className: "size-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(F, { className: "size-4", "aria-hidden": !0 }),
+              !r && /* @__PURE__ */ e("span", { className: "text-xs font-medium", children: o.sidebar.collapseShort })
             ]
           }
         )
@@ -70,72 +74,111 @@ const T = z(function({
     }
   ) });
 });
-T.displayName = "Sidebar";
-function C({ label: i, className: n, children: s, ...t }) {
-  const { collapsed: o } = N(g);
-  return /* @__PURE__ */ m("div", { className: u("mb-3", n), ...t, children: [
-    i && !o && /* @__PURE__ */ e("div", { className: "text-foreground-subtle px-4 pt-2 pb-1 text-xs font-medium tracking-wide uppercase", children: i }),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: s })
-  ] });
-}
-C.displayName = "SidebarSection";
-function D(i) {
-  const { icon: n, active: s, trailing: t, sub: o, tooltip: a, className: b, children: l, ...f } = i, { collapsed: c } = N(g), d = u(
-    "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm outline-none",
-    "transition-colors duration-[var(--duration-fast)]",
-    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    s ? "bg-background-muted text-foreground font-medium" : "text-foreground-muted hover:bg-background-muted hover:text-foreground",
-    o && !c && "ml-6",
-    c && "justify-center",
-    b
-  ), x = typeof l == "string" ? l : void 0, h = /* @__PURE__ */ m(S, { children: [
-    n && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: n }),
-    c ? /* @__PURE__ */ e("span", { className: "sr-only", children: l }) : /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", title: x, children: l }),
-    !c && t && /* @__PURE__ */ e("span", { className: "ml-auto", children: t })
-  ] });
-  let r;
-  if (f.href !== void 0) {
-    const { href: p, ...k } = f;
-    r = /* @__PURE__ */ e(
-      "a",
-      {
-        href: p,
-        "aria-current": s ? "page" : void 0,
-        className: d,
-        ...k,
-        children: h
-      }
-    );
-  } else {
-    const {
-      href: p,
-      type: k,
-      ...w
-    } = f;
-    r = /* @__PURE__ */ e(
-      "button",
+B.displayName = "Sidebar";
+function E({ label: m, className: d, children: a, ...l }) {
+  const { collapsed: t } = k(y), s = G();
+  return /* @__PURE__ */ x("div", { className: u("mb-3", d), ...l, children: [
+    m && // Kept in the DOM (sr-only) while collapsed so the list stays labelled.
+    /* @__PURE__ */ e(
+      "div",
       {
-        type: k ?? "button",
-        "aria-current": s ? "page" : void 0,
-        className: d,
-        ...w,
-        children: h
+        id: s,
+        className: u(
+          "text-foreground-subtle px-4 pt-2 pb-1 text-xs font-medium",
+          t && "sr-only"
+        ),
+        children: m
       }
-    );
-  }
-  const v = a ?? x;
-  return /* @__PURE__ */ e("li", { className: "px-2", children: c && v ? /* @__PURE__ */ e(R, { label: v, side: "right", children: r }) : r });
+    ),
+    /* @__PURE__ */ e("ul", { "aria-labelledby": m ? s : void 0, className: "flex flex-col gap-px", children: a })
+  ] });
 }
-D.displayName = "SidebarItem";
-function F({ icon: i, label: n, defaultOpen: s = !0, children: t }) {
-  const { collapsed: o } = N(g), [a, b] = y(s);
-  return o ? /* @__PURE__ */ e(S, { children: t }) : /* @__PURE__ */ m("li", { children: [
-    /* @__PURE__ */ m(
+E.displayName = "SidebarSection";
+const H = j(
+  function(d, a) {
+    const { icon: l, active: t, trailing: s, sub: v, tooltip: b, asChild: g, className: h, children: i, ...o } = d, { collapsed: c } = k(y), n = u(
+      "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm outline-none",
+      "transition-colors duration-[var(--duration-fast)]",
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      t ? "bg-background-muted text-foreground font-medium" : "text-foreground-muted hover:bg-background-muted hover:text-foreground",
+      v && !c && "ml-6",
+      c && "justify-center",
+      h
+    ), r = typeof i == "string" ? i : void 0, p = b ?? r, f = c && !!p, z = /* @__PURE__ */ x(_, { children: [
+      l && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: l }),
+      c ? /* @__PURE__ */ e("span", { className: "sr-only", children: i }) : /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", title: r, children: i }),
+      !c && s && /* @__PURE__ */ e("span", { className: "ml-auto", children: s })
+    ] });
+    let N;
+    if (g) {
+      const { href: w, type: S, ...I } = o;
+      N = /* @__PURE__ */ e(
+        R,
+        {
+          ref: a,
+          "aria-current": t ? "page" : void 0,
+          className: n,
+          ...I,
+          children: i && typeof i == "object" && "props" in i ? i : null
+        }
+      );
+    } else if (o.href !== void 0) {
+      const { href: w, ...S } = o;
+      N = /* @__PURE__ */ e(
+        "a",
+        {
+          ref: a,
+          href: w,
+          "aria-current": t ? "page" : void 0,
+          className: n,
+          ...S,
+          children: z
+        }
+      );
+    } else {
+      const {
+        href: w,
+        type: S,
+        ...I
+      } = o;
+      N = /* @__PURE__ */ e(
+        "button",
+        {
+          ref: a,
+          type: S ?? "button",
+          "aria-current": t ? "page" : void 0,
+          className: n,
+          ...I,
+          children: z
+        }
+      );
+    }
+    return /* @__PURE__ */ e("li", { className: "px-2", children: f ? /* @__PURE__ */ e(A, { label: p, side: "right", children: N }) : N });
+  }
+);
+H.displayName = "SidebarItem";
+const J = j(function({
+  icon: d,
+  label: a,
+  defaultOpen: l = !0,
+  open: t,
+  onOpenChange: s,
+  className: v,
+  children: b,
+  ...g
+}, h) {
+  const { collapsed: i } = k(y), [o, c] = P(l), n = t ?? o, r = G(), p = () => {
+    const f = !n;
+    t === void 0 && c(f), s == null || s(f);
+  };
+  return i ? /* @__PURE__ */ e(_, { children: b }) : /* @__PURE__ */ x("li", { ref: h, className: v, ...g, children: [
+    /* @__PURE__ */ x(
       "button",
       {
         type: "button",
-        onClick: () => b((l) => !l),
-        "aria-expanded": a,
+        onClick: p,
+        "aria-controls": n ? r : void 0,
+        "aria-expanded": n,
         className: u(
           "text-foreground-muted mx-2 flex h-8 w-[calc(100%-1rem)] items-center gap-2 rounded-md px-2 text-sm outline-none",
           "transition-colors duration-[var(--duration-fast)]",
@@ -143,27 +186,27 @@ function F({ icon: i, label: n, defaultOpen: s = !0, children: t }) {
           "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2"
         ),
         children: [
-          i && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: i }),
-          /* @__PURE__ */ e("span", { className: "flex-1 text-left", children: n }),
+          d && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: d }),
+          /* @__PURE__ */ e("span", { className: "flex-1 text-left", children: a }),
           /* @__PURE__ */ e(
-            _,
+            L,
             {
-              className: u("size-3.5 transition-transform", a && "rotate-180"),
+              className: u("size-3.5 transition-transform", n && "rotate-180"),
               "aria-hidden": !0
             }
           )
         ]
       }
     ),
-    a && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t })
+    n && /* @__PURE__ */ e("ul", { id: r, className: "flex flex-col gap-px", children: b })
   ] });
-}
-F.displayName = "SidebarGroup";
+});
+J.displayName = "SidebarGroup";
 export {
-  T as Sidebar,
-  F as SidebarGroup,
-  D as SidebarItem,
-  C as SidebarSection,
-  H as useSidebar
+  B as Sidebar,
+  J as SidebarGroup,
+  H as SidebarItem,
+  E as SidebarSection,
+  Y as useSidebar
 };
 //# sourceMappingURL=Sidebar.js.map