@viax.io/uxm 4.36.0

package/dist/ui/calendar/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/calendar/calendar.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { computeMonthGrid, type WeekStart } from '../../lib/calendar-grid';\nimport { Icon } from '../icon';\n\nimport type { HTMLAttributes, KeyboardEvent } from 'react';\n\nexport interface CalendarValue {\n  start: Date | null;\n  end: Date | null;\n}\n\ntype CalendarView = 'day' | 'month' | 'year';\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently-displayed month. Controlled. If omitted, atom owns it (initialized to the selected value's month, else today's). */\n  month?: Date;\n  /** Selection value. Controlled when passed. `{ start, end: null }` for a single date; `{ start, end }` for a range. */\n  value?: CalendarValue;\n  /** Override for \"today\". Defaults to real current date. */\n  today?: Date;\n  /** Predicate for disabled days. Disabled cells ignore clicks. */\n  isDisabled?: (date: Date) => boolean;\n  /** 0 = Sunday (US), 1 = Monday. */\n  weekStartsOn?: WeekStart;\n  /** Locale for month label and weekday names. */\n  locale?: string;\n  /** Fires after every click. `end` is null after the first click of a new range, set after the second. */\n  onChange?: (value: CalendarValue) => void;\n  /** Month navigation callback (prev/next buttons, outside-month-cell click, or drilling via month/year views). */\n  onMonthChange?: (next: Date) => void;\n  /** Drop a soft elevation shadow (the floating-surface look). Default true — pass `false` for a flat, inline / embedded calendar. */\n  shadow?: boolean;\n  /** Accessible name for the previous-month button. Default `\"Previous\"`. */\n  previousMonthLabel?: string;\n  /** Accessible name for the next-month button. Default `\"Next\"`. */\n  nextMonthLabel?: string;\n  /** Accessible name for the month/year drill-up button. Default `\"Drill up\"`. */\n  drillUpLabel?: string;\n}\n\nconst MS_PER_DAY = 86_400_000;\nconst YEARS_PER_BLOCK = 12;\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\nfunction sameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {\n  if (!a || !b) return false;\n  return startOfDay(a).getTime() === startOfDay(b).getTime();\n}\nfunction isStrictlyBetween(date: Date, start: Date | null | undefined, end: Date | null | undefined): boolean {\n  if (!start || !end) return false;\n  const t = startOfDay(date).getTime();\n  const lo = Math.min(startOfDay(start).getTime(), startOfDay(end).getTime());\n  const hi = Math.max(startOfDay(start).getTime(), startOfDay(end).getTime());\n  return t > lo && t < hi;\n}\n\nfunction getWeekdayLabels(locale: string, weekStartsOn: WeekStart): string[] {\n  const fmt = new Intl.DateTimeFormat(locale, { weekday: 'short' });\n  // 2024-01-07 is a known Sunday — stable anchor for the formatter.\n  const anchor = new Date(2024, 0, 7);\n  const labels: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    labels.push(fmt.format(new Date(anchor.getTime() + i * MS_PER_DAY)));\n  }\n  return weekStartsOn === 1 ? [...labels.slice(1), labels[0]] : labels;\n}\n\n/**\n * Year-block start for the year view. 12-year blocks aligned to multiples of\n * `YEARS_PER_BLOCK` (e.g. 2024 → 2016–2027). Block alignment is the iOS pattern;\n * picking any other anchor (decades, etc.) is equally valid — this just keeps\n * navigation predictable.\n */\nfunction yearBlockStart(year: number): number {\n  return Math.floor(year / YEARS_PER_BLOCK) * YEARS_PER_BLOCK;\n}\n\n/** True if any day of `year-month` overlaps the inclusive selection range. */\nfunction monthOverlapsSelection(year: number, monthIdx: number, value: CalendarValue): boolean {\n  if (!value.start) return false;\n  const monthFirstMs = new Date(year, monthIdx, 1).getTime();\n  const monthLastMs = new Date(year, monthIdx + 1, 0).getTime();\n  const sMs = startOfDay(value.start).getTime();\n  const eMs = value.end ? startOfDay(value.end).getTime() : sMs;\n  const lo = Math.min(sMs, eMs);\n  const hi = Math.max(sMs, eMs);\n  return monthFirstMs <= hi && monthLastMs >= lo;\n}\n\n/** True if `year` falls within the inclusive selection range's year span. */\nfunction yearOverlapsSelection(year: number, value: CalendarValue): boolean {\n  if (!value.start) return false;\n  const sY = value.start.getFullYear();\n  const eY = value.end ? value.end.getFullYear() : sY;\n  const lo = Math.min(sY, eY);\n  const hi = Math.max(sY, eY);\n  return year >= lo && year <= hi;\n}\n\nconst EMPTY_VALUE: CalendarValue = { start: null, end: null };\n\n/**\n * Default roving-tabindex target for the day grid: the selected day if\n * it's in the visible grid and enabled, else today if visible and\n * enabled, else the first enabled cell, else 0. Keeps the grid reachable\n * via Tab even when the \"obvious\" cell happens to be disabled.\n */\nfunction defaultDayFocusIndex(\n  cells: { date: Date; outside: boolean }[],\n  start: Date | null,\n  today: Date,\n  isCellDisabled: (date: Date) => boolean,\n): number {\n  const startIndex = start ? cells.findIndex((c) => sameDay(c.date, start)) : -1;\n  if (startIndex >= 0 && !isCellDisabled(cells[startIndex].date)) return startIndex;\n  const todayIndex = cells.findIndex((c) => sameDay(c.date, today));\n  if (todayIndex >= 0 && !isCellDisabled(cells[todayIndex].date)) return todayIndex;\n  const firstEnabled = cells.findIndex((c) => !isCellDisabled(c.date));\n  return firstEnabled >= 0 ? firstEnabled : 0;\n}\n\nexport function Calendar({\n  month,\n  value,\n  today,\n  isDisabled,\n  weekStartsOn = 0,\n  locale = 'en-US',\n  onChange,\n  onMonthChange,\n  shadow = true,\n  previousMonthLabel = 'Previous',\n  nextMonthLabel = 'Next',\n  drillUpLabel = 'Drill up',\n  className,\n  ...rest\n}: CalendarProps) {\n  const realToday = useMemo(() => today ?? new Date(), [today]);\n\n  // Month state — controlled when `month` prop is provided. When uncontrolled,\n  // seed from the current selection so opening on an existing date lands on\n  // that date's month, not today's. The popover consumers mount the calendar\n  // fresh per open, so this initial `value` is the selected date; nav then\n  // owns `internalMonth`. Falls back to today's month when nothing's selected.\n  const [internalMonth, setInternalMonth] = useState<Date>(() => {\n    // `end` covers the range-input edge case where only the closing half is\n    // seeded (`{ start: null, end }`); today is the last resort.\n    const seed = value?.start ?? value?.end ?? realToday;\n    return new Date(seed.getFullYear(), seed.getMonth(), 1);\n  });\n  const currentMonth = month ?? internalMonth;\n\n  // View state — pure UI state, never controlled. Day view by default. Header\n  // click drills up (day → month → year). Cell click drills back down.\n  const [view, setView] = useState<CalendarView>('day');\n\n  // Unified selection model — atom infers single vs range from click sequence.\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<CalendarValue>(EMPTY_VALUE);\n  const currentValue = isControlled ? value : internalValue;\n  const currentStart = currentValue.start;\n  const currentEnd = currentValue.end;\n\n  // Hover preview — only meaningful in the in-flight window in day view.\n  const [hoveredDate, setHoveredDate] = useState<Date | null>(null);\n  const inFlight = !!currentStart && !currentEnd;\n  const previewEnd = inFlight && hoveredDate ? hoveredDate : currentEnd;\n  const isRangeView = !!currentStart && !!previewEnd && !sameDay(currentStart, previewEnd);\n\n  const dayCells = useMemo(\n    () => computeMonthGrid(currentMonth, weekStartsOn),\n    [currentMonth, weekStartsOn],\n  );\n\n  const isCellDisabled = useCallback((date: Date) => isDisabled?.(date) ?? false, [isDisabled]);\n\n  // Roving tabindex across the day grid (ARIA grid pattern): only one cell\n  // is a Tab stop at a time; arrow keys move it. `dayRefs` lets the arrow\n  // handler call `.focus()` on the target cell after moving the index.\n  const dayRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedDayIndex, setFocusedDayIndex] = useState<number>(() =>\n    defaultDayFocusIndex(dayCells, currentStart, realToday, isCellDisabled),\n  );\n\n  const weekdays = useMemo(\n    () => getWeekdayLabels(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n\n  // Header label — depends on the active view.\n  const titleLabel = useMemo(() => {\n    if (view === 'day') {\n      return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(currentMonth);\n    }\n    if (view === 'month') {\n      return String(currentMonth.getFullYear());\n    }\n    const start = yearBlockStart(currentMonth.getFullYear());\n    return `${start}–${start + YEARS_PER_BLOCK - 1}`;\n  }, [view, currentMonth, locale]);\n\n  // Month-view labels — short month names from the locale formatter.\n  const monthShortNames = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { month: 'short' });\n    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2024, i, 1)));\n  }, [locale]);\n\n  const setMonth = useCallback(\n    (next: Date) => {\n      if (month === undefined) setInternalMonth(next);\n      onMonthChange?.(next);\n      // Re-target the day grid's roving tab stop for the month we're\n      // navigating to — the previous index otherwise points at an\n      // unrelated cell (or none) in the new grid.\n      const nextCells = computeMonthGrid(next, weekStartsOn);\n      setFocusedDayIndex(defaultDayFocusIndex(nextCells, currentStart, realToday, isCellDisabled));\n    },\n    [month, onMonthChange, weekStartsOn, currentStart, realToday, isCellDisabled],\n  );\n\n  // Prev/next nav stepping is view-aware: day → ±1 month, month → ±1 year,\n  // year → ±12 years (one block).\n  const handleNav = useCallback(\n    (delta: number) => {\n      const m = currentMonth.getMonth();\n      const y = currentMonth.getFullYear();\n      let next: Date;\n      if (view === 'day') {\n        next = new Date(y, m + delta, 1);\n      } else if (view === 'month') {\n        next = new Date(y + delta, m, 1);\n      } else {\n        next = new Date(y + delta * YEARS_PER_BLOCK, m, 1);\n      }\n      setMonth(next);\n    },\n    [view, currentMonth, setMonth],\n  );\n\n  // Header click drills up. Year view has nowhere further to go.\n  const handleTitleClick = useCallback(() => {\n    if (view === 'day') setView('month');\n    else if (view === 'month') setView('year');\n  }, [view]);\n\n  const commit = useCallback(\n    (next: CalendarValue) => {\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  // Day-cell click — the unified single/range click logic.\n  const handleDayClick = useCallback(\n    (date: Date, outside: boolean, disabled: boolean) => {\n      if (disabled) return;\n      if (outside) {\n        setMonth(new Date(date.getFullYear(), date.getMonth(), 1));\n      }\n      const startingNew = !currentStart || !!currentEnd;\n      if (startingNew) {\n        commit({ start: date, end: null });\n      } else {\n        const s = currentStart!;\n        let finalStart = s;\n        let finalEnd = date;\n        if (startOfDay(date).getTime() < startOfDay(s).getTime()) {\n          finalStart = date;\n          finalEnd = s;\n        }\n        commit({ start: finalStart, end: finalEnd });\n      }\n      setHoveredDate(null);\n    },\n    [currentStart, currentEnd, commit, setMonth],\n  );\n\n  // Month-view click drills back to day view for the clicked month.\n  const handleMonthClick = useCallback(\n    (monthIdx: number) => {\n      setMonth(new Date(currentMonth.getFullYear(), monthIdx, 1));\n      setView('day');\n    },\n    [currentMonth, setMonth],\n  );\n\n  // Year-view click drills to month view for the clicked year, preserving\n  // the previously-active month-of-year so the user doesn't lose context.\n  const handleYearClick = useCallback(\n    (year: number) => {\n      setMonth(new Date(year, currentMonth.getMonth(), 1));\n      setView('month');\n    },\n    [currentMonth, setMonth],\n  );\n\n  const handleMouseEnter = useCallback(\n    (date: Date, disabled: boolean) => {\n      if (disabled) return;\n      if (inFlight) setHoveredDate(date);\n    },\n    [inFlight],\n  );\n\n  const handleMouseLeave = useCallback((date: Date) => {\n    setHoveredDate((prev) => (sameDay(prev, date) ? null : prev));\n  }, []);\n\n  // ARIA grid keyboard navigation for the day view: ArrowLeft/Right move a\n  // day, ArrowUp/Down move a week, Home/End jump to the start/end of the\n  // current week row. Stays within the visible 6×7 grid (doesn't cross\n  // into the previous/next month) — disabled cells are skipped so arrow\n  // navigation never lands on (and gets stuck at) an inert cell.\n  const handleDayKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>, i: number) => {\n      const rowStart = i - (i % 7);\n      let step = 0;\n      let bound: number | null = null;\n      switch (e.key) {\n        case 'ArrowLeft':\n          step = -1;\n          break;\n        case 'ArrowRight':\n          step = 1;\n          break;\n        case 'ArrowUp':\n          step = -7;\n          break;\n        case 'ArrowDown':\n          step = 7;\n          break;\n        case 'Home':\n          step = -1;\n          bound = rowStart;\n          break;\n        case 'End':\n          step = 1;\n          bound = rowStart + 6;\n          break;\n        default:\n          return;\n      }\n      e.preventDefault();\n      let next = bound ?? i + step;\n      while (\n        next >= 0 &&\n        next < dayCells.length &&\n        isCellDisabled(dayCells[next].date)\n      ) {\n        next += step;\n      }\n      if (next < 0 || next >= dayCells.length) return;\n      setFocusedDayIndex(next);\n      dayRefs.current[next]?.focus();\n    },\n    [dayCells, isCellDisabled],\n  );\n\n  return (\n    <div className={cn('uxm-calendar', `uxm-calendar--view-${view}`, shadow && 'uxm-calendar--shadow', className)} {...rest}>\n      <div className=\"uxm-calendar__header\">\n        <button\n          type=\"button\"\n          className=\"uxm-calendar__nav\"\n          onClick={() => handleNav(-1)}\n          aria-label={previousMonthLabel}\n        >\n          <Icon glyph=\"chevron-left\" size={16} />\n        </button>\n        <button\n          type=\"button\"\n          className=\"uxm-calendar__title\"\n          onClick={handleTitleClick}\n          disabled={view === 'year'}\n          aria-label={view === 'year' ? undefined : drillUpLabel}\n        >\n          {titleLabel}\n        </button>\n        <button\n          type=\"button\"\n          className=\"uxm-calendar__nav\"\n          onClick={() => handleNav(1)}\n          aria-label={nextMonthLabel}\n        >\n          <Icon glyph=\"chevron-right\" size={16} />\n        </button>\n      </div>\n\n      {view === 'day' && (\n        <>\n          <div className=\"uxm-calendar__weekdays\" aria-hidden=\"true\">\n            {weekdays.map((w) => (\n              <div key={w} className=\"uxm-calendar__weekday\">{w}</div>\n            ))}\n          </div>\n          <div className=\"uxm-calendar__grid\" role=\"grid\">\n            {Array.from({ length: dayCells.length / 7 }, (_, week) => (\n              // `display: contents` (see calendar.scss) keeps these cells as\n              // direct participants in the parent's CSS grid while giving\n              // each week its own `role=\"row\"` — the ARIA grid pattern\n              // requires gridcells to be grouped into rows.\n              <div key={week} role=\"row\" className=\"uxm-calendar__grid-row\">\n                {dayCells.slice(week * 7, week * 7 + 7).map(({ date, outside }, col) => {\n                  const i = week * 7 + col;\n                  const isToday = sameDay(date, realToday);\n                  const isStart = sameDay(date, currentStart);\n                  const isEnd = !!previewEnd && sameDay(date, previewEnd);\n                  const isSelected = !isRangeView && isStart;\n                  const isRangeStart = isRangeView && isStart;\n                  const isRangeEnd = isRangeView && isEnd;\n                  const isInRange = isStrictlyBetween(date, currentStart, previewEnd);\n                  const disabled = isDisabled?.(date) ?? false;\n                  return (\n                    <button\n                      key={i}\n                      ref={(el) => {\n                        dayRefs.current[i] = el;\n                      }}\n                      type=\"button\"\n                      role=\"gridcell\"\n                      disabled={disabled}\n                      tabIndex={i === focusedDayIndex ? 0 : -1}\n                      onClick={() => {\n                        handleDayClick(date, outside, disabled);\n                        if (!disabled && !outside) setFocusedDayIndex(i);\n                      }}\n                      onKeyDown={(e) => handleDayKeyDown(e, i)}\n                      onMouseEnter={() => handleMouseEnter(date, disabled)}\n                      onMouseLeave={() => handleMouseLeave(date)}\n                      className={cn(\n                        'uxm-calendar__day',\n                        outside && 'uxm-calendar__day--outside',\n                        isToday && 'uxm-calendar__day--today',\n                        isSelected && 'uxm-calendar__day--selected',\n                        isRangeStart && 'uxm-calendar__day--range-start',\n                        isRangeEnd && 'uxm-calendar__day--range-end',\n                        isInRange && 'uxm-calendar__day--in-range',\n                        disabled && 'uxm-calendar__day--disabled',\n                      )}\n                      aria-selected={isSelected || isRangeStart || isRangeEnd || undefined}\n                      aria-current={isToday ? 'date' : undefined}\n                    >\n                      {date.getDate()}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n\n      {view === 'month' && (\n        <div className=\"uxm-calendar__months\" role=\"grid\">\n          {monthShortNames.map((name, i) => {\n            const year = currentMonth.getFullYear();\n            const isCurrent = realToday.getFullYear() === year && realToday.getMonth() === i;\n            const isSelected = monthOverlapsSelection(year, i, currentValue);\n            return (\n              <button\n                key={i}\n                type=\"button\"\n                role=\"gridcell\"\n                onClick={() => handleMonthClick(i)}\n                className={cn(\n                  'uxm-calendar__month',\n                  isCurrent && 'uxm-calendar__month--today',\n                  isSelected && 'uxm-calendar__month--selected',\n                )}\n                aria-selected={isSelected || undefined}\n                aria-current={isCurrent ? 'true' : undefined}\n              >\n                {name}\n              </button>\n            );\n          })}\n        </div>\n      )}\n\n      {view === 'year' && (\n        <div className=\"uxm-calendar__years\" role=\"grid\">\n          {Array.from({ length: YEARS_PER_BLOCK }, (_, i) => {\n            const year = yearBlockStart(currentMonth.getFullYear()) + i;\n            const isCurrent = realToday.getFullYear() === year;\n            const isSelected = yearOverlapsSelection(year, currentValue);\n            return (\n              <button\n                key={year}\n                type=\"button\"\n                role=\"gridcell\"\n                onClick={() => handleYearClick(year)}\n                className={cn(\n                  'uxm-calendar__year',\n                  isCurrent && 'uxm-calendar__year--today',\n                  isSelected && 'uxm-calendar__year--selected',\n                )}\n                aria-selected={isSelected || undefined}\n                aria-current={isCurrent ? 'true' : undefined}\n              >\n                {year}\n              </button>\n            );\n          })}\n        </div>\n      )}\n\n      {/* \"Today\" — jumps the view back to the current month in day view so\n          the user can find today after navigating away. Deliberately does\n          NOT select today (returning to a date ≠ committing it); the day\n          cell is one click away. */}\n      <div className=\"uxm-calendar__footer\">\n        <button\n          type=\"button\"\n          className=\"uxm-calendar__today-button\"\n          disabled={isDisabled?.(realToday)}\n          onClick={() => {\n            setView('day');\n            setMonth(new Date(realToday.getFullYear(), realToday.getMonth(), 1));\n          }}\n        >\n          Today\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA8WM,SA6BE,UAtBE,KAPJ;AA9WN,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AAEvD,SAAS,UAAU;AAEnB,SAAS,wBAAwC;AACjD,SAAS,YAAY;AAsCrB,MAAM,aAAa;AACnB,MAAM,kBAAkB;AAExB,SAAS,WAAW,GAAe;AACjC,SAAO,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ,CAAC;AAC5D;AACA,SAAS,QAAQ,GAA4B,GAAqC;AAChF,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,SAAO,WAAW,CAAC,EAAE,QAAQ,MAAM,WAAW,CAAC,EAAE,QAAQ;AAC3D;AACA,SAAS,kBAAkB,MAAY,OAAgC,KAAuC;AAC5G,MAAI,CAAC,SAAS,CAAC,IAAK,QAAO;AAC3B,QAAM,IAAI,WAAW,IAAI,EAAE,QAAQ;AACnC,QAAM,KAAK,KAAK,IAAI,WAAW,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,EAAE,QAAQ,CAAC;AAC1E,QAAM,KAAK,KAAK,IAAI,WAAW,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,EAAE,QAAQ,CAAC;AAC1E,SAAO,IAAI,MAAM,IAAI;AACvB;AAEA,SAAS,iBAAiB,QAAgB,cAAmC;AAC3E,QAAM,MAAM,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAQ,CAAC;AAEhE,QAAM,SAAS,IAAI,KAAK,MAAM,GAAG,CAAC;AAClC,QAAM,SAAmB,CAAC;AAC1B,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,WAAO,KAAK,IAAI,OAAO,IAAI,KAAK,OAAO,QAAQ,IAAI,IAAI,UAAU,CAAC,CAAC;AAAA,EACrE;AACA,SAAO,iBAAiB,IAAI,CAAC,GAAG,OAAO,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI;AAChE;AAQA,SAAS,eAAe,MAAsB;AAC5C,SAAO,KAAK,MAAM,OAAO,eAAe,IAAI;AAC9C;AAGA,SAAS,uBAAuB,MAAc,UAAkB,OAA+B;AAC7F,MAAI,CAAC,MAAM,MAAO,QAAO;AACzB,QAAM,eAAe,IAAI,KAAK,MAAM,UAAU,CAAC,EAAE,QAAQ;AACzD,QAAM,cAAc,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ;AAC5D,QAAM,MAAM,WAAW,MAAM,KAAK,EAAE,QAAQ;AAC5C,QAAM,MAAM,MAAM,MAAM,WAAW,MAAM,GAAG,EAAE,QAAQ,IAAI;AAC1D,QAAM,KAAK,KAAK,IAAI,KAAK,GAAG;AAC5B,QAAM,KAAK,KAAK,IAAI,KAAK,GAAG;AAC5B,SAAO,gBAAgB,MAAM,eAAe;AAC9C;AAGA,SAAS,sBAAsB,MAAc,OAA+B;AAC1E,MAAI,CAAC,MAAM,MAAO,QAAO;AACzB,QAAM,KAAK,MAAM,MAAM,YAAY;AACnC,QAAM,KAAK,MAAM,MAAM,MAAM,IAAI,YAAY,IAAI;AACjD,QAAM,KAAK,KAAK,IAAI,IAAI,EAAE;AAC1B,QAAM,KAAK,KAAK,IAAI,IAAI,EAAE;AAC1B,SAAO,QAAQ,MAAM,QAAQ;AAC/B;AAEA,MAAM,cAA6B,EAAE,OAAO,MAAM,KAAK,KAAK;AAQ5D,SAAS,qBACP,OACA,OACA,OACA,gBACQ;AACR,QAAM,aAAa,QAAQ,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI;AAC5E,MAAI,cAAc,KAAK,CAAC,eAAe,MAAM,UAAU,EAAE,IAAI,EAAG,QAAO;AACvE,QAAM,aAAa,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,MAAM,KAAK,CAAC;AAChE,MAAI,cAAc,KAAK,CAAC,eAAe,MAAM,UAAU,EAAE,IAAI,EAAG,QAAO;AACvE,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC;AACnE,SAAO,gBAAgB,IAAI,eAAe;AAC5C;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,QAAQ,MAAM,SAAS,oBAAI,KAAK,GAAG,CAAC,KAAK,CAAC;AAO5D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAe,MAAM;AAG7D,UAAM,OAAO,OAAO,SAAS,OAAO,OAAO;AAC3C,WAAO,IAAI,KAAK,KAAK,YAAY,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxD,CAAC;AACD,QAAM,eAAe,SAAS;AAI9B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAuB,KAAK;AAGpD,QAAM,eAAe,UAAU;AAC/B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,WAAW;AAC7E,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,eAAe,aAAa;AAClC,QAAM,aAAa,aAAa;AAGhC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,IAAI;AAChE,QAAM,WAAW,CAAC,CAAC,gBAAgB,CAAC;AACpC,QAAM,aAAa,YAAY,cAAc,cAAc;AAC3D,QAAM,cAAc,CAAC,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAAC,QAAQ,cAAc,UAAU;AAEvF,QAAM,WAAW;AAAA,IACf,MAAM,iBAAiB,cAAc,YAAY;AAAA,IACjD,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,iBAAiB,YAAY,CAAC,SAAe,aAAa,IAAI,KAAK,OAAO,CAAC,UAAU,CAAC;AAK5F,QAAM,UAAU,OAAwC,CAAC,CAAC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAAiB,MAC7D,qBAAqB,UAAU,cAAc,WAAW,cAAc;AAAA,EACxE;AAEA,QAAM,WAAW;AAAA,IACf,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IAC3C,CAAC,QAAQ,YAAY;AAAA,EACvB;AAGA,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,SAAS,OAAO;AAClB,aAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC,EAAE,OAAO,YAAY;AAAA,IAChG;AACA,QAAI,SAAS,SAAS;AACpB,aAAO,OAAO,aAAa,YAAY,CAAC;AAAA,IAC1C;AACA,UAAM,QAAQ,eAAe,aAAa,YAAY,CAAC;AACvD,WAAO,GAAG,KAAK,SAAI,QAAQ,kBAAkB,CAAC;AAAA,EAChD,GAAG,CAAC,MAAM,cAAc,MAAM,CAAC;AAG/B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAM,MAAM,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAC9D,WAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAAM,IAAI,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC;AAAA,EAC9E,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,WAAW;AAAA,IACf,CAAC,SAAe;AACd,UAAI,UAAU,OAAW,kBAAiB,IAAI;AAC9C,sBAAgB,IAAI;AAIpB,YAAM,YAAY,iBAAiB,MAAM,YAAY;AACrD,yBAAmB,qBAAqB,WAAW,cAAc,WAAW,cAAc,CAAC;AAAA,IAC7F;AAAA,IACA,CAAC,OAAO,eAAe,cAAc,cAAc,WAAW,cAAc;AAAA,EAC9E;AAIA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkB;AACjB,YAAM,IAAI,aAAa,SAAS;AAChC,YAAM,IAAI,aAAa,YAAY;AACnC,UAAI;AACJ,UAAI,SAAS,OAAO;AAClB,eAAO,IAAI,KAAK,GAAG,IAAI,OAAO,CAAC;AAAA,MACjC,WAAW,SAAS,SAAS;AAC3B,eAAO,IAAI,KAAK,IAAI,OAAO,GAAG,CAAC;AAAA,MACjC,OAAO;AACL,eAAO,IAAI,KAAK,IAAI,QAAQ,iBAAiB,GAAG,CAAC;AAAA,MACnD;AACA,eAAS,IAAI;AAAA,IACf;AAAA,IACA,CAAC,MAAM,cAAc,QAAQ;AAAA,EAC/B;AAGA,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,SAAS,MAAO,SAAQ,OAAO;AAAA,aAC1B,SAAS,QAAS,SAAQ,MAAM;AAAA,EAC3C,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS;AAAA,IACb,CAAC,SAAwB;AACvB,UAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,iBAAW,IAAI;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAY,SAAkB,aAAsB;AACnD,UAAI,SAAU;AACd,UAAI,SAAS;AACX,iBAAS,IAAI,KAAK,KAAK,YAAY,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC;AAAA,MAC3D;AACA,YAAM,cAAc,CAAC,gBAAgB,CAAC,CAAC;AACvC,UAAI,aAAa;AACf,eAAO,EAAE,OAAO,MAAM,KAAK,KAAK,CAAC;AAAA,MACnC,OAAO;AACL,cAAM,IAAI;AACV,YAAI,aAAa;AACjB,YAAI,WAAW;AACf,YAAI,WAAW,IAAI,EAAE,QAAQ,IAAI,WAAW,CAAC,EAAE,QAAQ,GAAG;AACxD,uBAAa;AACb,qBAAW;AAAA,QACb;AACA,eAAO,EAAE,OAAO,YAAY,KAAK,SAAS,CAAC;AAAA,MAC7C;AACA,qBAAe,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,cAAc,YAAY,QAAQ,QAAQ;AAAA,EAC7C;AAGA,QAAM,mBAAmB;AAAA,IACvB,CAAC,aAAqB;AACpB,eAAS,IAAI,KAAK,aAAa,YAAY,GAAG,UAAU,CAAC,CAAC;AAC1D,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAIA,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAAiB;AAChB,eAAS,IAAI,KAAK,MAAM,aAAa,SAAS,GAAG,CAAC,CAAC;AACnD,cAAQ,OAAO;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAAY,aAAsB;AACjC,UAAI,SAAU;AACd,UAAI,SAAU,gBAAe,IAAI;AAAA,IACnC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,mBAAmB,YAAY,CAAC,SAAe;AACnD,mBAAe,CAAC,SAAU,QAAQ,MAAM,IAAI,IAAI,OAAO,IAAK;AAAA,EAC9D,GAAG,CAAC,CAAC;AAOL,QAAM,mBAAmB;AAAA,IACvB,CAAC,GAAqC,MAAc;AAClD,YAAM,WAAW,IAAK,IAAI;AAC1B,UAAI,OAAO;AACX,UAAI,QAAuB;AAC3B,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AACH,iBAAO;AACP;AAAA,QACF,KAAK;AACH,iBAAO;AACP;AAAA,QACF,KAAK;AACH,iBAAO;AACP;AAAA,QACF,KAAK;AACH,iBAAO;AACP;AAAA,QACF,KAAK;AACH,iBAAO;AACP,kBAAQ;AACR;AAAA,QACF,KAAK;AACH,iBAAO;AACP,kBAAQ,WAAW;AACnB;AAAA,QACF;AACE;AAAA,MACJ;AACA,QAAE,eAAe;AACjB,UAAI,OAAO,SAAS,IAAI;AACxB,aACE,QAAQ,KACR,OAAO,SAAS,UAChB,eAAe,SAAS,IAAI,EAAE,IAAI,GAClC;AACA,gBAAQ;AAAA,MACV;AACA,UAAI,OAAO,KAAK,QAAQ,SAAS,OAAQ;AACzC,yBAAmB,IAAI;AACvB,cAAQ,QAAQ,IAAI,GAAG,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,gBAAgB,sBAAsB,IAAI,IAAI,UAAU,wBAAwB,SAAS,GAAI,GAAG,MACjH;AAAA,yBAAC,SAAI,WAAU,wBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,UAAU,EAAE;AAAA,UAC3B,cAAY;AAAA,UAEZ,8BAAC,QAAK,OAAM,gBAAe,MAAM,IAAI;AAAA;AAAA,MACvC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACT,UAAU,SAAS;AAAA,UACnB,cAAY,SAAS,SAAS,SAAY;AAAA,UAEzC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,UAAU,CAAC;AAAA,UAC1B,cAAY;AAAA,UAEZ,8BAAC,QAAK,OAAM,iBAAgB,MAAM,IAAI;AAAA;AAAA,MACxC;AAAA,OACF;AAAA,IAEC,SAAS,SACR,iCACE;AAAA,0BAAC,SAAI,WAAU,0BAAyB,eAAY,QACjD,mBAAS,IAAI,CAAC,MACb,oBAAC,SAAY,WAAU,yBAAyB,eAAtC,CAAwC,CACnD,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,sBAAqB,MAAK,QACtC,gBAAM,KAAK,EAAE,QAAQ,SAAS,SAAS,EAAE,GAAG,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,QAK/C,oBAAC,SAAe,MAAK,OAAM,WAAU,0BAClC,mBAAS,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,QAAQ,GAAG,QAAQ;AACtE,gBAAM,IAAI,OAAO,IAAI;AACrB,gBAAM,UAAU,QAAQ,MAAM,SAAS;AACvC,gBAAM,UAAU,QAAQ,MAAM,YAAY;AAC1C,gBAAM,QAAQ,CAAC,CAAC,cAAc,QAAQ,MAAM,UAAU;AACtD,gBAAM,aAAa,CAAC,eAAe;AACnC,gBAAM,eAAe,eAAe;AACpC,gBAAM,aAAa,eAAe;AAClC,gBAAM,YAAY,kBAAkB,MAAM,cAAc,UAAU;AAClE,gBAAM,WAAW,aAAa,IAAI,KAAK;AACvC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,KAAK,CAAC,OAAO;AACX,wBAAQ,QAAQ,CAAC,IAAI;AAAA,cACvB;AAAA,cACA,MAAK;AAAA,cACL,MAAK;AAAA,cACL;AAAA,cACA,UAAU,MAAM,kBAAkB,IAAI;AAAA,cACtC,SAAS,MAAM;AACb,+BAAe,MAAM,SAAS,QAAQ;AACtC,oBAAI,CAAC,YAAY,CAAC,QAAS,oBAAmB,CAAC;AAAA,cACjD;AAAA,cACA,WAAW,CAAC,MAAM,iBAAiB,GAAG,CAAC;AAAA,cACvC,cAAc,MAAM,iBAAiB,MAAM,QAAQ;AAAA,cACnD,cAAc,MAAM,iBAAiB,IAAI;AAAA,cACzC,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,gBAAgB;AAAA,gBAChB,cAAc;AAAA,gBACd,aAAa;AAAA,gBACb,YAAY;AAAA,cACd;AAAA,cACA,iBAAe,cAAc,gBAAgB,cAAc;AAAA,cAC3D,gBAAc,UAAU,SAAS;AAAA,cAEhC,eAAK,QAAQ;AAAA;AAAA,YA5BT;AAAA,UA6BP;AAAA,QAEJ,CAAC,KA5CO,IA6CV;AAAA,OACD,GACH;AAAA,OACF;AAAA,IAGD,SAAS,WACR,oBAAC,SAAI,WAAU,wBAAuB,MAAK,QACxC,0BAAgB,IAAI,CAAC,MAAM,MAAM;AAChC,YAAM,OAAO,aAAa,YAAY;AACtC,YAAM,YAAY,UAAU,YAAY,MAAM,QAAQ,UAAU,SAAS,MAAM;AAC/E,YAAM,aAAa,uBAAuB,MAAM,GAAG,YAAY;AAC/D,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAS,MAAM,iBAAiB,CAAC;AAAA,UACjC,WAAW;AAAA,YACT;AAAA,YACA,aAAa;AAAA,YACb,cAAc;AAAA,UAChB;AAAA,UACA,iBAAe,cAAc;AAAA,UAC7B,gBAAc,YAAY,SAAS;AAAA,UAElC;AAAA;AAAA,QAZI;AAAA,MAaP;AAAA,IAEJ,CAAC,GACH;AAAA,IAGD,SAAS,UACR,oBAAC,SAAI,WAAU,uBAAsB,MAAK,QACvC,gBAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,CAAC,GAAG,MAAM;AACjD,YAAM,OAAO,eAAe,aAAa,YAAY,CAAC,IAAI;AAC1D,YAAM,YAAY,UAAU,YAAY,MAAM;AAC9C,YAAM,aAAa,sBAAsB,MAAM,YAAY;AAC3D,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAS,MAAM,gBAAgB,IAAI;AAAA,UACnC,WAAW;AAAA,YACT;AAAA,YACA,aAAa;AAAA,YACb,cAAc;AAAA,UAChB;AAAA,UACA,iBAAe,cAAc;AAAA,UAC7B,gBAAc,YAAY,SAAS;AAAA,UAElC;AAAA;AAAA,QAZI;AAAA,MAaP;AAAA,IAEJ,CAAC,GACH;AAAA,IAOF,oBAAC,SAAI,WAAU,wBACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,UAAU,aAAa,SAAS;AAAA,QAChC,SAAS,MAAM;AACb,kBAAQ,KAAK;AACb,mBAAS,IAAI,KAAK,UAAU,YAAY,GAAG,UAAU,SAAS,GAAG,CAAC,CAAC;AAAA,QACrE;AAAA,QACD;AAAA;AAAA,IAED,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/calendar/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var calendar_exports = {};
+module.exports = __toCommonJS(calendar_exports);
+__reExport(calendar_exports, require("./calendar.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./calendar.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/calendar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/calendar/index.ts"],"sourcesContent":["export * from './calendar';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,uBAAd;","names":[]}

package/dist/ui/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './calendar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/ui/calendar/index.js

@@ -0,0 +1,2 @@
+export * from "./calendar.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/calendar/index.ts"],"sourcesContent":["export * from './calendar';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/card/card-preview.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var card_preview_exports = {};
+__export(card_preview_exports, {
+  CardPreview: () => CardPreview
+});
+module.exports = __toCommonJS(card_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+function CardPreview({ styles, variants }) {
+  const [name, setName] = (0, import_react.useState)("Dental Customer Onboarding");
+  const [status, setStatus] = (0, import_react.useState)("Active");
+  const [owner, setOwner] = (0, import_react.useState)("Dr. Smith");
+  const rows = [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.FormField, { label: "Name", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.EditableCell,
+      {
+        type: "text",
+        value: name,
+        "aria-label": "Name",
+        onCommit: (next) => setName(String(next))
+      }
+    ) }, "name"),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.FormField, { label: "Status", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.EditableCell,
+      {
+        type: "text",
+        value: status,
+        "aria-label": "Status",
+        onCommit: (next) => setStatus(String(next))
+      }
+    ) }, "status"),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.FormField, { label: "Owner", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.EditableCell,
+      {
+        type: "text",
+        value: owner,
+        "aria-label": "Owner",
+        onCommit: (next) => setOwner(String(next))
+      }
+    ) }, "owner")
+  ];
+  const content = variants.contentLayout === "cluster" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.Cluster,
+    {
+      align: variants.clusterAlign ?? "center",
+      justify: variants.justify ?? "start",
+      wrap: (variants.wrap ?? "wrap") === "wrap",
+      children: rows
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Stack, { align: variants.stackAlign ?? "stretch", children: rows });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ui.Card,
+    {
+      shadow: true,
+      padding: styles.padding,
+      gap: styles.gap,
+      style: {
+        ["--uxm-card-bg"]: styles.backgroundColor,
+        ["--uxm-card-border-color"]: styles.borderColor,
+        ["--uxm-card-radius"]: `${styles.borderRadius}px`,
+        // Tunable shadow — same var surface a production consumer re-themes.
+        ["--uxm-card-shadow-color"]: styles.shadowColor,
+        ["--uxm-card-shadow-blur"]: `${styles.shadowBlur}px`,
+        ["--uxm-card-shadow-offset-y"]: `${styles.shadowOffsetY}px`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 15, fontWeight: 600, color: "var(--color-text)" }, children: "Analytics Dashboard" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "var(--color-text-muted)", marginTop: 2 }, children: "Updated 2 hours ago" })
+        ] }),
+        content
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardPreview
+});
+//# sourceMappingURL=card-preview.cjs.map

