@open-mercato/ui 0.6.7-develop.6788.1.c2a1520a30 → 0.6.7-develop.6814.1.0627c7e9f1

package/dist/backend/schedule/ScheduleToolbar.js

@@ -1,8 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Button } from "../../primitives/button.js";
-import { Input } from "../../primitives/input.js";
+import { DateRangePicker } from "../../primitives/date-range-picker.js";
+import { IconButton } from "../../primitives/icon-button.js";
+import {
+  SegmentedControl,
+  SegmentedControlItem
+} from "../../primitives/segmented-control.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../primitives/select.js";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { addDays } from "date-fns/addDays";
@@ -24,16 +35,19 @@ const VIEW_OPTIONS = [
   { id: "month", labelKey: "schedule.view.month", fallback: "Month" },
   { id: "agenda", labelKey: "schedule.view.agenda", fallback: "Agenda" }
 ];
-function formatDateInputValue(value) {
-  const year = value.getFullYear();
-  const month = String(value.getMonth() + 1).padStart(2, "0");
-  const day = String(value.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-function parseDateInputValue(value, fallback) {
-  if (!value) return fallback;
-  const next = /* @__PURE__ */ new Date(`${value}T00:00:00`);
-  return Number.isNaN(next.getTime()) ? fallback : next;
+function getTimezoneOptions(current) {
+  const options = /* @__PURE__ */ new Set();
+  if (current) options.add(current);
+  options.add("UTC");
+  const resolved = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  if (resolved) options.add(resolved);
+  const intlWithSupportedValues = Intl;
+  if (typeof intlWithSupportedValues.supportedValuesOf === "function") {
+    intlWithSupportedValues.supportedValuesOf("timeZone").forEach((timezone) => {
+      if (timezone) options.add(timezone);
+    });
+  }
+  return Array.from(options).sort((a, b) => a.localeCompare(b));
 }
 function ScheduleToolbar({
   view,
@@ -103,70 +117,73 @@ function ScheduleToolbar({
     const nextStart = startOfDay(addDays(range.start, multiplier * rangeLength));
     onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) });
   }, [onRangeChange, range.start, rangeLength, view]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: VIEW_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-      Button,
+  const timezoneOptions = React.useMemo(() => getTimezoneOptions(timezone), [timezone]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border bg-card p-3", className), children: [
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
       {
-        variant: view === option.id ? "default" : "outline",
-        size: "sm",
-        onClick: () => {
-          if (option.id === view) return;
-          onViewChange(option.id);
-          onRangeChange(deriveRangeForView(/* @__PURE__ */ new Date(), option.id));
+        value: view,
+        onValueChange: (value) => {
+          const nextView = value;
+          if (nextView === view) return;
+          onViewChange(nextView);
+          onRangeChange(deriveRangeForView(/* @__PURE__ */ new Date(), nextView));
         },
-        children: t(option.labelKey, option.fallback)
-      },
-      option.id
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => shiftRange("prev"), "aria-label": t("schedule.range.prev", "Previous"), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }) }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: rangeLabel }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => shiftRange("next"), "aria-label": t("schedule.range.next", "Next"), children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true }) })
+        "aria-label": t("schedule.view.label", "Schedule view"),
+        className: "shrink-0",
+        children: VIEW_OPTIONS.map((option) => /* @__PURE__ */ jsx(SegmentedControlItem, { value: option.id, children: t(option.labelKey, option.fallback) }, option.id))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => shiftRange("prev"),
+          "aria-label": t("schedule.range.prev", "Previous"),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 whitespace-nowrap px-1 text-sm font-medium text-foreground", children: rangeLabel }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => shiftRange("next"),
+          "aria-label": t("schedule.range.next", "Next"),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { children: t("schedule.range.start", "Start") }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "date",
-            value: formatDateInputValue(range.start),
-            onChange: (event) => {
-              const nextStart = parseDateInputValue(event.target.value, range.start);
-              onRangeChange({ start: nextStart, end: range.end });
-            },
-            className: "h-8 w-full sm:w-[140px]"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { children: t("schedule.range.end", "End") }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "date",
-            value: formatDateInputValue(range.end),
-            onChange: (event) => {
-              const nextEnd = parseDateInputValue(event.target.value, range.end);
-              onRangeChange({ start: range.start, end: nextEnd });
-            },
-            className: "h-8 w-full sm:w-[140px]"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { children: t("schedule.range.timezone", "Timezone") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 md:ml-auto", children: [
+      /* @__PURE__ */ jsx(
+        DateRangePicker,
+        {
+          value: range,
+          onChange: (next) => {
+            if (!next) return;
+            onRangeChange({ start: startOfDay(next.start), end: endOfDay(next.end) });
+          },
+          size: "sm",
+          showPresets: false,
+          numberOfMonths: 2,
+          "aria-label": t("schedule.range.label", "Date range")
+        }
+      ),
+      onTimezoneChange ? /* @__PURE__ */ jsxs(Select, { value: timezone ?? void 0, onValueChange: onTimezoneChange, children: [
         /* @__PURE__ */ jsx(
-          Input,
+          SelectTrigger,
           {
-            type: "text",
-            value: timezone ?? "",
-            onChange: (event) => onTimezoneChange?.(event.target.value),
-            className: "h-8 w-full sm:w-[180px]",
-            placeholder: t("schedule.range.timezone.placeholder", "UTC")
+            size: "sm",
+            className: "w-auto min-w-[10rem]",
+            "aria-label": t("schedule.range.timezone", "Timezone"),
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("schedule.range.timezone.placeholder", "UTC") })
           }
-        )
-      ] })
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: timezoneOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, option)) })
+      ] }) : null
     ] })
   ] });
 }

