@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/composed/multi-select-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-full object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-ds-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-ds-xs text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}
+{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-pill object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-ds-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-ds-xs text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}

package/dist/composed/page-header.js

@@ -25,7 +25,7 @@ var i = t.forwardRef(({ title: i, subtitle: a, actions: o, breadcrumbs: s, title
 				children: /* @__PURE__ */ n("path", { d: "M9 6l6 6l-6 6" })
 			}), i.href ? /* @__PURE__ */ n("a", {
 				href: i.href,
-				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner",
 				children: i.label
 			}) : /* @__PURE__ */ n("span", {
 				className: e("text-ds-sm", a === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"),

package/dist/composed/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAkBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAkBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}

package/dist/composed/page-skeletons.js

@@ -11,27 +11,27 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 		children: [/* @__PURE__ */ r("div", {
 			className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4",
 			children: Array.from({ length: 4 }).map((n, o) => /* @__PURE__ */ i("div", {
-				className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
+				className: "flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b",
 				children: [
 					/* @__PURE__ */ i("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[80px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) })]
+						children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[80px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })]
 					}),
 					/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-[64px]", a) }),
 					/* @__PURE__ */ r(t, { className: e("h-ds-03 w-[112px]", a) })
 				]
 			}, `stat-${o}`))
 		}), /* @__PURE__ */ i("div", {
-			className: "rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06",
+			className: "rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06",
 			children: [
 				/* @__PURE__ */ i("div", {
 					className: "mb-ds-06 flex items-center justify-between",
 					children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[128px]", a) }), /* @__PURE__ */ i("div", {
 						className: "flex items-center gap-ds-03",
 						children: [
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) }),
+							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) }),
 							/* @__PURE__ */ r(t, { className: e("h-[16px] w-[112px]", a) }),
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) })
+							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })
 						]
 					})]
 				}),
@@ -41,7 +41,7 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 				}),
 				/* @__PURE__ */ r("div", {
 					className: "grid grid-cols-7 gap-ds-03",
-					children: Array.from({ length: 35 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-md w-ds-md rounded-ds-full", a) }, `cal-${i}`))
+					children: Array.from({ length: 35 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-md w-ds-md rounded-pill", a) }, `cal-${i}`))
 				})
 			]
 		})]
@@ -59,23 +59,23 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 				children: [/* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-ds-03",
 					children: [/* @__PURE__ */ r(t, { className: e("h-[24px] w-[112px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-[160px]", a) })]
-				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-ds-lg", a) })]
+				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-surface", a) })]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col gap-ds-04 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-ds-lg", a) }), /* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-surface", a) }), /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-02b",
-					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-[64px] rounded-ds-lg", a) }, `f-${i}`))
+					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-[64px] rounded-surface", a) }, `f-${i}`))
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3",
 				children: Array.from({ length: 6 }).map((n, o) => /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
+					className: "flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b",
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[64px] rounded-ds-full", a) }), /* @__PURE__ */ r(t, { className: e("h-[16px] w-[80px] rounded-ds-md", a) })]
+							children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[64px] rounded-pill", a) }), /* @__PURE__ */ r(t, { className: e("h-[16px] w-[80px] rounded-control", a) })]
 						}),
 						/* @__PURE__ */ i("div", {
 							className: "flex flex-col gap-ds-03",
@@ -89,7 +89,7 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 							className: "flex items-center justify-between pt-ds-02",
 							children: [/* @__PURE__ */ r("div", {
 								className: "flex -space-x-ds-03",
-								children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-full", a) }, `av-${o}-${i}`))
+								children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-pill", a) }, `av-${o}-${i}`))
 							}), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-md", a) })]
 						})
 					]
