@craftzbay/ui 0.8.1 → 0.10.0

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(
+        "shrink-0 bg-border",
+        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 {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} 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(\n  { className, orientation = 'horizontal', decorative = true, ...props },\n  ref,\n) {\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      orientation={orientation}\n      decorative={decorative}\n      className={cn(\n        'shrink-0 bg-border',\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":";;;;;AAqBO,MAAMA,IAAYC,EAGvB,SACA,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,YAAAC,IAAa,IAAM,GAAGC,EAAA,GAC/DC,GACA;AACA,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,5 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.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>>;

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

@@ -0,0 +1,113 @@
+"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 h } 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) {
+  return /* @__PURE__ */ o(
+    t.Overlay,
+    {
+      ref: s,
+      className: i(
+        "fixed inset-0 z-[var(--z-overlay)] bg-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 x = g(
+  [
+    "fixed z-[var(--z-modal)] bg-card text-card-foreground shadow-lg",
+    "flex flex-col gap-4 p-6",
+    "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" }
+  }
+), v = n(function({ className: e, children: r, side: s = "right", showClose: c = !0, ...f }, m) {
+  const u = p();
+  return /* @__PURE__ */ d(b, { 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 })
+        }
+      )
+    ] })
+  ] });
+});
+v.displayName = "SheetContent";
+function S({ className: a, ...e }) {
+  return /* @__PURE__ */ o("div", { className: i("flex flex-col gap-1", a), ...e });
+}
+S.displayName = "SheetHeader";
+function y({ 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
+    }
+  );
+}
+y.displayName = "SheetFooter";
+const N = n(function({ className: e, ...r }, s) {
+  return /* @__PURE__ */ o(
+    t.Title,
+    {
+      ref: s,
+      className: i("text-lg font-semibold text-foreground leading-tight", e),
+      ...r
+    }
+  );
+});
+N.displayName = "SheetTitle";
+const w = n(function({ className: e, ...r }, s) {
+  return /* @__PURE__ */ o(
+    t.Description,
+    {
+      ref: s,
+      className: i("text-sm text-foreground-muted", e),
+      ...r
+    }
+  );
+});
+w.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
+};
+//# 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';\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;"}

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,20 +46,31 @@ 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;
 }
