@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/ui/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useFloating, offset, flip, shift, size, autoUpdate } from '@floating-ui/react-dom'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs, tweens } from './lib/motion'\nimport { useFormField } from './form'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        size({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-ds-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteProps, type AutocompleteOption }\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate,flip, offset, shift, size, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useFormField } from './form'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        size({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-ds-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps }\n"],"mappings":"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"}

package/dist/ui/avatar.d.ts

@@ -1,7 +1,7 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
 import * as AvatarPrimitive from "../primitives/react-avatar";
+import * as React from "react";
 export declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     shape?: "circle" | "square" | "rounded" | null | undefined;
@@ -70,5 +70,5 @@ export interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<type
     colorSeed?: string;
 }
 declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarFallback, AvatarImage };
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA+EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA+EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}

package/dist/ui/avatar.js

@@ -1,13 +1,13 @@
 "use client";
 import { $t as e, Qt as t, en as n } from "../_chunks/primitives.js";
-import { a as r } from "../_chunks/framer.js";
-import { springs as i } from "./lib/motion.js";
-import { t as a } from "../_chunks/vendor-utils.js";
-import { cn as o } from "./lib/utils.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { springs as r } from "./lib/motion.js";
+import { t as i } from "../_chunks/vendor-utils.js";
+import { cn as a } from "./lib/utils.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { motion as l } from "framer-motion";
 //#region src/ui/avatar.tsx