package/dist/backend/schedule/ScheduleToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/schedule/ScheduleToolbar.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Button } from '../../primitives/button'\nimport { Input } from '../../primitives/input'\nimport type { ScheduleRange, ScheduleViewMode } from './types'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { addDays } from 'date-fns/addDays'\nimport { addMonths } from 'date-fns/addMonths'\nimport { addWeeks } from 'date-fns/addWeeks'\nimport { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'\nimport { endOfDay } from 'date-fns/endOfDay'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { endOfWeek } from 'date-fns/endOfWeek'\nimport { format } from 'date-fns/format'\nimport { startOfDay } from 'date-fns/startOfDay'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfWeek } from 'date-fns/startOfWeek'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\n\nconst VIEW_OPTIONS: Array<{ id: ScheduleViewMode; labelKey: string; fallback: string }> = [\n  { id: 'day', labelKey: 'schedule.view.day', fallback: 'Day' },\n  { id: 'week', labelKey: 'schedule.view.week', fallback: 'Week' },\n  { id: 'month', labelKey: 'schedule.view.month', fallback: 'Month' },\n  { id: 'agenda', labelKey: 'schedule.view.agenda', fallback: 'Agenda' },\n]\n\nfunction formatDateInputValue(value: Date): string {\n  const year = value.getFullYear()\n  const month = String(value.getMonth() + 1).padStart(2, '0')\n  const day = String(value.getDate()).padStart(2, '0')\n  return `${year}-${month}-${day}`\n}\n\nfunction parseDateInputValue(value: string, fallback: Date): Date {\n  if (!value) return fallback\n  const next = new Date(`${value}T00:00:00`)\n  return Number.isNaN(next.getTime()) ? fallback : next\n}\n\nexport type ScheduleToolbarProps = {\n  view: ScheduleViewMode\n  range: ScheduleRange\n  timezone?: string\n  onViewChange: (view: ScheduleViewMode) => void\n  onRangeChange: (range: ScheduleRange) => void\n  onTimezoneChange?: (timezone: string) => void\n  className?: string\n}\n\nexport function ScheduleToolbar({\n  view,\n  range,\n  timezone,\n  onViewChange,\n  onRangeChange,\n  onTimezoneChange,\n  className,\n}: ScheduleToolbarProps) {\n  const t = useT()\n  const rangeLength = React.useMemo(\n    () => Math.max(1, differenceInCalendarDays(range.end, range.start) + 1),\n    [range.end, range.start],\n  )\n  const deriveRangeForView = React.useCallback((base: Date, nextView: ScheduleViewMode): ScheduleRange => {\n    if (nextView === 'day') {\n      const start = startOfDay(base)\n      return { start, end: endOfDay(start) }\n    }\n    if (nextView === 'week') {\n      return { start: startOfWeek(base, { locale: enUS }), end: endOfWeek(base, { locale: enUS }) }\n    }\n    if (nextView === 'month') {\n      return { start: startOfMonth(base), end: endOfMonth(base) }\n    }\n    const start = startOfDay(base)\n    return { start, end: endOfDay(addDays(start, rangeLength - 1)) }\n  }, [rangeLength])\n  const rangeLabel = React.useMemo(() => {\n    if (view === 'day') {\n      return format(range.start, 'EEE, MMM d')\n    }\n    if (view === 'week') {\n      const startLabel = format(range.start, 'MMM d')\n      const endLabel = format(range.end, 'MMM d')\n      const yearLabel = format(range.start, 'yyyy')\n      return `${startLabel} - ${endLabel}, ${yearLabel}`\n    }\n    if (view === 'month') {\n      return format(range.start, 'MMMM yyyy')\n    }\n    const startLabel = format(range.start, 'MMM d')\n    const endLabel = format(range.end, 'MMM d, yyyy')\n    return `${startLabel} - ${endLabel}`\n  }, [range.end, range.start, view])\n\n  const shiftRange = React.useCallback((direction: 'prev' | 'next') => {\n    const multiplier = direction === 'prev' ? -1 : 1\n    if (view === 'day') {\n      const nextStart = startOfDay(addDays(range.start, multiplier))\n      onRangeChange({ start: nextStart, end: endOfDay(nextStart) })\n      return\n    }\n    if (view === 'week') {\n      const base = addWeeks(range.start, multiplier)\n      onRangeChange({\n        start: startOfWeek(base, { locale: enUS }),\n        end: endOfWeek(base, { locale: enUS }),\n      })\n      return\n    }\n    if (view === 'month') {\n      const base = addMonths(range.start, multiplier)\n      onRangeChange({ start: startOfMonth(base), end: endOfMonth(base) })\n      return\n    }\n    const nextStart = startOfDay(addDays(range.start, multiplier * rangeLength))\n    onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) })\n  }, [onRangeChange, range.start, rangeLength, view])\n\n  return (\n    <div className={cn('flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between', className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {VIEW_OPTIONS.map((option) => (\n          <Button\n            key={option.id}\n            variant={view === option.id ? 'default' : 'outline'}\n            size=\"sm\"\n            onClick={() => {\n              if (option.id === view) return\n              onViewChange(option.id)\n              onRangeChange(deriveRangeForView(new Date(), option.id))\n            }}\n          >\n            {t(option.labelKey, option.fallback)}\n          </Button>\n        ))}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => shiftRange('prev')} aria-label={t('schedule.range.prev', 'Previous')}>\n          <ChevronLeft className=\"size-4\" aria-hidden />\n        </Button>\n        <div className=\"text-sm font-medium text-foreground\">{rangeLabel}</div>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => shiftRange('next')} aria-label={t('schedule.range.next', 'Next')}>\n          <ChevronRight className=\"size-4\" aria-hidden />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <label className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n          <span>{t('schedule.range.start', 'Start')}</span>\n          <Input\n            type=\"date\"\n            value={formatDateInputValue(range.start)}\n            onChange={(event) => {\n              const nextStart = parseDateInputValue(event.target.value, range.start)\n              onRangeChange({ start: nextStart, end: range.end })\n            }}\n            className=\"h-8 w-full sm:w-[140px]\"\n          />\n        </label>\n        <label className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n          <span>{t('schedule.range.end', 'End')}</span>\n          <Input\n            type=\"date\"\n            value={formatDateInputValue(range.end)}\n            onChange={(event) => {\n              const nextEnd = parseDateInputValue(event.target.value, range.end)\n              onRangeChange({ start: range.start, end: nextEnd })\n            }}\n            className=\"h-8 w-full sm:w-[140px]\"\n          />\n        </label>\n        <label className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n          <span>{t('schedule.range.timezone', 'Timezone')}</span>\n          <Input\n            type=\"text\"\n            value={timezone ?? ''}\n            onChange={(event) => onTimezoneChange?.(event.target.value)}\n            className=\"h-8 w-full sm:w-[180px]\"\n            placeholder={t('schedule.range.timezone.placeholder', 'UTC')}\n          />\n        </label>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { DateRangePicker } from '../../primitives/date-range-picker'\nimport { IconButton } from '../../primitives/icon-button'\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from '../../primitives/segmented-control'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../primitives/select'\nimport type { ScheduleRange, ScheduleViewMode } from './types'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { addDays } from 'date-fns/addDays'\nimport { addMonths } from 'date-fns/addMonths'\nimport { addWeeks } from 'date-fns/addWeeks'\nimport { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'\nimport { endOfDay } from 'date-fns/endOfDay'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { endOfWeek } from 'date-fns/endOfWeek'\nimport { format } from 'date-fns/format'\nimport { startOfDay } from 'date-fns/startOfDay'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfWeek } from 'date-fns/startOfWeek'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\n\nconst VIEW_OPTIONS: Array<{ id: ScheduleViewMode; labelKey: string; fallback: string }> = [\n  { id: 'day', labelKey: 'schedule.view.day', fallback: 'Day' },\n  { id: 'week', labelKey: 'schedule.view.week', fallback: 'Week' },\n  { id: 'month', labelKey: 'schedule.view.month', fallback: 'Month' },\n  { id: 'agenda', labelKey: 'schedule.view.agenda', fallback: 'Agenda' },\n]\n\nfunction getTimezoneOptions(current?: string): string[] {\n  const options = new Set<string>()\n  if (current) options.add(current)\n  options.add('UTC')\n  const resolved = Intl.DateTimeFormat().resolvedOptions().timeZone\n  if (resolved) options.add(resolved)\n  const intlWithSupportedValues = Intl as typeof Intl & { supportedValuesOf?: (input: 'timeZone') => string[] }\n  if (typeof intlWithSupportedValues.supportedValuesOf === 'function') {\n    intlWithSupportedValues.supportedValuesOf('timeZone').forEach((timezone) => {\n      if (timezone) options.add(timezone)\n    })\n  }\n  return Array.from(options).sort((a, b) => a.localeCompare(b))\n}\n\nexport type ScheduleToolbarProps = {\n  view: ScheduleViewMode\n  range: ScheduleRange\n  timezone?: string\n  onViewChange: (view: ScheduleViewMode) => void\n  onRangeChange: (range: ScheduleRange) => void\n  onTimezoneChange?: (timezone: string) => void\n  className?: string\n}\n\nexport function ScheduleToolbar({\n  view,\n  range,\n  timezone,\n  onViewChange,\n  onRangeChange,\n  onTimezoneChange,\n  className,\n}: ScheduleToolbarProps) {\n  const t = useT()\n  const rangeLength = React.useMemo(\n    () => Math.max(1, differenceInCalendarDays(range.end, range.start) + 1),\n    [range.end, range.start],\n  )\n  const deriveRangeForView = React.useCallback((base: Date, nextView: ScheduleViewMode): ScheduleRange => {\n    if (nextView === 'day') {\n      const start = startOfDay(base)\n      return { start, end: endOfDay(start) }\n    }\n    if (nextView === 'week') {\n      return { start: startOfWeek(base, { locale: enUS }), end: endOfWeek(base, { locale: enUS }) }\n    }\n    if (nextView === 'month') {\n      return { start: startOfMonth(base), end: endOfMonth(base) }\n    }\n    const start = startOfDay(base)\n    return { start, end: endOfDay(addDays(start, rangeLength - 1)) }\n  }, [rangeLength])\n  const rangeLabel = React.useMemo(() => {\n    if (view === 'day') {\n      return format(range.start, 'EEE, MMM d')\n    }\n    if (view === 'week') {\n      const startLabel = format(range.start, 'MMM d')\n      const endLabel = format(range.end, 'MMM d')\n      const yearLabel = format(range.start, 'yyyy')\n      return `${startLabel} - ${endLabel}, ${yearLabel}`\n    }\n    if (view === 'month') {\n      return format(range.start, 'MMMM yyyy')\n    }\n    const startLabel = format(range.start, 'MMM d')\n    const endLabel = format(range.end, 'MMM d, yyyy')\n    return `${startLabel} - ${endLabel}`\n  }, [range.end, range.start, view])\n\n  const shiftRange = React.useCallback((direction: 'prev' | 'next') => {\n    const multiplier = direction === 'prev' ? -1 : 1\n    if (view === 'day') {\n      const nextStart = startOfDay(addDays(range.start, multiplier))\n      onRangeChange({ start: nextStart, end: endOfDay(nextStart) })\n      return\n    }\n    if (view === 'week') {\n      const base = addWeeks(range.start, multiplier)\n      onRangeChange({\n        start: startOfWeek(base, { locale: enUS }),\n        end: endOfWeek(base, { locale: enUS }),\n      })\n      return\n    }\n    if (view === 'month') {\n      const base = addMonths(range.start, multiplier)\n      onRangeChange({ start: startOfMonth(base), end: endOfMonth(base) })\n      return\n    }\n    const nextStart = startOfDay(addDays(range.start, multiplier * rangeLength))\n    onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) })\n  }, [onRangeChange, range.start, rangeLength, view])\n\n  const timezoneOptions = React.useMemo(() => getTimezoneOptions(timezone), [timezone])\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border bg-card p-3', className)}>\n      <SegmentedControl\n        value={view}\n        onValueChange={(value) => {\n          const nextView = value as ScheduleViewMode\n          if (nextView === view) return\n          onViewChange(nextView)\n          onRangeChange(deriveRangeForView(new Date(), nextView))\n        }}\n        aria-label={t('schedule.view.label', 'Schedule view')}\n        className=\"shrink-0\"\n      >\n        {VIEW_OPTIONS.map((option) => (\n          <SegmentedControlItem key={option.id} value={option.id}>\n            {t(option.labelKey, option.fallback)}\n          </SegmentedControlItem>\n        ))}\n      </SegmentedControl>\n      <div className=\"flex shrink-0 items-center gap-1\">\n        <IconButton\n          type=\"button\"\n          variant=\"outline\"\n          onClick={() => shiftRange('prev')}\n          aria-label={t('schedule.range.prev', 'Previous')}\n        >\n          <ChevronLeft className=\"size-4\" aria-hidden />\n        </IconButton>\n        <div className=\"min-w-0 whitespace-nowrap px-1 text-sm font-medium text-foreground\">{rangeLabel}</div>\n        <IconButton\n          type=\"button\"\n          variant=\"outline\"\n          onClick={() => shiftRange('next')}\n          aria-label={t('schedule.range.next', 'Next')}\n        >\n          <ChevronRight className=\"size-4\" aria-hidden />\n        </IconButton>\n      </div>\n      <div className=\"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 md:ml-auto\">\n        <DateRangePicker\n          value={range}\n          onChange={(next) => {\n            if (!next) return\n            onRangeChange({ start: startOfDay(next.start), end: endOfDay(next.end) })\n          }}\n          size=\"sm\"\n          showPresets={false}\n          numberOfMonths={2}\n          aria-label={t('schedule.range.label', 'Date range')}\n        />\n        {onTimezoneChange ? (\n          <Select value={timezone ?? undefined} onValueChange={onTimezoneChange}>\n            <SelectTrigger\n              size=\"sm\"\n              className=\"w-auto min-w-[10rem]\"\n              aria-label={t('schedule.range.timezone', 'Timezone')}\n            >\n              <SelectValue placeholder={t('schedule.range.timezone.placeholder', 'UTC')} />\n            </SelectTrigger>\n            <SelectContent>\n              {timezoneOptions.map((option) => (\n                <SelectItem key={option} value={option}>\n                  {option}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["start", "startLabel", "endLabel", "nextStart"]
 }

