@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/composed/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/composed/command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandPalette -- Keyboard-driven command palette (Ctrl+K / Cmd+K).\n *\n * Adapted from Karm V2. Uses ui/Dialog as the overlay.\n * All V1 color tokens replaced with semantic design-system tokens.\n */\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogContentRaw,\n  DialogTitle,\n  DialogDescription,\n} from '../ui/dialog'\nimport { IconSearch, IconCornerDownLeft, IconArrowUp, IconArrowDown } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { tweens, springs } from '../ui/lib/motion'\nimport { VisuallyHidden } from '../ui/visually-hidden'\nimport { useMotion } from '../motion/motion-provider'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandItem {\n  id: string\n  /** Display label — string or ReactNode. When ReactNode, provide `filterValue` for search filtering. */\n  label: string | React.ReactNode\n  /** Optional description — string or ReactNode. */\n  description?: string | React.ReactNode\n  icon?: React.ReactNode\n  /** Keyboard shortcut hint displayed as keycap badges (e.g., \"G D\", \"Ctrl+N\"). */\n  shortcut?: string\n  /** Custom render override for the label. Receives the current search query for match highlighting. */\n  renderLabel?: (query: string) => React.ReactNode\n  /** Plain-text value used for search filtering when `label` is a ReactNode. Falls back to `label` if string. */\n  filterValue?: string\n  onSelect: () => void\n}\n\nexport interface CommandGroup {\n  label: string\n  items: CommandItem[]\n}\n\n/** A single keyboard hint shown in the footer. */\nexport interface FooterHint {\n  /** Key(s) to display — rendered as text inside `<kbd>` or as an icon. */\n  keys: string\n  /** Human-readable label for the hint (e.g., \"Navigate\", \"Select\"). */\n  label: string\n}\n\n/**\n * A searchable command palette with keyboard navigation (Ctrl+K / Cmd+K).\n * Supports grouped items, custom keybindings, controlled/uncontrolled open state,\n * and custom empty states.\n */\nexport interface CommandPaletteProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Item groups displayed in the palette. Each group has a label and an array of CommandItems. */\n  groups?: CommandGroup[]\n  /** Placeholder text for the search input. */\n  placeholder?: string\n  /** Called on every search input change with the current query string. */\n  onSearch?: (query: string) => void\n  /** Simple text shown when no results match. Overridden by `emptyState` if provided. */\n  emptyMessage?: string\n  /** Full custom empty state ReactNode — overrides `emptyMessage` when provided. */\n  emptyState?: React.ReactNode\n  // -- Controlled/uncontrolled open state (P1 #4) --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state for uncontrolled usage. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  // -- Keyboard shortcut customization (P1 #6) --\n  /** Keybinding(s) to toggle the palette. Pass `false` to disable.\n   *  String format: modifier+key, e.g., 'mod+k', 'ctrl+shift+p'.\n   *  'mod' maps to Meta on macOS, Ctrl otherwise. */\n  keybinding?: string | string[] | false\n  // -- Configurable max-height (P2 #8) --\n  /** Max height of the results container. CSS value. Default '320px'. */\n  maxHeight?: string | number\n  // -- Custom footer hints (P2 #11) --\n  /** Custom footer keyboard hints. Pass `false` to hide the footer entirely. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nimport { getIsMac, matchesKeybinding, getModifierDisplay } from '../ui/lib/keybinding'\n\n/** Get the text-searchable value from a CommandItem. */\nfunction getFilterValue(item: CommandItem): string {\n  if (item.filterValue) return item.filterValue\n  if (typeof item.label === 'string') return item.label\n  return ''\n}\n\n/** Get the text-searchable description from a CommandItem. */\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n/** Parse a shortcut string like \"G D\" or \"Ctrl+N\" into individual keycap segments. */\nfunction parseShortcutKeys(shortcut: string): string[] {\n  // If it has \"+\" separator (Ctrl+Shift+N style), split on +\n  if (shortcut.includes('+')) {\n    return shortcut.split('+').map(s => s.trim()).filter(Boolean)\n  }\n  // Otherwise split on spaces (G D style)\n  return shortcut.split(/\\s+/).filter(Boolean)\n}\n\n// -----------------------------------------------------------------------\n// CommandPalette\n// -----------------------------------------------------------------------\n\nconst CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(\n  function CommandPalette(\n    {\n      groups = [],\n      placeholder = 'Search or jump to...',\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+k',\n      maxHeight = '320px',\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  // -- Controlled/uncontrolled open state --\n  const isControlled = openProp !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = isControlled ? openProp : internalOpen\n\n  // Use a ref for the current open value to avoid stale closures in setOpen\n  const openRef = React.useRef(open)\n  openRef.current = open\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean | ((prev: boolean) => boolean)) => {\n      const resolved = typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n      if (!isControlled) {\n        setInternalOpen(resolved)\n      }\n      onOpenChange?.(resolved)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const listRef = React.useRef<HTMLDivElement>(null)\n  const instanceId = React.useId()\n  const listboxId = `command-palette-listbox-${instanceId}`\n\n  // -- Reduced motion (P2 #12) --\n  const { reducedMotion: isReduced } = useMotion()\n  const noMotionTransition = { duration: 0 }\n\n  // -- Platform detection (P2 #13) --\n  const isMac = React.useMemo(() => getIsMac(), [])\n\n  // Filter groups based on query\n  const filteredGroups = React.useMemo(() => {\n    if (!query.trim()) return groups\n    const q = query.toLowerCase()\n    return groups\n      .map((group) => ({\n        ...group,\n        items: group.items.filter(\n          (item) =>\n            getFilterValue(item).toLowerCase().includes(q) ||\n            getFilterDescription(item).toLowerCase().includes(q),\n        ),\n      }))\n      .filter((group) => group.items.length > 0)\n  }, [groups, query])\n\n  const filteredItems = React.useMemo(\n    () => filteredGroups.flatMap((g) => g.items),\n    [filteredGroups],\n  )\n\n  // Global keyboard shortcut\n  React.useEffect(() => {\n    if (keybinding === false) return\n\n    const bindings = Array.isArray(keybinding) ? keybinding : [keybinding]\n\n    function handleKeyDown(e: KeyboardEvent) {\n      for (const binding of bindings) {\n        if (matchesKeybinding(e, binding)) {\n          e.preventDefault()\n          setOpen((prev) => !prev)\n          return\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [keybinding, setOpen])\n\n  // Reset state when opening\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActiveIndex(0)\n      requestAnimationFrame(() => {\n        inputRef.current?.focus()\n      })\n    }\n  }, [open])\n\n  // Keyboard navigation inside the palette\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev < filteredItems.length - 1 ? prev + 1 : 0,\n        )\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filteredItems.length - 1,\n        )\n        break\n      }\n      case 'Enter': {\n        e.preventDefault()\n        const item = filteredItems[activeIndex]\n        if (item) {\n          item.onSelect()\n          setOpen(false)\n        }\n        break\n      }\n      case 'Escape': {\n        e.preventDefault()\n        setOpen(false)\n        break\n      }\n    }\n  }\n\n  // Scroll active item into view\n  React.useEffect(() => {\n    const activeEl = listRef.current?.querySelector(\n      `[data-command-index=\"${activeIndex}\"]`,\n    )\n    activeEl?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex])\n\n  const handleQueryChange = (value: string) => {\n    setQuery(value)\n    setActiveIndex(0)\n    onSearch?.(value)\n  }\n\n  // Build a map of item id -> flat index for keyboard navigation\n  const itemIndexMap = React.useMemo(() => {\n    const map = new Map<string, number>()\n    let idx = 0\n    for (const group of filteredGroups) {\n      for (const item of group.items) {\n        map.set(item.id, idx++)\n      }\n    }\n    return map\n  }, [filteredGroups])\n\n  // -- Resolve motion transitions --\n  const springSnappy = isReduced ? noMotionTransition : springs.snappy\n  const tweenFade = isReduced ? noMotionTransition : tweens.fade\n  const noInit = isReduced ? { opacity: 1, scale: 1, y: 0 } : undefined\n\n  // -- Resolve max height CSS value --\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n  // -- Resolve footer hints --\n  const resolvedFooterHints: FooterHint[] | false =\n    footerHints === false\n      ? false\n      : footerHints ?? [\n          { keys: '↑↓', label: 'Navigate' },\n          { keys: '↵', label: 'Select' },\n          { keys: 'Esc', label: 'Close' },\n        ]\n\n  // Handle dialog open change (from Dialog's own close mechanisms)\n  const handleDialogOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    },\n    [setOpen],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          className=\"fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n        />\n        <DialogContentRaw\n          ref={ref}\n          {...props}\n          className={cn(\n            'fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2',\n            'overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay',\n            'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n            'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n        >\n          <VisuallyHidden>\n            <DialogTitle>Command Palette</DialogTitle>\n            <DialogDescription>\n              Search or jump to pages, projects, tasks, and actions\n            </DialogDescription>\n          </VisuallyHidden>\n\n          {/* Search input */}\n          <div className=\"flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <motion.span\n              initial={noInit ?? { opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springSnappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n            </motion.span>\n            <input\n              ref={inputRef}\n              value={query}\n              onChange={(e) => handleQueryChange(e.target.value)}\n              placeholder={placeholder}\n              role=\"combobox\"\n              aria-expanded={true}\n              aria-controls={listboxId}\n              aria-activedescendant={filteredItems[activeIndex] ? `command-item-${instanceId}-${filteredItems[activeIndex].id}` : undefined}\n              aria-autocomplete=\"list\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-base text-surface-fg outline-hidden',\n                'placeholder:text-surface-fg-subtle',\n              )}\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n            />\n            <kbd className=\"hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\">\n              Esc\n            </kbd>\n          </div>\n\n          {/* Results */}\n          <div\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-label=\"Command results\"\n            className=\"overflow-y-auto px-ds-03 py-ds-03\"\n            style={{ maxHeight: maxHeightValue }}\n          >\n            {filteredGroups.length === 0 && (\n              <motion.div\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={tweenFade}\n                className=\"flex items-center justify-center py-ds-07\"\n              >\n                {emptyState ?? (\n                  <p className=\"text-ds-md text-surface-fg-subtle\">\n                    {emptyMessage}\n                  </p>\n                )}\n              </motion.div>\n            )}\n\n            {filteredGroups.map((group, groupIdx) => (\n              <motion.div\n                key={group.label}\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={isReduced ? noMotionTransition : { ...tweens.fade, delay: groupIdx * 0.06 }}\n                className=\"mb-ds-02\"\n              >\n                <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                  <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                    {group.label}\n                  </span>\n                </div>\n\n                {group.items.map((item) => {\n                  const itemIndex = itemIndexMap.get(item.id) ?? 0\n                  const isActive = itemIndex === activeIndex\n                  return (\n                    <motion.button\n                      key={item.id}\n                      id={`command-item-${instanceId}-${item.id}`}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-command-index={itemIndex}\n                      initial={noInit ?? { opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={isReduced ? noMotionTransition : { ...springs.snappy, delay: itemIndex * 0.03 }}\n                      onClick={() => {\n                        item.onSelect()\n                        setOpen(false)\n                      }}\n                      onMouseEnter={() => setActiveIndex(itemIndex)}\n                      className={cn(\n                        'flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard',\n                        isActive\n                          ? 'bg-surface-raised-hover text-surface-fg'\n                          : 'text-surface-fg-muted hover:bg-surface-raised',\n                      )}\n                    >\n                      {item.icon && (\n                        <span\n                          className={cn(\n                            '[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n                            isActive ? 'text-accent-11' : 'text-surface-fg-subtle',\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          {item.icon}\n                        </span>\n                      )}\n                      <div className=\"flex flex-1 flex-col\">\n                        <span className=\"text-ds-md\">\n                          {item.renderLabel ? item.renderLabel(query) : item.label}\n                        </span>\n                        {item.description && (\n                          <span className=\"text-ds-sm text-surface-fg-subtle\">\n                            {item.description}\n                          </span>\n                        )}\n                      </div>\n                      {item.shortcut && (\n                        <span className=\"flex shrink-0 items-center gap-ds-01\">\n                          {parseShortcutKeys(item.shortcut).map((key, i) => (\n                            <kbd\n                              key={i}\n                              className={cn(\n                                'inline-flex min-w-[20px] items-center justify-center rounded border px-ds-02b py-ds-01 text-ds-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard',\n                                isActive\n                                  ? 'bg-accent-2 text-accent-11 border-accent-6'\n                                  : 'bg-surface-raised text-surface-fg-subtle border-surface-border-strong',\n                              )}\n                            >\n                              {key === 'Ctrl' || key === 'ctrl' ? getModifierDisplay(isMac) : key}\n                            </kbd>\n                          ))}\n                        </span>\n                      )}\n                      <AnimatePresence>\n                        {isActive && (\n                          <motion.span\n                            initial={isReduced ? undefined : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={isReduced ? undefined : { opacity: 0 }}\n                            transition={tweenFade}\n                            className=\"inline-flex shrink-0\"\n                          >\n                            <Icon icon={IconCornerDownLeft} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </motion.button>\n                  )\n                })}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Footer with keyboard hints */}\n          {resolvedFooterHints !== false && (\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03\"\n            >\n              {resolvedFooterHints.map((hint, i) => (\n                <div key={i} className=\"flex items-center gap-ds-02b\">\n                  {hint.keys === '↑↓' ? (\n                    <div className=\"flex items-center gap-ds-01\">\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowUp} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                    </div>\n                  ) : hint.keys === '↵' ? (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                      <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  ) : (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd\">\n                      {hint.keys}\n                    </kbd>\n                  )}\n                  <span className=\"text-ds-xs text-surface-fg-subtle\">\n                    {hint.label}\n                  </span>\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </DialogContentRaw>\n      </DialogPortal>\n    </Dialog>\n  )\n  },\n)\n\nCommandPalette.displayName = 'CommandPalette'\n\nexport { CommandPalette }\n"],"mappings":";;;;;;;;;;;;;AAqGA,SAAS,GAAe,GAA2B;AAGjD,QAFI,EAAK,cAAoB,EAAK,cAC9B,OAAO,EAAK,SAAU,WAAiB,EAAK,QACzC;;AAIT,SAAS,GAAqB,GAA2B;AAEvD,QADI,OAAO,EAAK,eAAgB,WAAiB,EAAK,cAC/C;;AAIT,SAAS,GAAkB,GAA4B;AAMrD,QAJI,EAAS,SAAS,IAAI,GACjB,EAAS,MAAM,IAAI,CAAC,KAAI,MAAK,EAAE,MAAM,CAAC,CAAC,OAAO,QAAQ,GAGxD,EAAS,MAAM,MAAM,CAAC,OAAO,QAAQ;;AAO9C,IAAM,IAAiB,EAAM,WAC3B,SACE,EACE,YAAS,EAAE,EACX,kBAAc,wBACd,aACA,kBAAe,qBACf,gBACA,MAAM,GACN,gBACA,iBACA,gBAAa,SACb,eAAY,SACZ,gBACA,eACA,GAAG,KAEL,GACA;CAEF,IAAM,IAAe,MAAa,KAAA,GAC5B,CAAC,GAAc,KAAmB,EAAM,SAAS,KAAe,GAAM,EACtE,IAAO,IAAe,IAAW,GAGjC,IAAU,EAAM,OAAO,EAAK;AAClC,GAAQ,UAAU;CAElB,IAAM,IAAU,EAAM,aACnB,MAAqD;EACpD,IAAM,IAAW,OAAO,KAAa,aAAa,EAAS,EAAQ,QAAQ,GAAG;AAI9E,EAHK,KACH,EAAgB,EAAS,EAE3B,IAAe,EAAS;IAE1B,CAAC,GAAc,EAAa,CAC7B,EAEK,CAAC,GAAO,KAAY,EAAM,SAAS,GAAG,EACtC,CAAC,GAAa,KAAkB,EAAM,SAAS,EAAE,EACjD,IAAW,EAAM,OAAyB,KAAK,EAC/C,IAAU,EAAM,OAAuB,KAAK,EAC5C,IAAa,EAAM,OAAO,EAC1B,IAAY,2BAA2B,KAGvC,EAAE,eAAe,MAAc,GAAW,EAC1C,IAAqB,EAAE,UAAU,GAAG,EAGpC,KAAQ,EAAM,cAAc,GAAU,EAAE,EAAE,CAAC,EAG3C,IAAiB,EAAM,cAAc;AACzC,MAAI,CAAC,EAAM,MAAM,CAAE,QAAO;EAC1B,IAAM,IAAI,EAAM,aAAa;AAC7B,SAAO,EACJ,KAAK,OAAW;GACf,GAAG;GACH,OAAO,EAAM,MAAM,QAChB,MACC,GAAe,EAAK,CAAC,aAAa,CAAC,SAAS,EAAE,IAC9C,GAAqB,EAAK,CAAC,aAAa,CAAC,SAAS,EAAE,CACvD;GACF,EAAE,CACF,QAAQ,MAAU,EAAM,MAAM,SAAS,EAAE;IAC3C,CAAC,GAAQ,EAAM,CAAC,EAEb,IAAgB,EAAM,cACpB,EAAe,SAAS,MAAM,EAAE,MAAM,EAC5C,CAAC,EAAe,CACjB;AAsBD,CAnBA,EAAM,gBAAgB;AACpB,MAAI,MAAe,GAAO;EAE1B,IAAM,IAAW,MAAM,QAAQ,EAAW,GAAG,IAAa,CAAC,EAAW;EAEtE,SAAS,EAAc,GAAkB;AACvC,QAAK,IAAM,KAAW,EACpB,KAAI,EAAkB,GAAG,EAAQ,EAAE;AAEjC,IADA,EAAE,gBAAgB,EAClB,GAAS,MAAS,CAAC,EAAK;AACxB;;;AAKN,SADA,SAAS,iBAAiB,WAAW,EAAc,QACtC,SAAS,oBAAoB,WAAW,EAAc;IAClE,CAAC,GAAY,EAAQ,CAAC,EAGzB,EAAM,gBAAgB;AACpB,EAAI,MACF,EAAS,GAAG,EACZ,EAAe,EAAE,EACjB,4BAA4B;AAC1B,KAAS,SAAS,OAAO;IACzB;IAEH,CAAC,EAAK,CAAC;CAGV,IAAM,MAAiB,MAA2B;AAChD,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,GAAgB,MACd,IAAO,EAAc,SAAS,IAAI,IAAO,IAAI,EAC9C;AACD;GAEF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,GAAgB,MACd,IAAO,IAAI,IAAO,IAAI,EAAc,SAAS,EAC9C;AACD;GAEF,KAAK,SAAS;AACZ,MAAE,gBAAgB;IAClB,IAAM,IAAO,EAAc;AAC3B,IAAI,MACF,EAAK,UAAU,EACf,EAAQ,GAAM;AAEhB;;GAEF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAQ,GAAM;AACd;;;AAMN,GAAM,gBAAgB;AAIpB,GAHiB,EAAQ,SAAS,cAChC,wBAAwB,EAAY,IACrC,GACS,eAAe,EAAE,OAAO,WAAW,CAAC;IAC7C,CAAC,EAAY,CAAC;CAEjB,IAAM,MAAqB,MAAkB;AAG3C,EAFA,EAAS,EAAM,EACf,EAAe,EAAE,EACjB,IAAW,EAAM;IAIb,KAAe,EAAM,cAAc;EACvC,IAAM,oBAAM,IAAI,KAAqB,EACjC,IAAM;AACV,OAAK,IAAM,KAAS,EAClB,MAAK,IAAM,KAAQ,EAAM,MACvB,GAAI,IAAI,EAAK,IAAI,IAAM;AAG3B,SAAO;IACN,CAAC,EAAe,CAAC,EAGd,IAAe,IAAY,IAAqB,EAAQ,QACxD,IAAY,IAAY,IAAqB,EAAO,MACpD,IAAS,IAAY;EAAE,SAAS;EAAG,OAAO;EAAG,GAAG;EAAG,GAAG,KAAA,GAGtD,KAAiB,OAAO,KAAc,WAAW,GAAG,EAAU,MAAM,GAGpE,IACJ,MAAgB,KACZ,KACA,KAAe;EACb;GAAE,MAAM;GAAM,OAAO;GAAY;EACjC;GAAE,MAAM;GAAK,OAAO;GAAU;EAC9B;GAAE,MAAM;GAAO,OAAO;GAAS;EAChC;AAUP,QACE,kBAAC,GAAD;EAAc;EAAM,cARS,EAAM,aAClC,MAAsB;AACrB,KAAQ,EAAS;KAEnB,CAAC,EAAQ,CACV;YAIG,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EACE,WAAU,8JACV,CAAA,EACF,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,WAAW,EACT,0EACA,uGACA,qFACA,8DACA,gEACA,sFACA,gFACA,GACD;GACD,WAAW;aAbb;IAeE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,IAAD,EAAA,UAAa,mBAA6B,CAAA,EAC1C,kBAAC,GAAD,EAAA,UAAmB,yDAEC,CAAA,CACL,EAAA,CAAA;IAGjB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,EAAO,MAAR;OACE,SAAS,KAAU;QAAE,SAAS;QAAG,OAAO;QAAM;OAC9C,SAAS;QAAE,SAAS;QAAG,OAAO;QAAG;OACjC,YAAY;OACZ,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAM;QAAY,MAAK;QAAK,QAAO;QAAQ,WAAU;QAA2B,CAAA;OAC1E,CAAA;MACd,kBAAC,SAAD;OACE,KAAK;OACL,OAAO;OACP,WAAW,MAAM,GAAkB,EAAE,OAAO,MAAM;OACrC;OACb,MAAK;OACL,iBAAe;OACf,iBAAe;OACf,yBAAuB,EAAc,KAAe,gBAAgB,EAAW,GAAG,EAAc,GAAa,OAAO,KAAA;OACpH,qBAAkB;OAClB,WAAW,EACT,qEACA,qCACD;OACD,cAAa;OACb,aAAY;OACZ,YAAY;OACZ,CAAA;MACF,kBAAC,OAAD;OAAK,WAAU;iBAA6L;OAEtM,CAAA;MACF;;IAGN,kBAAC,OAAD;KACE,KAAK;KACL,IAAI;KACJ,MAAK;KACL,cAAW;KACX,WAAU;KACV,OAAO,EAAE,WAAW,IAAgB;eANtC,CAQG,EAAe,WAAW,KACzB,kBAAC,EAAO,KAAR;MACE,SAAS,KAAU,EAAE,SAAS,GAAG;MACjC,SAAS,EAAE,SAAS,GAAG;MACvB,YAAY;MACZ,WAAU;gBAET,MACC,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA;MAEK,CAAA,EAGd,EAAe,KAAK,GAAO,MAC1B,kBAAC,EAAO,KAAR;MAEE,SAAS,KAAU,EAAE,SAAS,GAAG;MACjC,SAAS,EAAE,SAAS,GAAG;MACvB,YAAY,IAAY,IAAqB;OAAE,GAAG,EAAO;OAAM,OAAO,IAAW;OAAM;MACvF,WAAU;gBALZ,CAOE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAM;QACF,CAAA;OACH,CAAA,EAEL,EAAM,MAAM,KAAK,MAAS;OACzB,IAAM,IAAY,GAAa,IAAI,EAAK,GAAG,IAAI,GACzC,IAAW,MAAc;AAC/B,cACE,kBAAC,EAAO,QAAR;QAEE,IAAI,gBAAgB,EAAW,GAAG,EAAK;QACvC,MAAK;QACL,MAAK;QACL,iBAAe;QACf,sBAAoB;QACpB,SAAS,KAAU;SAAE,SAAS;SAAG,GAAG;SAAG;QACvC,SAAS;SAAE,SAAS;SAAG,GAAG;SAAG;QAC7B,YAAY,IAAY,IAAqB;SAAE,GAAG,EAAQ;SAAQ,OAAO,IAAY;SAAM;QAC3F,eAAe;AAEb,SADA,EAAK,UAAU,EACf,EAAQ,GAAM;;QAEhB,oBAAoB,EAAe,EAAU;QAC7C,WAAW,EACT,8JACA,IACI,4CACA,gDACL;kBApBH;SAsBG,EAAK,QACJ,kBAAC,QAAD;UACE,WAAW,EACT,0GACA,IAAW,mBAAmB,yBAC/B;UACD,eAAY;oBAEX,EAAK;UACD,CAAA;SAET,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAK,cAAc,EAAK,YAAY,EAAM,GAAG,EAAK;WAC9C,CAAA,EACN,EAAK,eACJ,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAK;WACD,CAAA,CAEL;;SACL,EAAK,YACJ,kBAAC,QAAD;UAAM,WAAU;oBACb,GAAkB,EAAK,SAAS,CAAC,KAAK,GAAK,MAC1C,kBAAC,OAAD;WAEE,WAAW,EACT,wLACA,IACI,+CACA,wEACL;qBAEA,MAAQ,UAAU,MAAQ,SAAS,GAAmB,GAAM,GAAG;WAC5D,EATC,EASD,CACN;UACG,CAAA;SAET,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;UACE,SAAS,IAAY,KAAA,IAAY,EAAE,SAAS,GAAG;UAC/C,SAAS,EAAE,SAAS,GAAG;UACvB,MAAM,IAAY,KAAA,IAAY,EAAE,SAAS,GAAG;UAC5C,YAAY;UACZ,WAAU;oBAEV,kBAAC,GAAD;WAAM,MAAM;WAAoB,MAAK;WAAK,QAAO;WAAQ,WAAU;WAA2B,CAAA;UAClF,CAAA,EAEA,CAAA;SACJ;UAxET,EAAK,GAwEI;QAElB,CACS;QA5FN,EAAM,MA4FA,CACb,CACE;;IAGL,MAAwB,MACvB,kBAAC,EAAO,KAAR;KACE,SAAS,KAAU,EAAE,SAAS,GAAG;KACjC,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;KACZ,WAAU;eAET,EAAoB,KAAK,GAAM,MAC9B,kBAAC,OAAD;MAAa,WAAU;gBAAvB,CACG,EAAK,SAAS,OACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAM,MAAM;SAAa,MAAK;SAAK,WAAU;SAA2B,CAAA;QACpE,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAM,MAAM;SAAe,MAAK;SAAK,WAAU;SAA2B,CAAA;QACtE,CAAA,CACF;WACJ,EAAK,SAAS,MAChB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAM,MAAM;QAAoB,MAAK;QAAK,WAAU;QAA2B,CAAA;OAC3E,CAAA,GAEN,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;OACF,CAAA,EAER,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAK;OACD,CAAA,CACH;QAtBI,EAsBJ,CACN;KACS,CAAA;IAEE;KACN,EAAA,CAAA;EACR,CAAA;EAGZ;AAED,EAAe,cAAc"}