-var u = s.createContext("circle"), d = s.createContext("md"), f = a("relative flex shrink-0 overflow-hidden", {
+var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative flex shrink-0 overflow-hidden", {
 	variants: {
 		size: {
 			xs: "h-ds-xs w-ds-xs",
@@ -95,38 +95,38 @@ function b(e) {
 	for (let n = 0; n < e.length; n++) t = (t << 5) + t + e.charCodeAt(n) | 0;
 	return y[Math.abs(t) % y.length];
 }
-var x = s.forwardRef(({ className: e, size: t, shape: a, status: s, ring: v, badge: y, loading: b, children: x, ...S }, C) => {
-	let w = a ?? "circle", T = v && v !== "none" ? o("ring-2 ring-offset-2 ring-offset-surface-raised", g[v], _[w]) : void 0;
-	if (b) return /* @__PURE__ */ c("span", {
+var x = o.forwardRef(({ className: e, size: t, shape: i, status: o, ring: v, badge: y, loading: b, children: x, ...S }, C) => {
+	let w = i ?? "circle", T = v && v !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", g[v], _[w]) : void 0;
+	if (b) return /* @__PURE__ */ s("span", {
 		ref: C,
-		className: o("relative inline-flex shrink-0", T),
-		children: /* @__PURE__ */ c("span", {
-			className: o(f({
+		className: a("relative inline-flex shrink-0", T),
+		children: /* @__PURE__ */ s("span", {
+			className: a(f({
 				size: t,
-				shape: a
+				shape: i
 			}), "animate-pulse bg-surface-raised-hover"),
 			"data-slot": "avatar-skeleton"
 		})
 	});
 	let E = y !== void 0 && y !== 0;
-	return /* @__PURE__ */ c(u.Provider, {
+	return /* @__PURE__ */ s(u.Provider, {
 		value: w,
-		children: /* @__PURE__ */ c(d.Provider, {
+		children: /* @__PURE__ */ s(d.Provider, {
 			value: t ?? "md",
-			children: /* @__PURE__ */ l("span", {
-				className: o("relative inline-flex shrink-0", T),
+			children: /* @__PURE__ */ c("span", {
+				className: a("relative inline-flex shrink-0", T),
 				children: [
-					/* @__PURE__ */ c(n, {
+					/* @__PURE__ */ s(n, {
 						ref: C,
-						className: o(f({
+						className: a(f({
 							size: t,
-							shape: a
+							shape: i
 						}), e),
 						...S,
 						children: x
 					}),
-					s && (s === "online" ? /* @__PURE__ */ c(r.span, {
-						className: o("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[s], h[t ?? "md"]),
+					o && (o === "online" ? /* @__PURE__ */ s(l.span, {
+						className: a("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
 						animate: { opacity: [
 							1,
 							.75,
@@ -138,26 +138,26 @@ var x = s.forwardRef(({ className: e, size: t, shape: a, status: s, ring: v, bad
 							ease: "easeInOut"
 						},
 						role: "img",
-						"aria-label": m[s]
-					}) : /* @__PURE__ */ c("span", {
-						className: o("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[s], h[t ?? "md"]),
+						"aria-label": m[o]
+					}) : /* @__PURE__ */ s("span", {
+						className: a("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
 						role: "img",
-						"aria-label": m[s]
+						"aria-label": m[o]
 					})),
-					E && (y === "dot" ? /* @__PURE__ */ c("span", {
+					E && (y === "dot" ? /* @__PURE__ */ s("span", {
 						className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
-					}) : typeof y == "number" ? /* @__PURE__ */ c(r.span, {
+					}) : typeof y == "number" ? /* @__PURE__ */ s(l.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
-						transition: i.bouncy,
+						transition: r.bouncy,
 						className: "absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge",
 						role: "status",
 						"aria-label": `${y > 99 ? "99+" : y} notifications`,
 						children: y > 99 ? "99+" : y
-					}) : /* @__PURE__ */ c("span", {
+					}) : /* @__PURE__ */ s("span", {
 						className: "absolute -right-1 -top-1",
 						"data-slot": "avatar-badge-custom",
 						children: y
@@ -168,7 +168,7 @@ var x = s.forwardRef(({ className: e, size: t, shape: a, status: s, ring: v, bad
 	});
 });
 x.displayName = n.displayName;
-var S = s.forwardRef(({ className: t, ...n }, a) => /* @__PURE__ */ c(r.span, {
+var S = o.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ s(l.span, {
 	initial: {
 		opacity: 0,
 		scale: .96
@@ -177,21 +177,21 @@ var S = s.forwardRef(({ className: t, ...n }, a) => /* @__PURE__ */ c(r.span, {
 		opacity: 1,
 		scale: 1
 	},
-	transition: i.smooth,
+	transition: r.smooth,
 	className: "absolute inset-0 h-full w-full",
-	children: /* @__PURE__ */ c(e, {
-		ref: a,
-		className: o("aspect-square h-full w-full", t),
+	children: /* @__PURE__ */ s(e, {
+		ref: i,
+		className: a("aspect-square h-full w-full", t),
 		...n
 	})
 }));
 S.displayName = e.displayName;
-var C = s.forwardRef(({ className: e, colorSeed: n, children: r, ...i }, a) => {
-	let l = typeof r == "string" ? r : "", f = b(n ?? l), p = s.useContext(u), m = s.useContext(d), h = p === "square" ? "rounded-ds-none" : p === "rounded" ? "rounded-ds-md" : "rounded-ds-full", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
-	return /* @__PURE__ */ c(t, {
-		ref: a,
+var C = o.forwardRef(({ className: e, colorSeed: n, children: r, ...i }, c) => {
+	let l = typeof r == "string" ? r : "", f = b(n ?? l), p = o.useContext(u), m = o.useContext(d), h = p === "square" ? "rounded-ds-none" : p === "rounded" ? "rounded-ds-md" : "rounded-ds-full", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
+	return /* @__PURE__ */ s(t, {
+		ref: c,
 		"data-slot": "avatar-fallback",
-		className: o("flex h-full w-full items-center justify-center font-semibold", h, v[m], f.bg, f.text, g, e),
+		className: a("flex h-full w-full items-center justify-center font-semibold", h, v[m], f.bg, f.text, g, e),
 		...i,
 		children: r
 	});

package/dist/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\n\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-ds-full',\n        square: 'rounded-ds-none',\n        rounded: 'rounded-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\nconst statusColorMap: Record<AvatarStatus, string> = {\n  online: 'bg-success-9',\n  offline: 'bg-surface-raised-hover',\n  busy: 'bg-error-9',\n  away: 'bg-warning-9',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/**\n * Dot size classes that scale with the avatar size.\n * xs/sm get a smaller dot, md gets medium, lg/xl get a larger dot.\n */\nconst statusDotSizeMap: Record<string, string> = {\n  xs: 'h-ds-02b w-ds-02b',\n  sm: 'h-[8px] w-[8px]',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-[12px] w-[12px]',\n  xl: 'h-ds-04 w-ds-04',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-ds-full',\n  square: 'rounded-ds-none',\n  rounded: 'rounded-ds-md',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-[9px]',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-md',\n  xl: 'text-ds-lg',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <span\n          className={cn(avatarVariants({ size, shape }), 'animate-pulse bg-surface-raised-hover')}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        status === 'online' ? (\n          <motion.span\n            className={cn('absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])}\n            animate={{ opacity: [1, 0.75, 1] }}\n            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}\n            role=\"img\"\n            aria-label={statusLabelMap[status]}\n          />\n        ) : (\n          <span className={cn('absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])} role=\"img\" aria-label={statusLabelMap[status]} />\n        )\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.bouncy}\n            className=\"absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ opacity: 0, scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-ds-none' : shape === 'rounded' ? 'rounded-ds-md' : 'rounded-ds-full'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-ds-full',\n        square: 'rounded-ds-none',\n        rounded: 'rounded-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\nconst statusColorMap: Record<AvatarStatus, string> = {\n  online: 'bg-success-9',\n  offline: 'bg-surface-raised-hover',\n  busy: 'bg-error-9',\n  away: 'bg-warning-9',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/**\n * Dot size classes that scale with the avatar size.\n * xs/sm get a smaller dot, md gets medium, lg/xl get a larger dot.\n */\nconst statusDotSizeMap: Record<string, string> = {\n  xs: 'h-ds-02b w-ds-02b',\n  sm: 'h-[8px] w-[8px]',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-[12px] w-[12px]',\n  xl: 'h-ds-04 w-ds-04',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-ds-full',\n  square: 'rounded-ds-none',\n  rounded: 'rounded-ds-md',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-[9px]',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-md',\n  xl: 'text-ds-lg',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <span\n          className={cn(avatarVariants({ size, shape }), 'animate-pulse bg-surface-raised-hover')}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        status === 'online' ? (\n          <motion.span\n            className={cn('absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])}\n            animate={{ opacity: [1, 0.75, 1] }}\n            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}\n            role=\"img\"\n            aria-label={statusLabelMap[status]}\n          />\n        ) : (\n          <span className={cn('absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])} role=\"img\" aria-label={statusLabelMap[status]} />\n        )\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.bouncy}\n            className=\"absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ opacity: 0, scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-ds-none' : shape === 'rounded' ? 'rounded-ds-md' : 'rounded-ds-full'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}

package/dist/ui/badge-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge-group.d.ts","sourceRoot":"","sources":["../../src/ui/badge-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAEhD,QAAA,MAAM,WAAW;;;;CAIP,CAAA;AAEV,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,OAAO,WAAW,CAAA;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,GAAe,EACf,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,2CAsBjB;yBA7Be,UAAU"}
+{"version":3,"file":"badge-group.d.ts","sourceRoot":"","sources":["../../src/ui/badge-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAGhD,QAAA,MAAM,WAAW;;;;CAIP,CAAA;AAEV,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,OAAO,WAAW,CAAA;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,GAAe,EACf,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,2CAsBjB;yBA7Be,UAAU"}

package/dist/ui/badge-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge-indicator.d.ts","sourceRoot":"","sources":["../../src/ui/badge-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,iBAAiB;;;;;CAKb,CAAA;AAEV,QAAA,MAAM,aAAa;;;;;;CAMT,CAAA;AAEV,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,OAAO,aAAa,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAQ,EACR,GAAW,EACX,KAAe,EACf,SAAiB,EACjB,QAAgB,EAChB,SAAuB,EACvB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CA+BrB;yBAzCe,cAAc"}
+{"version":3,"file":"badge-indicator.d.ts","sourceRoot":"","sources":["../../src/ui/badge-indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,iBAAiB;;;;;CAKb,CAAA;AAEV,QAAA,MAAM,aAAa;;;;;;CAMT,CAAA;AAEV,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,OAAO,aAAa,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAQ,EACR,GAAW,EACX,KAAe,EACf,SAAiB,EACjB,QAAgB,EAChB,SAAuB,EACvB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CA+BrB;yBAzCe,cAAc"}

package/dist/ui/badge-indicator.js

@@ -1,9 +1,9 @@
 "use client";
-import { a as e, c as t, n } from "../_chunks/framer.js";
-import { springs as r } from "./lib/motion.js";
-import { cn as i } from "./lib/utils.js";
+import { springs as e } from "./lib/motion.js";
+import { cn as t } from "./lib/utils.js";
 import "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { AnimatePresence as i, motion as a, useReducedMotion as o } from "framer-motion";
 //#region src/ui/badge-indicator.tsx
 var s = {
 	"top-right": "-top-1 -right-1",
@@ -18,10 +18,10 @@ var s = {
 	info: "bg-info-9 text-info-fg"
 };
 function l({ count: l, max: u = 99, dot: d = !1, color: f = "error", invisible: p = !1, showZero: m = !1, placement: h = "top-right", className: g, children: _ }) {
-	let v = n(), y = !p && (d || l !== void 0 && (l > 0 || m)), b = l !== void 0 && l > u ? `${u}+` : l;
-	return /* @__PURE__ */ o("span", {
-		className: i("relative inline-flex", g),
-		children: [_, /* @__PURE__ */ a(t, { children: y && /* @__PURE__ */ a(e.span, {
+	let v = o(), y = !p && (d || l !== void 0 && (l > 0 || m)), b = l !== void 0 && l > u ? `${u}+` : l;
+	return /* @__PURE__ */ r("span", {
+		className: t("relative inline-flex", g),
+		children: [_, /* @__PURE__ */ n(i, { children: y && /* @__PURE__ */ n(a.span, {
 			initial: v ? { opacity: 0 } : {
 				scale: 0,
 				opacity: 0
@@ -34,8 +34,8 @@ function l({ count: l, max: u = 99, dot: d = !1, color: f = "error", invisible:
 				scale: 0,
 				opacity: 0
 			},
-			transition: r.bouncy,
-			className: i("absolute flex items-center justify-center rounded-full font-sans font-semibold ring-2 ring-surface-raised", c[f], s[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
+			transition: e.bouncy,
+			className: t("absolute flex items-center justify-center rounded-full font-sans font-semibold ring-2 ring-surface-raised", c[f], s[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
 			children: !d && b
 		}, "indicator") })]
 	});

package/dist/ui/badge-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\nconst COLOR_CLASSES = {\n  error: 'bg-error-9 text-error-fg',\n  success: 'bg-success-9 text-success-fg',\n  warning: 'bg-warning-9 text-warning-fg',\n  accent: 'bg-accent-9 text-accent-fg',\n  info: 'bg-info-9 text-info-fg',\n} as const\n\nexport interface BadgeIndicatorProps {\n  count?: number\n  max?: number\n  dot?: boolean\n  color?: keyof typeof COLOR_CLASSES\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  className?: string\n  children: React.ReactNode\n}\n\nexport function BadgeIndicator({\n  count,\n  max = 99,\n  dot = false,\n  color = 'error',\n  invisible = false,\n  showZero = false,\n  placement = 'top-right',\n  className,\n  children,\n}: BadgeIndicatorProps) {\n  const prefersReduced = useReducedMotion()\n  const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n  const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n  return (\n    <span className={cn('relative inline-flex', className)}>\n      {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.bouncy}\n            className={cn(\n              'absolute flex items-center justify-center rounded-full font-sans font-semibold ring-2 ring-surface-raised',\n              COLOR_CLASSES[color],\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n}\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAOA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;CAChB,EAEK,IAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACP;AAcD,SAAgB,EAAe,EAC7B,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,eACsB;CACtB,IAAM,IAAiB,GAAkB,EACnC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;AAEtE,QACE,kBAAC,QAAD;EAAM,WAAW,EAAG,wBAAwB,EAAU;YAAtD,CACG,GACD,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GACnE,SAAS,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GACnE,MAAM,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GAChE,YAAY,EAAQ;GACpB,WAAW,EACT,6GACA,EAAc,IACd,EAAkB,IAClB,IACI,gBACA,sDACL;aAEA,CAAC,KAAO;GACG,EAfR,YAeQ,EAEA,CAAA,CACb;;;AAIX,EAAe,cAAc"}
+{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\nconst COLOR_CLASSES = {\n  error: 'bg-error-9 text-error-fg',\n  success: 'bg-success-9 text-success-fg',\n  warning: 'bg-warning-9 text-warning-fg',\n  accent: 'bg-accent-9 text-accent-fg',\n  info: 'bg-info-9 text-info-fg',\n} as const\n\nexport interface BadgeIndicatorProps {\n  count?: number\n  max?: number\n  dot?: boolean\n  color?: keyof typeof COLOR_CLASSES\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  className?: string\n  children: React.ReactNode\n}\n\nexport function BadgeIndicator({\n  count,\n  max = 99,\n  dot = false,\n  color = 'error',\n  invisible = false,\n  showZero = false,\n  placement = 'top-right',\n  className,\n  children,\n}: BadgeIndicatorProps) {\n  const prefersReduced = useReducedMotion()\n  const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n  const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n  return (\n    <span className={cn('relative inline-flex', className)}>\n      {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.bouncy}\n            className={cn(\n              'absolute flex items-center justify-center rounded-full font-sans font-semibold ring-2 ring-surface-raised',\n              COLOR_CLASSES[color],\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n}\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAQA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;CAChB,EAEK,IAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACP;AAcD,SAAgB,EAAe,EAC7B,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,eACsB;CACtB,IAAM,IAAiB,GAAkB,EACnC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;AAEtE,QACE,kBAAC,QAAD;EAAM,WAAW,EAAG,wBAAwB,EAAU;YAAtD,CACG,GACD,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GACnE,SAAS,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GACnE,MAAM,IAAiB,EAAE,SAAS,GAAG,GAAG;IAAE,OAAO;IAAG,SAAS;IAAG;GAChE,YAAY,EAAQ;GACpB,WAAW,EACT,6GACA,EAAc,IACd,EAAkB,IAClB,IACI,gBACA,sDACL;aAEA,CAAC,KAAO;GACG,EAfR,YAeQ,EAEA,CAAA,CACb;;;AAIX,EAAe,cAAc"}

package/dist/ui/badge.d.ts

@@ -1,7 +1,7 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
-import { BadgeIndicator } from './badge-indicator';
 import { BadgeGroup } from './badge-group';
+import { BadgeIndicator } from './badge-indicator';
 import * as React from 'react';
 declare const colorMap: {
     readonly default: {
@@ -154,5 +154,5 @@ declare const BadgeCompound: React.ForwardRefExoticComponent<BadgeProps & React.
     Indicator: typeof BadgeIndicator;
     Group: typeof BadgeGroup;
 };
-export { BadgeCompound as Badge, badgeVariants, type BadgeProps, type BadgeColor };
+export { BadgeCompound as Badge, type BadgeColor, type BadgeProps, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAclD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAgMD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAclD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAgMD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,KAAK,UAAU,EAAC,KAAK,UAAU,EAAE,aAAa,EAAE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA2CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA2CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/banner.js

@@ -1,14 +1,14 @@
 "use client";
-import { a as e, c as t } from "../_chunks/framer.js";
-import { motionProps as n, springs as r } from "./lib/motion.js";
-import { t as i } from "../_chunks/vendor-utils.js";
-import { cn as a } from "./lib/utils.js";
-import { Icon as o } from "./icon.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { IconAlertCircle as u, IconAlertTriangle as d, IconCircleCheck as f, IconInfoCircle as p, IconX as m } from "@tabler/icons-react";
+import { motionProps as e, springs as t } from "./lib/motion.js";
+import { t as n } from "../_chunks/vendor-utils.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
 //#region src/ui/banner.tsx
-var h = i("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b", {
+var h = n("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b", {
 	variants: { color: {
 		info: "bg-info-3 border-info-7 text-info-11",
 		success: "bg-success-3 border-success-7 text-success-11",
@@ -18,18 +18,18 @@ var h = i("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md fo
 	} },
 	defaultVariants: { color: "info" }
 }), g = {
-	info: p,
-	success: f,
-	warning: d,
-	error: u,
-	neutral: p
-}, _ = s.forwardRef(({ className: i, color: u = "info", action: d, actions: f, onDismiss: p, children: _, ...v }, y) => {
-	let b = f ?? d, x = g[u ?? "info"], [S, C] = s.useState(!0), w = s.useCallback(() => {
+	info: d,
+	success: u,
+	warning: l,
+	error: c,
+	neutral: d
+}, _ = a.forwardRef(({ className: n, color: c = "info", action: l, actions: u, onDismiss: d, children: _, ...v }, y) => {
+	let b = u ?? l, x = g[c ?? "info"], [S, C] = a.useState(!0), w = a.useCallback(() => {
 		C(!1);
 	}, []);
-	return /* @__PURE__ */ c(t, {
-		onExitComplete: p,
-		children: S && /* @__PURE__ */ l(e.div, {
+	return /* @__PURE__ */ o(p, {
+		onExitComplete: d,
+		children: S && /* @__PURE__ */ s(m.div, {
 			ref: y,
 			initial: {
 				height: "auto",
@@ -39,32 +39,32 @@ var h = i("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md fo
 				height: 0,
 				opacity: 0
 			},
-			transition: r.snappy,
-			className: a(h({ color: u }), "overflow-hidden", i),
+			transition: t.snappy,
+			className: r(h({ color: c }), "overflow-hidden", n),
 			role: "alert",
-			...n(v),
+			...e(v),
 			children: [
-				/* @__PURE__ */ c(o, {
+				/* @__PURE__ */ o(i, {
 					icon: x,
 					size: "md",
 					className: "shrink-0"
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ o("div", {
 					className: "min-w-0 flex-1",
 					children: _
 				}),
-				b && /* @__PURE__ */ c("div", {
+				b && /* @__PURE__ */ o("div", {
 					className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10",
 					children: b
 				}),
-				p && /* @__PURE__ */ c("button", {
+				d && /* @__PURE__ */ o("button", {
 					type: "button",
 					onClick: w,
 					className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 					"aria-label": "Dismiss",
 					title: "Dismiss",
-					children: /* @__PURE__ */ c(o, {
-						icon: m,
+					children: /* @__PURE__ */ o(i, {
+						icon: f,
 						size: "sm"
 					})
 				})

package/dist/ui/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconCircleCheck, IconInfoCircle, IconX, IconAlertTriangle } from '@tabler/icons-react'\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs, motionProps } from './lib/motion'\nimport { Icon } from './icon'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b',\n  {\n    variants: {\n      color: {\n        info:\n          'bg-info-3 border-info-7 text-info-11',\n        success:\n          'bg-success-3 border-success-7 text-success-11',\n        warning:\n          'bg-warning-3 border-warning-7 text-warning-11',\n        error:\n          'bg-error-3 border-error-7 text-error-11',\n        neutral:\n          'bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports. The singular `action` prop is deprecated.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" action={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** @deprecated Use `actions` instead */\n  action?: React.ReactNode\n  /** Action slot — accepts any React node(s), typically ghost Buttons. Preferred over `action`. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', action, actions, onDismiss, children, ...props }, ref) => {\n    const resolvedActions = actions ?? action\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={springs.snappy}\n            className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {resolvedActions && (\n              <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{resolvedActions}</div>\n            )}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                aria-label=\"Dismiss\"\n                title=\"Dismiss\"\n              >\n                <Icon icon={IconX} size=\"sm\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAiB,EACrB,2FACA;CACE,UAAU,EACR,OAAO;EACL,MACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,SACE;EACH,EACF;CACD,iBAAiB,EAAE,OAAO,QAAQ;CACnC,CACF,EAEK,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;CACV,EA4CK,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,WAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CACtF,IAAM,IAAkB,KAAW,GAC7B,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAK,EAEhD,IAAgB,EAAM,kBAAkB;AAC5C,IAAa,GAAM;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;IAAG;GACvC,MAAM;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC/B,YAAY,EAAQ;GACpB,WAAW,EAAG,EAAe,EAAE,UAAO,CAAC,EAAE,mBAAmB,EAAU;GACtE,MAAK;GACL,GAAI,EAAY,EAAM;aAPxB;IASE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;KAAa,CAAA;IACzD,kBAAC,OAAD;KAAK,WAAU;KAAkB;KAAe,CAAA;IAC/C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;KAAsB,CAAA;IAE9M,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;MAAO,CAAA;KACxB,CAAA;IAEA;;EAEC,CAAA;EAGvB;AACD,EAAO,cAAc"}
+{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b',\n  {\n    variants: {\n      color: {\n        info:\n          'bg-info-3 border-info-7 text-info-11',\n        success:\n          'bg-success-3 border-success-7 text-success-11',\n        warning:\n          'bg-warning-3 border-warning-7 text-warning-11',\n        error:\n          'bg-error-3 border-error-7 text-error-11',\n        neutral:\n          'bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports. The singular `action` prop is deprecated.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" action={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** @deprecated Use `actions` instead */\n  action?: React.ReactNode\n  /** Action slot — accepts any React node(s), typically ghost Buttons. Preferred over `action`. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', action, actions, onDismiss, children, ...props }, ref) => {\n    const resolvedActions = actions ?? action\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={springs.snappy}\n            className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {resolvedActions && (\n              <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{resolvedActions}</div>\n            )}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                aria-label=\"Dismiss\"\n                title=\"Dismiss\"\n              >\n                <Icon icon={IconX} size=\"sm\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAiB,EACrB,2FACA;CACE,UAAU,EACR,OAAO;EACL,MACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,SACE;EACH,EACF;CACD,iBAAiB,EAAE,OAAO,QAAQ;CACnC,CACF,EAEK,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;CACV,EA4CK,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,WAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CACtF,IAAM,IAAkB,KAAW,GAC7B,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAK,EAEhD,IAAgB,EAAM,kBAAkB;AAC5C,IAAa,GAAM;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;IAAG;GACvC,MAAM;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC/B,YAAY,EAAQ;GACpB,WAAW,EAAG,EAAe,EAAE,UAAO,CAAC,EAAE,mBAAmB,EAAU;GACtE,MAAK;GACL,GAAI,EAAY,EAAM;aAPxB;IASE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;KAAa,CAAA;IACzD,kBAAC,OAAD;KAAK,WAAU;KAAkB;KAAe,CAAA;IAC/C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;KAAsB,CAAA;IAE9M,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;MAAO,CAAA;KACxB,CAAA;IAEA;;EAEC,CAAA;EAGvB;AACD,EAAO,cAAc"}

package/dist/ui/breadcrumb.d.ts

@@ -19,5 +19,5 @@ declare const BreadcrumbEllipsis: {
 };
 export type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'>;
 export type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'>;
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
 //# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,CAAA"}