@devalok/shilp-sutra 0.49.2 → 0.49.4

package/dist/ui/button-processing.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-processing.js","names":[],"sources":["../../src/ui/button-processing.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { durations } from './lib/motion'\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport type ProcessingSpeed = 'ambient' | 'working' | 'urgent'\n\ninterface ProcessingOverlayProps {\n  active: boolean\n  speed: ProcessingSpeed\n  /** Resolved color name — maps to CSS token `--color-{name}-9` */\n  color: string\n}\n\n// ── Color mapping ──────────────────────────────────────────────────\n\n// Use text-level color tokens (step 11) so ants match the button's text color.\n// This ensures visibility on all variants — especially neutral where step-9 is too close to the soft bg.\nconst COLOR_MAP: Record<string, string> = {\n  accent:  'var(--color-accent-11)',\n  error:   'var(--color-error-11)',\n  success: 'var(--color-success-11)',\n  warning: 'var(--color-warning-11)',\n  neutral: 'var(--color-surface-fg)',\n}\n\n// ── Speed → duration (seconds) ─────────────────────────────────────\n\nconst SPEED_SECONDS: Record<ProcessingSpeed, number> = {\n  ambient: 3,\n  working: 2,\n  urgent:  1,\n}\n\n// ── Component ──────────────────────────────────────────────────────\n\n/**\n * Internal overlay component for button processing state.\n * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).\n * Not exported from the barrel — used only by Button.\n */\nexport function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps) {\n  const solidColor = COLOR_MAP[color] ?? COLOR_MAP.accent\n  const prefersReduced = useReducedMotion()\n  const duration = SPEED_SECONDS[speed]\n  const svgRef = React.useRef<SVGRectElement>(null)\n  const [borderRadius, setBorderRadius] = React.useState(8)\n  const [dashInfo, setDashInfo] = React.useState({ array: '8 6', cycle: 14 })\n  // Explicit pixel dimensions of the button — drives BOTH the SVG box and the\n  // rect geometry. Relying on CSS `w-full`/`calc(100% - 2px)` made the ants'\n  // outline depend on the wrapper's rendered size, which can drift from the\n  // button's own size during width transitions — leaving a visible gap\n  // between the button edge and the ants.\n  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null)\n\n  // Read the button's dimensions + border-radius, compute dash pattern\n  React.useEffect(() => {\n    const wrapper = svgRef.current?.closest('span')\n    const btnEl = wrapper?.previousElementSibling as HTMLElement | null\n    if (!btnEl) return\n\n    const measure = () => {\n      const style = getComputedStyle(btnEl)\n      const rawR = parseFloat(style.borderRadius) || 8\n      const btnW = btnEl.offsetWidth\n      const btnH = btnEl.offsetHeight\n      if (btnW === 0 || btnH === 0) return\n      // Inset 1px so the 2px stroke (centered on the edge) lands exactly on\n      // the button's visual border instead of outside it.\n      const w = btnW - 2\n      const h = btnH - 2\n      // Cap radius at half the shorter dimension (pill buttons report 9999px)\n      const r = Math.min(rawR, h / 2, w / 2)\n      setBorderRadius(r)\n      setSize({ w: btnW, h: btnH })\n\n      // Perimeter of a rounded rect:\n      // 4 straight edges + 4 quarter-circle arcs (= one full circle of radius r)\n      const perimeter = 2 * (w - 2 * r) + 2 * (h - 2 * r) + 2 * Math.PI * r\n\n      // Target: 8px dash, 6px gap — adjust gap so dashes fit evenly (no seam)\n      const dashPx = 8\n      const gapPx = 6\n      const approxCycle = dashPx + gapPx\n      const count = Math.round(perimeter / approxCycle)\n      const adjustedGap = (perimeter - count * dashPx) / count\n      const finalGap = Math.max(2, adjustedGap)\n      setDashInfo({ array: `${dashPx} ${finalGap.toFixed(1)}`, cycle: dashPx + finalGap })\n    }\n\n    measure()\n    // Keep the ants glued to the button when it resizes (text change,\n    // async-feedback icon swap, layout animation settling).\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null\n    ro?.observe(btnEl)\n    return () => ro?.disconnect()\n  }, [active])\n\n  // Render the overlay even before the first measurement settles — the\n  // aria-hidden anchor must exist for discoverability, and the SVG harmlessly\n  // renders at 0x0 until measurement lands a real size (one animation frame).\n  const w = size?.w ?? 0\n  const h = size?.h ?? 0\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.span\n          key=\"processing-ants\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.moderate01b }}\n          aria-hidden=\"true\"\n          className=\"absolute top-0 left-0 pointer-events-none\"\n          style={{ width: w, height: h }}\n        >\n          <svg\n            width={w}\n            height={h}\n            style={{ overflow: 'visible', display: 'block' }}\n          >\n            <motion.rect\n              ref={svgRef}\n              x={1}\n              y={1}\n              width={Math.max(0, w - 2)}\n              height={Math.max(0, h - 2)}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"none\"\n              stroke={solidColor}\n              strokeWidth={2}\n              strokeDasharray={dashInfo.array}\n              style={{ transition: 'stroke 0.3s ease' }}\n              animate={prefersReduced ? {} : { strokeDashoffset: [0, -dashInfo.cycle] }}\n              transition={prefersReduced ? {} : {\n                duration,\n                ease: 'linear',\n                repeat: Infinity,\n              }}\n            />\n          </svg>\n        </motion.span>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── Reduced motion hook ────────────────────────────────────────────\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  })\n\n  React.useEffect(() => {\n    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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"}
+{"version":3,"file":"button-processing.js","names":[],"sources":["../../src/ui/button-processing.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { durations } from './lib/motion'\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport type ProcessingSpeed = 'ambient' | 'working' | 'urgent'\n\ninterface ProcessingOverlayProps {\n  active: boolean\n  speed: ProcessingSpeed\n  /** Resolved color name — maps to CSS token `--color-{name}-9` */\n  color: string\n}\n\n// ── Color mapping ──────────────────────────────────────────────────\n\n// Use text-level color tokens (step 11) so ants match the button's text color.\n// This ensures visibility on all variants — especially neutral where step-9 is too close to the soft bg.\nconst COLOR_MAP: Record<string, string> = {\n  accent:  'var(--color-accent-11)',\n  error:   'var(--color-error-11)',\n  success: 'var(--color-success-11)',\n  warning: 'var(--color-warning-11)',\n  neutral: 'var(--color-surface-fg)',\n}\n\n// ── Speed → duration (seconds) ─────────────────────────────────────\n\nconst SPEED_SECONDS: Record<ProcessingSpeed, number> = {\n  ambient: 3,\n  working: 2,\n  urgent:  1,\n}\n\n// ── Component ──────────────────────────────────────────────────────\n\n/**\n * Internal overlay component for button processing state.\n * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).\n * Not exported from the barrel — used only by Button.\n */\nexport function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps) {\n  const solidColor = COLOR_MAP[color] ?? COLOR_MAP.accent\n  const prefersReduced = useReducedMotion()\n  const duration = SPEED_SECONDS[speed]\n  const svgRef = React.useRef<SVGRectElement>(null)\n  const [borderRadius, setBorderRadius] = React.useState(8)\n  const [dashInfo, setDashInfo] = React.useState({ array: '8 6', cycle: 14 })\n  // Explicit pixel dimensions of the button — drives BOTH the SVG box and the\n  // rect geometry. Relying on CSS `w-full`/`calc(100% - 2px)` made the ants'\n  // outline depend on the wrapper's rendered size, which can drift from the\n  // button's own size during width transitions — leaving a visible gap\n  // between the button edge and the ants.\n  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null)\n\n  // Read the button's dimensions + border-radius, compute dash pattern\n  React.useEffect(() => {\n    const wrapper = svgRef.current?.closest('span')\n    const btnEl = wrapper?.previousElementSibling as HTMLElement | null\n    if (!btnEl) return\n\n    const measure = () => {\n      const style = getComputedStyle(btnEl)\n      const rawR = parseFloat(style.borderRadius) || 8\n      const btnW = btnEl.offsetWidth\n      const btnH = btnEl.offsetHeight\n      if (btnW === 0 || btnH === 0) return\n      // Inset 1px so the 2px stroke (centered on the edge) lands exactly on\n      // the button's visual border instead of outside it.\n      const w = btnW - 2\n      const h = btnH - 2\n      // Cap radius at half the shorter dimension (pill buttons report 9999px)\n      const r = Math.min(rawR, h / 2, w / 2)\n      setBorderRadius(r)\n      setSize({ w: btnW, h: btnH })\n\n      // Perimeter of a rounded rect:\n      // 4 straight edges + 4 quarter-circle arcs (= one full circle of radius r)\n      const perimeter = 2 * (w - 2 * r) + 2 * (h - 2 * r) + 2 * Math.PI * r\n\n      // Target: 8px dash, 6px gap — adjust gap so dashes fit evenly (no seam)\n      const dashPx = 8\n      const gapPx = 6\n      const approxCycle = dashPx + gapPx\n      const count = Math.round(perimeter / approxCycle)\n      const adjustedGap = (perimeter - count * dashPx) / count\n      const finalGap = Math.max(2, adjustedGap)\n      setDashInfo({ array: `${dashPx} ${finalGap.toFixed(1)}`, cycle: dashPx + finalGap })\n    }\n\n    measure()\n    // Keep the ants glued to the button when it resizes (text change,\n    // async-feedback icon swap, layout animation settling).\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null\n    ro?.observe(btnEl)\n    return () => ro?.disconnect()\n  }, [active])\n\n  // Render the overlay even before the first measurement settles — the\n  // aria-hidden anchor must exist for discoverability, and the SVG harmlessly\n  // renders at 0x0 until measurement lands a real size (one animation frame).\n  const w = size?.w ?? 0\n  const h = size?.h ?? 0\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.span\n          key=\"processing-ants\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.moderate01b }}\n          aria-hidden=\"true\"\n          className=\"absolute top-0 left-0 pointer-events-none\"\n          style={{ width: w, height: h }}\n        >\n          <svg\n            width={w}\n            height={h}\n            style={{ overflow: 'visible', display: 'block' }}\n          >\n            <motion.rect\n              ref={svgRef}\n              x={1}\n              y={1}\n              width={Math.max(0, w - 2)}\n              height={Math.max(0, h - 2)}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"none\"\n              stroke={solidColor}\n              strokeWidth={2}\n              strokeDasharray={dashInfo.array}\n              style={{ transition: 'stroke 0.3s ease' }}\n              animate={prefersReduced ? {} : { strokeDashoffset: [0, -dashInfo.cycle] }}\n              transition={prefersReduced ? {} : {\n                duration,\n                ease: 'linear',\n                repeat: Infinity,\n              }}\n            />\n          </svg>\n        </motion.span>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── Reduced motion hook ────────────────────────────────────────────\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  })\n\n  React.useEffect(() => {\n    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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"}

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

package/dist/ui/card.js

@@ -122,7 +122,7 @@ var _ = {
 	...i
 }));
 v.displayName = "CardAction";
