@craftzbay/ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Slot as p } from "@radix-ui/react-slot";
+import { Loader2 as x } from "../../icons/index.js";
+import { cn as h } from "../../lib/utils.js";
+import { cva as k } from "class-variance-authority";
+const z = k(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-md text-sm font-medium",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-accent text-on-accent",
+          "hover:bg-accent-hover",
+          "active:bg-accent-active"
+        ],
+        secondary: [
+          "bg-background-muted text-foreground border border-border",
+          "hover:bg-surface-hover",
+          "active:bg-surface-active"
+        ],
+        outline: [
+          "border border-border bg-transparent text-foreground",
+          "hover:bg-background-muted",
+          "active:bg-background-subtle"
+        ],
+        ghost: [
+          "bg-transparent text-foreground",
+          "hover:bg-background-muted",
+          "active:bg-background-subtle"
+        ],
+        destructive: [
+          "bg-danger text-on-danger",
+          "hover:bg-danger-hover",
+          "active:bg-danger-active"
+        ],
+        link: [
+          "bg-transparent text-accent underline-offset-4 px-0",
+          "hover:underline",
+          "active:text-accent-hover"
+        ]
+      },
+      size: {
+        sm: "h-8 px-3 text-xs [&_svg]:size-4",
+        md: "h-9 px-3.5 text-sm [&_svg]:size-4",
+        lg: "h-10 px-4 text-sm [&_svg]:size-5",
+        icon: "h-9 w-9 [&_svg]:size-4"
+      }
+    },
+    compoundVariants: [
+      // The `link` variant ignores horizontal padding from the size variant.
+      { variant: "link", size: "sm", class: "h-auto px-0" },
+      { variant: "link", size: "md", class: "h-auto px-0" },
+      { variant: "link", size: "lg", class: "h-auto px-0" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), y = f(function({
+  className: o,
+  variant: i,
+  size: c,
+  asChild: d = !1,
+  loading: e = !1,
+  leadingIcon: u,
+  trailingIcon: v,
+  disabled: b,
+  children: t,
+  type: g = "button",
+  ...r
+}, a) {
+  const m = b || e, n = h(z({ variant: i, size: c }), o);
+  return d ? /* @__PURE__ */ s(
+    p,
+    {
+      ref: a,
+      "aria-busy": e || void 0,
+      "data-loading": e || void 0,
+      className: n,
+      ...r,
+      children: t
+    }
+  ) : /* @__PURE__ */ l(
+    "button",
+    {
+      ref: a,
+      type: g,
+      "aria-busy": e || void 0,
+      disabled: m,
+      "data-loading": e || void 0,
+      className: n,
+      ...r,
+      children: [
+        e ? /* @__PURE__ */ s(x, { className: "animate-spin", "aria-hidden": "true" }) : u,
+        t,
+        !e && v
+      ]
+    }
+  );
+});
+y.displayName = "Button";
+export {
+  y as Button
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/ui/Button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Variants — the entire visual surface of the Button.\n *\n *  All sizes share the same border radius (md = 6px) per the refined-minimal\n *  rules. Focus state is the standardised 2px-ring + 2px-offset on every\n *  variant, including `link`.\n * --------------------------------------------------------------------------- */\nconst button = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'rounded-md text-sm font-medium',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-accent text-on-accent',\n          'hover:bg-accent-hover',\n          'active:bg-accent-active',\n        ],\n        secondary: [\n          'bg-background-muted text-foreground border border-border',\n          'hover:bg-surface-hover',\n          'active:bg-surface-active',\n        ],\n        outline: [\n          'border border-border bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        ghost: [\n          'bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        destructive: [\n          'bg-danger text-on-danger',\n          'hover:bg-danger-hover',\n          'active:bg-danger-active',\n        ],\n        link: [\n          'bg-transparent text-accent underline-offset-4 px-0',\n          'hover:underline',\n          'active:text-accent-hover',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-xs [&_svg]:size-4',\n        md: 'h-9 px-3.5 text-sm [&_svg]:size-4',\n        lg: 'h-10 px-4 text-sm [&_svg]:size-5',\n        icon: 'h-9 w-9 [&_svg]:size-4',\n      },\n    },\n    compoundVariants: [\n      // The `link` variant ignores horizontal padding from the size variant.\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof button> {\n  /**\n   * Render as a different element via Radix Slot. Useful when wrapping a\n   * link: `<Button asChild><a href=\"…\">…</a></Button>`.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Show a spinner in place of the leading icon and disable the button.\n   * Use for async actions where the user must wait.\n   * @default false\n   */\n  loading?: boolean;\n  /** Icon rendered before the label. Replaced by a spinner when loading. */\n  leadingIcon?: ReactNode;\n  /** Icon rendered after the label. Hidden while loading. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Primary interactive element. Variants:\n *\n * - `primary` — accent fill, the single most prominent action on a screen.\n * - `secondary` — neutral fill, sits next to a primary or stands alone for\n *   secondary actions.\n * - `outline` — border only, transparent fill. Use when next to a primary.\n * - `ghost` — no border, hover background. Use in dense toolbars and tables.\n * - `destructive` — danger fill, reserved for irreversible actions.\n * - `link` — text styled as a link.\n *\n * @example Two-button row\n *   <div className=\"flex gap-2 justify-end\">\n *     <Button variant=\"outline\">Cancel</Button>\n *     <Button>Save changes</Button>\n *   </div>\n *\n * @example Loading state\n *   <Button loading leadingIcon={<Mail />}>Sending…</Button>\n *\n * @do Use one primary button per major surface. Verb-first labels.\n * @dont Stack three primary buttons in a row — only the most important\n *       action gets the primary variant.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    loading = false,\n    leadingIcon,\n    trailingIcon,\n    disabled,\n    children,\n    type = 'button',\n    ...props\n  },\n  ref,\n) {\n  const isDisabled = disabled || loading;\n  const classes = cn(button({ variant, size }), className);\n\n  if (asChild) {\n    // Slot requires exactly one element child — pass the consumer's element\n    // through untouched. The consumer is responsible for any leading/trailing\n    // icons inside that element.\n    return (\n      <Slot\n        ref={ref}\n        aria-busy={loading || undefined}\n        data-loading={loading || undefined}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      data-loading={loading || undefined}\n      className={classes}\n      {...props}\n    >\n      {loading ? (\n        <Loader2 className=\"animate-spin\" aria-hidden=\"true\" />\n      ) : (\n        leadingIcon\n      )}\n      {children}\n      {!loading && trailingIcon}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n"],"names":["button","cva","Button","forwardRef","className","variant","size","asChild","loading","leadingIcon","trailingIcon","disabled","children","type","props","ref","isDisabled","classes","cn","jsx","Slot","jsxs","Loader2"],"mappings":";;;;;;;AAeA,MAAMA,IAASC;AAAA,EACb;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,IAAc;AAAA,IAEtD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GA+CaC,IAASC,EAA2C,SAC/D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAaL,KAAYH,GACzBS,IAAUC,EAAGlB,EAAO,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAEvD,SAAIG,IAKA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,aAAWP,KAAW;AAAA,MACtB,gBAAcA,KAAW;AAAA,MACzB,WAAWS;AAAA,MACV,GAAGH;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,aAAWL,KAAW;AAAA,MACtB,UAAUQ;AAAA,MACV,gBAAcR,KAAW;AAAA,MACzB,WAAWS;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAN,sBACEc,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAErDb;AAAA,QAEDG;AAAA,QACA,CAACJ,KAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;AAEDR,EAAO,cAAc;"}

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

@@ -5,5 +5,11 @@ export type CalendarProps = DayPickerProps & {
 /**
  * Standalone calendar surface. Used by DatePicker, but can also be embedded
  * directly in popovers, sheets, or inline forms. Wraps `react-day-picker` v9.
+ *
+ * Not a forwardRef: RDP v9's `DayPicker` is a plain function component and
+ * exposes no root ref, so a forwarded ref would silently be dropped.
  */
-export declare const Calendar: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Calendar({ className, classNames, captionLayout, startMonth, endMonth, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}

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

@@ -0,0 +1,111 @@
+"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
+}) {
+  const o = d.find((e) => e.value === Number(n));
+  return /* @__PURE__ */ c(
+    x,
+    {
+      value: n === void 0 ? void 0 : String(n),
+      onValueChange: (e) => {
+        r == null || r({ target: { value: e } });
+      },
+      disabled: a,
+      children: [
+        /* @__PURE__ */ c(
+          l.Trigger,
+          {
+            "aria-label": s,
+            className: b(
+              "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",
+              "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(h, { className: "max-h-64", children: d.map((e) => /* @__PURE__ */ t(w, { 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 { start: e, end: m } = g(() => {
+    const i = /* @__PURE__ */ new Date();
+    return {
+      start: a ?? new Date(i.getFullYear() - 100, 0, 1),
+      end: s ?? new Date(i.getFullYear() + 10, 11, 31)
+    };
+  }, [a, s]);
+  return /* @__PURE__ */ t(
+    f,
+    {
+      showOutsideDays: !0,
+      captionLayout: r,
+      startMonth: e,
+      endMonth: m,
+      className: b("border-border bg-card inline-block rounded-lg border p-3", d),
+      classNames: {
+        root: "rdp",
+        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",
+        dropdowns: "flex items-center justify-center gap-2",
+        caption_label: "flex items-center gap-1 text-sm font-medium",
+        // The caption is positioned and painted after the nav, so the nav must
+        // sit above it (z-10) for its buttons to receive clicks. The container
+        // 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",
+        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",
+        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",
+        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",
+        hidden: "invisible",
+        ...n
+      },
+      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" })
+      },
+      ...o
+    }
+  );
+}
+_.displayName = "Calendar";
+export {
+  _ as Calendar
+};
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +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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"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
 declare const card: (props?: ({
     variant?: "default" | "interactive" | null | undefined;
     padding?: "none" | "md" | "sm" | "lg" | null | undefined;

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

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cn as i } from "../../lib/utils.js";
+import { cva as g } from "class-variance-authority";
+const b = g(
+  [
+    "rounded-lg border bg-card text-card-foreground",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        interactive: [
+          "border-border hover:border-border-strong hover:bg-background-subtle cursor-pointer",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:ring-offset-background"
+        ]
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-5",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      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",
+    {
+      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));
+      } : void 0,
+      className: i(b({ variant: r, padding: t }), e),
+      ...m
+    }
+  );
+});
+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
+      }
+    );
+  }
+);
+C.displayName = "CardHeader";
+const x = n(
+  function({ className: e, children: r, ...t }, a) {
+    return /* @__PURE__ */ d(
+      "h3",
+      {
+        ref: a,
+        className: i("text-base font-semibold text-foreground leading-tight", e),
+        ...t,
+        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
+    }
+  );
+});
+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 });
+  }
+);
+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
+      }
+    );
+  }
+);
+h.displayName = "CardFooter";
+export {
+  v as Card,
+  y as CardContent,
+  N as CardDescription,
+  h as CardFooter,
+  C as CardHeader,
+  x as CardTitle
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +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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"}

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

@@ -13,7 +13,11 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
  */
 export declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const CarouselContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const CarouselItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** 0-based position, used for the default "{i+1} of {n}" label. */
+    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;

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

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as b, useState as x, useCallback as k, useEffect as N, createContext as R, useContext as E } from "react";
+import L from "embla-carousel-react";
+import { ChevronRight as j, ChevronLeft as B } from "../../icons/index.js";
+import { cn as f } from "../../lib/utils.js";
+import { useStrings as d } from "../../hooks/use-strings.js";
+import { formatString as q } from "../../lib/strings.js";
+import { IconButton as h } from "./IconButton.js";
+const g = R(null);
+function C() {
+  const r = E(g);
+  if (!r) throw new Error("Carousel components must be used inside <Carousel>");
+  return r;
+}
+const D = b(function({ opts: n, orientation: t = "horizontal", setApi: o, className: l, children: c, ...u }, m) {
+  const v = d(), [P, e] = L({
+    ...n,
+    axis: t === "horizontal" ? "x" : "y"
+  }), [z, I] = x(!1), [y, S] = x(!1), [p, w] = x(0), i = k((s) => {
+    s && (I(s.canScrollPrev()), S(s.canScrollNext()));
+  }, []);
+  return N(() => {
+    if (e)
+      return o == null || o(e), i(e), e.on("reInit", i).on("select", i), () => {
+        e.off("reInit", i).off("select", i);
+      };
+  }, [e, i, o]), N(() => {
+    if (!e) return;
+    const s = () => w(e.slideNodes().length);
+    return s(), e.on("reInit", s), () => {
+      e.off("reInit", s);
+    };
+  }, [e]), /* @__PURE__ */ a(
+    g.Provider,
+    {
+      value: {
+        carouselRef: P,
+        api: e,
+        canPrev: z,
+        canNext: y,
+        scrollPrev: () => e == null ? void 0 : e.scrollPrev(),
+        scrollNext: () => e == null ? void 0 : e.scrollNext(),
+        orientation: t,
+        slideCount: p
+      },
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          ref: m,
+          className: f("relative", l),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": u["aria-label"] ?? (u["aria-labelledby"] ? void 0 : v.carousel.label),
+          ...u,
+          children: c
+        }
+      )
+    }
+  );
+});
+D.displayName = "Carousel";
+const F = b(
+  function({ className: n, ...t }, o) {
+    const { carouselRef: l, orientation: c } = C();
+    return /* @__PURE__ */ a("div", { ref: l, className: "overflow-hidden", children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: f(
+          "flex",
+          c === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          n
+        ),
+        ...t
+      }
+    ) });
+  }
+);
+F.displayName = "CarouselContent";
+const G = b(function({ className: n, index: t, ...o }, l) {
+  const c = d(), { orientation: u, slideCount: m } = C(), v = t !== void 0 && m > 0 ? q(c.carousel.slide, { index: t + 1, count: m }) : void 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: l,
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": o["aria-label"] ?? v,
+      className: f(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        u === "horizontal" ? "pl-4" : "pt-4",
+        n
+      ),
+      ...o
+    }
+  );
+});
+G.displayName = "CarouselItem";
+function V({ className: r }) {
+  const { canPrev: n, scrollPrev: t, orientation: o } = C(), l = d();
+  return /* @__PURE__ */ a(
+    h,
+    {
+      "aria-label": l.carousel.previous,
+      variant: "outline",
+      disabled: !n,
+      onClick: t,
+      icon: /* @__PURE__ */ a(B, {}),
+      className: f(
+        "absolute z-10",
+        o === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        r
+      )
+    }
+  );
+}
+function W({ className: r }) {
+  const { canNext: n, scrollNext: t, orientation: o } = C(), l = d();
+  return /* @__PURE__ */ a(
+    h,
+    {
+      "aria-label": l.carousel.next,
+      variant: "outline",
+      disabled: !n,
+      onClick: t,
+      icon: /* @__PURE__ */ a(j, {}),
+      className: f(
+        "absolute z-10",
+        o === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        r
+      )
+    }
+  );
+}
+export {
+  D as Carousel,
+  F as CarouselContent,
+  G as CarouselItem,
+  W as CarouselNext,
+  V as CarouselPrevious
+};
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/ui/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { ChevronLeft, ChevronRight } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { IconButton } from './IconButton';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype CarouselOptions = Parameters<typeof useEmblaCarousel>[0];\n\ninterface CarouselContextValue {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: CarouselApi;\n  canPrev: boolean;\n  canNext: boolean;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  orientation: 'horizontal' | 'vertical';\n  slideCount: number;\n}\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside <Carousel>');\n  return ctx;\n}\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  opts?: CarouselOptions;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n}\n\n/**\n * Embla-backed carousel. Compose with `<CarouselContent>`, `<CarouselItem>`,\n * `<CarouselPrevious>`, and `<CarouselNext>`.\n */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(\n  { opts, orientation = 'horizontal', setApi, className, children, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const [carouselRef, api] = useEmblaCarousel({\n    ...opts,\n    axis: orientation === 'horizontal' ? 'x' : 'y',\n  });\n  const [canPrev, setCanPrev] = useState(false);\n  const [canNext, setCanNext] = useState(false);\n  const [slideCount, setSlideCount] = useState(0);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanPrev(api.canScrollPrev());\n    setCanNext(api.canScrollNext());\n  }, []);\n\n  useEffect(() => {\n    if (!api) return;\n    setApi?.(api);\n    onSelect(api);\n    api.on('reInit', onSelect).on('select', onSelect);\n    return () => {\n      api.off('reInit', onSelect).off('select', onSelect);\n    };\n  }, [api, onSelect, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    const count = () => setSlideCount(api.slideNodes().length);\n    count();\n    api.on('reInit', count);\n    return () => {\n      api.off('reInit', count);\n    };\n  }, [api]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api,\n        canPrev,\n        canNext,\n        scrollPrev: () => api?.scrollPrev(),\n        scrollNext: () => api?.scrollNext(),\n        orientation,\n        slideCount,\n      }}\n    >\n      <div\n        ref={ref}\n        className={cn('relative', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={props['aria-label'] ?? (props['aria-labelledby'] ? undefined : strings.carousel.label)}\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n});\nCarousel.displayName = 'Carousel';\n\nexport const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CarouselContent({ className, ...props }, ref) {\n    const { carouselRef, orientation } = useCarousel();\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\n            'flex',\n            orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n            className,\n          )}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nCarouselContent.displayName = 'CarouselContent';\n\nexport interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** 0-based position, used for the default \"{i+1} of {n}\" label. */\n  index?: number;\n}\n\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(function CarouselItem(\n  { className, index, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const { orientation, slideCount } = useCarousel();\n  const defaultLabel =\n    index !== undefined && slideCount > 0\n      ? formatString(strings.carousel.slide, { index: index + 1, count: slideCount })\n      : undefined;\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      aria-label={props['aria-label'] ?? defaultLabel}\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = 'CarouselItem';\n\nexport function CarouselPrevious({ className }: { className?: string }) {\n  const { canPrev, scrollPrev, orientation } = useCarousel();\n  const strings = useStrings();\n  return (\n    <IconButton\n      aria-label={strings.carousel.previous}\n      variant=\"outline\"\n      disabled={!canPrev}\n      onClick={scrollPrev}\n      icon={<ChevronLeft />}\n      className={cn(\n        'absolute z-10',\n        orientation === 'horizontal'\n          ? 'top-1/2 -left-12 -translate-y-1/2'\n          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n    />\n  );\n}\n\nexport function CarouselNext({ className }: { className?: string }) {\n  const { canNext, scrollNext, orientation } = useCarousel();\n  const strings = useStrings();\n  return (\n    <IconButton\n      aria-label={strings.carousel.next}\n      variant=\"outline\"\n      disabled={!canNext}\n      onClick={scrollNext}\n      icon={<ChevronRight />}\n      className={cn(\n        'absolute z-10',\n        orientation === 'horizontal'\n          ? 'top-1/2 -right-12 -translate-y-1/2'\n          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n    />\n  );\n}\n"],"names":["CarouselContext","createContext","useCarousel","ctx","useContext","Carousel","forwardRef","opts","orientation","setApi","className","children","props","ref","strings","useStrings","carouselRef","api","useEmblaCarousel","canPrev","setCanPrev","useState","canNext","setCanNext","slideCount","setSlideCount","onSelect","useCallback","useEffect","count","jsx","cn","CarouselContent","CarouselItem","index","defaultLabel","formatString","CarouselPrevious","scrollPrev","IconButton","ChevronLeft","CarouselNext","scrollNext","ChevronRight"],"mappings":"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"}

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

