@craftzbay/ui 0.10.0 → 0.11.1

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

@@ -1,23 +1,27 @@
 "use client";
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import { forwardRef as n, useEffect as T } from "react";
-import * as r from "@radix-ui/react-toast";
-import { X as v, Info as w, XCircle as N, AlertTriangle as y, CheckCircle2 as C } from "../../icons/index.js";
+import { forwardRef as l, useEffect as v } from "react";
+import * as n from "@radix-ui/react-toast";
+import { X as T, Info as w, XCircle as N, AlertTriangle as y, CheckCircle2 as C } from "../../icons/index.js";
 import { cn as c } from "../../lib/utils.js";
 import { useStrings as m } from "../../hooks/use-strings.js";
 import { useToast as k } from "../../hooks/use-toast.js";
 import { cva as z } from "class-variance-authority";
-const A = r.Provider, u = n(function({ className: o, ...e }, a) {
+const A = n.Provider, u = l(function({ className: o, label: e, ...a }, t) {
+  const r = m();
   return /* @__PURE__ */ s(
-    r.Viewport,
+    n.Viewport,
     {
-      ref: a,
+      ref: t,
+      label: e ?? r.toast.region,
       className: c(
-        "fixed bottom-0 right-0 z-[var(--z-toast)] flex max-h-screen w-full flex-col-reverse gap-2 p-6",
-        "sm:bottom-auto sm:top-4 sm:right-4 sm:max-w-sm sm:flex-col",
+        "fixed right-0 bottom-0 z-[var(--z-toast)] flex max-h-dvh w-full flex-col-reverse gap-2 p-6",
+        // Respect notched/home-indicator insets (consumers set viewport-fit=cover).
+        "pr-[max(1.5rem,env(safe-area-inset-right))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))]",
+        "sm:top-4 sm:right-4 sm:bottom-auto sm:max-w-sm sm:flex-col",
         o
       ),
-      ...e
+      ...a
     }
   );
 });
@@ -47,33 +51,24 @@ const V = z(
   }
 ), j = {
   default: null,
-  success: /* @__PURE__ */ s(C, { className: "size-5 text-success-text shrink-0 mt-0.5", "aria-hidden": !0 }),
-  warning: /* @__PURE__ */ s(y, { className: "size-5 text-warning-text shrink-0 mt-0.5", "aria-hidden": !0 }),
-  danger: /* @__PURE__ */ s(N, { className: "size-5 text-danger-text shrink-0 mt-0.5", "aria-hidden": !0 }),
-  info: /* @__PURE__ */ s(w, { className: "size-5 text-info-text shrink-0 mt-0.5", "aria-hidden": !0 })
-}, p = n(
-  function({ className: o, variant: e = "default", children: a, ...t }, l) {
-    return /* @__PURE__ */ f(r.Root, { ref: l, className: c(V({ variant: e }), o), ...t, children: [
-      j[e ?? "default"],
-      /* @__PURE__ */ s("div", { className: "flex-1 space-y-1", children: a })
-    ] });
-  }
-);
+  success: /* @__PURE__ */ s(C, { className: "text-success-text mt-0.5 size-5 shrink-0", "aria-hidden": !0 }),
+  warning: /* @__PURE__ */ s(y, { className: "text-warning-text mt-0.5 size-5 shrink-0", "aria-hidden": !0 }),
+  danger: /* @__PURE__ */ s(N, { className: "text-danger-text mt-0.5 size-5 shrink-0", "aria-hidden": !0 }),
+  info: /* @__PURE__ */ s(w, { className: "text-info-text mt-0.5 size-5 shrink-0", "aria-hidden": !0 })
+}, p = l(function({ className: o, variant: e = "default", children: a, ...t }, r) {
+  return /* @__PURE__ */ f(n.Root, { ref: r, className: c(V({ variant: e }), o), ...t, children: [
+    j[e ?? "default"],
+    /* @__PURE__ */ s("div", { className: "flex-1 space-y-1", children: a })
+  ] });
+});
 p.displayName = "Toast";
