@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/dist/primitives/date-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/date-picker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport type { Locale } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\nimport { Calendar } from './calendar'\nimport { Button } from './button'\nimport { LinkButton } from './link-button'\nimport { TimeInput } from '../backend/inputs/TimeInput'\n\nexport type DatePickerFooter = 'apply-cancel' | 'today-clear' | 'none'\n\nexport type DatePickerProps = {\n  value?: Date | null\n  onChange: (value: Date | null) => void\n  placeholder?: string\n  size?: 'sm' | 'default'\n  disabled?: boolean\n  readOnly?: boolean\n  /**\n   * Footer mode in the popover.\n   * - `'apply-cancel'` (default, Figma-aligned): selecting a day stages a draft;\n   *   Apply commits and closes; Cancel reverts and closes.\n   * - `'today-clear'`: legacy behavior \u2014 Today commits today, Clear sets null.\n   * - `'none'`: no footer; selecting a day commits immediately and closes.\n   */\n  footer?: DatePickerFooter\n  /**\n   * Whether selecting a day commits the value and closes the popover.\n   * - In `footer='apply-cancel'`: ignored (commit happens via Apply).\n   * - In `footer='today-clear'`: default `true` for backward compatibility.\n   * - In `footer='none'`: always `true` (popover always closes after selection).\n   */\n  closeOnSelect?: boolean\n  /**\n   * Whether to show the \"Today\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showTodayButton?: boolean\n  /**\n   * Whether to show the \"Clear\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showClearButton?: boolean\n  withTime?: boolean\n  minuteStep?: number\n  align?: 'start' | 'center' | 'end'\n  minDate?: Date\n  maxDate?: Date\n  locale?: Locale\n  displayFormat?: string\n  className?: string\n  popoverClassName?: string\n  id?: string\n  name?: string\n  required?: boolean\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nconst DAY_FIRST_LOCALE_CODES = new Set([\n  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',\n])\n\nfunction deriveDisplayFormat(locale: Locale | undefined, withTime: boolean): string {\n  const code = locale?.code?.split('-')[0]?.toLowerCase() ?? ''\n  const dateFmt = code && DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'\n  return withTime ? `${dateFmt} HH:mm` : dateFmt\n}\n\nfunction extractTime(date: Date): string {\n  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n}\n\nfunction applyTimeToDate(base: Date, time: string): Date {\n  const [hourStr = '0', minuteStr = '0'] = time.split(':')\n  const hour = parseInt(hourStr, 10)\n  const minute = parseInt(minuteStr, 10)\n  const next = new Date(base)\n  next.setHours(isNaN(hour) ? 0 : hour, isNaN(minute) ? 0 : minute, 0, 0)\n  return next\n}\n\nfunction startOfDay(date: Date): Date {\n  const next = new Date(date)\n  next.setHours(0, 0, 0, 0)\n  return next\n}\n\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder,\n  size = 'default',\n  disabled = false,\n  readOnly = false,\n  footer = 'apply-cancel',\n  closeOnSelect,\n  showTodayButton = true,\n  showClearButton = true,\n  withTime = false,\n  minuteStep = 1,\n  align = 'start',\n  minDate,\n  maxDate,\n  locale,\n  displayFormat,\n  className,\n  popoverClassName,\n  id,\n  name,\n  required,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n}: DatePickerProps) {\n  const resolvedCloseOnSelect = closeOnSelect ?? footer === 'today-clear'\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<Date | null>(value ?? null)\n\n  const isInteractive = !disabled && !readOnly\n  const useDraft = footer === 'apply-cancel'\n\n  React.useEffect(() => {\n    if (open) setDraft(value ?? null)\n  }, [open, value])\n\n  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale, withTime)\n  const placeholderText = placeholder ?? (\n    withTime\n      ? t('ui.dateTimePicker.placeholder', 'Pick date and time')\n      : t('ui.datePicker.placeholder', 'Pick a date')\n  )\n\n  const formattedValue = React.useMemo(() => {\n    if (!value) return null\n    try {\n      return format(value, resolvedFormat, locale ? { locale } : undefined)\n    } catch {\n      return null\n    }\n  }, [value, resolvedFormat, locale])\n\n  const handleDaySelect = React.useCallback(\n    (day: Date | undefined) => {\n      if (!day || !isInteractive) return\n      const reference = withTime ? (useDraft ? draft : value) : null\n      const base = withTime\n        ? applyTimeToDate(day, reference ? extractTime(reference) : '00:00')\n        : startOfDay(day)\n      if (useDraft) {\n        setDraft(base)\n      } else {\n        onChange(base)\n        if (footer === 'none' || resolvedCloseOnSelect) setOpen(false)\n      }\n    },\n    [isInteractive, withTime, useDraft, draft, value, footer, resolvedCloseOnSelect, onChange],\n  )\n\n  const handleTimeChange = React.useCallback(\n    (time: string) => {\n      const target = useDraft ? draft : value\n      if (!target) return\n      const next = applyTimeToDate(target, time)\n      if (useDraft) setDraft(next)\n      else onChange(next)\n    },\n    [useDraft, draft, value, onChange],\n  )\n\n  const handleApply = React.useCallback(() => {\n    onChange(draft)\n    setOpen(false)\n  }, [draft, onChange])\n\n  const handleCancel = React.useCallback(() => {\n    setDraft(value ?? null)\n    setOpen(false)\n  }, [value])\n\n  const handleToday = React.useCallback(() => {\n    const today = withTime ? new Date() : startOfDay(new Date())\n    onChange(today)\n    setOpen(false)\n  }, [withTime, onChange])\n\n  const handleClear = React.useCallback(() => {\n    onChange(null)\n    setOpen(false)\n  }, [onChange])\n\n  const disabledMatcher = React.useMemo(() => {\n    if (!minDate && !maxDate) return undefined\n    const matchers: import('react-day-picker').Matcher[] = []\n    if (minDate) matchers.push({ before: minDate })\n    if (maxDate) matchers.push({ after: maxDate })\n    return matchers\n  }, [minDate, maxDate])\n\n  const heightClass = size === 'sm' ? 'h-8 px-2.5 text-xs' : 'h-9 px-3 text-sm'\n  const selectedDate = useDraft ? draft : value\n\n  return (\n    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-haspopup=\"dialog\"\n          aria-required={required ? true : undefined}\n          data-crud-focus-target=\"\"\n          data-slot=\"date-picker-trigger\"\n          disabled={disabled}\n          className={cn(\n            'w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left',\n            'focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground',\n            'hover:bg-muted/40',\n            'disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed',\n            'aria-invalid:border-destructive',\n            heightClass,\n            readOnly && 'cursor-default opacity-70',\n            !formattedValue && 'text-muted-foreground',\n            className,\n          )}\n          onClick={isInteractive ? undefined : (event) => event.preventDefault()}\n        >\n          <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"flex-1 truncate\">\n            {formattedValue ?? placeholderText}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align={align} className={cn('w-auto p-0', popoverClassName)}>\n        <Calendar\n          mode=\"single\"\n          selected={selectedDate ?? undefined}\n          onSelect={handleDaySelect}\n          locale={locale}\n          disabled={disabledMatcher}\n          initialFocus\n        />\n        {withTime && (\n          <div className=\"flex items-center gap-2 border-t px-3 py-2\">\n            <span className=\"text-sm text-muted-foreground shrink-0\">\n              {t('ui.datePicker.timeLabel', 'Time')}:\n            </span>\n            <TimeInput\n              value={selectedDate ? extractTime(selectedDate) : undefined}\n              onChange={handleTimeChange}\n              minuteStep={minuteStep}\n              disabled={!isInteractive || !selectedDate}\n            />\n          </div>\n        )}\n        {footer === 'apply-cancel' && (\n          <div className=\"flex items-center justify-end gap-2 border-t px-3 py-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleCancel}>\n              {t('ui.datePicker.cancelButton', 'Cancel')}\n            </Button>\n            <Button type=\"button\" size=\"sm\" onClick={handleApply}>\n              {t('ui.datePicker.applyButton', 'Apply')}\n            </Button>\n          </div>\n        )}\n        {footer === 'today-clear' && (showTodayButton || showClearButton) && (\n          <div className=\"flex items-center justify-between gap-2 border-t px-3 py-2\">\n            {showTodayButton ? (\n              <LinkButton type=\"button\" variant=\"primary\" onClick={handleToday}>\n                {t('ui.datePicker.todayButton', 'Today')}\n              </LinkButton>\n            ) : null}\n            {showClearButton ? (\n              <LinkButton type=\"button\" variant=\"gray\" onClick={handleClear} className=\"ml-auto\">\n                {t('ui.datePicker.clearButton', 'Clear')}\n              </LinkButton>\n            ) : null}\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/date-range-picker.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Calendar } from "./calendar.js";
+import { Button } from "./button.js";
+import {
+  defaultDateRangePresets
+} from "./date-picker-helpers.js";
+const DAY_FIRST_LOCALE_CODES = /* @__PURE__ */ new Set([
+  "pl",
+  "de",
+  "fr",
+  "es",
+  "it",
+  "pt",
+  "nl",
+  "ru",
+  "cs",
+  "sk",
+  "hu",
+  "ro"
+]);
+function deriveDateFormat(locale) {
+  const code = locale?.code?.split("-")[0]?.toLowerCase() ?? "";
+  return code && DAY_FIRST_LOCALE_CODES.has(code) ? "d MMM yyyy" : "MMM d, yyyy";
+}
+function defaultFormatRange(range, locale) {
+  const fmt = deriveDateFormat(locale);
+  const opts = locale ? { locale } : void 0;
+  return `${format(range.start, fmt, opts)} \u2013 ${format(range.end, fmt, opts)}`;
+}
+function toRDPRange(range) {
+  if (!range) return void 0;
+  return { from: range.start, to: range.end };
+}
+function fromRDPRange(rdp) {
+  if (!rdp || !rdp.from) return null;
+  return { start: rdp.from, end: rdp.to ?? rdp.from };
+}
+function rangesEqual(a, b) {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return a.start.getTime() === b.start.getTime() && a.end.getTime() === b.end.getTime();
+}
+function DateRangePicker({
+  value,
+  onChange,
+  presets,
+  showPresets = true,
+  placeholder,
+  size = "default",
+  disabled = false,
+  readOnly = false,
+  withFooter = true,
+  align = "start",
+  minDate,
+  maxDate,
+  numberOfMonths = 2,
+  locale,
+  formatRange,
+  className,
+  popoverClassName,
+  id,
+  name,
+  required,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState(value ?? null);
+  const [activePresetId, setActivePresetId] = React.useState(null);
+  const isInteractive = !disabled && !readOnly;
+  const useDraft = withFooter;
+  React.useEffect(() => {
+    if (open) {
+      setDraft(value ?? null);
+      setActivePresetId(null);
+    }
+  }, [open, value]);
+  const resolvedPresets = React.useMemo(
+    () => presets ?? defaultDateRangePresets(),
+    [presets]
+  );
+  const placeholderText = placeholder ?? t("ui.dateRangePicker.placeholder", "Pick a date range");
+  const formatter = formatRange ?? defaultFormatRange;
+  const formattedValue = React.useMemo(() => {
+    if (!value) return null;
+    return formatter(value, locale);
+  }, [value, formatter, locale]);
+  const selectedDate = useDraft ? draft : value;
+  const rdpSelected = toRDPRange(selectedDate);
+  const handleRangeSelect = React.useCallback(
+    (rdpRange) => {
+      if (!isInteractive) return;
+      const next = fromRDPRange(rdpRange);
+      setActivePresetId(null);
+      if (useDraft) {
+        setDraft(next);
+      } else {
+        onChange(next);
+        if (next?.start && next?.end) setOpen(false);
+      }
+    },
+    [isInteractive, useDraft, onChange]
+  );
+  const handlePresetClick = React.useCallback(
+    (preset) => {
+      if (!isInteractive) return;
+      const range = preset.range();
+      setActivePresetId(preset.id);
+      if (useDraft) {
+        setDraft(range);
+      } else {
+        onChange(range);
+        setOpen(false);
+      }
+    },
+    [isInteractive, useDraft, onChange]
+  );
+  const handleApply = React.useCallback(() => {
+    onChange(draft);
+    setOpen(false);
+  }, [draft, onChange]);
+  const handleCancel = React.useCallback(() => {
+    setDraft(value ?? null);
+    setActivePresetId(null);
+    setOpen(false);
+  }, [value]);
+  const disabledMatcher = React.useMemo(() => {
+    if (!minDate && !maxDate) return void 0;
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers;
+  }, [minDate, maxDate]);
+  const heightClass = size === "sm" ? "h-8 px-2.5 text-xs" : "h-9 px-3 text-sm";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: isInteractive ? setOpen : void 0, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        name,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-haspopup": "dialog",
+        "aria-required": required ? true : void 0,
+        "data-crud-focus-target": "",
+        "data-slot": "date-range-picker-trigger",
+        disabled,
+        className: cn(
+          "w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left",
+          "focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground",
+          "hover:bg-muted/40",
+          "disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed",
+          "aria-invalid:border-destructive",
+          heightClass,
+          readOnly && "cursor-default opacity-70",
+          !formattedValue && "text-muted-foreground",
+          className
+        ),
+        onClick: isInteractive ? void 0 : (event) => event.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: formattedValue ?? placeholderText })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align,
+        className: cn(
+          "w-auto p-0 flex flex-col overflow-hidden",
+          "max-h-[var(--radix-popover-content-available-height)]",
+          popoverClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-auto", children: [
+            showPresets ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "date-range-presets",
+                className: "flex w-[200px] shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2",
+                children: resolvedPresets.map((preset) => {
+                  const isActive = activePresetId === preset.id;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handlePresetClick(preset),
+                      className: cn(
+                        "inline-flex h-8 items-center rounded-md px-3 text-left text-sm transition-colors shrink-0",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        isActive && "bg-muted font-medium text-foreground"
+                      ),
+                      children: t(preset.labelKey, preset.id.replace(/_/g, " "))
+                    },
+                    preset.id
+                  );
+                })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                selected: rdpSelected,
+                onSelect: handleRangeSelect,
+                locale,
+                disabled: disabledMatcher,
+                numberOfMonths,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          withFooter ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-t bg-popover px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: selectedDate ? `${t("ui.dateRangePicker.rangeLabel", "Range")}: ${formatter(selectedDate, locale)}` : t("ui.dateRangePicker.rangeEmpty", "No range selected") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleCancel, children: t("ui.dateRangePicker.cancelButton", "Cancel") }),
+              /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: handleApply, children: t("ui.dateRangePicker.applyButton", "Apply") })
+            ] })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DateRangePicker
+};
+//# sourceMappingURL=date-range-picker.js.map

