@devalok/shilp-sutra 0.49.1 → 0.49.3

package/dist/shell/bottom-navbar.js

@@ -24,7 +24,7 @@ function y({ count: e }) {
 function b({ item: r, isActive: o, onClick: s }) {
 	let c = a(), l = v();
 	return /* @__PURE__ */ f(_.div, {
-		whileTap: l ? void 0 : { y: -2 },
+		whileTap: l ? void 0 : { scale: .96 },
 		transition: l ? { duration: 0 } : t.snappy,
 		className: "flex max-w-[70px] flex-1",
 		children: /* @__PURE__ */ f(c, {

package/dist/shell/bottom-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}
+{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { scale: 0.96 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}

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,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,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;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,qFAiFV,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"}
+{"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;AAa9B,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;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,qFA4EV,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

@@ -7,9 +7,9 @@ import { Dot as o } from "./dot.js";
 import { Skeleton as s } from "./skeleton.js";
 import * as c from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { motion as d, useReducedMotion as f } from "framer-motion";
+import { motion as d } from "framer-motion";
 //#region src/ui/avatar.tsx
-var p = c.createContext("circle"), m = c.createContext("md"), h = i("relative flex shrink-0 overflow-hidden", {
+var f = c.createContext("circle"), p = c.createContext("md"), m = i("relative flex shrink-0 overflow-hidden", {
 	variants: {
 		size: {
 			xs: "h-ds-xs w-ds-xs",
@@ -28,37 +28,37 @@ var p = c.createContext("circle"), m = c.createContext("md"), h = i("relative fl
 		size: "md",
 		shape: "circle"
 	}
-}), g = {
+}), h = {
 	online: "success",
 	offline: "neutral",
 	busy: "error",
 	away: "warning"
-}, _ = {
+}, g = {
 	online: "Online",
 	offline: "Offline",
 	busy: "Busy",
 	away: "Away"
-}, v = {
+}, _ = {
 	xs: "xs",
 	sm: "sm",
 	md: "md",
 	lg: "lg",
 	xl: "lg"
-}, y = {
+}, v = {
 	lead: "ring-accent-7",
 	admin: "ring-warning-7",
 	client: "ring-info-7"
-}, b = {
+}, y = {
 	circle: "rounded-pill",
 	square: "rounded-none",
 	rounded: "rounded-control"
-}, x = {
+}, b = {
 	xs: "text-ds-2xs",
 	sm: "text-ds-xs",
 	md: "text-ds-sm",
 	lg: "text-ds-md",
 	xl: "text-ds-lg"
-}, S = [
+}, x = [
 	{
 		bg: "bg-accent-3",
 		text: "text-accent-11"
@@ -92,93 +92,78 @@ var p = c.createContext("circle"), m = c.createContext("md"), h = i("relative fl
 		text: "text-category-cyan-11"
 	}
 ];
-function C(e) {
+function S(e) {
 	let t = 5381;
 	for (let n = 0; n < e.length; n++) t = (t << 5) + t + e.charCodeAt(n) | 0;
-	return S[Math.abs(t) % S.length];
+	return x[Math.abs(t) % x.length];
 }
-var w = c.forwardRef(({ className: e, size: t, shape: i, status: c, ring: x, badge: S, loading: C, children: w, ...T }, E) => {
-	let D = i ?? "circle", O = f(), k = x && x !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", y[x], b[D]) : void 0;
-	if (C) return /* @__PURE__ */ l("span", {
-		ref: E,
-		className: a("relative inline-flex shrink-0", k),
+var C = c.forwardRef(({ className: e, size: t, shape: i, status: c, ring: b, badge: x, loading: S, children: C, ...w }, T) => {
+	let E = i ?? "circle", D = b && b !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", v[b], y[E]) : void 0;
+	if (S) return /* @__PURE__ */ l("span", {
+		ref: T,
+		className: a("relative inline-flex shrink-0", D),
 		children: /* @__PURE__ */ l(s, {
-			className: a(h({
+			className: a(m({
 				size: t,
 				shape: i
 			})),
 			"data-slot": "avatar-skeleton"
 		})
 	});
-	let A = S !== void 0 && S !== 0;
-	return /* @__PURE__ */ l(p.Provider, {
-		value: D,
-		children: /* @__PURE__ */ l(m.Provider, {
+	let O = x !== void 0 && x !== 0;
+	return /* @__PURE__ */ l(f.Provider, {
+		value: E,
+		children: /* @__PURE__ */ l(p.Provider, {
 			value: t ?? "md",
 			children: /* @__PURE__ */ u("span", {
-				className: a("relative inline-flex shrink-0", k),
+				className: a("relative inline-flex shrink-0", D),
 				children: [
 					/* @__PURE__ */ l(n, {
-						ref: E,
-						className: a(h({
+						ref: T,
+						className: a(m({
 							size: t,
 							shape: i
 						}), e),
-						...T,
-						children: w
+						...w,
+						children: C
 					}),
-					c && /* @__PURE__ */ l(d.span, {
+					c && /* @__PURE__ */ l("span", {
 						className: "absolute bottom-0 right-0",
 						role: "img",
-						"aria-label": _[c],
-						...c === "online" && !O ? {
-							animate: { opacity: [
-								1,
-								.75,
-								1
-							] },
-							transition: {
-								duration: 2.5,
-								repeat: Infinity,
-								ease: "easeInOut"
-							}
-						} : {},
+						"aria-label": g[c],
 						children: /* @__PURE__ */ l(o, {
-							color: g[c],
-							size: v[t ?? "md"],
+							color: h[c],
+							size: _[t ?? "md"],
 							withBorder: !0,
 							"aria-hidden": !0
 						})
 					}),
-					A && (S === "dot" ? /* @__PURE__ */ l("span", {
+					O && (x === "dot" ? /* @__PURE__ */ l("span", {
 						className: "absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
-					}) : typeof S == "number" ? /* @__PURE__ */ l(d.span, {
+					}) : typeof x == "number" ? /* @__PURE__ */ l(d.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
 						transition: r.smooth,
 						className: "absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill 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": `${S > 99 ? "99+" : S} notifications`,
-						children: S > 99 ? "99+" : S
+						"aria-label": `${x > 99 ? "99+" : x} notifications`,
+						children: x > 99 ? "99+" : x
 					}) : /* @__PURE__ */ l("span", {
 						className: "absolute -right-1 -top-1",
 						"data-slot": "avatar-badge-custom",
-						children: S
+						children: x
 					}))
 				]
 			})
 		})
 	});
 });
-w.displayName = n.displayName;
-var T = c.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ l(d.span, {
-	initial: {
-		opacity: 0,
-		scale: .96
-	},
+C.displayName = n.displayName;
+var w = c.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ l(d.span, {
+	initial: { scale: .96 },
 	animate: {
 		opacity: 1,
 		scale: 1
@@ -191,17 +176,17 @@ var T = c.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ l(d.span, {
 		...n
 	})
 }));
-T.displayName = t.displayName;
-var E = c.forwardRef(({ className: t, colorSeed: n, children: r, ...i }, o) => {
-	let s = typeof r == "string" ? r : "", u = C(n ?? s), d = c.useContext(p), f = c.useContext(m), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = s.length === 1 ? "tracking-wide" : "tracking-normal";
+w.displayName = t.displayName;
+var T = c.forwardRef(({ className: t, colorSeed: n, children: r, ...i }, o) => {
+	let s = typeof r == "string" ? r : "", u = S(n ?? s), d = c.useContext(f), m = c.useContext(p), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = s.length === 1 ? "tracking-wide" : "tracking-normal";
 	return /* @__PURE__ */ l(e, {
 		ref: o,
 		"data-slot": "avatar-fallback",
-		className: a("flex h-full w-full items-center justify-center font-semibold", h, x[f], u.bg, u.text, g, t),
+		className: a("flex h-full w-full items-center justify-center font-semibold", h, b[m], u.bg, u.text, g, t),
 		...i,
 		children: r
 	});
 });
-E.displayName = e.displayName;
+T.displayName = e.displayName;
 //#endregion
-export { w as Avatar, E as AvatarFallback, T as AvatarImage, h as avatarVariants };
+export { C as Avatar, T as AvatarFallback, w as AvatarImage, m as avatarVariants };

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 AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion, useReducedMotion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\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-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\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\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\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-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-ds-2xs',\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  // MotionConfig can't stop this opacity loop (non-transform), so guard it locally.\n  const prefersReduced = useReducedMotion()\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        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\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        <motion.span\n          className=\"absolute bottom-0 right-0\"\n          role=\"img\"\n          aria-label={statusLabelMap[status]}\n          {...(status === 'online' && !prefersReduced\n            ? { animate: { opacity: [1, 0.75, 1] }, transition: { duration: 2.5, repeat: Infinity, ease: 'easeInOut' } }\n            : {})}\n        >\n          {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + presence breathe + a11y. */}\n          <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n        </motion.span>\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill 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.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill 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-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\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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"}
+{"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 { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\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-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\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\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\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-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-ds-2xs',\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        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\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        <span\n          className=\"absolute bottom-0 right-0\"\n          role=\"img\"\n          aria-label={statusLabelMap[status]}\n        >\n          {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n          <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n        </span>\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill 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.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill 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={{ 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-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\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.d.ts

@@ -139,6 +139,8 @@ interface BadgeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, V
     startIcon?: IconInput;
     endIcon?: IconInput;
     dot?: boolean;
+    /** Pulse the status dot (opt-in; static by default). @default false */
+    dotPulse?: boolean;
     onDismiss?: () => void;
     selected?: boolean;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"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;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,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,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,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;AAyLD,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"}
+{"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;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,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,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,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;AA0LD,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/button.js

@@ -53,22 +53,22 @@ var u = r("relative inline-flex items-center justify-center whitespace-nowrap fo
 		{
 			variant: "solid",
 			color: "accent",
-			className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand"
+			className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised"
 		},
 		{
 			variant: "solid",
 			color: "error",
-			className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised hover:shadow-error"
+			className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised"
 		},
 		{
 			variant: "solid",
 			color: "success",
-			className: "bg-success-9 text-success-fg hover:bg-success-10 shadow-raised hover:shadow-success"
+			className: "bg-success-9 text-success-fg hover:bg-success-10 shadow-raised"
 		},
 		{
 			variant: "solid",
 			color: "warning",
-			className: "bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised hover:shadow-warning"
+			className: "bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised"
 		},
 		{
 			variant: "solid",

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot, Slottable } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { getGroupPositionStyle,useButtonGroup, useButtonGroupItem } from './button-group'\nimport type { ProcessingSpeed } from './button-processing'\nimport { ProcessingOverlay } from './button-processing'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport const buttonVariants = cva(\n  'relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        soft: '',\n        outline: 'border',\n        ghost: '',\n        link: 'underline-offset-4 hover:underline active:opacity-80',\n      },\n      color: {\n        accent: '',\n        error: '',\n        success: '',\n        warning: '',\n        neutral: '',\n      },\n      weight: {\n        semibold: 'font-semibold',\n        normal: 'font-normal',\n      },\n      size: {\n        xs: 'h-ds-xs-plus rounded-control px-ds-03 text-ds-sm gap-ds-02',\n        sm: 'h-ds-sm rounded-control px-ds-04 text-ds-sm gap-ds-02b',\n        md: 'h-ds-md rounded-control px-ds-05 text-ds-md gap-ds-03',\n        lg: 'h-ds-lg rounded-control px-ds-06 text-ds-base gap-2.5',\n        'compact-xs': 'rounded-control px-ds-02 py-[3px] text-ds-sm gap-ds-02',\n        'compact-sm': 'rounded-control px-ds-03 py-[5px] text-ds-sm gap-ds-02b',\n        'compact-md': 'rounded-control px-ds-04 py-ds-03 text-ds-md gap-ds-03',\n        icon: 'h-ds-md w-ds-md rounded-control',\n        'icon-xs': 'h-ds-xs-plus w-ds-xs-plus rounded-control',\n        'icon-sm': 'h-ds-sm w-ds-sm rounded-control',\n        'icon-md': 'h-ds-md w-ds-md rounded-control',\n        'icon-lg': 'h-ds-lg w-ds-lg rounded-control',\n      },\n    },\n    compoundVariants: [\n      // ============ SOLID ============ (colored hover shadows — shadow tints with the button's own hue)\n      { variant: 'solid', color: 'accent',  className: 'bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand' },\n      { variant: 'solid', color: 'error',   className: 'bg-error-9 text-error-fg hover:bg-error-10 shadow-raised hover:shadow-error' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg hover:bg-success-10 shadow-raised hover:shadow-success' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised hover:shadow-warning' },\n      { variant: 'solid', color: 'neutral', className: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 shadow-raised' },\n\n      // ============ SOFT ============\n      { variant: 'soft', color: 'accent',  className: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5' },\n      { variant: 'soft', color: 'error',   className: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5' },\n      { variant: 'soft', color: 'success', className: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5' },\n      { variant: 'soft', color: 'warning', className: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5' },\n      { variant: 'soft', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5' },\n\n      // ============ OUTLINE ============\n      { variant: 'outline', color: 'accent',  className: 'bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4' },\n      { variant: 'outline', color: 'error',   className: 'bg-transparent text-error-11 border-error-7 hover:bg-error-3 active:bg-error-4' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent text-success-11 border-success-7 hover:bg-success-3 active:bg-success-4' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent text-warning-11 border-warning-7 hover:bg-warning-3 active:bg-warning-4' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent text-surface-fg border-surface-border-strong hover:bg-surface-raised-hover active:bg-surface-raised-active' },\n\n      // ============ GHOST ============\n      // ghost+accent uses neutral look for backward compat (most common ghost is toolbar/icon ghost)\n      { variant: 'ghost', color: 'accent',  className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n      { variant: 'ghost', color: 'error',   className: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4' },\n      { variant: 'ghost', color: 'success', className: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4' },\n      { variant: 'ghost', color: 'warning', className: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4' },\n      { variant: 'ghost', color: 'neutral', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n\n      // ============ LINK ============\n      { variant: 'link', color: 'accent',  className: 'text-accent-11' },\n      { variant: 'link', color: 'error',   className: 'text-error-11' },\n      { variant: 'link', color: 'success', className: 'text-success-11' },\n      { variant: 'link', color: 'warning', className: 'text-warning-11' },\n      { variant: 'link', color: 'neutral', className: 'text-surface-fg-muted' },\n    ],\n    defaultVariants: {\n      variant: 'solid',\n      color: 'accent',\n      weight: 'semibold',\n      size: 'md',\n    },\n  },\n)\n\n/** Extra horizontal padding for pill shape — rounded ends eat into visual space */\nconst pillPaddingClass: Record<string, string> = {\n  xs:           'px-ds-04',\n  sm:           'px-ds-05',\n  md:           'px-ds-06',\n  lg:           'px-ds-07',\n  'compact-xs': 'px-ds-03',\n  'compact-sm': 'px-ds-04',\n  'compact-md': 'px-ds-05',\n}\n\n/** Negative margin to tighten icon side padding — pulls icon closer to button edge */\nconst iconInsetClass: Record<string, { start: string; end: string }> = {\n  xs:           { start: '-ml-0.5', end: '-mr-0.5' },\n  sm:           { start: '-ml-1',   end: '-mr-1' },\n  md:           { start: '-ml-1.5', end: '-mr-1.5' },\n  lg:           { start: '-ml-2',   end: '-mr-2' },\n  'compact-xs': { start: '-ml-0.5', end: '-mr-0.5' },\n  'compact-sm': { start: '-ml-0.5', end: '-mr-0.5' },\n  'compact-md': { start: '-ml-1',   end: '-mr-1' },\n  icon:         { start: '', end: '' },\n  'icon-xs':    { start: '', end: '' },\n  'icon-sm':    { start: '', end: '' },\n  'icon-md':    { start: '', end: '' },\n  'icon-lg':    { start: '', end: '' },\n}\n\n/** Map button size to spinner size */\nconst BUTTON_TO_SPINNER_SIZE: Record<string, 'sm' | 'md'> = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  'compact-xs': 'sm',\n  'compact-sm': 'sm',\n  'compact-md': 'sm',\n  icon: 'sm',\n  'icon-xs': 'sm',\n  'icon-sm': 'sm',\n  'icon-md': 'sm',\n  'icon-lg': 'md',\n}\n\n/** Map button size to Icon context size */\nconst BUTTON_TO_ICON_SIZE: Record<string, IconSize> = {\n  xs: 'xs', sm: 'sm', md: 'md', lg: 'lg',\n  'compact-xs': 'xs', 'compact-sm': 'sm', 'compact-md': 'md',\n  icon: 'md', 'icon-xs': 'xs', 'icon-sm': 'sm', 'icon-md': 'md', 'icon-lg': 'lg',\n}\n\n/**\n * Props for Button — the primary action component with a two-axis variant system,\n * multiple size options, icon slots, and a built-in loading state.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"solid\"` (default, filled) | `\"soft\"` (tinted bg) |\n *   `\"outline\"` (bordered) | `\"ghost\"` (transparent, for toolbars) | `\"link\"` (underline, inline)\n * - `color` controls **semantic intent**: `\"accent\"` (default, brand) | `\"error\"` (destructive) |\n *   `\"success\"` | `\"warning\"` | `\"neutral\"` (subdued)\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;\n * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;\n * `icon` | `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons.\n *\n * **Shape:** `\"default\"` uses the `--radius-control` token; `\"pill\"` applies `rounded-pill` (fully-rounded).\n *\n * **Weight:** `\"semibold\"` (default) | `\"normal\"` for lighter labels.\n *\n * **Note:** `ghost` + `accent` renders with neutral styling for backward compat —\n * most ghost buttons are toolbar/icon actions where neutral is expected.\n *\n * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.\n * Use `loadingPosition` to control where the spinner appears.\n *\n * @example\n * // Primary save action (default variant + color):\n * <Button onClick={handleSave}>Save changes</Button>\n *\n * @example\n * // Soft success feedback:\n * <Button variant=\"soft\" color=\"success\" startIcon={<Icon icon={IconCheck} />}>\n *   Approved\n * </Button>\n *\n * @example\n * // Destructive delete with loading state:\n * <Button variant=\"solid\" color=\"error\" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>\n *   Delete project\n * </Button>\n *\n * @example\n * // Compact pill tag:\n * <Button variant=\"soft\" color=\"warning\" size=\"compact-sm\" shape=\"pill\">\n *   Overdue\n * </Button>\n *\n * @example\n * // Ghost toolbar action:\n * <Button variant=\"ghost\" size=\"sm\" startIcon={<Icon icon={IconEdit} />}>\n *   Edit\n * </Button>\n */\nexport interface ButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n  /** Button shape — 'pill' applies rounded-pill for chip/tag-like buttons */\n  shape?: 'default' | 'pill'\n  /** Icon element rendered before children — use <Icon icon={...} /> */\n  startIcon?: IconInput\n  /** Icon element rendered after children — use <Icon icon={...} /> */\n  endIcon?: IconInput\n  /** Show loading spinner and disable button */\n  loading?: boolean\n  /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */\n  loadingPosition?: 'start' | 'end' | 'center'\n  /** Stretch to full width of parent */\n  fullWidth?: boolean\n  /**\n   * Async click handler — auto-manages loading → success/error states.\n   * When provided, the button shows a spinner while the promise is pending,\n   * then briefly flashes green (success) or red (error) before reverting.\n   * Overrides `onClick` and `loading` when active.\n   */\n  onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** How long (ms) to show the success/error state before reverting. Default: 1500 */\n  asyncFeedbackDuration?: number\n\n  /**\n   * Show processing animation — animated border/glow while content stays visible.\n   * `true` = \"working\" speed. Semantic speeds:\n   * - `\"ambient\"` (3s) — background sync, file upload\n   * - `\"working\"` (2s) — standard API call, generation\n   * - `\"urgent\"` (1s) — retry, nearly done\n   */\n  processing?: boolean | 'ambient' | 'working' | 'urgent'\n\n  /** Override processing animation color. Defaults to button's own color. */\n  processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral'\n\n  /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */\n  processingDisabled?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      weight,\n      size,\n      asChild = false,\n      shape,\n      startIcon,\n      endIcon,\n      loading: loadingProp = false,\n      loadingPosition = 'start',\n      fullWidth = false,\n      disabled,\n      onClick,\n      onClickAsync,\n      asyncFeedbackDuration = 1500,\n      processing: processingProp,\n      processingColor,\n      processingDisabled = true,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const group = useButtonGroup()\n    const groupItem = useButtonGroupItem()\n    const resolvedVariant = variant ?? group.variant\n    const resolvedColor = color ?? group.color\n    const resolvedWeight = weight ?? group.weight ?? 'semibold'\n    const resolvedShape = shape ?? group.shape ?? 'default'\n    const resolvedSize = size ?? group.size ?? 'md'\n    // ButtonGroup can propagate disabled to all children\n    const resolvedDisabled = disabled ?? group.disabled\n\n    // When inside an attached ButtonGroup, adjust border-radius based on position\n    const groupRadiusStyle = groupItem && group.attached !== false\n      ? getGroupPositionStyle(groupItem.position, group.orientation ?? 'horizontal')\n      : undefined\n    // Stretch to fill when inside a vertical or fullWidth ButtonGroup\n    const groupStretch = group._stretch ?? false\n\n    const prefersReduced = useReducedMotion()\n\n    // Refs + effect for smooth width transitions (must be before any early returns)\n    const wrapperRef = React.useRef<HTMLSpanElement>(null)\n    const btnRef = React.useRef<HTMLButtonElement | null>(null)\n    const rafRef = React.useRef<number | undefined>(undefined)\n\n     \n    React.useEffect(() => {\n      const btn = btnRef.current\n      const wrapper = wrapperRef.current\n      if (!btn || !wrapper || fullWidth || groupStretch || prefersReduced) return\n\n      rafRef.current = requestAnimationFrame(() => {\n        wrapper.style.width = 'auto'\n        const w = btn.offsetWidth\n        if (w > 0) {\n          wrapper.getBoundingClientRect()\n          wrapper.style.width = `${w}px`\n        }\n      })\n      return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }\n    }) // run on every render to catch content changes\n\n    // Async state machine: idle → loading → success | error → idle\n    type AsyncState = 'idle' | 'loading' | 'success' | 'error'\n    const [asyncState, setAsyncState] = React.useState<AsyncState>('idle')\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const isMountedRef = React.useRef(true)\n\n    React.useEffect(() => () => {\n      isMountedRef.current = false\n      clearTimeout(timeoutRef.current)\n    }, [])\n\n    const handleAsyncClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (!onClickAsync || asyncState !== 'idle') return\n      setAsyncState('loading')\n      onClickAsync(e)\n        .then(() => { if (isMountedRef.current) setAsyncState('success') })\n        .catch(() => { if (isMountedRef.current) setAsyncState('error') })\n        .finally(() => {\n          if (isMountedRef.current) {\n            timeoutRef.current = setTimeout(() => {\n              if (isMountedRef.current) setAsyncState('idle')\n            }, asyncFeedbackDuration)\n          }\n        })\n    }\n\n    const isAsync = !!onClickAsync\n    const loading = isAsync ? asyncState === 'loading' : loadingProp\n    const isAsyncFeedback = asyncState === 'success' || asyncState === 'error'\n\n    // Processing: explicit prop takes priority, otherwise auto-processing during onClickAsync.\n    // Processing is always OFF during async feedback (success/error) so the feedback colors show.\n    const autoProcessing = isAsync && asyncState === 'loading' && !processingProp\n    const processingSpeed: ProcessingSpeed | undefined = isAsyncFeedback ? undefined\n      : processingProp === true ? 'working'\n      : processingProp === false || !processingProp\n        ? (autoProcessing ? 'working' : undefined)\n        : processingProp\n    const isProcessing = !!processingSpeed\n    const resolvedProcessingColor = processingColor ?? resolvedColor ?? 'accent'\n\n    if (asChild) {\n      // Slot merges all props into the child element via cloneElement at runtime.\n      // We cast here because SlotProps only types React.HTMLAttributes<HTMLElement>,\n      // which excludes button-specific attrs like `disabled`.\n      const slotProps = {\n        className: cn(\n          buttonVariants({ variant: resolvedVariant, color: resolvedColor, weight: resolvedWeight, size: resolvedSize }),\n          resolvedShape === 'pill' && 'rounded-pill',\n          resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n          (fullWidth || groupStretch) && 'w-full',\n          className,\n        ),\n        ref,\n        disabled: resolvedDisabled || loading,\n        'aria-busy': loading || undefined,\n        ...props,\n      } as React.ComponentPropsWithRef<typeof Slot>\n      return (\n        <Slot {...slotProps}>\n          <Slottable>{children}</Slottable>\n        </Slot>\n      )\n    }\n\n    const inset = iconInsetClass[resolvedSize] ?? { start: '', end: '' }\n    // Dim icons on filled variants (Radix pattern — icon is decorative, text is primary)\n    const dimIcon = resolvedVariant === 'solid' || resolvedVariant === 'soft' || resolvedVariant === 'outline'\n\n    const renderStartSlot = () => {\n      if (loading && loadingPosition === 'start') {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center', startIcon && inset.start)}>\n            <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n          </span>\n        )\n      }\n      if (startIcon) {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.start, dimIcon && 'opacity-90')}>\n            {normalizeIcon(startIcon)}\n          </span>\n        )\n      }\n      return null\n    }\n\n    const renderEndSlot = () => {\n      if (loading && loadingPosition === 'end') {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center', endIcon && inset.end)}>\n            <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n          </span>\n        )\n      }\n      if (endIcon) {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.end, dimIcon && 'opacity-90')}>\n            {normalizeIcon(endIcon)}\n          </span>\n        )\n      }\n      return null\n    }\n\n    // Separate DevalokGrain elements (need to be direct button children for absolute positioning)\n    // from text/other content (needs z-elevation above grain)\n    const childArray = React.Children.toArray(children)\n    const grainElements: React.ReactNode[] = []\n    const contentElements: React.ReactNode[] = []\n    childArray.forEach((child) => {\n      if (React.isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'DevalokGrain') {\n        grainElements.push(child)\n      } else {\n        contentElements.push(child)\n      }\n    })\n\n    const renderChildren = () => {\n      if (loading && loadingPosition === 'center') {\n        return (\n          <span className=\"relative inline-flex items-center justify-center\">\n            <span className=\"invisible\">{contentElements}</span>\n            <span className=\"absolute inset-0 flex items-center justify-center\">\n              <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n            </span>\n          </span>\n        )\n      }\n      // Only wrap in z-elevated span when grain is present (to sit above grain layers).\n      // Without grain, render children directly to preserve flex layout.\n      if (grainElements.length > 0) {\n        return <span>{contentElements}</span>\n      }\n      return <>{contentElements}</>\n    }\n\n    // Async feedback: override color to show green/red\n    const feedbackColorClass = isAsyncFeedback\n      ? asyncState === 'success'\n        ? 'bg-success-9 text-success-fg border-transparent hover:bg-success-9'\n        : 'bg-error-9 text-error-fg border-transparent hover:bg-error-9'\n      : undefined\n\n    // Async feedback icon — uses Icon's draw animation for pen-stroke effect\n    const asyncFeedbackIcon = isAsyncFeedback ? (\n      <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', startIcon && inset.start)}>\n        <Icon icon={asyncState === 'success' ? IconCheck : IconX} animate=\"draw\" />\n      </span>\n    ) : null\n\n    const iconSize = BUTTON_TO_ICON_SIZE[resolvedSize] ?? 'md'\n\n    const buttonEl = (\n      <motion.button\n        {...motionProps(props)}\n        style={{ ...props.style, ...groupRadiusStyle }}\n        className={cn(\n          buttonVariants({\n            // When processing (and not showing async feedback), force soft variant so ants pop\n            variant: isProcessing && !isAsyncFeedback && resolvedVariant !== 'ghost' && resolvedVariant !== 'outline' && resolvedVariant !== 'link' ? 'soft' : resolvedVariant,\n            color: resolvedColor,\n            weight: resolvedWeight,\n            size: resolvedSize,\n          }),\n          resolvedShape === 'pill' && 'rounded-pill',\n          resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n          (fullWidth || groupStretch) && 'w-full',\n          // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)\n          !loading && !isAsyncFeedback && 'transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit',\n          !loading && !isAsyncFeedback && 'hover:duration-fast-02 hover:ease-productive-entrance',\n          !loading && !isAsyncFeedback && 'active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]',\n          feedbackColorClass,\n          isAsyncFeedback && 'transition-colors duration-moderate-01 ease-productive-standard',\n          isProcessing && processingDisabled && 'pointer-events-none cursor-default',\n          className,\n        )}\n        ref={(el: HTMLButtonElement | null) => {\n          btnRef.current = el\n          if (typeof ref === 'function') ref(el)\n          else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el\n        }}\n        disabled={resolvedDisabled || (loading && !isProcessing)}\n        aria-busy={loading || isProcessing || undefined}\n        aria-disabled={isProcessing && processingDisabled || undefined}\n        onClick={isAsync ? handleAsyncClick : (isProcessing && processingDisabled ? undefined : onClick)}\n      >\n        {/* Grain layers render as direct children (need absolute positioning) */}\n        {grainElements}\n        {/* Content renders above grain via z-[2] span wrapper */}\n        {isAsyncFeedback ? asyncFeedbackIcon : renderStartSlot()}\n        {isAsyncFeedback ? contentElements : renderChildren()}\n        {isAsyncFeedback ? null : renderEndSlot()}\n      </motion.button>\n    )\n\n    // Always wrap in a positioned container so the overlay can render\n    // as a sibling OUTSIDE the button (not affected by disabled opacity).\n    // Keeping the wrapper always-on prevents React unmount/remount on\n    // processing toggle, enabling smooth CSS transitions between states.\n    return (\n      <IconProvider size={iconSize}>\n        <span\n          ref={wrapperRef}\n          className={cn('relative inline-flex', fullWidth && 'w-full')}\n          style={{\n            ...(fullWidth || groupStretch || prefersReduced ? undefined : { transition: 'width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)' }),\n            ...groupRadiusStyle,\n          }}\n        >\n          {buttonEl}\n          <ProcessingOverlay\n            active={isProcessing}\n            speed={processingSpeed ?? 'working'}\n            color={resolvedProcessingColor}\n          />\n        </span>\n      </IconProvider>\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { Button }\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot, Slottable } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { getGroupPositionStyle,useButtonGroup, useButtonGroupItem } from './button-group'\nimport type { ProcessingSpeed } from './button-processing'\nimport { ProcessingOverlay } from './button-processing'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport const buttonVariants = cva(\n  'relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        soft: '',\n        outline: 'border',\n        ghost: '',\n        link: 'underline-offset-4 hover:underline active:opacity-80',\n      },\n      color: {\n        accent: '',\n        error: '',\n        success: '',\n        warning: '',\n        neutral: '',\n      },\n      weight: {\n        semibold: 'font-semibold',\n        normal: 'font-normal',\n      },\n      size: {\n        xs: 'h-ds-xs-plus rounded-control px-ds-03 text-ds-sm gap-ds-02',\n        sm: 'h-ds-sm rounded-control px-ds-04 text-ds-sm gap-ds-02b',\n        md: 'h-ds-md rounded-control px-ds-05 text-ds-md gap-ds-03',\n        lg: 'h-ds-lg rounded-control px-ds-06 text-ds-base gap-2.5',\n        'compact-xs': 'rounded-control px-ds-02 py-[3px] text-ds-sm gap-ds-02',\n        'compact-sm': 'rounded-control px-ds-03 py-[5px] text-ds-sm gap-ds-02b',\n        'compact-md': 'rounded-control px-ds-04 py-ds-03 text-ds-md gap-ds-03',\n        icon: 'h-ds-md w-ds-md rounded-control',\n        'icon-xs': 'h-ds-xs-plus w-ds-xs-plus rounded-control',\n        'icon-sm': 'h-ds-sm w-ds-sm rounded-control',\n        'icon-md': 'h-ds-md w-ds-md rounded-control',\n        'icon-lg': 'h-ds-lg w-ds-lg rounded-control',\n      },\n    },\n    compoundVariants: [\n      // ============ SOLID ============ (tonal raised shadow; fill deepens on hover — no coloured bloom)\n      { variant: 'solid', color: 'accent',  className: 'bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised' },\n      { variant: 'solid', color: 'error',   className: 'bg-error-9 text-error-fg hover:bg-error-10 shadow-raised' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg hover:bg-success-10 shadow-raised' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised' },\n      { variant: 'solid', color: 'neutral', className: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 shadow-raised' },\n\n      // ============ SOFT ============\n      { variant: 'soft', color: 'accent',  className: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5' },\n      { variant: 'soft', color: 'error',   className: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5' },\n      { variant: 'soft', color: 'success', className: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5' },\n      { variant: 'soft', color: 'warning', className: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5' },\n      { variant: 'soft', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5' },\n\n      // ============ OUTLINE ============\n      { variant: 'outline', color: 'accent',  className: 'bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4' },\n      { variant: 'outline', color: 'error',   className: 'bg-transparent text-error-11 border-error-7 hover:bg-error-3 active:bg-error-4' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent text-success-11 border-success-7 hover:bg-success-3 active:bg-success-4' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent text-warning-11 border-warning-7 hover:bg-warning-3 active:bg-warning-4' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent text-surface-fg border-surface-border-strong hover:bg-surface-raised-hover active:bg-surface-raised-active' },\n\n      // ============ GHOST ============\n      // ghost+accent uses neutral look for backward compat (most common ghost is toolbar/icon ghost)\n      { variant: 'ghost', color: 'accent',  className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n      { variant: 'ghost', color: 'error',   className: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4' },\n      { variant: 'ghost', color: 'success', className: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4' },\n      { variant: 'ghost', color: 'warning', className: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4' },\n      { variant: 'ghost', color: 'neutral', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n\n      // ============ LINK ============\n      { variant: 'link', color: 'accent',  className: 'text-accent-11' },\n      { variant: 'link', color: 'error',   className: 'text-error-11' },\n      { variant: 'link', color: 'success', className: 'text-success-11' },\n      { variant: 'link', color: 'warning', className: 'text-warning-11' },\n      { variant: 'link', color: 'neutral', className: 'text-surface-fg-muted' },\n    ],\n    defaultVariants: {\n      variant: 'solid',\n      color: 'accent',\n      weight: 'semibold',\n      size: 'md',\n    },\n  },\n)\n\n/** Extra horizontal padding for pill shape — rounded ends eat into visual space */\nconst pillPaddingClass: Record<string, string> = {\n  xs:           'px-ds-04',\n  sm:           'px-ds-05',\n  md:           'px-ds-06',\n  lg:           'px-ds-07',\n  'compact-xs': 'px-ds-03',\n  'compact-sm': 'px-ds-04',\n  'compact-md': 'px-ds-05',\n}\n\n/** Negative margin to tighten icon side padding — pulls icon closer to button edge */\nconst iconInsetClass: Record<string, { start: string; end: string }> = {\n  xs:           { start: '-ml-0.5', end: '-mr-0.5' },\n  sm:           { start: '-ml-1',   end: '-mr-1' },\n  md:           { start: '-ml-1.5', end: '-mr-1.5' },\n  lg:           { start: '-ml-2',   end: '-mr-2' },\n  'compact-xs': { start: '-ml-0.5', end: '-mr-0.5' },\n  'compact-sm': { start: '-ml-0.5', end: '-mr-0.5' },\n  'compact-md': { start: '-ml-1',   end: '-mr-1' },\n  icon:         { start: '', end: '' },\n  'icon-xs':    { start: '', end: '' },\n  'icon-sm':    { start: '', end: '' },\n  'icon-md':    { start: '', end: '' },\n  'icon-lg':    { start: '', end: '' },\n}\n\n/** Map button size to spinner size */\nconst BUTTON_TO_SPINNER_SIZE: Record<string, 'sm' | 'md'> = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  'compact-xs': 'sm',\n  'compact-sm': 'sm',\n  'compact-md': 'sm',\n  icon: 'sm',\n  'icon-xs': 'sm',\n  'icon-sm': 'sm',\n  'icon-md': 'sm',\n  'icon-lg': 'md',\n}\n\n/** Map button size to Icon context size */\nconst BUTTON_TO_ICON_SIZE: Record<string, IconSize> = {\n  xs: 'xs', sm: 'sm', md: 'md', lg: 'lg',\n  'compact-xs': 'xs', 'compact-sm': 'sm', 'compact-md': 'md',\n  icon: 'md', 'icon-xs': 'xs', 'icon-sm': 'sm', 'icon-md': 'md', 'icon-lg': 'lg',\n}\n\n/**\n * Props for Button — the primary action component with a two-axis variant system,\n * multiple size options, icon slots, and a built-in loading state.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"solid\"` (default, filled) | `\"soft\"` (tinted bg) |\n *   `\"outline\"` (bordered) | `\"ghost\"` (transparent, for toolbars) | `\"link\"` (underline, inline)\n * - `color` controls **semantic intent**: `\"accent\"` (default, brand) | `\"error\"` (destructive) |\n *   `\"success\"` | `\"warning\"` | `\"neutral\"` (subdued)\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;\n * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;\n * `icon` | `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons.\n *\n * **Shape:** `\"default\"` uses the `--radius-control` token; `\"pill\"` applies `rounded-pill` (fully-rounded).\n *\n * **Weight:** `\"semibold\"` (default) | `\"normal\"` for lighter labels.\n *\n * **Note:** `ghost` + `accent` renders with neutral styling for backward compat —\n * most ghost buttons are toolbar/icon actions where neutral is expected.\n *\n * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.\n * Use `loadingPosition` to control where the spinner appears.\n *\n * @example\n * // Primary save action (default variant + color):\n * <Button onClick={handleSave}>Save changes</Button>\n *\n * @example\n * // Soft success feedback:\n * <Button variant=\"soft\" color=\"success\" startIcon={<Icon icon={IconCheck} />}>\n *   Approved\n * </Button>\n *\n * @example\n * // Destructive delete with loading state:\n * <Button variant=\"solid\" color=\"error\" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>\n *   Delete project\n * </Button>\n *\n * @example\n * // Compact pill tag:\n * <Button variant=\"soft\" color=\"warning\" size=\"compact-sm\" shape=\"pill\">\n *   Overdue\n * </Button>\n *\n * @example\n * // Ghost toolbar action:\n * <Button variant=\"ghost\" size=\"sm\" startIcon={<Icon icon={IconEdit} />}>\n *   Edit\n * </Button>\n */\nexport interface ButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n  /** Button shape — 'pill' applies rounded-pill for chip/tag-like buttons */\n  shape?: 'default' | 'pill'\n  /** Icon element rendered before children — use <Icon icon={...} /> */\n  startIcon?: IconInput\n  /** Icon element rendered after children — use <Icon icon={...} /> */\n  endIcon?: IconInput\n  /** Show loading spinner and disable button */\n  loading?: boolean\n  /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */\n  loadingPosition?: 'start' | 'end' | 'center'\n  /** Stretch to full width of parent */\n  fullWidth?: boolean\n  /**\n   * Async click handler — auto-manages loading → success/error states.\n   * When provided, the button shows a spinner while the promise is pending,\n   * then briefly flashes green (success) or red (error) before reverting.\n   * Overrides `onClick` and `loading` when active.\n   */\n  onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** How long (ms) to show the success/error state before reverting. Default: 1500 */\n  asyncFeedbackDuration?: number\n\n  /**\n   * Show processing animation — animated border/glow while content stays visible.\n   * `true` = \"working\" speed. Semantic speeds:\n   * - `\"ambient\"` (3s) — background sync, file upload\n   * - `\"working\"` (2s) — standard API call, generation\n   * - `\"urgent\"` (1s) — retry, nearly done\n   */\n  processing?: boolean | 'ambient' | 'working' | 'urgent'\n\n  /** Override processing animation color. Defaults to button's own color. */\n  processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral'\n\n  /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */\n  processingDisabled?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      weight,\n      size,\n      asChild = false,\n      shape,\n      startIcon,\n      endIcon,\n      loading: loadingProp = false,\n      loadingPosition = 'start',\n      fullWidth = false,\n      disabled,\n      onClick,\n      onClickAsync,\n      asyncFeedbackDuration = 1500,\n      processing: processingProp,\n      processingColor,\n      processingDisabled = true,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const group = useButtonGroup()\n    const groupItem = useButtonGroupItem()\n    const resolvedVariant = variant ?? group.variant\n    const resolvedColor = color ?? group.color\n    const resolvedWeight = weight ?? group.weight ?? 'semibold'\n    const resolvedShape = shape ?? group.shape ?? 'default'\n    const resolvedSize = size ?? group.size ?? 'md'\n    // ButtonGroup can propagate disabled to all children\n    const resolvedDisabled = disabled ?? group.disabled\n\n    // When inside an attached ButtonGroup, adjust border-radius based on position\n    const groupRadiusStyle = groupItem && group.attached !== false\n      ? getGroupPositionStyle(groupItem.position, group.orientation ?? 'horizontal')\n      : undefined\n    // Stretch to fill when inside a vertical or fullWidth ButtonGroup\n    const groupStretch = group._stretch ?? false\n\n    const prefersReduced = useReducedMotion()\n\n    // Refs + effect for smooth width transitions (must be before any early returns)\n    const wrapperRef = React.useRef<HTMLSpanElement>(null)\n    const btnRef = React.useRef<HTMLButtonElement | null>(null)\n    const rafRef = React.useRef<number | undefined>(undefined)\n\n     \n    React.useEffect(() => {\n      const btn = btnRef.current\n      const wrapper = wrapperRef.current\n      if (!btn || !wrapper || fullWidth || groupStretch || prefersReduced) return\n\n      rafRef.current = requestAnimationFrame(() => {\n        wrapper.style.width = 'auto'\n        const w = btn.offsetWidth\n        if (w > 0) {\n          wrapper.getBoundingClientRect()\n          wrapper.style.width = `${w}px`\n        }\n      })\n      return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }\n    }) // run on every render to catch content changes\n\n    // Async state machine: idle → loading → success | error → idle\n    type AsyncState = 'idle' | 'loading' | 'success' | 'error'\n    const [asyncState, setAsyncState] = React.useState<AsyncState>('idle')\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const isMountedRef = React.useRef(true)\n\n    React.useEffect(() => () => {\n      isMountedRef.current = false\n      clearTimeout(timeoutRef.current)\n    }, [])\n\n    const handleAsyncClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (!onClickAsync || asyncState !== 'idle') return\n      setAsyncState('loading')\n      onClickAsync(e)\n        .then(() => { if (isMountedRef.current) setAsyncState('success') })\n        .catch(() => { if (isMountedRef.current) setAsyncState('error') })\n        .finally(() => {\n          if (isMountedRef.current) {\n            timeoutRef.current = setTimeout(() => {\n              if (isMountedRef.current) setAsyncState('idle')\n            }, asyncFeedbackDuration)\n          }\n        })\n    }\n\n    const isAsync = !!onClickAsync\n    const loading = isAsync ? asyncState === 'loading' : loadingProp\n    const isAsyncFeedback = asyncState === 'success' || asyncState === 'error'\n\n    // Processing: explicit prop takes priority, otherwise auto-processing during onClickAsync.\n    // Processing is always OFF during async feedback (success/error) so the feedback colors show.\n    const autoProcessing = isAsync && asyncState === 'loading' && !processingProp\n    const processingSpeed: ProcessingSpeed | undefined = isAsyncFeedback ? undefined\n      : processingProp === true ? 'working'\n      : processingProp === false || !processingProp\n        ? (autoProcessing ? 'working' : undefined)\n        : processingProp\n    const isProcessing = !!processingSpeed\n    const resolvedProcessingColor = processingColor ?? resolvedColor ?? 'accent'\n\n    if (asChild) {\n      // Slot merges all props into the child element via cloneElement at runtime.\n      // We cast here because SlotProps only types React.HTMLAttributes<HTMLElement>,\n      // which excludes button-specific attrs like `disabled`.\n      const slotProps = {\n        className: cn(\n          buttonVariants({ variant: resolvedVariant, color: resolvedColor, weight: resolvedWeight, size: resolvedSize }),\n          resolvedShape === 'pill' && 'rounded-pill',\n          resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n          (fullWidth || groupStretch) && 'w-full',\n          className,\n        ),\n        ref,\n        disabled: resolvedDisabled || loading,\n        'aria-busy': loading || undefined,\n        ...props,\n      } as React.ComponentPropsWithRef<typeof Slot>\n      return (\n        <Slot {...slotProps}>\n          <Slottable>{children}</Slottable>\n        </Slot>\n      )\n    }\n\n    const inset = iconInsetClass[resolvedSize] ?? { start: '', end: '' }\n    // Dim icons on filled variants (Radix pattern — icon is decorative, text is primary)\n    const dimIcon = resolvedVariant === 'solid' || resolvedVariant === 'soft' || resolvedVariant === 'outline'\n\n    const renderStartSlot = () => {\n      if (loading && loadingPosition === 'start') {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center', startIcon && inset.start)}>\n            <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n          </span>\n        )\n      }\n      if (startIcon) {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.start, dimIcon && 'opacity-90')}>\n            {normalizeIcon(startIcon)}\n          </span>\n        )\n      }\n      return null\n    }\n\n    const renderEndSlot = () => {\n      if (loading && loadingPosition === 'end') {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center', endIcon && inset.end)}>\n            <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n          </span>\n        )\n      }\n      if (endIcon) {\n        return (\n          <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.end, dimIcon && 'opacity-90')}>\n            {normalizeIcon(endIcon)}\n          </span>\n        )\n      }\n      return null\n    }\n\n    // Separate DevalokGrain elements (need to be direct button children for absolute positioning)\n    // from text/other content (needs z-elevation above grain)\n    const childArray = React.Children.toArray(children)\n    const grainElements: React.ReactNode[] = []\n    const contentElements: React.ReactNode[] = []\n    childArray.forEach((child) => {\n      if (React.isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'DevalokGrain') {\n        grainElements.push(child)\n      } else {\n        contentElements.push(child)\n      }\n    })\n\n    const renderChildren = () => {\n      if (loading && loadingPosition === 'center') {\n        return (\n          <span className=\"relative inline-flex items-center justify-center\">\n            <span className=\"invisible\">{contentElements}</span>\n            <span className=\"absolute inset-0 flex items-center justify-center\">\n              <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n            </span>\n          </span>\n        )\n      }\n      // Only wrap in z-elevated span when grain is present (to sit above grain layers).\n      // Without grain, render children directly to preserve flex layout.\n      if (grainElements.length > 0) {\n        return <span>{contentElements}</span>\n      }\n      return <>{contentElements}</>\n    }\n\n    // Async feedback: override color to show green/red\n    const feedbackColorClass = isAsyncFeedback\n      ? asyncState === 'success'\n        ? 'bg-success-9 text-success-fg border-transparent hover:bg-success-9'\n        : 'bg-error-9 text-error-fg border-transparent hover:bg-error-9'\n      : undefined\n\n    // Async feedback icon — uses Icon's draw animation for pen-stroke effect\n    const asyncFeedbackIcon = isAsyncFeedback ? (\n      <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', startIcon && inset.start)}>\n        <Icon icon={asyncState === 'success' ? IconCheck : IconX} animate=\"draw\" />\n      </span>\n    ) : null\n\n    const iconSize = BUTTON_TO_ICON_SIZE[resolvedSize] ?? 'md'\n\n    const buttonEl = (\n      <motion.button\n        {...motionProps(props)}\n        style={{ ...props.style, ...groupRadiusStyle }}\n        className={cn(\n          buttonVariants({\n            // When processing (and not showing async feedback), force soft variant so ants pop\n            variant: isProcessing && !isAsyncFeedback && resolvedVariant !== 'ghost' && resolvedVariant !== 'outline' && resolvedVariant !== 'link' ? 'soft' : resolvedVariant,\n            color: resolvedColor,\n            weight: resolvedWeight,\n            size: resolvedSize,\n          }),\n          resolvedShape === 'pill' && 'rounded-pill',\n          resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n          (fullWidth || groupStretch) && 'w-full',\n          // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)\n          !loading && !isAsyncFeedback && 'transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit',\n          !loading && !isAsyncFeedback && 'hover:duration-fast-02 hover:ease-productive-entrance',\n          !loading && !isAsyncFeedback && 'active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]',\n          feedbackColorClass,\n          isAsyncFeedback && 'transition-colors duration-moderate-01 ease-productive-standard',\n          isProcessing && processingDisabled && 'pointer-events-none cursor-default',\n          className,\n        )}\n        ref={(el: HTMLButtonElement | null) => {\n          btnRef.current = el\n          if (typeof ref === 'function') ref(el)\n          else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el\n        }}\n        disabled={resolvedDisabled || (loading && !isProcessing)}\n        aria-busy={loading || isProcessing || undefined}\n        aria-disabled={isProcessing && processingDisabled || undefined}\n        onClick={isAsync ? handleAsyncClick : (isProcessing && processingDisabled ? undefined : onClick)}\n      >\n        {/* Grain layers render as direct children (need absolute positioning) */}\n        {grainElements}\n        {/* Content renders above grain via z-[2] span wrapper */}\n        {isAsyncFeedback ? asyncFeedbackIcon : renderStartSlot()}\n        {isAsyncFeedback ? contentElements : renderChildren()}\n        {isAsyncFeedback ? null : renderEndSlot()}\n      </motion.button>\n    )\n\n    // Always wrap in a positioned container so the overlay can render\n    // as a sibling OUTSIDE the button (not affected by disabled opacity).\n    // Keeping the wrapper always-on prevents React unmount/remount on\n    // processing toggle, enabling smooth CSS transitions between states.\n    return (\n      <IconProvider size={iconSize}>\n        <span\n          ref={wrapperRef}\n          className={cn('relative inline-flex', fullWidth && 'w-full')}\n          style={{\n            ...(fullWidth || groupStretch || prefersReduced ? undefined : { transition: 'width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)' }),\n            ...groupRadiusStyle,\n          }}\n        >\n          {buttonEl}\n          <ProcessingOverlay\n            active={isProcessing}\n            speed={processingSpeed ?? 'working'}\n            color={resolvedProcessingColor}\n          />\n        </span>\n      </IconProvider>\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { Button }\n"],"mappings":"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"}

package/dist/ui/combobox.js

@@ -126,7 +126,7 @@ var _ = {
 						className: a("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
 						children: [t.label, /* @__PURE__ */ u("button", {
 							type: "button",
-							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
+							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard",
 							onClick: (t) => de(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,