-const g = n(function({ className: o, ...e }, a) {
-  return /* @__PURE__ */ s(
-    r.Title,
-    {
-      ref: a,
-      className: c("text-sm font-medium", o),
-      ...e
-    }
-  );
+const g = l(function({ className: o, ...e }, a) {
+  return /* @__PURE__ */ s(n.Title, { ref: a, className: c("text-sm font-medium", o), ...e });
 });
 g.displayName = "ToastTitle";
-const x = n(function({ className: o, ...e }, a) {
+const x = l(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ s(
-    r.Description,
+    n.Description,
     {
       ref: a,
       className: c("text-sm opacity-90", o),
@@ -82,15 +77,15 @@ const x = n(function({ className: o, ...e }, a) {
   );
 });
 x.displayName = "ToastDescription";
-const b = n(function({ className: o, ...e }, a) {
+const b = l(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ s(
-    r.Action,
+    n.Action,
     {
       ref: a,
       className: c(
         "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-current bg-transparent px-3 text-sm font-medium",
-        "transition-colors hover:bg-current/10 outline-none",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+        "transition-colors outline-none hover:bg-current/10",
+        "focus-visible:ring-ring focus-visible:ring-offset-card focus-visible:ring-2 focus-visible:ring-offset-2",
         o
       ),
       ...e
@@ -98,33 +93,33 @@ const b = n(function({ className: o, ...e }, a) {
   );
 });
 b.displayName = "ToastAction";
-const h = n(function({ className: o, ...e }, a) {
+const h = l(function({ className: o, ...e }, a) {
   const t = m();
   return /* @__PURE__ */ s(
-    r.Close,
+    n.Close,
     {
       ref: a,
       "aria-label": e["aria-label"] ?? t.toast.close,
       className: c(
-        "absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-md text-foreground-subtle",
-        "opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground",
-        "outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+        "text-foreground-subtle absolute top-2 right-2 inline-flex size-7 items-center justify-center rounded-md",
+        "hover:text-foreground opacity-0 transition-opacity group-hover:opacity-100",
+        "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2",
         o
       ),
       "toast-close": "",
       ...e,
-      children: /* @__PURE__ */ s(v, { className: "size-4", "aria-hidden": !0 })
+      children: /* @__PURE__ */ s(T, { className: "size-4", "aria-hidden": !0 })
     }
   );
 });
 h.displayName = "ToastClose";
 function D() {
   const { toasts: i, dismiss: o, remove: e } = k();
-  T(() => {
+  v(() => {
     const t = i.filter((d) => !d.open);
     if (t.length === 0) return;
-    const l = t.map((d) => window.setTimeout(() => e(d.id), 200));
-    return () => l.forEach((d) => window.clearTimeout(d));
+    const r = t.map((d) => window.setTimeout(() => e(d.id), 200));
+    return () => r.forEach((d) => window.clearTimeout(d));
   }, [i, e]);
   const a = m();
   return /* @__PURE__ */ f(A, { label: a.toast.region, children: [
@@ -133,22 +128,14 @@ function D() {
       {
         variant: t.variant ?? "default",
         open: t.open,
-        duration: t.duration,
-        onOpenChange: (l) => {
-          l || o(t.id);
+        duration: t.duration === 0 ? 1 / 0 : t.duration,
+        onOpenChange: (r) => {
+          r || o(t.id);
         },
         children: [
           t.title && /* @__PURE__ */ s(g, { children: t.title }),
           t.description && /* @__PURE__ */ s(x, { children: t.description }),
-          t.action && /* @__PURE__ */ s(
-            b,
-            {
-              altText: t.action.altText,
-              onClick: t.action.onClick,
-              className: "mt-1",
-              children: t.action.label
-            }
-          ),
+          t.action && /* @__PURE__ */ s(b, { altText: t.action.altText, onClick: t.action.onClick, className: "mt-1", children: t.action.label }),
           /* @__PURE__ */ s(h, {})
         ]
       },

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/ui/Toast.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactElement,\n} from 'react';\nimport * as ToastPrimitive from '@radix-ui/react-toast';\nimport { AlertTriangle, CheckCircle2, Info, X, XCircle } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\nimport { useToast } from '@/hooks/use-toast';\n\nexport const ToastProvider = ToastPrimitive.Provider;\n\nexport const ToastViewport = forwardRef<\n  ElementRef<typeof ToastPrimitive.Viewport>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>\n>(function ToastViewport({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Viewport\n      ref={ref}\n      className={cn(\n        'fixed bottom-0 right-0 z-[var(--z-toast)] flex max-h-screen w-full flex-col-reverse gap-2 p-6',\n        'sm:bottom-auto sm:top-4 sm:right-4 sm:max-w-sm sm:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nToastViewport.displayName = 'ToastViewport';\n\nconst toast = cva(\n  [\n    'group pointer-events-auto relative flex w-full items-start gap-3',\n    'overflow-hidden rounded-lg border p-4 pr-8 shadow-md',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-right-full',\n    'data-[state=closed]:slide-out-to-right-full',\n    'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]',\n    'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n    'data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card text-card-foreground',\n        success: 'border-success-border-soft bg-success-soft text-success-text',\n        warning: 'border-warning-border-soft bg-warning-soft text-warning-text',\n        danger: 'border-danger-border-soft bg-danger-soft text-danger-text',\n        info: 'border-info-border-soft bg-info-soft text-info-text',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nconst iconMap = {\n  default: null,\n  success: <CheckCircle2 className=\"size-5 text-success-text shrink-0 mt-0.5\" aria-hidden />,\n  warning: <AlertTriangle className=\"size-5 text-warning-text shrink-0 mt-0.5\" aria-hidden />,\n  danger: <XCircle className=\"size-5 text-danger-text shrink-0 mt-0.5\" aria-hidden />,\n  info: <Info className=\"size-5 text-info-text shrink-0 mt-0.5\" aria-hidden />,\n} satisfies Record<'default' | 'success' | 'warning' | 'danger' | 'info', ReactElement | null>;\n\nexport interface ToastProps\n  extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>,\n    VariantProps<typeof toast> {}\n\nexport const Toast = forwardRef<ElementRef<typeof ToastPrimitive.Root>, ToastProps>(\n  function Toast({ className, variant = 'default', children, ...props }, ref) {\n    return (\n      <ToastPrimitive.Root ref={ref} className={cn(toast({ variant }), className)} {...props}>\n        {iconMap[variant ?? 'default']}\n        <div className=\"flex-1 space-y-1\">{children}</div>\n      </ToastPrimitive.Root>\n    );\n  },\n);\nToast.displayName = 'Toast';\n\nexport const ToastTitle = forwardRef<\n  ElementRef<typeof ToastPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Title>\n>(function ToastTitle({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Title\n      ref={ref}\n      className={cn('text-sm font-medium', className)}\n      {...props}\n    />\n  );\n});\nToastTitle.displayName = 'ToastTitle';\n\nexport const ToastDescription = forwardRef<\n  ElementRef<typeof ToastPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Description>\n>(function ToastDescription({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Description\n      ref={ref}\n      className={cn('text-sm opacity-90', className)}\n      {...props}\n    />\n  );\n});\nToastDescription.displayName = 'ToastDescription';\n\nexport const ToastAction = forwardRef<\n  ElementRef<typeof ToastPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Action>\n>(function ToastAction({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Action\n      ref={ref}\n      className={cn(\n        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-current bg-transparent px-3 text-sm font-medium',\n        'transition-colors hover:bg-current/10 outline-none',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nToastAction.displayName = 'ToastAction';\n\nexport const ToastClose = forwardRef<\n  ElementRef<typeof ToastPrimitive.Close>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Close>\n>(function ToastClose({ className, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <ToastPrimitive.Close\n      ref={ref}\n      aria-label={props[\"aria-label\"] ?? strings.toast.close}\n      className={cn(\n        'absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-md text-foreground-subtle',\n        'opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground',\n        'outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring',\n        className,\n      )}\n      toast-close=\"\"\n      {...props}\n    >\n      <X className=\"size-4\" aria-hidden />\n    </ToastPrimitive.Close>\n  );\n});\nToastClose.displayName = 'ToastClose';\n\n/**\n * Drop-in host that connects the `useToast()` queue to the Radix primitives.\n * Mount it once near your app root — then `useToast().push({...})` (or the\n * standalone `toast()`) from anywhere renders here. Self-contained: it brings\n * its own ToastProvider + Viewport, so no other Toast wiring is needed.\n *\n * @example\n *   function App() {\n *     return (\n *       <>\n *         <Routes />\n *         <Toaster />\n *       </>\n *     );\n *   }\n */\nexport function Toaster() {\n  const { toasts, dismiss, remove } = useToast();\n\n  // Closing a toast sets open:false so Radix can play the slide-out; drop it\n  // from the queue once that animation has had time to finish.\n  useEffect(() => {\n    const closing = toasts.filter((t) => !t.open);\n    if (closing.length === 0) return;\n    const timers = closing.map((t) => window.setTimeout(() => remove(t.id), 200));\n    return () => timers.forEach((id) => window.clearTimeout(id));\n  }, [toasts, remove]);\n\n  const strings = useStrings();\n  return (\n    <ToastProvider label={strings.toast.region}>\n      {toasts.map((t) => (\n        <Toast\n          key={t.id}\n          variant={t.variant ?? 'default'}\n          open={t.open}\n          duration={t.duration}\n          onOpenChange={(open) => {\n            if (!open) dismiss(t.id);\n          }}\n        >\n          {t.title && <ToastTitle>{t.title}</ToastTitle>}\n          {t.description && <ToastDescription>{t.description}</ToastDescription>}\n          {t.action && (\n            <ToastAction\n              altText={t.action.altText}\n              onClick={t.action.onClick}\n              className=\"mt-1\"\n            >\n              {t.action.label}\n            </ToastAction>\n          )}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider>\n  );\n}\nToaster.displayName = 'Toaster';\n\n/**\n * @example\n *   <ToastProvider>\n *     …app…\n *     <Toast variant=\"success\">\n *       <ToastTitle>Saved</ToastTitle>\n *       <ToastDescription>Your changes are live.</ToastDescription>\n *       <ToastAction altText=\"Undo\">Undo</ToastAction>\n *       <ToastClose />\n *     </Toast>\n *     <ToastViewport />\n *   </ToastProvider>\n *\n * @do Use the `useToast()` hook (in `src/hooks/use-toast.ts`) in app code —\n *      the components here are the primitives the hook renders.\n * @dont Stack more than two toasts at a time. Newer toasts replace older ones.\n */\n"],"names":["ToastProvider","ToastPrimitive","ToastViewport","forwardRef","className","props","ref","jsx","cn","toast","cva","iconMap","CheckCircle2","AlertTriangle","XCircle","Info","Toast","variant","children","jsxs","ToastTitle","ToastDescription","ToastAction","ToastClose","strings","useStrings","X","Toaster","toasts","dismiss","remove","useToast","useEffect","closing","t","timers","id","open"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/ui/Toast.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactElement,\n} from 'react';\nimport * as ToastPrimitive from '@radix-ui/react-toast';\nimport { AlertTriangle, CheckCircle2, Info, X, XCircle } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\nimport { useToast } from '@/hooks/use-toast';\n\nexport const ToastProvider = ToastPrimitive.Provider;\n\nexport const ToastViewport = forwardRef<\n  ElementRef<typeof ToastPrimitive.Viewport>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>\n>(function ToastViewport({ className, label, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <ToastPrimitive.Viewport\n      ref={ref}\n      // Radix's default is \"Notifications ({hotkey})\" — route it through the\n      // strings so the region landmark is localised like the rest.\n      label={label ?? strings.toast.region}\n      className={cn(\n        'fixed right-0 bottom-0 z-[var(--z-toast)] flex max-h-dvh w-full flex-col-reverse gap-2 p-6',\n        // Respect notched/home-indicator insets (consumers set viewport-fit=cover).\n        'pr-[max(1.5rem,env(safe-area-inset-right))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))]',\n        'sm:top-4 sm:right-4 sm:bottom-auto sm:max-w-sm sm:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nToastViewport.displayName = 'ToastViewport';\n\nconst toast = cva(\n  [\n    'group pointer-events-auto relative flex w-full items-start gap-3',\n    'overflow-hidden rounded-lg border p-4 pr-8 shadow-md',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-right-full',\n    'data-[state=closed]:slide-out-to-right-full',\n    'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]',\n    'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n    'data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card text-card-foreground',\n        success: 'border-success-border-soft bg-success-soft text-success-text',\n        warning: 'border-warning-border-soft bg-warning-soft text-warning-text',\n        danger: 'border-danger-border-soft bg-danger-soft text-danger-text',\n        info: 'border-info-border-soft bg-info-soft text-info-text',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nconst iconMap = {\n  default: null,\n  success: <CheckCircle2 className=\"text-success-text mt-0.5 size-5 shrink-0\" aria-hidden />,\n  warning: <AlertTriangle className=\"text-warning-text mt-0.5 size-5 shrink-0\" aria-hidden />,\n  danger: <XCircle className=\"text-danger-text mt-0.5 size-5 shrink-0\" aria-hidden />,\n  info: <Info className=\"text-info-text mt-0.5 size-5 shrink-0\" aria-hidden />,\n} satisfies Record<'default' | 'success' | 'warning' | 'danger' | 'info', ReactElement | null>;\n\nexport interface ToastProps\n  extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toast> {}\n\nexport const Toast = forwardRef<ElementRef<typeof ToastPrimitive.Root>, ToastProps>(function Toast(\n  { className, variant = 'default', children, ...props },\n  ref,\n) {\n  return (\n    <ToastPrimitive.Root ref={ref} className={cn(toast({ variant }), className)} {...props}>\n      {iconMap[variant ?? 'default']}\n      <div className=\"flex-1 space-y-1\">{children}</div>\n    </ToastPrimitive.Root>\n  );\n});\nToast.displayName = 'Toast';\n\nexport const ToastTitle = forwardRef<\n  ElementRef<typeof ToastPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Title>\n>(function ToastTitle({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Title ref={ref} className={cn('text-sm font-medium', className)} {...props} />\n  );\n});\nToastTitle.displayName = 'ToastTitle';\n\nexport const ToastDescription = forwardRef<\n  ElementRef<typeof ToastPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Description>\n>(function ToastDescription({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Description\n      ref={ref}\n      className={cn('text-sm opacity-90', className)}\n      {...props}\n    />\n  );\n});\nToastDescription.displayName = 'ToastDescription';\n\nexport const ToastAction = forwardRef<\n  ElementRef<typeof ToastPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Action>\n>(function ToastAction({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Action\n      ref={ref}\n      className={cn(\n        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-current bg-transparent px-3 text-sm font-medium',\n        'transition-colors outline-none hover:bg-current/10',\n        'focus-visible:ring-ring focus-visible:ring-offset-card focus-visible:ring-2 focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nToastAction.displayName = 'ToastAction';\n\nexport const ToastClose = forwardRef<\n  ElementRef<typeof ToastPrimitive.Close>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Close>\n>(function ToastClose({ className, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <ToastPrimitive.Close\n      ref={ref}\n      aria-label={props['aria-label'] ?? strings.toast.close}\n      className={cn(\n        'text-foreground-subtle absolute top-2 right-2 inline-flex size-7 items-center justify-center rounded-md',\n        'hover:text-foreground opacity-0 transition-opacity group-hover:opacity-100',\n        'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2',\n        className,\n      )}\n      toast-close=\"\"\n      {...props}\n    >\n      <X className=\"size-4\" aria-hidden />\n    </ToastPrimitive.Close>\n  );\n});\nToastClose.displayName = 'ToastClose';\n\n/**\n * Drop-in host that connects the `useToast()` queue to the Radix primitives.\n * Mount it once near your app root — then `useToast().push({...})` (or the\n * standalone `toast()`) from anywhere renders here. Self-contained: it brings\n * its own ToastProvider + Viewport, so no other Toast wiring is needed.\n *\n * @example\n *   function App() {\n *     return (\n *       <>\n *         <Routes />\n *         <Toaster />\n *       </>\n *     );\n *   }\n */\nexport function Toaster() {\n  const { toasts, dismiss, remove } = useToast();\n\n  // Closing a toast sets open:false so Radix can play the slide-out; drop it\n  // from the queue once that animation has had time to finish.\n  useEffect(() => {\n    const closing = toasts.filter((t) => !t.open);\n    if (closing.length === 0) return;\n    const timers = closing.map((t) => window.setTimeout(() => remove(t.id), 200));\n    return () => timers.forEach((id) => window.clearTimeout(id));\n  }, [toasts, remove]);\n\n  const strings = useStrings();\n  return (\n    <ToastProvider label={strings.toast.region}>\n      {toasts.map((t) => (\n        <Toast\n          key={t.id}\n          variant={t.variant ?? 'default'}\n          open={t.open}\n          // Radix treats 0 as \"dismiss immediately\"; the queue's 0 means \"keep open\".\n          duration={t.duration === 0 ? Infinity : t.duration}\n          onOpenChange={(open) => {\n            if (!open) dismiss(t.id);\n          }}\n        >\n          {t.title && <ToastTitle>{t.title}</ToastTitle>}\n          {t.description && <ToastDescription>{t.description}</ToastDescription>}\n          {t.action && (\n            <ToastAction altText={t.action.altText} onClick={t.action.onClick} className=\"mt-1\">\n              {t.action.label}\n            </ToastAction>\n          )}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider>\n  );\n}\nToaster.displayName = 'Toaster';\n\n/**\n * @example\n *   <ToastProvider>\n *     …app…\n *     <Toast variant=\"success\">\n *       <ToastTitle>Saved</ToastTitle>\n *       <ToastDescription>Your changes are live.</ToastDescription>\n *       <ToastAction altText=\"Undo\">Undo</ToastAction>\n *       <ToastClose />\n *     </Toast>\n *     <ToastViewport />\n *   </ToastProvider>\n *\n * @do Use the `useToast()` hook (in `src/hooks/use-toast.ts`) in app code —\n *      the components here are the primitives the hook renders.\n * @dont Stack more than two toasts at a time. Newer toasts replace older ones.\n */\n"],"names":["ToastProvider","ToastPrimitive","ToastViewport","forwardRef","className","label","props","ref","strings","useStrings","jsx","cn","toast","cva","iconMap","CheckCircle2","AlertTriangle","XCircle","Info","Toast","variant","children","jsxs","ToastTitle","ToastDescription","ToastAction","ToastClose","X","Toaster","toasts","dismiss","remove","useToast","useEffect","closing","t","timers","id","open"],"mappings":"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"}

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

@@ -4,7 +4,10 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
  * Wrap the app in a single `<TooltipProvider>` near the root. All Tooltips
  * share the same `delayDuration` and `skipDelayDuration`.
  */
-export declare const TooltipProvider: ({ delayDuration, skipDelayDuration, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipProvider: {
+    ({ delayDuration, skipDelayDuration, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const TooltipRoot: import('react').FC<TooltipPrimitive.TooltipProps>;
 export declare const TooltipTrigger: import('react').ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const TooltipContent: import('react').ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,58 +1,60 @@
 "use client";
-import { jsx as t, Fragment as p, jsxs as l } from "react/jsx-runtime";
+import { jsx as o, Fragment as p, jsxs as l } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import * as a from "@radix-ui/react-tooltip";
 import { cn as c } from "../../lib/utils.js";
-const v = ({
-  delayDuration: o = 500,
+const f = ({
+  delayDuration: t = 500,
   skipDelayDuration: e = 200,
   ...i
-}) => /* @__PURE__ */ t(
+}) => /* @__PURE__ */ o(
   a.Provider,
   {
-    delayDuration: o,
+    delayDuration: t,
     skipDelayDuration: e,
     ...i
   }
-), f = a.Root, u = a.Trigger, d = m(function({ className: e, sideOffset: i = 4, ...n }, r) {
-  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
+);
+f.displayName = "TooltipProvider";
+const u = a.Root, T = a.Trigger, d = m(function({ className: e, sideOffset: i = 4, ...r }, n) {
+  return /* @__PURE__ */ o(a.Portal, { children: /* @__PURE__ */ o(
     a.Content,
     {
-      ref: r,
+      ref: n,
       sideOffset: i,
       className: c(
         "z-[var(--z-tooltip)] overflow-hidden rounded-md px-2 py-1 text-xs font-medium",
         "bg-tooltip text-tooltip-foreground",
-        "shadow-sm max-w-xs",
+        "max-w-xs shadow-sm",
         "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
       ),
-      ...n
+      ...r
     }
   ) });
 });
 d.displayName = "TooltipContent";
-function T({
-  children: o,
+function x({
+  children: t,
   label: e,
   side: i = "top",
-  align: n = "center",
-  disabled: r,
+  align: r = "center",
+  disabled: n,
   delayDuration: s
 }) {
-  return r ? /* @__PURE__ */ t(p, { children: o }) : /* @__PURE__ */ l(f, { delayDuration: s, children: [
-    /* @__PURE__ */ t(u, { asChild: !0, children: o }),
-    /* @__PURE__ */ t(d, { side: i, align: n, children: e })
+  return n ? /* @__PURE__ */ o(p, { children: t }) : /* @__PURE__ */ l(u, { delayDuration: s, children: [
+    /* @__PURE__ */ o(T, { asChild: !0, children: t }),
+    /* @__PURE__ */ o(d, { side: i, align: r, children: e })
   ] });
 }
-T.displayName = "Tooltip";
+x.displayName = "Tooltip";
 export {
-  T as Tooltip,
+  x as Tooltip,
   d as TooltipContent,
-  v as TooltipProvider,
-  f as TooltipRoot,
-  u as TooltipTrigger
+  f as TooltipProvider,
+  u as TooltipRoot,
+  T as TooltipTrigger
 };
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/ui/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '@/lib/utils';\n\n/**\n * Wrap the app in a single `<TooltipProvider>` near the root. All Tooltips\n * share the same `delayDuration` and `skipDelayDuration`.\n */\nexport const TooltipProvider = ({\n  delayDuration = 500,\n  skipDelayDuration = 200,\n  ...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n  <TooltipPrimitive.Provider\n    delayDuration={delayDuration}\n    skipDelayDuration={skipDelayDuration}\n    {...props}\n  />\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipContent = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(function TooltipContent({ className, sideOffset = 4, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-[var(--z-tooltip)] overflow-hidden rounded-md px-2 py-1 text-xs font-medium',\n          'bg-tooltip text-tooltip-foreground',\n          'shadow-sm max-w-xs',\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          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  );\n});\nTooltipContent.displayName = 'TooltipContent';\n\nexport interface TooltipProps {\n  children: ReactNode;\n  label: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  align?: 'start' | 'center' | 'end';\n  /** Disable showing the tooltip (e.g. when text is not truncated). */\n  disabled?: boolean;\n  /** Override the global delay. */\n  delayDuration?: number;\n}\n\n/**\n * Shorthand for the most common Tooltip case.\n *\n * @example\n *   <Tooltip label=\"Copy link\"><IconButton aria-label=\"Copy\" icon={<Copy/>} /></Tooltip>\n *\n * @do Keep tooltip text short — one line, no full sentences. Use a Popover\n *      for any content that needs structure.\n * @dont Wrap disabled buttons in Tooltip without `asChild + tabIndex={0}`.\n *       Disabled elements don't receive focus, so the tooltip never opens.\n */\nexport function Tooltip({\n  children,\n  label,\n  side = 'top',\n  align = 'center',\n  disabled,\n  delayDuration,\n}: TooltipProps) {\n  if (disabled) return <>{children}</>;\n  return (\n    <TooltipRoot delayDuration={delayDuration}>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent side={side} align={align}>\n        {label}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n}\nTooltip.displayName = 'Tooltip';\n"],"names":["TooltipProvider","delayDuration","skipDelayDuration","props","jsx","TooltipPrimitive","TooltipRoot","TooltipTrigger","TooltipContent","forwardRef","className","sideOffset","ref","cn","Tooltip","children","label","side","align","disabled","Fragment","jsxs"],"mappings":";;;;;AAeO,MAAMA,IAAkB,CAAC;AAAA,EAC9B,eAAAC,IAAgB;AAAA,EAChB,mBAAAC,IAAoB;AAAA,EACpB,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC,EAAiB;AAAA,EAAjB;AAAA,IACC,eAAAJ;AAAA,IACA,mBAAAC;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,GAGWG,IAAcD,EAAiB,MAC/BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAG5B,SAAwB,EAAE,WAAAC,GAAW,YAAAC,IAAa,GAAG,GAAGR,EAAA,GAASS,GAAK;AACtE,SACE,gBAAAR,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,KAAAO;AAAA,MACA,YAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGP;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDK,EAAe,cAAc;AAwBtB,SAASM,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,eAAAlB;AACF,GAAiB;AACf,SAAIkB,IAAiB,gBAAAf,EAAAgB,GAAA,EAAG,UAAAL,EAAA,CAAS,IAE/B,gBAAAM,EAACf,KAAY,eAAAL,GACX,UAAA;AAAA,IAAA,gBAAAG,EAACG,GAAA,EAAe,SAAO,IAAE,UAAAQ,EAAA,CAAS;AAAA,IAClC,gBAAAX,EAACI,GAAA,EAAe,MAAAS,GAAY,OAAAC,GACzB,UAAAF,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AACAF,EAAQ,cAAc;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/ui/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type ReactNode } from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '@/lib/utils';\n\n/**\n * Wrap the app in a single `<TooltipProvider>` near the root. All Tooltips\n * share the same `delayDuration` and `skipDelayDuration`.\n */\nexport const TooltipProvider = ({\n  delayDuration = 500,\n  skipDelayDuration = 200,\n  ...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n  <TooltipPrimitive.Provider\n    delayDuration={delayDuration}\n    skipDelayDuration={skipDelayDuration}\n    {...props}\n  />\n);\nTooltipProvider.displayName = 'TooltipProvider';\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipContent = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(function TooltipContent({ className, sideOffset = 4, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-[var(--z-tooltip)] overflow-hidden rounded-md px-2 py-1 text-xs font-medium',\n          'bg-tooltip text-tooltip-foreground',\n          'max-w-xs shadow-sm',\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          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  );\n});\nTooltipContent.displayName = 'TooltipContent';\n\nexport interface TooltipProps {\n  children: ReactNode;\n  label: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  align?: 'start' | 'center' | 'end';\n  /** Disable showing the tooltip (e.g. when text is not truncated). */\n  disabled?: boolean;\n  /** Override the global delay. */\n  delayDuration?: number;\n}\n\n/**\n * Shorthand for the most common Tooltip case.\n *\n * @example\n *   <Tooltip label=\"Copy link\"><IconButton aria-label=\"Copy\" icon={<Copy/>} /></Tooltip>\n *\n * @do Keep tooltip text short — one line, no full sentences. Use a Popover\n *      for any content that needs structure.\n * @dont Wrap disabled buttons in Tooltip without `asChild + tabIndex={0}`.\n *       Disabled elements don't receive focus, so the tooltip never opens.\n */\nexport function Tooltip({\n  children,\n  label,\n  side = 'top',\n  align = 'center',\n  disabled,\n  delayDuration,\n}: TooltipProps) {\n  if (disabled) return <>{children}</>;\n  return (\n    <TooltipRoot delayDuration={delayDuration}>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent side={side} align={align}>\n        {label}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n}\nTooltip.displayName = 'Tooltip';\n"],"names":["TooltipProvider","delayDuration","skipDelayDuration","props","jsx","TooltipPrimitive","TooltipRoot","TooltipTrigger","TooltipContent","forwardRef","className","sideOffset","ref","cn","Tooltip","children","label","side","align","disabled","Fragment","jsxs"],"mappings":";;;;;AAUO,MAAMA,IAAkB,CAAC;AAAA,EAC9B,eAAAC,IAAgB;AAAA,EAChB,mBAAAC,IAAoB;AAAA,EACpB,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC,EAAiB;AAAA,EAAjB;AAAA,IACC,eAAAJ;AAAA,IACA,mBAAAC;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFH,EAAgB,cAAc;AAEvB,MAAMM,IAAcD,EAAiB,MAC/BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAG5B,SAAwB,EAAE,WAAAC,GAAW,YAAAC,IAAa,GAAG,GAAGR,EAAA,GAASS,GAAK;AACtE,SACE,gBAAAR,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,KAAAO;AAAA,MACA,YAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGP;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDK,EAAe,cAAc;AAwBtB,SAASM,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,eAAAlB;AACF,GAAiB;AACf,SAAIkB,IAAiB,gBAAAf,EAAAgB,GAAA,EAAG,UAAAL,EAAA,CAAS,IAE/B,gBAAAM,EAACf,KAAY,eAAAL,GACX,UAAA;AAAA,IAAA,gBAAAG,EAACG,GAAA,EAAe,SAAO,IAAE,UAAAQ,EAAA,CAAS;AAAA,IAClC,gBAAAX,EAACI,GAAA,EAAe,MAAAS,GAAY,OAAAC,GACzB,UAAAF,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AACAF,EAAQ,cAAc;"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 export interface TopNavProps extends HTMLAttributes<HTMLElement> {
     /** Logo / wordmark slot. Shown on the far left. */
     logo: ReactNode;
@@ -8,6 +8,8 @@ export interface TopNavProps extends HTMLAttributes<HTMLElement> {
     search?: ReactNode;
     /** Right-aligned cluster — notifications, theme toggle, user menu. */
     actions?: ReactNode;
+    /** Accessible name of the inner `<nav>` landmark. Default "Primary". */
+    navLabel?: string;
 }
 /**
  * App-level top bar. Layout: `logo · nav · search · actions`. Search and nav
@@ -26,8 +28,10 @@ export interface TopNavProps extends HTMLAttributes<HTMLElement> {
  *       put them below the bar inside the page content.
  */
 export declare const TopNav: import('react').ForwardRefExoticComponent<TopNavProps & import('react').RefAttributes<HTMLElement>>;
-export interface TopNavLinkProps extends HTMLAttributes<HTMLAnchorElement> {
-    href: string;
+export interface TopNavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
     active?: boolean;
+    /** Render the child (e.g. router `<Link>`) instead of an `<a>`. */
+    asChild?: boolean;
 }
 export declare const TopNavLink: import('react').ForwardRefExoticComponent<TopNavLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

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

@@ -1,52 +1,69 @@
 "use client";
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { cn as l } from "../../lib/utils.js";
-const f = d(function({ logo: n, nav: e, search: r, actions: i, className: t, ...s }, m) {
-  return /* @__PURE__ */ a(
+import { Slot as p } from "@radix-ui/react-slot";
+import { useStrings as g } from "../../hooks/use-strings.js";
+import { cn as f } from "../../lib/utils.js";
+const x = d(function({ logo: n, nav: e, search: r, actions: i, navLabel: t, className: a, ...s }, m) {
+  const u = g();
+  return /* @__PURE__ */ l(
     "header",
     {
       ref: m,
-      className: l(
+      className: f(
         "sticky top-0 z-[var(--z-sticky)] flex h-14 w-full items-center gap-4",
-        "border-b border-border bg-background px-4",
-        t
+        // Fixed three-column track from lg up: the centre slot keeps its
+        // position however wide the logo slot grows, so navigating between
+        // pages (breadcrumbs of different lengths) never shifts the search.
+        // Below lg the bar stays flex — there is not enough room for three
+        // tracks, and logo slots that vary in width (breadcrumbs) are hidden
+        // at those widths anyway.
+        r && "lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,28rem)_minmax(0,1fr)]",
+        "border-border bg-background border-b px-4",
+        a
       ),
       ...s,
       children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-6 shrink-0", children: [
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-6", children: [
           n,
-          e && /* @__PURE__ */ o("nav", { className: "hidden md:flex items-center gap-1", children: e })
+          e && /* @__PURE__ */ o(
+            "nav",
+            {
+              "aria-label": t ?? u.topNav.label,
+              className: "hidden items-center gap-1 md:flex",
+              children: e
+            }
+          )
         ] }),
-        r && /* @__PURE__ */ o("div", { className: "flex-1 max-w-md mx-auto", children: r }),
-        i && /* @__PURE__ */ o("div", { className: "ml-auto flex items-center gap-2 shrink-0", children: i })
+        r && /* @__PURE__ */ o("div", { className: "mx-auto w-full max-w-md flex-1 lg:flex-none", children: r }),
+        i && /* @__PURE__ */ o("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: i })
       ]
     }
   );
 });
-f.displayName = "TopNav";
-const u = d(function({ href: n, active: e, className: r, children: i, ...t }, s) {
+x.displayName = "TopNav";
+const v = d(function({ href: n, active: e, asChild: r, className: i, children: t, ...a }, s) {
   return /* @__PURE__ */ o(
-    "a",
+    r ? p : "a",
     {
       ref: s,
       href: n,
       "aria-current": e ? "page" : void 0,
-      className: l(
+      className: f(
         "inline-flex h-9 items-center rounded-md px-3 text-sm font-medium outline-none",
         "transition-colors duration-[var(--duration-fast)]",
         e ? "text-foreground" : "text-foreground-muted hover:text-foreground",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        r
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+        i
       ),
-      ...t,
-      children: i
+      ...a,
+      children: t
     }
   );
 });
-u.displayName = "TopNavLink";
+v.displayName = "TopNavLink";
 export {
-  f as TopNav,
-  u as TopNavLink
+  x as TopNav,
+  v as TopNavLink
 };
 //# sourceMappingURL=TopNav.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopNav.js","sources":["../../../src/components/ui/TopNav.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TopNavProps extends HTMLAttributes<HTMLElement> {\n  /** Logo / wordmark slot. Shown on the far left. */\n  logo: ReactNode;\n  /** Primary navigation links — typically a list of `<TopNavLink>`. */\n  nav?: ReactNode;\n  /** Search / command bar slot — fills the centre on wide screens. */\n  search?: ReactNode;\n  /** Right-aligned cluster — notifications, theme toggle, user menu. */\n  actions?: ReactNode;\n}\n\n/**\n * App-level top bar. Layout: `logo · nav · search · actions`. Search and nav\n * are optional.\n *\n * @example\n *   <TopNav\n *     logo={<Logo />}\n *     nav={<><TopNavLink href=\"/\" active>Home</TopNavLink>…</>}\n *     search={<Input type=\"search\" placeholder=\"Search…\" />}\n *     actions={<><Bell /><Avatar /></>}\n *   />\n *\n * @do Pick one primary nav style — links here or in the Sidebar, not both.\n * @dont Stack two rows of navigation in the TopNav. If you need tabs as well,\n *       put them below the bar inside the page content.\n */\nexport const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(\n  { logo, nav, search, actions, className, ...props },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      className={cn(\n        'sticky top-0 z-[var(--z-sticky)] flex h-14 w-full items-center gap-4',\n        'border-b border-border bg-background px-4',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-6 shrink-0\">\n        {logo}\n        {nav && <nav className=\"hidden md:flex items-center gap-1\">{nav}</nav>}\n      </div>\n      {search && <div className=\"flex-1 max-w-md mx-auto\">{search}</div>}\n      {actions && <div className=\"ml-auto flex items-center gap-2 shrink-0\">{actions}</div>}\n    </header>\n  );\n});\nTopNav.displayName = 'TopNav';\n\nexport interface TopNavLinkProps extends HTMLAttributes<HTMLAnchorElement> {\n  href: string;\n  active?: boolean;\n}\n\nexport const TopNavLink = forwardRef<HTMLAnchorElement, TopNavLinkProps>(function TopNavLink(\n  { href, active, className, children, ...props },\n  ref,\n) {\n  return (\n    <a\n      ref={ref}\n      href={href}\n      aria-current={active ? 'page' : undefined}\n      className={cn(\n        'inline-flex h-9 items-center rounded-md px-3 text-sm font-medium outline-none',\n        'transition-colors duration-[var(--duration-fast)]',\n        active ? 'text-foreground' : 'text-foreground-muted hover:text-foreground',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  );\n});\nTopNavLink.displayName = 'TopNavLink';\n"],"names":["TopNav","forwardRef","logo","nav","search","actions","className","props","ref","jsxs","cn","jsx","TopNavLink","href","active","children"],"mappings":";;;;AAgCO,MAAMA,IAASC,EAAqC,SACzD,EAAE,MAAAC,GAAM,KAAAC,GAAK,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAP;AAAA,UACAC,KAAO,gBAAAQ,EAAC,OAAA,EAAI,WAAU,qCAAqC,UAAAR,EAAA,CAAI;AAAA,QAAA,GAClE;AAAA,QACCC,KAAU,gBAAAO,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAP,GAAO;AAAA,QAC3DC,KAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,4CAA4C,UAAAN,EAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrF,CAAC;AACDL,EAAO,cAAc;AAOd,MAAMY,IAAaX,EAA+C,SACvE,EAAE,MAAAY,GAAM,QAAAC,GAAQ,WAAAR,GAAW,UAAAS,GAAU,GAAGR,EAAA,GACxCC,GACA;AACA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,MAAAK;AAAA,MACA,gBAAcC,IAAS,SAAS;AAAA,MAChC,WAAWJ;AAAA,QACT;AAAA,QACA;AAAA,QACAI,IAAS,oBAAoB;AAAA,QAC7B;AAAA,QACAR;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAQ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDH,EAAW,cAAc;"}
+{"version":3,"file":"TopNav.js","sources":["../../../src/components/ui/TopNav.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cn } from '@/lib/utils';\n\nexport interface TopNavProps extends HTMLAttributes<HTMLElement> {\n  /** Logo / wordmark slot. Shown on the far left. */\n  logo: ReactNode;\n  /** Primary navigation links — typically a list of `<TopNavLink>`. */\n  nav?: ReactNode;\n  /** Search / command bar slot — fills the centre on wide screens. */\n  search?: ReactNode;\n  /** Right-aligned cluster — notifications, theme toggle, user menu. */\n  actions?: ReactNode;\n  /** Accessible name of the inner `<nav>` landmark. Default \"Primary\". */\n  navLabel?: string;\n}\n\n/**\n * App-level top bar. Layout: `logo · nav · search · actions`. Search and nav\n * are optional.\n *\n * @example\n *   <TopNav\n *     logo={<Logo />}\n *     nav={<><TopNavLink href=\"/\" active>Home</TopNavLink>…</>}\n *     search={<Input type=\"search\" placeholder=\"Search…\" />}\n *     actions={<><Bell /><Avatar /></>}\n *   />\n *\n * @do Pick one primary nav style — links here or in the Sidebar, not both.\n * @dont Stack two rows of navigation in the TopNav. If you need tabs as well,\n *       put them below the bar inside the page content.\n */\nexport const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(\n  { logo, nav, search, actions, navLabel, className, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    <header\n      ref={ref}\n      className={cn(\n        'sticky top-0 z-[var(--z-sticky)] flex h-14 w-full items-center gap-4',\n        // Fixed three-column track from lg up: the centre slot keeps its\n        // position however wide the logo slot grows, so navigating between\n        // pages (breadcrumbs of different lengths) never shifts the search.\n        // Below lg the bar stays flex — there is not enough room for three\n        // tracks, and logo slots that vary in width (breadcrumbs) are hidden\n        // at those widths anyway.\n        search && 'lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,28rem)_minmax(0,1fr)]',\n        'border-border bg-background border-b px-4',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-6\">\n        {logo}\n        {nav && (\n          <nav\n            aria-label={navLabel ?? strings.topNav.label}\n            className=\"hidden items-center gap-1 md:flex\"\n          >\n            {nav}\n          </nav>\n        )}\n      </div>\n      {search && <div className=\"mx-auto w-full max-w-md flex-1 lg:flex-none\">{search}</div>}\n      {actions && <div className=\"ml-auto flex shrink-0 items-center gap-2\">{actions}</div>}\n    </header>\n  );\n});\nTopNav.displayName = 'TopNav';\n\nexport interface TopNavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  href?: string;\n  active?: boolean;\n  /** Render the child (e.g. router `<Link>`) instead of an `<a>`. */\n  asChild?: boolean;\n}\n\nexport const TopNavLink = forwardRef<HTMLAnchorElement, TopNavLinkProps>(function TopNavLink(\n  { href, active, asChild, className, children, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot : 'a';\n  return (\n    <Comp\n      ref={ref}\n      href={href}\n      aria-current={active ? 'page' : undefined}\n      className={cn(\n        'inline-flex h-9 items-center rounded-md px-3 text-sm font-medium outline-none',\n        'transition-colors duration-[var(--duration-fast)]',\n        active ? 'text-foreground' : 'text-foreground-muted hover:text-foreground',\n        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n});\nTopNavLink.displayName = 'TopNavLink';\n"],"names":["TopNav","forwardRef","logo","nav","search","actions","navLabel","className","props","ref","strings","useStrings","jsxs","cn","jsx","TopNavLink","href","active","asChild","children","Slot"],"mappings":";;;;;;AAoCO,MAAMA,IAASC,EAAqC,SACzD,EAAE,MAAAC,GAAM,KAAAC,GAAK,QAAAC,GAAQ,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAUC,EAAA;AAChB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOAT,KAAU;AAAA,QACV;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,UAAAV;AAAA,UACAC,KACC,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAYR,KAAYI,EAAQ,OAAO;AAAA,cACvC,WAAU;AAAA,cAET,UAAAP;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GAEJ;AAAA,QACCC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,+CAA+C,UAAAV,GAAO;AAAA,QAC/EC,KAAW,gBAAAS,EAAC,OAAA,EAAI,WAAU,4CAA4C,UAAAT,EAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrF,CAAC;AACDL,EAAO,cAAc;AASd,MAAMe,IAAad,EAA+C,SACvE,EAAE,MAAAe,GAAM,QAAAC,GAAQ,SAAAC,GAAS,WAAAX,GAAW,UAAAY,GAAU,GAAGX,EAAA,GACjDC,GACA;AAEA,SACE,gBAAAK;AAAA,IAFWI,IAAUE,IAAO;AAAA,IAE3B;AAAA,MACC,KAAAX;AAAA,MACA,MAAAO;AAAA,MACA,gBAAcC,IAAS,SAAS;AAAA,MAChC,WAAWJ;AAAA,QACT;AAAA,QACA;AAAA,QACAI,IAAS,oBAAoB;AAAA,QAC7B;AAAA,QACAV;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDJ,EAAW,cAAc;"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface TreeNode {
     id: string;
     label: ReactNode;
@@ -7,7 +7,7 @@ export interface TreeNode {
     /** Optional custom icon (overrides default file/folder icons). */
     icon?: ReactNode;
 }
-export interface TreeProps {
+export interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
     /** The root nodes. */
     data: TreeNode[];
     /** Ids to expand by default (uncontrolled). */
@@ -16,15 +16,23 @@ export interface TreeProps {
     expanded?: string[];
     /** Called with the full next set of expanded ids. */
     onExpandedChange?: (next: string[]) => void;
-    /** Currently selected node id (controlled). Alias: `selected`. */
+    /**
+     * @deprecated Use `selected` + `onSelectedChange`. Kept for backward
+     * compatibility; ignored when `selected` is present.
+     */
     selectedId?: string;
-    /** Controlled selected id. Takes precedence over `selectedId`. */
+    /**
+     * Controlled selected id. The component is controlled whenever this key is
+     * present in props (even as `undefined`), mirroring React inputs.
+     */
     selected?: string;
     /** Default selected id (uncontrolled). */
     defaultSelected?: string;
-    /** Called when a node is activated (click / Enter / Space). */
+    /**
+     * @deprecated Use `onSelectedChange`. Still called on every activation.
+     */
     onSelect?: (id: string) => void;
-    /** Alias of `onSelect` for the controlled `selected` pair. */
+    /** Called when a node is activated (click / Enter / Space). */
     onSelectedChange?: (id: string) => void;
     /** Accessible name for the tree. */
     'aria-label'?: string;
@@ -40,7 +48,4 @@ export interface TreeProps {
  * Expansion and selection are uncontrolled by default; pass
  * `expanded`/`onExpandedChange` and `selected`/`onSelectedChange` to control.
  */
-export declare function Tree({ data, defaultExpanded, expanded: expandedProp, onExpandedChange, selectedId, selected: selectedProp, defaultSelected, onSelect, onSelectedChange, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: TreeProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Tree {
-    var displayName: string;
-}
+export declare const Tree: import('react').ForwardRefExoticComponent<TreeProps & import('react').RefAttributes<HTMLUListElement>>;