package/dist/composed/confirm-dialog.js

@@ -1,50 +1,30 @@
 "use client";
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import * as g from "react";
-import { AlertDialog as p, AlertDialogContent as A, AlertDialogHeader as C, AlertDialogTitle as u, AlertDialogDescription as x, AlertDialogFooter as b } from "../ui/alert-dialog.js";
+import { AlertDialog as e, AlertDialogContent as t, AlertDialogDescription as n, AlertDialogFooter as r, AlertDialogHeader as i, AlertDialogTitle as a } from "../ui/alert-dialog.js";
 import { Button as o } from "../ui/button.js";
-const j = g.forwardRef(
-  ({
-    open: t,
-    onOpenChange: l,
-    title: a,
-    description: n,
-    confirmText: c = "Confirm",
-    cancelText: d = "Cancel",
-    color: s = "accent",
-    loading: i = !1,
-    onConfirm: m,
-    className: f,
-    ...D
-  }, h) => /* @__PURE__ */ r(p, { open: t, onOpenChange: l, children: /* @__PURE__ */ e(A, { ref: h, className: f, ...D, children: [
-    /* @__PURE__ */ e(C, { children: [
-      /* @__PURE__ */ r(u, { children: a }),
-      /* @__PURE__ */ r(x, { children: n })
-    ] }),
-    /* @__PURE__ */ e(b, { children: [
-      /* @__PURE__ */ r(
-        o,
-        {
-          variant: "outline",
-          disabled: i,
-          onClick: () => l(!1),
-          children: d
-        }
-      ),
-      /* @__PURE__ */ r(
-        o,
-        {
-          variant: "solid",
-          color: s,
-          disabled: i,
-          onClick: () => m(),
-          children: i ? "Processing..." : c
-        }
-      )
-    ] })
-  ] }) })
-);
-j.displayName = "ConfirmDialog";
-export {
-  j as ConfirmDialog
-};
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/composed/confirm-dialog.tsx
+var u = s.forwardRef(({ open: s, onOpenChange: u, title: d, description: f, confirmText: p = "Confirm", cancelText: m = "Cancel", color: h = "accent", loading: g = !1, onConfirm: _, className: v, ...y }, b) => /* @__PURE__ */ c(e, {
+	open: s,
+	onOpenChange: u,
+	children: /* @__PURE__ */ l(t, {
+		ref: b,
+		className: v,
+		...y,
+		children: [/* @__PURE__ */ l(i, { children: [/* @__PURE__ */ c(a, { children: d }), /* @__PURE__ */ c(n, { children: f })] }), /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(o, {
+			variant: "outline",
+			disabled: g,
+			onClick: () => u(!1),
+			children: m
+		}), /* @__PURE__ */ c(o, {
+			variant: "solid",
+			color: h,
+			disabled: g,
+			onClick: () => _(),
+			children: g ? "Processing..." : p
+		})] })]
+	})
+}));
+u.displayName = "ConfirmDialog";
+//#endregion
+export { u as ConfirmDialog };