package/figma/alert.figma.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Alert, AlertDescription, AlertTitle } from '../src/primitives/alert'
+
+figma.connect(Alert, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=169-2358', {
+  imports: ["import { Alert, AlertTitle, AlertDescription } from '@open-mercato/ui/primitives/alert'"],
+  props: {
+    status: figma.enum('Status', {
+      Error: 'error',
+      Warning: 'warning',
+      Success: 'success',
+      Information: 'information',
+      Feature: 'feature',
+    }),
+    style: figma.enum('Style', {
+      Filled: 'filled',
+      Light: 'light',
+      Lighter: 'lighter',
+      Stroke: 'stroke',
+    }),
+    size: figma.enum('Size', {
+      XS: 'xs',
+      Small: 'sm',
+      Default: 'default',
+    }),
+    title: figma.string('Title'),
+    description: figma.string('Description'),
+  },
+  example: ({ status, style, size, title, description }) => (
+    <Alert status={status} style={style} size={size}>
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  ),
+})

package/figma/badge.figma.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Badge } from '../src/primitives/badge'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Badge, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Badge } from '@open-mercato/ui/primitives/badge'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Default: 'default',
+      Secondary: 'secondary',
+      Outline: 'outline',
+      Muted: 'muted',
+      Success: 'success',
+      Warning: 'warning',
+      Info: 'info',
+      Neutral: 'neutral',
+      Error: 'error',
+      Brand: 'brand',
+    }),
+    size: figma.enum('Size', {
+      Small: 'sm',
+      Default: 'default',
+      Large: 'lg',
+    }),
+    label: figma.string('Label'),
+  },
+  example: ({ variant, size, label }) => (
+    <Badge variant={variant} size={size}>
+      {label}
+    </Badge>
+  ),
+})

