@craftzbay/ui 0.8.1 → 0.10.0

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

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as R, useId as $, useState as M, useMemo as j } from "react";
+import * as l from "@radix-ui/react-popover";
+import { Calendar as A } from "../../icons/index.js";
+import { Calendar as v } from "./Calendar.js";
+import { cn as O } from "../../lib/utils.js";
+import { useStrings as w } from "../../hooks/use-strings.js";
+function z(t) {
+  return t.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function S(t, e, o) {
+  return j(() => {
+    const n = [];
+    return t && n.push({ before: t }), e && n.push({ after: e }), o && n.push(...Array.isArray(o) ? o : [o]), n.length ? n : void 0;
+  }, [t, e, o]);
+}
+function B({
+  label: t,
+  placeholder: e,
+  hasValue: o,
+  children: n,
+  error: i,
+  fieldId: c,
+  disabled: f,
+  open: a
+}) {
+  const d = `${c}-error`, g = `${c}-calendar`, s = o ? n : e;
+  return /* @__PURE__ */ b("div", { className: "flex flex-col gap-1.5", children: [
+    t && /* @__PURE__ */ r("label", { htmlFor: c, className: "text-foreground text-sm font-medium", children: t }),
+    /* @__PURE__ */ r(l.Trigger, { asChild: !0, children: /* @__PURE__ */ b(
+      "button",
+      {
+        id: c,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": a,
+        "aria-controls": g,
+        disabled: f,
+        "aria-invalid": !!i || void 0,
+        "aria-describedby": i ? d : void 0,
+        className: O(
+          "bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-sm",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+          "focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          i ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border focus-visible:border-accent focus-visible:ring-ring",
+          !o && "text-foreground-subtle"
+        ),
+        children: [
+          /* @__PURE__ */ r(A, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }),
+          /* @__PURE__ */ r("span", { className: "truncate", title: typeof s == "string" ? s : void 0, children: s })
+        ]
+      }
+    ) }),
+    i && /* @__PURE__ */ r("p", { id: d, role: "alert", className: "text-danger-text text-xs", children: i })
+  ] });
+}
+const F = R(function({
+  value: e,
+  onChange: o,
+  label: n,
+  placeholder: i,
+  error: c,
+  disabled: f,
+  fromDate: a,
+  toDate: d,
+  disabledDays: g,
+  formatDate: s = z,
+  locale: x,
+  className: P
+}, k) {
+  const N = w(), y = i ?? N.datePicker.pickDate, p = $(), [m, h] = M(!1), C = S(a, d, g);
+  return /* @__PURE__ */ r("div", { ref: k, className: O(P), children: /* @__PURE__ */ b(l.Root, { open: m, onOpenChange: h, children: [
+    /* @__PURE__ */ r(
+      B,
+      {
+        label: n,
+        placeholder: y,
+        hasValue: !!e,
+        error: c,
+        fieldId: p,
+        disabled: f,
+        open: m,
+        children: e ? s(e) : ""
+      }
+    ),
+    /* @__PURE__ */ r(l.Portal, { children: /* @__PURE__ */ r(
+      l.Content,
+      {
+        id: `${p}-calendar`,
+        align: "start",
+        sideOffset: 4,
+        className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg",
+        children: /* @__PURE__ */ r(
+          v,
+          {
+            mode: "single",
+            selected: e,
+            onSelect: (u) => {
+              o(u ?? void 0), u && h(!1);
+            },
+            startMonth: a,
+            endMonth: d,
+            disabled: C,
+            locale: x
+          }
+        )
+      }
+    ) })
+  ] }) });
+});
+F.displayName = "DatePicker";
+const I = R(
+  function({
+    value: e,
+    onChange: o,
+    label: n,
+    placeholder: i,
+    error: c,
+    disabled: f,
+    fromDate: a,
+    toDate: d,
+    disabledDays: g,
+    formatDate: s = z,
+    locale: x,
+    className: P
+  }, k) {
+    const N = w(), y = i ?? N.datePicker.pickRange, p = $(), [m, h] = M(!1), C = !!(e != null && e.from), u = S(a, d, g);
+    return /* @__PURE__ */ r("div", { ref: k, className: O(P), children: /* @__PURE__ */ b(l.Root, { open: m, onOpenChange: h, children: [
+      /* @__PURE__ */ r(
+        B,
+        {
+          label: n,
+          placeholder: y,
+          hasValue: C,
+          error: c,
+          fieldId: p,
+          disabled: f,
+          open: m,
+          children: e != null && e.from && e.to ? `${s(e.from)} – ${s(e.to)}` : e != null && e.from ? s(e.from) : ""
+        }
+      ),
+      /* @__PURE__ */ r(l.Portal, { children: /* @__PURE__ */ r(
+        l.Content,
+        {
+          id: `${p}-calendar`,
+          align: "start",
+          sideOffset: 4,
+          className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg",
+          children: /* @__PURE__ */ r(
+            v,
+            {
+              mode: "range",
+              selected: e,
+              onSelect: o,
+              numberOfMonths: 2,
+              startMonth: a,
+              endMonth: d,
+              disabled: u,
+              locale: x
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+I.displayName = "DateRangePicker";
+export {
+  F as DatePicker,
+  I as DateRangePicker
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/ui/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useMemo, useState, type ReactNode } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport type { DateRange, DayPickerProps, Matcher } from 'react-day-picker';\nimport { Calendar as CalendarIcon } from '@/icons';\nimport { Calendar } from './Calendar';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Two related components share the same trigger shell:\n *\n *    <DatePicker value={date} onChange={setDate} />        // single date\n *    <DateRangePicker value={range} onChange={setRange} /> // {from,to}\n * --------------------------------------------------------------------------- */\n\ntype CalendarLocale = DayPickerProps['locale'];\n\nfunction defaultFormatDate(d: Date): string {\n  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n}\n\n/** Merge the fromDate/toDate bounds with any consumer-supplied RDP matcher. */\nfunction useBounds(fromDate?: Date, toDate?: Date, disabled?: Matcher | Matcher[]) {\n  return useMemo<Matcher[] | undefined>(() => {\n    const list: Matcher[] = [];\n    if (fromDate) list.push({ before: fromDate });\n    if (toDate) list.push({ after: toDate });\n    if (disabled) list.push(...(Array.isArray(disabled) ? disabled : [disabled]));\n    return list.length ? list : undefined;\n  }, [fromDate, toDate, disabled]);\n}\n\nfunction PickerTrigger({\n  label,\n  placeholder,\n  hasValue,\n  children,\n  error,\n  fieldId,\n  disabled,\n  open,\n}: {\n  label?: ReactNode;\n  placeholder: string;\n  hasValue: boolean;\n  children: ReactNode;\n  error?: ReactNode;\n  fieldId: string;\n  disabled?: boolean;\n  open: boolean;\n}) {\n  const errorId = `${fieldId}-error`;\n  const calendarId = `${fieldId}-calendar`;\n  const text = hasValue ? children : placeholder;\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <label htmlFor={fieldId} className=\"text-foreground text-sm font-medium\">\n          {label}\n        </label>\n      )}\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          id={fieldId}\n          type=\"button\"\n          // combobox-with-dialog pattern: lets the field carry aria-invalid like other inputs.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={calendarId}\n          disabled={disabled}\n          aria-invalid={Boolean(error) || undefined}\n          aria-describedby={error ? errorId : undefined}\n          className={cn(\n            'bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-sm',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            error\n              ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n              : 'border-border focus-visible:border-accent focus-visible:ring-ring',\n            !hasValue && 'text-foreground-subtle',\n          )}\n        >\n          <CalendarIcon className=\"text-foreground-subtle size-4\" aria-hidden />\n          <span className=\"truncate\" title={typeof text === 'string' ? text : undefined}>\n            {text}\n          </span>\n        </button>\n      </PopoverPrimitive.Trigger>\n      {error && (\n        <p id={errorId} role=\"alert\" className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\ninterface PickerCommonProps {\n  label?: ReactNode;\n  placeholder?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  /** Restrict to a date range. Days outside are not selectable. */\n  fromDate?: Date;\n  toDate?: Date;\n  /** Extra RDP matcher(s) for disabled days, merged with `fromDate`/`toDate`. */\n  disabledDays?: Matcher | Matcher[];\n  /** Custom display formatter for the trigger text. */\n  formatDate?: (d: Date) => string;\n  /** date-fns locale object passed through to react-day-picker. */\n  locale?: CalendarLocale;\n  className?: string;\n}\n\nexport interface DatePickerProps extends PickerCommonProps {\n  value?: Date;\n  onChange: (date: Date | undefined) => void;\n}\n\n/**\n * Single-date picker.\n *\n * @example\n *   <DatePicker label=\"Date of birth\" value={dob} onChange={setDob} />\n *\n * @do Use locale-aware formatting via `formatDate` / `locale`.\n * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(\n  {\n    value,\n    onChange,\n    label,\n    placeholder: placeholderProp,\n    error,\n    disabled,\n    fromDate,\n    toDate,\n    disabledDays,\n    formatDate = defaultFormatDate,\n    locale,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.datePicker.pickDate;\n  const fieldId = useId();\n  const [open, setOpen] = useState(false);\n  const bounds = useBounds(fromDate, toDate, disabledDays);\n\n  return (\n    <div ref={ref} className={cn(className)}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PickerTrigger\n          label={label}\n          placeholder={placeholder}\n          hasValue={Boolean(value)}\n          error={error}\n          fieldId={fieldId}\n          disabled={disabled}\n          open={open}\n        >\n          {value ? formatDate(value) : ''}\n        </PickerTrigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            id={`${fieldId}-calendar`}\n            align=\"start\"\n            sideOffset={4}\n            className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg\"\n          >\n            <Calendar\n              mode=\"single\"\n              selected={value}\n              onSelect={(d) => {\n                onChange(d ?? undefined);\n                if (d) setOpen(false);\n              }}\n              startMonth={fromDate}\n              endMonth={toDate}\n              disabled={bounds}\n              locale={locale}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </div>\n  );\n});\nDatePicker.displayName = 'DatePicker';\n\nexport interface DateRangePickerProps extends PickerCommonProps {\n  value?: DateRange;\n  onChange: (range: DateRange | undefined) => void;\n}\n\n/**\n * Two-date range picker. `value` is `{from, to}`.\n *\n * @example\n *   <DateRangePicker label=\"Reporting period\" value={range} onChange={setRange} />\n */\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      value,\n      onChange,\n      label,\n      placeholder: placeholderProp,\n      error,\n      disabled,\n      fromDate,\n      toDate,\n      disabledDays,\n      formatDate = defaultFormatDate,\n      locale,\n      className,\n    },\n    ref,\n  ) {\n    const strings = useStrings();\n    const placeholder = placeholderProp ?? strings.datePicker.pickRange;\n    const fieldId = useId();\n    const [open, setOpen] = useState(false);\n    const hasValue = Boolean(value?.from);\n    const bounds = useBounds(fromDate, toDate, disabledDays);\n\n    return (\n      <div ref={ref} className={cn(className)}>\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PickerTrigger\n            label={label}\n            placeholder={placeholder}\n            hasValue={hasValue}\n            error={error}\n            fieldId={fieldId}\n            disabled={disabled}\n            open={open}\n          >\n            {value?.from && value.to\n              ? `${formatDate(value.from)} – ${formatDate(value.to)}`\n              : value?.from\n                ? formatDate(value.from)\n                : ''}\n          </PickerTrigger>\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              id={`${fieldId}-calendar`}\n              align=\"start\"\n              sideOffset={4}\n              className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg\"\n            >\n              <Calendar\n                mode=\"range\"\n                selected={value}\n                onSelect={onChange}\n                numberOfMonths={2}\n                startMonth={fromDate}\n                endMonth={toDate}\n                disabled={bounds}\n                locale={locale}\n              />\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </div>\n    );\n  },\n);\nDateRangePicker.displayName = 'DateRangePicker';\n"],"names":["defaultFormatDate","d","useBounds","fromDate","toDate","disabled","useMemo","list","PickerTrigger","label","placeholder","hasValue","children","error","fieldId","open","errorId","calendarId","text","jsxs","jsx","PopoverPrimitive","cn","CalendarIcon","DatePicker","forwardRef","value","onChange","placeholderProp","disabledDays","formatDate","locale","className","ref","strings","useStrings","useId","setOpen","useState","bounds","Calendar","DateRangePicker"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { DeepPartial, UiStrings } from '../../lib/strings.js';
 /**
  * Per-brand token overrides. Keys are CSS variable names (without the `--`
  * prefix); values are CSS values. Any unspecified token falls back to the
@@ -18,10 +19,16 @@ export type BrandTokens = Record<string, string>;
 export interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {
     /** Token overrides (CSS variable name → value). */
     tokens?: BrandTokens;
+    /**
+     * Override any of the library's built-in UI strings (aria-labels,
+     * placeholders, empty states). Partial — merged over the parent provider /
+     * English defaults. Pass `mnStrings` for Mongolian.
+     */
+    strings?: DeepPartial<UiStrings>;
     /** Children to scope this brand to. */
     children: ReactNode;
 }
-export declare function DesignSystemProvider({ tokens, className, children, style, ...props }: DesignSystemProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DesignSystemProvider({ tokens, strings, className, children, style, ...props }: DesignSystemProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Built-in accent presets — swap the system's single accent colour without
  * touching anything else.

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

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { cn as m } from "../../lib/utils.js";
+import { useStrings as b, StringsContext as d } from "../../hooks/use-strings.js";
+import { mergeStrings as f } from "../../lib/strings.js";
+function P({
+  tokens: o,
+  strings: e,
+  className: n,
+  children: s,
+  style: a,
+  ...h
+}) {
+  const t = b(), k = g(
+    () => f(t, e),
+    [t, e]
+  ), l = { ...a };
+  if (o)
+    for (const [c, i] of Object.entries(o)) {
+      const u = c.startsWith("--") ? c : `--${c}`;
+      l[u] = i;
+    }
+  return /* @__PURE__ */ r(d.Provider, { value: k, children: /* @__PURE__ */ r("div", { "data-brand-scope": !0, className: m("contents", n), style: l, ...h, children: s }) });
+}
+const j = {
+  /** The library default — graphite indigo. */
+  default: {},
+  /** Blue. */
+  blue: {
+    accent: "oklch(0.55 0.16 250)",
+    "color-accent-700": "oklch(0.47 0.16 250)",
+    "color-accent-800": "oklch(0.39 0.14 250)",
+    "accent-subtle": "oklch(0.95 0.04 250)",
+    "accent-subtle-foreground": "oklch(0.45 0.15 250)",
+    ring: "oklch(0.62 0.16 250)"
+  },
+  /** Violet. */
+  violet: {
+    accent: "oklch(0.53 0.20 295)",
+    "color-accent-700": "oklch(0.45 0.18 295)",
+    "color-accent-800": "oklch(0.38 0.16 295)",
+    "accent-subtle": "oklch(0.95 0.04 295)",
+    "accent-subtle-foreground": "oklch(0.45 0.18 295)",
+    ring: "oklch(0.60 0.20 295)"
+  },
+  /** Emerald. */
+  emerald: {
+    accent: "oklch(0.55 0.13 160)",
+    "color-accent-700": "oklch(0.47 0.13 160)",
+    "color-accent-800": "oklch(0.39 0.12 160)",
+    "accent-subtle": "oklch(0.95 0.04 160)",
+    "accent-subtle-foreground": "oklch(0.42 0.12 160)",
+    ring: "oklch(0.60 0.13 160)"
+  },
+  /** Rose. */
+  rose: {
+    accent: "oklch(0.57 0.19 12)",
+    "color-accent-700": "oklch(0.49 0.18 12)",
+    "color-accent-800": "oklch(0.41 0.16 12)",
+    "accent-subtle": "oklch(0.95 0.035 12)",
+    "accent-subtle-foreground": "oklch(0.48 0.18 12)",
+    ring: "oklch(0.62 0.19 12)"
+  },
+  /** Amber. */
+  amber: {
+    accent: "oklch(0.62 0.14 65)",
+    "color-accent-700": "oklch(0.54 0.13 65)",
+    "color-accent-800": "oklch(0.46 0.12 65)",
+    "accent-subtle": "oklch(0.95 0.05 75)",
+    "accent-subtle-foreground": "oklch(0.48 0.12 65)",
+    ring: "oklch(0.66 0.14 65)"
+  }
+};
+export {
+  P as DesignSystemProvider,
+  j as brandPresets
+};
+//# sourceMappingURL=DesignSystemProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DesignSystemProvider.js","sources":["../../../src/components/ui/DesignSystemProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { StringsContext, useStrings } from '@/hooks/use-strings';\nimport { mergeStrings, type DeepPartial, type UiStrings } from '@/lib/strings';\n\n/**\n * Per-brand token overrides. Keys are CSS variable names (without the `--`\n * prefix); values are CSS values. Any unspecified token falls back to the\n * design system default.\n *\n * @example\n *   <DesignSystemProvider tokens={{ accent: '#ff5555', 'radius-md': '10px' }}>\n *     <App />\n *   </DesignSystemProvider>\n *\n * @example Swap in one of the built-in accent presets\n *   <DesignSystemProvider tokens={brandPresets.violet}>\n *     <Card>...</Card>\n *   </DesignSystemProvider>\n */\nexport type BrandTokens = Record<string, string>;\n\nexport interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Token overrides (CSS variable name → value). */\n  tokens?: BrandTokens;\n  /**\n   * Override any of the library's built-in UI strings (aria-labels,\n   * placeholders, empty states). Partial — merged over the parent provider /\n   * English defaults. Pass `mnStrings` for Mongolian.\n   */\n  strings?: DeepPartial<UiStrings>;\n  /** Children to scope this brand to. */\n  children: ReactNode;\n}\n\nexport function DesignSystemProvider({\n  tokens,\n  strings,\n  className,\n  children,\n  style,\n  ...props\n}: DesignSystemProviderProps) {\n  // Build the inline style from tokens — wrapping every key with `--` so\n  // consumers can pass either `accent` or `color-accent` without remembering\n  // the prefix dance.\n  const parentStrings = useStrings();\n  const resolvedStrings = useMemo(\n    () => mergeStrings(parentStrings, strings),\n    [parentStrings, strings],\n  );\n  const css: CSSProperties = { ...style };\n  if (tokens) {\n    for (const [k, v] of Object.entries(tokens)) {\n      const key = k.startsWith('--') ? k : `--${k}`;\n      (css as Record<string, string>)[key] = v;\n    }\n  }\n\n  return (\n    <StringsContext.Provider value={resolvedStrings}>\n      <div data-brand-scope className={cn('contents', className)} style={css} {...props}>\n        {children}\n      </div>\n    </StringsContext.Provider>\n  );\n}\n\n/**\n * Built-in accent presets — swap the system's single accent colour without\n * touching anything else.\n *\n * These override the *semantic* tokens the utilities resolve to. globals.css\n * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →\n * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override\n * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /\n * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/\n * active steps (`--color-accent-700/800`) come from the raw palette and are\n * overridden directly. `default` is the built-in graphite-indigo.\n */\nexport const brandPresets = {\n  /** The library default — graphite indigo. */\n  default: {} as BrandTokens,\n  /** Blue. */\n  blue: {\n    accent: 'oklch(0.55 0.16 250)',\n    'color-accent-700': 'oklch(0.47 0.16 250)',\n    'color-accent-800': 'oklch(0.39 0.14 250)',\n    'accent-subtle': 'oklch(0.95 0.04 250)',\n    'accent-subtle-foreground': 'oklch(0.45 0.15 250)',\n    ring: 'oklch(0.62 0.16 250)',\n  },\n  /** Violet. */\n  violet: {\n    accent: 'oklch(0.53 0.20 295)',\n    'color-accent-700': 'oklch(0.45 0.18 295)',\n    'color-accent-800': 'oklch(0.38 0.16 295)',\n    'accent-subtle': 'oklch(0.95 0.04 295)',\n    'accent-subtle-foreground': 'oklch(0.45 0.18 295)',\n    ring: 'oklch(0.60 0.20 295)',\n  },\n  /** Emerald. */\n  emerald: {\n    accent: 'oklch(0.55 0.13 160)',\n    'color-accent-700': 'oklch(0.47 0.13 160)',\n    'color-accent-800': 'oklch(0.39 0.12 160)',\n    'accent-subtle': 'oklch(0.95 0.04 160)',\n    'accent-subtle-foreground': 'oklch(0.42 0.12 160)',\n    ring: 'oklch(0.60 0.13 160)',\n  },\n  /** Rose. */\n  rose: {\n    accent: 'oklch(0.57 0.19 12)',\n    'color-accent-700': 'oklch(0.49 0.18 12)',\n    'color-accent-800': 'oklch(0.41 0.16 12)',\n    'accent-subtle': 'oklch(0.95 0.035 12)',\n    'accent-subtle-foreground': 'oklch(0.48 0.18 12)',\n    ring: 'oklch(0.62 0.19 12)',\n  },\n  /** Amber. */\n  amber: {\n    accent: 'oklch(0.62 0.14 65)',\n    'color-accent-700': 'oklch(0.54 0.13 65)',\n    'color-accent-800': 'oklch(0.46 0.12 65)',\n    'accent-subtle': 'oklch(0.95 0.05 75)',\n    'accent-subtle-foreground': 'oklch(0.48 0.12 65)',\n    ring: 'oklch(0.66 0.14 65)',\n  },\n} as const;\n\nexport type BrandName = keyof typeof brandPresets;\n"],"names":["DesignSystemProvider","tokens","strings","className","children","style","props","parentStrings","useStrings","resolvedStrings","useMemo","mergeStrings","css","k","v","key","jsx","StringsContext","cn","brandPresets"],"mappings":";;;;;;AAqCO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAA8B;AAI5B,QAAMC,IAAgBC,EAAA,GAChBC,IAAkBC;AAAA,IACtB,MAAMC,EAAaJ,GAAeL,CAAO;AAAA,IACzC,CAACK,GAAeL,CAAO;AAAA,EAAA,GAEnBU,IAAqB,EAAE,GAAGP,EAAA;AAChC,MAAIJ;AACF,eAAW,CAACY,GAAGC,CAAC,KAAK,OAAO,QAAQb,CAAM,GAAG;AAC3C,YAAMc,IAAMF,EAAE,WAAW,IAAI,IAAIA,IAAI,KAAKA,CAAC;AAC1C,MAAAD,EAA+BG,CAAG,IAAID;AAAA,IACzC;AAGF,SACE,gBAAAE,EAACC,EAAe,UAAf,EAAwB,OAAOR,GAC9B,UAAA,gBAAAO,EAAC,SAAI,oBAAgB,IAAC,WAAWE,EAAG,YAAYf,CAAS,GAAG,OAAOS,GAAM,GAAGN,GACzE,UAAAF,GACH,GACF;AAEJ;AAcO,MAAMe,IAAe;AAAA;AAAA,EAE1B,SAAS,CAAA;AAAA;AAAA,EAET,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAEV;"}

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
-import { ButtonProps } from './Button';
+import { ButtonProps } from './Button.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 export declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
 export declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,140 @@
+"use client";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import * as r from "@radix-ui/react-dialog";
+import { X as C } from "../../icons/index.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as p } from "../../hooks/use-strings.js";
+import { Button as u } from "./Button.js";
+const w = r.Root, B = r.Trigger, z = r.Portal, T = r.Close, D = d(function({ className: o, ...i }, t) {
+  return /* @__PURE__ */ e(
+    r.Overlay,
+    {
+      ref: t,
+      className: n(
+        "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        o
+      ),
+      ...i
+    }
+  );
+});
+D.displayName = "DialogOverlay";
+const x = d(function({ className: o, children: i, showClose: t = !0, size: l = "md", ...c }, m) {
+  const g = p();
+  return /* @__PURE__ */ s(z, { children: [
+    /* @__PURE__ */ e(D, {}),
+    /* @__PURE__ */ s(
+      r.Content,
+      {
+        ref: m,
+        className: n(
+          "fixed left-1/2 top-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2",
+          "w-[calc(100%-2rem)] rounded-lg border border-border bg-card text-card-foreground shadow-lg",
+          "p-6",
+          "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",
+          l === "sm" && "max-w-[400px]",
+          l === "md" && "max-w-[520px]",
+          l === "lg" && "max-w-[720px]",
+          o
+        ),
+        ...c,
+        children: [
+          i,
+          t && /* @__PURE__ */ e(
+            r.Close,
+            {
+              "aria-label": g.dialog.close,
+              className: n(
+                "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle",
+                "hover:bg-background-muted hover:text-foreground",
+                "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+                "transition-colors duration-[var(--duration-fast)]"
+              ),
+              children: /* @__PURE__ */ e(C, { className: "size-4", "aria-hidden": !0 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+x.displayName = "DialogContent";
+function v({ className: a, ...o }) {
+  return /* @__PURE__ */ e("div", { className: n("flex flex-col gap-1 pb-4", a), ...o });
+}
+v.displayName = "DialogHeader";
+function h({ className: a, ...o }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: n("flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end", a),
+      ...o
+    }
+  );
+}
+h.displayName = "DialogFooter";
+const y = d(function({ className: o, ...i }, t) {
+  return /* @__PURE__ */ e(
+    r.Title,
+    {
+      ref: t,
+      className: n("text-lg font-semibold text-foreground leading-tight", o),
+      ...i
+    }
+  );
+});
+y.displayName = "DialogTitle";
+const b = d(function({ className: o, ...i }, t) {
+  return /* @__PURE__ */ e(
+    r.Description,
+    {
+      ref: t,
+      className: n("text-sm text-foreground-muted", o),
+      ...i
+    }
+  );
+});
+b.displayName = "DialogDescription";
+function j({
+  open: a,
+  onOpenChange: o,
+  title: i,
+  description: t,
+  confirmLabel: l,
+  cancelLabel: c,
+  confirmVariant: m = "primary",
+  onConfirm: g,
+  loading: N
+}) {
+  const f = p();
+  return /* @__PURE__ */ e(w, { open: a, onOpenChange: o, children: /* @__PURE__ */ s(x, { size: "sm", children: [
+    /* @__PURE__ */ s(v, { children: [
+      /* @__PURE__ */ e(y, { children: i }),
+      t && /* @__PURE__ */ e(b, { children: t })
+    ] }),
+    /* @__PURE__ */ s(h, { children: [
+      /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(u, { variant: "outline", children: c ?? f.confirmationDialog.cancel }) }),
+      /* @__PURE__ */ e(u, { variant: m, loading: N, onClick: g, children: l ?? f.confirmationDialog.confirm })
+    ] })
+  ] }) });
+}
+j.displayName = "ConfirmationDialog";
+export {
+  j as ConfirmationDialog,
+  w as Dialog,
+  T as DialogClose,
+  x as DialogContent,
+  b as DialogDescription,
+  h as DialogFooter,
+  v as DialogHeader,
+  D as DialogOverlay,
+  z as DialogPortal,
+  y as DialogTitle,
+  B as DialogTrigger
+};
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/ui/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { Button, type ButtonProps } from './Button';\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n        'fixed inset-0 z-[var(--z-overlay)] bg-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** Show the default close (×) button in the top-right. */\n  showClose?: boolean;\n  /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(function DialogContent({ className, children, showClose = true, size = 'md', ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed left-1/2 top-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2',\n          'w-[calc(100%-2rem)] rounded-lg border border-border bg-card text-card-foreground shadow-lg',\n          'p-6',\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          size === 'sm' && 'max-w-[400px]',\n          size === 'md' && 'max-w-[520px]',\n          size === 'lg' && 'max-w-[720px]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label={strings.dialog.close}\n            className={cn(\n              'absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle',\n              'hover:bg-background-muted hover:text-foreground',\n              'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n});\nDialogContent.displayName = 'DialogContent';\n\nexport function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n}\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  );\n}\nDialogFooter.displayName = 'DialogFooter';\n\nexport const DialogTitle = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold text-foreground leading-tight', className)}\n      {...props}\n    />\n  );\n});\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogDescription = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn('text-sm text-foreground-muted', className)}\n      {...props}\n    />\n  );\n});\nDialogDescription.displayName = 'DialogDescription';\n\n/* -----------------------------------------------------------------------------\n *  ConfirmationDialog — pre-composed pattern for destructive/important\n *  confirmations. Use this when the body is a single sentence and the only\n *  controls are Cancel + Confirm.\n * --------------------------------------------------------------------------- */\n\nexport interface ConfirmationDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Label of the confirm button. */\n  confirmLabel?: string;\n  /** Label of the cancel button. */\n  cancelLabel?: string;\n  /** Variant of the confirm button — typically `primary` or `destructive`. */\n  confirmVariant?: ButtonProps['variant'];\n  /** Called when the user confirms. Awaited — shows a spinner while pending. */\n  onConfirm: () => void | Promise<void>;\n  /** Whether the confirm button is currently submitting. */\n  loading?: boolean;\n}\n\n/**\n * Confirmation dialog with title, description, cancel + confirm buttons.\n *\n * @example Destructive confirmation\n *   <ConfirmationDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project?\"\n *     description=\"This permanently deletes the project and all its data.\"\n *     confirmLabel=\"Delete project\"\n *     confirmVariant=\"destructive\"\n *     onConfirm={handleDelete}\n *   />\n *\n * @do Lead the title with the action: \"Delete project?\" not \"Are you sure?\".\n *      State consequences in the description.\n * @dont Use for low-risk reversible actions — those don't need a dialog.\n */\nexport function ConfirmationDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel,\n  cancelLabel,\n  confirmVariant = 'primary',\n  onConfirm,\n  loading,\n}: ConfirmationDialogProps) {\n  const strings = useStrings();\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent size=\"sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">{cancelLabel ?? strings.confirmationDialog.cancel}</Button>\n          </DialogClose>\n          <Button variant={confirmVariant} loading={loading} onClick={onConfirm}>\n            {confirmLabel ?? strings.confirmationDialog.confirm}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nConfirmationDialog.displayName = 'ConfirmationDialog';\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","jsx","cn","DialogContent","children","showClose","size","strings","useStrings","jsxs","X","DialogHeader","DialogFooter","DialogTitle","DialogDescription","ConfirmationDialog","open","onOpenChange","title","description","confirmLabel","cancelLabel","confirmVariant","onConfirm","loading","Button"],"mappings":"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"}

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

@@ -17,7 +17,13 @@ export interface DrawerContentProps extends ComponentPropsWithoutRef<typeof Draw
 }
 export declare const DrawerContent: import('react').ForwardRefExoticComponent<DrawerContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerHeader {
+    var displayName: string;
+}
 export declare function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerFooter {
+    var displayName: string;
+}
 export declare const DrawerTitle: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
 export declare const DrawerDescription: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
 export {};

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

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Drawer as a } from "vaul";
+import { cn as n } from "../../lib/utils.js";
+const u = ({
+  shouldScaleBackground: t = !0,
+  ...r
+}) => /* @__PURE__ */ o(a.Root, { shouldScaleBackground: t, ...r });
+u.displayName = "Drawer";
+const O = a.Trigger, w = a.Portal, H = a.Close, m = s(function({ className: r, ...e }, l) {
+  return /* @__PURE__ */ o(
+    a.Overlay,
+    {
+      ref: l,
+      className: n("fixed inset-0 z-[var(--z-overlay)] bg-overlay", r),
+      ...e
+    }
+  );
+});
+m.displayName = "DrawerOverlay";
+const b = {
+  bottom: "inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90vh] flex-col rounded-t-xl border-t border-border",
+  top: "inset-x-0 top-0 mb-24 flex h-auto max-h-[90vh] flex-col rounded-b-xl border-b border-border",
+  left: "inset-y-0 left-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-r-xl border-r border-border",
+  right: "inset-y-0 right-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-l-xl border-l border-border"
+}, D = {
+  bottom: "mx-auto mt-3 h-1.5 w-12 rounded-full bg-border",
+  top: "mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last",
+  left: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0",
+  right: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch"
+}, h = s(function({ className: r, direction: e = "bottom", hideHandle: l, children: f, ...c }, x) {
+  const d = e === "left" || e === "right";
+  return /* @__PURE__ */ i(w, { children: [
+    /* @__PURE__ */ o(m, {}),
+    /* @__PURE__ */ i(
+      a.Content,
+      {
+        ref: x,
+        className: n(
+          "bg-card fixed z-[var(--z-modal)]",
+          b[e],
+          d && "flex-row",
+          r
+        ),
+        ...c,
+        children: [
+          !l && /* @__PURE__ */ o("div", { "aria-hidden": !0, className: D[e] }),
+          /* @__PURE__ */ o("div", { className: n("min-h-0 min-w-0 flex-1", d && "flex flex-col"), children: f })
+        ]
+      }
+    )
+  ] });
+});
+h.displayName = "DrawerContent";
+function p({ className: t, ...r }) {
+  return /* @__PURE__ */ o("div", { className: n("grid gap-1 p-4 text-center sm:text-left", t), ...r });
+}
+p.displayName = "DrawerHeader";
+function g({ className: t, ...r }) {
+  return /* @__PURE__ */ o("div", { className: n("mt-auto flex flex-col gap-2 p-4", t), ...r });
+}
+g.displayName = "DrawerFooter";
+const y = s(function({ className: r, ...e }, l) {
+  return /* @__PURE__ */ o(
+    a.Title,
+    {
+      ref: l,
+      className: n("text-lg font-semibold", r),
+      ...e
+    }
+  );
+});
+y.displayName = "DrawerTitle";
+const v = s(function({ className: r, ...e }, l) {
+  return /* @__PURE__ */ o(
+    a.Description,
+    {
+      ref: l,
+      className: n("text-foreground-muted text-sm", r),
+      ...e
+    }
+  );
+});
+v.displayName = "DrawerDescription";
+export {
+  u as Drawer,
+  H as DrawerClose,
+  h as DrawerContent,
+  v as DrawerDescription,
+  g as DrawerFooter,
+  p as DrawerHeader,
+  m as DrawerOverlay,
+  w as DrawerPortal,
+  y as DrawerTitle,
+  O as DrawerTrigger
+};
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/ui/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport { Drawer as DrawerPrimitive } from 'vaul';\nimport { cn } from '@/lib/utils';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport const Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />\n);\nDrawer.displayName = 'Drawer';\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport const DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn('fixed inset-0 z-[var(--z-overlay)] bg-overlay', className)}\n      {...props}\n    />\n  );\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n\nconst directionStyles: Record<Direction, string> = {\n  bottom:\n    'inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90vh] flex-col rounded-t-xl border-t border-border',\n  top: 'inset-x-0 top-0 mb-24 flex h-auto max-h-[90vh] flex-col rounded-b-xl border-b border-border',\n  left: 'inset-y-0 left-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-r-xl border-r border-border',\n  right:\n    'inset-y-0 right-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-l-xl border-l border-border',\n};\n\nconst handleStyles: Record<Direction, string> = {\n  bottom: 'mx-auto mt-3 h-1.5 w-12 rounded-full bg-border',\n  top: 'mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last',\n  left: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0',\n  right: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch',\n};\n\nexport interface DrawerContentProps extends ComponentPropsWithoutRef<\n  typeof DrawerPrimitive.Content\n> {\n  /** Side the drawer slides in from. Default `bottom`. */\n  direction?: Direction;\n  /** Hide the drag handle. */\n  hideHandle?: boolean;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  DrawerContentProps\n>(function DrawerContent({ className, direction = 'bottom', hideHandle, children, ...props }, ref) {\n  const isHorizontal = direction === 'left' || direction === 'right';\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-card fixed z-[var(--z-modal)]',\n          directionStyles[direction],\n          isHorizontal && 'flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {!hideHandle && <div aria-hidden className={handleStyles[direction]} />}\n        <div className={cn('min-h-0 min-w-0 flex-1', isHorizontal && 'flex flex-col')}>\n          {children}\n        </div>\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\nDrawerContent.displayName = 'DrawerContent';\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('grid gap-1 p-4 text-center sm:text-left', className)} {...props} />;\n}\nDrawerHeader.displayName = 'DrawerHeader';\n\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n}\nDrawerFooter.displayName = 'DrawerFooter';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n});\nDrawerTitle.displayName = 'DrawerTitle';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nDrawerDescription.displayName = 'DrawerDescription';\n"],"names":["Drawer","shouldScaleBackground","props","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","forwardRef","className","ref","jsx","cn","directionStyles","handleStyles","DrawerContent","direction","hideHandle","children","isHorizontal","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;;;AAaO,MAAMA,IAAS,CAAC;AAAA,EACrB,uBAAAC,IAAwB;AAAA,EACxB,GAAGC;AACL,wBACGC,EAAgB,MAAhB,EAAqB,uBAAAF,GAA+C,GAAGC,EAAA,CAAO;AAEjFF,EAAO,cAAc;AAEd,MAAMI,IAAgBD,EAAgB,SAChCE,IAAeF,EAAgB,QAC/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAG3B,SAAuB,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACrD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,iDAAiDH,CAAS;AAAA,MACvE,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAc,cAAc;AAE5B,MAAMM,IAA6C;AAAA,EACjD,QACE;AAAA,EACF,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OACE;AACJ,GAEMC,IAA0C;AAAA,EAC9C,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT,GAWaC,IAAgBP,EAG3B,SAAuB,EAAE,WAAAC,GAAW,WAAAO,IAAY,UAAU,YAAAC,GAAY,UAAAC,GAAU,GAAGhB,EAAA,GAASQ,GAAK;AACjG,QAAMS,IAAeH,MAAc,UAAUA,MAAc;AAC3D,2BACGX,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAM,EAACJ,GAAA,EAAc;AAAA,IACf,gBAAAa;AAAA,MAACjB,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAO;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACAC,EAAgBG,CAAS;AAAA,UACzBG,KAAgB;AAAA,UAChBV;AAAA,QAAA;AAAA,QAED,GAAGP;AAAA,QAEH,UAAA;AAAA,UAAA,CAACe,uBAAe,OAAA,EAAI,eAAW,IAAC,WAAWH,EAAaE,CAAS,GAAG;AAAA,UACrE,gBAAAL,EAAC,SAAI,WAAWC,EAAG,0BAA0BO,KAAgB,eAAe,GACzE,UAAAD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,CAAC;AACDH,EAAc,cAAc;AAErB,SAASM,EAAa,EAAE,WAAAZ,GAAW,GAAGP,KAAyC;AACpF,SAAO,gBAAAS,EAAC,SAAI,WAAWC,EAAG,2CAA2CH,CAAS,GAAI,GAAGP,GAAO;AAC9F;AACAmB,EAAa,cAAc;AAEpB,SAASC,EAAa,EAAE,WAAAb,GAAW,GAAGP,KAAyC;AACpF,SAAO,gBAAAS,EAAC,SAAI,WAAWC,EAAG,mCAAmCH,CAAS,GAAI,GAAGP,GAAO;AACtF;AACAoB,EAAa,cAAc;AAEpB,MAAMC,IAAcf,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,yBAAyBH,CAAS;AAAA,MAC/C,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDqB,EAAY,cAAc;AAEnB,MAAMC,IAAoBhB,EAG/B,SAA2B,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACzD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDsB,EAAkB,cAAc;"}