@devalok/shilp-sutra 0.42.1 → 0.44.0

package/dist/ui/split-button.js

@@ -224,7 +224,7 @@ var S = s.forwardRef(function({ children: S, onClick: C, dropdownContent: w, ope
 				scale: .95
 			},
 			transition: { duration: a.moderate01 },
-			className: "rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-floating",
+			className: "rounded-overlay bg-surface-overlay shadow-floating",
 			children: w
 		})
 	}) })] });

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, computePosition, flip, offset, type Placement,shift } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = React.useState(false)\n    const isControlled = openProp !== undefined\n    const isOpen = isControlled ? openProp : internalOpen\n\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLDivElement>(null)\n    const menuId = React.useId()\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (onOpenChange) onOpenChange(value)\n        if (!isControlled) setInternalOpen(value)\n      },\n      [onOpenChange, isControlled],\n    )\n\n    // ── Floating UI positioning ──\n    React.useEffect(() => {\n      if (!isOpen || !anchorRef.current || !floatingRef.current) return\n\n      const anchor = anchorRef.current\n      const floating = floatingRef.current\n\n      const update = () => {\n        computePosition(anchor, floating, {\n          placement: placementProp,\n          middleware: [\n            offset(8),\n            flip({ fallbackPlacements: ['bottom-end', 'top-start', 'bottom-start'] }),\n            shift({ padding: 8 }),\n          ],\n        }).then(({ x, y }) => {\n          Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })\n        })\n      }\n\n      const cleanup = autoUpdate(anchor, floating, update)\n      return cleanup\n    }, [isOpen, placementProp])\n\n    // ── Close on outside click ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleClick = (e: MouseEvent) => {\n        const target = e.target as Node\n        if (\n          anchorRef.current?.contains(target) ||\n          floatingRef.current?.contains(target)\n        ) return\n        setOpen(false)\n      }\n      document.addEventListener('mousedown', handleClick)\n      return () => document.removeEventListener('mousedown', handleClick)\n    }, [isOpen, setOpen])\n\n    // ── Close on Escape ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleKey = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') setOpen(false)\n      }\n      document.addEventListener('keydown', handleKey)\n      return () => document.removeEventListener('keydown', handleKey)\n    }, [isOpen, setOpen])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    return (\n      <>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            ref={anchorRef}\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {/* Dropdown trigger (left) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {/* Dropdown trigger (right) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Floating dropdown panel */}\n        <AnimatePresence>\n          {isOpen && dropdownContent && (\n            <div\n              ref={floatingRef}\n              id={menuId}\n              role=\"menu\"\n              className=\"fixed z-popover\"\n              style={{ top: 0, left: 0 }}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={{ duration: durations.moderate01 }}\n                className=\"rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-floating\"\n              >\n                {dropdownContent}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, computePosition, flip, offset, type Placement,shift } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = React.useState(false)\n    const isControlled = openProp !== undefined\n    const isOpen = isControlled ? openProp : internalOpen\n\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLDivElement>(null)\n    const menuId = React.useId()\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (onOpenChange) onOpenChange(value)\n        if (!isControlled) setInternalOpen(value)\n      },\n      [onOpenChange, isControlled],\n    )\n\n    // ── Floating UI positioning ──\n    React.useEffect(() => {\n      if (!isOpen || !anchorRef.current || !floatingRef.current) return\n\n      const anchor = anchorRef.current\n      const floating = floatingRef.current\n\n      const update = () => {\n        computePosition(anchor, floating, {\n          placement: placementProp,\n          middleware: [\n            offset(8),\n            flip({ fallbackPlacements: ['bottom-end', 'top-start', 'bottom-start'] }),\n            shift({ padding: 8 }),\n          ],\n        }).then(({ x, y }) => {\n          Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })\n        })\n      }\n\n      const cleanup = autoUpdate(anchor, floating, update)\n      return cleanup\n    }, [isOpen, placementProp])\n\n    // ── Close on outside click ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleClick = (e: MouseEvent) => {\n        const target = e.target as Node\n        if (\n          anchorRef.current?.contains(target) ||\n          floatingRef.current?.contains(target)\n        ) return\n        setOpen(false)\n      }\n      document.addEventListener('mousedown', handleClick)\n      return () => document.removeEventListener('mousedown', handleClick)\n    }, [isOpen, setOpen])\n\n    // ── Close on Escape ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleKey = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') setOpen(false)\n      }\n      document.addEventListener('keydown', handleKey)\n      return () => document.removeEventListener('keydown', handleKey)\n    }, [isOpen, setOpen])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    return (\n      <>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            ref={anchorRef}\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {/* Dropdown trigger (left) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {/* Dropdown trigger (right) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Floating dropdown panel */}\n        <AnimatePresence>\n          {isOpen && dropdownContent && (\n            <div\n              ref={floatingRef}\n              id={menuId}\n              role=\"menu\"\n              className=\"fixed z-popover\"\n              style={{ top: 0, left: 0 }}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={{ duration: durations.moderate01 }}\n                className=\"rounded-overlay bg-surface-overlay shadow-floating\"\n              >\n                {dropdownContent}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}

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