package/figma/button.figma.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Button } from '../src/primitives/button'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Button, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Button } from '@open-mercato/ui/primitives/button'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Primary: 'default',
+      Destructive: 'destructive',
+      Outline: 'outline',
+      Secondary: 'secondary',
+      Ghost: 'ghost',
+      Muted: 'muted',
+      Link: 'link',
+    }),
+    size: figma.enum('Size', {
+      Default: 'default',
+      Small: 'sm',
+      Large: 'lg',
+      '2XS': '2xs',
+      Icon: 'icon',
+    }),
+    disabled: figma.boolean('Disabled'),
+    label: figma.string('Label'),
+  },
+  example: ({ variant, size, disabled, label }) => (
+    <Button variant={variant} size={size} disabled={disabled}>
+      {label}
+    </Button>
+  ),
+})

package/figma/checkbox.figma.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Checkbox } from '../src/primitives/checkbox'
+import { CheckboxField } from '../src/primitives/checkbox-field'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Checkbox, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Checkbox } from '@open-mercato/ui/primitives/checkbox'"],
+  variant: { Label: 'False' },
+  props: {
+    checked: figma.boolean('Checked'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ checked, disabled }) => <Checkbox checked={checked} disabled={disabled} />,
+})
+
+figma.connect(CheckboxField, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'"],
+  variant: { Label: 'True' },
+  props: {
+    checked: figma.boolean('Checked'),
+    disabled: figma.boolean('Disabled'),
+    label: figma.string('Label text'),
+  },
+  example: ({ checked, disabled, label }) => (
+    <CheckboxField checked={checked} disabled={disabled} label={label} />
+  ),
+})

