@devalok/shilp-sutra 0.49.5 → 0.50.0

package/dist/ui/banner.js

@@ -8,7 +8,7 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
 import { AnimatePresence as p, motion as m } from "framer-motion";
 //#region src/ui/banner.tsx
-var h = n("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b", {
+var h = n("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b", {
 	variants: { color: {
 		info: "bg-info-3 border-info-7 text-info-11",
 		success: "bg-success-3 border-success-7 text-success-11",

package/dist/ui/banner.js.map

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

package/dist/ui/breadcrumb.js

@@ -43,7 +43,7 @@ var a = (e) => /* @__PURE__ */ r("svg", {
 s.displayName = "Breadcrumb";
 var c = n.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ r("ol", {
 	ref: i,
-	className: t("flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-surface-fg-muted sm:gap-ds-03", e),
+	className: t("flex flex-wrap items-center gap-ds-02b break-words text-body-md text-surface-fg-muted sm:gap-ds-03", e),
 	...n
 }));
 c.displayName = "BreadcrumbList";

package/dist/ui/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../src/ui/breadcrumb.tsx"],"sourcesContent":["// @server-safe\nimport { Slot } from '@primitives/react-slot'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n// Inline glyphs (no client `Icon` dependency) keep Breadcrumb server-renderable —\n// so server-safe consumers like PageHeader can compose it.\nconst ChevronGlyph = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\" {...props}>\n    <path d=\"M9 6l6 6l-6 6\" />\n  </svg>\n)\n\nconst DotsGlyph = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n    <circle cx=\"5\" cy=\"12\" r=\"1.2\" />\n    <circle cx=\"12\" cy=\"12\" r=\"1.2\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1.2\" />\n  </svg>\n)\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = 'Breadcrumb'\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => (\n    <ol\n      ref={ref}\n      className={cn(\n        'flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-surface-fg-muted sm:gap-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn('inline-flex items-center gap-ds-03', className)} {...props} />\n  ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'min-w-0 truncate max-w-[20ch] transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-current=\"page\"\n      className={cn('min-w-0 truncate max-w-[20ch] font-medium text-surface-fg', className)}\n      {...props}\n    />\n  ),\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn('[&>svg]:h-ico-sm [&>svg]:w-ico-sm', className)}\n    {...props}\n  >\n    {children ?? <ChevronGlyph />}\n  </li>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn('flex h-ds-sm-plus w-ds-sm-plus items-center justify-center', className)}\n    {...props}\n  >\n    <DotsGlyph className=\"h-ico-sm w-ico-sm\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'>\nexport type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'>\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n}\n"],"mappings":";;;;;AAQA,IAAM,KAAgB,MACpB,kBAAC,OAAD;CAAK,SAAQ;CAAY,MAAK;CAAO,QAAO;CAAe,aAAa;CAAG,eAAc;CAAQ,gBAAe;CAAQ,eAAY;CAAO,GAAI;WAC7I,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;AACtB,CAAA,GAGD,KAAa,MACjB,kBAAC,OAAD;CAAK,SAAQ;CAAY,MAAK;CAAe,eAAY;CAAO,GAAI;WAApE;EACE,kBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAK,GAAE;EAAO,CAAA;EAChC,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAO,CAAA;EACjC,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAO,CAAA;CAC9B;IAGD,IAAa,EAAM,YAGtB,EAAE,GAAG,KAAS,MAAQ,kBAAC,OAAD;CAAU;CAAK,cAAW;CAAa,GAAI;AAAQ,CAAA,CAAC;AAC7E,EAAW,cAAc;AAEzB,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,WAAW,EACT,oGACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CAAS;CAAK,WAAW,EAAG,sCAAsC,CAAS;CAAG,GAAI;AAAQ,CAAA,CAE9F;AACA,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,aAAU,IAAO,GAAG,KAAS,MAIzC,kBAHW,IAAU,IAAO,KAG5B;CACO;CACL,WAAW,EACT,uNACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,QAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,6DAA6D,CAAS;CACpF,GAAI;AACL,CAAA,CAEL;AACA,EAAe,cAAc;AAE7B,IAAM,KAAuB,EAAE,aAAU,cAAW,GAAG,QACrD,kBAAC,MAAD;CACE,MAAK;CACL,eAAY;CACZ,WAAW,EAAG,qCAAqC,CAAS;CAC5D,GAAI;WAEH,KAAY,kBAAC,GAAD,CAAe,CAAA;AAC1B,CAAA;AAEN,EAAoB,cAAc;AAElC,IAAM,KAAsB,EAAE,cAAW,GAAG,QAC1C,kBAAC,QAAD;CACE,MAAK;CACL,eAAY;CACZ,WAAW,EAAG,8DAA8D,CAAS;CACrF,GAAI;WAJN,CAME,kBAAC,GAAD,EAAW,WAAU,oBAAqB,CAAA,GAC1C,kBAAC,QAAD;EAAM,WAAU;YAAU;CAAU,CAAA,CAChC;;AAER,EAAmB,cAAc"}
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../src/ui/breadcrumb.tsx"],"sourcesContent":["// @server-safe\nimport { Slot } from '@primitives/react-slot'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n// Inline glyphs (no client `Icon` dependency) keep Breadcrumb server-renderable —\n// so server-safe consumers like PageHeader can compose it.\nconst ChevronGlyph = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\" {...props}>\n    <path d=\"M9 6l6 6l-6 6\" />\n  </svg>\n)\n\nconst DotsGlyph = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n    <circle cx=\"5\" cy=\"12\" r=\"1.2\" />\n    <circle cx=\"12\" cy=\"12\" r=\"1.2\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1.2\" />\n  </svg>\n)\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = 'Breadcrumb'\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => (\n    <ol\n      ref={ref}\n      className={cn(\n        'flex flex-wrap items-center gap-ds-02b break-words text-body-md text-surface-fg-muted sm:gap-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn('inline-flex items-center gap-ds-03', className)} {...props} />\n  ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'min-w-0 truncate max-w-[20ch] transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-current=\"page\"\n      className={cn('min-w-0 truncate max-w-[20ch] font-medium text-surface-fg', className)}\n      {...props}\n    />\n  ),\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn('[&>svg]:h-ico-sm [&>svg]:w-ico-sm', className)}\n    {...props}\n  >\n    {children ?? <ChevronGlyph />}\n  </li>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn('flex h-ds-sm-plus w-ds-sm-plus items-center justify-center', className)}\n    {...props}\n  >\n    <DotsGlyph className=\"h-ico-sm w-ico-sm\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'>\nexport type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'>\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n}\n"],"mappings":";;;;;AAQA,IAAM,KAAgB,MACpB,kBAAC,OAAD;CAAK,SAAQ;CAAY,MAAK;CAAO,QAAO;CAAe,aAAa;CAAG,eAAc;CAAQ,gBAAe;CAAQ,eAAY;CAAO,GAAI;WAC7I,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;AACtB,CAAA,GAGD,KAAa,MACjB,kBAAC,OAAD;CAAK,SAAQ;CAAY,MAAK;CAAe,eAAY;CAAO,GAAI;WAApE;EACE,kBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAK,GAAE;EAAO,CAAA;EAChC,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAO,CAAA;EACjC,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAO,CAAA;CAC9B;IAGD,IAAa,EAAM,YAGtB,EAAE,GAAG,KAAS,MAAQ,kBAAC,OAAD;CAAU;CAAK,cAAW;CAAa,GAAI;AAAQ,CAAA,CAAC;AAC7E,EAAW,cAAc;AAEzB,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,WAAW,EACT,sGACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CAAS;CAAK,WAAW,EAAG,sCAAsC,CAAS;CAAG,GAAI;AAAQ,CAAA,CAE9F;AACA,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,aAAU,IAAO,GAAG,KAAS,MAIzC,kBAHW,IAAU,IAAO,KAG5B;CACO;CACL,WAAW,EACT,uNACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAe,cAAc;AAE7B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,QAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,6DAA6D,CAAS;CACpF,GAAI;AACL,CAAA,CAEL;AACA,EAAe,cAAc;AAE7B,IAAM,KAAuB,EAAE,aAAU,cAAW,GAAG,QACrD,kBAAC,MAAD;CACE,MAAK;CACL,eAAY;CACZ,WAAW,EAAG,qCAAqC,CAAS;CAC5D,GAAI;WAEH,KAAY,kBAAC,GAAD,CAAe,CAAA;AAC1B,CAAA;AAEN,EAAoB,cAAc;AAElC,IAAM,KAAsB,EAAE,cAAW,GAAG,QAC1C,kBAAC,QAAD;CACE,MAAK;CACL,eAAY;CACZ,WAAW,EAAG,8DAA8D,CAAS;CACrF,GAAI;WAJN,CAME,kBAAC,GAAD,EAAW,WAAU,oBAAqB,CAAA,GAC1C,kBAAC,QAAD;EAAM,WAAU;YAAU;CAAU,CAAA,CAChC;;AAER,EAAmB,cAAc"}

package/dist/ui/button.js

@@ -35,13 +35,13 @@ var u = r("relative inline-flex items-center justify-center whitespace-nowrap fo
 			normal: "font-normal"
 		},
 		size: {
-			xs: "h-ds-xs-plus rounded-control px-ds-03 text-ds-sm gap-ds-02",
-			sm: "h-ds-sm rounded-control px-ds-04 text-ds-sm gap-ds-02b",
-			md: "h-ds-md rounded-control px-ds-05 text-ds-md gap-ds-03",
-			lg: "h-ds-lg rounded-control px-ds-06 text-ds-base gap-2.5",
-			"compact-xs": "rounded-control px-ds-02 py-[3px] text-ds-sm gap-ds-02",
-			"compact-sm": "rounded-control px-ds-03 py-[5px] text-ds-sm gap-ds-02b",
-			"compact-md": "rounded-control px-ds-04 py-ds-03 text-ds-md gap-ds-03",
+			xs: "h-ds-xs-plus rounded-control px-ds-03 text-body-sm gap-ds-02",
+			sm: "h-ds-sm rounded-control px-ds-04 text-body-sm gap-ds-02b",
+			md: "h-ds-md rounded-control px-ds-05 text-body-md gap-ds-03",
+			lg: "h-ds-lg rounded-control px-ds-06 text-body-lg gap-2.5",
+			"compact-xs": "rounded-control px-ds-02 py-[3px] text-body-sm gap-ds-02",
+			"compact-sm": "rounded-control px-ds-03 py-[5px] text-body-sm gap-ds-02b",
+			"compact-md": "rounded-control px-ds-04 py-ds-03 text-body-md gap-ds-03",
 			icon: "h-ds-md w-ds-md rounded-control",
 			"icon-xs": "h-ds-xs-plus w-ds-xs-plus rounded-control",
 			"icon-sm": "h-ds-sm w-ds-sm rounded-control",

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 ============ (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":";;;;;;;;;;;;;;;;AAoBA,IAAa,IAAiB,EAC5B,qZACA;CACE,UAAU;EACR,SAAS;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;EACR;EACA,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,QAAQ;GACN,UAAU;GACV,QAAQ;EACV;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,cAAc;GACd,cAAc;GACd,cAAc;GACd,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,kBAAkB;EAEhB;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAA8D;EAC/G;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAA2D;EAC5G;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAiE;EAClH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAiE;EAClH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAgE;EAGjH;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAkE;EAClH;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAA8D;EAC9G;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAsE;EACtH;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAsE;EACtH;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAmG;EAGnJ;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;EAAqF;EACxI;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;EAAiF;EACpI;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;EAAyF;EAC5I;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;EAAyF;EAC5I;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;EAA4H;EAI/K;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAA2H;EAC5K;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAkE;EACnH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAwE;EACzH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAAwE;EACzH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;EAA2H;EAG5K;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAiB;EACjE;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAgB;EAChE;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAkB;EAClE;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAkB;EAClE;GAAE,SAAS;GAAQ,OAAO;GAAW,WAAW;EAAwB;CAC1E;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACR,MAAM;CACR;AACF,CACF,GAGM,IAA2C;CAC/C,IAAc;CACd,IAAc;CACd,IAAc;CACd,IAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;AAChB,GAGM,KAAiE;CACrE,IAAc;EAAE,OAAO;EAAW,KAAK;CAAU;CACjD,IAAc;EAAE,OAAO;EAAW,KAAK;CAAQ;CAC/C,IAAc;EAAE,OAAO;EAAW,KAAK;CAAU;CACjD,IAAc;EAAE,OAAO;EAAW,KAAK;CAAQ;CAC/C,cAAc;EAAE,OAAO;EAAW,KAAK;CAAU;CACjD,cAAc;EAAE,OAAO;EAAW,KAAK;CAAU;CACjD,cAAc;EAAE,OAAO;EAAW,KAAK;CAAQ;CAC/C,MAAc;EAAE,OAAO;EAAI,KAAK;CAAG;CACnC,WAAc;EAAE,OAAO;EAAI,KAAK;CAAG;CACnC,WAAc;EAAE,OAAO;EAAI,KAAK;CAAG;CACnC,WAAc;EAAE,OAAO;EAAI,KAAK;CAAG;CACnC,WAAc;EAAE,OAAO;EAAI,KAAK;CAAG;AACrC,GAGM,IAAsD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,cAAc;CACd,cAAc;CACd,cAAc;CACd,MAAM;CACN,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;AACb,GAGM,KAAgD;CACpD,IAAI;CAAM,IAAI;CAAM,IAAI;CAAM,IAAI;CAClC,cAAc;CAAM,cAAc;CAAM,cAAc;CACtD,MAAM;CAAM,WAAW;CAAM,WAAW;CAAM,WAAW;CAAM,WAAW;AAC5E,GAgGM,IAAS,EAAM,YAEjB,EACE,cACA,YACA,UACA,YACA,UACA,cAAU,IACV,WACA,cACA,YACA,SAAS,KAAc,IACvB,qBAAkB,SAClB,eAAY,IACZ,cACA,aACA,iBACA,2BAAwB,MACxB,YAAY,GACZ,qBACA,wBAAqB,IACrB,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAQ,GAAe,GACvB,IAAY,GAAmB,GAC/B,IAAkB,KAAW,EAAM,SACnC,IAAgB,KAAS,EAAM,OAC/B,IAAiB,MAAU,EAAM,UAAU,YAC3C,IAAgB,MAAS,EAAM,SAAS,WACxC,IAAe,MAAQ,EAAM,QAAQ,MAErC,IAAmB,MAAY,EAAM,UAGrC,IAAmB,KAAa,EAAM,aAAa,KACrD,GAAsB,EAAU,UAAU,EAAM,eAAe,YAAY,IAC3E,KAAA,GAEE,IAAe,EAAM,YAAY,IAEjC,IAAiB,GAAiB,GAGlC,IAAa,EAAM,OAAwB,IAAI,GAC/C,IAAS,EAAM,OAAiC,IAAI,GACpD,IAAS,EAAM,OAA2B,KAAA,CAAS;CAGzD,EAAM,gBAAgB;EACpB,IAAM,IAAM,EAAO,SACb,IAAU,EAAW;EACvB,OAAC,KAAO,CAAC,KAAW,KAAa,KAAgB,IAUrD,OARA,EAAO,UAAU,4BAA4B;GAC3C,EAAQ,MAAM,QAAQ;GACtB,IAAM,IAAI,EAAI;GACd,AAAI,IAAI,MACN,EAAQ,sBAAsB,GAC9B,EAAQ,MAAM,QAAQ,GAAG,EAAE;EAE/B,CAAC,SACY;GAAE,AAAI,EAAO,WAAS,qBAAqB,EAAO,OAAO;EAAE;CAC1E,CAAC;CAID,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAqB,MAAM,GAC/D,IAAa,EAAM,OAAkD,KAAA,CAAS,GAC9E,IAAe,EAAM,OAAO,EAAI;CAEtC,EAAM,sBAAsB;EAE1B,AADA,EAAa,UAAU,IACvB,aAAa,EAAW,OAAO;CACjC,GAAG,CAAC,CAAC;CAEL,IAAM,MAAoB,MAA2C;EAC/D,CAAC,KAAgB,MAAe,WACpC,EAAc,SAAS,GACvB,EAAa,CAAC,CAAC,CACZ,WAAW;GAAE,AAAI,EAAa,WAAS,EAAc,SAAS;EAAE,CAAC,CAAC,CAClE,YAAY;GAAE,AAAI,EAAa,WAAS,EAAc,OAAO;EAAE,CAAC,CAAC,CACjE,cAAc;GACb,AAAI,EAAa,YACf,EAAW,UAAU,iBAAiB;IACpC,AAAI,EAAa,WAAS,EAAc,MAAM;GAChD,GAAG,CAAqB;EAE5B,CAAC;CACL,GAEM,IAAU,CAAC,CAAC,GACZ,IAAU,IAAU,MAAe,YAAY,IAC/C,IAAkB,MAAe,aAAa,MAAe,SAK7D,IAA+C,IAAkB,KAAA,IACnE,MAAmB,KAAO,YAC1B,MAAmB,MAAS,CAAC,IAHV,KAAW,MAAe,aAAa,CAAC,IAIvC,YAAY,KAAA,IAC9B,GACA,IAAe,CAAC,CAAC,GACjB,KAA0B,MAAmB,KAAiB;CAEpE,IAAI,IAiBF,OACE,kBAAC,GAAD;EAbA,WAAW,EACT,EAAe;GAAE,SAAS;GAAiB,OAAO;GAAe,QAAQ;GAAgB,MAAM;EAAa,CAAC,GAC7G,MAAkB,UAAU,gBAC5B,MAAkB,UAAU,EAAiB,KAC5C,KAAa,MAAiB,UAC/B,CACF;EACA;EACA,UAAU,KAAoB;EAC9B,aAAa,KAAW,KAAA;EACxB,GAAG;YAID,kBAAC,GAAD,EAAY,YAAoB,CAAA;CAC5B,CAAA;CAIV,IAAM,IAAQ,GAAe,MAAiB;EAAE,OAAO;EAAI,KAAK;CAAG,GAE7D,IAAU,MAAoB,WAAW,MAAoB,UAAU,MAAoB,WAE3F,UACA,KAAW,MAAoB,UAE/B,kBAAC,QAAD;EAAM,WAAW,EAAG,oDAAoD,KAAa,EAAM,KAAK;YAC9F,kBAAC,GAAD;GAAS,MAAM,EAAuB;GAAe,SAAQ;EAAQ,CAAA;CACjE,CAAA,IAGN,IAEA,kBAAC,QAAD;EAAM,WAAW,EAAG,wEAAwE,EAAM,OAAO,KAAW,YAAY;YAC7H,EAAc,CAAS;CACpB,CAAA,IAGH,MAGH,WACA,KAAW,MAAoB,QAE/B,kBAAC,QAAD;EAAM,WAAW,EAAG,oDAAoD,KAAW,EAAM,GAAG;YAC1F,kBAAC,GAAD;GAAS,MAAM,EAAuB;GAAe,SAAQ;EAAQ,CAAA;CACjE,CAAA,IAGN,IAEA,kBAAC,QAAD;EAAM,WAAW,EAAG,wEAAwE,EAAM,KAAK,KAAW,YAAY;YAC3H,EAAc,CAAO;CAClB,CAAA,IAGH,MAKH,KAAa,EAAM,SAAS,QAAQ,CAAQ,GAC5C,IAAmC,CAAC,GACpC,IAAqC,CAAC;CAC5C,GAAW,SAAS,MAAU;EAC5B,AAAI,EAAM,eAAe,CAAK,KAAM,EAAM,MAAmC,gBAAgB,iBAC3F,EAAc,KAAK,CAAK,IAExB,EAAgB,KAAK,CAAK;CAE9B,CAAC;CAED,IAAM,WACA,KAAW,MAAoB,WAE/B,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,QAAD;GAAM,WAAU;aAAa;EAAsB,CAAA,GACnD,kBAAC,QAAD;GAAM,WAAU;aACd,kBAAC,GAAD;IAAS,MAAM,EAAuB;IAAe,SAAQ;GAAQ,CAAA;EACjE,CAAA,CACF;MAKN,EAAc,SAAS,IAClB,kBAAC,QAAD,EAAA,UAAO,EAAsB,CAAA,IAE/B,kBAAA,IAAA,EAAA,UAAG,EAAkB,CAAA,GAIxB,KAAqB,IACvB,MAAe,YACb,uEACA,iEACF,KAAA,GAGE,KAAoB,IACxB,kBAAC,QAAD;EAAM,WAAW,EAAG,wEAAwE,KAAa,EAAM,KAAK;YAClH,kBAAC,IAAD;GAAM,MAAM,MAAe,YAAY,KAAY;GAAO,SAAQ;EAAQ,CAAA;CACtE,CAAA,IACJ,MAEE,KAAW,GAAoB,MAAiB,MAEhD,KACJ,kBAAC,GAAO,QAAR;EACE,GAAI,GAAY,CAAK;EACrB,OAAO;GAAE,GAAG,EAAM;GAAO,GAAG;EAAiB;EAC7C,WAAW,EACT,EAAe;GAEb,SAAS,KAAgB,CAAC,KAAmB,MAAoB,WAAW,MAAoB,aAAa,MAAoB,SAAS,SAAS;GACnJ,OAAO;GACP,QAAQ;GACR,MAAM;EACR,CAAC,GACD,MAAkB,UAAU,gBAC5B,MAAkB,UAAU,EAAiB,KAC5C,KAAa,MAAiB,UAE/B,CAAC,KAAW,CAAC,KAAmB,0HAChC,CAAC,KAAW,CAAC,KAAmB,yDAChC,CAAC,KAAW,CAAC,KAAmB,4FAChC,IACA,KAAmB,mEACnB,KAAgB,KAAsB,sCACtC,CACF;EACA,MAAM,MAAiC;GAErC,AADA,EAAO,UAAU,GACb,OAAO,KAAQ,aAAY,EAAI,CAAE,IAC5B,MAAK,EAA0D,UAAU;EACpF;EACA,UAAU,KAAqB,KAAW,CAAC;EAC3C,aAAW,KAAW,KAAgB,KAAA;EACtC,iBAAe,KAAgB,KAAsB,KAAA;EACrD,SAAS,IAAU,KAAoB,KAAgB,IAAqB,KAAA,IAAY;YA/B1F;GAkCG;GAEA,IAAkB,KAAoB,EAAgB;GACtD,IAAkB,IAAkB,GAAe;GACnD,IAAkB,OAAO,GAAc;EAC3B;;CAOjB,OACE,kBAAC,GAAD;EAAc,MAAM;YAClB,kBAAC,QAAD;GACE,KAAK;GACL,WAAW,EAAG,wBAAwB,KAAa,QAAQ;GAC3D,OAAO;IACL,GAAI,KAAa,KAAgB,IAAiB,KAAA,IAAY,EAAE,YAAY,8CAA8C;IAC1H,GAAG;GACL;aANF,CAQG,IACD,kBAAC,IAAD;IACE,QAAQ;IACR,OAAO,KAAmB;IAC1B,OAAO;GACR,CAAA,CACG;;CACM,CAAA;AAElB,CACF;AACA,EAAO,cAAc"}
+{"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-body-sm gap-ds-02',\n        sm: 'h-ds-sm rounded-control px-ds-04 text-body-sm gap-ds-02b',\n        md: 'h-ds-md rounded-control px-ds-05 text-body-md gap-ds-03',\n        lg: 'h-ds-lg rounded-control px-ds-06 text-body-lg gap-2.5',\n        'compact-xs': 'rounded-control px-ds-02 py-[3px] text-body-sm gap-ds-02',\n        'compact-sm': 'rounded-control px-ds-03 py-[5px] text-body-sm gap-ds-02b',\n        'compact-md': 'rounded-control px-ds-04 py-ds-03 text-body-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/card.d.ts

@@ -66,7 +66,7 @@ declare const cardVariants: (props?: ({
  * // Flat card for a sidebar panel section (no shadow):
  * <Card variant="flat">
  *   <CardContent>
- *     <p className="text-surface-fg-muted text-ds-sm">No recent activity</p>
+ *     <p className="text-surface-fg-muted text-body-sm">No recent activity</p>
  *   </CardContent>
  * </Card>
  */

package/dist/ui/card.js

@@ -77,7 +77,7 @@ var u = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ a("div", {
 u.displayName = "CardTitle";
 var d = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ a("div", {
 	ref: n,
-	className: r("text-ds-md text-surface-fg-muted", e),
+	className: r("text-body-md text-surface-fg-muted", e),
 	...t
 }));
 d.displayName = "CardDescription";

package/dist/ui/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Bundlers (Vite, Next.js, webpack) define process.env.NODE_ENV; guard for raw ESM.\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst cardVariants = cva(\n  // Gap model, variable-driven: `size` sets --card-spacing / --card-gap once on the\n  // container; the container reads them for its vertical edge (py) and inter-slot\n  // rhythm (gap), slots read the same variables for their horizontal inset (px), and\n  // CardAction/CardBleed read them for corner offsets / negative margins. One variable\n  // pair is the whole size system — override it with a single arbitrary property\n  // (`[--card-spacing:var(--spacing-ds-07)]`) and every part follows.\n  // No per-slot py, no pt-0, no per-element margins — adding/removing a slot can't\n  // unbalance the bottom edge (make-kit rule: shadow ring is the edge, gap is the rhythm).\n  // `relative` establishes the positioning context for <CardAction> corner slots.\n  'relative flex text-surface-fg rounded-surface transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        // Elevation-led: the shadow's own ring is the edge (make-kit rule #6 — no\n        // border+shadow double-edge). border-transparent keeps the `color` prop able to\n        // paint a deliberate colored edge without a grey one by default.\n        default: 'bg-surface-raised border border-transparent shadow-raised',\n        elevated: 'bg-surface-raised border border-transparent shadow-raised-hover',\n        // Border-led: a visible edge, no shadow.\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      // size only assigns the two variables; the orientation axis decides where\n      // they're consumed (container in vertical, <CardSection> in horizontal).\n      size: {\n        sm: '[--card-spacing:var(--spacing-ds-05)] [--card-gap:var(--spacing-ds-03)]',\n        md: '[--card-spacing:var(--spacing-ds-05b)] [--card-gap:var(--spacing-ds-04)]',\n        lg: '[--card-spacing:var(--spacing-ds-06)] [--card-gap:var(--spacing-ds-05)]',\n      },\n      // vertical: the container owns py + gap (the default gap model).\n      // horizontal: the container is a padding-less row; a <CardSection> child\n      // re-establishes py + gap for the text column while a media pane owns an edge.\n      orientation: {\n        vertical: 'flex-col py-(--card-spacing) gap-(--card-gap)',\n        horizontal: 'flex-row items-stretch',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md', orientation: 'vertical' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants (elevation-led vs border-led — never both):** `default` (ring-in-shadow, no border) |\n * `elevated` (stronger shadow-raised-hover, no border) | `outline` (visible border, no shadow) |\n * `flat` (filled background, no edge). The shadow tokens carry their own 1px ring, so elevated\n * variants need no explicit border (make-kit rule #6).\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing. Text content must live\n * inside a slot — raw text as a direct child gets no horizontal inset (direct children span the\n * full card width by design, which is what makes full-width dividers and bands free).\n *\n * **Spacing:** `size` sets `--card-spacing` / `--card-gap` once; container, slots, `CardAction`,\n * and `CardBleed` all read the same pair. Retune a card with a single override:\n * `className=\"[--card-spacing:var(--spacing-ds-07)]\"`.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Full-bleed cover image + edge-to-edge divider:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Muhurat launch site</CardTitle></CardHeader>\n *   <Separator />\n *   <CardFooter><Badge color=\"success\">On track</Badge></CardFooter>\n * </Card>\n *\n * @example\n * // Horizontal media card — media pane owns the left edge, CardSection restores rhythm:\n * <Card orientation=\"horizontal\">\n *   <div className=\"w-32 shrink-0 rounded-l-surface overflow-hidden\">\n *     <img src={thumb} alt=\"\" className=\"h-full w-full object-cover\" />\n *   </div>\n *   <CardSection>\n *     <CardHeader><CardTitle>Field notes</CardTitle></CardHeader>\n *     <CardFooter>edited yesterday</CardFooter>\n *   </CardSection>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\">\n *   <CardContent>\n *     <p className=\"text-surface-fg-muted text-ds-sm\">No recent activity</p>\n *   </CardContent>\n * </Card>\n */\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n}\n\nexport type { CardSize }\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, orientation, interactive, children, ...props }, ref) => {\n    if (typeof process !== 'undefined' && process?.env.NODE_ENV !== 'production') {\n      warnOnUnwrappedTextChildren(children)\n    }\n    const classes = cn(\n      cardVariants({ variant, color, size, orientation }),\n      interactive && 'hover:shadow-raised-hover cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-ds-02b px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // Reset first/last child margins so a raw <p>/<h*>'s UA margin can't leak\n      // past the slot onto the container's gap-model padding (the bottom-heavy bug).\n      'px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-ds-03 px-(--card-spacing)', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\n/**\n * A vertical stack that re-establishes the card's padding + gap rhythm — the text column\n * of a `<Card orientation=\"horizontal\">`. Reads the same `--card-spacing` / `--card-gap`\n * variables the container sets, so the horizontal card's content column matches a vertical\n * card of the same `size` exactly.\n */\nconst CardSection = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col py-(--card-spacing) gap-(--card-gap)', className)}\n    {...props}\n  />\n))\nCardSection.displayName = 'CardSection'\n\ntype CardBleedSide = 'x' | 'top' | 'bottom' | 'y' | 'all'\n\nconst bleedSideClasses: Record<CardBleedSide, string> = {\n  // Inside a slot: escape the slot's horizontal inset.\n  x: '-mx-(--card-spacing)',\n  // As a direct child: escape the container's vertical edge (direct children are\n  // already full-width — never add `x` bleed to a direct child, it would overflow).\n  top: '-mt-(--card-spacing) rounded-t-surface overflow-hidden',\n  bottom: '-mb-(--card-spacing) rounded-b-surface overflow-hidden',\n  y: '-my-(--card-spacing) rounded-surface overflow-hidden',\n  // Inside a slot, escaping every edge (e.g. an image-only card body).\n  all: '-my-(--card-spacing) -mx-(--card-spacing) rounded-surface overflow-hidden',\n}\n\nexport interface CardBleedProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which card padding to negate. `top`/`bottom`/`y` are for direct children of Card\n   * (full-bleed media, edge bands) and inherit the card's corner radius; `x`/`all` are\n   * for content INSIDE a slot that needs to escape the slot's horizontal inset.\n   * Direct children of Card already span its full width — don't use `x`/`all` there.\n   * @default 'x'\n   */\n  side?: CardBleedSide\n}\n\n/**\n * Escape hatch from the card's padding — the shilp-sutra equivalent of Radix Themes'\n * `Inset` / Polaris `Bleed`. Negates the same `--card-spacing` variable the padding\n * reads, so it stays exact across sizes and overrides.\n *\n * @example\n * // Cover image touching the card's top + side edges:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Project</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // A tinted band inside CardContent, running edge-to-edge:\n * <CardContent>\n *   <CardBleed><div className=\"bg-accent-2 px-(--card-spacing) py-ds-03\">Heads up…</div></CardBleed>\n * </CardContent>\n */\nconst CardBleed = React.forwardRef<HTMLDivElement, CardBleedProps>(\n  ({ className, side = 'x', ...props }, ref) => (\n    <div ref={ref} className={cn(bleedSideClasses[side], className)} {...props} />\n  ),\n)\nCardBleed.displayName = 'CardBleed'\n\ntype CardActionPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n// Corner inset reads --card-spacing so an action's edge lines up with the slot\n// content edge at every size.\nconst cornerPositions: Record<CardActionPlacement, string> = {\n  'top-right': 'top-(--card-spacing) right-(--card-spacing)',\n  'top-left': 'top-(--card-spacing) left-(--card-spacing)',\n  'bottom-right': 'bottom-(--card-spacing) right-(--card-spacing)',\n  'bottom-left': 'bottom-(--card-spacing) left-(--card-spacing)',\n}\n\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which corner the action sits in. @default 'top-right' */\n  placement?: CardActionPlacement\n  /**\n   * Pull the action a step toward its corner (`-m-ds-02`) so an icon button's GLYPH —\n   * not its padding box — aligns to the content-edge line. Use for ghost/icon buttons\n   * placed in a corner; leave off for badges/text where the padding box is the edge.\n   */\n  tuck?: boolean\n}\n\n/**\n * An absolutely-positioned corner slot for a Card — a menu/icon button, a status badge,\n * an overflow action. The Card is `relative`, so this pins to one of its four corners\n * with an inset that matches the card's content padding.\n *\n * @example\n * <Card>\n *   <CardAction><IconButton aria-label=\"More\" icon={<IconDots />} variant=\"ghost\" tuck /></CardAction>\n *   <CardHeader><CardTitle>Project Alpha</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // Accent status badge in the top-right:\n * <Card>\n *   <CardAction><Badge color=\"accent\" size=\"xs\">LIVE</Badge></CardAction>\n *   ...\n * </Card>\n */\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n  ({ className, placement = 'top-right', tuck, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute z-[1] flex items-center gap-ds-02',\n        cornerPositions[placement],\n        tuck && '-m-ds-02',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nCardAction.displayName = 'CardAction'\n\n// Text-shaped tags that almost certainly expected a slot's horizontal inset.\n// Structural tags (div, section, img, table, hr…) are legitimate full-width direct\n// children, so they stay silent.\nconst TEXTUAL_TAGS = new Set(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'label', 'small', 'strong', 'em'])\nlet warnedUnwrappedText = false\n\nfunction warnOnUnwrappedTextChildren(children: React.ReactNode): void {\n  if (warnedUnwrappedText) return\n  React.Children.forEach(children, (child) => {\n    const isBareText = typeof child === 'string' && child.trim() !== ''\n    const isTextualTag =\n      React.isValidElement(child) &&\n      typeof child.type === 'string' &&\n      TEXTUAL_TAGS.has(child.type)\n    if (isBareText || isTextualTag) {\n      warnedUnwrappedText = true\n      console.warn(\n        '[shilp-sutra] <Card> received text content as a direct child. Direct children span the full card width and get no horizontal inset — wrap text in <CardContent> (or <CardHeader>/<CardFooter>). See the Card docs, \"Composition\".',\n      )\n    }\n  })\n}\n\nexport { Card, CardAction, CardBleed, CardContent, CardDescription, CardFooter, CardHeader, CardSection, CardTitle, cardVariants }\nexport type { CardActionPlacement, CardBleedSide }\n"],"mappings":"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"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Bundlers (Vite, Next.js, webpack) define process.env.NODE_ENV; guard for raw ESM.\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst cardVariants = cva(\n  // Gap model, variable-driven: `size` sets --card-spacing / --card-gap once on the\n  // container; the container reads them for its vertical edge (py) and inter-slot\n  // rhythm (gap), slots read the same variables for their horizontal inset (px), and\n  // CardAction/CardBleed read them for corner offsets / negative margins. One variable\n  // pair is the whole size system — override it with a single arbitrary property\n  // (`[--card-spacing:var(--spacing-ds-07)]`) and every part follows.\n  // No per-slot py, no pt-0, no per-element margins — adding/removing a slot can't\n  // unbalance the bottom edge (make-kit rule: shadow ring is the edge, gap is the rhythm).\n  // `relative` establishes the positioning context for <CardAction> corner slots.\n  'relative flex text-surface-fg rounded-surface transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        // Elevation-led: the shadow's own ring is the edge (make-kit rule #6 — no\n        // border+shadow double-edge). border-transparent keeps the `color` prop able to\n        // paint a deliberate colored edge without a grey one by default.\n        default: 'bg-surface-raised border border-transparent shadow-raised',\n        elevated: 'bg-surface-raised border border-transparent shadow-raised-hover',\n        // Border-led: a visible edge, no shadow.\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      // size only assigns the two variables; the orientation axis decides where\n      // they're consumed (container in vertical, <CardSection> in horizontal).\n      size: {\n        sm: '[--card-spacing:var(--spacing-ds-05)] [--card-gap:var(--spacing-ds-03)]',\n        md: '[--card-spacing:var(--spacing-ds-05b)] [--card-gap:var(--spacing-ds-04)]',\n        lg: '[--card-spacing:var(--spacing-ds-06)] [--card-gap:var(--spacing-ds-05)]',\n      },\n      // vertical: the container owns py + gap (the default gap model).\n      // horizontal: the container is a padding-less row; a <CardSection> child\n      // re-establishes py + gap for the text column while a media pane owns an edge.\n      orientation: {\n        vertical: 'flex-col py-(--card-spacing) gap-(--card-gap)',\n        horizontal: 'flex-row items-stretch',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md', orientation: 'vertical' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants (elevation-led vs border-led — never both):** `default` (ring-in-shadow, no border) |\n * `elevated` (stronger shadow-raised-hover, no border) | `outline` (visible border, no shadow) |\n * `flat` (filled background, no edge). The shadow tokens carry their own 1px ring, so elevated\n * variants need no explicit border (make-kit rule #6).\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing. Text content must live\n * inside a slot — raw text as a direct child gets no horizontal inset (direct children span the\n * full card width by design, which is what makes full-width dividers and bands free).\n *\n * **Spacing:** `size` sets `--card-spacing` / `--card-gap` once; container, slots, `CardAction`,\n * and `CardBleed` all read the same pair. Retune a card with a single override:\n * `className=\"[--card-spacing:var(--spacing-ds-07)]\"`.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Full-bleed cover image + edge-to-edge divider:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Muhurat launch site</CardTitle></CardHeader>\n *   <Separator />\n *   <CardFooter><Badge color=\"success\">On track</Badge></CardFooter>\n * </Card>\n *\n * @example\n * // Horizontal media card — media pane owns the left edge, CardSection restores rhythm:\n * <Card orientation=\"horizontal\">\n *   <div className=\"w-32 shrink-0 rounded-l-surface overflow-hidden\">\n *     <img src={thumb} alt=\"\" className=\"h-full w-full object-cover\" />\n *   </div>\n *   <CardSection>\n *     <CardHeader><CardTitle>Field notes</CardTitle></CardHeader>\n *     <CardFooter>edited yesterday</CardFooter>\n *   </CardSection>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\">\n *   <CardContent>\n *     <p className=\"text-surface-fg-muted text-body-sm\">No recent activity</p>\n *   </CardContent>\n * </Card>\n */\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n}\n\nexport type { CardSize }\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, orientation, interactive, children, ...props }, ref) => {\n    if (typeof process !== 'undefined' && process?.env.NODE_ENV !== 'production') {\n      warnOnUnwrappedTextChildren(children)\n    }\n    const classes = cn(\n      cardVariants({ variant, color, size, orientation }),\n      interactive && 'hover:shadow-raised-hover cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-ds-02b px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // Reset first/last child margins so a raw <p>/<h*>'s UA margin can't leak\n      // past the slot onto the container's gap-model padding (the bottom-heavy bug).\n      'px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-ds-03 px-(--card-spacing)', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\n/**\n * A vertical stack that re-establishes the card's padding + gap rhythm — the text column\n * of a `<Card orientation=\"horizontal\">`. Reads the same `--card-spacing` / `--card-gap`\n * variables the container sets, so the horizontal card's content column matches a vertical\n * card of the same `size` exactly.\n */\nconst CardSection = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col py-(--card-spacing) gap-(--card-gap)', className)}\n    {...props}\n  />\n))\nCardSection.displayName = 'CardSection'\n\ntype CardBleedSide = 'x' | 'top' | 'bottom' | 'y' | 'all'\n\nconst bleedSideClasses: Record<CardBleedSide, string> = {\n  // Inside a slot: escape the slot's horizontal inset.\n  x: '-mx-(--card-spacing)',\n  // As a direct child: escape the container's vertical edge (direct children are\n  // already full-width — never add `x` bleed to a direct child, it would overflow).\n  top: '-mt-(--card-spacing) rounded-t-surface overflow-hidden',\n  bottom: '-mb-(--card-spacing) rounded-b-surface overflow-hidden',\n  y: '-my-(--card-spacing) rounded-surface overflow-hidden',\n  // Inside a slot, escaping every edge (e.g. an image-only card body).\n  all: '-my-(--card-spacing) -mx-(--card-spacing) rounded-surface overflow-hidden',\n}\n\nexport interface CardBleedProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which card padding to negate. `top`/`bottom`/`y` are for direct children of Card\n   * (full-bleed media, edge bands) and inherit the card's corner radius; `x`/`all` are\n   * for content INSIDE a slot that needs to escape the slot's horizontal inset.\n   * Direct children of Card already span its full width — don't use `x`/`all` there.\n   * @default 'x'\n   */\n  side?: CardBleedSide\n}\n\n/**\n * Escape hatch from the card's padding — the shilp-sutra equivalent of Radix Themes'\n * `Inset` / Polaris `Bleed`. Negates the same `--card-spacing` variable the padding\n * reads, so it stays exact across sizes and overrides.\n *\n * @example\n * // Cover image touching the card's top + side edges:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Project</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // A tinted band inside CardContent, running edge-to-edge:\n * <CardContent>\n *   <CardBleed><div className=\"bg-accent-2 px-(--card-spacing) py-ds-03\">Heads up…</div></CardBleed>\n * </CardContent>\n */\nconst CardBleed = React.forwardRef<HTMLDivElement, CardBleedProps>(\n  ({ className, side = 'x', ...props }, ref) => (\n    <div ref={ref} className={cn(bleedSideClasses[side], className)} {...props} />\n  ),\n)\nCardBleed.displayName = 'CardBleed'\n\ntype CardActionPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n// Corner inset reads --card-spacing so an action's edge lines up with the slot\n// content edge at every size.\nconst cornerPositions: Record<CardActionPlacement, string> = {\n  'top-right': 'top-(--card-spacing) right-(--card-spacing)',\n  'top-left': 'top-(--card-spacing) left-(--card-spacing)',\n  'bottom-right': 'bottom-(--card-spacing) right-(--card-spacing)',\n  'bottom-left': 'bottom-(--card-spacing) left-(--card-spacing)',\n}\n\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which corner the action sits in. @default 'top-right' */\n  placement?: CardActionPlacement\n  /**\n   * Pull the action a step toward its corner (`-m-ds-02`) so an icon button's GLYPH —\n   * not its padding box — aligns to the content-edge line. Use for ghost/icon buttons\n   * placed in a corner; leave off for badges/text where the padding box is the edge.\n   */\n  tuck?: boolean\n}\n\n/**\n * An absolutely-positioned corner slot for a Card — a menu/icon button, a status badge,\n * an overflow action. The Card is `relative`, so this pins to one of its four corners\n * with an inset that matches the card's content padding.\n *\n * @example\n * <Card>\n *   <CardAction><IconButton aria-label=\"More\" icon={<IconDots />} variant=\"ghost\" tuck /></CardAction>\n *   <CardHeader><CardTitle>Project Alpha</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // Accent status badge in the top-right:\n * <Card>\n *   <CardAction><Badge color=\"accent\" size=\"xs\">LIVE</Badge></CardAction>\n *   ...\n * </Card>\n */\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n  ({ className, placement = 'top-right', tuck, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute z-[1] flex items-center gap-ds-02',\n        cornerPositions[placement],\n        tuck && '-m-ds-02',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nCardAction.displayName = 'CardAction'\n\n// Text-shaped tags that almost certainly expected a slot's horizontal inset.\n// Structural tags (div, section, img, table, hr…) are legitimate full-width direct\n// children, so they stay silent.\nconst TEXTUAL_TAGS = new Set(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'label', 'small', 'strong', 'em'])\nlet warnedUnwrappedText = false\n\nfunction warnOnUnwrappedTextChildren(children: React.ReactNode): void {\n  if (warnedUnwrappedText) return\n  React.Children.forEach(children, (child) => {\n    const isBareText = typeof child === 'string' && child.trim() !== ''\n    const isTextualTag =\n      React.isValidElement(child) &&\n      typeof child.type === 'string' &&\n      TEXTUAL_TAGS.has(child.type)\n    if (isBareText || isTextualTag) {\n      warnedUnwrappedText = true\n      console.warn(\n        '[shilp-sutra] <Card> received text content as a direct child. Direct children span the full card width and get no horizontal inset — wrap text in <CardContent> (or <CardHeader>/<CardFooter>). See the Card docs, \"Composition\".',\n      )\n    }\n  })\n}\n\nexport { Card, CardAction, CardBleed, CardContent, CardDescription, CardFooter, CardHeader, CardSection, CardTitle, cardVariants }\nexport type { CardActionPlacement, CardBleedSide }\n"],"mappings":"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"}

package/dist/ui/charts/gauge-chart.js

@@ -51,7 +51,7 @@ var d = (e) => e * Math.PI / 180, f = o.forwardRef(({ value: o, max: f = 100, mi
 						y: m ? -4 : 0,
 						textAnchor: "middle",
 						dominantBaseline: "central",
-						className: "fill-surface-fg text-ds-2xl font-semibold",
+						className: "fill-surface-fg text-heading-md font-semibold",
 						children: F
 					}),
 					m && /* @__PURE__ */ s("text", {
@@ -59,7 +59,7 @@ var d = (e) => e * Math.PI / 180, f = o.forwardRef(({ value: o, max: f = 100, mi
 						y: 20,
 						textAnchor: "middle",
 						dominantBaseline: "central",
-						className: "fill-surface-fg-muted text-ds-xs",
+						className: "fill-surface-fg-muted text-body-xs",
 						children: m
 					})
 				]

package/dist/ui/charts/gauge-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-chart.js","names":[],"sources":["../../../src/ui/charts/gauge-chart.tsx"],"sourcesContent":["'use client'\n\nimport { arc } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { getTransitionDuration,useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\n\nexport interface GaugeChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {\n  /** Current value */\n  value: number\n  /** Maximum value (default: 100) */\n  max?: number\n  /** Minimum value (default: 0) */\n  min?: number\n  /** Label below the value */\n  label?: string\n  /** Custom value display */\n  valueLabel?: string | ((value: number) => string)\n  /** Arc color */\n  color?: string\n  /** Track (background) color */\n  trackColor?: string\n  /** Chart height/width (default: 200) */\n  height?: number\n  /** Start angle in degrees (default: -120) */\n  startAngle?: number\n  /** End angle in degrees (default: 120) */\n  endAngle?: number\n  /** Arc thickness in pixels (default: 16) */\n  thickness?: number\n  /** Animate the value arc */\n  animate?: boolean\n  className?: string\n}\n\nconst toRad = (deg: number) => (deg * Math.PI) / 180\n\nexport const GaugeChart = React.forwardRef<HTMLDivElement, GaugeChartProps>(\n  (\n    {\n      value,\n      max = 100,\n      min = 0,\n      label,\n      valueLabel,\n      color,\n      trackColor = 'var(--color-surface-border)',\n      height = 200,\n      startAngle = -120,\n      endAngle = 120,\n      thickness = 16,\n      animate = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const reducedMotion = useReducedMotion()\n  const duration = getTransitionDuration(reducedMotion, animate ? 600 : 0)\n  const shouldAnimate = animate && !reducedMotion\n\n  const resolvedColor = resolveColor(color, 0)\n  const size = height\n  const radius = size / 2\n\n  // Clamp value to [min, max]\n  const clampedValue = Math.min(Math.max(value, min), max)\n  const valueFraction = max === min ? 0 : (clampedValue - min) / (max - min)\n  const valueEndAngle = startAngle + (endAngle - startAngle) * valueFraction\n\n  // Display text\n  const displayValue =\n    typeof valueLabel === 'function'\n      ? valueLabel(clampedValue)\n      : typeof valueLabel === 'string'\n        ? valueLabel\n        : String(clampedValue)\n\n  // Track arc generator\n  const trackGenerator = arc<unknown>()\n    .innerRadius(radius - thickness)\n    .outerRadius(radius)\n    .startAngle(toRad(startAngle))\n    .endAngle(toRad(endAngle))\n    .cornerRadius(thickness / 2)\n\n  // Value arc generator\n  const valueGenerator = arc<unknown>()\n    .innerRadius(radius - thickness)\n    .outerRadius(radius)\n    .startAngle(toRad(startAngle))\n    .endAngle(toRad(valueEndAngle))\n    .cornerRadius(thickness / 2)\n\n  const trackPath = trackGenerator(null as unknown as Record<string, never>) ?? ''\n  const valuePath = valueGenerator(null as unknown as Record<string, never>) ?? ''\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('inline-flex flex-col items-center', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n      role=\"meter\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={label ?? 'Gauge chart'}\n    >\n      <svg width={size} height={size} role=\"img\" aria-hidden=\"true\">\n        <g transform={`translate(${radius},${radius})`}>\n          {/* Background track */}\n          <path d={trackPath} fill={trackColor} />\n\n          {/* Value arc */}\n          <path\n            d={valuePath}\n            fill={resolvedColor}\n            style={\n              duration > 0\n                ? { transition: `d ${duration}ms ease-out` }\n                : undefined\n            }\n          />\n\n          {/* Center value text */}\n          <text\n            x={0}\n            y={label ? -4 : 0}\n            textAnchor=\"middle\"\n            dominantBaseline=\"central\"\n            className=\"fill-surface-fg text-ds-2xl font-semibold\"\n          >\n            {displayValue}\n          </text>\n\n          {/* Label below value */}\n          {label && (\n            <text\n              x={0}\n              y={20}\n              textAnchor=\"middle\"\n              dominantBaseline=\"central\"\n              className=\"fill-surface-fg-muted text-ds-xs\"\n            >\n              {label}\n            </text>\n          )}\n        </g>\n      </svg>\n    </motion.div>\n  )\n  },\n)\nGaugeChart.displayName = 'GaugeChart'\n"],"mappings":";;;;;;;;;AAuCA,IAAM,KAAS,MAAiB,IAAM,KAAK,KAAM,KAEpC,IAAa,EAAM,YAE5B,EACE,UACA,SAAM,KACN,SAAM,GACN,UACA,eACA,UACA,gBAAa,+BACb,YAAS,KACT,gBAAa,MACb,cAAW,KACX,eAAY,IACZ,aAAU,IACV,cACA,GAAG,KAEL,MACG;CACL,IAAM,IAAgB,EAAiB,GACjC,IAAW,EAAsB,GAAe,IAAU,MAAM,CAAC,GACjE,IAAgB,KAAW,CAAC,GAE5B,IAAgB,EAAa,GAAO,CAAC,GACrC,IAAO,GACP,IAAS,IAAO,GAGhB,IAAe,KAAK,IAAI,KAAK,IAAI,GAAO,CAAG,GAAG,CAAG,GACjD,IAAgB,MAAQ,IAAM,KAAK,IAAe,MAAQ,IAAM,IAChE,IAAgB,KAAc,IAAW,KAAc,GAGvD,IACJ,OAAO,KAAe,aAClB,EAAW,CAAY,IACvB,OAAO,KAAe,WACpB,IACA,OAAO,CAAY,GAGrB,IAAiB,EAAa,CAAC,CAClC,YAAY,IAAS,CAAS,CAAC,CAC/B,YAAY,CAAM,CAAC,CACnB,WAAW,EAAM,CAAU,CAAC,CAAC,CAC7B,SAAS,EAAM,CAAQ,CAAC,CAAC,CACzB,aAAa,IAAY,CAAC,GAGvB,IAAiB,EAAa,CAAC,CAClC,YAAY,IAAS,CAAS,CAAC,CAC/B,YAAY,CAAM,CAAC,CACnB,WAAW,EAAM,CAAU,CAAC,CAAC,CAC7B,SAAS,EAAM,CAAa,CAAC,CAAC,CAC9B,aAAa,IAAY,CAAC,GAEvB,IAAY,EAAe,IAAwC,KAAK,IACxE,IAAY,EAAe,IAAwC,KAAK;CAE9E,OACE,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,qCAAqC,CAAS;EAC5D,GAAK,IACD;GAAE,SAAS;IAAE,SAAS;IAAG,OAAO;GAAK;GAAG,SAAS;IAAE,SAAS;IAAG,OAAO;GAAE;GAAG,YAAY,EAAO;EAAK,IACnG,CAAC;EACL,GAAI,EAAY,CAAK;EACrB,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY,KAAS;YAErB,kBAAC,OAAD;GAAK,OAAO;GAAM,QAAQ;GAAM,MAAK;GAAM,eAAY;aACrD,kBAAC,KAAD;IAAG,WAAW,aAAa,EAAO,GAAG,EAAO;cAA5C;KAEE,kBAAC,QAAD;MAAM,GAAG;MAAW,MAAM;KAAa,CAAA;KAGvC,kBAAC,QAAD;MACE,GAAG;MACH,MAAM;MACN,OACE,IAAW,IACP,EAAE,YAAY,KAAK,EAAS,aAAa,IACzC,KAAA;KAEP,CAAA;KAGD,kBAAC,QAAD;MACE,GAAG;MACH,GAAG,IAAQ,KAAK;MAChB,YAAW;MACX,kBAAiB;MACjB,WAAU;gBAET;KACG,CAAA;KAGL,KACC,kBAAC,QAAD;MACE,GAAG;MACH,GAAG;MACH,YAAW;MACX,kBAAiB;MACjB,WAAU;gBAET;KACG,CAAA;IAEP;;EACA,CAAA;CACK,CAAA;AAEd,CACF;AACA,EAAW,cAAc"}
+{"version":3,"file":"gauge-chart.js","names":[],"sources":["../../../src/ui/charts/gauge-chart.tsx"],"sourcesContent":["'use client'\n\nimport { arc } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { getTransitionDuration,useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\n\nexport interface GaugeChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {\n  /** Current value */\n  value: number\n  /** Maximum value (default: 100) */\n  max?: number\n  /** Minimum value (default: 0) */\n  min?: number\n  /** Label below the value */\n  label?: string\n  /** Custom value display */\n  valueLabel?: string | ((value: number) => string)\n  /** Arc color */\n  color?: string\n  /** Track (background) color */\n  trackColor?: string\n  /** Chart height/width (default: 200) */\n  height?: number\n  /** Start angle in degrees (default: -120) */\n  startAngle?: number\n  /** End angle in degrees (default: 120) */\n  endAngle?: number\n  /** Arc thickness in pixels (default: 16) */\n  thickness?: number\n  /** Animate the value arc */\n  animate?: boolean\n  className?: string\n}\n\nconst toRad = (deg: number) => (deg * Math.PI) / 180\n\nexport const GaugeChart = React.forwardRef<HTMLDivElement, GaugeChartProps>(\n  (\n    {\n      value,\n      max = 100,\n      min = 0,\n      label,\n      valueLabel,\n      color,\n      trackColor = 'var(--color-surface-border)',\n      height = 200,\n      startAngle = -120,\n      endAngle = 120,\n      thickness = 16,\n      animate = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const reducedMotion = useReducedMotion()\n  const duration = getTransitionDuration(reducedMotion, animate ? 600 : 0)\n  const shouldAnimate = animate && !reducedMotion\n\n  const resolvedColor = resolveColor(color, 0)\n  const size = height\n  const radius = size / 2\n\n  // Clamp value to [min, max]\n  const clampedValue = Math.min(Math.max(value, min), max)\n  const valueFraction = max === min ? 0 : (clampedValue - min) / (max - min)\n  const valueEndAngle = startAngle + (endAngle - startAngle) * valueFraction\n\n  // Display text\n  const displayValue =\n    typeof valueLabel === 'function'\n      ? valueLabel(clampedValue)\n      : typeof valueLabel === 'string'\n        ? valueLabel\n        : String(clampedValue)\n\n  // Track arc generator\n  const trackGenerator = arc<unknown>()\n    .innerRadius(radius - thickness)\n    .outerRadius(radius)\n    .startAngle(toRad(startAngle))\n    .endAngle(toRad(endAngle))\n    .cornerRadius(thickness / 2)\n\n  // Value arc generator\n  const valueGenerator = arc<unknown>()\n    .innerRadius(radius - thickness)\n    .outerRadius(radius)\n    .startAngle(toRad(startAngle))\n    .endAngle(toRad(valueEndAngle))\n    .cornerRadius(thickness / 2)\n\n  const trackPath = trackGenerator(null as unknown as Record<string, never>) ?? ''\n  const valuePath = valueGenerator(null as unknown as Record<string, never>) ?? ''\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('inline-flex flex-col items-center', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n      role=\"meter\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={label ?? 'Gauge chart'}\n    >\n      <svg width={size} height={size} role=\"img\" aria-hidden=\"true\">\n        <g transform={`translate(${radius},${radius})`}>\n          {/* Background track */}\n          <path d={trackPath} fill={trackColor} />\n\n          {/* Value arc */}\n          <path\n            d={valuePath}\n            fill={resolvedColor}\n            style={\n              duration > 0\n                ? { transition: `d ${duration}ms ease-out` }\n                : undefined\n            }\n          />\n\n          {/* Center value text */}\n          <text\n            x={0}\n            y={label ? -4 : 0}\n            textAnchor=\"middle\"\n            dominantBaseline=\"central\"\n            className=\"fill-surface-fg text-heading-md font-semibold\"\n          >\n            {displayValue}\n          </text>\n\n          {/* Label below value */}\n          {label && (\n            <text\n              x={0}\n              y={20}\n              textAnchor=\"middle\"\n              dominantBaseline=\"central\"\n              className=\"fill-surface-fg-muted text-body-xs\"\n            >\n              {label}\n            </text>\n          )}\n        </g>\n      </svg>\n    </motion.div>\n  )\n  },\n)\nGaugeChart.displayName = 'GaugeChart'\n"],"mappings":";;;;;;;;;AAuCA,IAAM,KAAS,MAAiB,IAAM,KAAK,KAAM,KAEpC,IAAa,EAAM,YAE5B,EACE,UACA,SAAM,KACN,SAAM,GACN,UACA,eACA,UACA,gBAAa,+BACb,YAAS,KACT,gBAAa,MACb,cAAW,KACX,eAAY,IACZ,aAAU,IACV,cACA,GAAG,KAEL,MACG;CACL,IAAM,IAAgB,EAAiB,GACjC,IAAW,EAAsB,GAAe,IAAU,MAAM,CAAC,GACjE,IAAgB,KAAW,CAAC,GAE5B,IAAgB,EAAa,GAAO,CAAC,GACrC,IAAO,GACP,IAAS,IAAO,GAGhB,IAAe,KAAK,IAAI,KAAK,IAAI,GAAO,CAAG,GAAG,CAAG,GACjD,IAAgB,MAAQ,IAAM,KAAK,IAAe,MAAQ,IAAM,IAChE,IAAgB,KAAc,IAAW,KAAc,GAGvD,IACJ,OAAO,KAAe,aAClB,EAAW,CAAY,IACvB,OAAO,KAAe,WACpB,IACA,OAAO,CAAY,GAGrB,IAAiB,EAAa,CAAC,CAClC,YAAY,IAAS,CAAS,CAAC,CAC/B,YAAY,CAAM,CAAC,CACnB,WAAW,EAAM,CAAU,CAAC,CAAC,CAC7B,SAAS,EAAM,CAAQ,CAAC,CAAC,CACzB,aAAa,IAAY,CAAC,GAGvB,IAAiB,EAAa,CAAC,CAClC,YAAY,IAAS,CAAS,CAAC,CAC/B,YAAY,CAAM,CAAC,CACnB,WAAW,EAAM,CAAU,CAAC,CAAC,CAC7B,SAAS,EAAM,CAAa,CAAC,CAAC,CAC9B,aAAa,IAAY,CAAC,GAEvB,IAAY,EAAe,IAAwC,KAAK,IACxE,IAAY,EAAe,IAAwC,KAAK;CAE9E,OACE,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,qCAAqC,CAAS;EAC5D,GAAK,IACD;GAAE,SAAS;IAAE,SAAS;IAAG,OAAO;GAAK;GAAG,SAAS;IAAE,SAAS;IAAG,OAAO;GAAE;GAAG,YAAY,EAAO;EAAK,IACnG,CAAC;EACL,GAAI,EAAY,CAAK;EACrB,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY,KAAS;YAErB,kBAAC,OAAD;GAAK,OAAO;GAAM,QAAQ;GAAM,MAAK;GAAM,eAAY;aACrD,kBAAC,KAAD;IAAG,WAAW,aAAa,EAAO,GAAG,EAAO;cAA5C;KAEE,kBAAC,QAAD;MAAM,GAAG;MAAW,MAAM;KAAa,CAAA;KAGvC,kBAAC,QAAD;MACE,GAAG;MACH,MAAM;MACN,OACE,IAAW,IACP,EAAE,YAAY,KAAK,EAAS,aAAa,IACzC,KAAA;KAEP,CAAA;KAGD,kBAAC,QAAD;MACE,GAAG;MACH,GAAG,IAAQ,KAAK;MAChB,YAAW;MACX,kBAAiB;MACjB,WAAU;gBAET;KACG,CAAA;KAGL,KACC,kBAAC,QAAD;MACE,GAAG;MACH,GAAG;MACH,YAAW;MACX,kBAAiB;MACjB,WAAU;gBAET;KACG,CAAA;IAEP;;EACA,CAAA;CACK,CAAA;AAEd,CACF;AACA,EAAW,cAAc"}

package/dist/ui/charts/pie-chart.js

@@ -81,7 +81,7 @@ var v = c.forwardRef(({ data: c, variant: v = "pie", innerRadius: y = .6, padAng
 							y: r,
 							textAnchor: "middle",
 							dominantBaseline: "central",
-							className: "pointer-events-none fill-accent-fg text-ds-xs font-medium",
+							className: "pointer-events-none fill-accent-fg text-body-xs font-medium",
 							children: [i, "%"]
 						}, `label-${e.data.label}-${t}`);
 					}),

package/dist/ui/charts/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","names":[],"sources":["../../../src/ui/charts/pie-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { PieArcDatum } from 'd3-shape'\nimport { arc as d3Arc,pie as d3Pie } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useEffect,useRef, useState } from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\n\ninterface PieSlice {\n  label: string\n  value: number\n  color?: string\n}\n\nexport interface PieChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data with label and value */\n  data: PieSlice[]\n  /** Pie or donut variant */\n  variant?: 'pie' | 'donut'\n  /** Inner radius ratio for donut (0-1, default 0.6) */\n  innerRadius?: number\n  /** Gap angle between slices in radians */\n  padAngle?: number\n  /** Corner radius for slice edges */\n  cornerRadius?: number\n  /** Chart height (and width, since pie is square) */\n  height?: number\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Show percentage labels on/near slices */\n  showLabels?: boolean\n  /** Animate slices */\n  animate?: boolean\n  className?: string\n  /** Content to show in center of donut */\n  centerLabel?: React.ReactNode\n  /** Accessible label for the chart */\n  ariaLabel?: string\n}\n\nexport const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\n  (\n    {\n      data,\n      variant = 'pie',\n      innerRadius: innerRadiusRatio = 0.6,\n      padAngle = 0,\n      cornerRadius = 0,\n      height = 300,\n      showTooltip = true,\n      showLegend = false,\n      showLabels = false,\n      animate = true,\n      className,\n      centerLabel,\n      ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setContainerWidth(entry.contentRect.width)\n    })\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [])\n\n  // Pie chart is square — use the smaller of width/height\n  const size = containerWidth > 0 ? Math.min(containerWidth, height) : height\n  const outerRadius = size / 2\n  const innerR = variant === 'donut' ? outerRadius * innerRadiusRatio : 0\n\n  // Resolve colors for each slice\n  const colors = data.map((d, i) => resolveColor(d.color, i))\n\n  // Compute total for percentages\n  const total = data.reduce((sum, d) => sum + d.value, 0)\n\n  // D3 pie layout\n  const pieLayout = d3Pie<PieSlice>()\n    .value((d) => d.value)\n    .padAngle(padAngle)\n    .sort(null)\n\n  const arcs = pieLayout(data)\n\n  // D3 arc generator\n  const arcGenerator = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(innerR)\n    .outerRadius(outerRadius - 2) // slight inset so hover offset doesn't clip\n    .cornerRadius(cornerRadius)\n\n  // Label arc — position labels at 70% of the way from inner to outer radius\n  const labelRadius = innerR + (outerRadius - 2 - innerR) * 0.7\n  const labelArc = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(labelRadius)\n    .outerRadius(labelRadius)\n\n  return (\n    <motion.div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }}\n      className={cn('relative w-full', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      {containerWidth > 0 && (\n        <>\n          <svg\n            width={containerWidth}\n            height={height}\n            role=\"img\"\n            aria-label={ariaLabel ?? 'Pie chart'}\n          >\n            <g transform={`translate(${containerWidth / 2},${height / 2})`}>\n              {arcs.map((d, i) => {\n                const path = arcGenerator(d)\n                if (!path) return null\n\n                // Hover offset: push slice outward along its centroid angle\n                const [cx, cy] = arcGenerator.centroid(d)\n                const angle = Math.atan2(cy, cx)\n                const offsetX = Math.cos(angle) * 4\n                const offsetY = Math.sin(angle) * 4\n                const isHovered = hoveredIndex === i\n\n                return (\n                  <path\n                    key={`slice-${d.data.label}-${i}`}\n                    d={path}\n                    fill={colors[i]}\n                    className=\"cursor-pointer transition-transform\"\n                    style={{\n                      transform: isHovered\n                        ? `translate(${offsetX}px, ${offsetY}px)`\n                        : undefined,\n                    }}\n                    onMouseEnter={() => setHoveredIndex(i)}\n                    onMouseMove={(e) => {\n                      if (showTooltip) {\n                        const rect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        const pct =\n                          total > 0\n                            ? ((d.data.value / total) * 100).toFixed(1)\n                            : '0'\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          <div>\n                            <div className=\"font-medium\">{d.data.label}</div>\n                            <div>\n                              {d.data.value.toLocaleString()} ({pct}%)\n                            </div>\n                          </div>,\n                        )\n                      }\n                    }}\n                    onMouseLeave={() => {\n                      setHoveredIndex(null)\n                      hide()\n                    }}\n                  />\n                )\n              })}\n\n              {/* Percentage labels */}\n              {showLabels &&\n                arcs.map((d, i) => {\n                  const [lx, ly] = labelArc.centroid(d)\n                  const pct =\n                    total > 0\n                      ? ((d.data.value / total) * 100).toFixed(0)\n                      : '0'\n\n                  // Skip tiny slices (< 3%) to avoid label overlap\n                  if (total > 0 && d.data.value / total < 0.03) return null\n\n                  return (\n                    <text\n                      key={`label-${d.data.label}-${i}`}\n                      x={lx}\n                      y={ly}\n                      textAnchor=\"middle\"\n                      dominantBaseline=\"central\"\n                      className=\"pointer-events-none fill-accent-fg text-ds-xs font-medium\"\n                    >\n                      {pct}%\n                    </text>\n                  )\n                })}\n\n              {/* Center label for donut variant */}\n              {variant === 'donut' && centerLabel && innerR > 0 && (\n                <foreignObject\n                  x={-innerR * 0.7}\n                  y={-innerR * 0.7}\n                  width={innerR * 1.4}\n                  height={innerR * 1.4}\n                >\n                  <div className=\"flex h-full w-full items-center justify-center text-center text-surface-fg\">\n                    {centerLabel}\n                  </div>\n                </foreignObject>\n              )}\n            </g>\n          </svg>\n\n          {/* Tooltip overlay */}\n          {showTooltip && <ChartTooltip state={tooltip} />}\n        </>\n      )}\n\n      {/* Legend */}\n      {showLegend && (\n        <Legend\n          items={data.map((d, i) => ({\n            label: d.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nPieChart.displayName = 'PieChart'\n"],"mappings":"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"}
+{"version":3,"file":"pie-chart.js","names":[],"sources":["../../../src/ui/charts/pie-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { PieArcDatum } from 'd3-shape'\nimport { arc as d3Arc,pie as d3Pie } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useEffect,useRef, useState } from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\n\ninterface PieSlice {\n  label: string\n  value: number\n  color?: string\n}\n\nexport interface PieChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data with label and value */\n  data: PieSlice[]\n  /** Pie or donut variant */\n  variant?: 'pie' | 'donut'\n  /** Inner radius ratio for donut (0-1, default 0.6) */\n  innerRadius?: number\n  /** Gap angle between slices in radians */\n  padAngle?: number\n  /** Corner radius for slice edges */\n  cornerRadius?: number\n  /** Chart height (and width, since pie is square) */\n  height?: number\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Show percentage labels on/near slices */\n  showLabels?: boolean\n  /** Animate slices */\n  animate?: boolean\n  className?: string\n  /** Content to show in center of donut */\n  centerLabel?: React.ReactNode\n  /** Accessible label for the chart */\n  ariaLabel?: string\n}\n\nexport const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\n  (\n    {\n      data,\n      variant = 'pie',\n      innerRadius: innerRadiusRatio = 0.6,\n      padAngle = 0,\n      cornerRadius = 0,\n      height = 300,\n      showTooltip = true,\n      showLegend = false,\n      showLabels = false,\n      animate = true,\n      className,\n      centerLabel,\n      ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setContainerWidth(entry.contentRect.width)\n    })\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [])\n\n  // Pie chart is square — use the smaller of width/height\n  const size = containerWidth > 0 ? Math.min(containerWidth, height) : height\n  const outerRadius = size / 2\n  const innerR = variant === 'donut' ? outerRadius * innerRadiusRatio : 0\n\n  // Resolve colors for each slice\n  const colors = data.map((d, i) => resolveColor(d.color, i))\n\n  // Compute total for percentages\n  const total = data.reduce((sum, d) => sum + d.value, 0)\n\n  // D3 pie layout\n  const pieLayout = d3Pie<PieSlice>()\n    .value((d) => d.value)\n    .padAngle(padAngle)\n    .sort(null)\n\n  const arcs = pieLayout(data)\n\n  // D3 arc generator\n  const arcGenerator = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(innerR)\n    .outerRadius(outerRadius - 2) // slight inset so hover offset doesn't clip\n    .cornerRadius(cornerRadius)\n\n  // Label arc — position labels at 70% of the way from inner to outer radius\n  const labelRadius = innerR + (outerRadius - 2 - innerR) * 0.7\n  const labelArc = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(labelRadius)\n    .outerRadius(labelRadius)\n\n  return (\n    <motion.div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }}\n      className={cn('relative w-full', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      {containerWidth > 0 && (\n        <>\n          <svg\n            width={containerWidth}\n            height={height}\n            role=\"img\"\n            aria-label={ariaLabel ?? 'Pie chart'}\n          >\n            <g transform={`translate(${containerWidth / 2},${height / 2})`}>\n              {arcs.map((d, i) => {\n                const path = arcGenerator(d)\n                if (!path) return null\n\n                // Hover offset: push slice outward along its centroid angle\n                const [cx, cy] = arcGenerator.centroid(d)\n                const angle = Math.atan2(cy, cx)\n                const offsetX = Math.cos(angle) * 4\n                const offsetY = Math.sin(angle) * 4\n                const isHovered = hoveredIndex === i\n\n                return (\n                  <path\n                    key={`slice-${d.data.label}-${i}`}\n                    d={path}\n                    fill={colors[i]}\n                    className=\"cursor-pointer transition-transform\"\n                    style={{\n                      transform: isHovered\n                        ? `translate(${offsetX}px, ${offsetY}px)`\n                        : undefined,\n                    }}\n                    onMouseEnter={() => setHoveredIndex(i)}\n                    onMouseMove={(e) => {\n                      if (showTooltip) {\n                        const rect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        const pct =\n                          total > 0\n                            ? ((d.data.value / total) * 100).toFixed(1)\n                            : '0'\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          <div>\n                            <div className=\"font-medium\">{d.data.label}</div>\n                            <div>\n                              {d.data.value.toLocaleString()} ({pct}%)\n                            </div>\n                          </div>,\n                        )\n                      }\n                    }}\n                    onMouseLeave={() => {\n                      setHoveredIndex(null)\n                      hide()\n                    }}\n                  />\n                )\n              })}\n\n              {/* Percentage labels */}\n              {showLabels &&\n                arcs.map((d, i) => {\n                  const [lx, ly] = labelArc.centroid(d)\n                  const pct =\n                    total > 0\n                      ? ((d.data.value / total) * 100).toFixed(0)\n                      : '0'\n\n                  // Skip tiny slices (< 3%) to avoid label overlap\n                  if (total > 0 && d.data.value / total < 0.03) return null\n\n                  return (\n                    <text\n                      key={`label-${d.data.label}-${i}`}\n                      x={lx}\n                      y={ly}\n                      textAnchor=\"middle\"\n                      dominantBaseline=\"central\"\n                      className=\"pointer-events-none fill-accent-fg text-body-xs font-medium\"\n                    >\n                      {pct}%\n                    </text>\n                  )\n                })}\n\n              {/* Center label for donut variant */}\n              {variant === 'donut' && centerLabel && innerR > 0 && (\n                <foreignObject\n                  x={-innerR * 0.7}\n                  y={-innerR * 0.7}\n                  width={innerR * 1.4}\n                  height={innerR * 1.4}\n                >\n                  <div className=\"flex h-full w-full items-center justify-center text-center text-surface-fg\">\n                    {centerLabel}\n                  </div>\n                </foreignObject>\n              )}\n            </g>\n          </svg>\n\n          {/* Tooltip overlay */}\n          {showTooltip && <ChartTooltip state={tooltip} />}\n        </>\n      )}\n\n      {/* Legend */}\n      {showLegend && (\n        <Legend\n          items={data.map((d, i) => ({\n            label: d.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nPieChart.displayName = 'PieChart'\n"],"mappings":"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"}

package/dist/ui/charts/radar-chart.d.ts

@@ -3,7 +3,11 @@ import * as React from 'react';
 export interface RadarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Data array (one entry per data point / axis) */
     data: Record<string, string | number>[];
-    /** Axis labels (3-8 axes) */
+    /**
+     * Axis labels. Reads best at 3–8; supported up to ~16 — past ~10 labels
+     * auto-switch to radial (rotated) orientation and truncate. For very high
+     * counts a horizontal bar list is clearer than a radar.
+     */
     axes: string[];
     /** Series to plot */
     series: {
@@ -11,6 +15,20 @@ export interface RadarChartProps extends Omit<React.HTMLAttributes<HTMLDivElemen
         label: string;
         color?: string;
     }[];
+    /**
+     * Axis-label orientation. `horizontal` (anchored, best ≤8 axes), `radial`
+     * (rotated along each spoke, best for many axes), or `auto` (radial past 10).
+     * @default 'auto'
+     */
+    labelMode?: 'auto' | 'horizontal' | 'radial';
+    /** Truncate axis labels to N characters (full text stays in the tooltip). Defaults to 16 in radial mode, off otherwise. */
+    maxLabelChars?: number;
+    /** Draw a dashed benchmark/target ring — one value for a uniform target, or one per axis. */
+    target?: number | number[];
+    /** Called when an axis label or vertex is clicked (drill-down into that dimension). */
+    onAxisClick?: (axis: string, index: number) => void;
+    /** Per-axis descriptions (aligned to `axes`). When set, hovering a label shows the description in a tooltip. */
+    axisDescriptions?: string[];
     /** Max value (auto-detect if not set) */
     maxValue?: number;
     /** Number of concentric grid rings (default: 5) */

package/dist/ui/charts/radar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/radar-chart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,qBAAqB;IACrB,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,wFAqStB,CAAA"}
+{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/radar-chart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC;;;;OAIG;IACH,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,qBAAqB;IACrB,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAA;IAC5C,2HAA2H;IAC3H,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,uFAAuF;IACvF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,wFAyXtB,CAAA"}