@craftzbay/ui 0.10.0 → 0.11.0

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

@@ -1,74 +1,92 @@
 "use client";
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { DayPicker as f } from "react-day-picker";
-import * as l from "@radix-ui/react-select";
-import { ChevronLeft as p, ChevronRight as v, ChevronDown as u } from "../../icons/index.js";
-/* empty css                                                */
-import { Select as x, SelectContent as h, SelectItem as w } from "./Select.js";
-import { cn as b } from "../../lib/utils.js";
-function y({
-  options: d = [],
-  value: n,
-  onChange: r,
-  disabled: a,
-  "aria-label": s
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { DayPicker as w, getDefaultClassNames as _ } from "react-day-picker";
+import * as u from "@radix-ui/react-select";
+import { ChevronLeft as y, ChevronRight as N, ChevronDown as g } from "../../icons/index.js";
+import { Select as k, SelectContent as D, SelectItem as j } from "./Select.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as C } from "../../hooks/use-strings.js";
+const f = _();
+function S({
+  options: l = [],
+  value: r,
+  onChange: o,
+  disabled: d,
+  "aria-label": c
 }) {
-  const o = d.find((e) => e.value === Number(n));
-  return /* @__PURE__ */ c(
-    x,
+  const i = l.find((e) => e.value === Number(r));
+  return /* @__PURE__ */ b(
+    k,
     {
-      value: n === void 0 ? void 0 : String(n),
+      value: r === void 0 ? void 0 : String(r),
       onValueChange: (e) => {
-        r == null || r({ target: { value: e } });
+        o == null || o({ target: { value: e } });
       },
-      disabled: a,
+      disabled: d,
       children: [
-        /* @__PURE__ */ c(
-          l.Trigger,
+        /* @__PURE__ */ b(
+          u.Trigger,
           {
-            "aria-label": s,
-            className: b(
+            "aria-label": c,
+            className: n(
               "border-border bg-card text-foreground inline-flex h-7 items-center gap-1 rounded-md border px-2 text-sm font-medium",
-              "hover:bg-background-muted focus-visible:ring-ring outline-none focus-visible:ring-2",
+              "hover:bg-background-muted focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
             children: [
-              /* @__PURE__ */ t(l.Value, { children: o == null ? void 0 : o.label }),
-              /* @__PURE__ */ t(l.Icon, { asChild: !0, children: /* @__PURE__ */ t(u, { className: "size-3.5 opacity-60", "aria-hidden": !0 }) })
+              /* @__PURE__ */ t(u.Value, { children: i == null ? void 0 : i.label }),
+              /* @__PURE__ */ t(u.Icon, { asChild: !0, children: /* @__PURE__ */ t(g, { className: "size-3.5 opacity-60", "aria-hidden": !0 }) })
             ]
           }
         ),
-        /* @__PURE__ */ t(h, { className: "max-h-64", children: d.map((e) => /* @__PURE__ */ t(w, { value: String(e.value), disabled: e.disabled, children: e.label }, e.value)) })
+        /* @__PURE__ */ t(D, { className: "max-h-64", children: l.map((e) => /* @__PURE__ */ t(j, { value: String(e.value), disabled: e.disabled, children: e.label }, e.value)) })
       ]
     }
   );
 }
-function _({
-  className: d,
-  classNames: n,
-  captionLayout: r = "dropdown",
-  startMonth: a,
-  endMonth: s,
-  ...o
+const m = n(
+  "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted",
+  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "disabled:opacity-40 disabled:pointer-events-none"
+);
+function z({
+  className: l,
+  classNames: r,
+  captionLayout: o = "dropdown",
+  startMonth: d,
+  endMonth: c,
+  labels: i,
+  weekStartsOn: e = 1,
+  ...v
 }) {
-  const { start: e, end: m } = g(() => {
-    const i = /* @__PURE__ */ new Date();
+  const s = C(), { start: p, end: h } = x(() => {
+    const a = /* @__PURE__ */ new Date();
     return {
-      start: a ?? new Date(i.getFullYear() - 100, 0, 1),
-      end: s ?? new Date(i.getFullYear() + 10, 11, 31)
+      start: d ?? new Date(a.getFullYear() - 100, 0, 1),
+      end: c ?? new Date(a.getFullYear() + 10, 11, 31)
     };
-  }, [a, s]);
+  }, [d, c]);
   return /* @__PURE__ */ t(
-    f,
+    w,
     {
       showOutsideDays: !0,
-      captionLayout: r,
-      startMonth: e,
-      endMonth: m,
-      className: b("border-border bg-card inline-block rounded-lg border p-3", d),
+      weekStartsOn: e,
+      captionLayout: o,
+      startMonth: p,
+      endMonth: h,
+      className: n("border-border bg-card inline-block rounded-lg border p-3", l),
+      labels: {
+        labelPrevious: () => s.calendar.previous,
+        labelNext: () => s.calendar.next,
+        labelMonthDropdown: () => s.calendar.chooseMonth,
+        labelYearDropdown: () => s.calendar.chooseYear,
+        labelNav: () => s.calendar.nav,
+        ...i
+      },
       classNames: {
-        root: "rdp",
+        ...f,
+        root: n(f.root, "relative"),
         months: "relative flex flex-col gap-4 sm:flex-row sm:gap-6",
         month: "flex flex-col gap-3",
         month_caption: "relative flex h-8 items-center justify-center px-8",
@@ -79,33 +97,43 @@ function _({
         // itself ignores pointer events so the centred dropdowns underneath
         // stay clickable — only the buttons opt back in.
         nav: "pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between",
-        button_previous: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none disabled:opacity-40 disabled:pointer-events-none",
-        button_next: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none disabled:opacity-40 disabled:pointer-events-none",
+        button_previous: m,
+        button_next: m,
         month_grid: "w-full border-collapse",
         weekdays: "grid grid-cols-7",
-        weekday: "h-8 w-9 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-subtle",
+        weekday: "h-8 w-9 text-center text-xs font-medium uppercase tracking-wide text-foreground-subtle",
         week: "mt-0.5 grid grid-cols-7",
         day: "relative h-9 w-9 p-0 text-center",
-        day_button: "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none aria-selected:bg-accent aria-selected:text-on-accent aria-selected:hover:bg-accent-700",
+        day_button: n(
+          "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        ),
+        // RDP 9 puts aria-selected / the modifier classes on the <td>, so the
+        // button is styled through its cell. `[&_button:hover]` outranks the
+        // button's own `hover:` rule so selected days keep the accent on hover.
+        selected: n(
+          "[&_button]:bg-accent [&_button]:text-on-accent [&_button:hover]:bg-accent-hover",
+          "[&_button]:focus-visible:ring-offset-accent-soft"
+        ),
         today: "[&_button]:border [&_button]:border-border",
         outside: "text-foreground-subtle",
         disabled: "opacity-40 pointer-events-none",
-        range_start: "[&_button]:bg-accent [&_button]:text-on-accent [&_button]:rounded-r-none",
-        range_end: "[&_button]:bg-accent [&_button]:text-on-accent [&_button]:rounded-l-none",
-        range_middle: "[&_button]:bg-accent-soft [&_button]:text-foreground [&_button]:rounded-none",
+        range_start: "[&_button]:rounded-r-none",
+        range_end: "[&_button]:rounded-l-none",
+        range_middle: "[&_button]:bg-accent-soft [&_button]:text-foreground [&_button:hover]:bg-accent-soft [&_button]:rounded-none",
         hidden: "invisible",
-        ...n
+        ...r
       },
       components: {
-        Dropdown: y,
-        Chevron: ({ orientation: i }) => i === "left" ? /* @__PURE__ */ t(p, { className: "size-4" }) : i === "right" ? /* @__PURE__ */ t(v, { className: "size-4" }) : /* @__PURE__ */ t(u, { className: "size-3.5 opacity-60" })
+        Dropdown: S,
+        Chevron: ({ orientation: a }) => a === "left" ? /* @__PURE__ */ t(y, { className: "size-4" }) : a === "right" ? /* @__PURE__ */ t(N, { className: "size-4" }) : /* @__PURE__ */ t(g, { className: "size-3.5 opacity-60" })
       },
-      ...o
+      ...v
     }
   );
 }
-_.displayName = "Calendar";
+z.displayName = "Calendar";
 export {
-  _ as Calendar
+  z as Calendar
 };
 //# sourceMappingURL=Calendar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/ui/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type ChangeEvent } from 'react';\nimport { DayPicker, type DayPickerProps, type DropdownProps } from 'react-day-picker';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@/icons';\nimport 'react-day-picker/style.css';\nimport { Select, SelectContent, SelectItem } from './Select';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = DayPickerProps & { className?: string };\n\n/**\n * Month / year dropdown rendered with the design-system Select instead of a\n * native `<select>` — the native popup is unbounded (a century of years fills\n * the screen on macOS) and can't be styled. Radix gives us a max-height,\n * internal scrolling, and auto-scroll to the selected year.\n */\nfunction CalendarDropdown({\n  options = [],\n  value,\n  onChange,\n  disabled,\n  'aria-label': ariaLabel,\n}: DropdownProps) {\n  const selected = options.find((opt) => opt.value === Number(value));\n\n  return (\n    <Select\n      value={value === undefined ? undefined : String(value)}\n      onValueChange={(v) => {\n        // RDP's handler expects a native select change event — fake the shape.\n        onChange?.({ target: { value: v } } as unknown as ChangeEvent<HTMLSelectElement>);\n      }}\n      disabled={disabled}\n    >\n      <SelectPrimitive.Trigger\n        aria-label={ariaLabel}\n        className={cn(\n          'border-border bg-card text-foreground inline-flex h-7 items-center gap-1 rounded-md border px-2 text-sm font-medium',\n          'hover:bg-background-muted focus-visible:ring-ring outline-none focus-visible:ring-2',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )}\n      >\n        <SelectPrimitive.Value>{selected?.label}</SelectPrimitive.Value>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown className=\"size-3.5 opacity-60\" aria-hidden />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n      <SelectContent className=\"max-h-64\">\n        {options.map((opt) => (\n          <SelectItem key={opt.value} value={String(opt.value)} disabled={opt.disabled}>\n            {opt.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\n/**\n * Standalone calendar surface. Used by DatePicker, but can also be embedded\n * directly in popovers, sheets, or inline forms. Wraps `react-day-picker` v9.\n *\n * Not a forwardRef: RDP v9's `DayPicker` is a plain function component and\n * exposes no root ref, so a forwarded ref would silently be dropped.\n */\nexport function Calendar({\n  className,\n  classNames,\n  captionLayout = 'dropdown',\n  startMonth,\n  endMonth,\n  ...props\n}: CalendarProps) {\n  // Bound the month/year dropdowns. Consumers can narrow this with\n  // startMonth / endMonth; the default spans a century back to a decade ahead\n  // so the year dropdown is useful for both birthdays and future scheduling.\n  // Memoised — fresh Date identities every render defeat RDP's internal\n  // memoisation and re-derive the navigable range on each paint.\n  const { start, end } = useMemo(() => {\n    const now = new Date();\n    return {\n      start: startMonth ?? new Date(now.getFullYear() - 100, 0, 1),\n      end: endMonth ?? new Date(now.getFullYear() + 10, 11, 31),\n    };\n  }, [startMonth, endMonth]);\n\n  return (\n    <DayPicker\n      showOutsideDays\n      captionLayout={captionLayout}\n      startMonth={start}\n      endMonth={end}\n      className={cn('border-border bg-card inline-block rounded-lg border p-3', className)}\n      classNames={{\n        root: 'rdp',\n        months: 'relative flex flex-col gap-4 sm:flex-row sm:gap-6',\n        month: 'flex flex-col gap-3',\n        month_caption: 'relative flex h-8 items-center justify-center px-8',\n        dropdowns: 'flex items-center justify-center gap-2',\n        caption_label: 'flex items-center gap-1 text-sm font-medium',\n        // The caption is positioned and painted after the nav, so the nav must\n        // sit above it (z-10) for its buttons to receive clicks. The container\n        // itself ignores pointer events so the centred dropdowns underneath\n        // stay clickable — only the buttons opt back in.\n        nav: 'pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between',\n        button_previous:\n          'pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none disabled:opacity-40 disabled:pointer-events-none',\n        button_next:\n          'pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none disabled:opacity-40 disabled:pointer-events-none',\n        month_grid: 'w-full border-collapse',\n        weekdays: 'grid grid-cols-7',\n        weekday:\n          'h-8 w-9 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-subtle',\n        week: 'mt-0.5 grid grid-cols-7',\n        day: 'relative h-9 w-9 p-0 text-center',\n        day_button:\n          'inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted focus-visible:ring-2 focus-visible:ring-ring outline-none aria-selected:bg-accent aria-selected:text-on-accent aria-selected:hover:bg-accent-700',\n        today: '[&_button]:border [&_button]:border-border',\n        outside: 'text-foreground-subtle',\n        disabled: 'opacity-40 pointer-events-none',\n        range_start: '[&_button]:bg-accent [&_button]:text-on-accent [&_button]:rounded-r-none',\n        range_end: '[&_button]:bg-accent [&_button]:text-on-accent [&_button]:rounded-l-none',\n        range_middle:\n          '[&_button]:bg-accent-soft [&_button]:text-foreground [&_button]:rounded-none',\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Dropdown: CalendarDropdown,\n        Chevron: ({ orientation }) => {\n          if (orientation === 'left') return <ChevronLeft className=\"size-4\" />;\n          if (orientation === 'right') return <ChevronRight className=\"size-4\" />;\n          // up/down — used for the month/year dropdown carets\n          return <ChevronDown className=\"size-3.5 opacity-60\" />;\n        },\n      }}\n      {...props}\n    />\n  );\n}\nCalendar.displayName = 'Calendar';\n"],"names":["CalendarDropdown","options","value","onChange","disabled","ariaLabel","selected","opt","jsxs","Select","v","SelectPrimitive","cn","jsx","ChevronDown","SelectContent","SelectItem","Calendar","className","classNames","captionLayout","startMonth","endMonth","props","start","end","useMemo","now","DayPicker","orientation","ChevronLeft","ChevronRight"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/ui/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type ChangeEvent } from 'react';\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayPickerProps,\n  type DropdownProps,\n} from 'react-day-picker';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@/icons';\nimport { Select, SelectContent, SelectItem } from './Select';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n// RDP's structural class names (`rdp-*`). Its stylesheet is intentionally NOT\n// imported — every visual rule below is ours, so there is no cascade to fight\n// and no CSS side effect for tree-shaken consumers.\nconst rdp = getDefaultClassNames();\n\nexport type CalendarProps = DayPickerProps & { className?: string };\n\n/**\n * Month / year dropdown rendered with the design-system Select instead of a\n * native `<select>` — the native popup is unbounded (a century of years fills\n * the screen on macOS) and can't be styled. Radix gives us a max-height,\n * internal scrolling, and auto-scroll to the selected year.\n */\nfunction CalendarDropdown({\n  options = [],\n  value,\n  onChange,\n  disabled,\n  'aria-label': ariaLabel,\n}: DropdownProps) {\n  const selected = options.find((opt) => opt.value === Number(value));\n\n  return (\n    <Select\n      value={value === undefined ? undefined : String(value)}\n      onValueChange={(v) => {\n        // RDP's handler expects a native select change event — fake the shape.\n        onChange?.({ target: { value: v } } as unknown as ChangeEvent<HTMLSelectElement>);\n      }}\n      disabled={disabled}\n    >\n      <SelectPrimitive.Trigger\n        aria-label={ariaLabel}\n        className={cn(\n          'border-border bg-card text-foreground inline-flex h-7 items-center gap-1 rounded-md border px-2 text-sm font-medium',\n          'hover:bg-background-muted focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )}\n      >\n        <SelectPrimitive.Value>{selected?.label}</SelectPrimitive.Value>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown className=\"size-3.5 opacity-60\" aria-hidden />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n      <SelectContent className=\"max-h-64\">\n        {options.map((opt) => (\n          <SelectItem key={opt.value} value={String(opt.value)} disabled={opt.disabled}>\n            {opt.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nconst navButton = cn(\n  'pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted',\n  'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  'disabled:opacity-40 disabled:pointer-events-none',\n);\n\n/**\n * Standalone calendar surface. Used by DatePicker, but can also be embedded\n * directly in popovers, sheets, or inline forms. Wraps `react-day-picker` v9.\n *\n * Not a forwardRef: RDP v9's `DayPicker` is a plain function component and\n * exposes no root ref, so a forwarded ref would silently be dropped.\n */\nexport function Calendar({\n  className,\n  classNames,\n  captionLayout = 'dropdown',\n  startMonth,\n  endMonth,\n  labels,\n  weekStartsOn = 1,\n  ...props\n}: CalendarProps) {\n  const strings = useStrings();\n  // Bound the month/year dropdowns. Consumers can narrow this with\n  // startMonth / endMonth; the default spans a century back to a decade ahead\n  // so the year dropdown is useful for both birthdays and future scheduling.\n  // Memoised — fresh Date identities every render defeat RDP's internal\n  // memoisation and re-derive the navigable range on each paint.\n  const { start, end } = useMemo(() => {\n    const now = new Date();\n    return {\n      start: startMonth ?? new Date(now.getFullYear() - 100, 0, 1),\n      end: endMonth ?? new Date(now.getFullYear() + 10, 11, 31),\n    };\n  }, [startMonth, endMonth]);\n\n  return (\n    <DayPicker\n      showOutsideDays\n      weekStartsOn={weekStartsOn}\n      captionLayout={captionLayout}\n      startMonth={start}\n      endMonth={end}\n      className={cn('border-border bg-card inline-block rounded-lg border p-3', className)}\n      labels={{\n        labelPrevious: () => strings.calendar.previous,\n        labelNext: () => strings.calendar.next,\n        labelMonthDropdown: () => strings.calendar.chooseMonth,\n        labelYearDropdown: () => strings.calendar.chooseYear,\n        labelNav: () => strings.calendar.nav,\n        ...labels,\n      }}\n      classNames={{\n        ...rdp,\n        root: cn(rdp.root, 'relative'),\n        months: 'relative flex flex-col gap-4 sm:flex-row sm:gap-6',\n        month: 'flex flex-col gap-3',\n        month_caption: 'relative flex h-8 items-center justify-center px-8',\n        dropdowns: 'flex items-center justify-center gap-2',\n        caption_label: 'flex items-center gap-1 text-sm font-medium',\n        // The caption is positioned and painted after the nav, so the nav must\n        // sit above it (z-10) for its buttons to receive clicks. The container\n        // itself ignores pointer events so the centred dropdowns underneath\n        // stay clickable — only the buttons opt back in.\n        nav: 'pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between',\n        button_previous: navButton,\n        button_next: navButton,\n        month_grid: 'w-full border-collapse',\n        weekdays: 'grid grid-cols-7',\n        weekday:\n          'h-8 w-9 text-center text-xs font-medium uppercase tracking-wide text-foreground-subtle',\n        week: 'mt-0.5 grid grid-cols-7',\n        day: 'relative h-9 w-9 p-0 text-center',\n        day_button: cn(\n          'inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        ),\n        // RDP 9 puts aria-selected / the modifier classes on the <td>, so the\n        // button is styled through its cell. `[&_button:hover]` outranks the\n        // button's own `hover:` rule so selected days keep the accent on hover.\n        selected: cn(\n          '[&_button]:bg-accent [&_button]:text-on-accent [&_button:hover]:bg-accent-hover',\n          '[&_button]:focus-visible:ring-offset-accent-soft',\n        ),\n        today: '[&_button]:border [&_button]:border-border',\n        outside: 'text-foreground-subtle',\n        disabled: 'opacity-40 pointer-events-none',\n        range_start: '[&_button]:rounded-r-none',\n        range_end: '[&_button]:rounded-l-none',\n        range_middle:\n          '[&_button]:bg-accent-soft [&_button]:text-foreground [&_button:hover]:bg-accent-soft [&_button]:rounded-none',\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Dropdown: CalendarDropdown,\n        Chevron: ({ orientation }) => {\n          if (orientation === 'left') return <ChevronLeft className=\"size-4\" />;\n          if (orientation === 'right') return <ChevronRight className=\"size-4\" />;\n          // up/down — used for the month/year dropdown carets\n          return <ChevronDown className=\"size-3.5 opacity-60\" />;\n        },\n      }}\n      {...props}\n    />\n  );\n}\nCalendar.displayName = 'Calendar';\n"],"names":["rdp","getDefaultClassNames","CalendarDropdown","options","value","onChange","disabled","ariaLabel","selected","opt","jsxs","Select","v","SelectPrimitive","cn","jsx","ChevronDown","SelectContent","SelectItem","navButton","Calendar","className","classNames","captionLayout","startMonth","endMonth","labels","weekStartsOn","props","strings","useStrings","start","end","useMemo","now","DayPicker","orientation","ChevronLeft","ChevronRight"],"mappings":"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"}

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

@@ -5,6 +5,8 @@ declare const card: (props?: ({
     padding?: "none" | "md" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof card> {
+    /** Render the child element (e.g. a router `<Link>`) with Card styles. */
+    asChild?: boolean;
 }
 /**
  * Bounded surface used to group related content. Per the refined-minimal

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

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Slot as C } from "@radix-ui/react-slot";
 import { cn as i } from "../../lib/utils.js";
-import { cva as g } from "class-variance-authority";
-const b = g(
+import { cva as v } from "class-variance-authority";
+const x = v(
   [
     "rounded-lg border bg-card text-card-foreground",
     "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]"
@@ -21,7 +22,8 @@ const b = g(
       padding: {
         none: "",
         sm: "p-4",
-        md: "p-5",
+        /* CANON: 16 compact/mobile, 24 desktop — never 20. */
+        md: "p-4 md:p-6",
         lg: "p-6"
       }
     },
@@ -30,87 +32,66 @@ const b = g(
       padding: "md"
     }
   }
-), v = n(function({ className: e, variant: r, padding: t, onClick: a, onKeyDown: u, role: c, tabIndex: l, ...m }, p) {
-  const f = r === "interactive" && typeof a == "function";
-  return /* @__PURE__ */ d(
-    "div",
+), N = d(function({ className: t, variant: r, padding: e, onClick: s, onKeyDown: c, role: f, tabIndex: l, asChild: m, ...p }, g) {
+  const b = m ? C : "div", u = r === "interactive" && typeof s == "function";
+  return /* @__PURE__ */ o(
+    b,
     {
-      ref: p,
-      role: c ?? (f ? "button" : void 0),
-      tabIndex: l ?? (f ? 0 : void 0),
-      onClick: a,
-      onKeyDown: f || u ? (o) => {
-        u == null || u(o), !(o.defaultPrevented || !f) && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a == null || a(o));
+      ref: g,
+      role: f ?? (u ? "button" : void 0),
+      tabIndex: l ?? (u ? 0 : void 0),
+      onClick: s,
+      onKeyDown: u || c ? (a) => {
+        c == null || c(a), !(a.defaultPrevented || !u) && a.target === a.currentTarget && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), a.currentTarget.click());
       } : void 0,
-      className: i(b({ variant: r, padding: t }), e),
-      ...m
+      className: i(x({ variant: r, padding: e }), t),
+      ...p
     }
   );
 });
-v.displayName = "Card";
-const C = n(
-  function({ className: e, ...r }, t) {
-    return /* @__PURE__ */ d(
-      "div",
-      {
-        ref: t,
-        className: i("flex flex-col gap-1 pb-4", e),
-        ...r
-      }
-    );
+N.displayName = "Card";
+const y = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("flex flex-col gap-1 pb-4", t), ...r });
   }
 );
-C.displayName = "CardHeader";
-const x = n(
-  function({ className: e, children: r, ...t }, a) {
-    return /* @__PURE__ */ d(
+y.displayName = "CardHeader";
+const h = d(
+  function({ className: t, children: r, ...e }, s) {
+    return /* @__PURE__ */ o(
       "h3",
       {
-        ref: a,
-        className: i("text-base font-semibold text-foreground leading-tight", e),
-        ...t,
+        ref: s,
+        className: i("text-foreground text-base leading-tight font-semibold", t),
+        ...e,
         children: r
       }
     );
   }
 );
-x.displayName = "CardTitle";
-const N = n(function({ className: e, ...r }, t) {
-  return /* @__PURE__ */ d(
-    "p",
-    {
-      ref: t,
-      className: i("text-sm text-foreground-muted", e),
-      ...r
-    }
-  );
+h.displayName = "CardTitle";
+const k = d(function({ className: t, ...r }, e) {
+  return /* @__PURE__ */ o("p", { ref: e, className: i("text-foreground-muted text-sm", t), ...r });
 });
-N.displayName = "CardDescription";
-const y = n(
-  function({ className: e, ...r }, t) {
-    return /* @__PURE__ */ d("div", { ref: t, className: i("text-sm text-foreground", e), ...r });
+k.displayName = "CardDescription";
+const T = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("text-foreground text-sm", t), ...r });
   }
 );
-y.displayName = "CardContent";
-const h = n(
-  function({ className: e, ...r }, t) {
-    return /* @__PURE__ */ d(
-      "div",
-      {
-        ref: t,
-        className: i("flex items-center gap-2 pt-4", e),
-        ...r
-      }
-    );
+T.displayName = "CardContent";
+const F = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("flex items-center gap-2 pt-4", t), ...r });
   }
 );
-h.displayName = "CardFooter";
+F.displayName = "CardFooter";
 export {
-  v as Card,
-  y as CardContent,
-  N as CardDescription,
-  h as CardFooter,
-  C as CardHeader,
-  x as CardTitle
+  N as Card,
+  T as CardContent,
+  k as CardDescription,
+  F as CardFooter,
+  y as CardHeader,
+  h as CardTitle
 };
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/ui/Card.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type KeyboardEvent, type MouseEvent } from 'react';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst card = cva(\n  [\n    'rounded-lg border bg-card text-card-foreground',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        interactive: [\n          'border-border hover:border-border-strong hover:bg-background-subtle cursor-pointer',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          'focus-visible:ring-offset-background',\n        ],\n      },\n      padding: {\n        none: '',\n        sm: 'p-4',\n        md: 'p-5',\n        lg: 'p-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'md',\n    },\n  },\n);\n\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof card> {}\n\n/**\n * Bounded surface used to group related content. Per the refined-minimal\n * rules, cards on the page have a hairline border and no shadow.\n *\n * @example Header + content + footer\n *   <Card>\n *     <CardHeader>\n *       <CardTitle>Storage</CardTitle>\n *       <CardDescription>Usage across all projects.</CardDescription>\n *     </CardHeader>\n *     <CardContent>…</CardContent>\n *     <CardFooter><Button>Upgrade</Button></CardFooter>\n *   </Card>\n *\n * @example Clickable list row\n *   <Card variant=\"interactive\" onClick={open}>…</Card>\n *\n * @do Use the `border` style. If a card needs to \"float\" (modal, dropdown),\n *      it isn't a Card — it's a Popover/Dialog.\n * @dont Add `shadow-lg` to Cards. Shadows on inline surfaces violate the\n *       refined-minimal direction.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, variant, padding, onClick, onKeyDown, role, tabIndex, ...props },\n  ref,\n) {\n  // An interactive card with a click handler must be reachable and operable\n  // from the keyboard: expose it as a button and map Enter/Space to click.\n  const isButtonLike = variant === 'interactive' && typeof onClick === 'function';\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !isButtonLike) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n    }\n  };\n  return (\n    <div\n      ref={ref}\n      role={role ?? (isButtonLike ? 'button' : undefined)}\n      tabIndex={tabIndex ?? (isButtonLike ? 0 : undefined)}\n      onClick={onClick}\n      onKeyDown={isButtonLike || onKeyDown ? handleKeyDown : undefined}\n      className={cn(card({ variant, padding }), className)}\n      {...props}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col gap-1 pb-4', className)}\n        {...props}\n      />\n    );\n  },\n);\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, children, ...props }, ref) {\n    return (\n      <h3\n        ref={ref}\n        className={cn('text-base font-semibold text-foreground leading-tight', className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function CardDescription({ className, ...props }, ref) {\n  return (\n    <p\n      ref={ref}\n      className={cn('text-sm text-foreground-muted', className)}\n      {...props}\n    />\n  );\n});\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('text-sm text-foreground', className)} {...props} />;\n  },\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center gap-2 pt-4', className)}\n        {...props}\n      />\n    );\n  },\n);\nCardFooter.displayName = 'CardFooter';\n"],"names":["card","cva","Card","forwardRef","className","variant","padding","onClick","onKeyDown","role","tabIndex","props","ref","isButtonLike","jsx","event","cn","CardHeader","CardTitle","children","CardDescription","CardContent","CardFooter"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/ui/Card.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type KeyboardEvent } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst card = cva(\n  [\n    'rounded-lg border bg-card text-card-foreground',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        interactive: [\n          'border-border hover:border-border-strong hover:bg-background-subtle cursor-pointer',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          'focus-visible:ring-offset-background',\n        ],\n      },\n      padding: {\n        none: '',\n        sm: 'p-4',\n        /* CANON: 16 compact/mobile, 24 desktop — never 20. */\n        md: 'p-4 md:p-6',\n        lg: 'p-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'md',\n    },\n  },\n);\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof card> {\n  /** Render the child element (e.g. a router `<Link>`) with Card styles. */\n  asChild?: boolean;\n}\n\n/**\n * Bounded surface used to group related content. Per the refined-minimal\n * rules, cards on the page have a hairline border and no shadow.\n *\n * @example Header + content + footer\n *   <Card>\n *     <CardHeader>\n *       <CardTitle>Storage</CardTitle>\n *       <CardDescription>Usage across all projects.</CardDescription>\n *     </CardHeader>\n *     <CardContent>…</CardContent>\n *     <CardFooter><Button>Upgrade</Button></CardFooter>\n *   </Card>\n *\n * @example Clickable list row\n *   <Card variant=\"interactive\" onClick={open}>…</Card>\n *\n * @do Use the `border` style. If a card needs to \"float\" (modal, dropdown),\n *      it isn't a Card — it's a Popover/Dialog.\n * @dont Add `shadow-lg` to Cards. Shadows on inline surfaces violate the\n *       refined-minimal direction.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, variant, padding, onClick, onKeyDown, role, tabIndex, asChild, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot : 'div';\n  // An interactive card with a click handler must be reachable and operable\n  // from the keyboard: expose it as a button and map Enter/Space to click.\n  const isButtonLike = variant === 'interactive' && typeof onClick === 'function';\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !isButtonLike) return;\n    // Only when the card itself is focused — nested controls handle their own keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.currentTarget.click();\n    }\n  };\n  return (\n    <Comp\n      ref={ref}\n      role={role ?? (isButtonLike ? 'button' : undefined)}\n      tabIndex={tabIndex ?? (isButtonLike ? 0 : undefined)}\n      onClick={onClick}\n      onKeyDown={isButtonLike || onKeyDown ? handleKeyDown : undefined}\n      className={cn(card({ variant, padding }), className)}\n      {...props}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n  },\n);\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, children, ...props }, ref) {\n    return (\n      <h3\n        ref={ref}\n        className={cn('text-foreground text-base leading-tight font-semibold', className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function CardDescription({ className, ...props }, ref) {\n  return <p ref={ref} className={cn('text-foreground-muted text-sm', className)} {...props} />;\n});\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('text-foreground text-sm', className)} {...props} />;\n  },\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('flex items-center gap-2 pt-4', className)} {...props} />;\n  },\n);\nCardFooter.displayName = 'CardFooter';\n"],"names":["card","cva","Card","forwardRef","className","variant","padding","onClick","onKeyDown","role","tabIndex","asChild","props","ref","Comp","Slot","isButtonLike","jsx","event","cn","CardHeader","CardTitle","children","CardDescription","CardContent","CardFooter"],"mappings":"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"}

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

@@ -18,10 +18,10 @@ export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
     index?: number;
 }
 export declare const CarouselItem: import('react').ForwardRefExoticComponent<CarouselItemProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare function CarouselPrevious({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CarouselNext({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export declare const CarouselPrevious: import('react').ForwardRefExoticComponent<Omit<Omit<import('./IconButton.js').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "aria-label" | "icon"> & {
+    'aria-label'?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const CarouselNext: import('react').ForwardRefExoticComponent<Omit<Omit<import('./IconButton.js').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "aria-label" | "icon"> & {
+    'aria-label'?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 export {};