@devalok/shilp-sutra 0.37.1 → 0.39.0

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":[],"sources":["../../src/composed/date-picker/month-picker.tsx","../../src/composed/date-picker/year-picker.tsx","../../src/composed/date-picker/date-picker.tsx","../../src/composed/date-picker/presets.tsx","../../src/composed/date-picker/date-range-picker.tsx","../../src/composed/date-picker/date-time-picker.tsx","../../src/composed/date-picker/time-picker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nconst MONTHS = [\n  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',\n]\n\nexport interface MonthPickerProps extends React.ComponentPropsWithoutRef<'div'> {\n  currentYear: number\n  selectedMonth?: number // 0-11\n  onMonthSelect: (month: number) => void\n  minDate?: Date\n  maxDate?: Date\n}\n\nexport const MonthPicker = React.forwardRef<HTMLDivElement, MonthPickerProps>(\n  function MonthPicker({\n  currentYear,\n  selectedMonth,\n  onMonthSelect,\n  minDate,\n  maxDate,\n  className,\n  ...props\n}, ref) {\n  const COLS = 4\n  const [focusedIndex, setFocusedIndex] = React.useState(selectedMonth ?? 0)\n  const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const isMonthDisabled = (index: number) =>\n    (minDate != null &&\n      (currentYear < minDate.getFullYear() ||\n        (currentYear === minDate.getFullYear() && index < minDate.getMonth()))) ||\n    (maxDate != null &&\n      (currentYear > maxDate.getFullYear() ||\n        (currentYear === maxDate.getFullYear() && index > maxDate.getMonth())))\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    let next = focusedIndex\n    switch (e.key) {\n      case 'ArrowRight': next = Math.min(11, focusedIndex + 1); break\n      case 'ArrowLeft': next = Math.max(0, focusedIndex - 1); break\n      case 'ArrowDown': next = Math.min(11, focusedIndex + COLS); break\n      case 'ArrowUp': next = Math.max(0, focusedIndex - COLS); break\n      case 'Home': next = 0; break\n      case 'End': next = 11; break\n      default: return\n    }\n    e.preventDefault()\n    // Skip disabled months\n    while (next !== focusedIndex && isMonthDisabled(next)) {\n      next += (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ? -1 : 1\n      if (next < 0 || next > 11) return\n    }\n    setFocusedIndex(next)\n    buttonRefs.current[next]?.focus()\n  }\n\n  return (\n    <div ref={ref} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"text-center pb-ds-04 text-ds-md font-semibold text-surface-fg\">\n        {currentYear}\n      </div>\n      <div role=\"grid\" aria-label=\"Month picker\" tabIndex={-1} onKeyDown={handleKeyDown}>\n        {[0, 1, 2].map((rowIdx) => (\n          <div key={rowIdx} role=\"row\" className=\"grid grid-cols-4 gap-ds-02 mb-ds-02 last:mb-0\">\n            {MONTHS.slice(rowIdx * COLS, rowIdx * COLS + COLS).map((label, colIdx) => {\n              const index = rowIdx * COLS + colIdx\n              const isSelected = index === selectedMonth\n              const isDisabled = isMonthDisabled(index)\n\n              return (\n                <button\n                  key={label}\n                  ref={(el) => { buttonRefs.current[index] = el }}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  tabIndex={index === focusedIndex ? 0 : -1}\n                  disabled={isDisabled || false}\n                  onClick={() => !isDisabled && onMonthSelect(index)}\n                  className={cn(\n                    'h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                    isDisabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                    isSelected &&\n                      'bg-accent-9 text-accent-fg',\n                    !isSelected &&\n                      !isDisabled &&\n                      'hover:bg-surface-raised-hover text-surface-fg',\n                  )}\n                >\n                  {label}\n                </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nMonthPicker.displayName = 'MonthPicker'\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nexport interface YearPickerProps extends React.ComponentPropsWithoutRef<'div'> {\n  currentYear: number\n  selectedYear?: number\n  onYearSelect: (year: number) => void\n  minDate?: Date\n  maxDate?: Date\n}\n\nexport const YearPicker = React.forwardRef<HTMLDivElement, YearPickerProps>(\n  function YearPicker({\n  currentYear,\n  selectedYear,\n  onYearSelect,\n  minDate,\n  maxDate,\n  className,\n  ...props\n}, ref) {\n  const COLS = 3\n  const startYear = Math.floor(currentYear / 10) * 10\n  const years = Array.from({ length: 12 }, (_, i) => startYear + i)\n  const [focusedIndex, setFocusedIndex] = React.useState(() => {\n    const sel = years.indexOf(selectedYear ?? currentYear)\n    return sel >= 0 ? sel : 0\n  })\n  const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const isYearDisabled = (year: number) =>\n    (minDate != null && year < minDate.getFullYear()) ||\n    (maxDate != null && year > maxDate.getFullYear())\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    let next = focusedIndex\n    switch (e.key) {\n      case 'ArrowRight': next = Math.min(11, focusedIndex + 1); break\n      case 'ArrowLeft': next = Math.max(0, focusedIndex - 1); break\n      case 'ArrowDown': next = Math.min(11, focusedIndex + COLS); break\n      case 'ArrowUp': next = Math.max(0, focusedIndex - COLS); break\n      case 'Home': next = 0; break\n      case 'End': next = 11; break\n      default: return\n    }\n    e.preventDefault()\n    while (next !== focusedIndex && isYearDisabled(years[next])) {\n      next += (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ? -1 : 1\n      if (next < 0 || next > 11) return\n    }\n    setFocusedIndex(next)\n    buttonRefs.current[next]?.focus()\n  }\n\n  return (\n    <div ref={ref} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"text-center pb-ds-04 text-ds-md font-semibold text-surface-fg\">\n        {startYear} &ndash; {startYear + 11}\n      </div>\n      <div role=\"grid\" aria-label=\"Year picker\" tabIndex={-1} onKeyDown={handleKeyDown}>\n        {[0, 1, 2, 3].map((rowIdx) => (\n          <div key={rowIdx} role=\"row\" className=\"grid grid-cols-3 gap-ds-02 mb-ds-02 last:mb-0\">\n            {years.slice(rowIdx * COLS, rowIdx * COLS + COLS).map((year) => {\n              const index = years.indexOf(year)\n              const isSelected = year === selectedYear\n              const isDisabled = isYearDisabled(year)\n\n              return (\n                <button\n                  key={year}\n                  ref={(el) => { buttonRefs.current[index] = el }}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  tabIndex={index === focusedIndex ? 0 : -1}\n                  disabled={isDisabled || false}\n                  onClick={() => !isDisabled && onYearSelect(year)}\n                  className={cn(\n                    'h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                    isDisabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                    isSelected &&\n                      'bg-accent-9 text-accent-fg',\n                    !isSelected &&\n                      !isDisabled &&\n                      'hover:bg-surface-raised-hover text-surface-fg',\n                  )}\n                >\n                  {year}\n                </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nYearPicker.displayName = 'YearPicker'\n","'use client'\n\nimport { IconCalendarEvent } from '@tabler/icons-react'\nimport { format, setMonth, setYear } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\n/**\n * A popover-based date picker with day/month/year drill-down views.\n * Supports min/max date constraints and arbitrary date disabling.\n */\nexport interface DatePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** Currently selected date (controlled). */\n  value?: Date | null\n  /** Called when a date is selected. Receives null if cleared. */\n  onChange?: (date: Date | null) => void\n  placeholder?: string\n  /** date-fns format string for the trigger display. @default 'MMM d, yyyy' */\n  formatStr?: string\n  /** Earliest selectable date. */\n  minDate?: Date\n  /** Latest selectable date. */\n  maxDate?: Date\n  /** Predicate to disable specific dates (return true to disable). */\n  disabledDates?: (date: Date) => boolean\n  className?: string\n}\n\nconst DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\n  function DatePicker(\n    {\n      value,\n      onChange,\n      placeholder = 'Pick a date',\n      className,\n      formatStr = 'MMM d, yyyy',\n      minDate,\n      maxDate,\n      disabledDates,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    value ?? new Date(),\n  )\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  const handleSelect = (date: Date) => {\n    onChange?.(date)\n    setOpen(false)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={value?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={value?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return (\n          <CalendarGrid\n            currentMonth={currentMonth}\n            selected={value}\n            onSelect={handleSelect}\n            onMonthChange={setCurrentMonth}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n    }\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          aria-label={value ? `Change date, ${format(value, formatStr)}` : placeholder}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n        >\n          <Icon icon={IconCalendarEvent} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              value\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {value ? format(value, formatStr) : placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        {renderView()}\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n","'use client'\n\nimport {\n  endOfDay,\n  endOfMonth,\n  startOfDay,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nexport type PresetKey =\n  | 'today'\n  | 'yesterday'\n  | 'last7days'\n  | 'last30days'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisYear'\n\nexport interface PresetsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  presets: PresetKey[]\n  onSelect: (start: Date, end: Date) => void\n  className?: string\n}\n\ninterface PresetDefinition {\n  label: string\n  getRange: () => { start: Date; end: Date }\n}\n\nconst PRESET_MAP: Record<PresetKey, PresetDefinition> = {\n  today: {\n    label: 'Today',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(now), end: endOfDay(now) }\n    },\n  },\n  yesterday: {\n    label: 'Yesterday',\n    getRange: () => {\n      const yesterday = subDays(new Date(), 1)\n      return { start: startOfDay(yesterday), end: endOfDay(yesterday) }\n    },\n  },\n  last7days: {\n    label: 'Last 7 days',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(subDays(now, 6)), end: endOfDay(now) }\n    },\n  },\n  last30days: {\n    label: 'Last 30 days',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(subDays(now, 29)), end: endOfDay(now) }\n    },\n  },\n  thisMonth: {\n    label: 'This month',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfMonth(now), end: endOfMonth(now) }\n    },\n  },\n  lastMonth: {\n    label: 'Last month',\n    getRange: () => {\n      const now = new Date()\n      const last = subMonths(now, 1)\n      return { start: startOfMonth(last), end: endOfMonth(last) }\n    },\n  },\n  thisYear: {\n    label: 'This year',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfYear(now), end: endOfDay(now) }\n    },\n  },\n}\n\nexport const Presets = React.forwardRef<HTMLDivElement, PresetsProps>(\n  function Presets({ presets, onSelect, className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex flex-col gap-ds-01', className)}>\n      {presets.map((key) => {\n        const preset = PRESET_MAP[key]\n        if (!preset) return null\n        return (\n          <button\n            key={key}\n            type=\"button\"\n            onClick={() => {\n              const { start, end } = preset.getRange()\n              onSelect(start, end)\n            }}\n            className={cn(\n              'h-ds-sm w-full rounded-ds-md px-ds-03 text-left text-ds-sm',\n              'text-surface-fg transition-colors',\n              'hover:bg-surface-raised-hover',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            )}\n          >\n            {preset.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n},\n)\n\nPresets.displayName = 'Presets'\n","'use client'\n\nimport { IconCalendarEvent } from '@tabler/icons-react'\nimport { addMonths,format, isAfter, isBefore, setMonth, setYear } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport type { PresetKey } from './presets'\nimport { Presets } from './presets'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\nexport interface DateRangePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange'> {\n  startDate?: Date | null\n  endDate?: Date | null\n  onChange?: (range: { start: Date | null; end: Date | null }) => void\n  placeholder?: string\n  className?: string\n  formatStr?: string\n  minDate?: Date\n  maxDate?: Date\n  disabledDates?: (date: Date) => boolean\n  /** Show a presets sidebar with quick date range selections */\n  presets?: PresetKey[]\n  /** Number of calendar months to display side by side (default: 1) */\n  numberOfMonths?: number\n}\n\nconst DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      startDate,\n      endDate,\n      onChange,\n      placeholder = 'Pick a date range',\n      className,\n      formatStr = 'MMM d, yyyy',\n      minDate,\n      maxDate,\n      disabledDates,\n      presets,\n      numberOfMonths = 1,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    startDate ?? new Date(),\n  )\n  const [rangeStart, setRangeStart] = React.useState<Date | null>(\n    startDate ?? null,\n  )\n  const [rangeEnd, setRangeEnd] = React.useState<Date | null>(\n    endDate ?? null,\n  )\n  const [hoverDate, setHoverDate] = React.useState<Date | null>(null)\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  const monthCount = Math.max(1, numberOfMonths)\n\n  React.useEffect(() => {\n    setRangeStart(startDate ?? null)\n    setRangeEnd(endDate ?? null)\n  }, [startDate, endDate])\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  const handleSelect = (date: Date) => {\n    if (!rangeStart || (rangeStart && rangeEnd)) {\n      setRangeStart(date)\n      setRangeEnd(null)\n    } else {\n      const start = isBefore(date, rangeStart) ? date : rangeStart\n      const end = isAfter(date, rangeStart) ? date : rangeStart\n      setRangeStart(start)\n      setRangeEnd(end)\n      onChange?.({ start, end })\n      setOpen(false)\n    }\n  }\n\n  const handlePresetSelect = (start: Date, end: Date) => {\n    setRangeStart(start)\n    setRangeEnd(end)\n    onChange?.({ start, end })\n    setOpen(false)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  const displayText = () => {\n    if (rangeStart && rangeEnd) {\n      return `${format(rangeStart, formatStr)} - ${format(rangeEnd, formatStr)}`\n    }\n    return placeholder\n  }\n\n  const renderCalendarGrids = () => {\n    if (monthCount === 1) {\n      return (\n        <CalendarGrid\n          currentMonth={currentMonth}\n          rangeStart={rangeStart}\n          rangeEnd={rangeEnd}\n          hoverDate={hoverDate}\n          onSelect={handleSelect}\n          onHover={setHoverDate}\n          onMonthChange={setCurrentMonth}\n          onHeaderClick={handleHeaderClick}\n          disabledDates={disabledDates}\n          minDate={minDate}\n          maxDate={maxDate}\n        />\n      )\n    }\n\n    return (\n      <div className=\"flex flex-row gap-ds-04\">\n        {Array.from({ length: monthCount }, (_, i) => (\n          <CalendarGrid\n            key={i}\n            currentMonth={addMonths(currentMonth, i)}\n            rangeStart={rangeStart}\n            rangeEnd={rangeEnd}\n            hoverDate={hoverDate}\n            onSelect={handleSelect}\n            onHover={setHoverDate}\n            onMonthChange={(date) => {\n              // Adjust so the first grid stays in sync\n              setCurrentMonth(addMonths(date, -i))\n            }}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n            hidePrevNav={i > 0}\n            hideNextNav={i < monthCount - 1}\n          />\n        ))}\n      </div>\n    )\n  }\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={rangeStart?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={rangeStart?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return renderCalendarGrids()\n    }\n  }\n\n  const hasPresets = presets && presets.length > 0\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          aria-label={rangeStart && rangeEnd ? `Change date range, ${displayText()}` : placeholder}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n        >\n          <Icon icon={IconCalendarEvent} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              rangeStart && rangeEnd\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText()}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        {hasPresets ? (\n          <div className=\"flex flex-row gap-ds-04\">\n            <div className=\"min-w-[140px] border-r border-surface-border-strong pr-ds-04\">\n              <Presets presets={presets} onSelect={handlePresetSelect} />\n            </div>\n            <div>{renderView()}</div>\n          </div>\n        ) : (\n          renderView()\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDateRangePicker.displayName = 'DateRangePicker'\n\nexport { DateRangePicker }\n","'use client'\n\nimport { IconCalendarClock } from '@tabler/icons-react'\nimport {\n  format,\n  setHours,\n  setMinutes,\n  setMonth,\n  setYear,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\nexport interface DateTimePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** The currently selected date and time. */\n  value?: Date | null\n  /** Callback fired when the date/time changes. */\n  onChange?: (date: Date | null) => void\n  /** Earliest selectable date. */\n  minDate?: Date\n  /** Latest selectable date. */\n  maxDate?: Date\n  /** Function to disable specific dates. */\n  disabledDates?: (date: Date) => boolean\n  /** Display format for the time portion: 12-hour with AM/PM or 24-hour. */\n  timeFormat?: '12h' | '24h'\n  /** Step interval for the minute selector. */\n  minuteStep?: number\n  /** Placeholder text when no value is set. */\n  placeholder?: string\n  /** Additional class names for the trigger button. */\n  className?: string\n}\n\nfunction padTwo(n: number): string {\n  return n.toString().padStart(2, '0')\n}\n\nfunction generateRange(start: number, end: number, step: number): number[] {\n  const result: number[] = []\n  for (let i = start; i <= end; i += step) {\n    result.push(i)\n  }\n  return result\n}\n\nconst DateTimePicker = React.forwardRef<HTMLButtonElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      minDate,\n      maxDate,\n      disabledDates,\n      timeFormat = '12h',\n      minuteStep = 1,\n      placeholder = 'Pick date & time',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(value ?? new Date())\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  // Derive time parts\n  const hours24 = value ? value.getHours() : 0\n  const minutes = value ? value.getMinutes() : 0\n  const ampm: 'AM' | 'PM' = hours24 >= 12 ? 'PM' : 'AM'\n  const hours12 = hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24\n\n  const hoursRange =\n    timeFormat === '12h' ? generateRange(1, 12, 1) : generateRange(0, 23, 1)\n  const minutesRange = generateRange(0, 59, minuteStep)\n\n  const selectedHour = timeFormat === '12h' ? hours12 : hours24\n\n  // --- Calendar view handlers ---\n\n  const handleDateSelect = (date: Date) => {\n    // Merge with existing time part (or default to current time parts)\n    let merged = setHours(date, value ? value.getHours() : hours24)\n    merged = setMinutes(merged, value ? value.getMinutes() : minutes)\n    onChange?.(merged)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  // --- Time handlers ---\n\n  const handleHourChange = (hour: number) => {\n    const base = value ? new Date(value) : new Date()\n    let h = hour\n\n    if (timeFormat === '12h') {\n      const currentAmPm = value ? ampm : 'AM'\n      if (currentAmPm === 'AM') {\n        h = hour === 12 ? 0 : hour\n      } else {\n        h = hour === 12 ? 12 : hour + 12\n      }\n    }\n\n    const updated = setHours(base, h)\n    onChange?.(updated)\n  }\n\n  const handleMinuteChange = (minute: number) => {\n    const base = value ? new Date(value) : new Date()\n    const updated = setMinutes(base, minute)\n    onChange?.(updated)\n  }\n\n  const handleAmPmToggle = (period: 'AM' | 'PM') => {\n    const base = value ? new Date(value) : new Date()\n    const currentH = base.getHours()\n    let newH: number\n\n    if (period === 'AM') {\n      newH = currentH >= 12 ? currentH - 12 : currentH\n    } else {\n      newH = currentH < 12 ? currentH + 12 : currentH\n    }\n\n    onChange?.(setHours(base, newH))\n  }\n\n  // --- Display text ---\n\n  const displayText = React.useMemo(() => {\n    if (!value) return null\n    const fmt =\n      timeFormat === '12h' ? 'MMM d, yyyy h:mm a' : 'MMM d, yyyy HH:mm'\n    return format(value, fmt)\n  }, [value, timeFormat])\n\n  // --- Render calendar view ---\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={value?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={value?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return (\n          <CalendarGrid\n            currentMonth={currentMonth}\n            selected={value}\n            onSelect={handleDateSelect}\n            onMonthChange={setCurrentMonth}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n    }\n  }\n\n  // Compact time selector styles\n  const selectBase =\n    'h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-02 text-ds-md text-surface-fg transition-colors duration-fast-01 ease-productive-standard hover:border-surface-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 cursor-pointer appearance-none'\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n          aria-label={displayText ? `Selected: ${displayText}` : placeholder}\n        >\n          <Icon icon={IconCalendarClock} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              displayText\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText ?? placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        <div className=\"flex flex-col gap-ds-04\">\n          {/* Calendar portion */}\n          {renderView()}\n\n          {/* Time selection row */}\n          {view === 'days' && (\n            <div className=\"flex items-center gap-ds-02 border-t border-surface-border-strong pt-ds-04\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                Time\n              </span>\n\n              {/* Hour select */}\n              <select\n                value={selectedHour ?? ''}\n                onChange={(e) => handleHourChange(Number(e.target.value))}\n                className={selectBase}\n                aria-label=\"Hour\"\n              >\n                {!value && <option value=\"\">--</option>}\n                {hoursRange.map((h) => (\n                  <option key={h} value={h}>\n                    {timeFormat === '24h' ? padTwo(h) : h}\n                  </option>\n                ))}\n              </select>\n\n              <span className=\"text-ds-md font-semibold text-surface-fg-subtle\">\n                :\n              </span>\n\n              {/* Minute select */}\n              <select\n                value={value ? minutes : ''}\n                onChange={(e) => handleMinuteChange(Number(e.target.value))}\n                className={selectBase}\n                aria-label=\"Minute\"\n              >\n                {!value && <option value=\"\">--</option>}\n                {minutesRange.map((m) => (\n                  <option key={m} value={m}>\n                    {padTwo(m)}\n                  </option>\n                ))}\n              </select>\n\n              {/* AM/PM toggle for 12h */}\n              {timeFormat === '12h' && (\n                <select\n                  value={value ? ampm : ''}\n                  onChange={(e) =>\n                    handleAmPmToggle(e.target.value as 'AM' | 'PM')\n                  }\n                  className={selectBase}\n                  aria-label=\"AM or PM\"\n                >\n                  {!value && <option value=\"\">--</option>}\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              )}\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDateTimePicker.displayName = 'DateTimePicker'\n\nexport { DateTimePicker }\n","'use client'\n\nimport { IconClock } from '@tabler/icons-react'\nimport { format, setHours, setMinutes, setSeconds } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\n\nexport interface TimePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** The currently selected time (as a Date object). */\n  value?: Date | null\n  /** Callback fired when the time changes. */\n  onChange?: (date: Date) => void\n  /** Display format: 12-hour with AM/PM or 24-hour. */\n  format?: '12h' | '24h'\n  /** Step interval for minutes column. */\n  minuteStep?: number\n  /** Step interval for seconds column. */\n  secondStep?: number\n  /** Whether to show the seconds column. */\n  showSeconds?: boolean\n  /** Placeholder text when no value is set. */\n  placeholder?: string\n  /** Additional class names for the trigger button. */\n  className?: string\n  /** Whether the picker is disabled. */\n  disabled?: boolean\n}\n\nfunction generateRange(start: number, end: number, step: number): number[] {\n  const result: number[] = []\n  for (let i = start; i <= end; i += step) {\n    result.push(i)\n  }\n  return result\n}\n\nfunction padTwo(n: number): string {\n  return n.toString().padStart(2, '0')\n}\n\nconst TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      format: timeFormat = '12h',\n      minuteStep = 1,\n      secondStep = 1,\n      showSeconds = false,\n      placeholder = 'Pick a time',\n      className,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n\n  // Derive display parts from value\n  const hours24 = value ? value.getHours() : null\n  const minutes = value ? value.getMinutes() : null\n  const seconds = value ? value.getSeconds() : null\n  const ampm = hours24 !== null ? (hours24 >= 12 ? 'PM' : 'AM') : null\n\n  // For 12h display, convert 24h to 12h\n  const hours12 =\n    hours24 !== null\n      ? hours24 === 0\n        ? 12\n        : hours24 > 12\n          ? hours24 - 12\n          : hours24\n      : null\n\n  const hoursRange =\n    timeFormat === '12h' ? generateRange(1, 12, 1) : generateRange(0, 23, 1)\n  const minutesRange = generateRange(0, 59, minuteStep)\n  const secondsRange = generateRange(0, 59, secondStep)\n\n  const createOrUpdateDate = (\n    overrides: { hours?: number; minutes?: number; seconds?: number; ampm?: 'AM' | 'PM' },\n  ): Date => {\n    const base = value ? new Date(value) : new Date()\n\n    let h = overrides.hours ?? base.getHours()\n    const m = overrides.minutes ?? base.getMinutes()\n    const s = overrides.seconds ?? base.getSeconds()\n\n    // If we're in 12h mode, we need to convert the 12h value to 24h\n    if (timeFormat === '12h' && overrides.hours !== undefined) {\n      const currentAmPm = overrides.ampm ?? ampm ?? 'AM'\n      if (currentAmPm === 'AM') {\n        h = overrides.hours === 12 ? 0 : overrides.hours\n      } else {\n        h = overrides.hours === 12 ? 12 : overrides.hours + 12\n      }\n    }\n\n    let result = setHours(base, h)\n    result = setMinutes(result, m)\n    result = setSeconds(result, s)\n    return result\n  }\n\n  const handleHourSelect = (hour: number) => {\n    const updated = createOrUpdateDate({ hours: hour })\n    onChange?.(updated)\n  }\n\n  const handleMinuteSelect = (minute: number) => {\n    const updated = createOrUpdateDate({ minutes: minute })\n    onChange?.(updated)\n  }\n\n  const handleSecondSelect = (second: number) => {\n    const updated = createOrUpdateDate({ seconds: second })\n    onChange?.(updated)\n  }\n\n  const handleAmPmToggle = (period: 'AM' | 'PM') => {\n    if (!value) {\n      // Create a date with 12:00 in the chosen period\n      const h = period === 'AM' ? 0 : 12\n      let d = new Date()\n      d = setHours(d, h)\n      d = setMinutes(d, 0)\n      d = setSeconds(d, 0)\n      onChange?.(d)\n      return\n    }\n\n    const currentH = value.getHours()\n    let newH: number\n\n    if (period === 'AM') {\n      newH = currentH >= 12 ? currentH - 12 : currentH\n    } else {\n      newH = currentH < 12 ? currentH + 12 : currentH\n    }\n\n    onChange?.(setHours(new Date(value), newH))\n  }\n\n  // Format display string\n  const displayText = React.useMemo(() => {\n    if (!value) return null\n    if (timeFormat === '12h') {\n      const fmt = showSeconds ? 'h:mm:ss a' : 'h:mm a'\n      return format(value, fmt)\n    }\n    const fmt = showSeconds ? 'HH:mm:ss' : 'HH:mm'\n    return format(value, fmt)\n  }, [value, timeFormat, showSeconds])\n\n  const selectedHour = timeFormat === '12h' ? hours12 : hours24\n\n  const columnClass =\n    'flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01'\n\n  const itemBase =\n    'flex h-ds-sm w-full items-center justify-center rounded-ds-md text-ds-md transition-colors duration-fast-01 ease-productive-standard cursor-pointer'\n  const itemSelected =\n    'bg-accent-9 text-accent-fg'\n  const itemDefault =\n    'text-surface-fg hover:bg-surface-raised-hover'\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={disabled}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            disabled && 'opacity-action-disabled pointer-events-none',\n            className,\n          )}\n          aria-label={displayText ? `Selected time: ${displayText}` : placeholder}\n        >\n          <Icon icon={IconClock} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              displayText\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText ?? placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        <div className=\"flex gap-ds-03\" role=\"group\" aria-label=\"Time picker\">\n          {/* Hours column */}\n          <div className=\"flex flex-col items-center gap-ds-02\">\n            <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n              Hr\n            </span>\n            <div className={cn(columnClass, 'min-w-[48px]')}>\n              {hoursRange.map((h) => (\n                <button\n                  key={h}\n                  type=\"button\"\n                  onClick={() => handleHourSelect(h)}\n                  className={cn(\n                    itemBase,\n                    selectedHour === h ? itemSelected : itemDefault,\n                  )}\n                  aria-label={`${h} hours`}\n                  aria-selected={selectedHour === h || undefined}\n                >\n                  {timeFormat === '24h' ? padTwo(h) : h}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Minutes column */}\n          <div className=\"flex flex-col items-center gap-ds-02\">\n            <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n              Min\n            </span>\n            <div className={cn(columnClass, 'min-w-[48px]')}>\n              {minutesRange.map((m) => (\n                <button\n                  key={m}\n                  type=\"button\"\n                  onClick={() => handleMinuteSelect(m)}\n                  className={cn(\n                    itemBase,\n                    minutes === m ? itemSelected : itemDefault,\n                  )}\n                  aria-label={`${padTwo(m)} minutes`}\n                  aria-selected={minutes === m || undefined}\n                >\n                  {padTwo(m)}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Seconds column */}\n          {showSeconds && (\n            <div className=\"flex flex-col items-center gap-ds-02\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                Sec\n              </span>\n              <div className={cn(columnClass, 'min-w-[48px]')}>\n                {secondsRange.map((s) => (\n                  <button\n                    key={s}\n                    type=\"button\"\n                    onClick={() => handleSecondSelect(s)}\n                    className={cn(\n                      itemBase,\n                      seconds === s ? itemSelected : itemDefault,\n                    )}\n                    aria-label={`${padTwo(s)} seconds`}\n                    aria-selected={seconds === s || undefined}\n                  >\n                    {padTwo(s)}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* AM/PM toggle for 12h format */}\n          {timeFormat === '12h' && (\n            <div className=\"flex flex-col items-center gap-ds-02\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                &nbsp;\n              </span>\n              <div className=\"flex flex-col gap-ds-01 px-ds-01\">\n                {(['AM', 'PM'] as const).map((period) => (\n                  <button\n                    key={period}\n                    type=\"button\"\n                    onClick={() => handleAmPmToggle(period)}\n                    className={cn(\n                      itemBase,\n                      'min-w-[44px] font-semibold',\n                      ampm === period ? itemSelected : itemDefault,\n                    )}\n                    aria-label={period}\n                    aria-selected={ampm === period || undefined}\n                  >\n                    {period}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\nexport { TimePicker }\n"],"mappings":";;;;;;;;;AAMA,IAAM,IAAS;CACb;CAAO;CAAO;CAAO;CAAO;CAAO;CACnC;CAAO;CAAO;CAAO;CAAO;CAAO;CACpC,EAUY,IAAc,EAAM,WAC/B,SAAqB,EACrB,gBACA,kBACA,kBACA,YACA,YACA,cACA,GAAG,KACF,GAAK;CACN,IACM,CAAC,GAAc,KAAmB,EAAM,SAAS,KAAiB,EAAE,EACpE,IAAa,EAAM,OAAqC,EAAE,CAAC,EAE3D,KAAmB,MACtB,KAAW,SACT,IAAc,EAAQ,aAAa,IACjC,MAAgB,EAAQ,aAAa,IAAI,IAAQ,EAAQ,UAAU,KACvE,KAAW,SACT,IAAc,EAAQ,aAAa,IACjC,MAAgB,EAAQ,aAAa,IAAI,IAAQ,EAAQ,UAAU,GAEpE,KAAiB,MAA2B;EAChD,IAAI,IAAO;AACX,UAAQ,EAAE,KAAV;GACE,KAAK;AAAc,QAAO,KAAK,IAAI,IAAI,IAAe,EAAE;AAAE;GAC1D,KAAK;AAAa,QAAO,KAAK,IAAI,GAAG,IAAe,EAAE;AAAE;GACxD,KAAK;AAAa,QAAO,KAAK,IAAI,IAAI,IAAe,EAAK;AAAE;GAC5D,KAAK;AAAW,QAAO,KAAK,IAAI,GAAG,IAAe,EAAK;AAAE;GACzD,KAAK;AAAQ,QAAO;AAAG;GACvB,KAAK;AAAO,QAAO;AAAI;GACvB,QAAS;;AAIX,OAFA,EAAE,gBAAgB,EAEX,MAAS,KAAgB,EAAgB,EAAK,EAEnD,KADA,KAAS,EAAE,QAAQ,eAAe,EAAE,QAAQ,YAAa,KAAK,GAC1D,IAAO,KAAK,IAAO,GAAI;AAG7B,EADA,EAAgB,EAAK,EACrB,EAAW,QAAQ,IAAO,OAAO;;AAGnC,QACE,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAO,WAAW,EAAG,aAAa,EAAU;YAA/D,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,EACN,kBAAC,OAAD;GAAK,MAAK;GAAO,cAAW;GAAe,UAAU;GAAI,WAAW;aACjE;IAAC;IAAG;IAAG;IAAE,CAAC,KAAK,MACd,kBAAC,OAAD;IAAkB,MAAK;IAAM,WAAU;cACpC,EAAO,MAAM,IAAS,GAAM,IAAS,IAAO,EAAK,CAAC,KAAK,GAAO,MAAW;KACxE,IAAM,IAAQ,IAAS,IAAO,GACxB,IAAa,MAAU,GACvB,IAAa,EAAgB,EAAM;AAEzC,YACE,kBAAC,UAAD;MAEE,MAAM,MAAO;AAAE,SAAW,QAAQ,KAAS;;MAC3C,MAAK;MACL,MAAK;MACL,UAAU,MAAU,IAAe,IAAI;MACvC,UAAU,KAAc;MACxB,eAAe,CAAC,KAAc,EAAc,EAAM;MAClD,WAAW,EACT,wIACA,KAAc,kEACd,KACE,8BACF,CAAC,KACC,CAAC,KACD,gDACH;gBAEA;MACM,EAlBF,EAkBE;MAEX;IACE,EA7BI,EA6BJ,CACN;GACE,CAAA,CACF;;EAGT;AAED,EAAY,cAAc;;;AC5F1B,IAAa,IAAa,EAAM,WAC9B,SAAoB,EACpB,gBACA,iBACA,iBACA,YACA,YACA,cACA,GAAG,KACF,GAAK;CACN,IACM,IAAY,KAAK,MAAM,IAAc,GAAG,GAAG,IAC3C,IAAQ,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,MAAM,IAAY,EAAE,EAC3D,CAAC,GAAc,KAAmB,EAAM,eAAe;EAC3D,IAAM,IAAM,EAAM,QAAQ,KAAgB,EAAY;AACtD,SAAO,KAAO,IAAI,IAAM;GACxB,EACI,IAAa,EAAM,OAAqC,EAAE,CAAC,EAE3D,KAAkB,MACrB,KAAW,QAAQ,IAAO,EAAQ,aAAa,IAC/C,KAAW,QAAQ,IAAO,EAAQ,aAAa,EAE5C,KAAiB,MAA2B;EAChD,IAAI,IAAO;AACX,UAAQ,EAAE,KAAV;GACE,KAAK;AAAc,QAAO,KAAK,IAAI,IAAI,IAAe,EAAE;AAAE;GAC1D,KAAK;AAAa,QAAO,KAAK,IAAI,GAAG,IAAe,EAAE;AAAE;GACxD,KAAK;AAAa,QAAO,KAAK,IAAI,IAAI,IAAe,EAAK;AAAE;GAC5D,KAAK;AAAW,QAAO,KAAK,IAAI,GAAG,IAAe,EAAK;AAAE;GACzD,KAAK;AAAQ,QAAO;AAAG;GACvB,KAAK;AAAO,QAAO;AAAI;GACvB,QAAS;;AAGX,OADA,EAAE,gBAAgB,EACX,MAAS,KAAgB,EAAe,EAAM,GAAM,EAEzD,KADA,KAAS,EAAE,QAAQ,eAAe,EAAE,QAAQ,YAAa,KAAK,GAC1D,IAAO,KAAK,IAAO,GAAI;AAG7B,EADA,EAAgB,EAAK,EACrB,EAAW,QAAQ,IAAO,OAAO;;AAGnC,QACE,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAO,WAAW,EAAG,aAAa,EAAU;YAA/D,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG;IAAU;IAAU,IAAY;IAC7B;MACN,kBAAC,OAAD;GAAK,MAAK;GAAO,cAAW;GAAc,UAAU;GAAI,WAAW;aAChE;IAAC;IAAG;IAAG;IAAG;IAAE,CAAC,KAAK,MACjB,kBAAC,OAAD;IAAkB,MAAK;IAAM,WAAU;cACpC,EAAM,MAAM,IAAS,GAAM,IAAS,IAAO,EAAK,CAAC,KAAK,MAAS;KAC9D,IAAM,IAAQ,EAAM,QAAQ,EAAK,EAC3B,IAAa,MAAS,GACtB,IAAa,EAAe,EAAK;AAEvC,YACE,kBAAC,UAAD;MAEE,MAAM,MAAO;AAAE,SAAW,QAAQ,KAAS;;MAC3C,MAAK;MACL,MAAK;MACL,UAAU,MAAU,IAAe,IAAI;MACvC,UAAU,KAAc;MACxB,eAAe,CAAC,KAAc,EAAa,EAAK;MAChD,WAAW,EACT,wIACA,KAAc,kEACd,KACE,8BACF,CAAC,KACC,CAAC,KACD,gDACH;gBAEA;MACM,EAlBF,EAkBE;MAEX;IACE,EA7BI,EA6BJ,CACN;GACE,CAAA,CACF;;EAGT;AAED,EAAW,cAAc;;;AC7DzB,IAAM,IAAa,EAAM,WACvB,SACE,EACE,UACA,aACA,iBAAc,eACd,cACA,eAAY,eACZ,YACA,YACA,kBACA,GAAG,KAEL,GACA;CACF,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,CAAC,GAAc,KAAmB,EAAM,SAC5C,qBAAS,IAAI,MAAM,CACpB,EACK,CAAC,GAAM,KAAW,EAAM,SAAuB,OAAO;AAG5D,GAAM,gBAAgB;AACpB,EAAK,KAAM,EAAQ,OAAO;IACzB,CAAC,EAAK,CAAC;CAEV,IAAM,KAAgB,MAAe;AAEnC,EADA,IAAW,EAAK,EAChB,EAAQ,GAAM;IAGV,UAA0B;AAC9B,KAAS,MAAU,MAAS,SAAS,WAAW,QAAS;IAGrD,KAAqB,MAAkB;AAE3C,EADA,GAAiB,MAAS,EAAS,GAAM,EAAM,CAAC,EAChD,EAAQ,OAAO;IAGX,KAAoB,MAAiB;AAEzC,EADA,GAAiB,MAAS,EAAQ,GAAM,EAAK,CAAC,EAC9C,EAAQ,SAAS;IAGb,UAAmB;AACvB,UAAQ,GAAR;GACE,KAAK,QACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,cAAc,GAAO,aAAa;IAClC,cAAc;IACL;IACA;IACT,CAAA;GAEN,KAAK,SACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,eAAe,GAAO,UAAU;IAChC,eAAe;IACN;IACA;IACT,CAAA;GAEN,QACE,QACE,kBAAC,GAAD;IACgB;IACd,UAAU;IACV,UAAU;IACV,eAAe;IACf,eAAe;IACA;IACN;IACA;IACT,CAAA;;;AAKV,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACO;IACL,MAAK;IACL,cAAY,IAAQ,gBAAgB,EAAO,GAAO,EAAU,KAAK;IACjE,GAAI;IACJ,WAAW,EACT,uMACA,sCACA,6GACA,EACD;cAVH,CAYE,kBAAC,GAAD;KAAM,MAAM;KAAmB,MAAK;KAAK,QAAO;KAAQ,WAAU;KAA2B,CAAA,EAC7F,kBAAC,QAAD;KACE,WAAW,EACT,cACA,IACI,oBACA,yBACL;eAEA,IAAQ,EAAO,GAAO,EAAU,GAAG;KAC/B,CAAA,CACA;;GACM,CAAA,EACjB,kBAAC,GAAD;GACE,WAAU;GACV,OAAM;GACN,YAAY;aAEX,GAAY;GACE,CAAA,CACT;;EAGb;AAED,EAAW,cAAc;;;AChIzB,IAAM,IAAkD;CACtD,OAAO;EACL,OAAO;EACP,gBAAgB;GACd,IAAM,oBAAM,IAAI,MAAM;AACtB,UAAO;IAAE,OAAO,EAAW,EAAI;IAAE,KAAK,EAAS,EAAI;IAAE;;EAExD;CACD,WAAW;EACT,OAAO;EACP,gBAAgB;GACd,IAAM,IAAY,kBAAQ,IAAI,MAAM,EAAE,EAAE;AACxC,UAAO;IAAE,OAAO,EAAW,EAAU;IAAE,KAAK,EAAS,EAAU;IAAE;;EAEpE;CACD,WAAW;EACT,OAAO;EACP,gBAAgB;GACd,IAAM,oBAAM,IAAI,MAAM;AACtB,UAAO;IAAE,OAAO,EAAW,EAAQ,GAAK,EAAE,CAAC;IAAE,KAAK,EAAS,EAAI;IAAE;;EAEpE;CACD,YAAY;EACV,OAAO;EACP,gBAAgB;GACd,IAAM,oBAAM,IAAI,MAAM;AACtB,UAAO;IAAE,OAAO,EAAW,EAAQ,GAAK,GAAG,CAAC;IAAE,KAAK,EAAS,EAAI;IAAE;;EAErE;CACD,WAAW;EACT,OAAO;EACP,gBAAgB;GACd,IAAM,oBAAM,IAAI,MAAM;AACtB,UAAO;IAAE,OAAO,EAAa,EAAI;IAAE,KAAK,EAAW,EAAI;IAAE;;EAE5D;CACD,WAAW;EACT,OAAO;EACP,gBAAgB;GAEd,IAAM,IAAO,kBADD,IAAI,MAAM,EACM,EAAE;AAC9B,UAAO;IAAE,OAAO,EAAa,EAAK;IAAE,KAAK,EAAW,EAAK;IAAE;;EAE9D;CACD,UAAU;EACR,OAAO;EACP,gBAAgB;GACd,IAAM,oBAAM,IAAI,MAAM;AACtB,UAAO;IAAE,OAAO,EAAY,EAAI;IAAE,KAAK,EAAS,EAAI;IAAE;;EAEzD;CACF,EAEY,IAAU,EAAM,WAC3B,SAAiB,EAAE,YAAS,aAAU,cAAW,GAAG,KAAS,GAAK;AAClE,QACE,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAO,WAAW,EAAG,2BAA2B,EAAU;YAC1E,EAAQ,KAAK,MAAQ;GACpB,IAAM,IAAS,EAAW;AAE1B,UADK,IAEH,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe;KACb,IAAM,EAAE,UAAO,WAAQ,EAAO,UAAU;AACxC,OAAS,GAAO,EAAI;;IAEtB,WAAW,EACT,8DACA,qCACA,iCACA,gFACD;cAEA,EAAO;IACD,EAdF,EAcE,GAjBS;IAmBpB;EACE,CAAA;EAGT;AAED,EAAQ,cAAc;;;AClFtB,IAAM,IAAkB,EAAM,WAC5B,SACE,EACE,cACA,YACA,aACA,iBAAc,qBACd,cACA,eAAY,eACZ,YACA,YACA,kBACA,YACA,oBAAiB,GACjB,GAAG,KAEL,GACA;CACF,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,CAAC,GAAc,KAAmB,EAAM,SAC5C,qBAAa,IAAI,MAAM,CACxB,EACK,CAAC,GAAY,KAAiB,EAAM,SACxC,KAAa,KACd,EACK,CAAC,GAAU,KAAe,EAAM,SACpC,KAAW,KACZ,EACK,CAAC,GAAW,KAAgB,EAAM,SAAsB,KAAK,EAC7D,CAAC,GAAM,KAAW,EAAM,SAAuB,OAAO,EAEtD,IAAa,KAAK,IAAI,GAAG,EAAe;AAQ9C,CANA,EAAM,gBAAgB;AAEpB,EADA,EAAc,KAAa,KAAK,EAChC,EAAY,KAAW,KAAK;IAC3B,CAAC,GAAW,EAAQ,CAAC,EAGxB,EAAM,gBAAgB;AACpB,EAAK,KAAM,EAAQ,OAAO;IACzB,CAAC,EAAK,CAAC;CAEV,IAAM,KAAgB,MAAe;AACnC,MAAI,CAAC,KAAe,KAAc,EAEhC,CADA,EAAc,EAAK,EACnB,EAAY,KAAK;OACZ;GACL,IAAM,IAAQ,EAAS,GAAM,EAAW,GAAG,IAAO,GAC5C,IAAM,EAAQ,GAAM,EAAW,GAAG,IAAO;AAI/C,GAHA,EAAc,EAAM,EACpB,EAAY,EAAI,EAChB,IAAW;IAAE;IAAO;IAAK,CAAC,EAC1B,EAAQ,GAAM;;IAIZ,KAAsB,GAAa,MAAc;AAIrD,EAHA,EAAc,EAAM,EACpB,EAAY,EAAI,EAChB,IAAW;GAAE;GAAO;GAAK,CAAC,EAC1B,EAAQ,GAAM;IAGV,UAA0B;AAC9B,KAAS,MAAU,MAAS,SAAS,WAAW,QAAS;IAGrD,KAAqB,MAAkB;AAE3C,EADA,GAAiB,MAAS,EAAS,GAAM,EAAM,CAAC,EAChD,EAAQ,OAAO;IAGX,KAAoB,MAAiB;AAEzC,EADA,GAAiB,MAAS,EAAQ,GAAM,EAAK,CAAC,EAC9C,EAAQ,SAAS;IAGb,UACA,KAAc,IACT,GAAG,EAAO,GAAY,EAAU,CAAC,KAAK,EAAO,GAAU,EAAU,KAEnE,GAGH,UACA,MAAe,IAEf,kBAAC,GAAD;EACgB;EACF;EACF;EACC;EACX,UAAU;EACV,SAAS;EACT,eAAe;EACf,eAAe;EACA;EACN;EACA;EACT,CAAA,GAKJ,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,GAAY,GAAG,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAc,EAAU,GAAc,EAAE;GAC5B;GACF;GACC;GACX,UAAU;GACV,SAAS;GACT,gBAAgB,MAAS;AAEvB,MAAgB,EAAU,GAAM,CAAC,EAAE,CAAC;;GAEtC,eAAe;GACA;GACN;GACA;GACT,aAAa,IAAI;GACjB,aAAa,IAAI,IAAa;GAC9B,EAjBK,EAiBL,CACF;EACE,CAAA,EAIJ,UAAmB;AACvB,UAAQ,GAAR;GACE,KAAK,QACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,cAAc,GAAY,aAAa;IACvC,cAAc;IACL;IACA;IACT,CAAA;GAEN,KAAK,SACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,eAAe,GAAY,UAAU;IACrC,eAAe;IACN;IACA;IACT,CAAA;GAEN,QACE,QAAO,GAAqB;;IAI5B,IAAa,KAAW,EAAQ,SAAS;AAE/C,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACO;IACL,MAAK;IACL,cAAY,KAAc,IAAW,sBAAsB,GAAa,KAAK;IAC7E,GAAI;IACJ,WAAW,EACT,uMACA,sCACA,6GACA,EACD;cAVH,CAYE,kBAAC,GAAD;KAAM,MAAM;KAAmB,MAAK;KAAK,QAAO;KAAQ,WAAU;KAA2B,CAAA,EAC7F,kBAAC,QAAD;KACE,WAAW,EACT,cACA,KAAc,IACV,oBACA,yBACL;eAEA,GAAa;KACT,CAAA,CACA;;GACM,CAAA,EACjB,kBAAC,GAAD;GACE,WAAU;GACV,OAAM;GACN,YAAY;aAEX,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAkB;MAAS,UAAU;MAAsB,CAAA;KACvD,CAAA,EACN,kBAAC,OAAD,EAAA,UAAM,GAAY,EAAO,CAAA,CACrB;QAEN,GAAY;GAEC,CAAA,CACT;;EAGb;AAED,EAAgB,cAAc;;;ACxM9B,SAAS,EAAO,GAAmB;AACjC,QAAO,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI;;AAGtC,SAAS,EAAc,GAAe,GAAa,GAAwB;CACzE,IAAM,IAAmB,EAAE;AAC3B,MAAK,IAAI,IAAI,GAAO,KAAK,GAAK,KAAK,EACjC,GAAO,KAAK,EAAE;AAEhB,QAAO;;AAGT,IAAM,IAAiB,EAAM,WAC3B,SACE,EACE,UACA,aACA,YACA,YACA,kBACA,gBAAa,OACb,gBAAa,GACb,iBAAc,oBACd,cACA,GAAG,KAEL,GACA;CACF,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,CAAC,GAAc,KAAmB,EAAM,SAAS,qBAAS,IAAI,MAAM,CAAC,EACrE,CAAC,GAAM,KAAW,EAAM,SAAuB,OAAO;AAG5D,GAAM,gBAAgB;AACpB,EAAK,KAAM,EAAQ,OAAO;IACzB,CAAC,EAAK,CAAC;CAGV,IAAM,IAAU,IAAQ,EAAM,UAAU,GAAG,GACrC,IAAU,IAAQ,EAAM,YAAY,GAAG,GACvC,IAAoB,KAAW,KAAK,OAAO,MAC3C,IAAU,MAAY,IAAI,KAAK,IAAU,KAAK,IAAU,KAAK,GAE7D,IACJ,MAAe,QAAQ,EAAc,GAAG,IAAI,EAAE,GAAG,EAAc,GAAG,IAAI,EAAE,EACpE,IAAe,EAAc,GAAG,IAAI,EAAW,EAE/C,IAAe,MAAe,QAAQ,IAAU,GAIhD,KAAoB,MAAe;EAEvC,IAAI,IAAS,EAAS,GAAM,IAAQ,EAAM,UAAU,GAAG,EAAQ;AAE/D,EADA,IAAS,EAAW,GAAQ,IAAQ,EAAM,YAAY,GAAG,EAAQ,EACjE,IAAW,EAAO;IAGd,UAA0B;AAC9B,KAAS,MAAU,MAAS,SAAS,WAAW,QAAS;IAGrD,KAAqB,MAAkB;AAE3C,EADA,GAAiB,MAAS,EAAS,GAAM,EAAM,CAAC,EAChD,EAAQ,OAAO;IAGX,KAAoB,MAAiB;AAEzC,EADA,GAAiB,MAAS,EAAQ,GAAM,EAAK,CAAC,EAC9C,EAAQ,SAAS;IAKb,KAAoB,MAAiB;EACzC,IAAM,IAAO,IAAQ,IAAI,KAAK,EAAM,mBAAG,IAAI,MAAM,EAC7C,IAAI;AAER,EAAI,MAAe,UAEjB,AAGE,KAJkB,IAAQ,IAAO,UACf,OACd,MAAS,KAAK,IAAI,IAElB,MAAS,KAAK,KAAK,IAAO;EAIlC,IAAM,IAAU,EAAS,GAAM,EAAE;AACjC,MAAW,EAAQ;IAGf,KAAsB,MAAmB;EAE7C,IAAM,IAAU,EADH,IAAQ,IAAI,KAAK,EAAM,mBAAG,IAAI,MAAM,EAChB,EAAO;AACxC,MAAW,EAAQ;IAGf,KAAoB,MAAwB;EAChD,IAAM,IAAO,IAAQ,IAAI,KAAK,EAAM,mBAAG,IAAI,MAAM,EAC3C,IAAW,EAAK,UAAU,EAC5B;AAQJ,EANA,AAGE,IAHE,MAAW,OACN,KAAY,KAAK,IAAW,KAAK,IAEjC,IAAW,KAAK,IAAW,KAAK,GAGzC,IAAW,EAAS,GAAM,EAAK,CAAC;IAK5B,IAAc,EAAM,cACnB,IAGE,EAAO,GADZ,MAAe,QAAQ,uBAAuB,oBACvB,GAHN,MAIlB,CAAC,GAAO,EAAW,CAAC,EAIjB,UAAmB;AACvB,UAAQ,GAAR;GACE,KAAK,QACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,cAAc,GAAO,aAAa;IAClC,cAAc;IACL;IACA;IACT,CAAA;GAEN,KAAK,SACH,QACE,kBAAC,GAAD;IACE,aAAa,EAAa,aAAa;IACvC,eAAe,GAAO,UAAU;IAChC,eAAe;IACN;IACA;IACT,CAAA;GAEN,QACE,QACE,kBAAC,GAAD;IACgB;IACd,UAAU;IACV,UAAU;IACV,eAAe;IACf,eAAe;IACA;IACN;IACA;IACT,CAAA;;IAMJ,IACJ;AAEF,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACO;IACL,MAAK;IACL,GAAI;IACJ,WAAW,EACT,uMACA,sCACA,6GACA,EACD;IACD,cAAY,IAAc,aAAa,MAAgB;cAVzD,CAYE,kBAAC,GAAD;KAAM,MAAM;KAAmB,MAAK;KAAK,QAAO;KAAQ,WAAU;KAA2B,CAAA,EAC7F,kBAAC,QAAD;KACE,WAAW,EACT,cACA,IACI,oBACA,yBACL;eAEA,KAAe;KACX,CAAA,CACA;;GACM,CAAA,EACjB,kBAAC,GAAD;GACE,WAAU;GACV,OAAM;GACN,YAAY;aAEZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEG,GAAY,EAGZ,MAAS,UACR,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,QAAD;OAAM,WAAU;iBAA2E;OAEpF,CAAA;MAGP,kBAAC,UAAD;OACE,OAAO,KAAgB;OACvB,WAAW,MAAM,EAAiB,OAAO,EAAE,OAAO,MAAM,CAAC;OACzD,WAAW;OACX,cAAW;iBAJb,CAMG,CAAC,KAAS,kBAAC,UAAD;QAAQ,OAAM;kBAAG;QAAW,CAAA,EACtC,EAAW,KAAK,MACf,kBAAC,UAAD;QAAgB,OAAO;kBACpB,MAAe,QAAQ,EAAO,EAAE,GAAG;QAC7B,EAFI,EAEJ,CACT,CACK;;MAET,kBAAC,QAAD;OAAM,WAAU;iBAAkD;OAE3D,CAAA;MAGP,kBAAC,UAAD;OACE,OAAO,IAAQ,IAAU;OACzB,WAAW,MAAM,EAAmB,OAAO,EAAE,OAAO,MAAM,CAAC;OAC3D,WAAW;OACX,cAAW;iBAJb,CAMG,CAAC,KAAS,kBAAC,UAAD;QAAQ,OAAM;kBAAG;QAAW,CAAA,EACtC,EAAa,KAAK,MACjB,kBAAC,UAAD;QAAgB,OAAO;kBACpB,EAAO,EAAE;QACH,EAFI,EAEJ,CACT,CACK;;MAGR,MAAe,SACd,kBAAC,UAAD;OACE,OAAO,IAAQ,IAAO;OACtB,WAAW,MACT,EAAiB,EAAE,OAAO,MAAqB;OAEjD,WAAW;OACX,cAAW;iBANb;QAQG,CAAC,KAAS,kBAAC,UAAD;SAAQ,OAAM;mBAAG;SAAW,CAAA;QACvC,kBAAC,UAAD;SAAQ,OAAM;mBAAK;SAAW,CAAA;QAC9B,kBAAC,UAAD;SAAQ,OAAM;mBAAK;SAAW,CAAA;QACvB;;MAEP;OAEJ;;GACS,CAAA,CACT;;EAGb;AAED,EAAe,cAAc;;;ACrR7B,SAAS,EAAc,GAAe,GAAa,GAAwB;CACzE,IAAM,IAAmB,EAAE;AAC3B,MAAK,IAAI,IAAI,GAAO,KAAK,GAAK,KAAK,EACjC,GAAO,KAAK,EAAE;AAEhB,QAAO;;AAGT,SAAS,EAAO,GAAmB;AACjC,QAAO,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI;;AAGtC,IAAM,IAAa,EAAM,WACvB,SACE,EACE,UACA,aACA,QAAQ,IAAa,OACrB,gBAAa,GACb,gBAAa,GACb,iBAAc,IACd,iBAAc,eACd,cACA,cAAW,IACX,GAAG,KAEL,GACA;CACF,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EAGvC,IAAU,IAAQ,EAAM,UAAU,GAAG,MACrC,IAAU,IAAQ,EAAM,YAAY,GAAG,MACvC,IAAU,IAAQ,EAAM,YAAY,GAAG,MACvC,IAAO,MAAY,OAAuC,OAA/B,KAAW,KAAK,OAAO,MAGlD,IACJ,MAAY,OAMR,OALA,MAAY,IACV,KACA,IAAU,KACR,IAAU,KACV,GAGJ,IACJ,MAAe,QAAQ,EAAc,GAAG,IAAI,EAAE,GAAG,EAAc,GAAG,IAAI,EAAE,EACpE,IAAe,EAAc,GAAG,IAAI,EAAW,EAC/C,IAAe,EAAc,GAAG,IAAI,EAAW,EAE/C,KACJ,MACS;EACT,IAAM,IAAO,IAAQ,IAAI,KAAK,EAAM,mBAAG,IAAI,MAAM,EAE7C,IAAI,EAAU,SAAS,EAAK,UAAU,EACpC,IAAI,EAAU,WAAW,EAAK,YAAY,EAC1C,IAAI,EAAU,WAAW,EAAK,YAAY;AAGhD,EAAI,MAAe,SAAS,EAAU,UAAU,KAAA,MAE9C,AAGE,KAJkB,EAAU,QAAQ,KAAQ,UAC1B,OACd,EAAU,UAAU,KAAK,IAAI,EAAU,QAEvC,EAAU,UAAU,KAAK,KAAK,EAAU,QAAQ;EAIxD,IAAI,IAAS,EAAS,GAAM,EAAE;AAG9B,SAFA,IAAS,EAAW,GAAQ,EAAE,EAC9B,IAAS,EAAW,GAAQ,EAAE,EACvB;IAGH,KAAoB,MAAiB;EACzC,IAAM,IAAU,EAAmB,EAAE,OAAO,GAAM,CAAC;AACnD,MAAW,EAAQ;IAGf,KAAsB,MAAmB;EAC7C,IAAM,IAAU,EAAmB,EAAE,SAAS,GAAQ,CAAC;AACvD,MAAW,EAAQ;IAGf,KAAsB,MAAmB;EAC7C,IAAM,IAAU,EAAmB,EAAE,SAAS,GAAQ,CAAC;AACvD,MAAW,EAAQ;IAGf,KAAoB,MAAwB;AAChD,MAAI,CAAC,GAAO;GAEV,IAAM,IAAI,MAAW,OAAO,IAAI,IAC5B,oBAAI,IAAI,MAAM;AAIlB,GAHA,IAAI,EAAS,GAAG,EAAE,EAClB,IAAI,EAAW,GAAG,EAAE,EACpB,IAAI,EAAW,GAAG,EAAE,EACpB,IAAW,EAAE;AACb;;EAGF,IAAM,IAAW,EAAM,UAAU,EAC7B;AAQJ,EANA,AAGE,IAHE,MAAW,OACN,KAAY,KAAK,IAAW,KAAK,IAEjC,IAAW,KAAK,IAAW,KAAK,GAGzC,IAAW,EAAS,IAAI,KAAK,EAAM,EAAE,EAAK,CAAC;IAIvC,IAAc,EAAM,cACnB,IACD,MAAe,QAEV,EAAO,GADF,IAAc,cAAc,SACf,GAGpB,EAAO,GADF,IAAc,aAAa,QACd,GANN,MAOlB;EAAC;EAAO;EAAY;EAAY,CAAC,EAE9B,IAAe,MAAe,QAAQ,IAAU,GAEhD,IACJ,kEAEI,IACJ,uJACI,IACJ,8BACI,IACJ;AAEF,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACO;IACL,MAAK;IACK;IACV,GAAI;IACJ,WAAW,EACT,uMACA,sCACA,6GACA,KAAY,+CACZ,EACD;IACD,cAAY,IAAc,kBAAkB,MAAgB;cAZ9D,CAcE,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAK;KAAK,QAAO;KAAQ,WAAU;KAA2B,CAAA,EACrF,kBAAC,QAAD;KACE,WAAW,EACT,cACA,IACI,oBACA,yBACL;eAEA,KAAe;KACX,CAAA,CACA;;GACM,CAAA,EACjB,kBAAC,GAAD;GACE,WAAU;GACV,OAAM;GACN,YAAY;aAEZ,kBAAC,OAAD;IAAK,WAAU;IAAiB,MAAK;IAAQ,cAAW;cAAxD;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAA2E;OAEpF,CAAA,EACP,kBAAC,OAAD;OAAK,WAAW,EAAG,GAAa,eAAe;iBAC5C,EAAW,KAAK,MACf,kBAAC,UAAD;QAEE,MAAK;QACL,eAAe,EAAiB,EAAE;QAClC,WAAW,EACT,GACA,MAAiB,IAAI,IAAe,EACrC;QACD,cAAY,GAAG,EAAE;QACjB,iBAAe,MAAiB,KAAK,KAAA;kBAEpC,MAAe,QAAQ,EAAO,EAAE,GAAG;QAC7B,EAXF,EAWE,CACT;OACE,CAAA,CACF;;KAGN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAA2E;OAEpF,CAAA,EACP,kBAAC,OAAD;OAAK,WAAW,EAAG,GAAa,eAAe;iBAC5C,EAAa,KAAK,MACjB,kBAAC,UAAD;QAEE,MAAK;QACL,eAAe,EAAmB,EAAE;QACpC,WAAW,EACT,GACA,MAAY,IAAI,IAAe,EAChC;QACD,cAAY,GAAG,EAAO,EAAE,CAAC;QACzB,iBAAe,MAAY,KAAK,KAAA;kBAE/B,EAAO,EAAE;QACH,EAXF,EAWE,CACT;OACE,CAAA,CACF;;KAGL,KACC,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAA2E;OAEpF,CAAA,EACP,kBAAC,OAAD;OAAK,WAAW,EAAG,GAAa,eAAe;iBAC5C,EAAa,KAAK,MACjB,kBAAC,UAAD;QAEE,MAAK;QACL,eAAe,EAAmB,EAAE;QACpC,WAAW,EACT,GACA,MAAY,IAAI,IAAe,EAChC;QACD,cAAY,GAAG,EAAO,EAAE,CAAC;QACzB,iBAAe,MAAY,KAAK,KAAA;kBAE/B,EAAO,EAAE;QACH,EAXF,EAWE,CACT;OACE,CAAA,CACF;;KAIP,MAAe,SACd,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAA2E;OAEpF,CAAA,EACP,kBAAC,OAAD;OAAK,WAAU;iBACX,CAAC,MAAM,KAAK,CAAW,KAAK,MAC5B,kBAAC,UAAD;QAEE,MAAK;QACL,eAAe,EAAiB,EAAO;QACvC,WAAW,EACT,GACA,8BACA,MAAS,IAAS,IAAe,EAClC;QACD,cAAY;QACZ,iBAAe,MAAS,KAAU,KAAA;kBAEjC;QACM,EAZF,EAYE,CACT;OACE,CAAA,CACF;;KAEJ;;GACS,CAAA,CACT;;EAGb;AAED,EAAW,cAAc"}
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../src/composed/date-picker/month-picker.tsx","../../src/composed/date-picker/year-picker.tsx","../../src/composed/date-picker/date-picker.tsx","../../src/composed/date-picker/presets.tsx","../../src/composed/date-picker/date-range-picker.tsx","../../src/composed/date-picker/date-time-picker.tsx","../../src/composed/date-picker/time-picker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nconst MONTHS = [\n  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',\n]\n\nexport interface MonthPickerProps extends React.ComponentPropsWithoutRef<'div'> {\n  currentYear: number\n  selectedMonth?: number // 0-11\n  onMonthSelect: (month: number) => void\n  minDate?: Date\n  maxDate?: Date\n}\n\nexport const MonthPicker = React.forwardRef<HTMLDivElement, MonthPickerProps>(\n  function MonthPicker({\n  currentYear,\n  selectedMonth,\n  onMonthSelect,\n  minDate,\n  maxDate,\n  className,\n  ...props\n}, ref) {\n  const COLS = 4\n  const [focusedIndex, setFocusedIndex] = React.useState(selectedMonth ?? 0)\n  const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const isMonthDisabled = (index: number) =>\n    (minDate != null &&\n      (currentYear < minDate.getFullYear() ||\n        (currentYear === minDate.getFullYear() && index < minDate.getMonth()))) ||\n    (maxDate != null &&\n      (currentYear > maxDate.getFullYear() ||\n        (currentYear === maxDate.getFullYear() && index > maxDate.getMonth())))\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    let next = focusedIndex\n    switch (e.key) {\n      case 'ArrowRight': next = Math.min(11, focusedIndex + 1); break\n      case 'ArrowLeft': next = Math.max(0, focusedIndex - 1); break\n      case 'ArrowDown': next = Math.min(11, focusedIndex + COLS); break\n      case 'ArrowUp': next = Math.max(0, focusedIndex - COLS); break\n      case 'Home': next = 0; break\n      case 'End': next = 11; break\n      default: return\n    }\n    e.preventDefault()\n    // Skip disabled months\n    while (next !== focusedIndex && isMonthDisabled(next)) {\n      next += (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ? -1 : 1\n      if (next < 0 || next > 11) return\n    }\n    setFocusedIndex(next)\n    buttonRefs.current[next]?.focus()\n  }\n\n  return (\n    <div ref={ref} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"text-center pb-ds-04 text-ds-md font-semibold text-surface-fg\">\n        {currentYear}\n      </div>\n      <div role=\"grid\" aria-label=\"Month picker\" tabIndex={-1} onKeyDown={handleKeyDown}>\n        {[0, 1, 2].map((rowIdx) => (\n          <div key={rowIdx} role=\"row\" className=\"grid grid-cols-4 gap-ds-02 mb-ds-02 last:mb-0\">\n            {MONTHS.slice(rowIdx * COLS, rowIdx * COLS + COLS).map((label, colIdx) => {\n              const index = rowIdx * COLS + colIdx\n              const isSelected = index === selectedMonth\n              const isDisabled = isMonthDisabled(index)\n\n              return (\n                <button\n                  key={label}\n                  ref={(el) => { buttonRefs.current[index] = el }}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  tabIndex={index === focusedIndex ? 0 : -1}\n                  disabled={isDisabled || false}\n                  onClick={() => !isDisabled && onMonthSelect(index)}\n                  className={cn(\n                    'h-ds-sm-plus rounded-control text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                    isDisabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                    isSelected &&\n                      'bg-accent-9 text-accent-fg',\n                    !isSelected &&\n                      !isDisabled &&\n                      'hover:bg-surface-raised-hover text-surface-fg',\n                  )}\n                >\n                  {label}\n                </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nMonthPicker.displayName = 'MonthPicker'\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nexport interface YearPickerProps extends React.ComponentPropsWithoutRef<'div'> {\n  currentYear: number\n  selectedYear?: number\n  onYearSelect: (year: number) => void\n  minDate?: Date\n  maxDate?: Date\n}\n\nexport const YearPicker = React.forwardRef<HTMLDivElement, YearPickerProps>(\n  function YearPicker({\n  currentYear,\n  selectedYear,\n  onYearSelect,\n  minDate,\n  maxDate,\n  className,\n  ...props\n}, ref) {\n  const COLS = 3\n  const startYear = Math.floor(currentYear / 10) * 10\n  const years = Array.from({ length: 12 }, (_, i) => startYear + i)\n  const [focusedIndex, setFocusedIndex] = React.useState(() => {\n    const sel = years.indexOf(selectedYear ?? currentYear)\n    return sel >= 0 ? sel : 0\n  })\n  const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const isYearDisabled = (year: number) =>\n    (minDate != null && year < minDate.getFullYear()) ||\n    (maxDate != null && year > maxDate.getFullYear())\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    let next = focusedIndex\n    switch (e.key) {\n      case 'ArrowRight': next = Math.min(11, focusedIndex + 1); break\n      case 'ArrowLeft': next = Math.max(0, focusedIndex - 1); break\n      case 'ArrowDown': next = Math.min(11, focusedIndex + COLS); break\n      case 'ArrowUp': next = Math.max(0, focusedIndex - COLS); break\n      case 'Home': next = 0; break\n      case 'End': next = 11; break\n      default: return\n    }\n    e.preventDefault()\n    while (next !== focusedIndex && isYearDisabled(years[next])) {\n      next += (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ? -1 : 1\n      if (next < 0 || next > 11) return\n    }\n    setFocusedIndex(next)\n    buttonRefs.current[next]?.focus()\n  }\n\n  return (\n    <div ref={ref} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"text-center pb-ds-04 text-ds-md font-semibold text-surface-fg\">\n        {startYear} &ndash; {startYear + 11}\n      </div>\n      <div role=\"grid\" aria-label=\"Year picker\" tabIndex={-1} onKeyDown={handleKeyDown}>\n        {[0, 1, 2, 3].map((rowIdx) => (\n          <div key={rowIdx} role=\"row\" className=\"grid grid-cols-3 gap-ds-02 mb-ds-02 last:mb-0\">\n            {years.slice(rowIdx * COLS, rowIdx * COLS + COLS).map((year) => {\n              const index = years.indexOf(year)\n              const isSelected = year === selectedYear\n              const isDisabled = isYearDisabled(year)\n\n              return (\n                <button\n                  key={year}\n                  ref={(el) => { buttonRefs.current[index] = el }}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  tabIndex={index === focusedIndex ? 0 : -1}\n                  disabled={isDisabled || false}\n                  onClick={() => !isDisabled && onYearSelect(year)}\n                  className={cn(\n                    'h-ds-sm-plus rounded-control text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                    isDisabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                    isSelected &&\n                      'bg-accent-9 text-accent-fg',\n                    !isSelected &&\n                      !isDisabled &&\n                      'hover:bg-surface-raised-hover text-surface-fg',\n                  )}\n                >\n                  {year}\n                </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nYearPicker.displayName = 'YearPicker'\n","'use client'\n\nimport { IconCalendarEvent } from '@tabler/icons-react'\nimport { format, setMonth, setYear } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\n/**\n * A popover-based date picker with day/month/year drill-down views.\n * Supports min/max date constraints and arbitrary date disabling.\n */\nexport interface DatePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** Currently selected date (controlled). */\n  value?: Date | null\n  /** Called when a date is selected. Receives null if cleared. */\n  onChange?: (date: Date | null) => void\n  placeholder?: string\n  /** date-fns format string for the trigger display. @default 'MMM d, yyyy' */\n  formatStr?: string\n  /** Earliest selectable date. */\n  minDate?: Date\n  /** Latest selectable date. */\n  maxDate?: Date\n  /** Predicate to disable specific dates (return true to disable). */\n  disabledDates?: (date: Date) => boolean\n  className?: string\n}\n\nconst DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\n  function DatePicker(\n    {\n      value,\n      onChange,\n      placeholder = 'Pick a date',\n      className,\n      formatStr = 'MMM d, yyyy',\n      minDate,\n      maxDate,\n      disabledDates,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    value ?? new Date(),\n  )\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  const handleSelect = (date: Date) => {\n    onChange?.(date)\n    setOpen(false)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={value?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={value?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return (\n          <CalendarGrid\n            currentMonth={currentMonth}\n            selected={value}\n            onSelect={handleSelect}\n            onMonthChange={setCurrentMonth}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n    }\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          aria-label={value ? `Change date, ${format(value, formatStr)}` : placeholder}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-surface border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n        >\n          <Icon icon={IconCalendarEvent} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              value\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {value ? format(value, formatStr) : placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        {renderView()}\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n","'use client'\n\nimport {\n  endOfDay,\n  endOfMonth,\n  startOfDay,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { cn } from '../../ui/lib/utils'\n\nexport type PresetKey =\n  | 'today'\n  | 'yesterday'\n  | 'last7days'\n  | 'last30days'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisYear'\n\nexport interface PresetsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  presets: PresetKey[]\n  onSelect: (start: Date, end: Date) => void\n  className?: string\n}\n\ninterface PresetDefinition {\n  label: string\n  getRange: () => { start: Date; end: Date }\n}\n\nconst PRESET_MAP: Record<PresetKey, PresetDefinition> = {\n  today: {\n    label: 'Today',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(now), end: endOfDay(now) }\n    },\n  },\n  yesterday: {\n    label: 'Yesterday',\n    getRange: () => {\n      const yesterday = subDays(new Date(), 1)\n      return { start: startOfDay(yesterday), end: endOfDay(yesterday) }\n    },\n  },\n  last7days: {\n    label: 'Last 7 days',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(subDays(now, 6)), end: endOfDay(now) }\n    },\n  },\n  last30days: {\n    label: 'Last 30 days',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfDay(subDays(now, 29)), end: endOfDay(now) }\n    },\n  },\n  thisMonth: {\n    label: 'This month',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfMonth(now), end: endOfMonth(now) }\n    },\n  },\n  lastMonth: {\n    label: 'Last month',\n    getRange: () => {\n      const now = new Date()\n      const last = subMonths(now, 1)\n      return { start: startOfMonth(last), end: endOfMonth(last) }\n    },\n  },\n  thisYear: {\n    label: 'This year',\n    getRange: () => {\n      const now = new Date()\n      return { start: startOfYear(now), end: endOfDay(now) }\n    },\n  },\n}\n\nexport const Presets = React.forwardRef<HTMLDivElement, PresetsProps>(\n  function Presets({ presets, onSelect, className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex flex-col gap-ds-01', className)}>\n      {presets.map((key) => {\n        const preset = PRESET_MAP[key]\n        if (!preset) return null\n        return (\n          <button\n            key={key}\n            type=\"button\"\n            onClick={() => {\n              const { start, end } = preset.getRange()\n              onSelect(start, end)\n            }}\n            className={cn(\n              'h-ds-sm w-full rounded-control px-ds-03 text-left text-ds-sm',\n              'text-surface-fg transition-colors',\n              'hover:bg-surface-raised-hover',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            )}\n          >\n            {preset.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n},\n)\n\nPresets.displayName = 'Presets'\n","'use client'\n\nimport { IconCalendarEvent } from '@tabler/icons-react'\nimport { addMonths,format, isAfter, isBefore, setMonth, setYear } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport type { PresetKey } from './presets'\nimport { Presets } from './presets'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\nexport interface DateRangePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange'> {\n  startDate?: Date | null\n  endDate?: Date | null\n  onChange?: (range: { start: Date | null; end: Date | null }) => void\n  placeholder?: string\n  className?: string\n  formatStr?: string\n  minDate?: Date\n  maxDate?: Date\n  disabledDates?: (date: Date) => boolean\n  /** Show a presets sidebar with quick date range selections */\n  presets?: PresetKey[]\n  /** Number of calendar months to display side by side (default: 1) */\n  numberOfMonths?: number\n}\n\nconst DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      startDate,\n      endDate,\n      onChange,\n      placeholder = 'Pick a date range',\n      className,\n      formatStr = 'MMM d, yyyy',\n      minDate,\n      maxDate,\n      disabledDates,\n      presets,\n      numberOfMonths = 1,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    startDate ?? new Date(),\n  )\n  const [rangeStart, setRangeStart] = React.useState<Date | null>(\n    startDate ?? null,\n  )\n  const [rangeEnd, setRangeEnd] = React.useState<Date | null>(\n    endDate ?? null,\n  )\n  const [hoverDate, setHoverDate] = React.useState<Date | null>(null)\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  const monthCount = Math.max(1, numberOfMonths)\n\n  React.useEffect(() => {\n    setRangeStart(startDate ?? null)\n    setRangeEnd(endDate ?? null)\n  }, [startDate, endDate])\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  const handleSelect = (date: Date) => {\n    if (!rangeStart || (rangeStart && rangeEnd)) {\n      setRangeStart(date)\n      setRangeEnd(null)\n    } else {\n      const start = isBefore(date, rangeStart) ? date : rangeStart\n      const end = isAfter(date, rangeStart) ? date : rangeStart\n      setRangeStart(start)\n      setRangeEnd(end)\n      onChange?.({ start, end })\n      setOpen(false)\n    }\n  }\n\n  const handlePresetSelect = (start: Date, end: Date) => {\n    setRangeStart(start)\n    setRangeEnd(end)\n    onChange?.({ start, end })\n    setOpen(false)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  const displayText = () => {\n    if (rangeStart && rangeEnd) {\n      return `${format(rangeStart, formatStr)} - ${format(rangeEnd, formatStr)}`\n    }\n    return placeholder\n  }\n\n  const renderCalendarGrids = () => {\n    if (monthCount === 1) {\n      return (\n        <CalendarGrid\n          currentMonth={currentMonth}\n          rangeStart={rangeStart}\n          rangeEnd={rangeEnd}\n          hoverDate={hoverDate}\n          onSelect={handleSelect}\n          onHover={setHoverDate}\n          onMonthChange={setCurrentMonth}\n          onHeaderClick={handleHeaderClick}\n          disabledDates={disabledDates}\n          minDate={minDate}\n          maxDate={maxDate}\n        />\n      )\n    }\n\n    return (\n      <div className=\"flex flex-row gap-ds-04\">\n        {Array.from({ length: monthCount }, (_, i) => (\n          <CalendarGrid\n            key={i}\n            currentMonth={addMonths(currentMonth, i)}\n            rangeStart={rangeStart}\n            rangeEnd={rangeEnd}\n            hoverDate={hoverDate}\n            onSelect={handleSelect}\n            onHover={setHoverDate}\n            onMonthChange={(date) => {\n              // Adjust so the first grid stays in sync\n              setCurrentMonth(addMonths(date, -i))\n            }}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n            hidePrevNav={i > 0}\n            hideNextNav={i < monthCount - 1}\n          />\n        ))}\n      </div>\n    )\n  }\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={rangeStart?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={rangeStart?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return renderCalendarGrids()\n    }\n  }\n\n  const hasPresets = presets && presets.length > 0\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          aria-label={rangeStart && rangeEnd ? `Change date range, ${displayText()}` : placeholder}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-surface border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n        >\n          <Icon icon={IconCalendarEvent} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              rangeStart && rangeEnd\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText()}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        {hasPresets ? (\n          <div className=\"flex flex-row gap-ds-04\">\n            <div className=\"min-w-[140px] border-r border-surface-border-strong pr-ds-04\">\n              <Presets presets={presets} onSelect={handlePresetSelect} />\n            </div>\n            <div>{renderView()}</div>\n          </div>\n        ) : (\n          renderView()\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDateRangePicker.displayName = 'DateRangePicker'\n\nexport { DateRangePicker }\n","'use client'\n\nimport { IconCalendarClock } from '@tabler/icons-react'\nimport {\n  format,\n  setHours,\n  setMinutes,\n  setMonth,\n  setYear,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\nimport { CalendarGrid } from './calendar-grid'\nimport { MonthPicker } from './month-picker'\nimport { YearPicker } from './year-picker'\n\ntype CalendarView = 'days' | 'months' | 'years'\n\nexport interface DateTimePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** The currently selected date and time. */\n  value?: Date | null\n  /** Callback fired when the date/time changes. */\n  onChange?: (date: Date | null) => void\n  /** Earliest selectable date. */\n  minDate?: Date\n  /** Latest selectable date. */\n  maxDate?: Date\n  /** Function to disable specific dates. */\n  disabledDates?: (date: Date) => boolean\n  /** Display format for the time portion: 12-hour with AM/PM or 24-hour. */\n  timeFormat?: '12h' | '24h'\n  /** Step interval for the minute selector. */\n  minuteStep?: number\n  /** Placeholder text when no value is set. */\n  placeholder?: string\n  /** Additional class names for the trigger button. */\n  className?: string\n}\n\nfunction padTwo(n: number): string {\n  return n.toString().padStart(2, '0')\n}\n\nfunction generateRange(start: number, end: number, step: number): number[] {\n  const result: number[] = []\n  for (let i = start; i <= end; i += step) {\n    result.push(i)\n  }\n  return result\n}\n\nconst DateTimePicker = React.forwardRef<HTMLButtonElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      minDate,\n      maxDate,\n      disabledDates,\n      timeFormat = '12h',\n      minuteStep = 1,\n      placeholder = 'Pick date & time',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n  const [currentMonth, setCurrentMonth] = React.useState(value ?? new Date())\n  const [view, setView] = React.useState<CalendarView>('days')\n\n  // Reset view when popover closes\n  React.useEffect(() => {\n    if (!open) setView('days')\n  }, [open])\n\n  // Derive time parts\n  const hours24 = value ? value.getHours() : 0\n  const minutes = value ? value.getMinutes() : 0\n  const ampm: 'AM' | 'PM' = hours24 >= 12 ? 'PM' : 'AM'\n  const hours12 = hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24\n\n  const hoursRange =\n    timeFormat === '12h' ? generateRange(1, 12, 1) : generateRange(0, 23, 1)\n  const minutesRange = generateRange(0, 59, minuteStep)\n\n  const selectedHour = timeFormat === '12h' ? hours12 : hours24\n\n  // --- Calendar view handlers ---\n\n  const handleDateSelect = (date: Date) => {\n    // Merge with existing time part (or default to current time parts)\n    let merged = setHours(date, value ? value.getHours() : hours24)\n    merged = setMinutes(merged, value ? value.getMinutes() : minutes)\n    onChange?.(merged)\n  }\n\n  const handleHeaderClick = () => {\n    setView((prev) => (prev === 'days' ? 'months' : 'years'))\n  }\n\n  const handleMonthSelect = (month: number) => {\n    setCurrentMonth((prev) => setMonth(prev, month))\n    setView('days')\n  }\n\n  const handleYearSelect = (year: number) => {\n    setCurrentMonth((prev) => setYear(prev, year))\n    setView('months')\n  }\n\n  // --- Time handlers ---\n\n  const handleHourChange = (hour: number) => {\n    const base = value ? new Date(value) : new Date()\n    let h = hour\n\n    if (timeFormat === '12h') {\n      const currentAmPm = value ? ampm : 'AM'\n      if (currentAmPm === 'AM') {\n        h = hour === 12 ? 0 : hour\n      } else {\n        h = hour === 12 ? 12 : hour + 12\n      }\n    }\n\n    const updated = setHours(base, h)\n    onChange?.(updated)\n  }\n\n  const handleMinuteChange = (minute: number) => {\n    const base = value ? new Date(value) : new Date()\n    const updated = setMinutes(base, minute)\n    onChange?.(updated)\n  }\n\n  const handleAmPmToggle = (period: 'AM' | 'PM') => {\n    const base = value ? new Date(value) : new Date()\n    const currentH = base.getHours()\n    let newH: number\n\n    if (period === 'AM') {\n      newH = currentH >= 12 ? currentH - 12 : currentH\n    } else {\n      newH = currentH < 12 ? currentH + 12 : currentH\n    }\n\n    onChange?.(setHours(base, newH))\n  }\n\n  // --- Display text ---\n\n  const displayText = React.useMemo(() => {\n    if (!value) return null\n    const fmt =\n      timeFormat === '12h' ? 'MMM d, yyyy h:mm a' : 'MMM d, yyyy HH:mm'\n    return format(value, fmt)\n  }, [value, timeFormat])\n\n  // --- Render calendar view ---\n\n  const renderView = () => {\n    switch (view) {\n      case 'years':\n        return (\n          <YearPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedYear={value?.getFullYear()}\n            onYearSelect={handleYearSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      case 'months':\n        return (\n          <MonthPicker\n            currentYear={currentMonth.getFullYear()}\n            selectedMonth={value?.getMonth()}\n            onMonthSelect={handleMonthSelect}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n      default:\n        return (\n          <CalendarGrid\n            currentMonth={currentMonth}\n            selected={value}\n            onSelect={handleDateSelect}\n            onMonthChange={setCurrentMonth}\n            onHeaderClick={handleHeaderClick}\n            disabledDates={disabledDates}\n            minDate={minDate}\n            maxDate={maxDate}\n          />\n        )\n    }\n  }\n\n  // Compact time selector styles\n  const selectBase =\n    'h-ds-sm rounded-control border border-surface-border-strong bg-surface-overlay px-ds-02 text-ds-md text-surface-fg transition-colors duration-fast-01 ease-productive-standard hover:border-surface-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 cursor-pointer appearance-none'\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-surface border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            className,\n          )}\n          aria-label={displayText ? `Selected: ${displayText}` : placeholder}\n        >\n          <Icon icon={IconCalendarClock} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              displayText\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText ?? placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        <div className=\"flex flex-col gap-ds-04\">\n          {/* Calendar portion */}\n          {renderView()}\n\n          {/* Time selection row */}\n          {view === 'days' && (\n            <div className=\"flex items-center gap-ds-02 border-t border-surface-border-strong pt-ds-04\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                Time\n              </span>\n\n              {/* Hour select */}\n              <select\n                value={selectedHour ?? ''}\n                onChange={(e) => handleHourChange(Number(e.target.value))}\n                className={selectBase}\n                aria-label=\"Hour\"\n              >\n                {!value && <option value=\"\">--</option>}\n                {hoursRange.map((h) => (\n                  <option key={h} value={h}>\n                    {timeFormat === '24h' ? padTwo(h) : h}\n                  </option>\n                ))}\n              </select>\n\n              <span className=\"text-ds-md font-semibold text-surface-fg-subtle\">\n                :\n              </span>\n\n              {/* Minute select */}\n              <select\n                value={value ? minutes : ''}\n                onChange={(e) => handleMinuteChange(Number(e.target.value))}\n                className={selectBase}\n                aria-label=\"Minute\"\n              >\n                {!value && <option value=\"\">--</option>}\n                {minutesRange.map((m) => (\n                  <option key={m} value={m}>\n                    {padTwo(m)}\n                  </option>\n                ))}\n              </select>\n\n              {/* AM/PM toggle for 12h */}\n              {timeFormat === '12h' && (\n                <select\n                  value={value ? ampm : ''}\n                  onChange={(e) =>\n                    handleAmPmToggle(e.target.value as 'AM' | 'PM')\n                  }\n                  className={selectBase}\n                  aria-label=\"AM or PM\"\n                >\n                  {!value && <option value=\"\">--</option>}\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              )}\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nDateTimePicker.displayName = 'DateTimePicker'\n\nexport { DateTimePicker }\n","'use client'\n\nimport { IconClock } from '@tabler/icons-react'\nimport { format, setHours, setMinutes, setSeconds } from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../ui/popover'\n\nexport interface TimePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value'> {\n  /** The currently selected time (as a Date object). */\n  value?: Date | null\n  /** Callback fired when the time changes. */\n  onChange?: (date: Date) => void\n  /** Display format: 12-hour with AM/PM or 24-hour. */\n  format?: '12h' | '24h'\n  /** Step interval for minutes column. */\n  minuteStep?: number\n  /** Step interval for seconds column. */\n  secondStep?: number\n  /** Whether to show the seconds column. */\n  showSeconds?: boolean\n  /** Placeholder text when no value is set. */\n  placeholder?: string\n  /** Additional class names for the trigger button. */\n  className?: string\n  /** Whether the picker is disabled. */\n  disabled?: boolean\n}\n\nfunction generateRange(start: number, end: number, step: number): number[] {\n  const result: number[] = []\n  for (let i = start; i <= end; i += step) {\n    result.push(i)\n  }\n  return result\n}\n\nfunction padTwo(n: number): string {\n  return n.toString().padStart(2, '0')\n}\n\nconst TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      format: timeFormat = '12h',\n      minuteStep = 1,\n      secondStep = 1,\n      showSeconds = false,\n      placeholder = 'Pick a time',\n      className,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) {\n  const [open, setOpen] = React.useState(false)\n\n  // Derive display parts from value\n  const hours24 = value ? value.getHours() : null\n  const minutes = value ? value.getMinutes() : null\n  const seconds = value ? value.getSeconds() : null\n  const ampm = hours24 !== null ? (hours24 >= 12 ? 'PM' : 'AM') : null\n\n  // For 12h display, convert 24h to 12h\n  const hours12 =\n    hours24 !== null\n      ? hours24 === 0\n        ? 12\n        : hours24 > 12\n          ? hours24 - 12\n          : hours24\n      : null\n\n  const hoursRange =\n    timeFormat === '12h' ? generateRange(1, 12, 1) : generateRange(0, 23, 1)\n  const minutesRange = generateRange(0, 59, minuteStep)\n  const secondsRange = generateRange(0, 59, secondStep)\n\n  const createOrUpdateDate = (\n    overrides: { hours?: number; minutes?: number; seconds?: number; ampm?: 'AM' | 'PM' },\n  ): Date => {\n    const base = value ? new Date(value) : new Date()\n\n    let h = overrides.hours ?? base.getHours()\n    const m = overrides.minutes ?? base.getMinutes()\n    const s = overrides.seconds ?? base.getSeconds()\n\n    // If we're in 12h mode, we need to convert the 12h value to 24h\n    if (timeFormat === '12h' && overrides.hours !== undefined) {\n      const currentAmPm = overrides.ampm ?? ampm ?? 'AM'\n      if (currentAmPm === 'AM') {\n        h = overrides.hours === 12 ? 0 : overrides.hours\n      } else {\n        h = overrides.hours === 12 ? 12 : overrides.hours + 12\n      }\n    }\n\n    let result = setHours(base, h)\n    result = setMinutes(result, m)\n    result = setSeconds(result, s)\n    return result\n  }\n\n  const handleHourSelect = (hour: number) => {\n    const updated = createOrUpdateDate({ hours: hour })\n    onChange?.(updated)\n  }\n\n  const handleMinuteSelect = (minute: number) => {\n    const updated = createOrUpdateDate({ minutes: minute })\n    onChange?.(updated)\n  }\n\n  const handleSecondSelect = (second: number) => {\n    const updated = createOrUpdateDate({ seconds: second })\n    onChange?.(updated)\n  }\n\n  const handleAmPmToggle = (period: 'AM' | 'PM') => {\n    if (!value) {\n      // Create a date with 12:00 in the chosen period\n      const h = period === 'AM' ? 0 : 12\n      let d = new Date()\n      d = setHours(d, h)\n      d = setMinutes(d, 0)\n      d = setSeconds(d, 0)\n      onChange?.(d)\n      return\n    }\n\n    const currentH = value.getHours()\n    let newH: number\n\n    if (period === 'AM') {\n      newH = currentH >= 12 ? currentH - 12 : currentH\n    } else {\n      newH = currentH < 12 ? currentH + 12 : currentH\n    }\n\n    onChange?.(setHours(new Date(value), newH))\n  }\n\n  // Format display string\n  const displayText = React.useMemo(() => {\n    if (!value) return null\n    if (timeFormat === '12h') {\n      const fmt = showSeconds ? 'h:mm:ss a' : 'h:mm a'\n      return format(value, fmt)\n    }\n    const fmt = showSeconds ? 'HH:mm:ss' : 'HH:mm'\n    return format(value, fmt)\n  }, [value, timeFormat, showSeconds])\n\n  const selectedHour = timeFormat === '12h' ? hours12 : hours24\n\n  const columnClass =\n    'flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01'\n\n  const itemBase =\n    'flex h-ds-sm w-full items-center justify-center rounded-control text-ds-md transition-colors duration-fast-01 ease-productive-standard cursor-pointer'\n  const itemSelected =\n    'bg-accent-9 text-accent-fg'\n  const itemDefault =\n    'text-surface-fg hover:bg-surface-raised-hover'\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={disabled}\n          {...props}\n          className={cn(\n            'inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-surface border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:border-surface-border-strong',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n            disabled && 'opacity-action-disabled pointer-events-none',\n            className,\n          )}\n          aria-label={displayText ? `Selected time: ${displayText}` : placeholder}\n        >\n          <Icon icon={IconClock} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n          <span\n            className={cn(\n              'text-ds-md',\n              displayText\n                ? 'text-surface-fg'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            {displayText ?? placeholder}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-auto border-surface-border-strong bg-surface-overlay p-ds-04\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        <div className=\"flex gap-ds-03\" role=\"group\" aria-label=\"Time picker\">\n          {/* Hours column */}\n          <div className=\"flex flex-col items-center gap-ds-02\">\n            <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n              Hr\n            </span>\n            <div className={cn(columnClass, 'min-w-[48px]')}>\n              {hoursRange.map((h) => (\n                <button\n                  key={h}\n                  type=\"button\"\n                  onClick={() => handleHourSelect(h)}\n                  className={cn(\n                    itemBase,\n                    selectedHour === h ? itemSelected : itemDefault,\n                  )}\n                  aria-label={`${h} hours`}\n                  aria-selected={selectedHour === h || undefined}\n                >\n                  {timeFormat === '24h' ? padTwo(h) : h}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Minutes column */}\n          <div className=\"flex flex-col items-center gap-ds-02\">\n            <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n              Min\n            </span>\n            <div className={cn(columnClass, 'min-w-[48px]')}>\n              {minutesRange.map((m) => (\n                <button\n                  key={m}\n                  type=\"button\"\n                  onClick={() => handleMinuteSelect(m)}\n                  className={cn(\n                    itemBase,\n                    minutes === m ? itemSelected : itemDefault,\n                  )}\n                  aria-label={`${padTwo(m)} minutes`}\n                  aria-selected={minutes === m || undefined}\n                >\n                  {padTwo(m)}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Seconds column */}\n          {showSeconds && (\n            <div className=\"flex flex-col items-center gap-ds-02\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                Sec\n              </span>\n              <div className={cn(columnClass, 'min-w-[48px]')}>\n                {secondsRange.map((s) => (\n                  <button\n                    key={s}\n                    type=\"button\"\n                    onClick={() => handleSecondSelect(s)}\n                    className={cn(\n                      itemBase,\n                      seconds === s ? itemSelected : itemDefault,\n                    )}\n                    aria-label={`${padTwo(s)} seconds`}\n                    aria-selected={seconds === s || undefined}\n                  >\n                    {padTwo(s)}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* AM/PM toggle for 12h format */}\n          {timeFormat === '12h' && (\n            <div className=\"flex flex-col items-center gap-ds-02\">\n              <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                &nbsp;\n              </span>\n              <div className=\"flex flex-col gap-ds-01 px-ds-01\">\n                {(['AM', 'PM'] as const).map((period) => (\n                  <button\n                    key={period}\n                    type=\"button\"\n                    onClick={() => handleAmPmToggle(period)}\n                    className={cn(\n                      itemBase,\n                      'min-w-[44px] font-semibold',\n                      ampm === period ? itemSelected : itemDefault,\n                    )}\n                    aria-label={period}\n                    aria-selected={ampm === period || undefined}\n                  >\n                    {period}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\nexport { TimePicker }\n"],"mappings":"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"}

package/dist/_chunks/document-preview.js

@@ -40,7 +40,7 @@ function g({ url: g, initialPage: _, onError: v }) {
 		onMouseLeave: () => k(!1),
 		tabIndex: -1,
 		children: [/* @__PURE__ */ s("div", {
-			className: "overflow-auto max-h-[70vh] rounded-ds-md bg-surface-sunken border border-surface-border",
+			className: "overflow-auto max-h-[70vh] rounded-control bg-surface-sunken border border-surface-border",
 			children: /* @__PURE__ */ s(p, {
 				file: g,
 				onLoadSuccess: ({ numPages: e }) => b(e),
@@ -88,7 +88,7 @@ function g({ url: g, initialPage: _, onError: v }) {
 					onChange: (e) => w(e.target.value),
 					onKeyDown: A,
 					onBlur: () => w(String(x)),
-					className: "w-8 bg-transparent text-center font-mono text-surface-fg outline-hidden focus:bg-surface-raised-hover rounded-ds-sm",
+					className: "w-8 bg-transparent text-center font-mono text-surface-fg outline-hidden focus:bg-surface-raised-hover rounded-control-inner",
 					"aria-label": "Page number"
 				}), /* @__PURE__ */ c("span", { children: ["/ ", y] })]
 			}),

package/dist/_chunks/document-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"document-preview.js","names":[],"sources":["../../src/composed/file-preview/document-preview.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { Skeleton } from '../../ui/skeleton'\nimport { ErrorFallback, Toolbar } from './shared'\n\n// ============================================================\n// PDF Preview — Adobe/Google Drive style\n// ============================================================\n\nexport default function DocumentPreview({ url, initialPage, onError }: { url: string; initialPage: number; onError?: (msg: string) => void }) {\n  React.useEffect(() => {\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }, [])\n\n  const [numPages, setNumPages] = React.useState(0)\n  const [page, setPage] = React.useState(initialPage)\n  const [pageInput, setPageInput] = React.useState(String(initialPage))\n  const [error, setError] = React.useState(false)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [hovered, setHovered] = React.useState(false)\n\n  // Sync page input when page changes via buttons\n  React.useEffect(() => { setPageInput(String(page)) }, [page])\n\n  // Keyboard nav — scoped to container focus/hover\n  React.useEffect(() => {\n    function handleKey(e: KeyboardEvent) {\n      const el = containerRef.current\n      if (!el) return\n      const hasFocus = el.contains(document.activeElement)\n      if (!hasFocus && !hovered) return\n\n      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setPage((p) => Math.min(numPages, p + 1))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setPage((p) => Math.max(1, p - 1))\n      }\n    }\n    document.addEventListener('keydown', handleKey)\n    return () => document.removeEventListener('keydown', handleKey)\n  }, [numPages, hovered])\n\n  function handlePageInputSubmit(e: React.KeyboardEvent) {\n    if (e.key === 'Enter') {\n      const n = parseInt(pageInput, 10)\n      if (n >= 1 && n <= numPages) setPage(n)\n      else setPageInput(String(page))\n    }\n  }\n\n  if (error) return <ErrorFallback message=\"Could not load PDF\" url={url} />\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex flex-col items-center gap-ds-03\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      tabIndex={-1}\n    >\n      <div className=\"overflow-auto max-h-[70vh] rounded-ds-md bg-surface-sunken border border-surface-border\">\n        <Document\n          file={url}\n          onLoadSuccess={({ numPages: n }) => setNumPages(n)}\n          onLoadError={() => { setError(true); onError?.('PDF failed to load') }}\n          loading={<Skeleton className=\"h-[500px] w-[400px]\" />}\n          error={<ErrorFallback message=\"Failed to load PDF\" url={url} />}\n        >\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              key={page}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Page pageNumber={page} renderTextLayer={false} renderAnnotationLayer={false} />\n            </motion.div>\n          </AnimatePresence>\n        </Document>\n      </div>\n\n      {numPages > 0 && (\n        <Toolbar>\n          <Button variant=\"ghost\" size=\"icon-xs\" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} aria-label=\"Previous page (←)\" title=\"Previous page\">\n            <Icon icon={IconChevronLeft} size=\"sm\" />\n          </Button>\n          <div className=\"flex items-center gap-ds-01 text-ds-xs text-surface-fg-muted\">\n            <input\n              type=\"text\"\n              value={pageInput}\n              onChange={(e) => setPageInput(e.target.value)}\n              onKeyDown={handlePageInputSubmit}\n              onBlur={() => setPageInput(String(page))}\n              className=\"w-8 bg-transparent text-center font-mono text-surface-fg outline-hidden focus:bg-surface-raised-hover rounded-ds-sm\"\n              aria-label=\"Page number\"\n            />\n            <span>/ {numPages}</span>\n          </div>\n          <Button variant=\"ghost\" size=\"icon-xs\" onClick={() => setPage((p) => Math.min(numPages, p + 1))} disabled={page >= numPages} aria-label=\"Next page (→)\" title=\"Next page\">\n            <Icon icon={IconChevronRight} size=\"sm\" />\n          </Button>\n        </Toolbar>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"document-preview.js","names":[],"sources":["../../src/composed/file-preview/document-preview.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { Skeleton } from '../../ui/skeleton'\nimport { ErrorFallback, Toolbar } from './shared'\n\n// ============================================================\n// PDF Preview — Adobe/Google Drive style\n// ============================================================\n\nexport default function DocumentPreview({ url, initialPage, onError }: { url: string; initialPage: number; onError?: (msg: string) => void }) {\n  React.useEffect(() => {\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }, [])\n\n  const [numPages, setNumPages] = React.useState(0)\n  const [page, setPage] = React.useState(initialPage)\n  const [pageInput, setPageInput] = React.useState(String(initialPage))\n  const [error, setError] = React.useState(false)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [hovered, setHovered] = React.useState(false)\n\n  // Sync page input when page changes via buttons\n  React.useEffect(() => { setPageInput(String(page)) }, [page])\n\n  // Keyboard nav — scoped to container focus/hover\n  React.useEffect(() => {\n    function handleKey(e: KeyboardEvent) {\n      const el = containerRef.current\n      if (!el) return\n      const hasFocus = el.contains(document.activeElement)\n      if (!hasFocus && !hovered) return\n\n      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setPage((p) => Math.min(numPages, p + 1))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setPage((p) => Math.max(1, p - 1))\n      }\n    }\n    document.addEventListener('keydown', handleKey)\n    return () => document.removeEventListener('keydown', handleKey)\n  }, [numPages, hovered])\n\n  function handlePageInputSubmit(e: React.KeyboardEvent) {\n    if (e.key === 'Enter') {\n      const n = parseInt(pageInput, 10)\n      if (n >= 1 && n <= numPages) setPage(n)\n      else setPageInput(String(page))\n    }\n  }\n\n  if (error) return <ErrorFallback message=\"Could not load PDF\" url={url} />\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex flex-col items-center gap-ds-03\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      tabIndex={-1}\n    >\n      <div className=\"overflow-auto max-h-[70vh] rounded-control bg-surface-sunken border border-surface-border\">\n        <Document\n          file={url}\n          onLoadSuccess={({ numPages: n }) => setNumPages(n)}\n          onLoadError={() => { setError(true); onError?.('PDF failed to load') }}\n          loading={<Skeleton className=\"h-[500px] w-[400px]\" />}\n          error={<ErrorFallback message=\"Failed to load PDF\" url={url} />}\n        >\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              key={page}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Page pageNumber={page} renderTextLayer={false} renderAnnotationLayer={false} />\n            </motion.div>\n          </AnimatePresence>\n        </Document>\n      </div>\n\n      {numPages > 0 && (\n        <Toolbar>\n          <Button variant=\"ghost\" size=\"icon-xs\" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} aria-label=\"Previous page (←)\" title=\"Previous page\">\n            <Icon icon={IconChevronLeft} size=\"sm\" />\n          </Button>\n          <div className=\"flex items-center gap-ds-01 text-ds-xs text-surface-fg-muted\">\n            <input\n              type=\"text\"\n              value={pageInput}\n              onChange={(e) => setPageInput(e.target.value)}\n              onKeyDown={handlePageInputSubmit}\n              onBlur={() => setPageInput(String(page))}\n              className=\"w-8 bg-transparent text-center font-mono text-surface-fg outline-hidden focus:bg-surface-raised-hover rounded-control-inner\"\n              aria-label=\"Page number\"\n            />\n            <span>/ {numPages}</span>\n          </div>\n          <Button variant=\"ghost\" size=\"icon-xs\" onClick={() => setPage((p) => Math.min(numPages, p + 1))} disabled={page >= numPages} aria-label=\"Next page (→)\" title=\"Next page\">\n            <Icon icon={IconChevronRight} size=\"sm\" />\n          </Button>\n        </Toolbar>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAwB,EAAgB,EAAE,QAAK,gBAAa,cAAkF;AAC5I,GAAM,gBAAgB;AACpB,IAAM,oBAAoB,YAAY,0BAA0B,EAAM,QAAQ;IAC7E,EAAE,CAAC;CAEN,IAAM,CAAC,GAAU,KAAe,EAAM,SAAS,EAAE,EAC3C,CAAC,GAAM,KAAW,EAAM,SAAS,EAAY,EAC7C,CAAC,GAAW,KAAgB,EAAM,SAAS,OAAO,EAAY,CAAC,EAC/D,CAAC,GAAO,KAAY,EAAM,SAAS,GAAM,EACzC,IAAe,EAAM,OAAuB,KAAK,EACjD,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM;AAMnD,CAHA,EAAM,gBAAgB;AAAE,IAAa,OAAO,EAAK,CAAC;IAAI,CAAC,EAAK,CAAC,EAG7D,EAAM,gBAAgB;EACpB,SAAS,EAAU,GAAkB;GACnC,IAAM,IAAK,EAAa;AACnB,SAED,CADa,EAAG,SAAS,SAAS,cAAc,IACnC,CAAC,MAEd,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eACtC,EAAE,gBAAgB,EAClB,GAAS,MAAM,KAAK,IAAI,GAAU,IAAI,EAAE,CAAC,KAChC,EAAE,QAAQ,eAAe,EAAE,QAAQ,eAC5C,EAAE,gBAAgB,EAClB,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;;AAItC,SADA,SAAS,iBAAiB,WAAW,EAAU,QAClC,SAAS,oBAAoB,WAAW,EAAU;IAC9D,CAAC,GAAU,EAAQ,CAAC;CAEvB,SAAS,EAAsB,GAAwB;AACrD,MAAI,EAAE,QAAQ,SAAS;GACrB,IAAM,IAAI,SAAS,GAAW,GAAG;AACjC,GAAI,KAAK,KAAK,KAAK,IAAU,EAAQ,EAAE,GAClC,EAAa,OAAO,EAAK,CAAC;;;AAMnC,QAFI,IAAc,kBAAC,GAAD;EAAe,SAAQ;EAA0B;EAAO,CAAA,GAGxE,kBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,oBAAoB,EAAW,GAAK;EACpC,oBAAoB,EAAW,GAAM;EACrC,UAAU;YALZ,CAOE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,MAAM;IACN,gBAAgB,EAAE,UAAU,QAAQ,EAAY,EAAE;IAClD,mBAAmB;AAAkB,KAAhB,EAAS,GAAK,EAAE,IAAU,qBAAqB;;IACpE,SAAS,kBAAC,GAAD,EAAU,WAAU,uBAAwB,CAAA;IACrD,OAAO,kBAAC,GAAD;KAAe,SAAQ;KAA0B;KAAO,CAAA;cAE/D,kBAAC,GAAD;KAAiB,MAAK;eACpB,kBAAC,EAAO,KAAR;MAEE,SAAS,EAAE,SAAS,GAAG;MACvB,SAAS,EAAE,SAAS,GAAG;MACvB,MAAM,EAAE,SAAS,GAAG;MACpB,YAAY,EAAO;gBAEnB,kBAAC,GAAD;OAAM,YAAY;OAAM,iBAAiB;OAAO,uBAAuB;OAAS,CAAA;MACrE,EAPN,EAOM;KACG,CAAA;IACT,CAAA;GACP,CAAA,EAEL,IAAW,KACV,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAU,eAAe,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;IAAE,UAAU,KAAQ;IAAG,cAAW;IAAoB,OAAM;cAClJ,kBAAC,GAAD;KAAM,MAAM;KAAiB,MAAK;KAAO,CAAA;IAClC,CAAA;GACT,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,SAAD;KACE,MAAK;KACL,OAAO;KACP,WAAW,MAAM,EAAa,EAAE,OAAO,MAAM;KAC7C,WAAW;KACX,cAAc,EAAa,OAAO,EAAK,CAAC;KACxC,WAAU;KACV,cAAW;KACX,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA,CAAM,MAAG,EAAgB,EAAA,CAAA,CACrB;;GACN,kBAAC,GAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAU,eAAe,GAAS,MAAM,KAAK,IAAI,GAAU,IAAI,EAAE,CAAC;IAAE,UAAU,KAAQ;IAAU,cAAW;IAAgB,OAAM;cAC5J,kBAAC,GAAD;KAAM,MAAM;KAAkB,MAAK;KAAO,CAAA;IACnC,CAAA;GACD,EAAA,CAAA,CAER"}

package/dist/_chunks/file-preview.js

@@ -58,7 +58,7 @@ function y({ url: e, fileName: t, onError: n }) {
 		url: e
 	}) : /* @__PURE__ */ f("div", {
 		ref: o,
-		className: "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised overflow-hidden",
+		className: "rounded-surface border border-surface-border bg-surface-raised shadow-raised overflow-hidden",
 		tabIndex: -1,
 		children: [
 			/* @__PURE__ */ d("audio", {
@@ -90,12 +90,12 @@ function y({ url: e, fileName: t, onError: n }) {
 						style: { width: `${_}%` }
 					}),
 					k !== null && /* @__PURE__ */ d("div", {
-						className: "absolute -top-7 -translate-x-1/2 rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none",
+						className: "absolute -top-7 -translate-x-1/2 rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none",
 						style: { left: `${k / (y || 1) * 100}%` },
 						children: s(k)
 					}),
 					/* @__PURE__ */ d("div", {
-						className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
+						className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-pill bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
 						style: {
 							left: `${_}%`,
 							marginLeft: "-5px"
@@ -163,7 +163,7 @@ function b({ url: e, embedUrl: n, onError: r }) {
 		message: "Could not load embed",
 		url: e
 	}) : /* @__PURE__ */ f("div", {
-		className: "relative w-full rounded-ds-md overflow-hidden",
+		className: "relative w-full rounded-control overflow-hidden",
 		style: { aspectRatio: "16 / 9" },
 		children: [!i && /* @__PURE__ */ d(o, { className: "absolute inset-0" }), /* @__PURE__ */ d(v.iframe, {
 			src: n,
@@ -250,7 +250,7 @@ function S({ url: n, onError: i }) {
 		url: n
 	}) : /* @__PURE__ */ f("div", {
 		ref: o,
-		className: "group relative rounded-ds-md bg-black overflow-hidden",
+		className: "group relative rounded-control bg-black overflow-hidden",
 		onMouseMove: z,
 		onMouseLeave: () => p && M(!1),
 		tabIndex: -1,
@@ -287,7 +287,7 @@ function S({ url: n, onError: i }) {
 				className: "absolute inset-0 flex items-center justify-center bg-black/30",
 				"aria-label": "Play video",
 				children: /* @__PURE__ */ d("div", {
-					className: "flex h-14 w-14 items-center justify-center rounded-full bg-white/90 shadow-floating",
+					className: "flex h-14 w-14 items-center justify-center rounded-pill bg-white/90 shadow-floating",
 					children: /* @__PURE__ */ d(r, {
 						icon: g,
 						size: "xl",
@@ -311,7 +311,7 @@ function S({ url: n, onError: i }) {
 				transition: t.fade,
 				className: "absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08",
 				children: [/* @__PURE__ */ f("div", {
-					className: "relative h-1 w-full cursor-pointer rounded-full bg-white/30 mb-ds-03 group/progress",
+					className: "relative h-1 w-full cursor-pointer rounded-pill bg-white/30 mb-ds-03 group/progress",
 					onClick: R,
 					role: "slider",
 					"aria-label": "Video progress",
@@ -320,10 +320,10 @@ function S({ url: n, onError: i }) {
 					"aria-valuemax": 100,
 					tabIndex: 0,
 					children: [/* @__PURE__ */ d("div", {
-						className: "absolute left-0 top-0 h-full rounded-full bg-white transition-[width] duration-75",
+						className: "absolute left-0 top-0 h-full rounded-pill bg-white transition-[width] duration-75",
 						style: { width: `${b}%` }
 					}), /* @__PURE__ */ d("div", {
-						className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
+						className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-pill bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
 						style: {
 							left: `${b}%`,
 							marginLeft: "-6px"
@@ -367,7 +367,7 @@ function S({ url: n, onError: i }) {
 						/* @__PURE__ */ d("div", { className: "flex-1" }),
 						/* @__PURE__ */ f("button", {
 							onClick: () => I(1),
-							className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-ds-sm hover:bg-white/10 transition-colors",
+							className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-control-inner hover:bg-white/10 transition-colors",
 							"aria-label": `Playback speed: ${N}x`,
 							children: [N, "x"]
 						}),
@@ -430,7 +430,7 @@ function E(e) {
 	return r ? `https://www.loom.com/embed/${r[1]}` : e;
 }
 function D({ url: e, type: t, mimeType: s, alt: c, initialPage: l = 1, fileName: m, fileSize: h, onError: g, className: _, ...v }) {
-	let x = t ?? T(e, s), D = /* @__PURE__ */ d(o, { className: "h-64 w-full rounded-ds-md" });
+	let x = t ?? T(e, s), D = /* @__PURE__ */ d(o, { className: "h-64 w-full rounded-control" });
 	return /* @__PURE__ */ f("div", {
 		className: n("flex flex-col gap-ds-03", _),
 		...v,