@devalok/shilp-sutra 0.49.3 → 0.49.4

package/dist/ui/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/ui/stat-card.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconTrendingDown, IconTrendingUp } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Card, CardContent, CardFooter, type CardSize } from './card'\nimport { Icon } from './icon'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Progress, type ProgressColor } from './progress'\nimport { Skeleton } from './skeleton'\nimport { type FlashPreset, type FlashSpec, type FlashSpeed,StatFlash } from './stat-flash'\n\n/**\n * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,\n * an optional trend delta (with directional arrow icon), and an optional header icon.\n *\n * **Surface:** delegated to `Card` via `variant` — `default` (ring-in-shadow, no border) |\n * `elevated` | `outline` (border, no shadow) | `flat`. StatCard composes `<Card>`, so the surface,\n * padding (gap model), and elevation all live in one place.\n *\n * **Accent:** `accentStyle=\"none\"` (default) is neutral; `\"icon\"` wraps `icon` in an accent chip\n * (`iconFill=\"soft\" | \"solid\"`); `\"tint\"` applies a subtle accent surface wash + accent value.\n * (Replaces the removed `accent` left-rail prop — see CHANGELOG migration.)\n *\n * **Delta direction:** `'up'` renders a green trending-up arrow, `'down'` renders a red\n * trending-down arrow, `'neutral'` renders a grey dash. The `delta.value` is a formatted\n * string (e.g. `\"+8%\"` or `\"−120\"`).\n *\n * **Loading state:** Pass `loading={true}` to render a pulse-skeleton placeholder instead of data.\n *\n * @example\n * // Revenue metric with a positive trend:\n * <StatCard\n *   label=\"Monthly Revenue\"\n *   value=\"$48,200\"\n *   delta={{ value: \"+12%\", direction: \"up\" }}\n *   icon={<IconCurrencyDollar />}\n * />\n *\n * @example\n * // Open ticket count with a downward trend (good for support queues):\n * <StatCard\n *   label=\"Open Tickets\"\n *   value={142}\n *   delta={{ value: \"−18\", direction: \"down\" }}\n * />\n *\n * @example\n * // Loading skeleton while data is fetching:\n * <StatCard label=\"Users\" value={0} loading={isFetching} />\n *\n * @example\n * // Simple metric with no trend (stable, neutral):\n * <StatCard\n *   label=\"Storage Used\"\n *   value=\"4.2 GB\"\n *   delta={{ value: \"No change\", direction: \"neutral\" }}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Heading text for the metric. `title` is an alias for `label`. */\n  label?: string\n  /** Alias for `label` — use whichever feels natural. */\n  title?: string\n  value: string | number\n  /** Prefix before value, e.g. \"$\" */\n  prefix?: string\n  /** Suffix after value, e.g. \"users\" */\n  suffix?: string\n  delta?: {\n    value: string\n    direction: 'up' | 'down' | 'neutral'\n  }\n  /** Where the delta sits relative to the value: `block` (below — default) or `inline` (on the value's baseline, to its right). @default 'block' */\n  deltaPlacement?: 'block' | 'inline'\n  icon?: IconInput\n  loading?: boolean\n  /** Comparison period label shown after delta, e.g. \"vs last month\" */\n  comparisonLabel?: string\n  /** Secondary metric below main value, e.g. \"of $50,000 target\" */\n  secondaryLabel?: string\n  /** Progress toward a target (0-100). Renders a thin progress bar below the value. */\n  progress?: number\n  /** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */\n  variant?: 'default' | 'elevated' | 'outline' | 'flat'\n  /**\n   * Tile density, delegated to Card's size axis. `sm` tightens padding to 16px and steps\n   * the value down to `text-ds-2xl` — use it for dense KPI rows and narrow stat grids\n   * (e.g. stat-row's 140px tiles). @default 'md'\n   */\n  size?: CardSize\n  /** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */\n  accentStyle?: 'none' | 'icon' | 'tint'\n  /** Animate value/label in on mount (subtle settle; content stays visible either way, never opacity-gated). @default false */\n  reveal?: boolean\n  /** When `accentStyle=\"icon\"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */\n  iconFill?: 'soft' | 'solid'\n  /**\n   * Opt-in entrance flash: the icon chip mounts showing a transient state (e.g. a green up-arrow)\n   * then settles to `icon`. A preset (`'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'`) or an\n   * explicit `{ tone, icon }`. Requires `icon`; implies the icon chip. Off by default.\n   */\n  flash?: FlashPreset | FlashSpec\n  /** Speed of the entrance flash: `fast` | `normal` | `slow`. @default 'normal' */\n  flashSpeed?: FlashSpeed\n  /** Sparkline data points. Renders a mini SVG line chart in the card. */\n  sparkline?: number[]\n  /** Make the card clickable with hover state */\n  onClick?: () => void\n  /** Href — makes the card a link (uses the LinkContext Link component) */\n  href?: string\n  /** Footer content rendered below the card body, e.g. \"View details →\" */\n  footer?: React.ReactNode\n}\n\nfunction buildSparklinePath(raw: number[], width: number, height: number): string {\n  const data = raw.filter((v) => Number.isFinite(v))\n  if (data.length < 2) return ''\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const stepX = width / (data.length - 1)\n  return data\n    .map((v, i) => {\n      const x = i * stepX\n      const y = height - ((v - min) / range) * height\n      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nfunction Sparkline({\n  data,\n  colorClass,\n}: {\n  data: number[]\n  colorClass: string\n}) {\n  const id = React.useId()\n  const pathRef = React.useRef<SVGPathElement>(null)\n  const [pathLength, setPathLength] = React.useState(0)\n  const svgWidth = 80\n  const svgHeight = 32\n  const path = buildSparklinePath(data, svgWidth, svgHeight)\n\n  React.useEffect(() => {\n    if (pathRef.current) {\n      setPathLength(pathRef.current.getTotalLength())\n    }\n  }, [path])\n\n  if (!path) return null\n\n  // Build area fill path (close to bottom-right then bottom-left)\n  const areaPath = `${path} L${svgWidth.toFixed(1)},${svgHeight.toFixed(1)} L0,${svgHeight.toFixed(1)} Z`\n\n  return (\n    <div className={cn('w-20 h-8', colorClass)} aria-hidden=\"true\">\n      <svg\n        viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n        className=\"w-full h-full overflow-visible\"\n        preserveAspectRatio=\"none\"\n      >\n        <defs>\n          <linearGradient id={`sparkline-fill-${id}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.1\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <path d={areaPath} fill={`url(#sparkline-fill-${id})`} />\n        <path\n          ref={pathRef}\n          d={path}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          style={{\n            opacity: pathLength === 0 ? 0 : 1,\n            strokeDasharray: pathLength,\n            strokeDashoffset: pathLength,\n            animation: pathLength > 0 ? `sparkline-draw-${id.replace(/:/g, '')} 1s ease-out forwards` : 'none',\n          }}\n        />\n      </svg>\n      {pathLength > 0 && (\n        <style>{`@keyframes sparkline-draw-${id.replace(/:/g, '')} { to { stroke-dashoffset: 0; } }`}</style>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressBar({ progress, label }: { progress: number; label: string }) {\n  const clamped = Math.max(0, Math.min(100, progress))\n  // StatCard's own thresholds (90 = success, 70 = warning) — deliberately distinct\n  // from Progress's autoColor (85/60), so we pass an explicit color.\n  const barColor: ProgressColor =\n    clamped >= 90 ? 'success' : clamped >= 70 ? 'warning' : 'accent'\n\n  return (\n    <Progress.Root value={clamped} size=\"sm\">\n      <Progress.Track aria-label={`${label} progress`}>\n        <Progress.Indicator color={barColor} />\n      </Progress.Track>\n    </Progress.Root>\n  )\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      label,\n      title,\n      value,\n      prefix,\n      suffix,\n      delta,\n      deltaPlacement = 'block',\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      variant = 'default',\n      size = 'md',\n      accentStyle = 'none',\n      reveal = false,\n      iconFill = 'soft',\n      flash,\n      flashSpeed,\n      sparkline,\n      onClick,\n      href,\n      footer,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const resolvedLabel = title ?? label ?? ''\n    const isClickable = !!(onClick || href)\n    const computedAriaLabel =\n      isClickable && !props['aria-label'] ? `View ${resolvedLabel}` : props['aria-label']\n\n    if (loading) {\n      return (\n        <Card ref={ref} variant={variant} size={size} className={className} aria-busy=\"true\" {...props}>\n          <CardContent className=\"flex flex-col gap-ds-03\">\n            <Skeleton className=\"h-ds-04 w-24 rounded-control-inner\" />\n            <Skeleton className=\"h-ds-sm w-32\" />\n            <Skeleton className=\"h-3 w-16 rounded-control-inner\" />\n          </CardContent>\n        </Card>\n      )\n    }\n\n    const DeltaIcon =\n      delta?.direction === 'up'\n        ? IconTrendingUp\n        : delta?.direction === 'down'\n          ? IconTrendingDown\n          : IconMinus\n\n    const deltaColour =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-surface-fg-muted'\n\n    const sparklineColor =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-accent-11'\n\n    const deltaNode = delta ? (\n      <motion.div\n        className={cn(\n          // Rhythm comes from CardContent's flex gap — no placement margins.\n          'flex items-center gap-ds-02 text-ds-sm font-medium',\n          deltaColour,\n        )}\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ ...springs.smooth, delay: 0.2 }}\n      >\n        <motion.span\n          className=\"inline-flex\"\n          initial={{ opacity: 0.5, scale: 1.4 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={springs.smooth}\n        >\n          <Icon icon={DeltaIcon} size=\"sm\" />\n        </motion.span>\n        <span>{delta.value}</span>\n        {comparisonLabel && (\n          <span className=\"text-surface-fg-subtle font-normal\">{comparisonLabel}</span>\n        )}\n      </motion.div>\n    ) : null\n\n    // reveal=false → static (content-safe default). reveal=true → subtle settle; opacity NEVER gated.\n    const revealProps = reveal\n      ? { initial: { y: 8 }, animate: { y: 0 }, transition: springs.smooth }\n      : { initial: false as const }\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between\">\n          <motion.p\n            className=\"text-ds-md font-medium text-surface-fg-muted\"\n            {...revealProps}\n          >\n            {resolvedLabel}\n          </motion.p>\n          <div className=\"flex items-center gap-ds-03\">\n            {sparkline && sparkline.length >= 2 && (\n              <Sparkline data={sparkline} colorClass={sparklineColor} />\n            )}\n            {icon && flash ? (\n              <StatFlash icon={icon} flash={flash} fill={iconFill} speed={flashSpeed} />\n            ) : icon ? (\n              accentStyle === 'icon' ? (\n                <motion.span\n                  className={cn(\n                    'inline-flex items-center justify-center rounded-control p-ds-02',\n                    iconFill === 'solid'\n                      ? 'bg-accent-9 text-accent-fg'\n                      : 'bg-accent-3 text-accent-11',\n                  )}\n                  {...revealProps}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n                </motion.span>\n              ) : (\n                <motion.span\n                  className=\"text-surface-fg-muted\"\n                  {...revealProps}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"lg\">{normalizeIcon(icon, 'lg')}</IconProvider>\n                </motion.span>\n              )\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex flex-col gap-ds-01\">\n          <div className={cn(deltaPlacement === 'inline' && delta && 'flex items-baseline gap-ds-03')}>\n            <div className=\"overflow-hidden\">\n              <motion.p\n                className={cn(\n                  'inline-block font-semibold',\n                  size === 'sm' ? 'text-ds-2xl' : 'text-ds-3xl',\n                  accentStyle === 'tint' ? 'text-accent-11' : 'text-surface-fg',\n                )}\n                {...revealProps}\n              >\n                {prefix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{prefix}</span>\n                )}\n                <span className=\"tabular-nums\">{value}</span>\n                {suffix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{suffix}</span>\n                )}\n              </motion.p>\n            </div>\n            {deltaPlacement === 'inline' && deltaNode}\n          </div>\n          {secondaryLabel && (\n            <motion.p\n              className=\"text-ds-sm text-surface-fg-subtle\"\n              {...revealProps}\n            >\n              {secondaryLabel}\n            </motion.p>\n          )}\n        </div>\n        {progress != null && (\n          <motion.div\n            {...revealProps}\n          >\n            <ProgressBar progress={progress} label={resolvedLabel} />\n          </motion.div>\n        )}\n        {deltaPlacement === 'block' && deltaNode}\n      </>\n    )\n\n    // accentStyle=\"tint\" → a subtle accent gradient wash over Card's surface.\n    const tintClass =\n      accentStyle === 'tint' ? 'bg-linear-to-t from-accent-2 to-surface-raised' : undefined\n    // Footer sits outside CardContent behind a full-width divider (both are direct\n    // children of Card, so the rule spans edge-to-edge — no inset border-t).\n    const body = (\n      <>\n        <CardContent className=\"flex flex-col gap-ds-03\">{cardContent}</CardContent>\n        {footer && (\n          <>\n            <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n            <CardFooter className=\"text-ds-sm\">\n              <motion.div\n                className=\"w-full\"\n                initial={false}\n                animate={{ opacity: 1 }}\n                transition={{ ...tweens.fade, delay: 0.25 }}\n              >\n                {footer}\n              </motion.div>\n            </CardFooter>\n          </>\n        )}\n      </>\n    )\n\n    // href → wrap Card in the framework Link (Card stays the shell; hover-lift inside).\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className=\"block no-underline\"\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          <Card variant={variant} size={size} interactive className={tintClass}>\n            {body}\n          </Card>\n        </Link>\n      )\n    }\n\n    // onClick → interactive Card with button semantics + keyboard activation.\n    if (onClick) {\n      return (\n        <Card\n          ref={ref}\n          variant={variant}\n          size={size}\n          interactive\n          className={cn(tintClass, className)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={computedAriaLabel}\n          onClick={onClick}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          {...props}\n        >\n          {body}\n        </Card>\n      )\n    }\n\n    return (\n      <Card ref={ref} variant={variant} size={size} className={cn(tintClass, className)} {...props}>\n        {body}\n      </Card>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":"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"}
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/ui/stat-card.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconTrendingDown, IconTrendingUp } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Card, CardContent, CardFooter, type CardSize } from './card'\nimport { Icon } from './icon'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Progress, type ProgressColor } from './progress'\nimport { Skeleton } from './skeleton'\nimport { type FlashPreset, type FlashSpec, type FlashSpeed,StatFlash } from './stat-flash'\n\n/**\n * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,\n * an optional trend delta (with directional arrow icon), and an optional header icon.\n *\n * **Surface:** delegated to `Card` via `variant` — `default` (ring-in-shadow, no border) |\n * `elevated` | `outline` (border, no shadow) | `flat`. StatCard composes `<Card>`, so the surface,\n * padding (gap model), and elevation all live in one place.\n *\n * **Accent:** `accentStyle=\"none\"` (default) is neutral; `\"icon\"` wraps `icon` in an accent chip\n * (`iconFill=\"soft\" | \"solid\"`); `\"tint\"` applies a subtle accent surface wash + accent value.\n * (Replaces the removed `accent` left-rail prop — see CHANGELOG migration.)\n *\n * **Delta direction:** `'up'` renders a green trending-up arrow, `'down'` renders a red\n * trending-down arrow, `'neutral'` renders a grey dash. The `delta.value` is a formatted\n * string (e.g. `\"+8%\"` or `\"−120\"`).\n *\n * **Loading state:** Pass `loading={true}` to render a pulse-skeleton placeholder instead of data.\n *\n * @example\n * // Revenue metric with a positive trend:\n * <StatCard\n *   label=\"Monthly Revenue\"\n *   value=\"$48,200\"\n *   delta={{ value: \"+12%\", direction: \"up\" }}\n *   icon={<IconCurrencyDollar />}\n * />\n *\n * @example\n * // Open ticket count with a downward trend (good for support queues):\n * <StatCard\n *   label=\"Open Tickets\"\n *   value={142}\n *   delta={{ value: \"−18\", direction: \"down\" }}\n * />\n *\n * @example\n * // Loading skeleton while data is fetching:\n * <StatCard label=\"Users\" value={0} loading={isFetching} />\n *\n * @example\n * // Simple metric with no trend (stable, neutral):\n * <StatCard\n *   label=\"Storage Used\"\n *   value=\"4.2 GB\"\n *   delta={{ value: \"No change\", direction: \"neutral\" }}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Heading text for the metric. `title` is an alias for `label`. */\n  label?: string\n  /** Alias for `label` — use whichever feels natural. */\n  title?: string\n  value: string | number\n  /** Prefix before value, e.g. \"$\" */\n  prefix?: string\n  /** Suffix after value, e.g. \"users\" */\n  suffix?: string\n  delta?: {\n    value: string\n    direction: 'up' | 'down' | 'neutral'\n  }\n  /** Where the delta sits relative to the value: `block` (below — default) or `inline` (on the value's baseline, to its right). @default 'block' */\n  deltaPlacement?: 'block' | 'inline'\n  icon?: IconInput\n  loading?: boolean\n  /** Comparison period label shown after delta, e.g. \"vs last month\" */\n  comparisonLabel?: string\n  /** Secondary metric below main value, e.g. \"of $50,000 target\" */\n  secondaryLabel?: string\n  /** Progress toward a target (0-100). Renders a thin progress bar below the value. */\n  progress?: number\n  /** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */\n  variant?: 'default' | 'elevated' | 'outline' | 'flat'\n  /**\n   * Tile density, delegated to Card's size axis. `sm` tightens padding to 16px and steps\n   * the value down to `text-ds-2xl` — use it for dense KPI rows and narrow stat grids\n   * (e.g. stat-row's 140px tiles). @default 'md'\n   */\n  size?: CardSize\n  /** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */\n  accentStyle?: 'none' | 'icon' | 'tint'\n  /** Animate value/label in on mount (subtle settle; content stays visible either way, never opacity-gated). @default false */\n  reveal?: boolean\n  /** When `accentStyle=\"icon\"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */\n  iconFill?: 'soft' | 'solid'\n  /**\n   * Opt-in entrance flash: the icon chip mounts showing a transient state (e.g. a green up-arrow)\n   * then settles to `icon`. A preset (`'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'`) or an\n   * explicit `{ tone, icon }`. Requires `icon`; implies the icon chip. Off by default.\n   */\n  flash?: FlashPreset | FlashSpec\n  /** Speed of the entrance flash: `fast` | `normal` | `slow`. @default 'normal' */\n  flashSpeed?: FlashSpeed\n  /** Sparkline data points. Renders a mini SVG line chart in the card. */\n  sparkline?: number[]\n  /** Make the card clickable with hover state */\n  onClick?: () => void\n  /** Href — makes the card a link (uses the LinkContext Link component) */\n  href?: string\n  /** Footer content rendered below the card body, e.g. \"View details →\" */\n  footer?: React.ReactNode\n}\n\nfunction buildSparklinePath(raw: number[], width: number, height: number): string {\n  const data = raw.filter((v) => Number.isFinite(v))\n  if (data.length < 2) return ''\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const stepX = width / (data.length - 1)\n  return data\n    .map((v, i) => {\n      const x = i * stepX\n      const y = height - ((v - min) / range) * height\n      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nfunction Sparkline({\n  data,\n  colorClass,\n}: {\n  data: number[]\n  colorClass: string\n}) {\n  const id = React.useId()\n  const pathRef = React.useRef<SVGPathElement>(null)\n  const [pathLength, setPathLength] = React.useState(0)\n  const svgWidth = 80\n  const svgHeight = 32\n  const path = buildSparklinePath(data, svgWidth, svgHeight)\n\n  React.useEffect(() => {\n    if (pathRef.current) {\n      setPathLength(pathRef.current.getTotalLength())\n    }\n  }, [path])\n\n  if (!path) return null\n\n  // Build area fill path (close to bottom-right then bottom-left)\n  const areaPath = `${path} L${svgWidth.toFixed(1)},${svgHeight.toFixed(1)} L0,${svgHeight.toFixed(1)} Z`\n\n  return (\n    <div className={cn('w-20 h-8', colorClass)} aria-hidden=\"true\">\n      <svg\n        viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n        className=\"w-full h-full overflow-visible\"\n        preserveAspectRatio=\"none\"\n      >\n        <defs>\n          <linearGradient id={`sparkline-fill-${id}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.1\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <path d={areaPath} fill={`url(#sparkline-fill-${id})`} />\n        <path\n          ref={pathRef}\n          d={path}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          style={{\n            opacity: pathLength === 0 ? 0 : 1,\n            strokeDasharray: pathLength,\n            strokeDashoffset: pathLength,\n            animation: pathLength > 0 ? `sparkline-draw-${id.replace(/:/g, '')} 1s ease-out forwards` : 'none',\n          }}\n        />\n      </svg>\n      {pathLength > 0 && (\n        <style>{`@keyframes sparkline-draw-${id.replace(/:/g, '')} { to { stroke-dashoffset: 0; } }`}</style>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressBar({ progress, label }: { progress: number; label: string }) {\n  const clamped = Math.max(0, Math.min(100, progress))\n  // StatCard's own thresholds (90 = success, 70 = warning) — deliberately distinct\n  // from Progress's autoColor (85/60), so we pass an explicit color.\n  const barColor: ProgressColor =\n    clamped >= 90 ? 'success' : clamped >= 70 ? 'warning' : 'accent'\n\n  return (\n    <Progress.Root value={clamped} size=\"sm\">\n      <Progress.Track aria-label={`${label} progress`}>\n        <Progress.Indicator color={barColor} />\n      </Progress.Track>\n    </Progress.Root>\n  )\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      label,\n      title,\n      value,\n      prefix,\n      suffix,\n      delta,\n      deltaPlacement = 'block',\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      variant = 'default',\n      size = 'md',\n      accentStyle = 'none',\n      reveal = false,\n      iconFill = 'soft',\n      flash,\n      flashSpeed,\n      sparkline,\n      onClick,\n      href,\n      footer,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const resolvedLabel = title ?? label ?? ''\n    const isClickable = !!(onClick || href)\n    const computedAriaLabel =\n      isClickable && !props['aria-label'] ? `View ${resolvedLabel}` : props['aria-label']\n\n    if (loading) {\n      return (\n        <Card ref={ref} variant={variant} size={size} className={className} aria-busy=\"true\" {...props}>\n          <CardContent className=\"flex flex-col gap-ds-03\">\n            <Skeleton className=\"h-ds-04 w-24 rounded-control-inner\" />\n            <Skeleton className=\"h-ds-sm w-32\" />\n            <Skeleton className=\"h-3 w-16 rounded-control-inner\" />\n          </CardContent>\n        </Card>\n      )\n    }\n\n    const DeltaIcon =\n      delta?.direction === 'up'\n        ? IconTrendingUp\n        : delta?.direction === 'down'\n          ? IconTrendingDown\n          : IconMinus\n\n    const deltaColour =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-surface-fg-muted'\n\n    const sparklineColor =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-accent-11'\n\n    const deltaNode = delta ? (\n      <motion.div\n        className={cn(\n          // Rhythm comes from CardContent's flex gap — no placement margins.\n          'flex items-center gap-ds-02 text-ds-sm font-medium',\n          deltaColour,\n        )}\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ ...springs.smooth, delay: 0.2 }}\n      >\n        <motion.span\n          className=\"inline-flex\"\n          initial={{ opacity: 0.5, scale: 1.4 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={springs.smooth}\n        >\n          <Icon icon={DeltaIcon} size=\"sm\" />\n        </motion.span>\n        <span>{delta.value}</span>\n        {comparisonLabel && (\n          <span className=\"text-surface-fg-subtle font-normal\">{comparisonLabel}</span>\n        )}\n      </motion.div>\n    ) : null\n\n    // reveal=false → static (content-safe default). reveal=true → subtle settle; opacity NEVER gated.\n    const revealProps = reveal\n      ? { initial: { y: 8 }, animate: { y: 0 }, transition: springs.smooth }\n      : { initial: false as const }\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between\">\n          <motion.p\n            className=\"text-ds-md font-medium text-surface-fg-muted\"\n            {...revealProps}\n          >\n            {resolvedLabel}\n          </motion.p>\n          <div className=\"flex items-center gap-ds-03\">\n            {sparkline && sparkline.length >= 2 && (\n              <Sparkline data={sparkline} colorClass={sparklineColor} />\n            )}\n            {icon && flash ? (\n              <StatFlash icon={icon} flash={flash} fill={iconFill} speed={flashSpeed} />\n            ) : icon ? (\n              accentStyle === 'icon' ? (\n                <motion.span\n                  className={cn(\n                    'inline-flex items-center justify-center rounded-control p-ds-02',\n                    iconFill === 'solid'\n                      ? 'bg-accent-9 text-accent-fg'\n                      : 'bg-accent-3 text-accent-11',\n                  )}\n                  {...revealProps}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n                </motion.span>\n              ) : (\n                <motion.span\n                  className=\"text-surface-fg-muted\"\n                  {...revealProps}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"lg\">{normalizeIcon(icon, 'lg')}</IconProvider>\n                </motion.span>\n              )\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex flex-col gap-ds-01\">\n          <div className={cn(deltaPlacement === 'inline' && delta && 'flex items-baseline gap-ds-03')}>\n            <div className=\"overflow-hidden\">\n              <motion.p\n                className={cn(\n                  'inline-block font-semibold',\n                  size === 'sm' ? 'text-ds-2xl' : 'text-ds-3xl',\n                  accentStyle === 'tint' ? 'text-accent-11' : 'text-surface-fg',\n                )}\n                {...revealProps}\n              >\n                {prefix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{prefix}</span>\n                )}\n                <span className=\"tabular-nums\">{value}</span>\n                {suffix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{suffix}</span>\n                )}\n              </motion.p>\n            </div>\n            {deltaPlacement === 'inline' && deltaNode}\n          </div>\n          {secondaryLabel && (\n            <motion.p\n              className=\"text-ds-sm text-surface-fg-subtle\"\n              {...revealProps}\n            >\n              {secondaryLabel}\n            </motion.p>\n          )}\n        </div>\n        {progress != null && (\n          <motion.div\n            {...revealProps}\n          >\n            <ProgressBar progress={progress} label={resolvedLabel} />\n          </motion.div>\n        )}\n        {deltaPlacement === 'block' && deltaNode}\n      </>\n    )\n\n    // accentStyle=\"tint\" → a subtle accent gradient wash over Card's surface.\n    const tintClass =\n      accentStyle === 'tint' ? 'bg-linear-to-t from-accent-2 to-surface-raised' : undefined\n    // Footer sits outside CardContent behind a full-width divider (both are direct\n    // children of Card, so the rule spans edge-to-edge — no inset border-t).\n    const body = (\n      <>\n        <CardContent className=\"flex flex-col gap-ds-03\">{cardContent}</CardContent>\n        {footer && (\n          <>\n            <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n            <CardFooter className=\"text-ds-sm\">\n              <motion.div\n                className=\"w-full\"\n                initial={false}\n                animate={{ opacity: 1 }}\n                transition={{ ...tweens.fade, delay: 0.25 }}\n              >\n                {footer}\n              </motion.div>\n            </CardFooter>\n          </>\n        )}\n      </>\n    )\n\n    // href → wrap Card in the framework Link (Card stays the shell; hover-lift inside).\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className=\"block no-underline\"\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          <Card variant={variant} size={size} interactive className={tintClass}>\n            {body}\n          </Card>\n        </Link>\n      )\n    }\n\n    // onClick → interactive Card with button semantics + keyboard activation.\n    if (onClick) {\n      return (\n        <Card\n          ref={ref}\n          variant={variant}\n          size={size}\n          interactive\n          className={cn(tintClass, className)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={computedAriaLabel}\n          onClick={onClick}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          {...props}\n        >\n          {body}\n        </Card>\n      )\n    }\n\n    return (\n      <Card ref={ref} variant={variant} size={size} className={cn(tintClass, className)} {...props}>\n        {body}\n      </Card>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":"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"}

package/dist/ui/stat-flash.d.ts

@@ -1,6 +1,7 @@
 "use client";
 import { Transition } from 'framer-motion';
 import { IconInput } from './lib/icon-input';
+import * as React from 'react';
 export type FlashTone = 'success' | 'error' | 'warning' | 'info' | 'accent';
 /** Named entrance states. Each maps to a tone + glyph. */
 export type FlashPreset = 'up' | 'down' | 'goal' | 'record' | 'alert' | 'live';
@@ -39,7 +40,7 @@ export interface StatFlashProps {
  * <StatFlash icon={<IconFolder />} flash="up" />          // green up-arrow → folder
  * <StatFlash icon={<IconBolt />} flash={{ tone: 'info', icon: <IconActivity /> }} />
  */
-export declare function StatFlash({ icon, flash, fill, speed, holdMs, settleTransition, flashTransition, }: StatFlashProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatFlash({ icon, flash, fill, speed, holdMs, settleTransition, flashTransition, }: StatFlashProps): React.JSX.Element;
 export declare namespace StatFlash {
     var displayName: string;
 }

package/dist/ui/stat-flash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-flash.d.ts","sourceRoot":"","sources":["../../src/ui/stat-flash.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA2B,KAAK,UAAU,EAAoB,MAAM,eAAe,CAAA;AAI1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAKjD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE3E,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9E,4CAA4C;AAC5C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;CAChB;AA2BD,yEAAyE;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAQnD,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAA;IACf,2EAA2E;IAC3E,KAAK,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,iGAAiG;IACjG,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,wEAAwE;IACxE,eAAe,CAAC,EAAE,UAAU,CAAA;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,IAAa,EACb,KAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,eAAe,GAChB,EAAE,cAAc,2CA0DhB;yBAlEe,SAAS"}
+{"version":3,"file":"stat-flash.d.ts","sourceRoot":"","sources":["../../src/ui/stat-flash.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA2B,KAAK,UAAU,EAAoB,MAAM,eAAe,CAAA;AAC1F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAKjD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE3E,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9E,4CAA4C;AAC5C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;CAChB;AA2BD,yEAAyE;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAQnD,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAA;IACf,2EAA2E;IAC3E,KAAK,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,iGAAiG;IACjG,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,wEAAwE;IACxE,eAAe,CAAC,EAAE,UAAU,CAAA;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,IAAa,EACb,KAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,eAAe,GAChB,EAAE,cAAc,qBA0DhB;yBAlEe,SAAS"}

package/dist/ui/stat-flash.js

@@ -79,7 +79,7 @@ function x({ icon: t, flash: n, fill: c = "soft", speed: l = "normal", holdMs: u
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ o(h.span, {
 			className: "inline-flex",
-			initial: p ? !1 : {
+			initial: !p && {
 				opacity: 0,
 				scale: .55
 			},

package/dist/ui/stat-flash.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-flash.js","names":[],"sources":["../../src/ui/stat-flash.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconBolt,\n  IconCheck,\n  IconStar,\n} from '@tabler/icons-react'\nimport { AnimatePresence, motion, type Transition, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\nexport type FlashTone = 'success' | 'error' | 'warning' | 'info' | 'accent'\n\n/** Named entrance states. Each maps to a tone + glyph. */\nexport type FlashPreset = 'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'\n\n/** Explicit flash: any tone + any glyph. */\nexport interface FlashSpec {\n  tone: FlashTone\n  icon: IconInput\n}\n\nconst FLASH_PRESETS: Record<FlashPreset, { tone: FlashTone; Glyph: React.ComponentType }> = {\n  up: { tone: 'success', Glyph: IconArrowUp },\n  down: { tone: 'error', Glyph: IconArrowDown },\n  goal: { tone: 'success', Glyph: IconCheck },\n  record: { tone: 'accent', Glyph: IconStar },\n  alert: { tone: 'warning', Glyph: IconAlertTriangle },\n  live: { tone: 'info', Glyph: IconBolt },\n}\n\nconst toneBg: Record<FlashTone, string> = {\n  success: 'bg-success-9',\n  error: 'bg-error-9',\n  warning: 'bg-warning-9',\n  info: 'bg-info-9',\n  accent: 'bg-accent-9',\n}\n\nconst toneFg: Record<FlashTone, string> = {\n  success: 'text-success-fg',\n  error: 'text-error-fg',\n  warning: 'text-warning-fg',\n  info: 'text-info-fg',\n  accent: 'text-accent-fg',\n}\n\n/** Composable speed — coarse presets built from the DS motion tokens. */\nexport type FlashSpeed = 'fast' | 'normal' | 'slow'\n\nconst SPEEDS: Record<FlashSpeed, { holdMs: number; settle: Transition; fade: Transition }> = {\n  fast: { holdMs: 450, settle: springs.snappy, fade: tweens.fade },\n  normal: { holdMs: 650, settle: springs.snappy, fade: tweens.fade },\n  slow: { holdMs: 950, settle: springs.gentle, fade: tweens.elegant },\n}\n\nexport interface StatFlashProps {\n  /** Settled identity glyph, shown after the flash resolves. */\n  icon: IconInput\n  /** The entrance flash — a named preset or an explicit `{ tone, icon }`. */\n  flash: FlashPreset | FlashSpec\n  /** Resting chip style once settled. @default 'soft' */\n  fill?: 'soft' | 'solid'\n  /** Coarse speed preset (hold + settle + fade), built from DS motion tokens. @default 'normal' */\n  speed?: FlashSpeed\n  /** Override how long the flash holds before settling, in ms. Wins over `speed`. */\n  holdMs?: number\n  /** Override the settle (icon scale-in) transition. Wins over `speed`. */\n  settleTransition?: Transition\n  /** Override the flash enter/exit fade transition. Wins over `speed`. */\n  flashTransition?: Transition\n}\n\n/**\n * StatFlash — a chip that mounts showing a transient **state** (a toned glyph: an up-arrow on\n * green, a check, an alert…) then settles into the metric's stable **identity** icon. The pattern\n * is *state → identity*: communicate what just happened, then resolve to what the metric is.\n *\n * Used by `StatCard` via its `flash` prop, but standalone too (list rows, badges, toasts).\n * Honors `prefers-reduced-motion` — renders the settled identity directly, no flash.\n *\n * @example\n * <StatFlash icon={<IconFolder />} flash=\"up\" />          // green up-arrow → folder\n * <StatFlash icon={<IconBolt />} flash={{ tone: 'info', icon: <IconActivity /> }} />\n */\nexport function StatFlash({\n  icon,\n  flash,\n  fill = 'soft',\n  speed = 'normal',\n  holdMs,\n  settleTransition,\n  flashTransition,\n}: StatFlashProps) {\n  const prefersReduced = useReducedMotion()\n  const preset = SPEEDS[speed]\n  const hold = holdMs ?? preset.holdMs\n  const settleT = settleTransition ?? preset.settle\n  const fadeT = flashTransition ?? preset.fade\n\n  const resolved =\n    typeof flash === 'string'\n      ? { tone: FLASH_PRESETS[flash].tone, icon: <FlashPresetGlyph preset={flash} /> }\n      : flash\n\n  const [settled, setSettled] = React.useState(false)\n\n  React.useEffect(() => {\n    if (prefersReduced) {\n      setSettled(true)\n      return\n    }\n    const t = setTimeout(() => setSettled(true), hold)\n    return () => clearTimeout(t)\n  }, [prefersReduced, hold])\n\n  return (\n    <span\n      className={cn(\n        'relative inline-flex items-center justify-center overflow-hidden rounded-control p-ds-02',\n        fill === 'solid' ? 'bg-accent-9 text-accent-fg' : 'bg-accent-3 text-accent-11',\n      )}\n      aria-hidden=\"true\"\n    >\n      <motion.span\n        className=\"inline-flex\"\n        initial={prefersReduced ? false : { opacity: 0, scale: 0.55 }}\n        animate={{ opacity: settled ? 1 : 0, scale: settled ? 1 : 0.55 }}\n        transition={settleT}\n      >\n        <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n      </motion.span>\n      <AnimatePresence>\n        {!settled && (\n          <motion.span\n            className={cn(\n              'absolute inset-0 inline-flex items-center justify-center',\n              toneBg[resolved.tone],\n              toneFg[resolved.tone],\n            )}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={fadeT}\n          >\n            <IconProvider size=\"md\">{normalizeIcon(resolved.icon, 'md')}</IconProvider>\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n}\n\nfunction FlashPresetGlyph({ preset }: { preset: FlashPreset }) {\n  const { Glyph } = FLASH_PRESETS[preset]\n  return <Glyph />\n}\n\nStatFlash.displayName = 'StatFlash'\n"],"mappings":";;;;;;;;;;AA8BA,IAAM,IAAsF;CAC1F,IAAI;EAAE,MAAM;EAAW,OAAO;EAAa;CAC3C,MAAM;EAAE,MAAM;EAAS,OAAO;EAAe;CAC7C,MAAM;EAAE,MAAM;EAAW,OAAO;EAAW;CAC3C,QAAQ;EAAE,MAAM;EAAU,OAAO;EAAU;CAC3C,OAAO;EAAE,MAAM;EAAW,OAAO;EAAmB;CACpD,MAAM;EAAE,MAAM;EAAQ,OAAO;EAAU;CACxC,EAEK,IAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,QAAQ;CACT,EAEK,IAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,QAAQ;CACT,EAKK,IAAuF;CAC3F,MAAM;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;EAAM;CAChE,QAAQ;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;EAAM;CAClE,MAAM;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;EAAS;CACpE;AA+BD,SAAgB,EAAU,EACxB,SACA,UACA,UAAO,QACP,WAAQ,UACR,WACA,qBACA,sBACiB;CACjB,IAAM,IAAiB,GAAkB,EACnC,IAAS,EAAO,IAChB,IAAO,KAAU,EAAO,QACxB,IAAU,KAAoB,EAAO,QACrC,IAAQ,KAAmB,EAAO,MAElC,IACJ,OAAO,KAAU,WACb;EAAE,MAAM,EAAc,GAAO;EAAM,MAAM,kBAAC,GAAD,EAAkB,QAAQ,GAAS,CAAA;EAAE,GAC9E,GAEA,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM;AAWnD,QATA,EAAM,gBAAgB;AACpB,MAAI,GAAgB;AAClB,KAAW,GAAK;AAChB;;EAEF,IAAM,IAAI,iBAAiB,EAAW,GAAK,EAAE,EAAK;AAClD,eAAa,aAAa,EAAE;IAC3B,CAAC,GAAgB,EAAK,CAAC,EAGxB,kBAAC,QAAD;EACE,WAAW,EACT,4FACA,MAAS,UAAU,+BAA+B,6BACnD;EACD,eAAY;YALd,CAOE,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,SAAS,IAAiB,KAAQ;IAAE,SAAS;IAAG,OAAO;IAAM;GAC7D,SAAS;IAAE,SAAS;IAAiB,OAAO,IAAU,IAAI;IAAM;GAChE,YAAY;aAEZ,kBAAC,GAAD;IAAc,MAAK;cAAM,EAAc,GAAM,KAAK;IAAgB,CAAA;GACtD,CAAA,EACd,kBAAC,GAAD,EAAA,UACG,CAAC,KACA,kBAAC,EAAO,MAAR;GACE,WAAW,EACT,4DACA,EAAO,EAAS,OAChB,EAAO,EAAS,MACjB;GACD,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY;aAEZ,kBAAC,GAAD;IAAc,MAAK;cAAM,EAAc,EAAS,MAAM,KAAK;IAAgB,CAAA;GAC/D,CAAA,EAEA,CAAA,CACb;;;AAIX,SAAS,EAAiB,EAAE,aAAmC;CAC7D,IAAM,EAAE,aAAU,EAAc;AAChC,QAAO,kBAAC,GAAD,EAAS,CAAA;;AAGlB,EAAU,cAAc"}
+{"version":3,"file":"stat-flash.js","names":[],"sources":["../../src/ui/stat-flash.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconBolt,\n  IconCheck,\n  IconStar,\n} from '@tabler/icons-react'\nimport { AnimatePresence, motion, type Transition, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\nexport type FlashTone = 'success' | 'error' | 'warning' | 'info' | 'accent'\n\n/** Named entrance states. Each maps to a tone + glyph. */\nexport type FlashPreset = 'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'\n\n/** Explicit flash: any tone + any glyph. */\nexport interface FlashSpec {\n  tone: FlashTone\n  icon: IconInput\n}\n\nconst FLASH_PRESETS: Record<FlashPreset, { tone: FlashTone; Glyph: React.ComponentType }> = {\n  up: { tone: 'success', Glyph: IconArrowUp },\n  down: { tone: 'error', Glyph: IconArrowDown },\n  goal: { tone: 'success', Glyph: IconCheck },\n  record: { tone: 'accent', Glyph: IconStar },\n  alert: { tone: 'warning', Glyph: IconAlertTriangle },\n  live: { tone: 'info', Glyph: IconBolt },\n}\n\nconst toneBg: Record<FlashTone, string> = {\n  success: 'bg-success-9',\n  error: 'bg-error-9',\n  warning: 'bg-warning-9',\n  info: 'bg-info-9',\n  accent: 'bg-accent-9',\n}\n\nconst toneFg: Record<FlashTone, string> = {\n  success: 'text-success-fg',\n  error: 'text-error-fg',\n  warning: 'text-warning-fg',\n  info: 'text-info-fg',\n  accent: 'text-accent-fg',\n}\n\n/** Composable speed — coarse presets built from the DS motion tokens. */\nexport type FlashSpeed = 'fast' | 'normal' | 'slow'\n\nconst SPEEDS: Record<FlashSpeed, { holdMs: number; settle: Transition; fade: Transition }> = {\n  fast: { holdMs: 450, settle: springs.snappy, fade: tweens.fade },\n  normal: { holdMs: 650, settle: springs.snappy, fade: tweens.fade },\n  slow: { holdMs: 950, settle: springs.gentle, fade: tweens.elegant },\n}\n\nexport interface StatFlashProps {\n  /** Settled identity glyph, shown after the flash resolves. */\n  icon: IconInput\n  /** The entrance flash — a named preset or an explicit `{ tone, icon }`. */\n  flash: FlashPreset | FlashSpec\n  /** Resting chip style once settled. @default 'soft' */\n  fill?: 'soft' | 'solid'\n  /** Coarse speed preset (hold + settle + fade), built from DS motion tokens. @default 'normal' */\n  speed?: FlashSpeed\n  /** Override how long the flash holds before settling, in ms. Wins over `speed`. */\n  holdMs?: number\n  /** Override the settle (icon scale-in) transition. Wins over `speed`. */\n  settleTransition?: Transition\n  /** Override the flash enter/exit fade transition. Wins over `speed`. */\n  flashTransition?: Transition\n}\n\n/**\n * StatFlash — a chip that mounts showing a transient **state** (a toned glyph: an up-arrow on\n * green, a check, an alert…) then settles into the metric's stable **identity** icon. The pattern\n * is *state → identity*: communicate what just happened, then resolve to what the metric is.\n *\n * Used by `StatCard` via its `flash` prop, but standalone too (list rows, badges, toasts).\n * Honors `prefers-reduced-motion` — renders the settled identity directly, no flash.\n *\n * @example\n * <StatFlash icon={<IconFolder />} flash=\"up\" />          // green up-arrow → folder\n * <StatFlash icon={<IconBolt />} flash={{ tone: 'info', icon: <IconActivity /> }} />\n */\nexport function StatFlash({\n  icon,\n  flash,\n  fill = 'soft',\n  speed = 'normal',\n  holdMs,\n  settleTransition,\n  flashTransition,\n}: StatFlashProps) {\n  const prefersReduced = useReducedMotion()\n  const preset = SPEEDS[speed]\n  const hold = holdMs ?? preset.holdMs\n  const settleT = settleTransition ?? preset.settle\n  const fadeT = flashTransition ?? preset.fade\n\n  const resolved =\n    typeof flash === 'string'\n      ? { tone: FLASH_PRESETS[flash].tone, icon: <FlashPresetGlyph preset={flash} /> }\n      : flash\n\n  const [settled, setSettled] = React.useState(false)\n\n  React.useEffect(() => {\n    if (prefersReduced) {\n      setSettled(true)\n      return\n    }\n    const t = setTimeout(() => setSettled(true), hold)\n    return () => clearTimeout(t)\n  }, [prefersReduced, hold])\n\n  return (\n    <span\n      className={cn(\n        'relative inline-flex items-center justify-center overflow-hidden rounded-control p-ds-02',\n        fill === 'solid' ? 'bg-accent-9 text-accent-fg' : 'bg-accent-3 text-accent-11',\n      )}\n      aria-hidden=\"true\"\n    >\n      <motion.span\n        className=\"inline-flex\"\n        initial={prefersReduced ? false : { opacity: 0, scale: 0.55 }}\n        animate={{ opacity: settled ? 1 : 0, scale: settled ? 1 : 0.55 }}\n        transition={settleT}\n      >\n        <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n      </motion.span>\n      <AnimatePresence>\n        {!settled && (\n          <motion.span\n            className={cn(\n              'absolute inset-0 inline-flex items-center justify-center',\n              toneBg[resolved.tone],\n              toneFg[resolved.tone],\n            )}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={fadeT}\n          >\n            <IconProvider size=\"md\">{normalizeIcon(resolved.icon, 'md')}</IconProvider>\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n}\n\nfunction FlashPresetGlyph({ preset }: { preset: FlashPreset }) {\n  const { Glyph } = FLASH_PRESETS[preset]\n  return <Glyph />\n}\n\nStatFlash.displayName = 'StatFlash'\n"],"mappings":";;;;;;;;;;AA8BA,IAAM,IAAsF;CAC1F,IAAI;EAAE,MAAM;EAAW,OAAO;CAAY;CAC1C,MAAM;EAAE,MAAM;EAAS,OAAO;CAAc;CAC5C,MAAM;EAAE,MAAM;EAAW,OAAO;CAAU;CAC1C,QAAQ;EAAE,MAAM;EAAU,OAAO;CAAS;CAC1C,OAAO;EAAE,MAAM;EAAW,OAAO;CAAkB;CACnD,MAAM;EAAE,MAAM;EAAQ,OAAO;CAAS;AACxC,GAEM,IAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,QAAQ;AACV,GAEM,IAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,QAAQ;AACV,GAKM,IAAuF;CAC3F,MAAM;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;CAAK;CAC/D,QAAQ;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;CAAK;CACjE,MAAM;EAAE,QAAQ;EAAK,QAAQ,EAAQ;EAAQ,MAAM,EAAO;CAAQ;AACpE;AA+BA,SAAgB,EAAU,EACxB,SACA,UACA,UAAO,QACP,WAAQ,UACR,WACA,qBACA,sBACiB;CACjB,IAAM,IAAiB,EAAiB,GAClC,IAAS,EAAO,IAChB,IAAO,KAAU,EAAO,QACxB,IAAU,KAAoB,EAAO,QACrC,IAAQ,KAAmB,EAAO,MAElC,IACJ,OAAO,KAAU,WACb;EAAE,MAAM,EAAc,EAAM,CAAC;EAAM,MAAM,kBAAC,GAAD,EAAkB,QAAQ,EAAQ,CAAA;CAAE,IAC7E,GAEA,CAAC,GAAS,KAAc,EAAM,SAAS,EAAK;CAWlD,OATA,EAAM,gBAAgB;EACpB,IAAI,GAAgB;GAClB,EAAW,EAAI;GACf;EACF;EACA,IAAM,IAAI,iBAAiB,EAAW,EAAI,GAAG,CAAI;EACjD,aAAa,aAAa,CAAC;CAC7B,GAAG,CAAC,GAAgB,CAAI,CAAC,GAGvB,kBAAC,QAAD;EACE,WAAW,EACT,4FACA,MAAS,UAAU,+BAA+B,4BACpD;EACA,eAAY;YALd,CAOE,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,SAAS,MAAyB;IAAE,SAAS;IAAG,OAAO;GAAK;GAC5D,SAAS;IAAE,SAAS;IAAiB,OAAO,IAAU,IAAI;GAAK;GAC/D,YAAY;aAEZ,kBAAC,GAAD;IAAc,MAAK;cAAM,EAAc,GAAM,IAAI;GAAgB,CAAA;EACtD,CAAA,GACb,kBAAC,GAAD,EAAA,UACG,CAAC,KACA,kBAAC,EAAO,MAAR;GACE,WAAW,EACT,4DACA,EAAO,EAAS,OAChB,EAAO,EAAS,KAClB;GACA,SAAS,EAAE,SAAS,EAAE;GACtB,SAAS,EAAE,SAAS,EAAE;GACtB,MAAM,EAAE,SAAS,EAAE;GACnB,YAAY;aAEZ,kBAAC,GAAD;IAAc,MAAK;cAAM,EAAc,EAAS,MAAM,IAAI;GAAgB,CAAA;EAC/D,CAAA,EAEA,CAAA,CACb;;AAEV;AAEA,SAAS,EAAiB,EAAE,aAAmC;CAC7D,IAAM,EAAE,aAAU,EAAc;CAChC,OAAO,kBAAC,GAAD,CAAQ,CAAA;AACjB;AAEA,EAAU,cAAc"}

package/dist/ui/stepper.d.ts

@@ -80,7 +80,7 @@ interface StepperContentProps {
     children: React.ReactNode;
     className?: string;
 }
-declare function StepperContent({ activeStep, children, className }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperContent({ activeStep, children, className }: StepperContentProps): React.JSX.Element;
 declare namespace StepperContent {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAoBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAsDZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAID,QAAA,MAAM,IAAI,kFA0GT,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAyB/E;kBAzBQ,cAAc;;;AA+BvB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAoBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAsDZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAID,QAAA,MAAM,IAAI,kFA0GT,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,qBAyB/E;kBAzBQ,cAAc;;;AA+BvB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}

package/dist/ui/stepper.js

@@ -103,7 +103,7 @@ var u = i.createContext({
 	},
 	exit: (e) => ({
 		opacity: 0,
-		x: e * -p
+		x: e * -40
 	})
 };
 function h({ activeStep: e, children: r, className: a }) {

package/dist/ui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: IconInput\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-pill text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon ? <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider> : (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Step, Stepper, StepperContent, type StepperContentProps,type StepperProps, type StepProps }\n"],"mappings":"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"}
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: IconInput\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-pill text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon ? <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider> : (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Step, Stepper, StepperContent, type StepperContentProps,type StepperProps, type StepProps }\n"],"mappings":"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"}

package/dist/ui/surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"surface.js","names":[],"sources":["../../src/ui/surface.tsx"],"sourcesContent":["// @server-safe\nimport { Slot } from '@primitives/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\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\nconst surfaceVariants = cva('', {\n  variants: {\n    // Elevation binds a surface-bg token to a shadow token — the one axis that\n    // matters. `flat` sits on the page with no shadow (pair with `bordered` for a\n    // Carbon-Tile edge); `raised` is the card level; `floating`/`overlay` are the\n    // popover/menu/toast levels. bg + shadow always move together, so there is no\n    // way to produce an un-tokened surface.\n    elevation: {\n      flat: 'bg-surface-raised',\n      raised: 'bg-surface-raised shadow-raised',\n      floating: 'bg-surface-overlay shadow-floating',\n      overlay: 'bg-surface-overlay shadow-overlay',\n    },\n    // Simple, symmetric all-side padding — NOT Card's gap model. This is what keeps\n    // Surface low-level: a plain box you can drop content into. Reach for Card when\n    // you want the header/content/footer slot rhythm.\n    padding: {\n      none: '',\n      sm: 'p-ds-04',\n      md: 'p-ds-05',\n      lg: 'p-ds-06',\n    },\n    radius: {\n      none: 'rounded-none',\n      control: 'rounded-control',\n      surface: 'rounded-surface',\n      overlay: 'rounded-overlay',\n      pill: 'rounded-pill',\n    },\n    // Border-led edge (Carbon-Tile style). Meant for `elevation=\"flat\"`; combining it\n    // with a shadowed elevation is the double-edge anti-pattern and dev-warns below.\n    bordered: {\n      true: 'border border-surface-border-strong',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    elevation: 'raised',\n    padding: 'none',\n    radius: 'surface',\n    bordered: false,\n  },\n})\n\nexport interface SurfaceProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof surfaceVariants> {\n  /** Render as the passed child element (Radix Slot) instead of a `div` — wrap a link,\n   * section, or `motion.div` without adding a wrapper node. */\n  asChild?: boolean\n}\n\n/**\n * Surface — the low-level elevated container primitive.\n *\n * The building block every panel, card, popover, and toast surface sits on. It owns\n * exactly one job: paint a tokened surface (background + shadow), with optional radius,\n * padding, and border. It has no slots, no color axis, and no motion — those belong to\n * the components composed on top of it (Card = Surface + gap-model padding + slots).\n *\n * **Elevation:** `flat` (bg, no shadow — pair with `bordered`) | `raised` (card level,\n * default) | `floating` (toasts, floating toolbars) | `overlay` (popovers, menus, dialogs).\n *\n * **Padding:** `none` (default) | `sm` (12px) | `md` (16px) | `lg` (24px) — simple all-side.\n *\n * **Edge vs. elevation:** use a shadow (`raised`/`floating`/`overlay`) OR a `bordered`\n * `flat` — never both (the double-edge anti-pattern; dev-warns).\n *\n * @example\n * // A raised panel with comfortable padding:\n * <Surface elevation=\"raised\" padding=\"md\">…</Surface>\n *\n * @example\n * // An on-page, border-led tile (no shadow):\n * <Surface elevation=\"flat\" bordered padding=\"sm\">…</Surface>\n *\n * @example\n * // Wrap a link as the surface itself:\n * <Surface asChild elevation=\"raised\" padding=\"sm\">\n *   <a href=\"/upgrade\">…</a>\n * </Surface>\n */\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  (\n    { className, elevation, padding, radius, bordered, asChild = false, ...props },\n    ref,\n  ) => {\n    if (\n      typeof process !== 'undefined' &&\n      process?.env.NODE_ENV !== 'production' &&\n      bordered &&\n      (elevation ?? 'raised') !== 'flat'\n    ) {\n      console.warn(\n        '[shilp-sutra] <Surface> combines `bordered` with a raised `elevation` — the double-edge anti-pattern. Pick one: use elevation=\"flat\" with `bordered`, or drop `bordered` and let the elevation carry the edge.',\n      )\n    }\n    const Comp = asChild ? Slot : 'div'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          surfaceVariants({ elevation, padding, radius, bordered }),\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSurface.displayName = 'Surface'\n\nexport { Surface, surfaceVariants }\n"],"mappings":";;;;;;AAUA,IAAM,IAAkB,EAAI,IAAI;CAC9B,UAAU;EAMR,WAAW;GACT,MAAM;GACN,QAAQ;GACR,UAAU;GACV,SAAS;GACV;EAID,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;GACT,MAAM;GACP;EAGD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,WAAW;EACX,SAAS;EACT,QAAQ;EACR,UAAU;EACX;CACF,CAAC,EAwCI,IAAU,EAAM,YAElB,EAAE,cAAW,cAAW,YAAS,WAAQ,aAAU,aAAU,IAAO,GAAG,KACvE,OAGE,OAAO,UAAY,OAAA,QAAA,IAAA,aACO,gBAC1B,MACC,KAAa,cAAc,UAE5B,QAAQ,KACN,mNACD,EAID,kBAFW,IAAU,IAAO,OAE5B;CACO;CACL,WAAW,EACT,EAAgB;EAAE;EAAW;EAAS;EAAQ;EAAU,CAAC,EACzD,EACD;CACD,GAAI;CACJ,CAAA,EAGP;AACD,EAAQ,cAAc"}
+{"version":3,"file":"surface.js","names":[],"sources":["../../src/ui/surface.tsx"],"sourcesContent":["// @server-safe\nimport { Slot } from '@primitives/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\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\nconst surfaceVariants = cva('', {\n  variants: {\n    // Elevation binds a surface-bg token to a shadow token — the one axis that\n    // matters. `flat` sits on the page with no shadow (pair with `bordered` for a\n    // Carbon-Tile edge); `raised` is the card level; `floating`/`overlay` are the\n    // popover/menu/toast levels. bg + shadow always move together, so there is no\n    // way to produce an un-tokened surface.\n    elevation: {\n      flat: 'bg-surface-raised',\n      raised: 'bg-surface-raised shadow-raised',\n      floating: 'bg-surface-overlay shadow-floating',\n      overlay: 'bg-surface-overlay shadow-overlay',\n    },\n    // Simple, symmetric all-side padding — NOT Card's gap model. This is what keeps\n    // Surface low-level: a plain box you can drop content into. Reach for Card when\n    // you want the header/content/footer slot rhythm.\n    padding: {\n      none: '',\n      sm: 'p-ds-04',\n      md: 'p-ds-05',\n      lg: 'p-ds-06',\n    },\n    radius: {\n      none: 'rounded-none',\n      control: 'rounded-control',\n      surface: 'rounded-surface',\n      overlay: 'rounded-overlay',\n      pill: 'rounded-pill',\n    },\n    // Border-led edge (Carbon-Tile style). Meant for `elevation=\"flat\"`; combining it\n    // with a shadowed elevation is the double-edge anti-pattern and dev-warns below.\n    bordered: {\n      true: 'border border-surface-border-strong',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    elevation: 'raised',\n    padding: 'none',\n    radius: 'surface',\n    bordered: false,\n  },\n})\n\nexport interface SurfaceProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof surfaceVariants> {\n  /** Render as the passed child element (Radix Slot) instead of a `div` — wrap a link,\n   * section, or `motion.div` without adding a wrapper node. */\n  asChild?: boolean\n}\n\n/**\n * Surface — the low-level elevated container primitive.\n *\n * The building block every panel, card, popover, and toast surface sits on. It owns\n * exactly one job: paint a tokened surface (background + shadow), with optional radius,\n * padding, and border. It has no slots, no color axis, and no motion — those belong to\n * the components composed on top of it (Card = Surface + gap-model padding + slots).\n *\n * **Elevation:** `flat` (bg, no shadow — pair with `bordered`) | `raised` (card level,\n * default) | `floating` (toasts, floating toolbars) | `overlay` (popovers, menus, dialogs).\n *\n * **Padding:** `none` (default) | `sm` (12px) | `md` (16px) | `lg` (24px) — simple all-side.\n *\n * **Edge vs. elevation:** use a shadow (`raised`/`floating`/`overlay`) OR a `bordered`\n * `flat` — never both (the double-edge anti-pattern; dev-warns).\n *\n * @example\n * // A raised panel with comfortable padding:\n * <Surface elevation=\"raised\" padding=\"md\">…</Surface>\n *\n * @example\n * // An on-page, border-led tile (no shadow):\n * <Surface elevation=\"flat\" bordered padding=\"sm\">…</Surface>\n *\n * @example\n * // Wrap a link as the surface itself:\n * <Surface asChild elevation=\"raised\" padding=\"sm\">\n *   <a href=\"/upgrade\">…</a>\n * </Surface>\n */\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  (\n    { className, elevation, padding, radius, bordered, asChild = false, ...props },\n    ref,\n  ) => {\n    if (\n      typeof process !== 'undefined' &&\n      process?.env.NODE_ENV !== 'production' &&\n      bordered &&\n      (elevation ?? 'raised') !== 'flat'\n    ) {\n      console.warn(\n        '[shilp-sutra] <Surface> combines `bordered` with a raised `elevation` — the double-edge anti-pattern. Pick one: use elevation=\"flat\" with `bordered`, or drop `bordered` and let the elevation carry the edge.',\n      )\n    }\n    const Comp = asChild ? Slot : 'div'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          surfaceVariants({ elevation, padding, radius, bordered }),\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSurface.displayName = 'Surface'\n\nexport { Surface, surfaceVariants }\n"],"mappings":";;;;;;AAUA,IAAM,IAAkB,EAAI,IAAI;CAC9B,UAAU;EAMR,WAAW;GACT,MAAM;GACN,QAAQ;GACR,UAAU;GACV,SAAS;EACX;EAIA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;GACT,MAAM;EACR;EAGA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,WAAW;EACX,SAAS;EACT,QAAQ;EACR,UAAU;CACZ;AACF,CAAC,GAwCK,IAAU,EAAM,YAElB,EAAE,cAAW,cAAW,YAAS,WAAQ,aAAU,aAAU,IAAO,GAAG,KACvE,OAGE,OAAO,UAAY,OAAA,QAAA,IAAA,aACO,gBAC1B,MACC,KAAa,cAAc,UAE5B,QAAQ,KACN,kNACF,GAIA,kBAFW,IAAU,IAAO,OAE5B;CACO;CACL,WAAW,EACT,EAAgB;EAAE;EAAW;EAAS;EAAQ;CAAS,CAAC,GACxD,CACF;CACA,GAAI;AACL,CAAA,EAGP;AACA,EAAQ,cAAc"}

package/dist/ui/switch.d.ts

@@ -1,6 +1,6 @@
 "use client";
 import { FieldState } from './lib/field-state';
-import * as SwitchPrimitives from "../primitives/react-switch";
+import * as SwitchPrimitives from '../primitives/react-switch';
 import * as React from "react";
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
     /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */

package/dist/ui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: isChecked ? travel : 0 }}\n          whileTap={{ scale: 0.85 }}\n          transition={springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;EAAI;CAC3D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;EAAI;CACjE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;EAAI;CAC5D,EAGK,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEK,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;CACV,EAUK,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,GAAc,EACzB,IAAQ,EAAkB,GAAW,EAAS,MAAM,EACpD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,GAAM,EAC/E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;AAIlB,EAHI,MAAY,KAAA,KACd,EAAmB,EAAM,EAE3B,IAAkB,EAAM;IAE1B,CAAC,GAAS,EAAgB,CAC3B;AAED,QACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,EACD;EACQ;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,EACD;IACD,SAAS,EAAE,GAAG,IAAY,IAAS,GAAG;IACtC,UAAU,EAAE,OAAO,KAAM;IACzB,YAAY,EAAQ;cAEnB;IACW,CAAA;GACS,CAAA;EACH,CAAA;EAE1B;AACF,EAAO,cAAA,EAAoC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: isChecked ? travel : 0 }}\n          whileTap={{ scale: 0.85 }}\n          transition={springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;CAC1D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;CAAG;CAChE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;AAC5D,GAGM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEM,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;AACX,GAUM,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,EAAK,GAC9E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;EAIlB,AAHI,MAAY,KAAA,KACd,EAAmB,CAAK,GAE1B,IAAkB,CAAK;CACzB,GACA,CAAC,GAAS,CAAe,CAC3B;CAEA,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,CACF;EACS;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,CACF;IACA,SAAS,EAAE,GAAG,IAAY,IAAS,EAAE;IACrC,UAAU,EAAE,OAAO,IAAK;IACxB,YAAY,EAAQ;cAEnB;GACU,CAAA;EACS,CAAA;CACH,CAAA;AAE3B,CAAC;AACD,EAAO,cAAA,EAAoC"}

package/dist/ui/table-row-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row-link.js","names":[],"sources":["../../src/ui/table-row-link.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { useLink } from './lib/link-context'\nimport { cn } from './lib/utils'\n\nexport interface TableRowLinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string\n  /**\n   * Stretch the click target across the whole row via a pseudo-element\n   * (a real `<a>`, so cmd/ctrl+click, middle-click, and \"open in new tab\"\n   * all work). Trade-off: the overlay blocks text selection inside the row —\n   * pass `stretch={false}` for a title-only link (GitHub-style) when row text\n   * must stay selectable.\n   * @default true\n   */\n  stretch?: boolean\n}\n\n/**\n * A real-anchor row link for tables — place inside the row's primary\n * `<TableCell className=\"relative\">`. Replaces `onClick`-on-row navigation,\n * which breaks cmd+click / middle-click / context-menu and isn't announced as\n * a link by screen readers (never put onClick on a `<tr>`).\n *\n * Mechanics: the stretch pseudo-element is anchored to the CELL, not the row —\n * Safari ignores `position: relative` on `<tr>` — and spans `100vw`; the Table\n * root clips it (`overflow-x-clip`). Keyboard focus draws a row-level ring via\n * TableRow's `has-[[data-slot=row-link]:focus-visible]` rule, so the anchor\n * suppresses its own outline.\n *\n * Other interactive elements in the row (menu buttons, checkboxes) must sit\n * above the stretch: give them `className=\"relative z-[1]\"` (IconButton etc.).\n *\n * @example\n * <TableRow>\n *   <TableCell className=\"relative\">\n *     <TableRowLink href={`/projects/${id}`}>{name}</TableRowLink>\n *   </TableCell>\n *   <TableCell><Badge color=\"success\">Active</Badge></TableCell>\n *   <TableCell>\n *     <TableRowActions>\n *       <IconButton className=\"relative z-[1]\" size=\"xs\" variant=\"ghost\" aria-label={`Actions for ${name}`} icon={<IconDots />} />\n *     </TableRowActions>\n *   </TableCell>\n * </TableRow>\n */\nconst TableRowLink = React.forwardRef<HTMLAnchorElement, TableRowLinkProps>(\n  ({ className, stretch = true, children, ...props }, ref) => {\n    const Link = useLink()\n    return (\n      <Link\n        ref={ref}\n        data-slot=\"row-link\"\n        className={cn(\n          'font-medium text-surface-fg no-underline',\n          stretch\n            ? // row ring comes from TableRow's has-[] rule; suppress the anchor's own\n              'focus-visible:outline-hidden after:absolute after:inset-y-0 after:left-0 after:w-[100vw] after:content-[\"\"]'\n            : 'rounded-control-inner hover:underline focus-visible:outline-2 focus-visible:outline-accent-9 focus-visible:outline-offset-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Link>\n    )\n  },\n)\nTableRowLink.displayName = 'TableRowLink'\n\nexport { TableRowLink }\n"],"mappings":";;;;;;AAiDA,IAAM,IAAe,EAAM,YACxB,EAAE,cAAW,aAAU,IAAM,aAAU,GAAG,KAAS,MAGhD,kBAFW,GAAS,EAEpB;CACO;CACL,aAAU;CACV,WAAW,EACT,4CACA,IAEI,kHACA,+HACJ,EACD;CACD,GAAI;CAEH;CACI,CAAA,CAGZ;AACD,EAAa,cAAc"}
+{"version":3,"file":"table-row-link.js","names":[],"sources":["../../src/ui/table-row-link.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { useLink } from './lib/link-context'\nimport { cn } from './lib/utils'\n\nexport interface TableRowLinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string\n  /**\n   * Stretch the click target across the whole row via a pseudo-element\n   * (a real `<a>`, so cmd/ctrl+click, middle-click, and \"open in new tab\"\n   * all work). Trade-off: the overlay blocks text selection inside the row —\n   * pass `stretch={false}` for a title-only link (GitHub-style) when row text\n   * must stay selectable.\n   * @default true\n   */\n  stretch?: boolean\n}\n\n/**\n * A real-anchor row link for tables — place inside the row's primary\n * `<TableCell className=\"relative\">`. Replaces `onClick`-on-row navigation,\n * which breaks cmd+click / middle-click / context-menu and isn't announced as\n * a link by screen readers (never put onClick on a `<tr>`).\n *\n * Mechanics: the stretch pseudo-element is anchored to the CELL, not the row —\n * Safari ignores `position: relative` on `<tr>` — and spans `100vw`; the Table\n * root clips it (`overflow-x-clip`). Keyboard focus draws a row-level ring via\n * TableRow's `has-[[data-slot=row-link]:focus-visible]` rule, so the anchor\n * suppresses its own outline.\n *\n * Other interactive elements in the row (menu buttons, checkboxes) must sit\n * above the stretch: give them `className=\"relative z-[1]\"` (IconButton etc.).\n *\n * @example\n * <TableRow>\n *   <TableCell className=\"relative\">\n *     <TableRowLink href={`/projects/${id}`}>{name}</TableRowLink>\n *   </TableCell>\n *   <TableCell><Badge color=\"success\">Active</Badge></TableCell>\n *   <TableCell>\n *     <TableRowActions>\n *       <IconButton className=\"relative z-[1]\" size=\"xs\" variant=\"ghost\" aria-label={`Actions for ${name}`} icon={<IconDots />} />\n *     </TableRowActions>\n *   </TableCell>\n * </TableRow>\n */\nconst TableRowLink = React.forwardRef<HTMLAnchorElement, TableRowLinkProps>(\n  ({ className, stretch = true, children, ...props }, ref) => {\n    const Link = useLink()\n    return (\n      <Link\n        ref={ref}\n        data-slot=\"row-link\"\n        className={cn(\n          'font-medium text-surface-fg no-underline',\n          stretch\n            ? // row ring comes from TableRow's has-[] rule; suppress the anchor's own\n              'focus-visible:outline-hidden after:absolute after:inset-y-0 after:left-0 after:w-[100vw] after:content-[\"\"]'\n            : 'rounded-control-inner hover:underline focus-visible:outline-2 focus-visible:outline-accent-9 focus-visible:outline-offset-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Link>\n    )\n  },\n)\nTableRowLink.displayName = 'TableRowLink'\n\nexport { TableRowLink }\n"],"mappings":";;;;;;AAiDA,IAAM,IAAe,EAAM,YACxB,EAAE,cAAW,aAAU,IAAM,aAAU,GAAG,KAAS,MAGhD,kBAFW,EAEV,GAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,4CACA,IAEI,kHACA,+HACJ,CACF;CACA,GAAI;CAEH;AACG,CAAA,CAGZ;AACA,EAAa,cAAc"}

package/dist/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-ds-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-ds-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-ds-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;CACd,EAqBK,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,4GACA,EAAe,IACf,KAAW,gDACX,EACD;EACD,GAAI;EACJ,CAAA;CACE,CAAA,CAET;AACD,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,EAAU;CAAE,GAAI;CAAS,CAAA,CAC/G;AACF,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,EAAU;CACtD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,6KACA,2KACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,mNACA,KAAW,cACX,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,EACD;CACD,GAAI;CACJ,CAAA,CAEL;AACD,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,6CAA6C,EAAU;CACrE,GAAI;CACJ,CAAA,CACF;AACF,EAAa,cAAc"}
+{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-ds-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-ds-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-ds-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,4GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,6KACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,mNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,6CAA6C,CAAS;CACpE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}

package/dist/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        'bg-surface-raised p-ds-02 rounded-surface gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-control',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-ds-xs',\n        md: 'px-ds-05 py-ds-03 text-ds-sm',\n        lg: 'px-ds-06 py-ds-04 text-ds-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-control bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex min-w-0 items-center gap-ds-02\">\n        <span className=\"truncate\">{children}</span>\n      </span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsContent,TabsList, TabsTrigger }\nexport type { TabsColor, TabsOrientation,TabsSize }\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        'bg-surface-raised p-ds-02 rounded-surface gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-control',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-ds-xs',\n        md: 'px-ds-05 py-ds-03 text-ds-sm',\n        lg: 'px-ds-06 py-ds-04 text-ds-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-control bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex min-w-0 items-center gap-ds-02\">\n        <span className=\"truncate\">{children}</span>\n      </span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsContent,TabsList, TabsTrigger }\nexport type { TabsColor, TabsOrientation,TabsSize }\n"],"mappings":"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"}