package/dist/primitives/date-range-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/date-range-picker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport type { Locale } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\nimport { Calendar } from './calendar'\nimport { Button } from './button'\nimport type { DateRange as RDPRange } from 'react-day-picker'\nimport type { DateRange } from '../backend/date-range/dateRanges'\nimport {\n  defaultDateRangePresets,\n  type DateRangePresetItem,\n} from './date-picker-helpers'\n\nexport type { DateRangePresetItem } from './date-picker-helpers'\n\nexport type DateRangePickerProps = {\n  value?: DateRange | null\n  onChange: (value: DateRange | null) => void\n  presets?: DateRangePresetItem[]\n  showPresets?: boolean\n  placeholder?: string\n  size?: 'sm' | 'default'\n  disabled?: boolean\n  readOnly?: boolean\n  withFooter?: boolean\n  align?: 'start' | 'center' | 'end'\n  minDate?: Date\n  maxDate?: Date\n  numberOfMonths?: 1 | 2\n  locale?: Locale\n  formatRange?: (value: DateRange, locale?: Locale) => string\n  className?: string\n  popoverClassName?: string\n  id?: string\n  name?: string\n  required?: boolean\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nconst DAY_FIRST_LOCALE_CODES = new Set([\n  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',\n])\n\nfunction deriveDateFormat(locale?: Locale): string {\n  const code = locale?.code?.split('-')[0]?.toLowerCase() ?? ''\n  return code && DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'\n}\n\nfunction defaultFormatRange(range: DateRange, locale?: Locale): string {\n  const fmt = deriveDateFormat(locale)\n  const opts = locale ? { locale } : undefined\n  return `${format(range.start, fmt, opts)} \u2013 ${format(range.end, fmt, opts)}`\n}\n\nfunction toRDPRange(range: DateRange | null | undefined): RDPRange | undefined {\n  if (!range) return undefined\n  return { from: range.start, to: range.end }\n}\n\nfunction fromRDPRange(rdp: RDPRange | undefined): DateRange | null {\n  if (!rdp || !rdp.from) return null\n  return { start: rdp.from, end: rdp.to ?? rdp.from }\n}\n\nfunction rangesEqual(a: DateRange | null, b: DateRange | null): boolean {\n  if (!a && !b) return true\n  if (!a || !b) return false\n  return a.start.getTime() === b.start.getTime() && a.end.getTime() === b.end.getTime()\n}\n\nexport function DateRangePicker({\n  value,\n  onChange,\n  presets,\n  showPresets = true,\n  placeholder,\n  size = 'default',\n  disabled = false,\n  readOnly = false,\n  withFooter = true,\n  align = 'start',\n  minDate,\n  maxDate,\n  numberOfMonths = 2,\n  locale,\n  formatRange,\n  className,\n  popoverClassName,\n  id,\n  name,\n  required,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n}: DateRangePickerProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<DateRange | null>(value ?? null)\n  const [activePresetId, setActivePresetId] = React.useState<string | null>(null)\n\n  const isInteractive = !disabled && !readOnly\n  const useDraft = withFooter\n\n  React.useEffect(() => {\n    if (open) {\n      setDraft(value ?? null)\n      setActivePresetId(null)\n    }\n  }, [open, value])\n\n  const resolvedPresets = React.useMemo<DateRangePresetItem[]>(\n    () => presets ?? defaultDateRangePresets(),\n    [presets],\n  )\n\n  const placeholderText = placeholder ?? t('ui.dateRangePicker.placeholder', 'Pick a date range')\n  const formatter = formatRange ?? defaultFormatRange\n  const formattedValue = React.useMemo(() => {\n    if (!value) return null\n    return formatter(value, locale)\n  }, [value, formatter, locale])\n\n  const selectedDate = useDraft ? draft : value\n  const rdpSelected = toRDPRange(selectedDate)\n\n  const handleRangeSelect = React.useCallback(\n    (rdpRange: RDPRange | undefined) => {\n      if (!isInteractive) return\n      const next = fromRDPRange(rdpRange)\n      setActivePresetId(null)\n      if (useDraft) {\n        setDraft(next)\n      } else {\n        onChange(next)\n        if (next?.start && next?.end) setOpen(false)\n      }\n    },\n    [isInteractive, useDraft, onChange],\n  )\n\n  const handlePresetClick = React.useCallback(\n    (preset: DateRangePresetItem) => {\n      if (!isInteractive) return\n      const range = preset.range()\n      setActivePresetId(preset.id)\n      if (useDraft) {\n        setDraft(range)\n      } else {\n        onChange(range)\n        setOpen(false)\n      }\n    },\n    [isInteractive, useDraft, onChange],\n  )\n\n  const handleApply = React.useCallback(() => {\n    onChange(draft)\n    setOpen(false)\n  }, [draft, onChange])\n\n  const handleCancel = React.useCallback(() => {\n    setDraft(value ?? null)\n    setActivePresetId(null)\n    setOpen(false)\n  }, [value])\n\n  const disabledMatcher = React.useMemo(() => {\n    if (!minDate && !maxDate) return undefined\n    const matchers: import('react-day-picker').Matcher[] = []\n    if (minDate) matchers.push({ before: minDate })\n    if (maxDate) matchers.push({ after: maxDate })\n    return matchers\n  }, [minDate, maxDate])\n\n  const heightClass = size === 'sm' ? 'h-8 px-2.5 text-xs' : 'h-9 px-3 text-sm'\n\n  return (\n    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-haspopup=\"dialog\"\n          aria-required={required ? true : undefined}\n          data-crud-focus-target=\"\"\n          data-slot=\"date-range-picker-trigger\"\n          disabled={disabled}\n          className={cn(\n            'w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left',\n            'focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground',\n            'hover:bg-muted/40',\n            'disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed',\n            'aria-invalid:border-destructive',\n            heightClass,\n            readOnly && 'cursor-default opacity-70',\n            !formattedValue && 'text-muted-foreground',\n            className,\n          )}\n          onClick={isInteractive ? undefined : (event) => event.preventDefault()}\n        >\n          <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"flex-1 truncate\">\n            {formattedValue ?? placeholderText}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align={align}\n        className={cn(\n          'w-auto p-0 flex flex-col overflow-hidden',\n          'max-h-[var(--radix-popover-content-available-height)]',\n          popoverClassName,\n        )}\n      >\n        <div className=\"flex min-h-0 flex-1 overflow-auto\">\n          {showPresets ? (\n            <div\n              data-slot=\"date-range-presets\"\n              className=\"flex w-[200px] shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2\"\n            >\n              {resolvedPresets.map((preset) => {\n                const isActive = activePresetId === preset.id\n                return (\n                  <button\n                    key={preset.id}\n                    type=\"button\"\n                    onClick={() => handlePresetClick(preset)}\n                    className={cn(\n                      'inline-flex h-8 items-center rounded-md px-3 text-left text-sm transition-colors shrink-0',\n                      'hover:bg-accent hover:text-accent-foreground',\n                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n                      isActive && 'bg-muted font-medium text-foreground',\n                    )}\n                  >\n                    {t(preset.labelKey, preset.id.replace(/_/g, ' '))}\n                  </button>\n                )\n              })}\n            </div>\n          ) : null}\n          <div className=\"p-3\">\n            <Calendar\n              mode=\"range\"\n              selected={rdpSelected}\n              onSelect={handleRangeSelect}\n              locale={locale}\n              disabled={disabledMatcher}\n              numberOfMonths={numberOfMonths}\n              initialFocus\n            />\n          </div>\n        </div>\n        {withFooter ? (\n          <div className=\"flex shrink-0 items-center justify-between gap-3 border-t bg-popover px-3 py-2\">\n            <span className=\"truncate text-xs text-muted-foreground\">\n              {selectedDate\n                ? `${t('ui.dateRangePicker.rangeLabel', 'Range')}: ${formatter(selectedDate, locale)}`\n                : t('ui.dateRangePicker.rangeEmpty', 'No range selected')}\n            </span>\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleCancel}>\n                {t('ui.dateRangePicker.cancelButton', 'Cancel')}\n              </Button>\n              <Button type=\"button\" size=\"sm\" onClick={handleApply}>\n                {t('ui.dateRangePicker.applyButton', 'Apply')}\n              </Button>\n            </div>\n          </div>\n        ) : null}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/digit-input.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+const DigitInput = React.forwardRef(
+  ({
+    value: valueProp,
+    onChange,
+    length = 6,
+    disabled = false,
+    autoFocus = false,
+    inputMode = "numeric",
+    mask = false,
+    onComplete,
+    className,
+    cellClassName,
+    "aria-label": ariaLabel,
+    "aria-invalid": ariaInvalid,
+    id,
+    name
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState("");
+    const isControlled = valueProp !== void 0;
+    const value = isControlled ? valueProp ?? "" : internalValue;
+    const cellRefs = React.useRef([]);
+    React.useImperativeHandle(
+      ref,
+      () => cellRefs.current[0] ?? null,
+      []
+    );
+    const setCellRef = React.useCallback(
+      (index) => (el) => {
+        cellRefs.current[index] = el;
+      },
+      []
+    );
+    const commitValue = React.useCallback(
+      (next) => {
+        const clamped = next.slice(0, length);
+        if (!isControlled) setInternalValue(clamped);
+        onChange?.(clamped);
+        if (clamped.length === length && onComplete) onComplete(clamped);
+      },
+      [isControlled, length, onChange, onComplete]
+    );
+    const filterChar = React.useCallback(
+      (char) => {
+        if (inputMode === "numeric" && !/^\d$/.test(char)) return null;
+        return char;
+      },
+      [inputMode]
+    );
+    const focusCell = React.useCallback(
+      (index) => {
+        const target = cellRefs.current[Math.max(0, Math.min(length - 1, index))];
+        if (target) target.focus();
+      },
+      [length]
+    );
+    const handleCellChange = React.useCallback(
+      (index, raw) => {
+        if (raw.length === 0) {
+          const next2 = value.slice(0, index) + value.slice(index + 1);
+          commitValue(next2);
+          return;
+        }
+        const lastChar = raw.slice(-1);
+        const filtered = filterChar(lastChar);
+        if (filtered === null) return;
+        const next = value.slice(0, index) + filtered + value.slice(index + 1);
+        commitValue(next);
+        if (index < length - 1) focusCell(index + 1);
+      },
+      [commitValue, filterChar, focusCell, length, value]
+    );
+    const handleKeyDown = React.useCallback(
+      (index) => (event) => {
+        if (event.key === "Backspace") {
+          if (event.currentTarget.value === "" && index > 0) {
+            event.preventDefault();
+            const next = value.slice(0, index - 1) + value.slice(index);
+            commitValue(next);
+            focusCell(index - 1);
+          }
+        } else if (event.key === "ArrowLeft" && index > 0) {
+          event.preventDefault();
+          focusCell(index - 1);
+        } else if (event.key === "ArrowRight" && index < length - 1) {
+          event.preventDefault();
+          focusCell(index + 1);
+        }
+      },
+      [commitValue, focusCell, length, value]
+    );
+    const handlePaste = React.useCallback(
+      (event) => {
+        event.preventDefault();
+        const pasted = event.clipboardData.getData("text/plain");
+        const filtered = pasted.split("").map(filterChar).filter((c) => c !== null).join("").slice(0, length);
+        if (filtered.length === 0) return;
+        commitValue(filtered);
+        const focusIndex = Math.min(filtered.length, length - 1);
+        focusCell(focusIndex);
+      },
+      [commitValue, filterChar, focusCell, length]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex items-center gap-2", className),
+        role: "group",
+        "aria-label": ariaLabel ?? "Verification code",
+        "aria-invalid": ariaInvalid || void 0,
+        "data-slot": "digit-input",
+        children: Array.from({ length }, (_, index) => {
+          const cellValue = value[index] ?? "";
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setCellRef(index),
+              id: index === 0 ? id : void 0,
+              name: index === 0 ? name : void 0,
+              type: mask ? "password" : "text",
+              inputMode: inputMode === "numeric" ? "numeric" : "text",
+              autoComplete: "one-time-code",
+              maxLength: 1,
+              autoFocus: autoFocus && index === 0,
+              value: cellValue,
+              onChange: (event) => handleCellChange(index, event.target.value),
+              onKeyDown: handleKeyDown(index),
+              onPaste: handlePaste,
+              disabled,
+              "aria-label": `${ariaLabel ?? "Verification code"} digit ${index + 1}`,
+              "aria-invalid": ariaInvalid || void 0,
+              "data-slot": "digit-input-cell",
+              "data-index": index,
+              className: cn(
+                "h-16 w-12 sm:w-14 rounded-[10px] border border-input bg-background text-center text-2xl font-medium shadow-xs transition-colors",
+                "focus:outline-none focus-visible:border-foreground focus-visible:shadow-focus",
+                "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive",
+                "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none",
+                "hover:bg-muted/40",
+                cellClassName
+              )
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+DigitInput.displayName = "DigitInput";
+export {
+  DigitInput
+};
+//# sourceMappingURL=digit-input.js.map

package/dist/primitives/digit-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/digit-input.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type DigitInputProps = {\n  value?: string\n  onChange?: (value: string) => void\n  /** Number of cells. Default `6`. */\n  length?: number\n  disabled?: boolean\n  autoFocus?: boolean\n  /** Restrict input characters. `'numeric'` filters out non-digits. */\n  inputMode?: 'numeric' | 'text'\n  /** Render each cell as a password input so characters appear as bullets. */\n  mask?: boolean\n  /** Fires when all `length` cells are filled. */\n  onComplete?: (value: string) => void\n  /** Override classes for the cell row wrapper. */\n  className?: string\n  /** Override classes applied to each cell `<input>`. */\n  cellClassName?: string\n  /** aria-label applied to the role=group wrapper. Defaults to `Verification code`. */\n  'aria-label'?: string\n  /** Indicates that the group's current value fails validation (mirrors Input's aria-invalid styling). */\n  'aria-invalid'?: boolean\n  /** Forwarded to the first cell so consumers can label the entire group with `<label htmlFor>`. */\n  id?: string\n  /** Forwarded to the first cell so form submissions carry the assembled value. */\n  name?: string\n}\n\n/**\n * `length`-cell verification code input. Pasting a string distributes\n * characters across cells and fires `onComplete` when all cells are filled.\n * Backspace on an empty cell focuses the previous cell. ArrowLeft /\n * ArrowRight move focus without committing values.\n *\n * The `value` prop is the assembled string (e.g. `'123456'`) \u2014 cells are an\n * internal layout concern, not part of the contract. Same as `Input`,\n * `mask` is purely visual (`type='password'` swap) so consumers always\n * receive the raw characters in `onChange` / `onComplete`.\n */\nexport const DigitInput = React.forwardRef<HTMLInputElement, DigitInputProps>(\n  (\n    {\n      value: valueProp,\n      onChange,\n      length = 6,\n      disabled = false,\n      autoFocus = false,\n      inputMode = 'numeric',\n      mask = false,\n      onComplete,\n      className,\n      cellClassName,\n      'aria-label': ariaLabel,\n      'aria-invalid': ariaInvalid,\n      id,\n      name,\n    },\n    ref,\n  ) => {\n    const [internalValue, setInternalValue] = React.useState('')\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp ?? '' : internalValue\n    const cellRefs = React.useRef<Array<HTMLInputElement | null>>([])\n\n    React.useImperativeHandle(\n      ref,\n      () => (cellRefs.current[0] ?? null) as HTMLInputElement,\n      [],\n    )\n\n    const setCellRef = React.useCallback(\n      (index: number) => (el: HTMLInputElement | null) => {\n        cellRefs.current[index] = el\n      },\n      [],\n    )\n\n    const commitValue = React.useCallback(\n      (next: string) => {\n        const clamped = next.slice(0, length)\n        if (!isControlled) setInternalValue(clamped)\n        onChange?.(clamped)\n        if (clamped.length === length && onComplete) onComplete(clamped)\n      },\n      [isControlled, length, onChange, onComplete],\n    )\n\n    const filterChar = React.useCallback(\n      (char: string): string | null => {\n        if (inputMode === 'numeric' && !/^\\d$/.test(char)) return null\n        return char\n      },\n      [inputMode],\n    )\n\n    const focusCell = React.useCallback(\n      (index: number) => {\n        const target = cellRefs.current[Math.max(0, Math.min(length - 1, index))]\n        if (target) target.focus()\n      },\n      [length],\n    )\n\n    const handleCellChange = React.useCallback(\n      (index: number, raw: string) => {\n        if (raw.length === 0) {\n          const next = value.slice(0, index) + value.slice(index + 1)\n          commitValue(next)\n          return\n        }\n        const lastChar = raw.slice(-1)\n        const filtered = filterChar(lastChar)\n        if (filtered === null) return\n        const next = value.slice(0, index) + filtered + value.slice(index + 1)\n        commitValue(next)\n        if (index < length - 1) focusCell(index + 1)\n      },\n      [commitValue, filterChar, focusCell, length, value],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Backspace') {\n          if (event.currentTarget.value === '' && index > 0) {\n            event.preventDefault()\n            const next = value.slice(0, index - 1) + value.slice(index)\n            commitValue(next)\n            focusCell(index - 1)\n          }\n        } else if (event.key === 'ArrowLeft' && index > 0) {\n          event.preventDefault()\n          focusCell(index - 1)\n        } else if (event.key === 'ArrowRight' && index < length - 1) {\n          event.preventDefault()\n          focusCell(index + 1)\n        }\n      },\n      [commitValue, focusCell, length, value],\n    )\n\n    const handlePaste = React.useCallback(\n      (event: React.ClipboardEvent<HTMLInputElement>) => {\n        event.preventDefault()\n        const pasted = event.clipboardData.getData('text/plain')\n        const filtered = pasted\n          .split('')\n          .map(filterChar)\n          .filter((c): c is string => c !== null)\n          .join('')\n          .slice(0, length)\n        if (filtered.length === 0) return\n        commitValue(filtered)\n        const focusIndex = Math.min(filtered.length, length - 1)\n        focusCell(focusIndex)\n      },\n      [commitValue, filterChar, focusCell, length],\n    )\n\n    return (\n      <div\n        className={cn('flex items-center gap-2', className)}\n        role=\"group\"\n        aria-label={ariaLabel ?? 'Verification code'}\n        aria-invalid={ariaInvalid || undefined}\n        data-slot=\"digit-input\"\n      >\n        {Array.from({ length }, (_, index) => {\n          const cellValue = value[index] ?? ''\n          return (\n            <input\n              key={index}\n              ref={setCellRef(index)}\n              id={index === 0 ? id : undefined}\n              name={index === 0 ? name : undefined}\n              type={mask ? 'password' : 'text'}\n              inputMode={inputMode === 'numeric' ? 'numeric' : 'text'}\n              autoComplete=\"one-time-code\"\n              maxLength={1}\n              autoFocus={autoFocus && index === 0}\n              value={cellValue}\n              onChange={(event) => handleCellChange(index, event.target.value)}\n              onKeyDown={handleKeyDown(index)}\n              onPaste={handlePaste}\n              disabled={disabled}\n              aria-label={`${ariaLabel ?? 'Verification code'} digit ${index + 1}`}\n              aria-invalid={ariaInvalid || undefined}\n              data-slot=\"digit-input-cell\"\n              data-index={index}\n              className={cn(\n                'h-16 w-12 sm:w-14 rounded-[10px] border border-input bg-background text-center text-2xl font-medium shadow-xs transition-colors',\n                'focus:outline-none focus-visible:border-foreground focus-visible:shadow-focus',\n                'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive',\n                'disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none',\n                'hover:bg-muted/40',\n                cellClassName,\n              )}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nDigitInput.displayName = 'DigitInput'\n"],
+  "mappings": "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",
+  "names": ["next"]
+}

package/dist/primitives/empty-state.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Plus } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Button } from "./button.js";
+const emptyStateVariants = cva(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      size: {
+        sm: "gap-2 px-4 py-6",
+        default: "gap-3 px-6 py-10",
+        lg: "gap-4 px-8 py-16"
+      },
+      variant: {
+        default: "rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30",
+        subtle: "rounded-lg"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const titleVariants = cva("font-medium text-foreground", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+function EmptyState({
+  size = "default",
+  variant = "default",
+  title,
+  description,
+  actions,
+  illustration,
+  icon,
+  className,
+  children,
+  action,
+  actionLabel,
+  onAction,
+  actionLabelClassName
+}) {
+  const legacyAction = action ?? (actionLabel ? { label: actionLabel, onClick: onAction } : void 0);
+  const renderLegacyButton = !actions && legacyAction;
+  const iconBoxSize = size === "sm" ? "size-10" : size === "lg" ? "size-16" : "size-12";
+  return /* @__PURE__ */ jsxs("div", { className: cn(emptyStateVariants({ size, variant }), className), "data-slot": "empty-state", children: [
+    illustration ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", "aria-hidden": "true", children: illustration }) : icon ? variant === "subtle" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full bg-muted text-muted-foreground",
+          iconBoxSize
+        ),
+        "aria-hidden": "true",
+        children: icon
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: cn(titleVariants({ size })), children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    children,
+    actions ?? (renderLegacyButton ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: legacyAction.onClick,
+        className: cn("inline-flex items-center gap-2 text-foreground", actionLabelClassName),
+        disabled: legacyAction.disabled,
+        children: [
+          legacyAction.icon ?? /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: legacyAction.label })
+        ]
+      }
+    ) : null)
+  ] });
+}
+export {
+  EmptyState,
+  emptyStateVariants
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/primitives/empty-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/empty-state.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Plus } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from './button'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center justify-center text-center',\n  {\n    variants: {\n      size: {\n        sm: 'gap-2 px-4 py-6',\n        default: 'gap-3 px-6 py-10',\n        lg: 'gap-4 px-8 py-16',\n      },\n      variant: {\n        default: 'rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30',\n        subtle: 'rounded-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      variant: 'default',\n    },\n  },\n)\n\nconst titleVariants = cva('font-medium text-foreground', {\n  variants: {\n    size: {\n      sm: 'text-sm',\n      default: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: { size: 'default' },\n})\n\ntype LegacyAction = {\n  label: string\n  onClick?: () => void\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\nexport type EmptyStateProps = VariantProps<typeof emptyStateVariants> & {\n  title: string\n  description?: string\n  /** Custom action node \u2014 preferred for new code (e.g. `<Button>` or button group). */\n  actions?: React.ReactNode\n  /**\n   * Optional Figma-style illustration (preferred for new code) \u2014 typically a\n   * scaled SVG sourced from the DS Open Mercato illustrations library. When\n   * provided, takes precedence over `icon`. Rendered without any icon-box\n   * wrapping so the illustration's own circular background shows through.\n   */\n  illustration?: React.ReactNode\n  /** Optional leading icon. With `variant=\"subtle\"` it is wrapped in a round muted box; with default variant it sits inline tinted as muted-foreground. Ignored when `illustration` is provided. */\n  icon?: React.ReactNode\n  className?: string\n  children?: React.ReactNode\n  /** @deprecated Use `actions` with a `<Button>` instead. Legacy object kept for backwards compat with the old backend EmptyState. */\n  action?: LegacyAction\n  /** @deprecated Use `actions` with a `<Button>`. */\n  actionLabel?: string\n  /** @deprecated Use `actions` with a `<Button>`. */\n  onAction?: () => void\n  /** @deprecated Kept for legacy backend EmptyState consumers. Forwarded to the auto-generated action button. */\n  actionLabelClassName?: string\n}\n\nexport function EmptyState({\n  size = 'default',\n  variant = 'default',\n  title,\n  description,\n  actions,\n  illustration,\n  icon,\n  className,\n  children,\n  action,\n  actionLabel,\n  onAction,\n  actionLabelClassName,\n}: EmptyStateProps) {\n  const legacyAction = action ?? (actionLabel ? { label: actionLabel, onClick: onAction } : undefined)\n  const renderLegacyButton = !actions && legacyAction\n  const iconBoxSize = size === 'sm' ? 'size-10' : size === 'lg' ? 'size-16' : 'size-12'\n\n  return (\n    <div className={cn(emptyStateVariants({ size, variant }), className)} data-slot=\"empty-state\">\n      {illustration ? (\n        <div className=\"flex items-center justify-center\" aria-hidden=\"true\">\n          {illustration}\n        </div>\n      ) : icon ? (\n        variant === 'subtle' ? (\n          <div\n            className={cn(\n              'flex items-center justify-center rounded-full bg-muted text-muted-foreground',\n              iconBoxSize,\n            )}\n            aria-hidden=\"true\"\n          >\n            {icon}\n          </div>\n        ) : (\n          <div className=\"text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </div>\n        )\n      ) : null}\n      <div className=\"space-y-1\">\n        <p className={cn(titleVariants({ size }))}>{title}</p>\n        {description ? (\n          <p className=\"mx-auto max-w-sm text-sm text-muted-foreground\">{description}</p>\n        ) : null}\n      </div>\n      {children}\n      {actions ?? (renderLegacyButton ? (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={legacyAction!.onClick}\n          className={cn('inline-flex items-center gap-2 text-foreground', actionLabelClassName)}\n          disabled={legacyAction!.disabled}\n        >\n          {legacyAction!.icon ?? <Plus className=\"h-4 w-4\" aria-hidden=\"true\" />}\n          <span>{legacyAction!.label}</span>\n        </Button>\n      ) : null)}\n    </div>\n  )\n}\n\nexport { emptyStateVariants }\n"],
+  "mappings": ";AA+FQ,cAoBF,YApBE;AA5FR,SAAS,WAA8B;AACvC,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,cAAc;AAEvB,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB,IAAI,+BAA+B;AAAA,EACvD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAmCM,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,eAAe,WAAW,cAAc,EAAE,OAAO,aAAa,SAAS,SAAS,IAAI;AAC1F,QAAM,qBAAqB,CAAC,WAAW;AACvC,QAAM,cAAc,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY;AAE5E,SACE,qBAAC,SAAI,WAAW,GAAG,mBAAmB,EAAE,MAAM,QAAQ,CAAC,GAAG,SAAS,GAAG,aAAU,eAC7E;AAAA,mBACC,oBAAC,SAAI,WAAU,oCAAmC,eAAY,QAC3D,wBACH,IACE,OACF,YAAY,WACV;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,eAAY;AAAA,QAEX;AAAA;AAAA,IACH,IAEA,oBAAC,SAAI,WAAU,yBAAwB,eAAY,QAChD,gBACH,IAEA;AAAA,IACJ,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,OAAE,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,CAAC,GAAI,iBAAM;AAAA,MACjD,cACC,oBAAC,OAAE,WAAU,kDAAkD,uBAAY,IACzE;AAAA,OACN;AAAA,IACC;AAAA,IACA,YAAY,qBACX;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,aAAc;AAAA,QACvB,WAAW,GAAG,kDAAkD,oBAAoB;AAAA,QACpF,UAAU,aAAc;AAAA,QAEvB;AAAA,uBAAc,QAAQ,oBAAC,QAAK,WAAU,WAAU,eAAY,QAAO;AAAA,UACpE,oBAAC,UAAM,uBAAc,OAAM;AAAA;AAAA;AAAA,IAC7B,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/primitives/inline-input.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Input } from "./input.js";
+const InlineInput = React.forwardRef(
+  ({ className, inputClassName, size = "sm", showBorderOnHover = true, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        size,
+        className: cn(
+          "border-transparent bg-transparent shadow-none",
+          showBorderOnHover ? "hover:border-input hover:bg-muted/40" : "hover:bg-transparent",
+          className
+        ),
+        inputClassName,
+        "data-slot": "inline-input",
+        ...rest
+      }
+    );
+  }
+);
+InlineInput.displayName = "InlineInput";
+export {
+  InlineInput
+};
+//# sourceMappingURL=inline-input.js.map