package/dist/ui/card/card-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/card-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Card, Cluster, EditableCell, FormField, Stack } from '@/ui';\n\nexport function CardPreview({ styles, variants }: PreviewProps) {\n  const [name, setName] = useState('Dental Customer Onboarding');\n  const [status, setStatus] = useState('Active');\n  const [owner, setOwner] = useState('Dr. Smith');\n\n  // Explicit aria-labels: composed inside a labelled FormField an\n  // EditableCell's `htmlFor` can't attach (its display state is a button\n  // that takes no `id`), so the cell names itself — the pattern the\n  // FormField README prescribes. (Want divided rows? Compose the Divider\n  // atom between rows — it's not a Card concern.)\n  const rows = [\n    <FormField key=\"name\" label=\"Name\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={name}\n        aria-label=\"Name\"\n        onCommit={(next) => setName(String(next))}\n      />\n    </FormField>,\n    <FormField key=\"status\" label=\"Status\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={status}\n        aria-label=\"Status\"\n        onCommit={(next) => setStatus(String(next))}\n      />\n    </FormField>,\n    <FormField key=\"owner\" label=\"Owner\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={owner}\n        aria-label=\"Owner\"\n        onCommit={(next) => setOwner(String(next))}\n      />\n    </FormField>,\n  ];\n\n  // The Content Layout variant switches the CONTENT group's arrangement only —\n  // the header above stays stacked on top either way. Alignment comes from\n  // VARIANTS, not styles: Stack/Cluster drive it with modifier classes, so\n  // there's no var a saved override could write (see the registry note). No\n  // `gap` is passed either — the row gap belongs to the nested atom and is\n  // themed by ITS own knob, so leaving it off previews what a consumer gets.\n  const content =\n    variants.contentLayout === 'cluster' ? (\n      <Cluster\n        align={(variants.clusterAlign as 'start' | 'center' | 'end' | 'baseline') ?? 'center'}\n        justify={(variants.justify as 'start' | 'center' | 'end' | 'between') ?? 'start'}\n        wrap={(variants.wrap ?? 'wrap') === 'wrap'}\n      >\n        {rows}\n      </Cluster>\n    ) : (\n      <Stack align={(variants.stackAlign as 'start' | 'center' | 'end' | 'stretch') ?? 'stretch'}>\n        {rows}\n      </Stack>\n    );\n\n  return (\n    <Card\n      // Always on in the preview — with/without shadow is a value state\n      // (zero the Offset/Blur knobs for a flat card); consumers opt in/out\n      // in code via the `shadow` prop.\n      shadow\n      padding={styles.padding as number}\n      // Card's own `gap` lays out its direct children in a column and spaces\n      // them — here the header and the content group — so it reads as the\n      // header ↔ content gap.\n      gap={styles.gap as number}\n      style={{\n        ['--uxm-card-bg' as string]: styles.backgroundColor as string,\n        ['--uxm-card-border-color' as string]: styles.borderColor as string,\n        ['--uxm-card-radius' as string]: `${styles.borderRadius}px`,\n        // Tunable shadow — same var surface a production consumer re-themes.\n        ['--uxm-card-shadow-color' as string]: styles.shadowColor as string,\n        ['--uxm-card-shadow-blur' as string]: `${styles.shadowBlur}px`,\n        ['--uxm-card-shadow-offset-y' as string]: `${styles.shadowOffsetY}px`,\n      }}\n    >\n      {/* Optional header — NOT a Card prop, just composed content the page\n          author drops in. Its distance from the content below is Card's gap. */}\n      <div>\n        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)' }}>\n          Analytics Dashboard\n        </div>\n        <div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 2 }}>\n          Updated 2 hours ago\n        </div>\n      </div>\n\n      {/* Content group — Stack or Cluster per the Layout knob. Its own gap\n          (Row Gap) spaces the rows independently of the header gap above. */}\n      {content}\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBM;AAjBN,mBAAyB;AAGzB,gBAA8D;AAEvD,SAAS,YAAY,EAAE,QAAQ,SAAS,GAAiB;AAC9D,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,4BAA4B;AAC7D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,QAAQ;AAC7C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,WAAW;AAO9C,QAAM,OAAO;AAAA,IACX,4CAAC,uBAAqB,OAAM,QAAO,eAAc,QAAO,WAAU,SAChE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,QAAQ,OAAO,IAAI,CAAC;AAAA;AAAA,IAC1C,KANa,MAOf;AAAA,IACA,4CAAC,uBAAuB,OAAM,UAAS,eAAc,QAAO,WAAU,SACpE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,UAAU,OAAO,IAAI,CAAC;AAAA;AAAA,IAC5C,KANa,QAOf;AAAA,IACA,4CAAC,uBAAsB,OAAM,SAAQ,eAAc,QAAO,WAAU,SAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,SAAS,OAAO,IAAI,CAAC;AAAA;AAAA,IAC3C,KANa,OAOf;AAAA,EACF;AAQA,QAAM,UACJ,SAAS,kBAAkB,YACzB;AAAA,IAAC;AAAA;AAAA,MACC,OAAQ,SAAS,gBAA4D;AAAA,MAC7E,SAAU,SAAS,WAAsD;AAAA,MACzE,OAAO,SAAS,QAAQ,YAAY;AAAA,MAEnC;AAAA;AAAA,EACH,IAEA,4CAAC,mBAAM,OAAQ,SAAS,cAAyD,WAC9E,gBACH;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MAIC,QAAM;AAAA,MACN,SAAS,OAAO;AAAA,MAIhB,KAAK,OAAO;AAAA,MACZ,OAAO;AAAA,QACL,CAAC,eAAyB,GAAG,OAAO;AAAA,QACpC,CAAC,yBAAmC,GAAG,OAAO;AAAA,QAC9C,CAAC,mBAA6B,GAAG,GAAG,OAAO,YAAY;AAAA;AAAA,QAEvD,CAAC,yBAAmC,GAAG,OAAO;AAAA,QAC9C,CAAC,wBAAkC,GAAG,GAAG,OAAO,UAAU;AAAA,QAC1D,CAAC,4BAAsC,GAAG,GAAG,OAAO,aAAa;AAAA,MACnE;AAAA,MAIA;AAAA,qDAAC,SACC;AAAA,sDAAC,SAAI,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,oBAAoB,GAAG,iCAE3E;AAAA,UACA,4CAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,WAAW,EAAE,GAAG,iCAE9E;AAAA,WACF;AAAA,QAIC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ui/card/card-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function CardPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=card-preview.d.ts.map

package/dist/ui/card/card-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/card/card-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA+F7D"}

package/dist/ui/card/card-preview.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Card, Cluster, EditableCell, FormField, Stack } from "../../ui/index.js";
+function CardPreview({ styles, variants }) {
+  const [name, setName] = useState("Dental Customer Onboarding");
+  const [status, setStatus] = useState("Active");
+  const [owner, setOwner] = useState("Dr. Smith");
+  const rows = [
+    /* @__PURE__ */ jsx(FormField, { label: "Name", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ jsx(
+      EditableCell,
+      {
+        type: "text",
+        value: name,
+        "aria-label": "Name",
+        onCommit: (next) => setName(String(next))
+      }
+    ) }, "name"),
+    /* @__PURE__ */ jsx(FormField, { label: "Status", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ jsx(
+      EditableCell,
+      {
+        type: "text",
+        value: status,
+        "aria-label": "Status",
+        onCommit: (next) => setStatus(String(next))
+      }
+    ) }, "status"),
+    /* @__PURE__ */ jsx(FormField, { label: "Owner", labelPosition: "side", labelTint: "muted", children: /* @__PURE__ */ jsx(
+      EditableCell,
+      {
+        type: "text",
+        value: owner,
+        "aria-label": "Owner",
+        onCommit: (next) => setOwner(String(next))
+      }
+    ) }, "owner")
+  ];
+  const content = variants.contentLayout === "cluster" ? /* @__PURE__ */ jsx(
+    Cluster,
+    {
+      align: variants.clusterAlign ?? "center",
+      justify: variants.justify ?? "start",
+      wrap: (variants.wrap ?? "wrap") === "wrap",
+      children: rows
+    }
+  ) : /* @__PURE__ */ jsx(Stack, { align: variants.stackAlign ?? "stretch", children: rows });
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      shadow: true,
+      padding: styles.padding,
+      gap: styles.gap,
+      style: {
+        ["--uxm-card-bg"]: styles.backgroundColor,
+        ["--uxm-card-border-color"]: styles.borderColor,
+        ["--uxm-card-radius"]: `${styles.borderRadius}px`,
+        // Tunable shadow — same var surface a production consumer re-themes.
+        ["--uxm-card-shadow-color"]: styles.shadowColor,
+        ["--uxm-card-shadow-blur"]: `${styles.shadowBlur}px`,
+        ["--uxm-card-shadow-offset-y"]: `${styles.shadowOffsetY}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 600, color: "var(--color-text)" }, children: "Analytics Dashboard" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--color-text-muted)", marginTop: 2 }, children: "Updated 2 hours ago" })
+        ] }),
+        content
+      ]
+    }
+  );
+}
+export {
+  CardPreview
+};
+//# sourceMappingURL=card-preview.js.map

package/dist/ui/card/card-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/card-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Card, Cluster, EditableCell, FormField, Stack } from '@/ui';\n\nexport function CardPreview({ styles, variants }: PreviewProps) {\n  const [name, setName] = useState('Dental Customer Onboarding');\n  const [status, setStatus] = useState('Active');\n  const [owner, setOwner] = useState('Dr. Smith');\n\n  // Explicit aria-labels: composed inside a labelled FormField an\n  // EditableCell's `htmlFor` can't attach (its display state is a button\n  // that takes no `id`), so the cell names itself — the pattern the\n  // FormField README prescribes. (Want divided rows? Compose the Divider\n  // atom between rows — it's not a Card concern.)\n  const rows = [\n    <FormField key=\"name\" label=\"Name\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={name}\n        aria-label=\"Name\"\n        onCommit={(next) => setName(String(next))}\n      />\n    </FormField>,\n    <FormField key=\"status\" label=\"Status\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={status}\n        aria-label=\"Status\"\n        onCommit={(next) => setStatus(String(next))}\n      />\n    </FormField>,\n    <FormField key=\"owner\" label=\"Owner\" labelPosition=\"side\" labelTint=\"muted\">\n      <EditableCell\n        type=\"text\"\n        value={owner}\n        aria-label=\"Owner\"\n        onCommit={(next) => setOwner(String(next))}\n      />\n    </FormField>,\n  ];\n\n  // The Content Layout variant switches the CONTENT group's arrangement only —\n  // the header above stays stacked on top either way. Alignment comes from\n  // VARIANTS, not styles: Stack/Cluster drive it with modifier classes, so\n  // there's no var a saved override could write (see the registry note). No\n  // `gap` is passed either — the row gap belongs to the nested atom and is\n  // themed by ITS own knob, so leaving it off previews what a consumer gets.\n  const content =\n    variants.contentLayout === 'cluster' ? (\n      <Cluster\n        align={(variants.clusterAlign as 'start' | 'center' | 'end' | 'baseline') ?? 'center'}\n        justify={(variants.justify as 'start' | 'center' | 'end' | 'between') ?? 'start'}\n        wrap={(variants.wrap ?? 'wrap') === 'wrap'}\n      >\n        {rows}\n      </Cluster>\n    ) : (\n      <Stack align={(variants.stackAlign as 'start' | 'center' | 'end' | 'stretch') ?? 'stretch'}>\n        {rows}\n      </Stack>\n    );\n\n  return (\n    <Card\n      // Always on in the preview — with/without shadow is a value state\n      // (zero the Offset/Blur knobs for a flat card); consumers opt in/out\n      // in code via the `shadow` prop.\n      shadow\n      padding={styles.padding as number}\n      // Card's own `gap` lays out its direct children in a column and spaces\n      // them — here the header and the content group — so it reads as the\n      // header ↔ content gap.\n      gap={styles.gap as number}\n      style={{\n        ['--uxm-card-bg' as string]: styles.backgroundColor as string,\n        ['--uxm-card-border-color' as string]: styles.borderColor as string,\n        ['--uxm-card-radius' as string]: `${styles.borderRadius}px`,\n        // Tunable shadow — same var surface a production consumer re-themes.\n        ['--uxm-card-shadow-color' as string]: styles.shadowColor as string,\n        ['--uxm-card-shadow-blur' as string]: `${styles.shadowBlur}px`,\n        ['--uxm-card-shadow-offset-y' as string]: `${styles.shadowOffsetY}px`,\n      }}\n    >\n      {/* Optional header — NOT a Card prop, just composed content the page\n          author drops in. Its distance from the content below is Card's gap. */}\n      <div>\n        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)' }}>\n          Analytics Dashboard\n        </div>\n        <div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 2 }}>\n          Updated 2 hours ago\n        </div>\n      </div>\n\n      {/* Content group — Stack or Cluster per the Layout knob. Its own gap\n          (Row Gap) spaces the rows independently of the header gap above. */}\n      {content}\n    </Card>\n  );\n}\n"],"mappings":"AAiBM,cAqEA,YArEA;AAjBN,SAAS,gBAAgB;AAGzB,SAAS,MAAM,SAAS,cAAc,WAAW,aAAa;AAEvD,SAAS,YAAY,EAAE,QAAQ,SAAS,GAAiB;AAC9D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,4BAA4B;AAC7D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,WAAW;AAO9C,QAAM,OAAO;AAAA,IACX,oBAAC,aAAqB,OAAM,QAAO,eAAc,QAAO,WAAU,SAChE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,QAAQ,OAAO,IAAI,CAAC;AAAA;AAAA,IAC1C,KANa,MAOf;AAAA,IACA,oBAAC,aAAuB,OAAM,UAAS,eAAc,QAAO,WAAU,SACpE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,UAAU,OAAO,IAAI,CAAC;AAAA;AAAA,IAC5C,KANa,QAOf;AAAA,IACA,oBAAC,aAAsB,OAAM,SAAQ,eAAc,QAAO,WAAU,SAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAW;AAAA,QACX,UAAU,CAAC,SAAS,SAAS,OAAO,IAAI,CAAC;AAAA;AAAA,IAC3C,KANa,OAOf;AAAA,EACF;AAQA,QAAM,UACJ,SAAS,kBAAkB,YACzB;AAAA,IAAC;AAAA;AAAA,MACC,OAAQ,SAAS,gBAA4D;AAAA,MAC7E,SAAU,SAAS,WAAsD;AAAA,MACzE,OAAO,SAAS,QAAQ,YAAY;AAAA,MAEnC;AAAA;AAAA,EACH,IAEA,oBAAC,SAAM,OAAQ,SAAS,cAAyD,WAC9E,gBACH;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MAIC,QAAM;AAAA,MACN,SAAS,OAAO;AAAA,MAIhB,KAAK,OAAO;AAAA,MACZ,OAAO;AAAA,QACL,CAAC,eAAyB,GAAG,OAAO;AAAA,QACpC,CAAC,yBAAmC,GAAG,OAAO;AAAA,QAC9C,CAAC,mBAA6B,GAAG,GAAG,OAAO,YAAY;AAAA;AAAA,QAEvD,CAAC,yBAAmC,GAAG,OAAO;AAAA,QAC9C,CAAC,wBAAkC,GAAG,GAAG,OAAO,UAAU;AAAA,QAC1D,CAAC,4BAAsC,GAAG,GAAG,OAAO,aAAa;AAAA,MACnE;AAAA,MAIA;AAAA,6BAAC,SACC;AAAA,8BAAC,SAAI,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,oBAAoB,GAAG,iCAE3E;AAAA,UACA,oBAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,WAAW,EAAE,GAAG,iCAE9E;AAAA,WACF;AAAA,QAIC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ui/card/card.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var card_exports = {};
+__export(card_exports, {
+  Card: () => Card
+});
+module.exports = __toCommonJS(card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+const toLen = (v) => typeof v === "number" ? `${v}px` : v;
+function Card({
+  className,
+  shadow,
+  padding,
+  gap,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...padding != null ? { ["--uxm-card-padding"]: toLen(padding) } : null,
+    // Explicit gap value → per-instance override of the `--uxm-card-gap` var
+    // the `--gap` modifier reads. `gap={true}` sets no var, so the themed
+    // default (workbench knob / stylesheet) owns the rhythm.
+    ...gap != null && typeof gap !== "boolean" ? { ["--uxm-card-gap"]: toLen(gap) } : null,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-card",
+        shadow && "uxm-card--shadow",
+        // A vertical column only when a gap is requested — otherwise a plain
+        // block, so existing cards are unaffected.
+        gap != null && gap !== false && "uxm-card--gap",
+        className
+      ),
+      style: mergedStyle,
+      ...rest
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});
+//# sourceMappingURL=card.cjs.map

package/dist/ui/card/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/card.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  shadow?: boolean;\n  /**\n   * Inner padding of the card surface. Number → px (`24` → `24px`); string\n   * passed through. Any value — no fixed scale. Sets `--uxm-card-padding`;\n   * omitted, the CSS fallback (24px) applies.\n   */\n  padding?: number | string;\n  /**\n   * Vertical gap between the card's direct children — e.g. a header and the\n   * content group below it. When set, the card lays its children out as a\n   * column (the `uxm-card--gap` modifier) with this gap. Pass `true` to opt\n   * into the column with the themed default gap (`--uxm-card-gap`, editable\n   * in the workbench) instead of a per-instance value.\n   *\n   * The card does NOT own the arrangement *within* the content. If you want\n   * rows, a horizontal cluster, or a grid, compose a `Stack`/`Cluster`/\n   * `ResponsiveGrid` as a child — that layout applies to the content only and\n   * leaves the header untouched.\n   */\n  gap?: number | string | boolean;\n}\n\nconst toLen = (v: number | string): string => (typeof v === 'number' ? `${v}px` : v);\n\n/**\n * `Card` — a surface primitive (background, border, radius, padding, optional\n * shadow) with an optional vertical `gap` between its direct children. It is\n * deliberately unopinionated about content layout: arrange the content by\n * composing `Stack`/`Cluster`/`ResponsiveGrid` inside, so the arrangement\n * scopes to the content and a header stacked above it stays put.\n */\nexport function Card({\n  className,\n  shadow,\n  padding,\n  gap,\n  style,\n  ...rest\n}: CardProps) {\n  const mergedStyle: CSSProperties = {\n    ...(padding != null ? { ['--uxm-card-padding' as string]: toLen(padding) } : null),\n    // Explicit gap value → per-instance override of the `--uxm-card-gap` var\n    // the `--gap` modifier reads. `gap={true}` sets no var, so the themed\n    // default (workbench knob / stylesheet) owns the rhythm.\n    ...(gap != null && typeof gap !== 'boolean'\n      ? { ['--uxm-card-gap' as string]: toLen(gap) }\n      : null),\n    ...style,\n  };\n\n  return (\n    <div\n      className={cn(\n        'uxm-card',\n        shadow && 'uxm-card--shadow',\n        // A vertical column only when a gap is requested — otherwise a plain\n        // block, so existing cards are unaffected.\n        gap != null && gap !== false && 'uxm-card--gap',\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAxDJ,qBAAmB;AA2BnB,MAAM,QAAQ,CAAC,MAAgC,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAS3E,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,cAA6B;AAAA,IACjC,GAAI,WAAW,OAAO,EAAE,CAAC,oBAA8B,GAAG,MAAM,OAAO,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7E,GAAI,OAAO,QAAQ,OAAO,QAAQ,YAC9B,EAAE,CAAC,gBAA0B,GAAG,MAAM,GAAG,EAAE,IAC3C;AAAA,IACJ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA;AAAA;AAAA,QAGV,OAAO,QAAQ,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/ui/card/card.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/* ── card ── */
+/* Card — every registry knob is a CSS variable. The shadow toggle from
+   the registry stays as a modifier class; consumers either include the
+   `uxm-card--shadow` class or don't (matches the boolean nature of the knob).
+   Content layout (arrangement within the content) is delegated to the
+   Stack/Cluster atoms — the card itself only owns the optional column gap
+   between its direct children (the `--gap` modifier below). */
+.uxm-card {
+  background-color: var(--uxm-card-bg, var(--color-card));
+  border: 1px solid var(--uxm-card-border-color, var(--color-border));
+  border-radius: var(--uxm-card-radius, 4px);
+  padding: var(--uxm-card-padding, 24px);
+  /* Opt-in column layout — applied by the `gap` prop. The gap itself lives
+     in `--uxm-card-gap` so a per-instance prop value and a workbench-saved
+     override round-trip through the same variable. */
+}
+.uxm-card--gap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uxm-card-gap, 16px);
+}
+.uxm-card {
+  /* Elevation — gated by the `shadow` prop, tunable through the
+     `--uxm-card-shadow-*` vars (colour / blur / vertical offset) rather than
+     a fixed token, mirroring Calendar's shadow.
+
+     ⚠️ This is a deliberate STEP UP in elevation, not a refactor of the old
+     value. `shadow` used to paint `--shadow-card`, a very subtle two-layer
+     shadow (`0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04)` light).
+     The 6/20 geometry here is Calendar's floating-surface shadow — the
+     `--shadow-lg` step — at roughly 3× the alpha, so every existing
+     `<Card shadow>` reads more lifted than before. Intended; noted because
+     the numbers are NOT the token's and shouldn't be read as tracking it.
+
+     `--shadow-card` itself stays in the token layer as a public elevation
+     alias (consumers may paint it themselves, same as `--shadow-lg`, which
+     also has no internal reader) — it just can't be routed in as the default
+     here, because this composition needs a COLOUR and the token is a whole
+     `box-shadow`.
+
+     The DEFAULT colour is theme-aware via the internal
+     `--uxm-card-shadow-default` (dark override below) — an explicit
+     `--uxm-card-shadow-color` wins in both themes, so a workbench-saved
+     colour tuned for light will also apply on dark. */
+}
+.uxm-card--shadow {
+  --uxm-card-shadow-default: rgba(0, 0, 0, 0.12);
+  box-shadow: 0 var(--uxm-card-shadow-offset-y, 6px) var(--uxm-card-shadow-blur, 20px) var(--uxm-card-shadow-color, var(--uxm-card-shadow-default));
+}
+
+[data-theme=dark] .uxm-card--shadow {
+  --uxm-card-shadow-default: rgba(0, 0, 0, 0.3);
+}

package/dist/ui/card/card.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    shadow?: boolean;
+    /**
+     * Inner padding of the card surface. Number → px (`24` → `24px`); string
+     * passed through. Any value — no fixed scale. Sets `--uxm-card-padding`;
+     * omitted, the CSS fallback (24px) applies.
+     */
+    padding?: number | string;
+    /**
+     * Vertical gap between the card's direct children — e.g. a header and the
+     * content group below it. When set, the card lays its children out as a
+     * column (the `uxm-card--gap` modifier) with this gap. Pass `true` to opt
+     * into the column with the themed default gap (`--uxm-card-gap`, editable
+     * in the workbench) instead of a per-instance value.
+     *
+     * The card does NOT own the arrangement *within* the content. If you want
+     * rows, a horizontal cluster, or a grid, compose a `Stack`/`Cluster`/
+     * `ResponsiveGrid` as a child — that layout applies to the content only and
+     * leaves the header untouched.
+     */
+    gap?: number | string | boolean;
+}
+/**
+ * `Card` — a surface primitive (background, border, radius, padding, optional
+ * shadow) with an optional vertical `gap` between its direct children. It is
+ * deliberately unopinionated about content layout: arrange the content by
+ * composing `Stack`/`Cluster`/`ResponsiveGrid` inside, so the arrangement
+ * scopes to the content and a header stacked above it stays put.
+ */
+export declare function Card({ className, shadow, padding, gap, style, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/ui/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/ui/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACjC;AAID;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,SAAS,EACT,MAAM,EACN,OAAO,EACP,GAAG,EACH,KAAK,EACL,GAAG,IAAI,EACR,EAAE,SAAS,2CA0BX"}

package/dist/ui/card/card.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+const toLen = (v) => typeof v === "number" ? `${v}px` : v;
+function Card({
+  className,
+  shadow,
+  padding,
+  gap,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...padding != null ? { ["--uxm-card-padding"]: toLen(padding) } : null,
+    // Explicit gap value → per-instance override of the `--uxm-card-gap` var
+    // the `--gap` modifier reads. `gap={true}` sets no var, so the themed
+    // default (workbench knob / stylesheet) owns the rhythm.
+    ...gap != null && typeof gap !== "boolean" ? { ["--uxm-card-gap"]: toLen(gap) } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "uxm-card",
+        shadow && "uxm-card--shadow",
+        // A vertical column only when a gap is requested — otherwise a plain
+        // block, so existing cards are unaffected.
+        gap != null && gap !== false && "uxm-card--gap",
+        className
+      ),
+      style: mergedStyle,
+      ...rest
+    }
+  );
+}
+export {
+  Card
+};
+//# sourceMappingURL=card.js.map

package/dist/ui/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/card.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  shadow?: boolean;\n  /**\n   * Inner padding of the card surface. Number → px (`24` → `24px`); string\n   * passed through. Any value — no fixed scale. Sets `--uxm-card-padding`;\n   * omitted, the CSS fallback (24px) applies.\n   */\n  padding?: number | string;\n  /**\n   * Vertical gap between the card's direct children — e.g. a header and the\n   * content group below it. When set, the card lays its children out as a\n   * column (the `uxm-card--gap` modifier) with this gap. Pass `true` to opt\n   * into the column with the themed default gap (`--uxm-card-gap`, editable\n   * in the workbench) instead of a per-instance value.\n   *\n   * The card does NOT own the arrangement *within* the content. If you want\n   * rows, a horizontal cluster, or a grid, compose a `Stack`/`Cluster`/\n   * `ResponsiveGrid` as a child — that layout applies to the content only and\n   * leaves the header untouched.\n   */\n  gap?: number | string | boolean;\n}\n\nconst toLen = (v: number | string): string => (typeof v === 'number' ? `${v}px` : v);\n\n/**\n * `Card` — a surface primitive (background, border, radius, padding, optional\n * shadow) with an optional vertical `gap` between its direct children. It is\n * deliberately unopinionated about content layout: arrange the content by\n * composing `Stack`/`Cluster`/`ResponsiveGrid` inside, so the arrangement\n * scopes to the content and a header stacked above it stays put.\n */\nexport function Card({\n  className,\n  shadow,\n  padding,\n  gap,\n  style,\n  ...rest\n}: CardProps) {\n  const mergedStyle: CSSProperties = {\n    ...(padding != null ? { ['--uxm-card-padding' as string]: toLen(padding) } : null),\n    // Explicit gap value → per-instance override of the `--uxm-card-gap` var\n    // the `--gap` modifier reads. `gap={true}` sets no var, so the themed\n    // default (workbench knob / stylesheet) owns the rhythm.\n    ...(gap != null && typeof gap !== 'boolean'\n      ? { ['--uxm-card-gap' as string]: toLen(gap) }\n      : null),\n    ...style,\n  };\n\n  return (\n    <div\n      className={cn(\n        'uxm-card',\n        shadow && 'uxm-card--shadow',\n        // A vertical column only when a gap is requested — otherwise a plain\n        // block, so existing cards are unaffected.\n        gap != null && gap !== false && 'uxm-card--gap',\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    />\n  );\n}\n"],"mappings":"AAwDI;AAxDJ,SAAS,UAAU;AA2BnB,MAAM,QAAQ,CAAC,MAAgC,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAS3E,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,cAA6B;AAAA,IACjC,GAAI,WAAW,OAAO,EAAE,CAAC,oBAA8B,GAAG,MAAM,OAAO,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7E,GAAI,OAAO,QAAQ,OAAO,QAAQ,YAC9B,EAAE,CAAC,gBAA0B,GAAG,MAAM,GAAG,EAAE,IAC3C;AAAA,IACJ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA;AAAA;AAAA,QAGV,OAAO,QAAQ,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/ui/card/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var card_exports = {};
+module.exports = __toCommonJS(card_exports);
+__reExport(card_exports, require("./card.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./card.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/card/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/index.ts"],"sourcesContent":["export * from './card';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,mBAAd;","names":[]}

package/dist/ui/card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/ui/card/index.js

@@ -0,0 +1,2 @@
+export * from "./card.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/card/index.ts"],"sourcesContent":["export * from './card';\n"],"mappings":"AAAA,cAAc;","names":[]}