package/dist/composed/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/composed/confirm-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '../ui/alert-dialog'\nimport { Button } from '../ui/button'\nimport { cn } from '../ui/lib/utils'\n\nexport interface ConfirmDialogProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void\n  /** Dialog title */\n  title: string\n  /** Dialog description */\n  description: string\n  /** Confirm button text */\n  confirmText?: string\n  /** Cancel button text */\n  cancelText?: string\n  /** Color of the confirm button */\n  color?: 'accent' | 'error'\n  /** Whether the dialog is in a loading state */\n  loading?: boolean\n  /** Called when the user confirms. Dialog stays open — consumer controls closing via onOpenChange. */\n  onConfirm: () => void | Promise<void>\n}\n\nconst ConfirmDialog = React.forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      confirmText = 'Confirm',\n      cancelText = 'Cancel',\n      color = 'accent',\n      loading = false,\n      onConfirm,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <AlertDialog open={open} onOpenChange={onOpenChange}>\n        <AlertDialogContent ref={ref} className={className} {...props}>\n          <AlertDialogHeader>\n            <AlertDialogTitle>{title}</AlertDialogTitle>\n            <AlertDialogDescription>{description}</AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <Button\n              variant=\"outline\"\n              disabled={loading}\n              onClick={() => onOpenChange(false)}\n            >\n              {cancelText}\n            </Button>\n            <Button\n              variant=\"solid\"\n              color={color}\n              disabled={loading}\n              onClick={() => onConfirm()}\n            >\n              {loading ? 'Processing...' : confirmText}\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    )\n  },\n)\nConfirmDialog.displayName = 'ConfirmDialog'\n\nexport { ConfirmDialog }\n"],"mappings":";;;;;;AAmCA,IAAM,IAAgB,EAAM,YAExB,EACE,SACA,iBACA,UACA,gBACA,iBAAc,WACd,gBAAa,UACb,WAAQ,UACR,aAAU,IACV,cACA,cACA,GAAG,KAEL,MAGE,kBAAC,GAAD;CAAmB;CAAoB;WACrC,kBAAC,GAAD;EAAyB;EAAgB;EAAW,GAAI;YAAxD,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAmB,GAAyB,CAAA,EAC5C,kBAAC,GAAD,EAAA,UAAyB,GAAqC,CAAA,CAC5C,EAAA,CAAA,EACpB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,UAAU;GACV,eAAe,EAAa,GAAM;aAEjC;GACM,CAAA,EACT,kBAAC,GAAD;GACE,SAAQ;GACD;GACP,UAAU;GACV,eAAe,GAAW;aAEzB,IAAU,kBAAkB;GACtB,CAAA,CACS,EAAA,CAAA,CACD;;CACT,CAAA,CAGnB;AACD,EAAc,cAAc"}