@@ -9,18 +9,40 @@ export interface ChartPoint {
     x: string | number;
     y: number;
 }
-export interface ChartProps {
+export interface ChartSeries {
+    /** Name used in the accessible summary and tooltips. */
+    name?: string;
     data: ChartPoint[];
+}
+export interface ChartProps {
+    /** Primary series. Ignored when `series` is provided. */
+    data?: ChartPoint[];
+    /** Multiple series drawn on the same scale. */
+    series?: ChartSeries[];
+    /**
+     * Per-series colours. Defaults to the categorical token list below.
+     * TODO(globals.css): add `--chart-1..6` tokens and switch the defaults.
+     */
+    colors?: string[];
     /** Drawing height in px. */
     height?: number;
     /** Defaults to fluid 100%. */
     width?: number | string;
-    /** Tooltip / label rendered above the chart. */
+    /** Visible caption rendered above the chart. Doubles as the accessible name. */
     caption?: ReactNode;
+    /** Accessible name when there is no `caption`. */
+    'aria-label'?: string;
+    /** Alias of `aria-label` (SVG `<title>`). */
+    title?: string;
     /** Faint horizontal gridlines. Default true. */
     grid?: boolean;
+    /** Y-axis tick labels + first/last x labels. Default true. */
+    showAxis?: boolean;
     className?: string;
 }
-export declare function LineChart({ data, height, width, caption, grid, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_CHART_COLORS: string[];
+/** 1234 → "1.2K", 3_400_000 → "3.4M". */
+export declare function abbreviateNumber(n: number): string;
+export declare function LineChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;
 export declare function AreaChart(props: ChartProps): import("react/jsx-runtime").JSX.Element;
-export declare function BarChart({ data, height, width, caption, grid, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;