package/figma/drawer.figma.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '../src/primitives/drawer'
+import { Button } from '../src/primitives/button'
+
+figma.connect(Drawer, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=486-7366', {
+  imports: [
+    "import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from '@open-mercato/ui/primitives/drawer'",
+  ],
+  props: {
+    title: figma.string('Title'),
+    description: figma.string('Description'),
+  },
+  example: ({ title, description }) => (
+    <Drawer>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          <DrawerDescription>{description}</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>Content</DrawerBody>
+        <DrawerFooter layout="equal">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button>Save</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+})

package/figma/input-variants.figma.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Input } from '../src/primitives/input'
+import { EmailInput } from '../src/primitives/email-input'
+import { SearchInput } from '../src/primitives/search-input'
+import { PasswordInput } from '../src/primitives/password-input'
+import { WebsiteInput } from '../src/primitives/website-input'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Input, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Input } from '@open-mercato/ui/primitives/input'"],
+  variant: { Type: 'Text' },
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => <Input placeholder={placeholder} disabled={disabled} />,
+})
+
+figma.connect(EmailInput, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { EmailInput } from '@open-mercato/ui/primitives/email-input'"],
+  variant: { Type: 'Email' },
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => <EmailInput placeholder={placeholder} disabled={disabled} />,
+})
+
+figma.connect(SearchInput, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { SearchInput } from '@open-mercato/ui/primitives/search-input'"],
+  variant: { Type: 'Search' },
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => <SearchInput placeholder={placeholder} disabled={disabled} />,
+})
+
+figma.connect(PasswordInput, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { PasswordInput } from '@open-mercato/ui/primitives/password-input'"],
+  variant: { Type: 'Password' },
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => <PasswordInput placeholder={placeholder} disabled={disabled} />,
+})
+
+figma.connect(WebsiteInput, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { WebsiteInput } from '@open-mercato/ui/primitives/website-input'"],
+  variant: { Type: 'Website' },
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => <WebsiteInput placeholder={placeholder} disabled={disabled} />,
+})