@@ -1,10 +1,19 @@
 "use client";
 import { IconInput } from './lib/icon-input';
+import { FlashPreset, FlashSpec, FlashSpeed } from './stat-flash';
 import * as React from 'react';
 /**
  * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,
  * an optional trend delta (with directional arrow icon), and an optional header icon.
  *
+ * **Surface:** delegated to `Card` via `variant` — `default` (ring-in-shadow, no border) |
+ * `elevated` | `outline` (border, no shadow) | `flat`. StatCard composes `<Card>`, so the surface,
+ * padding (gap model), and elevation all live in one place.
+ *
+ * **Accent:** `accentStyle="none"` (default) is neutral; `"icon"` wraps `icon` in an accent chip
+ * (`iconFill="soft" | "solid"`); `"tint"` applies a subtle accent surface wash + accent value.
+ * (Replaces the removed `accent` left-rail prop — see CHANGELOG migration.)
+ *
  * **Delta direction:** `'up'` renders a green trending-up arrow, `'down'` renders a red
  * trending-down arrow, `'neutral'` renders a grey dash. The `delta.value` is a formatted
  * string (e.g. `"+8%"` or `"−120"`).
@@ -41,7 +50,7 @@ import * as React from 'react';
  * />
  * // These are just a few ways — feel free to combine props creatively!
  */
-export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
     /** Heading text for the metric. `title` is an alias for `label`. */
     label?: string;
     /** Alias for `label` — use whichever feels natural. */
@@ -55,6 +64,8 @@ export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
         value: string;
         direction: 'up' | 'down' | 'neutral';
     };
+    /** Where the delta sits relative to the value: `block` (below — default) or `inline` (on the value's baseline, to its right). @default 'block' */
+    deltaPlacement?: 'block' | 'inline';
     icon?: IconInput;
     loading?: boolean;
     /** Comparison period label shown after delta, e.g. "vs last month" */
@@ -63,8 +74,20 @@ export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
     secondaryLabel?: string;
     /** Progress toward a target (0-100). Renders a thin progress bar below the value. */
     progress?: number;
-    /** Color accent for the left border decoration */
-    accent?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    /** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */
+    variant?: 'default' | 'elevated' | 'outline' | 'flat';
+    /** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */
+    accentStyle?: 'none' | 'icon' | 'tint';
+    /** When `accentStyle="icon"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */
+    iconFill?: 'soft' | 'solid';
+    /**
+     * Opt-in entrance flash: the icon chip mounts showing a transient state (e.g. a green up-arrow)
+     * then settles to `icon`. A preset (`'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'`) or an
+     * explicit `{ tone, icon }`. Requires `icon`; implies the icon chip. Off by default.
+     */
+    flash?: FlashPreset | FlashSpec;
+    /** Speed of the entrance flash: `fast` | `normal` | `slow`. @default 'normal' */
+    flashSpeed?: FlashSpeed;
     /** Sparkline data points. Renders a mini SVG line chart in the card. */
     sparkline?: number[];
     /** Make the card clickable with hover state */

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

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7D,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAuGD,QAAA,MAAM,QAAQ,sFAwNb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAKjD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAY,MAAM,cAAc,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,kJAAkJ;IAClJ,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAA;IACrD,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACtC,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC/B,iFAAiF;IACjF,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AA+FD,QAAA,MAAM,QAAQ,sFA2Pb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/stat-card.js