@@ -103,20 +103,20 @@ var c = n.forwardRef(function({ className: n, ...o }, s) {
 	return /* @__PURE__ */ i("div", {
 		ref: s,
 		...o,
-		className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-raised", n),
+		className: e("flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised", n),
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05",
 				children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[192px]", a) }), /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-lg", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-lg", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) })]
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05",
 				children: Array.from({ length: 5 }).map((n, o) => /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-05 py-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[96px] shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-[24px] w-[128px] rounded-ds-md", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[96px] shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-[24px] w-[128px] rounded-control", a) })]
 				}, `prop-${o}`))
 			}),
 			/* @__PURE__ */ r("div", {

package/dist/composed/page-skeletons.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[12px] w-[80px]', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-[64px]', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-[20px] w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n            <Skeleton className={cn('h-[16px] w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-[12px] w-[32px]', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-ds-full', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-[24px] w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-[160px]', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-ds-lg', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-ds-lg', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-[64px] rounded-ds-lg', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[20px] w-[64px] rounded-ds-full', shimmer)} />\n              <Skeleton className={cn('h-[16px] w-[80px] rounded-ds-md', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-[16px] w-3/4', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-full', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[20px] w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-lg', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-lg', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-[12px] w-[96px] shrink-0', shimmer)} />\n            <Skeleton className={cn('h-[24px] w-[128px] rounded-ds-md', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-[16px] w-[64px]', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-4/5', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[12px] w-[80px]', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-[64px]', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-[20px] w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            <Skeleton className={cn('h-[16px] w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-[12px] w-[32px]', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-pill', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-[24px] w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-[160px]', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-surface', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-surface', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-[64px] rounded-surface', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[20px] w-[64px] rounded-pill', shimmer)} />\n              <Skeleton className={cn('h-[16px] w-[80px] rounded-control', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-[16px] w-3/4', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-pill', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[20px] w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-[12px] w-[96px] shrink-0', shimmer)} />\n            <Skeleton className={cn('h-[24px] w-[128px] rounded-control', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-[16px] w-[64px]', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-4/5', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}

package/dist/composed/priority-indicator.js

@@ -43,7 +43,7 @@ var d = {
 	if (r === "compact") {
 		let e = /* @__PURE__ */ i("div", {
 			ref: c,
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-02", p.bgColor, o),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-02", p.bgColor, o),
 			title: p.label,
 			...s,
 			children: /* @__PURE__ */ i(n, {
@@ -82,14 +82,14 @@ var d = {
 				duration: 2,
 				ease: "easeInOut"
 			},
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-01", p.bgColor),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-01", p.bgColor),
 			children: /* @__PURE__ */ i(n, {
 				icon: m,
 				size: "sm",
 				className: p.color
 			})
 		}) : /* @__PURE__ */ i("div", {
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-01", p.bgColor),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-01", p.bgColor),
 			children: /* @__PURE__ */ i(n, {
 				icon: m,
 				size: "sm",

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

@@ -1 +1 @@
-{"version":3,"file":"priority-indicator.js","names":[],"sources":["../../src/composed/priority-indicator.tsx"],"sourcesContent":["'use client'\n\nimport type { Icon as TablerIcon } from '@tabler/icons-react'\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconMinus,\n} from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon, type IconProps } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\nexport type Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'\n\nconst priorityConfig: Record<\n  Uppercase<Priority>,\n  { icon: TablerIcon; color: string; bgColor: string; label: string }\n> = {\n  LOW: {\n    icon: IconArrowDown,\n    color: 'text-category-slate-11',\n    bgColor: 'bg-category-slate-3',\n    label: 'Low',\n  },\n  MEDIUM: {\n    icon: IconMinus,\n    color: 'text-warning-11',\n    bgColor: 'bg-warning-3',\n    label: 'Medium',\n  },\n  HIGH: {\n    icon: IconArrowUp,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'High',\n  },\n  URGENT: {\n    icon: IconAlertTriangle,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'Urgent',\n  },\n}\n\nconst priorityVariants = cva(\n  'inline-flex items-center gap-ds-02b font-body',\n  {\n    variants: {\n      display: {\n        compact: '',\n        full: '',\n      },\n    },\n    defaultVariants: {\n      display: 'full',\n    },\n  },\n)\n\nexport interface PriorityIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof priorityVariants> {\n  priority: Priority\n}\n\nconst PriorityIndicator = React.forwardRef<HTMLDivElement, PriorityIndicatorProps>(\n  ({ priority, display, className, ...props }, ref) => {\n    const normalizedPriority = priority.toUpperCase() as 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'\n    const config = priorityConfig[normalizedPriority]\n    const PriorityIcon = config.icon as IconProps['icon']\n\n    const isUrgent = normalizedPriority === 'URGENT'\n\n    if (display === 'compact') {\n      const iconWrapper = (\n        <div\n          ref={ref}\n          className={cn(\n            'inline-flex items-center justify-center rounded-ds-md p-ds-02',\n            config.bgColor,\n            className,\n          )}\n          title={config.label}\n          {...props}\n        >\n          <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n        </div>\n      )\n\n      if (isUrgent) {\n        return (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className=\"inline-flex\"\n          >\n            {iconWrapper}\n          </motion.div>\n        )\n      }\n\n      return iconWrapper\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(priorityVariants({ display }), className)}\n        {...props}\n      >\n        {isUrgent ? (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className={cn(\n              'inline-flex items-center justify-center rounded-ds-md p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </motion.div>\n        ) : (\n          <div\n            className={cn(\n              'inline-flex items-center justify-center rounded-ds-md p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </div>\n        )}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          {config.label}\n        </span>\n      </div>\n    )\n  },\n)\nPriorityIndicator.displayName = 'PriorityIndicator'\n\nexport { PriorityIndicator }\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAGF;CACF,KAAK;EACH,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACF,EAEK,IAAmB,EACvB,iDACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF,EAQK,IAAoB,EAAM,YAC7B,EAAE,aAAU,YAAS,cAAW,GAAG,KAAS,MAAQ;CACnD,IAAM,IAAqB,EAAS,aAAa,EAC3C,IAAS,EAAe,IACxB,IAAe,EAAO,MAEtB,IAAW,MAAuB;AAExC,KAAI,MAAY,WAAW;EACzB,IAAM,IACJ,kBAAC,OAAD;GACO;GACL,WAAW,EACT,iEACA,EAAO,SACP,EACD;GACD,OAAO,EAAO;GACd,GAAI;aAEJ,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA;AAeR,SAZI,IAEA,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAU;aAET;GACU,CAAA,GAIV;;AAGT,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,EAAiB,EAAE,YAAS,CAAC,EAAE,EAAU;EACvD,GAAI;YAHN,CAKG,IACC,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAW,EACT,iEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GACpD,CAAA,GAEb,kBAAC,OAAD;GACE,WAAW,EACT,iEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA,EAER,kBAAC,QAAD;GAAM,WAAU;aACb,EAAO;GACH,CAAA,CACH;;EAGX;AACD,EAAkB,cAAc"}
+{"version":3,"file":"priority-indicator.js","names":[],"sources":["../../src/composed/priority-indicator.tsx"],"sourcesContent":["'use client'\n\nimport type { Icon as TablerIcon } from '@tabler/icons-react'\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconMinus,\n} from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon, type IconProps } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\nexport type Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'\n\nconst priorityConfig: Record<\n  Uppercase<Priority>,\n  { icon: TablerIcon; color: string; bgColor: string; label: string }\n> = {\n  LOW: {\n    icon: IconArrowDown,\n    color: 'text-category-slate-11',\n    bgColor: 'bg-category-slate-3',\n    label: 'Low',\n  },\n  MEDIUM: {\n    icon: IconMinus,\n    color: 'text-warning-11',\n    bgColor: 'bg-warning-3',\n    label: 'Medium',\n  },\n  HIGH: {\n    icon: IconArrowUp,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'High',\n  },\n  URGENT: {\n    icon: IconAlertTriangle,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'Urgent',\n  },\n}\n\nconst priorityVariants = cva(\n  'inline-flex items-center gap-ds-02b font-body',\n  {\n    variants: {\n      display: {\n        compact: '',\n        full: '',\n      },\n    },\n    defaultVariants: {\n      display: 'full',\n    },\n  },\n)\n\nexport interface PriorityIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof priorityVariants> {\n  priority: Priority\n}\n\nconst PriorityIndicator = React.forwardRef<HTMLDivElement, PriorityIndicatorProps>(\n  ({ priority, display, className, ...props }, ref) => {\n    const normalizedPriority = priority.toUpperCase() as 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'\n    const config = priorityConfig[normalizedPriority]\n    const PriorityIcon = config.icon as IconProps['icon']\n\n    const isUrgent = normalizedPriority === 'URGENT'\n\n    if (display === 'compact') {\n      const iconWrapper = (\n        <div\n          ref={ref}\n          className={cn(\n            'inline-flex items-center justify-center rounded-control p-ds-02',\n            config.bgColor,\n            className,\n          )}\n          title={config.label}\n          {...props}\n        >\n          <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n        </div>\n      )\n\n      if (isUrgent) {\n        return (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className=\"inline-flex\"\n          >\n            {iconWrapper}\n          </motion.div>\n        )\n      }\n\n      return iconWrapper\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(priorityVariants({ display }), className)}\n        {...props}\n      >\n        {isUrgent ? (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className={cn(\n              'inline-flex items-center justify-center rounded-control p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </motion.div>\n        ) : (\n          <div\n            className={cn(\n              'inline-flex items-center justify-center rounded-control p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </div>\n        )}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          {config.label}\n        </span>\n      </div>\n    )\n  },\n)\nPriorityIndicator.displayName = 'PriorityIndicator'\n\nexport { PriorityIndicator }\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAGF;CACF,KAAK;EACH,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACF,EAEK,IAAmB,EACvB,iDACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF,EAQK,IAAoB,EAAM,YAC7B,EAAE,aAAU,YAAS,cAAW,GAAG,KAAS,MAAQ;CACnD,IAAM,IAAqB,EAAS,aAAa,EAC3C,IAAS,EAAe,IACxB,IAAe,EAAO,MAEtB,IAAW,MAAuB;AAExC,KAAI,MAAY,WAAW;EACzB,IAAM,IACJ,kBAAC,OAAD;GACO;GACL,WAAW,EACT,mEACA,EAAO,SACP,EACD;GACD,OAAO,EAAO;GACd,GAAI;aAEJ,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA;AAeR,SAZI,IAEA,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAU;aAET;GACU,CAAA,GAIV;;AAGT,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,EAAiB,EAAE,YAAS,CAAC,EAAE,EAAU;EACvD,GAAI;YAHN,CAKG,IACC,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAW,EACT,mEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GACpD,CAAA,GAEb,kBAAC,OAAD;GACE,WAAW,EACT,mEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA,EAER,kBAAC,QAAD;GAAM,WAAU;aACb,EAAO;GACH,CAAA,CACH;;EAGX;AACD,EAAkB,cAAc"}