-var y = new Set([
+var y = /* @__PURE__ */ new Set([
 	"p",
 	"span",
 	"h1",

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-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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"}

package/dist/ui/charts/_internal/axes.d.ts

@@ -1,5 +1,6 @@
 "use client";
 import { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
+import * as React from 'react';
 export type AnyScale = ScaleLinear<number, number> | ScaleBand<string> | ScalePoint<string> | ScaleTime<number, number>;
 interface AxisProps {
     scale: AnyScale;
@@ -10,7 +11,7 @@ interface AxisProps {
     label?: string;
     className?: string;
 }
-export declare function Axis({ scale, orientation, transform, tickCount, tickFormat, label, className, }: AxisProps): import("react/jsx-runtime").JSX.Element;
+export declare function Axis({ scale, orientation, transform, tickCount, tickFormat, label, className, }: AxisProps): React.JSX.Element;
 export declare namespace Axis {
     var displayName: string;
 }

package/dist/ui/charts/_internal/axes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/axes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAK7E,MAAM,MAAM,QAAQ,GAChB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,GACjB,UAAU,CAAC,MAAM,CAAC,GAClB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7B,UAAU,SAAS;IACjB,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,SAAS,2CAoDX;yBA5De,IAAI"}
+{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/axes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,QAAQ,GAChB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,GACjB,UAAU,CAAC,MAAM,CAAC,GAClB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7B,UAAU,SAAS;IACjB,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,SAAS,qBAoDX;yBA5De,IAAI"}

package/dist/ui/charts/_internal/grid-lines.d.ts

@@ -1,5 +1,6 @@
 "use client";
 import { ScaleLinear, ScaleTime } from 'd3-scale';
+import * as React from 'react';
 type TickableScale = ScaleLinear<number, number> | ScaleTime<number, number>;
 interface GridLinesProps {
     width: number;
@@ -9,7 +10,7 @@ interface GridLinesProps {
     horizontal?: boolean;
     vertical?: boolean;
 }
-export declare function GridLines({ width, height, xScale, yScale, horizontal, vertical, }: GridLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare function GridLines({ width, height, xScale, yScale, horizontal, vertical, }: GridLinesProps): React.JSX.Element;
 export declare namespace GridLines {
     var displayName: string;
 }

package/dist/ui/charts/_internal/grid-lines.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-lines.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/grid-lines.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGtD,KAAK,aAAa,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE5E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,2CAiChB;yBAxCe,SAAS"}
+{"version":3,"file":"grid-lines.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/grid-lines.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,aAAa,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE5E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,qBAiChB;yBAxCe,SAAS"}

package/dist/ui/charts/_internal/legend.d.ts

@@ -1,4 +1,5 @@
 "use client";
+import * as React from 'react';
 interface LegendItem {
     label: string;
     color: string;
@@ -8,7 +9,7 @@ interface LegendProps {
     position?: 'top' | 'bottom' | 'left' | 'right';
     className?: string;
 }
-export declare function Legend({ items, position, className }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export declare function Legend({ items, position, className }: LegendProps): React.JSX.Element;
 export declare namespace Legend {
     var displayName: string;
 }

package/dist/ui/charts/_internal/legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/legend.tsx"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAmB,EAAE,SAAS,EAAE,EAAE,WAAW,2CAsB5E;yBAtBe,MAAM;;;AAyBtB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/legend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAmB,EAAE,SAAS,EAAE,EAAE,WAAW,qBAsB5E;yBAtBe,MAAM;;;AAyBtB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/charts/_internal/tooltip.d.ts

@@ -10,7 +10,7 @@ interface ChartTooltipProps {
     state: TooltipState;
     className?: string;
 }
-export declare function ChartTooltip({ state, className }: ChartTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChartTooltip({ state, className }: ChartTooltipProps): React.JSX.Element | null;
 export declare namespace ChartTooltip {
     var displayName: string;
 }

package/dist/ui/charts/_internal/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,YAAY;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB,kDAkBnE;yBAlBe,YAAY;;;AAqB5B,yCAAyC;AACzC,wBAAgB,eAAe;;cAQA,MAAM,KAAK,MAAM,WAAW,KAAK,CAAC,SAAS;;EASzE;AAED,YAAY,EAAE,iBAAiB,EAAC,YAAY,EAAE,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,YAAY;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB,4BAkBnE;yBAlBe,YAAY;;;AAqB5B,yCAAyC;AACzC,wBAAgB,eAAe;;cAQA,MAAM,KAAK,MAAM,WAAW,KAAK,CAAC,SAAS;;EASzE;AAED,YAAY,EAAE,iBAAiB,EAAC,YAAY,EAAE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"area-chart.js","names":[],"sources":["../../../src/ui/charts/area-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { ScaleLinear, ScalePoint } from 'd3-scale'\nimport { scaleLinear, scalePoint } from 'd3-scale'\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  line,\n  stack,\n  stackOffsetNone,\n  stackOrderNone,\n} 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 { useReducedMotion } from './_internal/animation'\nimport { type AnyScale,Axis } from './_internal/axes'\nimport { resolveColor } from './_internal/colors'\nimport { GridLines } from './_internal/grid-lines'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\nimport type { DataPoint, Series } from './_internal/types'\nimport { ChartContainer } from './chart-container'\n\nexport interface AreaChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data array */\n  data: DataPoint[]\n  /** Key for x-axis */\n  xKey: string\n  /** Series definitions — each becomes an area */\n  series: Series[]\n  /** Use curved (monotone) interpolation */\n  curved?: boolean\n  /** Stack areas on top of each other */\n  stacked?: boolean\n  /** Fill opacity for area shapes */\n  fillOpacity?: number\n  /** Use vertical gradient fill */\n  gradient?: boolean\n  /** Stroke width for area outline */\n  strokeWidth?: number\n  /** Chart height */\n  height?: number\n  /** Show grid lines */\n  showGrid?: boolean\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Animate on mount */\n  animate?: boolean\n  /** X-axis label */\n  xLabel?: string\n  /** Y-axis label */\n  yLabel?: string\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\n/** Type for rows fed to d3 stack — all numeric except the xKey */\ninterface StackableRow {\n  [key: string]: number | string\n}\n\nexport const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      data,\n      xKey,\n      series,\n      curved = false,\n      stacked = false,\n      fillOpacity = 0.3,\n      gradient = false,\n      strokeWidth = 2,\n      height = 300,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      xLabel,\n      yLabel,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  // Resolve colors for each series\n  const colors = series.map((s, i) => resolveColor(s.color, i))\n\n  // Stable unique ID for gradient definitions\n  const chartId = React.useId()\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      <ChartContainer height={height} ariaLabel={ariaLabel ?? 'Area chart'}>\n        {({ width, height: innerHeight, margin }) => {\n          void margin\n\n          // Determine if x-axis data is numeric or categorical\n          const xValues = data.map((d) => d[xKey])\n          const isNumericX = xValues.every((v) => typeof v === 'number')\n\n          // Build x scale and accessor\n          let xAxisScale: ScaleLinear<number, number> | ScalePoint<string>\n          let getX: (d: DataPoint) => number\n          let getXByIndex: (i: number) => number\n\n          if (isNumericX) {\n            const numericValues = xValues as number[]\n            const xMin = Math.min(...numericValues)\n            const xMax = Math.max(...numericValues)\n            const linearX = scaleLinear<number, number>()\n              .domain([xMin, xMax])\n              .range([0, width])\n            xAxisScale = linearX\n            getX = (d: DataPoint) => linearX(Number(d[xKey]))\n            getXByIndex = (i: number) => linearX(Number(data[i][xKey]))\n          } else {\n            const categories = xValues.map(String)\n            const pointX = scalePoint<string>()\n              .domain(categories)\n              .range([0, width])\n              .padding(0.5)\n            xAxisScale = pointX\n            getX = (d: DataPoint) => pointX(String(d[xKey])) ?? 0\n            getXByIndex = (i: number) => pointX(String(data[i][xKey])) ?? 0\n          }\n\n          // Build y scale\n          let yMax: number\n          if (stacked) {\n            yMax = Math.max(\n              ...data.map((d) =>\n                series.reduce((sum, s) => sum + (Number(d[s.key]) || 0), 0),\n              ),\n            )\n          } else {\n            yMax = Math.max(\n              ...data.flatMap((d) =>\n                series.map((s) => Number(d[s.key]) || 0),\n              ),\n            )\n          }\n\n          const yScale = scaleLinear<number, number>()\n            .domain([0, yMax * 1.1])\n            .range([innerHeight, 0])\n            .nice()\n\n          const curveType = curved ? curveMonotoneX : curveLinear\n\n          // Shared tooltip render function\n          const renderTooltipZones = () =>\n            data.map((d, i) => {\n              const cx = getX(d)\n              const sliceWidth = width / Math.max(data.length - 1, 1)\n              return (\n                <rect\n                  key={`hover-${i}`}\n                  x={cx - sliceWidth / 2}\n                  y={0}\n                  width={sliceWidth}\n                  height={innerHeight}\n                  fill=\"transparent\"\n                  onMouseMove={(e) => {\n                    const rect = e.currentTarget\n                      .closest('div')\n                      ?.getBoundingClientRect()\n                    show(\n                      e.clientX - (rect?.left ?? 0),\n                      e.clientY - (rect?.top ?? 0),\n                      <div>\n                        <div className=\"font-medium\">\n                          {String(d[xKey])}\n                        </div>\n                        {series.map((s, sIdx) => (\n                          <div\n                            key={s.key}\n                            className=\"flex items-center gap-ds-02\"\n                          >\n                            <span\n                              className=\"inline-block h-2 w-2 rounded-pill\"\n                              style={{ backgroundColor: colors[sIdx] }}\n                            />\n                            <span className=\"text-surface-fg-muted\">\n                              {s.label}:\n                            </span>{' '}\n                            {Number(d[s.key]).toLocaleString()}\n                          </div>\n                        ))}\n                      </div>,\n                    )\n                  }}\n                  onMouseLeave={hide}\n                />\n              )\n            })\n\n          // Shared gradient definitions\n          const renderGradientDefs = () =>\n            gradient ? (\n              <defs>\n                {series.map((_, sIdx) => (\n                  <linearGradient\n                    key={`grad-${sIdx}`}\n                    id={`${chartId}-gradient-${sIdx}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"0%\"\n                      stopColor={colors[sIdx]}\n                      stopOpacity={fillOpacity}\n                    />\n                    <stop\n                      offset=\"100%\"\n                      stopColor={colors[sIdx]}\n                      stopOpacity={0.05}\n                    />\n                  </linearGradient>\n                ))}\n              </defs>\n            ) : null\n\n          // Shared axes\n          const renderAxes = () => (\n            <>\n              <Axis\n                scale={xAxisScale as AnyScale}\n                orientation=\"bottom\"\n                transform={`translate(0,${innerHeight})`}\n                label={xLabel}\n              />\n              <Axis scale={yScale} orientation=\"left\" label={yLabel} />\n            </>\n          )\n\n          // Stacked layout\n          if (stacked) {\n            const seriesKeys = series.map((s) => s.key)\n            const stackGen = stack<StackableRow>()\n              .keys(seriesKeys)\n              .order(stackOrderNone)\n              .offset(stackOffsetNone)\n\n            // Coerce data to StackableRow (numeric values for series keys)\n            const numericData: StackableRow[] = data.map((d) => {\n              const row: StackableRow = { [xKey]: String(d[xKey]) }\n              for (const s of series) {\n                row[s.key] = Number(d[s.key]) || 0\n              }\n              return row\n            })\n\n            const stackedData = stackGen(numericData)\n\n            const areaGen = area<[number, number]>()\n              .curve(curveType)\n              .x((_, i) => getXByIndex(i))\n              .y0((d) => yScale(d[0]))\n              .y1((d) => yScale(d[1]))\n\n            const lineGen = line<[number, number]>()\n              .curve(curveType)\n              .x((_, i) => getXByIndex(i))\n              .y((d) => yScale(d[1]))\n\n            return (\n              <>\n                {renderGradientDefs()}\n\n                {/* Grid */}\n                {showGrid && (\n                  <GridLines\n                    width={width}\n                    height={innerHeight}\n                    yScale={yScale}\n                    horizontal\n                  />\n                )}\n\n                {/* Stacked areas (render in reverse so first series is on top) */}\n                {[...stackedData].reverse().map((layer, reversedIdx) => {\n                  const seriesIdx = stackedData.length - 1 - reversedIdx\n                  const layerData = layer as unknown as [number, number][]\n                  const areaD = areaGen(layerData) ?? ''\n                  const lineD = lineGen(layerData) ?? ''\n                  const fillColor = gradient\n                    ? `url(#${chartId}-gradient-${seriesIdx})`\n                    : colors[seriesIdx]\n\n                  return (\n                    <g key={series[seriesIdx].key}>\n                      <path\n                        d={areaD}\n                        fill={fillColor}\n                        opacity={gradient ? 1 : fillOpacity}\n                      />\n                      <path\n                        d={lineD}\n                        fill=\"none\"\n                        stroke={colors[seriesIdx]}\n                        strokeWidth={strokeWidth}\n                        strokeLinejoin=\"round\"\n                        strokeLinecap=\"round\"\n                      />\n                    </g>\n                  )\n                })}\n\n                {/* Tooltip hover zones */}\n                {showTooltip && renderTooltipZones()}\n\n                {renderAxes()}\n              </>\n            )\n          }\n\n          // Non-stacked areas\n          const areaGen = area<DataPoint>()\n            .curve(curveType)\n            .defined((d) => d !== undefined && d !== null)\n\n          const lineGen = line<DataPoint>()\n            .curve(curveType)\n            .defined((d) => d !== undefined && d !== null)\n\n          return (\n            <>\n              {renderGradientDefs()}\n\n              {/* Grid */}\n              {showGrid && (\n                <GridLines\n                  width={width}\n                  height={innerHeight}\n                  yScale={yScale}\n                  horizontal\n                />\n              )}\n\n              {/* Areas (render in reverse so first series is visually on top) */}\n              {[...series].reverse().map((s, reversedIdx) => {\n                const seriesIdx = series.length - 1 - reversedIdx\n\n                const areaPath = areaGen\n                  .x((d) => getX(d))\n                  .y0(innerHeight)\n                  .y1((d) => yScale(Number(d[s.key]) || 0))\n\n                const linePath = lineGen\n                  .x((d) => getX(d))\n                  .y((d) => yScale(Number(d[s.key]) || 0))\n\n                const areaD = areaPath(data) ?? ''\n                const lineD = linePath(data) ?? ''\n\n                const fillColor = gradient\n                  ? `url(#${chartId}-gradient-${seriesIdx})`\n                  : colors[seriesIdx]\n\n                return (\n                  <g key={s.key}>\n                    <path\n                      d={areaD}\n                      fill={fillColor}\n                      opacity={gradient ? 1 : fillOpacity}\n                    />\n                    <path\n                      d={lineD}\n                      fill=\"none\"\n                      stroke={colors[seriesIdx]}\n                      strokeWidth={strokeWidth}\n                      strokeLinejoin=\"round\"\n                      strokeLinecap=\"round\"\n                    />\n                  </g>\n                )\n              })}\n\n              {/* Tooltip hover zones */}\n              {showTooltip && renderTooltipZones()}\n\n              {renderAxes()}\n            </>\n          )\n        }}\n      </ChartContainer>\n\n      {/* Tooltip overlay */}\n      {showTooltip && <ChartTooltip state={tooltip} />}\n\n      {/* Legend */}\n      {showLegend && series.length > 1 && (\n        <Legend\n          items={series.map((s, i) => ({\n            label: s.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nAreaChart.displayName = 'AreaChart'\n"],"mappings":";;;;;;;;;;;;;AAoEA,IAAa,IAAY,EAAM,YAE3B,EACE,SACA,SACA,WACA,YAAS,IACT,aAAU,IACV,iBAAc,IACd,cAAW,IACX,iBAAc,GACd,YAAS,KACT,cAAW,IACX,iBAAc,IACd,gBAAa,IACb,aAAU,IACV,WACA,WACA,cACA,cACA,GAAG,KAEL,MACG;CACL,IAAM,EAAE,YAAS,SAAM,YAAS,GAAiB,EAC3C,IAAgB,GAAkB,EAClC,IAAgB,KAAW,CAAC,GAG5B,IAAS,EAAO,KAAK,GAAG,MAAM,EAAa,EAAE,OAAO,EAAE,CAAC,EAGvD,IAAU,EAAM,OAAO;AAE7B,QACE,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,YAAY,EAAU;EACpC,GAAK,IACD;GAAE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GAAE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GAAE,YAAY,EAAO;GAAM,GACpG,EAAE;EACN,GAAI,EAAY,EAAM;YANxB;GAQE,kBAAC,GAAD;IAAwB;IAAQ,WAAW,KAAa;eACpD,EAAE,UAAO,QAAQ,GAAa,gBAAa;KAI3C,IAAM,IAAU,EAAK,KAAK,MAAM,EAAE,GAAM,EAClC,IAAa,EAAQ,OAAO,MAAM,OAAO,KAAM,SAAS,EAG1D,GACA,GACA;AAEJ,SAAI,GAAY;MACd,IAAM,IAAgB,GAChB,IAAO,KAAK,IAAI,GAAG,EAAc,EACjC,IAAO,KAAK,IAAI,GAAG,EAAc,EACjC,IAAU,GAA6B,CAC1C,OAAO,CAAC,GAAM,EAAK,CAAC,CACpB,MAAM,CAAC,GAAG,EAAM,CAAC;AAGpB,MAFA,IAAa,GACb,KAAQ,MAAiB,EAAQ,OAAO,EAAE,GAAM,CAAC,EACjD,KAAe,MAAc,EAAQ,OAAO,EAAK,GAAG,GAAM,CAAC;YACtD;MACL,IAAM,IAAa,EAAQ,IAAI,OAAO,EAChC,IAAS,GAAoB,CAChC,OAAO,EAAW,CAClB,MAAM,CAAC,GAAG,EAAM,CAAC,CACjB,QAAQ,GAAI;AAGf,MAFA,IAAa,GACb,KAAQ,MAAiB,EAAO,OAAO,EAAE,GAAM,CAAC,IAAI,GACpD,KAAe,MAAc,EAAO,OAAO,EAAK,GAAG,GAAM,CAAC,IAAI;;KAIhE,IAAI;AACJ,KAOE,IANO,KAAK,IADd,GAAI,IAEG,EAAK,KAAK,MACX,EAAO,QAAQ,GAAK,MAAM,KAAO,OAAO,EAAE,EAAE,KAAK,IAAI,IAAI,EAAE,CAC5D,GAIE,EAAK,SAAS,MACf,EAAO,KAAK,MAAM,OAAO,EAAE,EAAE,KAAK,IAAI,EAAE,CACzC,CACF;KAGH,IAAM,IAAS,GAA6B,CACzC,OAAO,CAAC,GAAG,IAAO,IAAI,CAAC,CACvB,MAAM,CAAC,GAAa,EAAE,CAAC,CACvB,MAAM,EAEH,IAAY,IAAS,IAAiB,GAGtC,UACJ,EAAK,KAAK,GAAG,MAAM;MACjB,IAAM,IAAK,EAAK,EAAE,EACZ,IAAa,IAAQ,KAAK,IAAI,EAAK,SAAS,GAAG,EAAE;AACvD,aACE,kBAAC,QAAD;OAEE,GAAG,IAAK,IAAa;OACrB,GAAG;OACH,OAAO;OACP,QAAQ;OACR,MAAK;OACL,cAAc,MAAM;QAClB,IAAM,IAAO,EAAE,cACZ,QAAQ,MAAM,EACb,uBAAuB;AAC3B,UACE,EAAE,WAAW,GAAM,QAAQ,IAC3B,EAAE,WAAW,GAAM,OAAO,IAC1B,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;SAAK,WAAU;mBACZ,OAAO,EAAE,GAAM;SACZ,CAAA,EACL,EAAO,KAAK,GAAG,MACd,kBAAC,OAAD;SAEE,WAAU;mBAFZ;UAIE,kBAAC,QAAD;WACE,WAAU;WACV,OAAO,EAAE,iBAAiB,EAAO,IAAO;WACxC,CAAA;UACF,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CACG,EAAE,OAAM,IACJ;;UAAC;UACP,OAAO,EAAE,EAAE,KAAK,CAAC,gBAAgB;UAC9B;WAXC,EAAE,IAWH,CACN,CACE,EAAA,CAAA,CACP;;OAEH,cAAc;OACd,EApCK,SAAS,IAoCd;OAEJ,EAGE,UACJ,IACE,kBAAC,QAAD,EAAA,UACG,EAAO,KAAK,GAAG,MACd,kBAAC,kBAAD;MAEE,IAAI,GAAG,EAAQ,YAAY;MAC3B,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;gBANL,CAQE,kBAAC,QAAD;OACE,QAAO;OACP,WAAW,EAAO;OAClB,aAAa;OACb,CAAA,EACF,kBAAC,QAAD;OACE,QAAO;OACP,WAAW,EAAO;OAClB,aAAa;OACb,CAAA,CACa;QAjBV,QAAQ,IAiBE,CACjB,EACG,CAAA,GACL,MAGA,UACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,OAAO;MACP,aAAY;MACZ,WAAW,eAAe,EAAY;MACtC,OAAO;MACP,CAAA,EACF,kBAAC,GAAD;MAAM,OAAO;MAAQ,aAAY;MAAO,OAAO;MAAU,CAAA,CACxD,EAAA,CAAA;AAIL,SAAI,GAAS;MACX,IAAM,IAAa,EAAO,KAAK,MAAM,EAAE,IAAI,EAerC,IAdW,GAAqB,CACnC,KAAK,EAAW,CAChB,MAAM,EAAe,CACrB,OAAO,EAAgB,CAGU,EAAK,KAAK,MAAM;OAClD,IAAM,IAAoB,GAAG,IAAO,OAAO,EAAE,GAAM,EAAE;AACrD,YAAK,IAAM,KAAK,EACd,GAAI,EAAE,OAAO,OAAO,EAAE,EAAE,KAAK,IAAI;AAEnC,cAAO;QACP,CAEuC,EAEnC,IAAU,GAAwB,CACrC,MAAM,EAAU,CAChB,GAAG,GAAG,MAAM,EAAY,EAAE,CAAC,CAC3B,IAAI,MAAM,EAAO,EAAE,GAAG,CAAC,CACvB,IAAI,MAAM,EAAO,EAAE,GAAG,CAAC,EAEpB,IAAU,GAAwB,CACrC,MAAM,EAAU,CAChB,GAAG,GAAG,MAAM,EAAY,EAAE,CAAC,CAC3B,GAAG,MAAM,EAAO,EAAE,GAAG,CAAC;AAEzB,aACE,kBAAA,GAAA,EAAA,UAAA;OACG,GAAoB;OAGpB,KACC,kBAAC,GAAD;QACS;QACP,QAAQ;QACA;QACR,YAAA;QACA,CAAA;OAIH,CAAC,GAAG,EAAY,CAAC,SAAS,CAAC,KAAK,GAAO,MAAgB;QACtD,IAAM,IAAY,EAAY,SAAS,IAAI,GACrC,IAAY,GACZ,IAAQ,EAAQ,EAAU,IAAI,IAC9B,IAAQ,EAAQ,EAAU,IAAI;AAKpC,eACE,kBAAC,KAAD,EAAA,UAAA,CACE,kBAAC,QAAD;SACE,GAAG;SACH,MARY,IACd,QAAQ,EAAQ,YAAY,EAAU,KACtC,EAAO;SAOL,SAAS,IAAW,IAAI;SACxB,CAAA,EACF,kBAAC,QAAD;SACE,GAAG;SACH,MAAK;SACL,QAAQ,EAAO;SACF;SACb,gBAAe;SACf,eAAc;SACd,CAAA,CACA,EAAA,EAdI,EAAO,GAAW,IActB;SAEN;OAGD,KAAe,GAAoB;OAEnC,GAAY;OACZ,EAAA,CAAA;;KAKP,IAAM,IAAU,GAAiB,CAC9B,MAAM,EAAU,CAChB,SAAS,MAAM,KAAyB,KAAK,EAE1C,IAAU,GAAiB,CAC9B,MAAM,EAAU,CAChB,SAAS,MAAM,KAAyB,KAAK;AAEhD,YACE,kBAAA,GAAA,EAAA,UAAA;MACG,GAAoB;MAGpB,KACC,kBAAC,GAAD;OACS;OACP,QAAQ;OACA;OACR,YAAA;OACA,CAAA;MAIH,CAAC,GAAG,EAAO,CAAC,SAAS,CAAC,KAAK,GAAG,MAAgB;OAC7C,IAAM,IAAY,EAAO,SAAS,IAAI,GAEhC,IAAW,EACd,GAAG,MAAM,EAAK,EAAE,CAAC,CACjB,GAAG,EAAY,CACf,IAAI,MAAM,EAAO,OAAO,EAAE,EAAE,KAAK,IAAI,EAAE,CAAC,EAErC,IAAW,EACd,GAAG,MAAM,EAAK,EAAE,CAAC,CACjB,GAAG,MAAM,EAAO,OAAO,EAAE,EAAE,KAAK,IAAI,EAAE,CAAC,EAEpC,IAAQ,EAAS,EAAK,IAAI,IAC1B,IAAQ,EAAS,EAAK,IAAI;AAMhC,cACE,kBAAC,KAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QACE,GAAG;QACH,MARY,IACd,QAAQ,EAAQ,YAAY,EAAU,KACtC,EAAO;QAOL,SAAS,IAAW,IAAI;QACxB,CAAA,EACF,kBAAC,QAAD;QACE,GAAG;QACH,MAAK;QACL,QAAQ,EAAO;QACF;QACb,gBAAe;QACf,eAAc;QACd,CAAA,CACA,EAAA,EAdI,EAAE,IAcN;QAEN;MAGD,KAAe,GAAoB;MAEnC,GAAY;MACZ,EAAA,CAAA;;IAGQ,CAAA;GAGhB,KAAe,kBAAC,GAAD,EAAc,OAAO,GAAW,CAAA;GAG/C,KAAc,EAAO,SAAS,KAC7B,kBAAC,GAAD;IACE,OAAO,EAAO,KAAK,GAAG,OAAO;KAC3B,OAAO,EAAE;KACT,OAAO,EAAO;KACf,EAAE;IACH,WAAU;IACV,CAAA;GAEO;;EAGhB;AACD,EAAU,cAAc"}
+{"version":3,"file":"area-chart.js","names":[],"sources":["../../../src/ui/charts/area-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { ScaleLinear, ScalePoint } from 'd3-scale'\nimport { scaleLinear, scalePoint } from 'd3-scale'\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  line,\n  stack,\n  stackOffsetNone,\n  stackOrderNone,\n} 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 { useReducedMotion } from './_internal/animation'\nimport { type AnyScale,Axis } from './_internal/axes'\nimport { resolveColor } from './_internal/colors'\nimport { GridLines } from './_internal/grid-lines'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\nimport type { DataPoint, Series } from './_internal/types'\nimport { ChartContainer } from './chart-container'\n\nexport interface AreaChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data array */\n  data: DataPoint[]\n  /** Key for x-axis */\n  xKey: string\n  /** Series definitions — each becomes an area */\n  series: Series[]\n  /** Use curved (monotone) interpolation */\n  curved?: boolean\n  /** Stack areas on top of each other */\n  stacked?: boolean\n  /** Fill opacity for area shapes */\n  fillOpacity?: number\n  /** Use vertical gradient fill */\n  gradient?: boolean\n  /** Stroke width for area outline */\n  strokeWidth?: number\n  /** Chart height */\n  height?: number\n  /** Show grid lines */\n  showGrid?: boolean\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Animate on mount */\n  animate?: boolean\n  /** X-axis label */\n  xLabel?: string\n  /** Y-axis label */\n  yLabel?: string\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\n/** Type for rows fed to d3 stack — all numeric except the xKey */\ninterface StackableRow {\n  [key: string]: number | string\n}\n\nexport const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      data,\n      xKey,\n      series,\n      curved = false,\n      stacked = false,\n      fillOpacity = 0.3,\n      gradient = false,\n      strokeWidth = 2,\n      height = 300,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      xLabel,\n      yLabel,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  // Resolve colors for each series\n  const colors = series.map((s, i) => resolveColor(s.color, i))\n\n  // Stable unique ID for gradient definitions\n  const chartId = React.useId()\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      <ChartContainer height={height} ariaLabel={ariaLabel ?? 'Area chart'}>\n        {({ width, height: innerHeight, margin }) => {\n          void margin\n\n          // Determine if x-axis data is numeric or categorical\n          const xValues = data.map((d) => d[xKey])\n          const isNumericX = xValues.every((v) => typeof v === 'number')\n\n          // Build x scale and accessor\n          let xAxisScale: ScaleLinear<number, number> | ScalePoint<string>\n          let getX: (d: DataPoint) => number\n          let getXByIndex: (i: number) => number\n\n          if (isNumericX) {\n            const numericValues = xValues as number[]\n            const xMin = Math.min(...numericValues)\n            const xMax = Math.max(...numericValues)\n            const linearX = scaleLinear<number, number>()\n              .domain([xMin, xMax])\n              .range([0, width])\n            xAxisScale = linearX\n            getX = (d: DataPoint) => linearX(Number(d[xKey]))\n            getXByIndex = (i: number) => linearX(Number(data[i][xKey]))\n          } else {\n            const categories = xValues.map(String)\n            const pointX = scalePoint<string>()\n              .domain(categories)\n              .range([0, width])\n              .padding(0.5)\n            xAxisScale = pointX\n            getX = (d: DataPoint) => pointX(String(d[xKey])) ?? 0\n            getXByIndex = (i: number) => pointX(String(data[i][xKey])) ?? 0\n          }\n\n          // Build y scale\n          let yMax: number\n          if (stacked) {\n            yMax = Math.max(\n              ...data.map((d) =>\n                series.reduce((sum, s) => sum + (Number(d[s.key]) || 0), 0),\n              ),\n            )\n          } else {\n            yMax = Math.max(\n              ...data.flatMap((d) =>\n                series.map((s) => Number(d[s.key]) || 0),\n              ),\n            )\n          }\n\n          const yScale = scaleLinear<number, number>()\n            .domain([0, yMax * 1.1])\n            .range([innerHeight, 0])\n            .nice()\n\n          const curveType = curved ? curveMonotoneX : curveLinear\n\n          // Shared tooltip render function\n          const renderTooltipZones = () =>\n            data.map((d, i) => {\n              const cx = getX(d)\n              const sliceWidth = width / Math.max(data.length - 1, 1)\n              return (\n                <rect\n                  key={`hover-${i}`}\n                  x={cx - sliceWidth / 2}\n                  y={0}\n                  width={sliceWidth}\n                  height={innerHeight}\n                  fill=\"transparent\"\n                  onMouseMove={(e) => {\n                    const rect = e.currentTarget\n                      .closest('div')\n                      ?.getBoundingClientRect()\n                    show(\n                      e.clientX - (rect?.left ?? 0),\n                      e.clientY - (rect?.top ?? 0),\n                      <div>\n                        <div className=\"font-medium\">\n                          {String(d[xKey])}\n                        </div>\n                        {series.map((s, sIdx) => (\n                          <div\n                            key={s.key}\n                            className=\"flex items-center gap-ds-02\"\n                          >\n                            <span\n                              className=\"inline-block h-2 w-2 rounded-pill\"\n                              style={{ backgroundColor: colors[sIdx] }}\n                            />\n                            <span className=\"text-surface-fg-muted\">\n                              {s.label}:\n                            </span>{' '}\n                            {Number(d[s.key]).toLocaleString()}\n                          </div>\n                        ))}\n                      </div>,\n                    )\n                  }}\n                  onMouseLeave={hide}\n                />\n              )\n            })\n\n          // Shared gradient definitions\n          const renderGradientDefs = () =>\n            gradient ? (\n              <defs>\n                {series.map((_, sIdx) => (\n                  <linearGradient\n                    key={`grad-${sIdx}`}\n                    id={`${chartId}-gradient-${sIdx}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"0%\"\n                      stopColor={colors[sIdx]}\n                      stopOpacity={fillOpacity}\n                    />\n                    <stop\n                      offset=\"100%\"\n                      stopColor={colors[sIdx]}\n                      stopOpacity={0.05}\n                    />\n                  </linearGradient>\n                ))}\n              </defs>\n            ) : null\n\n          // Shared axes\n          const renderAxes = () => (\n            <>\n              <Axis\n                scale={xAxisScale as AnyScale}\n                orientation=\"bottom\"\n                transform={`translate(0,${innerHeight})`}\n                label={xLabel}\n              />\n              <Axis scale={yScale} orientation=\"left\" label={yLabel} />\n            </>\n          )\n\n          // Stacked layout\n          if (stacked) {\n            const seriesKeys = series.map((s) => s.key)\n            const stackGen = stack<StackableRow>()\n              .keys(seriesKeys)\n              .order(stackOrderNone)\n              .offset(stackOffsetNone)\n\n            // Coerce data to StackableRow (numeric values for series keys)\n            const numericData: StackableRow[] = data.map((d) => {\n              const row: StackableRow = { [xKey]: String(d[xKey]) }\n              for (const s of series) {\n                row[s.key] = Number(d[s.key]) || 0\n              }\n              return row\n            })\n\n            const stackedData = stackGen(numericData)\n\n            const areaGen = area<[number, number]>()\n              .curve(curveType)\n              .x((_, i) => getXByIndex(i))\n              .y0((d) => yScale(d[0]))\n              .y1((d) => yScale(d[1]))\n\n            const lineGen = line<[number, number]>()\n              .curve(curveType)\n              .x((_, i) => getXByIndex(i))\n              .y((d) => yScale(d[1]))\n\n            return (\n              <>\n                {renderGradientDefs()}\n\n                {/* Grid */}\n                {showGrid && (\n                  <GridLines\n                    width={width}\n                    height={innerHeight}\n                    yScale={yScale}\n                    horizontal\n                  />\n                )}\n\n                {/* Stacked areas (render in reverse so first series is on top) */}\n                {[...stackedData].reverse().map((layer, reversedIdx) => {\n                  const seriesIdx = stackedData.length - 1 - reversedIdx\n                  const layerData = layer as unknown as [number, number][]\n                  const areaD = areaGen(layerData) ?? ''\n                  const lineD = lineGen(layerData) ?? ''\n                  const fillColor = gradient\n                    ? `url(#${chartId}-gradient-${seriesIdx})`\n                    : colors[seriesIdx]\n\n                  return (\n                    <g key={series[seriesIdx].key}>\n                      <path\n                        d={areaD}\n                        fill={fillColor}\n                        opacity={gradient ? 1 : fillOpacity}\n                      />\n                      <path\n                        d={lineD}\n                        fill=\"none\"\n                        stroke={colors[seriesIdx]}\n                        strokeWidth={strokeWidth}\n                        strokeLinejoin=\"round\"\n                        strokeLinecap=\"round\"\n                      />\n                    </g>\n                  )\n                })}\n\n                {/* Tooltip hover zones */}\n                {showTooltip && renderTooltipZones()}\n\n                {renderAxes()}\n              </>\n            )\n          }\n\n          // Non-stacked areas\n          const areaGen = area<DataPoint>()\n            .curve(curveType)\n            .defined((d) => d !== undefined && d !== null)\n\n          const lineGen = line<DataPoint>()\n            .curve(curveType)\n            .defined((d) => d !== undefined && d !== null)\n\n          return (\n            <>\n              {renderGradientDefs()}\n\n              {/* Grid */}\n              {showGrid && (\n                <GridLines\n                  width={width}\n                  height={innerHeight}\n                  yScale={yScale}\n                  horizontal\n                />\n              )}\n\n              {/* Areas (render in reverse so first series is visually on top) */}\n              {[...series].reverse().map((s, reversedIdx) => {\n                const seriesIdx = series.length - 1 - reversedIdx\n\n                const areaPath = areaGen\n                  .x((d) => getX(d))\n                  .y0(innerHeight)\n                  .y1((d) => yScale(Number(d[s.key]) || 0))\n\n                const linePath = lineGen\n                  .x((d) => getX(d))\n                  .y((d) => yScale(Number(d[s.key]) || 0))\n\n                const areaD = areaPath(data) ?? ''\n                const lineD = linePath(data) ?? ''\n\n                const fillColor = gradient\n                  ? `url(#${chartId}-gradient-${seriesIdx})`\n                  : colors[seriesIdx]\n\n                return (\n                  <g key={s.key}>\n                    <path\n                      d={areaD}\n                      fill={fillColor}\n                      opacity={gradient ? 1 : fillOpacity}\n                    />\n                    <path\n                      d={lineD}\n                      fill=\"none\"\n                      stroke={colors[seriesIdx]}\n                      strokeWidth={strokeWidth}\n                      strokeLinejoin=\"round\"\n                      strokeLinecap=\"round\"\n                    />\n                  </g>\n                )\n              })}\n\n              {/* Tooltip hover zones */}\n              {showTooltip && renderTooltipZones()}\n\n              {renderAxes()}\n            </>\n          )\n        }}\n      </ChartContainer>\n\n      {/* Tooltip overlay */}\n      {showTooltip && <ChartTooltip state={tooltip} />}\n\n      {/* Legend */}\n      {showLegend && series.length > 1 && (\n        <Legend\n          items={series.map((s, i) => ({\n            label: s.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nAreaChart.displayName = 'AreaChart'\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","names":[],"sources":["../../../src/ui/charts/bar-chart.tsx"],"sourcesContent":["'use client'\n\nimport { scaleBand, scaleLinear } from 'd3-scale'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { Axis } from './_internal/axes'\nimport { resolveColor } from './_internal/colors'\nimport { GridLines } from './_internal/grid-lines'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\nimport type { ChartColor,DataPoint } from './_internal/types'\nimport { ChartContainer } from './chart-container'\n\nexport interface BarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {\n  /** Data array */\n  data: DataPoint[]\n  /** Key for x-axis categories */\n  xKey: string\n  /** Key(s) for y-axis values. String for single series, array for multi-series */\n  yKey: string | string[]\n  /** Bar orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Stack multiple series */\n  stacked?: boolean\n  /** Group multiple series side by side */\n  grouped?: boolean\n  /** Color(s) for bars */\n  color?: ChartColor | ChartColor[] | string | string[]\n  /** Chart height in pixels */\n  height?: number\n  /** Show background grid lines */\n  showGrid?: boolean\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend (only for multi-series) */\n  showLegend?: boolean\n  /** Animate bars on mount */\n  animate?: boolean\n  /** Bar corner radius */\n  barRadius?: number\n  /** X-axis label */\n  xLabel?: string\n  /** Y-axis label */\n  yLabel?: string\n  /** Series labels (for legend) */\n  seriesLabels?: string[]\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\nexport const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      data,\n      xKey,\n      yKey,\n      orientation = 'vertical',\n      stacked = false,\n      grouped = false,\n      color,\n      height = 300,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      barRadius = 4,\n      xLabel,\n      yLabel,\n      seriesLabels,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const isVertical = orientation === 'vertical'\n  const shouldAnimate = animate && !reducedMotion\n\n  // Normalize yKey to array\n  const yKeys = Array.isArray(yKey) ? yKey : [yKey]\n  const isMultiSeries = yKeys.length > 1\n\n  // Resolve colors\n  const colors = isMultiSeries\n    ? yKeys.map((_, i) =>\n        resolveColor(\n          Array.isArray(color) ? color[i] : typeof color === 'string' ? color : undefined,\n          i,\n        ),\n      )\n    : [\n        resolveColor(\n          typeof color === 'string'\n            ? color\n            : Array.isArray(color)\n              ? color[0]\n              : undefined,\n          0,\n        ),\n      ]\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      <ChartContainer height={height} ariaLabel={ariaLabel ?? 'Bar chart'}>\n        {({ width, height: innerHeight, margin }) => {\n          // Suppress unused-var lint for margin (available for extensions)\n          void margin\n\n          // Category labels\n          const categories = data.map((d) => String(d[xKey]))\n\n          // Build data summary for screen readers\n          const dataSummary = data.map((d) => {\n            const cat = String(d[xKey])\n            const vals = yKeys.map((k, i) => {\n              const lbl = seriesLabels?.[i] ?? k\n              return `${lbl}: ${Number(d[k]).toLocaleString()}`\n            }).join(', ')\n            return `${cat} — ${vals}`\n          }).join('. ')\n\n          // Calculate max value\n          let maxValue: number\n          if (stacked) {\n            maxValue = Math.max(\n              ...data.map((d) =>\n                yKeys.reduce((sum, k) => sum + (Number(d[k]) || 0), 0),\n              ),\n            )\n          } else {\n            maxValue = Math.max(\n              ...data.flatMap((d) => yKeys.map((k) => Number(d[k]) || 0)),\n            )\n          }\n\n          // Build scales\n          const categoryScale = scaleBand()\n            .domain(categories)\n            .range(isVertical ? [0, width] : [0, innerHeight])\n            .padding(0.2)\n\n          const valueScale = scaleLinear()\n            .domain([0, maxValue * 1.1])\n            .range(isVertical ? [innerHeight, 0] : [0, width])\n            .nice()\n\n          const barBandwidth = categoryScale.bandwidth()\n          const barWidth =\n            isMultiSeries && grouped\n              ? barBandwidth / yKeys.length\n              : barBandwidth\n\n          return (\n            <>\n              {/* Screen-reader data summary */}\n              <desc>{dataSummary}</desc>\n\n              {/* Grid */}\n              {showGrid && (\n                <GridLines\n                  width={width}\n                  height={innerHeight}\n                  yScale={isVertical ? valueScale : undefined}\n                  xScale={!isVertical ? valueScale : undefined}\n                  horizontal={isVertical}\n                  vertical={!isVertical}\n                />\n              )}\n\n              {/* Bars */}\n              {data.map((d) => {\n                const category = String(d[xKey])\n                let stackOffset = 0\n\n                return yKeys.map((key, seriesIdx) => {\n                  const value = Number(d[key]) || 0\n                  const barColor = colors[seriesIdx] || colors[0]\n\n                  let x: number, y: number, w: number, h: number\n\n                  if (isVertical) {\n                    x =\n                      (categoryScale(category) ?? 0) +\n                      (grouped && isMultiSeries ? seriesIdx * barWidth : 0)\n                    y = stacked\n                      ? valueScale(stackOffset + value)\n                      : valueScale(value)\n                    w = barWidth\n                    h = stacked\n                      ? valueScale(stackOffset) - valueScale(stackOffset + value)\n                      : innerHeight - valueScale(value)\n                  } else {\n                    x = stacked ? valueScale(stackOffset) : 0\n                    y =\n                      (categoryScale(category) ?? 0) +\n                      (grouped && isMultiSeries ? seriesIdx * barWidth : 0)\n                    w = stacked\n                      ? valueScale(stackOffset + value) - valueScale(stackOffset)\n                      : valueScale(value)\n                    h = barWidth\n                  }\n\n                  if (stacked) stackOffset += value\n\n                  const seriesLabel = seriesLabels?.[seriesIdx] ?? key\n                  const barAriaLabel = isMultiSeries\n                    ? `${category}, ${seriesLabel}: ${value.toLocaleString()}`\n                    : `${category}: ${value.toLocaleString()}`\n\n                  const tooltipContent = (\n                    <div>\n                      <div className=\"font-medium\">{category}</div>\n                      {isMultiSeries && (\n                        <div className=\"text-surface-fg-muted\">\n                          {seriesLabel}\n                        </div>\n                      )}\n                      <div>{value.toLocaleString()}</div>\n                    </div>\n                  )\n\n                  return (\n                    <rect\n                      key={`${category}-${key}`}\n                      x={x}\n                      y={y}\n                      width={Math.max(0, w)}\n                      height={Math.max(0, h)}\n                      rx={barRadius}\n                      fill={barColor}\n                      className=\"transition-opacity hover:opacity-80 focus-visible:outline-hidden focus-visible:opacity-80\"\n                      tabIndex={showTooltip ? 0 : undefined}\n                      role={showTooltip ? 'graphics-symbol' : undefined}\n                      aria-label={barAriaLabel}\n                      onMouseMove={(e) => {\n                        if (showTooltip) {\n                          const rect = e.currentTarget\n                            .closest('div')\n                            ?.getBoundingClientRect()\n                          show(\n                            e.clientX - (rect?.left ?? 0),\n                            e.clientY - (rect?.top ?? 0),\n                            tooltipContent,\n                          )\n                        }\n                      }}\n                      onMouseLeave={hide}\n                      onFocus={(e) => {\n                        if (showTooltip) {\n                          const svgRect = e.currentTarget\n                            .closest('div')\n                            ?.getBoundingClientRect()\n                          const barRect = e.currentTarget.getBoundingClientRect()\n                          show(\n                            barRect.left + barRect.width / 2 - (svgRect?.left ?? 0),\n                            barRect.top - (svgRect?.top ?? 0),\n                            tooltipContent,\n                          )\n                        }\n                      }}\n                      onBlur={hide}\n                    />\n                  )\n                })\n              })}\n\n              {/* Axes */}\n              {isVertical ? (\n                <>\n                  <Axis\n                    scale={categoryScale}\n                    orientation=\"bottom\"\n                    transform={`translate(0,${innerHeight})`}\n                    label={xLabel}\n                  />\n                  <Axis scale={valueScale} orientation=\"left\" label={yLabel} />\n                </>\n              ) : (\n                <>\n                  <Axis\n                    scale={valueScale}\n                    orientation=\"bottom\"\n                    transform={`translate(0,${innerHeight})`}\n                    label={xLabel}\n                  />\n                  <Axis\n                    scale={categoryScale}\n                    orientation=\"left\"\n                    label={yLabel}\n                  />\n                </>\n              )}\n            </>\n          )\n        }}\n      </ChartContainer>\n\n      {/* Tooltip overlay */}\n      {showTooltip && <ChartTooltip state={tooltip} />}\n\n      {/* Legend */}\n      {showLegend && isMultiSeries && (\n        <Legend\n          items={yKeys.map((key, i) => ({\n            label: seriesLabels?.[i] ?? key,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nBarChart.displayName = 'BarChart'\n"],"mappings":"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"}
+{"version":3,"file":"bar-chart.js","names":[],"sources":["../../../src/ui/charts/bar-chart.tsx"],"sourcesContent":["'use client'\n\nimport { scaleBand, scaleLinear } from 'd3-scale'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { Axis } from './_internal/axes'\nimport { resolveColor } from './_internal/colors'\nimport { GridLines } from './_internal/grid-lines'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\nimport type { ChartColor,DataPoint } from './_internal/types'\nimport { ChartContainer } from './chart-container'\n\nexport interface BarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {\n  /** Data array */\n  data: DataPoint[]\n  /** Key for x-axis categories */\n  xKey: string\n  /** Key(s) for y-axis values. String for single series, array for multi-series */\n  yKey: string | string[]\n  /** Bar orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Stack multiple series */\n  stacked?: boolean\n  /** Group multiple series side by side */\n  grouped?: boolean\n  /** Color(s) for bars */\n  color?: ChartColor | ChartColor[] | string | string[]\n  /** Chart height in pixels */\n  height?: number\n  /** Show background grid lines */\n  showGrid?: boolean\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend (only for multi-series) */\n  showLegend?: boolean\n  /** Animate bars on mount */\n  animate?: boolean\n  /** Bar corner radius */\n  barRadius?: number\n  /** X-axis label */\n  xLabel?: string\n  /** Y-axis label */\n  yLabel?: string\n  /** Series labels (for legend) */\n  seriesLabels?: string[]\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\nexport const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      data,\n      xKey,\n      yKey,\n      orientation = 'vertical',\n      stacked = false,\n      grouped = false,\n      color,\n      height = 300,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      barRadius = 4,\n      xLabel,\n      yLabel,\n      seriesLabels,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const isVertical = orientation === 'vertical'\n  const shouldAnimate = animate && !reducedMotion\n\n  // Normalize yKey to array\n  const yKeys = Array.isArray(yKey) ? yKey : [yKey]\n  const isMultiSeries = yKeys.length > 1\n\n  // Resolve colors\n  const colors = isMultiSeries\n    ? yKeys.map((_, i) =>\n        resolveColor(\n          Array.isArray(color) ? color[i] : typeof color === 'string' ? color : undefined,\n          i,\n        ),\n      )\n    : [\n        resolveColor(\n          typeof color === 'string'\n            ? color\n            : Array.isArray(color)\n              ? color[0]\n              : undefined,\n          0,\n        ),\n      ]\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      <ChartContainer height={height} ariaLabel={ariaLabel ?? 'Bar chart'}>\n        {({ width, height: innerHeight, margin }) => {\n          // Suppress unused-var lint for margin (available for extensions)\n          void margin\n\n          // Category labels\n          const categories = data.map((d) => String(d[xKey]))\n\n          // Build data summary for screen readers\n          const dataSummary = data.map((d) => {\n            const cat = String(d[xKey])\n            const vals = yKeys.map((k, i) => {\n              const lbl = seriesLabels?.[i] ?? k\n              return `${lbl}: ${Number(d[k]).toLocaleString()}`\n            }).join(', ')\n            return `${cat} — ${vals}`\n          }).join('. ')\n\n          // Calculate max value\n          let maxValue: number\n          if (stacked) {\n            maxValue = Math.max(\n              ...data.map((d) =>\n                yKeys.reduce((sum, k) => sum + (Number(d[k]) || 0), 0),\n              ),\n            )\n          } else {\n            maxValue = Math.max(\n              ...data.flatMap((d) => yKeys.map((k) => Number(d[k]) || 0)),\n            )\n          }\n\n          // Build scales\n          const categoryScale = scaleBand()\n            .domain(categories)\n            .range(isVertical ? [0, width] : [0, innerHeight])\n            .padding(0.2)\n\n          const valueScale = scaleLinear()\n            .domain([0, maxValue * 1.1])\n            .range(isVertical ? [innerHeight, 0] : [0, width])\n            .nice()\n\n          const barBandwidth = categoryScale.bandwidth()\n          const barWidth =\n            isMultiSeries && grouped\n              ? barBandwidth / yKeys.length\n              : barBandwidth\n\n          return (\n            <>\n              {/* Screen-reader data summary */}\n              <desc>{dataSummary}</desc>\n\n              {/* Grid */}\n              {showGrid && (\n                <GridLines\n                  width={width}\n                  height={innerHeight}\n                  yScale={isVertical ? valueScale : undefined}\n                  xScale={!isVertical ? valueScale : undefined}\n                  horizontal={isVertical}\n                  vertical={!isVertical}\n                />\n              )}\n\n              {/* Bars */}\n              {data.map((d) => {\n                const category = String(d[xKey])\n                let stackOffset = 0\n\n                return yKeys.map((key, seriesIdx) => {\n                  const value = Number(d[key]) || 0\n                  const barColor = colors[seriesIdx] || colors[0]\n\n                  let x: number, y: number, w: number, h: number\n\n                  if (isVertical) {\n                    x =\n                      (categoryScale(category) ?? 0) +\n                      (grouped && isMultiSeries ? seriesIdx * barWidth : 0)\n                    y = stacked\n                      ? valueScale(stackOffset + value)\n                      : valueScale(value)\n                    w = barWidth\n                    h = stacked\n                      ? valueScale(stackOffset) - valueScale(stackOffset + value)\n                      : innerHeight - valueScale(value)\n                  } else {\n                    x = stacked ? valueScale(stackOffset) : 0\n                    y =\n                      (categoryScale(category) ?? 0) +\n                      (grouped && isMultiSeries ? seriesIdx * barWidth : 0)\n                    w = stacked\n                      ? valueScale(stackOffset + value) - valueScale(stackOffset)\n                      : valueScale(value)\n                    h = barWidth\n                  }\n\n                  if (stacked) stackOffset += value\n\n                  const seriesLabel = seriesLabels?.[seriesIdx] ?? key\n                  const barAriaLabel = isMultiSeries\n                    ? `${category}, ${seriesLabel}: ${value.toLocaleString()}`\n                    : `${category}: ${value.toLocaleString()}`\n\n                  const tooltipContent = (\n                    <div>\n                      <div className=\"font-medium\">{category}</div>\n                      {isMultiSeries && (\n                        <div className=\"text-surface-fg-muted\">\n                          {seriesLabel}\n                        </div>\n                      )}\n                      <div>{value.toLocaleString()}</div>\n                    </div>\n                  )\n\n                  return (\n                    <rect\n                      key={`${category}-${key}`}\n                      x={x}\n                      y={y}\n                      width={Math.max(0, w)}\n                      height={Math.max(0, h)}\n                      rx={barRadius}\n                      fill={barColor}\n                      className=\"transition-opacity hover:opacity-80 focus-visible:outline-hidden focus-visible:opacity-80\"\n                      tabIndex={showTooltip ? 0 : undefined}\n                      role={showTooltip ? 'graphics-symbol' : undefined}\n                      aria-label={barAriaLabel}\n                      onMouseMove={(e) => {\n                        if (showTooltip) {\n                          const rect = e.currentTarget\n                            .closest('div')\n                            ?.getBoundingClientRect()\n                          show(\n                            e.clientX - (rect?.left ?? 0),\n                            e.clientY - (rect?.top ?? 0),\n                            tooltipContent,\n                          )\n                        }\n                      }}\n                      onMouseLeave={hide}\n                      onFocus={(e) => {\n                        if (showTooltip) {\n                          const svgRect = e.currentTarget\n                            .closest('div')\n                            ?.getBoundingClientRect()\n                          const barRect = e.currentTarget.getBoundingClientRect()\n                          show(\n                            barRect.left + barRect.width / 2 - (svgRect?.left ?? 0),\n                            barRect.top - (svgRect?.top ?? 0),\n                            tooltipContent,\n                          )\n                        }\n                      }}\n                      onBlur={hide}\n                    />\n                  )\n                })\n              })}\n\n              {/* Axes */}\n              {isVertical ? (\n                <>\n                  <Axis\n                    scale={categoryScale}\n                    orientation=\"bottom\"\n                    transform={`translate(0,${innerHeight})`}\n                    label={xLabel}\n                  />\n                  <Axis scale={valueScale} orientation=\"left\" label={yLabel} />\n                </>\n              ) : (\n                <>\n                  <Axis\n                    scale={valueScale}\n                    orientation=\"bottom\"\n                    transform={`translate(0,${innerHeight})`}\n                    label={xLabel}\n                  />\n                  <Axis\n                    scale={categoryScale}\n                    orientation=\"left\"\n                    label={yLabel}\n                  />\n                </>\n              )}\n            </>\n          )\n        }}\n      </ChartContainer>\n\n      {/* Tooltip overlay */}\n      {showTooltip && <ChartTooltip state={tooltip} />}\n\n      {/* Legend */}\n      {showLegend && isMultiSeries && (\n        <Legend\n          items={yKeys.map((key, i) => ({\n            label: seriesLabels?.[i] ?? key,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nBarChart.displayName = 'BarChart'\n"],"mappings":"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"}