@@ -4,20 +4,15 @@ import { springs as t, tweens as n } from "./lib/motion.js";
 import { cn as r } from "./lib/utils.js";
 import { Icon as i } from "./icon.js";
 import { t as a } from "../_chunks/normalize-icon.js";
-import { n as o } from "../_chunks/link-context.js";
-import * as s from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { IconMinus as d, IconTrendingDown as f, IconTrendingUp as p } from "@tabler/icons-react";
-import { motion as m } from "framer-motion";
+import { Card as o, CardContent as s } from "./card.js";
+import { n as c } from "../_chunks/link-context.js";
+import { StatFlash as l } from "./stat-flash.js";
+import * as u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { IconMinus as m, IconTrendingDown as h, IconTrendingUp as g } from "@tabler/icons-react";
+import { motion as _ } from "framer-motion";
 //#region src/ui/stat-card.tsx
-var h = {
-	default: "border-l-accent-9",
-	success: "border-l-success-9",
-	warning: "border-l-warning-9",
-	error: "border-l-error-9",
-	info: "border-l-info-9"
-};
-function g(e, t, n) {
+function v(e, t, n) {
 	let r = e.filter((e) => Number.isFinite(e));
 	if (r.length < 2) return "";
 	let i = Math.min(...r), a = Math.max(...r) - i || 1, o = t / (r.length - 1);
@@ -26,43 +21,43 @@ function g(e, t, n) {
 		return `${t === 0 ? "M" : "L"}${r.toFixed(1)},${s.toFixed(1)}`;
 	}).join(" ");
 }