package/dist/composed/content-card.js

@@ -1,108 +1,69 @@
-import { jsxs as i, jsx as e, Fragment as m } from "react/jsx-runtime";
-import * as g from "react";
-import { a as h } from "../_chunks/vendor-utils.js";
-import { cn as d } from "../ui/lib/utils.js";
-const v = h(
-  "rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard",
-  {
-    variants: {
-      variant: {
-        default: "border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover",
-        outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
-        ghost: "border border-transparent bg-transparent hover:bg-surface-raised"
-      },
-      padding: {
-        default: "p-ds-05b",
-        compact: "p-ds-04",
-        spacious: "p-ds-06",
-        none: "p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      padding: "default"
-    }
-  }
-), b = (r) => {
-  switch (r) {
-    case "compact":
-      return "px-ds-04 py-ds-03";
-    case "spacious":
-      return "px-ds-06 py-ds-05";
-    default:
-      return "px-ds-05b py-ds-04";
-  }
-}, x = (r) => {
-  switch (r) {
-    case "compact":
-      return "p-ds-04";
-    case "spacious":
-      return "p-ds-06";
-    default:
-      return "p-ds-05b";
-  }
-}, w = g.forwardRef(
-  ({
-    variant: r,
-    padding: s,
-    header: c,
-    headerTitle: t,
-    headerActions: o,
-    footer: a,
-    className: u,
-    children: p,
-    ...l
-  }, f) => {
-    const n = c || t || o;
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ref: f,
-        className: d(
-          v({ variant: r, padding: n || a ? "none" : s }),
-          u
-        ),
-        ...l,
-        children: [
-          n && /* @__PURE__ */ e(
-            "div",
-            {
-              className: d(
-                "flex items-center justify-between border-b border-surface-border-strong",
-                b(s)
-              ),
-              children: c ?? /* @__PURE__ */ i(m, { children: [
-                t && /* @__PURE__ */ e("h3", { className: "text-ds-base font-semibold text-surface-fg", children: t }),
-                o && /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: o })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: d(
-                (n || a) && x(s)
-              ),
-              children: p
-            }
-          ),
-          a && /* @__PURE__ */ e(
-            "div",
-            {
-              className: d(
-                "border-t border-surface-border-strong",
-                b(s)
-              ),
-              children: a
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-w.displayName = "ContentCard";
-export {
-  w as ContentCard,
-  v as contentCardVariants
-};
+import { t as e } from "../_chunks/vendor-utils.js";
+import { cn as t } from "../ui/lib/utils.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/composed/content-card.tsx
+var o = e("rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard", {
+	variants: {
+		variant: {
+			default: "border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover",
+			outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
+			ghost: "border border-transparent bg-transparent hover:bg-surface-raised"
+		},
+		padding: {
+			default: "p-ds-05b",
+			compact: "p-ds-04",
+			spacious: "p-ds-06",
+			none: "p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		padding: "default"
+	}
+}), s = (e) => {
+	switch (e) {
+		case "compact": return "px-ds-04 py-ds-03";
+		case "spacious": return "px-ds-06 py-ds-05";
+		default: return "px-ds-05b py-ds-04";
+	}
+}, c = (e) => {
+	switch (e) {
+		case "compact": return "p-ds-04";
+		case "spacious": return "p-ds-06";
+		default: return "p-ds-05b";
+	}
+}, l = n.forwardRef(({ variant: e, padding: n, header: l, headerTitle: u, headerActions: d, footer: f, className: p, children: m, ...h }, g) => {
+	let _ = l || u || d;
+	return /* @__PURE__ */ a("div", {
+		ref: g,
+		className: t(o({
+			variant: e,
+			padding: _ || f ? "none" : n
+		}), p),
+		...h,
+		children: [
+			_ && /* @__PURE__ */ i("div", {
+				className: t("flex items-center justify-between border-b border-surface-border-strong", s(n)),
+				children: l ?? /* @__PURE__ */ a(r, { children: [u && /* @__PURE__ */ i("h3", {
+					className: "text-ds-base font-semibold text-surface-fg",
+					children: u
+				}), d && /* @__PURE__ */ i("div", {
+					className: "flex items-center gap-ds-03",
+					children: d
+				})] })
+			}),
+			/* @__PURE__ */ i("div", {
+				className: t((_ || f) && c(n)),
+				children: m
+			}),
+			f && /* @__PURE__ */ i("div", {
+				className: t("border-t border-surface-border-strong", s(n)),
+				children: f
+			})
+		]
+	});
+});
+l.displayName = "ContentCard";
+//#endregion
+export { l as ContentCard, o as contentCardVariants };

package/dist/composed/content-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-card.js","names":[],"sources":["../../src/composed/content-card.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../ui/lib/utils'\n\nconst contentCardVariants = cva(\n  'rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover',\n        outline:\n          'border border-surface-border bg-transparent hover:border-surface-border-strong',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised',\n      },\n      padding: {\n        default: 'p-ds-05b',\n        compact: 'p-ds-04',\n        spacious: 'p-ds-06',\n        none: 'p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'default',\n    },\n  },\n)\n\nconst getPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'px-ds-04 py-ds-03'\n    case 'spacious': return 'px-ds-06 py-ds-05'\n    default: return 'px-ds-05b py-ds-04'\n  }\n}\n\nconst getContentPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'p-ds-04'\n    case 'spacious': return 'p-ds-06'\n    default: return 'p-ds-05b'\n  }\n}\n\nexport interface ContentCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof contentCardVariants> {\n  header?: React.ReactNode\n  headerTitle?: string\n  headerActions?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nconst ContentCard = React.forwardRef<HTMLDivElement, ContentCardProps>(\n  (\n    {\n      variant,\n      padding,\n      header,\n      headerTitle,\n      headerActions,\n      footer,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = header || headerTitle || headerActions\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          contentCardVariants({ variant, padding: hasHeader || footer ? 'none' : padding }),\n          className,\n        )}\n        {...props}\n      >\n        {hasHeader && (\n          <div\n            className={cn(\n              'flex items-center justify-between border-b border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {header ?? (\n              <>\n                {headerTitle && (\n                  <h3 className=\"text-ds-base font-semibold text-surface-fg\">\n                    {headerTitle}\n                  </h3>\n                )}\n                {headerActions && (\n                  <div className=\"flex items-center gap-ds-03\">{headerActions}</div>\n                )}\n              </>\n            )}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            (hasHeader || footer) && getContentPadding(padding),\n          )}\n        >\n          {children}\n        </div>\n\n        {footer && (\n          <div\n            className={cn(\n              'border-t border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nContentCard.displayName = 'ContentCard'\n\nexport { ContentCard, contentCardVariants }\n"],"mappings":";;;;;AAKA,IAAM,IAAsB,EAC1B,gJACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;GACH;EACD,SAAS;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACF,CACF,EAEK,KAAc,MAAuC;AACzD,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAId,KAAqB,MAAuC;AAChE,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAad,IAAc,EAAM,YAEtB,EACE,YACA,YACA,WACA,gBACA,kBACA,WACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAU,KAAe;AAE3C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS,SAAS,KAAa,IAAS,SAAS;GAAS,CAAC,EACjF,EACD;EACD,GAAI;YANN;GAQG,KACC,kBAAC,OAAD;IACE,WAAW,EACT,2EACA,EAAW,EAAQ,CACpB;cAEA,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,EAEN,KACC,kBAAC,OAAD;KAAK,WAAU;eAA+B;KAAoB,CAAA,CAEnE,EAAA,CAAA;IAED,CAAA;GAGR,kBAAC,OAAD;IACE,WAAW,GACR,KAAa,MAAW,EAAkB,EAAQ,CACpD;IAEA;IACG,CAAA;GAEL,KACC,kBAAC,OAAD;IACE,WAAW,EACT,yCACA,EAAW,EAAQ,CACpB;cAEA;IACG,CAAA;GAEJ;;EAGX;AACD,EAAY,cAAc"}

package/dist/composed/date-picker/index.js

@@ -1,14 +1,4 @@
 "use client";
-import { C as r, u as s } from "../../_chunks/use-calendar.js";
-import { D as P, a as t, b as c, M as k, P as o, T as m, Y as n } from "../../_chunks/date-time-picker.js";
-export {
-  r as CalendarGrid,
-  P as DatePicker,
-  t as DateRangePicker,
-  c as DateTimePicker,
-  k as MonthPicker,
-  o as Presets,
-  m as TimePicker,
-  n as YearPicker,
-  s as useCalendar
-};
+import { n as e, t } from "../../_chunks/use-calendar.js";
+import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "../../_chunks/date-picker.js";
+export { e as CalendarGrid, n as DatePicker, o as DateRangePicker, c as DateTimePicker, a as MonthPicker, r as Presets, i as TimePicker, s as YearPicker, t as useCalendar };

package/dist/composed/deadline-indicator.js

@@ -1,79 +1,73 @@
 "use client";
-import { jsxs as D, jsx as c } from "react/jsx-runtime";
+import { a as e } from "../_chunks/framer.js";
+import { motionProps as t } from "../ui/lib/motion.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Icon as r } from "../ui/icon.js";
+import { SimpleTooltip as i } from "./simple-tooltip.js";
 import * as a from "react";
-import { cn as b } from "../ui/lib/utils.js";
-import { motionProps as S } from "../ui/lib/motion.js";
-import { IconClock as g } from "@tabler/icons-react";
-import { Icon as w } from "../ui/icon.js";
-import { SimpleTooltip as y } from "./simple-tooltip.js";
-import { m as j } from "../_chunks/framer.js";
-function z(t) {
-  const e = Math.abs(t), n = t < 0 ? "Overdue by " : "", r = t >= 0 ? " left" : "";
-  return e < 1 ? t < 0 ? "Overdue" : "Due now" : e < 60 ? `${n}${Math.round(e)}m${r}` : e < 1440 ? `${n}${Math.round(e / 60)}h${r}` : `${n}${Math.round(e / 1440)}d${r}`;
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconClock as c } from "@tabler/icons-react";
+//#region src/composed/deadline-indicator.tsx
+function l(e) {
+	let t = Math.abs(e), n = e < 0 ? "Overdue by " : "", r = e >= 0 ? " left" : "";
+	return t < 1 ? e < 0 ? "Overdue" : "Due now" : t < 60 ? `${n}${Math.round(t)}m${r}` : t < 1440 ? `${n}${Math.round(t / 60)}h${r}` : `${n}${Math.round(t / 1440)}d${r}`;
 }
-function L(t) {
-  return t.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit"
-  });
+function u(e) {
+	return e.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit"
+	});
 }
-const N = a.forwardRef(({
-  deadline: t,
-  warningThreshold: e = 1440,
-  criticalThreshold: n = 240,
-  format: r = "relative",
-  showIcon: m = !1,
-  refreshInterval: f = 6e4,
-  className: u,
-  ...d
-}, p) => {
-  const [, M] = a.useReducer((s) => s + 1, 0);
-  a.useEffect(() => {
-    if (!f) return;
-    const s = setInterval(M, f);
-    return () => clearInterval(s);
-  }, [f]);
-  const l = a.useMemo(
-    () => t instanceof Date ? t : new Date(t),
-    [t]
-  ), o = (l.getTime() - Date.now()) / 6e4;
-  let i;
-  o <= 0 ? i = "text-error-11 font-semibold" : o <= n ? i = "text-error-11" : o <= e ? i = "text-warning-11" : i = "text-success-11";
-  const x = r === "relative" ? z(o) : L(l), C = o <= 0, I = o <= n && o > 0, O = C || I, h = r === "relative", $ = l.toLocaleString();
-  if (O) {
-    const s = /* @__PURE__ */ D(
-      j.span,
-      {
-        ref: p,
-        className: b("inline-flex items-center gap-ds-01 font-sans text-ds-sm", i, u),
-        animate: { opacity: [1, 0.7, 1] },
-        transition: { duration: 2, repeat: 1 / 0 },
-        ...S(d),
-        children: [
-          m && /* @__PURE__ */ c(w, { icon: g, size: "xs" }),
-          x
-        ]
-      }
-    );
-    return h ? /* @__PURE__ */ c(y, { content: $, children: s }) : s;
-  }
-  const v = /* @__PURE__ */ D(
-    "span",
-    {
-      ref: p,
-      className: b("inline-flex items-center gap-ds-01 font-sans text-ds-sm", i, u),
-      ...d,
-      children: [
-        m && /* @__PURE__ */ c(w, { icon: g, size: "xs" }),
-        x
-      ]
-    }
-  );
-  return h ? /* @__PURE__ */ c(y, { content: $, children: v }) : v;
+var d = a.forwardRef(({ deadline: d, warningThreshold: f = 1440, criticalThreshold: p = 240, format: m = "relative", showIcon: h = !1, refreshInterval: g = 6e4, className: _, ...v }, y) => {
+	let [, b] = a.useReducer((e) => e + 1, 0);
+	a.useEffect(() => {
+		if (!g) return;
+		let e = setInterval(b, g);
+		return () => clearInterval(e);
+	}, [g]);
+	let x = a.useMemo(() => d instanceof Date ? d : new Date(d), [d]), S = (x.getTime() - Date.now()) / 6e4, C;
+	C = S <= 0 ? "text-error-11 font-semibold" : S <= p ? "text-error-11" : S <= f ? "text-warning-11" : "text-success-11";
+	let w = m === "relative" ? l(S) : u(x), T = S <= 0 || S <= p && S > 0, E = m === "relative", D = x.toLocaleString();
+	if (T) {
+		let a = /* @__PURE__ */ s(e.span, {
+			ref: y,
+			className: n("inline-flex items-center gap-ds-01 font-sans text-ds-sm", C, _),
+			animate: { opacity: [
+				1,
+				.7,
+				1
+			] },
+			transition: {
+				duration: 2,
+				repeat: Infinity
+			},
+			...t(v),
+			children: [h && /* @__PURE__ */ o(r, {
+				icon: c,
+				size: "xs"
+			}), w]
+		});
+		return E ? /* @__PURE__ */ o(i, {
+			content: D,
+			children: a
+		}) : a;
+	}
+	let O = /* @__PURE__ */ s("span", {
+		ref: y,
+		className: n("inline-flex items-center gap-ds-01 font-sans text-ds-sm", C, _),
+		...v,
+		children: [h && /* @__PURE__ */ o(r, {
+			icon: c,
+			size: "xs"
+		}), w]
+	});
+	return E ? /* @__PURE__ */ o(i, {
+		content: D,
+		children: O
+	}) : O;
 });
-N.displayName = "DeadlineIndicator";
-export {
-  N as DeadlineIndicator
-};
+d.displayName = "DeadlineIndicator";
+//#endregion
+export { d as DeadlineIndicator };

package/dist/composed/deadline-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deadline-indicator.js","names":[],"sources":["../../src/composed/deadline-indicator.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion } from 'framer-motion'\nimport { cn } from '../ui/lib/utils'\nimport { motionProps } from '../ui/lib/motion'\nimport { IconClock } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { SimpleTooltip } from './simple-tooltip'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface DeadlineIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {\n  deadline: Date | string\n  /** Minutes before deadline to show warning color @default 1440 (24h) */\n  warningThreshold?: number\n  /** Minutes before deadline to show critical color @default 240 (4h) */\n  criticalThreshold?: number\n  /** @default 'relative' */\n  format?: 'relative' | 'absolute'\n  /** Show clock icon prefix */\n  showIcon?: boolean\n  /** Auto-refresh interval in ms to keep relative time up to date @default 60000 */\n  refreshInterval?: number\n}\n\n// ============================================================\n// Helpers\n// ============================================================\n\nfunction formatRelative(minutesRemaining: number): string {\n  const abs = Math.abs(minutesRemaining)\n  const prefix = minutesRemaining < 0 ? 'Overdue by ' : ''\n  const suffix = minutesRemaining >= 0 ? ' left' : ''\n\n  if (abs < 1) return minutesRemaining < 0 ? 'Overdue' : 'Due now'\n  if (abs < 60) return `${prefix}${Math.round(abs)}m${suffix}`\n  if (abs < 1440) return `${prefix}${Math.round(abs / 60)}h${suffix}`\n  return `${prefix}${Math.round(abs / 1440)}d${suffix}`\n}\n\nfunction formatAbsolute(date: Date): string {\n  return date.toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  })\n}\n\n// ============================================================\n// DeadlineIndicator\n// ============================================================\n\nconst DeadlineIndicator = React.forwardRef<HTMLSpanElement, DeadlineIndicatorProps>(({\n  deadline,\n  warningThreshold = 1440,\n  criticalThreshold = 240,\n  format = 'relative',\n  showIcon = false,\n  refreshInterval = 60000,\n  className,\n  ...props\n}, ref) => {\n  const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0)\n  React.useEffect(() => {\n    if (!refreshInterval) return\n    const id = setInterval(forceUpdate, refreshInterval)\n    return () => clearInterval(id)\n  }, [refreshInterval])\n\n  const deadlineDate = React.useMemo(\n    () => (deadline instanceof Date ? deadline : new Date(deadline)),\n    [deadline],\n  )\n  const minutesRemaining = (deadlineDate.getTime() - Date.now()) / 60000\n\n  let colorClass: string\n  if (minutesRemaining <= 0) {\n    colorClass = 'text-error-11 font-semibold'\n  } else if (minutesRemaining <= criticalThreshold) {\n    colorClass = 'text-error-11'\n  } else if (minutesRemaining <= warningThreshold) {\n    colorClass = 'text-warning-11'\n  } else {\n    colorClass = 'text-success-11'\n  }\n\n  const text = format === 'relative'\n    ? formatRelative(minutesRemaining)\n    : formatAbsolute(deadlineDate)\n\n  const isOverdue = minutesRemaining <= 0\n  const isCritical = minutesRemaining <= criticalThreshold && minutesRemaining > 0\n  const shouldPulse = isOverdue || isCritical\n\n  const showTooltip = format === 'relative'\n  const tooltipContent = deadlineDate.toLocaleString()\n\n  if (shouldPulse) {\n    const inner = (\n      <motion.span\n        ref={ref}\n        className={cn('inline-flex items-center gap-ds-01 font-sans text-ds-sm', colorClass, className)}\n        animate={{ opacity: [1, 0.7, 1] }}\n        transition={{ duration: 2, repeat: Infinity }}\n        {...motionProps(props)}\n      >\n        {showIcon && <Icon icon={IconClock} size=\"xs\" />}\n        {text}\n      </motion.span>\n    )\n\n    return showTooltip ? <SimpleTooltip content={tooltipContent}>{inner}</SimpleTooltip> : inner\n  }\n\n  const inner = (\n    <span\n      ref={ref}\n      className={cn('inline-flex items-center gap-ds-01 font-sans text-ds-sm', colorClass, className)}\n      {...props}\n    >\n      {showIcon && <Icon icon={IconClock} size=\"xs\" />}\n      {text}\n    </span>\n  )\n\n  return showTooltip ? <SimpleTooltip content={tooltipContent}>{inner}</SimpleTooltip> : inner\n})\nDeadlineIndicator.displayName = 'DeadlineIndicator'\n\nexport { DeadlineIndicator }\n"],"mappings":";;;;;;;;;;AAgCA,SAAS,EAAe,GAAkC;CACxD,IAAM,IAAM,KAAK,IAAI,EAAiB,EAChC,IAAS,IAAmB,IAAI,gBAAgB,IAChD,IAAS,KAAoB,IAAI,UAAU;AAKjD,QAHI,IAAM,IAAU,IAAmB,IAAI,YAAY,YACnD,IAAM,KAAW,GAAG,IAAS,KAAK,MAAM,EAAI,CAAC,GAAG,MAChD,IAAM,OAAa,GAAG,IAAS,KAAK,MAAM,IAAM,GAAG,CAAC,GAAG,MACpD,GAAG,IAAS,KAAK,MAAM,IAAM,KAAK,CAAC,GAAG;;AAG/C,SAAS,EAAe,GAAoB;AAC1C,QAAO,EAAK,mBAAmB,KAAA,GAAW;EACxC,OAAO;EACP,KAAK;EACL,MAAM;EACN,QAAQ;EACT,CAAC;;AAOJ,IAAM,IAAoB,EAAM,YAAqD,EACnF,aACA,sBAAmB,MACnB,uBAAoB,KACpB,YAAS,YACT,cAAW,IACX,qBAAkB,KAClB,cACA,GAAG,KACF,MAAQ;CACT,IAAM,GAAG,KAAe,EAAM,YAAY,MAAc,IAAI,GAAG,EAAE;AACjE,GAAM,gBAAgB;AACpB,MAAI,CAAC,EAAiB;EACtB,IAAM,IAAK,YAAY,GAAa,EAAgB;AACpD,eAAa,cAAc,EAAG;IAC7B,CAAC,EAAgB,CAAC;CAErB,IAAM,IAAe,EAAM,cAClB,aAAoB,OAAO,IAAW,IAAI,KAAK,EAAS,EAC/D,CAAC,EAAS,CACX,EACK,KAAoB,EAAa,SAAS,GAAG,KAAK,KAAK,IAAI,KAE7D;AACJ,CAOE,IAPE,KAAoB,IACT,gCACJ,KAAoB,IAChB,kBACJ,KAAoB,IAChB,oBAEA;CAGf,IAAM,IAAO,MAAW,aACpB,EAAe,EAAiB,GAChC,EAAe,EAAa,EAI1B,IAFY,KAAoB,KACnB,KAAoB,KAAqB,IAAmB,GAGzE,IAAc,MAAW,YACzB,IAAiB,EAAa,gBAAgB;AAEpD,KAAI,GAAa;EACf,IAAM,IACJ,kBAAC,EAAO,MAAR;GACO;GACL,WAAW,EAAG,2DAA2D,GAAY,EAAU;GAC/F,SAAS,EAAE,SAAS;IAAC;IAAG;IAAK;IAAE,EAAE;GACjC,YAAY;IAAE,UAAU;IAAG,QAAQ;IAAU;GAC7C,GAAI,EAAY,EAAM;aALxB,CAOG,KAAY,kBAAC,GAAD;IAAM,MAAM;IAAW,MAAK;IAAO,CAAA,EAC/C,EACW;;AAGhB,SAAO,IAAc,kBAAC,GAAD;GAAe,SAAS;aAAiB;GAAsB,CAAA,GAAG;;CAGzF,IAAM,IACJ,kBAAC,QAAD;EACO;EACL,WAAW,EAAG,2DAA2D,GAAY,EAAU;EAC/F,GAAI;YAHN,CAKG,KAAY,kBAAC,GAAD;GAAM,MAAM;GAAW,MAAK;GAAO,CAAA,EAC/C,EACI;;AAGT,QAAO,IAAc,kBAAC,GAAD;EAAe,SAAS;YAAiB;EAAsB,CAAA,GAAG;EACvF;AACF,EAAkB,cAAc"}