@devalok/shilp-sutra 0.49.0 → 0.49.2

package/dist/ui/button.js.map

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

package/dist/ui/card.js

@@ -1,6 +1,6 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { t as n } from "../_chunks/vendor-utils.js";
+import { cva as n } from "../_chunks/vendor-utils.js";
 import { cn as r } from "./lib/utils.js";
 import * as i from "react";
 import { jsx as a } from "react/jsx-runtime";

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

@@ -1,10 +1,10 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
-import { r as o, t as s } from "../../_chunks/colors.js";
-import { n as c, t as l } from "../../_chunks/grid-lines.js";
-import { t as u } from "../../_chunks/chart-container.js";
+import { ChartTooltip as r, Legend as i, useChartTooltip as a } from "../../_chunks/tooltip.js";
+import { resolveColor as o, useReducedMotion as s } from "../../_chunks/colors.js";
+import { Axis as c, GridLines as l } from "../../_chunks/grid-lines.js";
+import { ChartContainer as u } from "../../_chunks/chart-container.js";
 import * as d from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { motion as h } from "framer-motion";
@@ -12,7 +12,7 @@ import { scaleLinear as g, scalePoint as _ } from "d3-scale";
 import { area as v, curveLinear as y, curveMonotoneX as b, line as x, stack as S, stackOffsetNone as C, stackOrderNone as w } from "d3-shape";
 //#region src/ui/charts/area-chart.tsx
 var T = d.forwardRef(({ data: T, xKey: E, series: D, curved: O = !1, stacked: k = !1, fillOpacity: A = .3, gradient: j = !1, strokeWidth: M = 2, height: N = 300, showGrid: P = !0, showTooltip: F = !0, showLegend: I = !1, animate: L = !0, xLabel: R, yLabel: z, ariaLabel: B, className: V, ...H }, U) => {
-	let { tooltip: W, show: G, hide: K } = r(), q = o(), J = L && !q, Y = D.map((e, t) => s(e.color, t)), X = d.useId();
+	let { tooltip: W, show: G, hide: K } = a(), q = s(), J = L && !q, Y = D.map((e, t) => o(e.color, t)), X = d.useId();
 	return /* @__PURE__ */ m(h.div, {
 		ref: U,
 		className: n("relative", V),
@@ -161,7 +161,7 @@ var T = d.forwardRef(({ data: T, xKey: E, series: D, curved: O = !1, stacked: k
 					] });
 				}
 			}),
-			F && /* @__PURE__ */ p(a, { state: W }),
+			F && /* @__PURE__ */ p(r, { state: W }),
 			I && D.length > 1 && /* @__PURE__ */ p(i, {
 				items: D.map((e, t) => ({
 					label: e.label,

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

@@ -1,17 +1,17 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
-import { r as o, t as s } from "../../_chunks/colors.js";
-import { n as c, t as l } from "../../_chunks/grid-lines.js";
-import { t as u } from "../../_chunks/chart-container.js";
+import { ChartTooltip as r, Legend as i, useChartTooltip as a } from "../../_chunks/tooltip.js";
+import { resolveColor as o, useReducedMotion as s } from "../../_chunks/colors.js";
+import { Axis as c, GridLines as l } from "../../_chunks/grid-lines.js";
+import { ChartContainer as u } from "../../_chunks/chart-container.js";
 import * as d from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { motion as h } from "framer-motion";
 import { scaleBand as g, scaleLinear as _ } from "d3-scale";
 //#region src/ui/charts/bar-chart.tsx
 var v = d.forwardRef(({ data: d, xKey: v, yKey: y, orientation: b = "vertical", stacked: x = !1, grouped: S = !1, color: C, height: w = 300, showGrid: T = !0, showTooltip: E = !0, showLegend: D = !1, animate: O = !0, barRadius: k = 4, xLabel: A, yLabel: j, seriesLabels: M, ariaLabel: N, className: P, ...F }, I) => {
-	let { tooltip: L, show: R, hide: z } = r(), B = o(), V = b === "vertical", H = O && !B, U = Array.isArray(y) ? y : [y], W = U.length > 1, G = W ? U.map((e, t) => s(Array.isArray(C) ? C[t] : typeof C == "string" ? C : void 0, t)) : [s(typeof C == "string" ? C : Array.isArray(C) ? C[0] : void 0, 0)];
+	let { tooltip: L, show: R, hide: z } = a(), B = s(), V = b === "vertical", H = O && !B, U = Array.isArray(y) ? y : [y], W = U.length > 1, G = W ? U.map((e, t) => o(Array.isArray(C) ? C[t] : typeof C == "string" ? C : void 0, t)) : [o(typeof C == "string" ? C : Array.isArray(C) ? C[0] : void 0, 0)];
 	return /* @__PURE__ */ m(h.div, {
 		ref: I,
 		className: n("relative", P),
@@ -111,7 +111,7 @@ var v = d.forwardRef(({ data: d, xKey: v, yKey: y, orientation: b = "vertical",
 					] });
 				}
 			}),
-			E && /* @__PURE__ */ p(a, { state: L }),
+			E && /* @__PURE__ */ p(r, { state: L }),
 			D && W && /* @__PURE__ */ p(i, {
 				items: U.map((e, t) => ({
 					label: M?.[t] ?? e,

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

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "../../_chunks/chart-container.js";
+import { ChartContainer as e } from "../../_chunks/chart-container.js";
 export { e as ChartContainer };

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

@@ -1,14 +1,14 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/colors.js";
+import { getTransitionDuration as r, resolveColor as i, useReducedMotion as a } from "../../_chunks/colors.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { motion as l } from "framer-motion";
 import { arc as u } from "d3-shape";
 //#region src/ui/charts/gauge-chart.tsx
 var d = (e) => e * Math.PI / 180, f = o.forwardRef(({ value: o, max: f = 100, min: p = 0, label: m, valueLabel: h, color: g, trackColor: _ = "var(--color-surface-border)", height: v = 200, startAngle: y = -120, endAngle: b = 120, thickness: x = 16, animate: S = !0, className: C, ...w }, T) => {
-	let E = i(), D = r(E, S ? 600 : 0), O = S && !E, k = a(g, 0), A = v, j = A / 2, M = Math.min(Math.max(o, p), f), N = f === p ? 0 : (M - p) / (f - p), P = y + (b - y) * N, F = typeof h == "function" ? h(M) : typeof h == "string" ? h : String(M), I = u().innerRadius(j - x).outerRadius(j).startAngle(d(y)).endAngle(d(b)).cornerRadius(x / 2), L = u().innerRadius(j - x).outerRadius(j).startAngle(d(y)).endAngle(d(P)).cornerRadius(x / 2), R = I(null) ?? "", z = L(null) ?? "";
+	let E = a(), D = r(E, S ? 600 : 0), O = S && !E, k = i(g, 0), A = v, j = A / 2, M = Math.min(Math.max(o, p), f), N = f === p ? 0 : (M - p) / (f - p), P = y + (b - y) * N, F = typeof h == "function" ? h(M) : typeof h == "string" ? h : String(M), I = u().innerRadius(j - x).outerRadius(j).startAngle(d(y)).endAngle(d(b)).cornerRadius(x / 2), L = u().innerRadius(j - x).outerRadius(j).startAngle(d(y)).endAngle(d(P)).cornerRadius(x / 2), R = I(null) ?? "", z = L(null) ?? "";
 	return /* @__PURE__ */ s(l.div, {
 		ref: T,
 		className: n("inline-flex flex-col items-center", C),

package/dist/ui/charts/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { r as e } from "../../_chunks/tooltip.js";
-import { t } from "../../_chunks/chart-container.js";
+import { Legend as e } from "../../_chunks/tooltip.js";
+import { ChartContainer as t } from "../../_chunks/chart-container.js";
 import { AreaChart as n } from "./area-chart.js";
 import { BarChart as r } from "./bar-chart.js";
 import { GaugeChart as i } from "./gauge-chart.js";

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

@@ -1,10 +1,10 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
-import { r as o, t as s } from "../../_chunks/colors.js";
-import { n as c, t as l } from "../../_chunks/grid-lines.js";
-import { t as u } from "../../_chunks/chart-container.js";
+import { ChartTooltip as r, Legend as i, useChartTooltip as a } from "../../_chunks/tooltip.js";
+import { resolveColor as o, useReducedMotion as s } from "../../_chunks/colors.js";
+import { Axis as c, GridLines as l } from "../../_chunks/grid-lines.js";
+import { ChartContainer as u } from "../../_chunks/chart-container.js";
 import * as d from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { motion as h } from "framer-motion";
@@ -12,7 +12,7 @@ import { scaleLinear as g, scalePoint as _ } from "d3-scale";
 import { curveLinear as v, curveMonotoneX as y, line as b } from "d3-shape";
 //#region src/ui/charts/line-chart.tsx
 var x = d.forwardRef(({ data: d, xKey: x, series: S, curved: C = !1, showDots: w = !1, dotSize: T = 4, strokeWidth: E = 2, height: D = 300, showGrid: O = !0, showTooltip: k = !0, showLegend: A = !1, animate: j = !0, xLabel: M, yLabel: N, ariaLabel: P, className: F, ...I }, L) => {
-	let { tooltip: R, show: z, hide: B } = r(), V = o(), H = j && !V, U = S.map((e, t) => s(e.color, t));
+	let { tooltip: R, show: z, hide: B } = a(), V = s(), H = j && !V, U = S.map((e, t) => o(e.color, t));
 	return /* @__PURE__ */ m(h.div, {
 		ref: L,
 		className: n("relative", F),
@@ -119,7 +119,7 @@ var x = d.forwardRef(({ data: d, xKey: x, series: S, curved: C = !1, showDots: w
 					] });
 				}
 			}),
-			k && /* @__PURE__ */ p(a, { state: R }),
+			k && /* @__PURE__ */ p(r, { state: R }),
 			A && S.length > 1 && /* @__PURE__ */ p(i, {
 				items: S.map((e, t) => ({
 					label: e.label,

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

@@ -1,8 +1,8 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
-import { r as o, t as s } from "../../_chunks/colors.js";
+import { ChartTooltip as r, Legend as i, useChartTooltip as a } from "../../_chunks/tooltip.js";
+import { resolveColor as o, useReducedMotion as s } from "../../_chunks/colors.js";
 import * as c from "react";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ import { motion as h } from "framer-motion";
 import { arc as g, pie as _ } from "d3-shape";
 //#region src/ui/charts/pie-chart.tsx
 var v = c.forwardRef(({ data: c, variant: v = "pie", innerRadius: y = .6, padAngle: b = 0, cornerRadius: x = 0, height: S = 300, showTooltip: C = !0, showLegend: w = !1, showLabels: T = !1, animate: E = !0, className: D, centerLabel: O, ariaLabel: k, ...A }, j) => {
-	let M = u(null), [N, P] = d(0), [F, I] = d(null), { tooltip: L, show: R, hide: z } = r(), B = o(), V = E && !B;
+	let M = u(null), [N, P] = d(0), [F, I] = d(null), { tooltip: L, show: R, hide: z } = a(), B = s(), V = E && !B;
 	l(() => {
 		if (!M.current) return;
 		let e = new ResizeObserver((e) => {
@@ -19,7 +19,7 @@ var v = c.forwardRef(({ data: c, variant: v = "pie", innerRadius: y = .6, padAng
 		});
 		return e.observe(M.current), () => e.disconnect();
 	}, []);
-	let H = (N > 0 ? Math.min(N, S) : S) / 2, U = v === "donut" ? H * y : 0, W = c.map((e, t) => s(e.color, t)), G = c.reduce((e, t) => e + t.value, 0), K = _().value((e) => e.value).padAngle(b).sort(null)(c), q = g().innerRadius(U).outerRadius(H - 2).cornerRadius(x), J = U + (H - 2 - U) * .7, Y = g().innerRadius(J).outerRadius(J);
+	let H = (N > 0 ? Math.min(N, S) : S) / 2, U = v === "donut" ? H * y : 0, W = c.map((e, t) => o(e.color, t)), G = c.reduce((e, t) => e + t.value, 0), K = _().value((e) => e.value).padAngle(b).sort(null)(c), q = g().innerRadius(U).outerRadius(H - 2).cornerRadius(x), J = U + (H - 2 - U) * .7, Y = g().innerRadius(J).outerRadius(J);
 	return /* @__PURE__ */ m(h.div, {
 		ref: (e) => {
 			M.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
@@ -97,7 +97,7 @@ var v = c.forwardRef(({ data: c, variant: v = "pie", innerRadius: y = .6, padAng
 					})
 				]
 			})
-		}), C && /* @__PURE__ */ p(a, { state: L })] }), w && /* @__PURE__ */ p(i, {
+		}), C && /* @__PURE__ */ p(r, { state: L })] }), w && /* @__PURE__ */ p(i, {
 			items: c.map((e, t) => ({
 				label: e.label,
 				color: W[t]

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

@@ -1,8 +1,8 @@
 "use client";
 import { motionProps as e, tweens as t } from "../lib/motion.js";
 import { cn as n } from "../lib/utils.js";
-import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
-import { r as o, t as s } from "../../_chunks/colors.js";
+import { ChartTooltip as r, Legend as i, useChartTooltip as a } from "../../_chunks/tooltip.js";
+import { resolveColor as o, useReducedMotion as s } from "../../_chunks/colors.js";
 import * as c from "react";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ import { motion as h } from "framer-motion";
 import { curveLinearClosed as g, lineRadial as _ } from "d3-shape";
 //#region src/ui/charts/radar-chart.tsx
 var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5, fillOpacity: S = .25, showDots: C = !1, height: w = 300, showTooltip: T = !0, showLegend: E = !1, animate: D = !0, ariaLabel: O, className: k, ...A }, j) => {
-	let M = u(null), [N, P] = d(0), { tooltip: F, show: I, hide: L } = r(), R = o(), z = D && !R;
+	let M = u(null), [N, P] = d(0), { tooltip: F, show: I, hide: L } = a(), R = s(), z = D && !R;
 	l(() => {
 		if (!M.current) return;
 		let e = new ResizeObserver((e) => {
@@ -19,7 +19,7 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 		});
 		return e.observe(M.current), () => e.disconnect();
 	}, []);
-	let B = (N > 0 ? Math.min(N, w) : w) / 2 - 40, V = y.map((e, t) => s(e.color, t)), H = b ?? Math.max(...c.flatMap((e) => y.map((t) => Number(e[t.key]) || 0)), 1), U = 2 * Math.PI / v.length, W = _().radius((e) => B * e / H).angle((e, t) => t * U).curve(g), G = (e) => v.map((t, n) => Number(c[n]?.[e]) || 0), K = (e, t) => {
+	let B = (N > 0 ? Math.min(N, w) : w) / 2 - 40, V = y.map((e, t) => o(e.color, t)), H = b ?? Math.max(...c.flatMap((e) => y.map((t) => Number(e[t.key]) || 0)), 1), U = 2 * Math.PI / v.length, W = _().radius((e) => B * e / H).angle((e, t) => t * U).curve(g), G = (e) => v.map((t, n) => Number(c[n]?.[e]) || 0), K = (e, t) => {
 		let n = U * e - Math.PI / 2, r = B * t / H;
 		return {
 			x: r * Math.cos(n),
@@ -156,7 +156,7 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 					})
 				]
 			})
-		}), T && /* @__PURE__ */ p(a, { state: F })] }), E && /* @__PURE__ */ p(i, {
+		}), T && /* @__PURE__ */ p(r, { state: F })] }), E && /* @__PURE__ */ p(i, {
 			items: y.map((e, t) => ({
 				label: e.label,
 				color: V[t]

package/dist/ui/charts/sparkline.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn as e } from "../lib/utils.js";
-import { r as t, t as n } from "../../_chunks/colors.js";
+import { resolveColor as t, useReducedMotion as n } from "../../_chunks/colors.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { motion as o } from "framer-motion";
@@ -11,7 +11,7 @@ var d = {
 	duration: 1,
 	ease: "easeOut"
 }, f = r.forwardRef(({ data: r, variant: f = "line", width: p = 120, height: m = 32, color: h, showLastDot: g = !1, strokeWidth: _ = 1.5, animate: v = !0, className: y, ...b }, x) => {
-	let S = n(h, 0), C = t(), w = v && !C;
+	let S = t(h, 0), C = n(), w = v && !C;
 	if (!r.length) return null;
 	let T = f === "bar" ? 1 : _, E = p - T * 2, D = m - T * 2, O = s().domain([0, Math.max(r.length - 1, 1)]).range([T, T + E]), k = Math.min(...r), A = Math.max(...r), j = k === A ? [k - 1, A + 1] : [k, A], M = s().domain(j).range([T + D, T]);
 	if (f === "bar") {

package/dist/ui/chat/index.js

@@ -1,3 +1,3 @@
 "use client";
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../../_chunks/chat.js";
-export { t as DateSeparator, i as Message, e as MessageInput, n as MessageList, a as SystemMessage, r as TypingIndicator, s as UnreadSeparator, o as useMessageContext };
+import { DateSeparator as e, Message as t, MessageInput as n, MessageList as r, SystemMessage as i, TypingIndicator as a, UnreadSeparator as o, useMessageContext as s } from "../../_chunks/chat.js";
+export { e as DateSeparator, t as Message, n as MessageInput, r as MessageList, i as SystemMessage, a as TypingIndicator, o as UnreadSeparator, s as useMessageContext };

package/dist/ui/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
-import { Xt as e, Yt as t } from "../_chunks/primitives.js";
+import { Checkbox as e, CheckboxIndicator as t } from "../_chunks/primitives.js";
 import { durations as n } from "./lib/motion.js";
 import { cn as r } from "./lib/utils.js";
 import { useFormField as i } from "./form.js";
-import { t as a } from "../_chunks/field-state.js";
+import { resolveFieldState as a } from "../_chunks/field-state.js";
 import * as o from "react";
 import { jsx as s } from "react/jsx-runtime";
 import { AnimatePresence as c, motion as l } from "framer-motion";
@@ -24,7 +24,7 @@ var u = {
 	let S = _ !== void 0, [C, w] = o.useState(h ? "indeterminate" : !!y), T = i(), E = a(m, T.state), D = b["aria-describedby"] ?? T.helperTextId, O = b["aria-required"] ?? T.required, k = h ? "indeterminate" : S ? _ : C, A = k === !0 || k === "indeterminate", j = o.useCallback((e) => {
 		S || w(e), v?.(e);
 	}, [S, v]);
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ s(e, {
 		ref: x,
 		checked: S || h ? k : void 0,
 		defaultChecked: !S && !h ? y : void 0,
@@ -34,7 +34,7 @@ var u = {
 		"aria-describedby": D,
 		"aria-required": O || void 0,
 		...b,
-		children: /* @__PURE__ */ s(c, { children: A && /* @__PURE__ */ s(e, {
+		children: /* @__PURE__ */ s(c, { children: A && /* @__PURE__ */ s(t, {
 			forceMount: !0,
 			asChild: !0,
 			children: /* @__PURE__ */ s(l.span, {
@@ -84,6 +84,6 @@ var u = {
 		}) })
 	});
 });
-p.displayName = t.displayName;
+p.displayName = e.displayName;
 //#endregion
 export { p as Checkbox };

package/dist/ui/collapsible.js

@@ -1,14 +1,14 @@
 "use client";
-import { Bn as e, Rn as t, zn as n } from "../_chunks/primitives.js";
+import { Content$3 as e, Root$9 as t, Trigger$10 as n } from "../_chunks/primitives.js";
 import { tweens as r } from "./lib/motion.js";
 import { cn as i } from "./lib/utils.js";
 import * as a from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { motion as s } from "framer-motion";
 //#region src/ui/collapsible.tsx
-var c = n, l = e, u = a.forwardRef(({ className: e, children: n, ...a }, c) => /* @__PURE__ */ o(t, {
+var c = t, l = n, u = a.forwardRef(({ className: t, children: n, ...a }, c) => /* @__PURE__ */ o(e, {
 	ref: c,
-	className: i("overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", e),
+	className: i("overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", t),
 	...a,
 	children: /* @__PURE__ */ o(s.div, {
 		initial: !1,
@@ -17,6 +17,6 @@ var c = n, l = e, u = a.forwardRef(({ className: e, children: n, ...a }, c) => /
 		children: n
 	})
 }));
-u.displayName = t.displayName;
+u.displayName = e.displayName;
 //#endregion
 export { c as Collapsible, u as CollapsibleContent, l as CollapsibleTrigger };

package/dist/ui/color-input.js

@@ -1,8 +1,8 @@
 "use client";
 import { durations as e, springs as t } from "./lib/motion.js";
 import { cn as n } from "./lib/utils.js";
-import { t as r } from "../_chunks/vendor-client.js";
-import { i, r as a, t as o } from "../_chunks/popover.js";
+import { Z as r } from "../_chunks/vendor-client.js";
+import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "../_chunks/popover.js";
 import * as s from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { AnimatePresence as u, motion as d } from "framer-motion";
@@ -174,10 +174,10 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 		ref: k,
 		className: n("inline-flex flex-col", D),
 		...O,
-		children: /* @__PURE__ */ l(o, {
+		children: /* @__PURE__ */ l(i, {
 			open: M,
 			onOpenChange: H,
-			children: [/* @__PURE__ */ c(i, {
+			children: [/* @__PURE__ */ c(o, {
 				asChild: !0,
 				children: E === "inline" ? /* @__PURE__ */ c(d.button, {
 					type: "button",

package/dist/ui/combobox.js

@@ -1,13 +1,13 @@
 "use client";
-import { Gt as e, Jt as t, Kt as n, qt as r } from "../_chunks/primitives.js";
+import { Content2$6 as e, Portal$3 as t, Root2$8 as n, Trigger$8 as r } from "../_chunks/primitives.js";
 import { IconProvider as ee } from "./icon-context.js";
 import { springs as te, tweens as ne } from "./lib/motion.js";
-import { t as i } from "../_chunks/vendor-utils.js";
+import { cva as i } from "../_chunks/vendor-utils.js";
 import { cn as a } from "./lib/utils.js";
 import { Icon as o } from "./icon.js";
 import { useFormField as s } from "./form.js";
-import { t as c } from "../_chunks/normalize-icon.js";
-import { t as re } from "../_chunks/field-state.js";
+import { normalizeIcon as c } from "../_chunks/normalize-icon.js";
+import { resolveFieldState as re } from "../_chunks/field-state.js";
 import * as l from "react";
 import { Fragment as ie, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { IconCheck as f, IconChevronDown as p, IconSearch as m, IconX as h } from "@tabler/icons-react";
@@ -126,7 +126,7 @@ var _ = {
 						className: a("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
 						children: [t.label, /* @__PURE__ */ u("button", {
 							type: "button",
-							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
+							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard",
 							onClick: (t) => de(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,
@@ -158,13 +158,13 @@ var _ = {
 			children: w
 		});
 	}, Q = s(), $ = re(M, Q.state), _e = $ === "error", ve = Q.helperTextId, ye = Q.required;
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ u(n, {
 		open: I,
 		onOpenChange: fe,
 		children: /* @__PURE__ */ d("div", {
 			className: a("relative", le),
 			...N,
-			children: [/* @__PURE__ */ u(t, {
+			children: [/* @__PURE__ */ u(r, {
 				asChild: !0,
 				disabled: E,
 				children: /* @__PURE__ */ d("button", {
@@ -186,7 +186,7 @@ var _ = {
 						className: a("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", I && "rotate-180")
 					})]
 				})
-			}), /* @__PURE__ */ u(n, { children: /* @__PURE__ */ u(e, {
+			}), /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u(e, {
 				asChild: !0,
 				sideOffset: 4,
 				align: "start",