-function _({ data: e, colorClass: t }) {
-	let n = s.useId(), i = s.useRef(null), [a, o] = s.useState(0), c = g(e, 80, 32);
-	if (s.useEffect(() => {
+function y({ data: e, colorClass: t }) {
+	let n = u.useId(), i = u.useRef(null), [a, o] = u.useState(0), s = v(e, 80, 32);
+	if (u.useEffect(() => {
 		i.current && o(i.current.getTotalLength());
-	}, [c]), !c) return null;
-	let d = `${c} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
-	return /* @__PURE__ */ u("div", {
+	}, [s]), !s) return null;
+	let c = `${s} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
+	return /* @__PURE__ */ p("div", {
 		className: r("w-20 h-8", t),
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ u("svg", {
+		children: [/* @__PURE__ */ p("svg", {
 			viewBox: "0 0 80 32",
 			className: "w-full h-full overflow-visible",
 			preserveAspectRatio: "none",
 			children: [
-				/* @__PURE__ */ l("defs", { children: /* @__PURE__ */ u("linearGradient", {
+				/* @__PURE__ */ f("defs", { children: /* @__PURE__ */ p("linearGradient", {
 					id: `sparkline-fill-${n}`,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ l("stop", {
+					children: [/* @__PURE__ */ f("stop", {
 						offset: "0%",
 						stopColor: "currentColor",
 						stopOpacity: "0.1"
-					}), /* @__PURE__ */ l("stop", {
+					}), /* @__PURE__ */ f("stop", {
 						offset: "100%",
 						stopColor: "currentColor",
 						stopOpacity: "0"
 					})]
 				}) }),
-				/* @__PURE__ */ l("path", {
-					d,
+				/* @__PURE__ */ f("path", {
+					d: c,
 					fill: `url(#sparkline-fill-${n})`
 				}),
-				/* @__PURE__ */ l("path", {
+				/* @__PURE__ */ f("path", {
 					ref: i,
-					d: c,
+					d: s,
 					fill: "none",
 					stroke: "currentColor",
 					strokeWidth: "1.5",
@@ -76,51 +71,110 @@ function _({ data: e, colorClass: t }) {
 					}
 				})
 			]
-		}), a > 0 && /* @__PURE__ */ l("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
+		}), a > 0 && /* @__PURE__ */ f("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
 	});
 }
-function v({ progress: e, label: t }) {
+function b({ progress: e, label: t }) {
 	let n = Math.max(0, Math.min(100, e)), i = n >= 90 ? "bg-success-9" : n >= 70 ? "bg-warning-9" : "bg-accent-9";
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ f("div", {
 		className: "h-1 w-full rounded-pill bg-surface-raised mt-ds-04",
 		role: "progressbar",
 		"aria-label": `${t} progress`,
 		"aria-valuenow": n,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: r("h-full rounded-pill transition-[width] duration-moderate-02 ease-productive-standard", i),
 			style: { width: `${n}%` }
 		})
 	});
 }
-var y = s.forwardRef(({ className: s, label: g, title: y, value: b, prefix: x, suffix: S, delta: C, icon: w, loading: T, comparisonLabel: E, secondaryLabel: D, progress: O, accent: k, sparkline: A, onClick: j, href: M, footer: N, ...P }, F) => {
-	let I = o(), L = y ?? g ?? "", R = !!(j || M), z = R && !P["aria-label"] ? `View ${L}` : P["aria-label"];
-	if (T) return /* @__PURE__ */ u("div", {
-		ref: F,
-		className: r("rounded-surface border border-surface-border bg-surface-raised shadow-raised p-ds-05b", k && `border-l-[3px] ${h[k]}`, s),
-		...P,
+var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, suffix: w, delta: T, deltaPlacement: E = "block", icon: D, loading: O, comparisonLabel: k, secondaryLabel: A, progress: j, variant: M = "default", accentStyle: N = "none", iconFill: P = "soft", flash: F, flashSpeed: I, sparkline: L, onClick: R, href: z, footer: B, ...V }, H) => {
+	let U = c(), W = x ?? v ?? "", G = (R || z) && !V["aria-label"] ? `View ${W}` : V["aria-label"];
+	if (O) return /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		className: u,
+		...V,
+		children: /* @__PURE__ */ p(s, { children: [
+			/* @__PURE__ */ f("div", { className: "h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05" }),
+			/* @__PURE__ */ f("div", { className: "h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03" }),
+			/* @__PURE__ */ f("div", { className: "h-3 w-16 rounded-control-inner bg-skeleton-base animate-pulse" })
+		] })
+	});
+	let K = T?.direction === "up" ? g : T?.direction === "down" ? h : m, q = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", J = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-accent-11", Y = T ? /* @__PURE__ */ p(_.div, {
+		className: r("flex items-center gap-ds-02 text-ds-sm font-medium", q, E === "block" && "mt-ds-03"),
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		transition: {
+			...t.smooth,
+			delay: .2
+		},
 		children: [
-			/* @__PURE__ */ l("div", { className: "h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05" }),
-			/* @__PURE__ */ l("div", { className: "h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03" }),
-			/* @__PURE__ */ l("div", { className: "h-3 w-16 rounded-control-inner bg-skeleton-base animate-pulse" })
+			/* @__PURE__ */ f(_.span, {
+				className: "inline-flex",
+				initial: {
+					opacity: .5,
+					scale: 1.4
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				transition: t.bouncy,
+				children: /* @__PURE__ */ f(i, {
+					icon: K,
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ f("span", { children: T.value }),
+			k && /* @__PURE__ */ f("span", {
+				className: "text-surface-fg-subtle font-normal",
+				children: k
+			})
 		]
-	});
-	let B = C?.direction === "up" ? p : C?.direction === "down" ? f : d, V = C?.direction === "up" ? "text-success-11" : C?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", H = C?.direction === "up" ? "text-success-11" : C?.direction === "down" ? "text-error-11" : "text-accent-11", U = /* @__PURE__ */ u(c, { children: [
-		/* @__PURE__ */ u("div", {
+	}) : null, X = /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ p("div", {
 			className: "flex items-center justify-between mb-ds-04",
-			children: [/* @__PURE__ */ l(m.p, {
+			children: [/* @__PURE__ */ f(_.p, {
 				className: "text-ds-md font-medium text-surface-fg-muted",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				transition: n.fade,
-				children: L
-			}), /* @__PURE__ */ u("div", {
+				children: W
+			}), /* @__PURE__ */ p("div", {
 				className: "flex items-center gap-ds-03",
-				children: [A && A.length >= 2 && /* @__PURE__ */ l(_, {
-					data: A,
-					colorClass: H
-				}), w && /* @__PURE__ */ l(m.span, {
+				children: [L && L.length >= 2 && /* @__PURE__ */ f(y, {
+					data: L,
+					colorClass: J
+				}), D && F ? /* @__PURE__ */ f(l, {
+					icon: D,
+					flash: F,
+					fill: P,
+					speed: I
+				}) : D ? N === "icon" ? /* @__PURE__ */ f(_.span, {
+					className: r("inline-flex items-center justify-center rounded-control p-ds-02", P === "solid" ? "bg-accent-9 text-accent-fg" : "bg-accent-3 text-accent-11"),
+					initial: {
+						opacity: 0,
+						scale: .96
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					transition: t.snappy,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ f(e, {
+						size: "md",
+						children: a(D, "md")
+					})
+				}) : /* @__PURE__ */ f(_.span, {
 					className: "text-surface-fg-muted",
 					initial: {
 						opacity: 0,
@@ -132,43 +186,46 @@ var y = s.forwardRef(({ className: s, label: g, title: y, value: b, prefix: x, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ l(e, {
+					children: /* @__PURE__ */ f(e, {
 						size: "lg",
-						children: a(w, "lg")
+						children: a(D, "lg")
 					})
-				})]
+				}) : null]
 			})]
 		}),
-		/* @__PURE__ */ l("div", {
-			className: "overflow-hidden",
-			children: /* @__PURE__ */ u(m.p, {
-				className: "inline-block text-ds-3xl font-semibold text-surface-fg",
-				initial: {
-					opacity: 0,
-					y: "100%"
-				},
-				animate: {
-					opacity: 1,
-					y: 0
-				},
-				transition: t.smooth,
-				children: [
-					x && /* @__PURE__ */ l("span", {
-						className: "text-surface-fg-muted text-ds-lg",
-						children: x
-					}),
-					/* @__PURE__ */ l("span", {
-						className: "tabular-nums",
-						children: b
-					}),
-					S && /* @__PURE__ */ l("span", {
-						className: "text-surface-fg-muted text-ds-lg",
-						children: S
-					})
-				]
-			})
+		/* @__PURE__ */ p("div", {
+			className: r(E === "inline" && T && "flex items-baseline gap-ds-03"),
+			children: [/* @__PURE__ */ f("div", {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ p(_.p, {
+					className: r("inline-block text-ds-3xl font-semibold", N === "tint" ? "text-accent-11" : "text-surface-fg"),
+					initial: {
+						opacity: 0,
+						y: "100%"
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					transition: t.smooth,
+					children: [
+						C && /* @__PURE__ */ f("span", {
+							className: "text-surface-fg-muted text-ds-lg",
+							children: C
+						}),
+						/* @__PURE__ */ f("span", {
+							className: "tabular-nums",
+							children: S
+						}),
+						w && /* @__PURE__ */ f("span", {
+							className: "text-surface-fg-muted text-ds-lg",
+							children: w
+						})
+					]
+				})
+			}), E === "inline" && Y]
 		}),
-		D && /* @__PURE__ */ l(m.p, {
+		A && /* @__PURE__ */ f(_.p, {
 			className: "text-ds-sm text-surface-fg-subtle mt-ds-01",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
@@ -176,59 +233,22 @@ var y = s.forwardRef(({ className: s, label: g, title: y, value: b, prefix: x, s
 				...n.fade,
 				delay: .1
 			},
-			children: D
+			children: A
 		}),
-		O != null && /* @__PURE__ */ l(m.div, {
+		j != null && /* @__PURE__ */ f(_.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			transition: {
 				...n.fade,
 				delay: .15
 			},
-			children: /* @__PURE__ */ l(v, {
-				progress: O,
-				label: L
+			children: /* @__PURE__ */ f(b, {
+				progress: j,
+				label: W
 			})
 		}),
-		C && /* @__PURE__ */ u(m.div, {
-			className: r("mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium", V),
-			initial: {
-				opacity: 0,
-				y: 8
-			},
-			animate: {
-				opacity: 1,
-				y: 0
-			},
-			transition: {
-				...t.smooth,
-				delay: .2
-			},
-			children: [
-				/* @__PURE__ */ l(m.span, {
-					className: "inline-flex",
-					initial: {
-						opacity: .5,
-						scale: 1.4
-					},
-					animate: {
-						opacity: 1,
-						scale: 1
-					},
-					transition: t.bouncy,
-					children: /* @__PURE__ */ l(i, {
-						icon: B,
-						size: "sm"
-					})
-				}),
-				/* @__PURE__ */ l("span", { children: C.value }),
-				E && /* @__PURE__ */ l("span", {
-					className: "text-surface-fg-subtle font-normal",
-					children: E
-				})
-			]
-		}),
-		N && /* @__PURE__ */ l(m.div, {
+		E === "block" && Y,
+		B && /* @__PURE__ */ f(_.div, {
 			className: "mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
@@ -236,31 +256,44 @@ var y = s.forwardRef(({ className: s, label: g, title: y, value: b, prefix: x, s
 				...n.fade,
 				delay: .25
 			},
-			children: N
+			children: B
+		})
+	] }), Z = N === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : void 0, Q = /* @__PURE__ */ f(s, { children: X });
+	return z ? /* @__PURE__ */ f(U, {
+		ref: H,
+		href: z,
+		onClick: R,
+		className: "block no-underline",
+		"aria-label": G,
+		...V,
+		children: /* @__PURE__ */ f(o, {
+			variant: M,
+			interactive: !0,
+			className: Z,
+			children: Q
 		})
-	] }), W = r("rounded-surface border border-surface-border bg-surface-raised shadow-raised p-ds-05b", k && `border-l-[3px] ${h[k]}`, R && "cursor-pointer hover:shadow-raised-hover hover:border-surface-border-strong transition-[box-shadow,border-color] duration-fast-02 ease-productive-standard group", s);
-	return M ? /* @__PURE__ */ l(I, {
-		ref: F,
-		href: M,
-		onClick: j,
-		className: r(W, "block no-underline"),
-		"aria-label": z,
-		...P,
-		children: U
-	}) : /* @__PURE__ */ l("div", {
-		ref: F,
-		className: W,
-		onClick: j,
-		role: j ? "button" : void 0,
-		tabIndex: j ? 0 : void 0,
-		"aria-label": z,
-		onKeyDown: j ? (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), j());
-		} : void 0,
-		...P,
-		children: U
+	}) : R ? /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		interactive: !0,
+		className: r(Z, u),
+		role: "button",
+		tabIndex: 0,
+		"aria-label": G,
+		onClick: R,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
+		},
+		...V,
+		children: Q
+	}) : /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		className: r(Z, u),
+		...V,
+		children: Q
 	});
 });
-y.displayName = "StatCard";
+x.displayName = "StatCard";
 //#endregion
-export { y as StatCard };
+export { x as StatCard };