-export declare function SidebarItem({ icon, active, href, trailing, sub, className, children, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+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 function SidebarItem(props: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SidebarItem {
     var displayName: string;
 }

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

@@ -0,0 +1,169 @@
+"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 { 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);
+}
+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);
+  };
+  return /* @__PURE__ */ e(g.Provider, { value: { collapsed: r }, children: /* @__PURE__ */ m(
+    "aside",
+    {
+      ref: c,
+      "aria-label": f["aria-label"] ?? d.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)]",
+        r ? "w-14" : "w-60",
+        b
+      ),
+      ...f,
+      children: [
+        o && /* @__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
+          }
+        ),
+        /* @__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(
+          "button",
+          {
+            type: "button",
+            onClick: () => v(!r),
+            "aria-label": r ? d.sidebar.expand : d.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",
+              "hover:bg-background-muted hover:text-foreground outline-none",
+              "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+              "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 })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+});
+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",
+      {
+        type: k ?? "button",
+        "aria-current": s ? "page" : void 0,
+        className: d,
+        ...w,
+        children: h
+      }
+    );
+  }
+  const v = a ?? x;
+  return /* @__PURE__ */ e("li", { className: "px-2", children: c && v ? /* @__PURE__ */ e(R, { label: v, side: "right", children: r }) : r });
+}
+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(
+      "button",
+      {
+        type: "button",
+        onClick: () => b((l) => !l),
+        "aria-expanded": a,
+        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)]",
+          "hover:bg-background-muted hover:text-foreground",
+          "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 }),
+          /* @__PURE__ */ e(
+            _,
+            {
+              className: u("size-3.5 transition-transform", a && "rotate-180"),
+              "aria-hidden": !0
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t })
+  ] });
+}
+F.displayName = "SidebarGroup";
+export {
+  T as Sidebar,
+  F as SidebarGroup,
+  D as SidebarItem,
+  C as SidebarSection,
+  H as useSidebar
+};
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/ui/Sidebar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useState,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { ChevronDown, ChevronsLeft, ChevronsRight } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { Tooltip } from './Tooltip';\n\ninterface SidebarContextValue {\n  collapsed: boolean;\n}\nconst SidebarContext = createContext<SidebarContextValue>({ collapsed: false });\n\n/** Read the parent Sidebar's collapsed state. Useful for brand/footer slots\n *  that need to swap between full and compact rendering. */\nexport function useSidebar(): SidebarContextValue {\n  return useContext(SidebarContext);\n}\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Default state on first mount. Use `defaultCollapsed` for uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Called when the user toggles via the rail or keyboard. */\n  onCollapsedChange?: (next: boolean) => void;\n  /** Header slot pinned to the top (brand, workspace switcher, etc.). */\n  header?: ReactNode;\n  /** Footer slot pinned to the bottom (user card, version, etc.). */\n  footer?: ReactNode;\n}\n\n/**\n * App-level navigation rail. Holds `SidebarSection` → `SidebarItem` lists,\n * and optionally a `footer`. Supports collapse to icon-only on desktop.\n * Below `md` the rail is hidden — pair it with a Sheet / Drawer for mobile.\n *\n * @example\n *   <Sidebar footer={<UserCard />}>\n *     <SidebarSection label=\"Workspace\">\n *       <SidebarItem icon={<Home />} active>Home</SidebarItem>\n *       <SidebarItem icon={<Folder />}>Projects</SidebarItem>\n *     </SidebarSection>\n *     <SidebarSection label=\"Account\">\n *       <SidebarItem icon={<Settings />}>Settings</SidebarItem>\n *     </SidebarSection>\n *   </Sidebar>\n *\n * @do Use 1–3 sections. More than that signals the IA needs restructuring.\n * @dont Hide critical navigation under the collapsed state — keep icons\n *       always visible with tooltips.\n */\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    defaultCollapsed = false,\n    collapsed: controlled,\n    onCollapsedChange,\n    header,\n    footer,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const [internal, setInternal] = useState(defaultCollapsed);\n  const collapsed = controlled ?? internal;\n  const setCollapsed = (next: boolean) => {\n    if (controlled === undefined) setInternal(next);\n    onCollapsedChange?.(next);\n  };\n\n  return (\n    <SidebarContext.Provider value={{ collapsed }}>\n      <aside\n        ref={ref}\n        aria-label={props['aria-label'] ?? strings.sidebar.label}\n        className={cn(\n          'border-border bg-background-subtle sticky top-0 hidden h-screen shrink-0 flex-col gap-2 border-r md:flex',\n          'transition-[width] duration-[var(--duration-base)] ease-[var(--ease-out)]',\n          collapsed ? 'w-14' : 'w-60',\n          className,\n        )}\n        {...props}\n      >\n        {header && (\n          <div\n            className={cn(\n              'border-border flex h-14 shrink-0 items-center overflow-hidden border-b',\n              collapsed ? 'justify-center px-2' : 'px-3',\n            )}\n          >\n            {header}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-y-auto py-3\">{children}</div>\n        {footer && <div className=\"border-border border-t p-2\">{footer}</div>}\n        <button\n          type=\"button\"\n          onClick={() => setCollapsed(!collapsed)}\n          aria-label={collapsed ? strings.sidebar.expand : strings.sidebar.collapse}\n          aria-expanded={!collapsed}\n          className={cn(\n            'text-foreground-subtle mx-2 mb-2 flex h-8 items-center gap-2 rounded-md px-2',\n            'hover:bg-background-muted hover:text-foreground outline-none',\n            'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n            'transition-colors duration-[var(--duration-fast)]',\n          )}\n        >\n          {collapsed ? (\n            <ChevronsRight className=\"size-4\" aria-hidden />\n          ) : (\n            <ChevronsLeft className=\"size-4\" aria-hidden />\n          )}\n          {!collapsed && <span className=\"text-xs font-medium\">{strings.sidebar.collapseShort}</span>}\n        </button>\n      </aside>\n    </SidebarContext.Provider>\n  );\n});\nSidebar.displayName = 'Sidebar';\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visible section header. Hidden when collapsed. */\n  label?: ReactNode;\n}\n\nexport function SidebarSection({ label, className, children, ...props }: SidebarSectionProps) {\n  const { collapsed } = useContext(SidebarContext);\n  return (\n    <div className={cn('mb-3', className)} {...props}>\n      {label && !collapsed && (\n        <div className=\"text-foreground-subtle px-4 pt-2 pb-1 text-xs font-medium tracking-wide uppercase\">\n          {label}\n        </div>\n      )}\n      <ul className=\"flex flex-col gap-px\">{children}</ul>\n    </div>\n  );\n}\nSidebarSection.displayName = 'SidebarSection';\n\ninterface SidebarItemBaseProps {\n  /** Lucide icon shown to the left. */\n  icon?: ReactNode;\n  /** Mark as the current page. */\n  active?: boolean;\n  /** Trailing badge / counter slot. */\n  trailing?: ReactNode;\n  /** Render a sub-item indented under a parent. */\n  sub?: boolean;\n  /**\n   * Tooltip text shown while the sidebar is collapsed. Defaults to `children`\n   * when that is a plain string.\n   */\n  tooltip?: ReactNode;\n}\n\ntype SidebarItemAnchorProps = SidebarItemBaseProps &\n  AnchorHTMLAttributes<HTMLAnchorElement> & {\n    /** Renders an `<a>`. Omit to render a `<button>`. */\n    href: string;\n  };\n\ntype SidebarItemButtonProps = SidebarItemBaseProps &\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    href?: undefined;\n  };\n\n/** Discriminated on `href`: with it the item is an anchor, without it a button. */\nexport type SidebarItemProps = SidebarItemAnchorProps | SidebarItemButtonProps;\n\nexport function SidebarItem(props: SidebarItemProps) {\n  const { icon, active, trailing, sub, tooltip, className, children, ...rest } = props;\n  const { collapsed } = useContext(SidebarContext);\n\n  const classes = cn(\n    'flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm outline-none',\n    'transition-colors duration-[var(--duration-fast)]',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    active\n      ? 'bg-background-muted text-foreground font-medium'\n      : 'text-foreground-muted hover:bg-background-muted hover:text-foreground',\n    sub && !collapsed && 'ml-6',\n    collapsed && 'justify-center',\n    className,\n  );\n\n  const labelTitle = typeof children === 'string' ? children : undefined;\n\n  const content = (\n    <>\n      {icon && <span className=\"flex shrink-0 items-center [&_svg]:size-4\">{icon}</span>}\n      {collapsed ? (\n        <span className=\"sr-only\">{children}</span>\n      ) : (\n        <span className=\"flex-1 truncate text-left\" title={labelTitle}>\n          {children}\n        </span>\n      )}\n      {!collapsed && trailing && <span className=\"ml-auto\">{trailing}</span>}\n    </>\n  );\n\n  let element: ReactNode;\n  if (rest.href !== undefined) {\n    const { href, ...anchorProps } = rest as Omit<\n      SidebarItemAnchorProps,\n      keyof SidebarItemBaseProps\n    >;\n    element = (\n      <a\n        href={href}\n        aria-current={active ? 'page' : undefined}\n        className={classes}\n        {...anchorProps}\n      >\n        {content}\n      </a>\n    );\n  } else {\n    const {\n      href: _href,\n      type,\n      ...buttonProps\n    } = rest as Omit<SidebarItemButtonProps, keyof SidebarItemBaseProps>;\n    element = (\n      <button\n        type={type ?? 'button'}\n        aria-current={active ? 'page' : undefined}\n        className={classes}\n        {...buttonProps}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const tip = tooltip ?? labelTitle;\n  return (\n    <li className=\"px-2\">\n      {collapsed && tip ? (\n        <Tooltip label={tip} side=\"right\">\n          {element}\n        </Tooltip>\n      ) : (\n        element\n      )}\n    </li>\n  );\n}\nSidebarItem.displayName = 'SidebarItem';\n\n/** Lightweight collapsible sub-section inside the sidebar. */\nexport interface SidebarGroupProps {\n  icon?: ReactNode;\n  label: ReactNode;\n  defaultOpen?: boolean;\n  children: ReactNode;\n}\n\nexport function SidebarGroup({ icon, label, defaultOpen = true, children }: SidebarGroupProps) {\n  const { collapsed } = useContext(SidebarContext);\n  const [open, setOpen] = useState(defaultOpen);\n  if (collapsed) return <>{children}</>;\n  return (\n    <li>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((o) => !o)}\n        aria-expanded={open}\n        className={cn(\n          'text-foreground-muted mx-2 flex h-8 w-[calc(100%-1rem)] items-center gap-2 rounded-md px-2 text-sm outline-none',\n          'transition-colors duration-[var(--duration-fast)]',\n          'hover:bg-background-muted hover:text-foreground',\n          'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n        )}\n      >\n        {icon && <span className=\"flex shrink-0 items-center [&_svg]:size-4\">{icon}</span>}\n        <span className=\"flex-1 text-left\">{label}</span>\n        <ChevronDown\n          className={cn('size-3.5 transition-transform', open && 'rotate-180')}\n          aria-hidden\n        />\n      </button>\n      {open && <ul className=\"flex flex-col gap-px\">{children}</ul>}\n    </li>\n  );\n}\nSidebarGroup.displayName = 'SidebarGroup';\n"],"names":["SidebarContext","createContext","useSidebar","useContext","Sidebar","forwardRef","defaultCollapsed","controlled","onCollapsedChange","header","footer","className","children","props","ref","strings","useStrings","internal","setInternal","useState","collapsed","setCollapsed","next","jsxs","cn","jsx","ChevronsRight","ChevronsLeft","SidebarSection","label","SidebarItem","icon","active","trailing","sub","tooltip","rest","classes","labelTitle","content","Fragment","element","href","anchorProps","_href","type","buttonProps","tip","Tooltip","SidebarGroup","defaultOpen","open","setOpen","o","ChevronDown"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { cn as l } from "../../lib/utils.js";
+const n = t(function({ className: d, variant: e, ...o }, r) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: r,
+      "aria-hidden": !0,
+      className: l(
+        "animate-pulse bg-background-muted",
+        e === "text" && "h-3 rounded-sm",
+        e === "circle" && "rounded-full aspect-square",
+        e === "avatar" && "size-8 rounded-full",
+        e === "card" && "rounded-lg",
+        !e && "rounded-md",
+        d
+      ),
+      ...o
+    }
+  );
+});
+n.displayName = "Skeleton";
+export {
+  n as Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/ui/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Predefined silhouette presets. */\n  variant?: 'text' | 'circle' | 'card' | 'avatar';\n}\n\n/**\n * Animated placeholder. Use `Skeleton.Text` / `Skeleton.Avatar` for common\n * shapes; pass `className` directly for one-off sizes.\n *\n * @example List item\n *   <div className=\"flex items-center gap-3\">\n *     <Skeleton variant=\"avatar\" />\n *     <div className=\"space-y-1.5 flex-1\">\n *       <Skeleton variant=\"text\" className=\"w-1/3\" />\n *       <Skeleton variant=\"text\" className=\"w-1/2\" />\n *     </div>\n *   </div>\n *\n * @example Card\n *   <Skeleton variant=\"card\" className=\"h-32\" />\n *\n * @do Match the silhouette of the eventual content so the layout doesn't\n *      shift when data arrives.\n * @dont Show a full-page skeleton for sub-300ms loads — use a single Spinner.\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, variant, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      className={cn(\n        'animate-pulse bg-background-muted',\n        variant === 'text' && 'h-3 rounded-sm',\n        variant === 'circle' && 'rounded-full aspect-square',\n        variant === 'avatar' && 'size-8 rounded-full',\n        variant === 'card' && 'rounded-lg',\n        !variant && 'rounded-md',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSkeleton.displayName = 'Skeleton';\n"],"names":["Skeleton","forwardRef","className","variant","props","ref","jsx","cn"],"mappings":";;;;AA8BO,MAAMA,IAAWC,EAA0C,SAChE,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACzBC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAW;AAAA,MACX,WAAWE;AAAA,QACT;AAAA,QACAJ,MAAY,UAAU;AAAA,QACtBA,MAAY,YAAY;AAAA,QACxBA,MAAY,YAAY;AAAA,QACxBA,MAAY,UAAU;AAAA,QACtB,CAACA,KAAW;AAAA,QACZD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDJ,EAAS,cAAc;"}

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

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as N, useId as y } from "react";
+import * as i from "@radix-ui/react-slider";
+import { cn as v } from "../../lib/utils.js";
+import { useStrings as w } from "../../hooks/use-strings.js";
+const S = N(
+  function({ className: h, label: e, showValue: c, formatValue: s = (r) => String(r), value: f, defaultValue: m, ...u }, p) {
+    const r = f ?? m ?? [0], t = r.length > 1, n = y(), a = w(), l = typeof e == "string" ? e : void 0, x = (b) => t ? b === 0 ? a.slider.minimum : a.slider.maximum : l ?? u["aria-label"] ?? a.slider.value;
+    return /* @__PURE__ */ d("div", { className: v("flex flex-col gap-2", h), children: [
+      (e || c) && /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+        e && /* @__PURE__ */ o("span", { id: n, className: "text-foreground text-sm font-medium", children: e }),
+        c && /* @__PURE__ */ o("span", { className: "tabular text-foreground-muted font-mono text-xs", children: t ? `${s(r[0])} – ${s(r[1])}` : s(r[0]) })
+      ] }),
+      /* @__PURE__ */ d(
+        i.Root,
+        {
+          ref: p,
+          value: f,
+          defaultValue: m,
+          className: "relative flex w-full touch-none items-center py-3.5 select-none",
+          "aria-labelledby": e && !l ? n : void 0,
+          ...u,
+          children: [
+            /* @__PURE__ */ o(i.Track, { className: "bg-background-muted relative h-1 w-full grow overflow-hidden rounded-full", children: /* @__PURE__ */ o(i.Range, { className: "bg-accent absolute h-full" }) }),
+            r.map((b, g) => /* @__PURE__ */ o(
+              i.Thumb,
+              {
+                className: v(
+                  "border-accent bg-card relative block size-4 rounded-full border-2 shadow-sm",
+                  // 44px touch target without growing the visible thumb.
+                  'before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-[""]',
+                  "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+                  "hover:scale-110 disabled:pointer-events-none disabled:opacity-50"
+                ),
+                "aria-label": x(g),
+                "aria-labelledby": !t && e && !l ? n : void 0
+              },
+              g
+            ))
+          ]
+        }
+      )
+    ] });
+  }
+);
+S.displayName = "Slider";
+export {
+  S as Slider
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/ui/Slider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface SliderProps extends Omit<\n  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n  'value' | 'defaultValue'\n> {\n  /**\n   * Controlled value. Pass `[n]` for a single-thumb slider, `[a, b]` for a range slider.\n   */\n  value?: number[];\n  defaultValue?: number[];\n  /** Inline label rendered above the slider. */\n  label?: ReactNode;\n  /** Show the numeric value next to the label. */\n  showValue?: boolean;\n  /** Format the displayed value (e.g. `(v) => \\`${v}%\\``). */\n  formatValue?: (value: number) => string;\n}\n\n/**\n * Single- or range-thumb slider. Pass one item in `value` for a single\n * thumb, two for a range.\n *\n * @example Single value\n *   <Slider label=\"Volume\" showValue defaultValue={[60]} max={100} step={1} />\n *\n * @example Price range\n *   <Slider label=\"Price\"\n *           defaultValue={[50, 250]}\n *           min={0} max={500} step={10}\n *           formatValue={(v) => \\`$\\${v}\\`}\n *           showValue />\n *\n * @do Use `showValue` when the absolute number matters (price, volume, weight).\n * @dont Hide the value when users will need to reason about exact thresholds.\n */\nexport const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(\n  function Slider(\n    { className, label, showValue, formatValue = (v) => String(v), value, defaultValue, ...props },\n    ref,\n  ) {\n    const currentValue = value ?? defaultValue ?? [0];\n    const isRange = currentValue.length > 1;\n    const labelId = useId();\n    const strings = useStrings();\n    // Only a string label can double as aria-label; ReactNode labels are\n    // referenced by id instead.\n    const stringLabel = typeof label === 'string' ? label : undefined;\n    const thumbLabel = (i: number) =>\n      isRange\n        ? i === 0\n          ? strings.slider.minimum\n          : strings.slider.maximum\n        : (stringLabel ?? props['aria-label'] ?? strings.slider.value);\n\n    return (\n      <div className={cn('flex flex-col gap-2', className)}>\n        {(label || showValue) && (\n          <div className=\"flex items-center justify-between\">\n            {label && (\n              <span id={labelId} className=\"text-foreground text-sm font-medium\">\n                {label}\n              </span>\n            )}\n            {showValue && (\n              <span className=\"tabular text-foreground-muted font-mono text-xs\">\n                {isRange\n                  ? `${formatValue(currentValue[0])} – ${formatValue(currentValue[1])}`\n                  : formatValue(currentValue[0])}\n              </span>\n            )}\n          </div>\n        )}\n\n        <SliderPrimitive.Root\n          ref={ref}\n          value={value}\n          defaultValue={defaultValue}\n          className=\"relative flex w-full touch-none items-center py-3.5 select-none\"\n          aria-labelledby={label && !stringLabel ? labelId : undefined}\n          {...props}\n        >\n          <SliderPrimitive.Track className=\"bg-background-muted relative h-1 w-full grow overflow-hidden rounded-full\">\n            <SliderPrimitive.Range className=\"bg-accent absolute h-full\" />\n          </SliderPrimitive.Track>\n          {currentValue.map((_, i) => (\n            <SliderPrimitive.Thumb\n              key={i}\n              className={cn(\n                'border-accent bg-card relative block size-4 rounded-full border-2 shadow-sm',\n                // 44px touch target without growing the visible thumb.\n                'before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-[\"\"]',\n                'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n                'transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'hover:scale-110 disabled:pointer-events-none disabled:opacity-50',\n              )}\n              aria-label={thumbLabel(i)}\n              aria-labelledby={!isRange && label && !stringLabel ? labelId : undefined}\n            />\n          ))}\n        </SliderPrimitive.Root>\n      </div>\n    );\n  },\n);\n\nSlider.displayName = 'Slider';\n"],"names":["Slider","forwardRef","className","label","showValue","formatValue","v","value","defaultValue","props","ref","currentValue","isRange","labelId","useId","strings","useStrings","stringLabel","thumbLabel","i","cn","jsxs","SliderPrimitive","jsx","_"],"mappings":";;;;;;AA+CO,MAAMA,IAASC;AAAA,EACpB,SACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,aAAAC,IAAc,CAACC,MAAM,OAAOA,CAAC,GAAG,OAAAC,GAAO,cAAAC,GAAc,GAAGC,EAAA,GACvFC,GACA;AACA,UAAMC,IAAeJ,KAASC,KAAgB,CAAC,CAAC,GAC1CI,IAAUD,EAAa,SAAS,GAChCE,IAAUC,EAAA,GACVC,IAAUC,EAAA,GAGVC,IAAc,OAAOd,KAAU,WAAWA,IAAQ,QAClDe,IAAa,CAACC,MAClBP,IACIO,MAAM,IACJJ,EAAQ,OAAO,UACfA,EAAQ,OAAO,UAChBE,KAAeR,EAAM,YAAY,KAAKM,EAAQ,OAAO;AAE5D,6BACG,OAAA,EAAI,WAAWK,EAAG,uBAAuBlB,CAAS,GAC/C,UAAA;AAAA,OAAAC,KAASC,MACT,gBAAAiB,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,QAAAlB,uBACE,QAAA,EAAK,IAAIU,GAAS,WAAU,uCAC1B,UAAAV,GACH;AAAA,QAEDC,uBACE,QAAA,EAAK,WAAU,mDACb,UAAAQ,IACG,GAAGP,EAAYM,EAAa,CAAC,CAAC,CAAC,MAAMN,EAAYM,EAAa,CAAC,CAAC,CAAC,KACjEN,EAAYM,EAAa,CAAC,CAAC,EAAA,CACjC;AAAA,MAAA,GAEJ;AAAA,MAGF,gBAAAU;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,KAAAZ;AAAA,UACA,OAAAH;AAAA,UACA,cAAAC;AAAA,UACA,WAAU;AAAA,UACV,mBAAiBL,KAAS,CAACc,IAAcJ,IAAU;AAAA,UAClD,GAAGJ;AAAA,UAEJ,UAAA;AAAA,YAAA,gBAAAc,EAACD,EAAgB,OAAhB,EAAsB,WAAU,6EAC/B,UAAA,gBAAAC,EAACD,EAAgB,OAAhB,EAAsB,WAAU,4BAAA,CAA4B,EAAA,CAC/D;AAAA,YACCX,EAAa,IAAI,CAACa,GAAGL,MACpB,gBAAAI;AAAA,cAACD,EAAgB;AAAA,cAAhB;AAAA,gBAEC,WAAWF;AAAA,kBACT;AAAA;AAAA,kBAEA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,cAAYF,EAAWC,CAAC;AAAA,gBACxB,mBAAiB,CAACP,KAAWT,KAAS,CAACc,IAAcJ,IAAU;AAAA,cAAA;AAAA,cAV1DM;AAAA,YAAA,CAYR;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEAnB,EAAO,cAAc;"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
 declare const snackbar: (props?: ({
     variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { X as b, XCircle as g, AlertTriangle as x, CheckCircle2 as h, Info as p } from "../../icons/index.js";
+import { cn as k } from "../../lib/utils.js";
+import { useStrings as N } from "../../hooks/use-strings.js";
+import { cva as v } from "class-variance-authority";
+const w = v(
+  [
+    "relative pointer-events-auto w-full max-w-md",
+    "flex items-start gap-3 rounded-md border bg-card p-3 shadow-md",
+    "text-sm text-foreground"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        info: "border-info-border-soft",
+        success: "border-success-border-soft",
+        warning: "border-warning-border-soft",
+        danger: "border-danger-border-soft"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), z = {
+  default: null,
+  info: /* @__PURE__ */ e(p, { className: "size-4 shrink-0 mt-0.5 text-info-text", "aria-hidden": !0 }),
+  success: /* @__PURE__ */ e(h, { className: "size-4 shrink-0 mt-0.5 text-success-text", "aria-hidden": !0 }),
+  warning: /* @__PURE__ */ e(x, { className: "size-4 shrink-0 mt-0.5 text-warning-text", "aria-hidden": !0 }),
+  danger: /* @__PURE__ */ e(g, { className: "size-4 shrink-0 mt-0.5 text-danger-text", "aria-hidden": !0 })
+}, A = f(function({ className: d, variant: r = "default", title: t, action: i, onClose: a, icon: s, children: n, ...c }, m) {
+  const l = N(), u = s === !1 ? null : s ?? z[r ?? "default"];
+  return /* @__PURE__ */ o("div", { ref: m, role: "status", className: k(w({ variant: r }), d), ...c, children: [
+    u,
+    /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: [
+      t && /* @__PURE__ */ e("p", { className: "font-medium", children: t }),
+      n && /* @__PURE__ */ e("p", { className: "text-foreground-muted", children: n })
+    ] }),
+    i,
+    a && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: a,
+        "aria-label": l.snackbar.dismiss,
+        className: "rounded p-1 text-foreground-muted hover:bg-background-muted hover:text-foreground",
+        children: /* @__PURE__ */ e(b, { className: "size-4" })
+      }
+    )
+  ] });
+});
+export {
+  A as Snackbar
+};
+//# sourceMappingURL=Snackbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.js","sources":["../../../src/components/ui/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { CheckCircle2, Info, AlertTriangle, XCircle, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst snackbar = cva(\n  [\n    'relative pointer-events-auto w-full max-w-md',\n    'flex items-start gap-3 rounded-md border bg-card p-3 shadow-md',\n    'text-sm text-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        info: 'border-info-border-soft',\n        success: 'border-success-border-soft',\n        warning: 'border-warning-border-soft',\n        danger: 'border-danger-border-soft',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nconst iconForVariant: Record<NonNullable<VariantProps<typeof snackbar>['variant']>, ReactNode> = {\n  default: null,\n  info: <Info className=\"size-4 shrink-0 mt-0.5 text-info-text\" aria-hidden />,\n  success: <CheckCircle2 className=\"size-4 shrink-0 mt-0.5 text-success-text\" aria-hidden />,\n  warning: <AlertTriangle className=\"size-4 shrink-0 mt-0.5 text-warning-text\" aria-hidden />,\n  danger: <XCircle className=\"size-4 shrink-0 mt-0.5 text-danger-text\" aria-hidden />,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof snackbar> {\n  /** Headline. */\n  title?: ReactNode;\n  /** Action button rendered on the right. */\n  action?: ReactNode;\n  /** Show a close (×) button on the right. */\n  onClose?: () => void;\n  /** Override the variant's default icon. Pass `false` to hide. */\n  icon?: ReactNode | false;\n}\n\n/**\n * Persistent inline notification. Unlike Toast, Snackbar does **not** auto-\n * dismiss. Pair with an `action` button or an `onClose` handler.\n */\nexport const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(function Snackbar(\n  { className, variant = 'default', title, action, onClose, icon, children, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const renderedIcon = icon === false ? null : icon ?? iconForVariant[variant ?? 'default'];\n\n  return (\n    <div ref={ref} role=\"status\" className={cn(snackbar({ variant }), className)} {...props}>\n      {renderedIcon}\n      <div className=\"min-w-0 flex-1\">\n        {title && <p className=\"font-medium\">{title}</p>}\n        {children && <p className=\"text-foreground-muted\">{children}</p>}\n      </div>\n      {action}\n      {onClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label={strings.snackbar.dismiss}\n          className=\"rounded p-1 text-foreground-muted hover:bg-background-muted hover:text-foreground\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"names":["snackbar","cva","iconForVariant","jsx","Info","CheckCircle2","AlertTriangle","XCircle","Snackbar","forwardRef","className","variant","title","action","onClose","icon","children","props","ref","strings","useStrings","renderedIcon","jsxs","cn","X"],"mappings":";;;;;;;AAQA,MAAMA,IAAWC;AAAA,EACf;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,iBAAiB,EAAE,SAAS,UAAA;AAAA,EAAU;AAE1C,GAEMC,IAA2F;AAAA,EAC/F,SAAS;AAAA,EACT,MAAM,gBAAAC,EAACC,GAAA,EAAK,WAAU,yCAAwC,eAAW,IAAC;AAAA,EAC1E,SAAS,gBAAAD,EAACE,GAAA,EAAa,WAAU,4CAA2C,eAAW,IAAC;AAAA,EACxF,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,4CAA2C,eAAW,IAAC;AAAA,EACzF,QAAQ,gBAAAH,EAACI,GAAA,EAAQ,WAAU,2CAA0C,eAAW,GAAA,CAAC;AACnF,GAmBaC,IAAWC,EAA0C,SAChE,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC7EC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAeN,MAAS,KAAQ,OAAOA,KAAQb,EAAeS,KAAW,SAAS;AAExF,SACE,gBAAAW,EAAC,OAAA,EAAI,KAAAJ,GAAU,MAAK,UAAS,WAAWK,EAAGvB,EAAS,EAAE,SAAAW,GAAS,GAAGD,CAAS,GAAI,GAAGO,GAC/E,UAAA;AAAA,IAAAI;AAAA,IACD,gBAAAC,EAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,MAAAV,KAAS,gBAAAT,EAAC,KAAA,EAAE,WAAU,eAAe,UAAAS,GAAM;AAAA,MAC3CI,KAAY,gBAAAb,EAAC,KAAA,EAAE,WAAU,yBAAyB,UAAAa,EAAA,CAAS;AAAA,IAAA,GAC9D;AAAA,IACCH;AAAA,IACAC,KACC,gBAAAX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASW;AAAA,QACT,cAAYK,EAAQ,SAAS;AAAA,QAC7B,WAAU;AAAA,QAEV,UAAA,gBAAAhB,EAACqB,GAAA,EAAE,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GAEJ;AAEJ,CAAC;"}