package/figma/radio.figma.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Radio, RadioGroup } from '../src/primitives/radio'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Radio, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'"],
+  props: {
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ disabled }) => (
+    <RadioGroup defaultValue="first">
+      <Radio value="first" disabled={disabled} />
+    </RadioGroup>
+  ),
+})

package/figma/select.figma.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../src/primitives/select'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Select, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: [
+    "import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@open-mercato/ui/primitives/select'",
+  ],
+  props: {
+    placeholder: figma.string('Placeholder'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ placeholder, disabled }) => (
+    <Select>
+      <SelectTrigger disabled={disabled}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="first">First option</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+})

package/figma/status-badge.figma.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { StatusBadge } from '../src/primitives/status-badge'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(StatusBadge, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Success: 'success',
+      Warning: 'warning',
+      Error: 'error',
+      Info: 'info',
+      Neutral: 'neutral',
+    }),
+    dot: figma.boolean('Dot'),
+    label: figma.string('Label'),
+  },
+  example: ({ variant, dot, label }) => (
+    <StatusBadge variant={variant} dot={dot}>
+      {label}
+    </StatusBadge>
+  ),
+})

package/figma/switch.figma.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Switch } from '../src/primitives/switch'
+import { SwitchField } from '../src/primitives/switch-field'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Switch, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Switch } from '@open-mercato/ui/primitives/switch'"],
+  variant: { Label: 'False' },
+  props: {
+    checked: figma.boolean('Checked'),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ checked, disabled }) => <Switch checked={checked} disabled={disabled} />,
+})
+
+figma.connect(SwitchField, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { SwitchField } from '@open-mercato/ui/primitives/switch-field'"],
+  variant: { Label: 'True' },
+  props: {
+    checked: figma.boolean('Checked'),
+    disabled: figma.boolean('Disabled'),
+    label: figma.string('Label text'),
+  },
+  example: ({ checked, disabled, label }) => (
+    <SwitchField checked={checked} disabled={disabled} label={label} />
+  ),
+})

package/figma/tabs.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../src/primitives/tabs'
+
+// TODO(figma): resolve the real node id in the DS file before ds:code-connect:publish.
+figma.connect(Tabs, 'https://www.figma.com/design/qCq9z6q1if0mpoRstV5OEA/Design-System?node-id=0-1', {
+  imports: ["import { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'"],
+  props: {
+    label: figma.string('Label'),
+    count: figma.string('Count'),
+  },
+  example: ({ label, count }) => (
+    <Tabs defaultValue="first" variant="underline">
+      <TabsList aria-label="Sections">
+        <TabsTrigger value="first" count={count}>
+          {label}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="first">Content</TabsContent>
+    </Tabs>
+  ),
+})