entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/primitives/Badge/Badge.js

@@ -1,9 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { vars } from '../../../theme/contract.css.js';
-import { cx } from '../../../utils/cx.js';
+import React, { useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -35,6 +33,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -90,6 +89,14 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
 import { badgeContrastVar, badgeColorVar, badgeDotStyle, badgeIconStyle, badgeRemoveButtonStyle, badgeRecipe } from './Badge.css.js';
 
 const NAMED_COLOR_MAP = {

package/dist/esm/components/primitives/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;;;;;AAKG;AACH;AAIE;;;;AAKE;;AAEF;AACF;AAEA;AAIA;;;;;;;;;;;;;;AAcG;;AAiBC;AAEA;;AAGI;AACF;;AAKA;AACA;AACD;;;;;AAUM;AA0BT;AAGF;;"}
+{"version":3,"file":"Badge.js","sources":["src/components/primitives/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback } from 'react';\n\nimport { CloseIcon } from '@/components/Icons';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  badgeColorVar,\n  badgeContrastVar,\n  badgeDotStyle,\n  badgeIconStyle,\n  badgeRecipe,\n  badgeRemoveButtonStyle,\n} from './Badge.css';\n\nimport type { BadgeColor, BadgeProps } from './Badge.types';\n\nconst NAMED_COLOR_MAP: Record<string, string> = {\n  neutral: vars.colors.text.muted,\n  primary: vars.colors.accent.primary,\n  info: vars.colors.accent.primary,\n  success: vars.colors.accent.success,\n  warning: vars.colors.accent.warning,\n  error: vars.colors.accent.error,\n};\n\n/**\n * Resolve a `BadgeColor` to a CSS color value.\n *\n * Named values produce a `var(...)` reference into the theme; everything\n * else is treated as a raw CSS color string (hex, rgb, hsl, …).\n */\nfunction resolveBadgeColor(color: BadgeColor): {\n  color: string;\n  contrast: string;\n} {\n  const named = NAMED_COLOR_MAP[color];\n  if (named) {\n    // For neutral we keep contrast as the text primary so solid reads well.\n    const contrast =\n      color === 'neutral' ? vars.colors.text.primary : vars.colors.text.primary;\n    return { color: named, contrast };\n  }\n  return { color, contrast: '#ffffff' };\n}\n\nconst RemoveIcon: React.FC = () => (\n  <CloseIcon size={10} color=\"currentColor\" decorative />\n);\n\n/**\n * A small inline status indicator / tag.\n *\n * Badges are visual labels for status, counts, or tags. Pair with an\n * editor item to indicate its state (e.g. \"DRAFT\", \"ERROR\", \"3 NEW\").\n *\n * @example\n * ```tsx\n * <Badge color=\"success\">Saved</Badge>\n * <Badge variant=\"outline\" color=\"warning\" icon={<WarningIcon />}>\n *   Warning\n * </Badge>\n * <Badge removable onRemove={handleRemove}>feature/foo</Badge>\n * ```\n */\nexport const Badge = /*#__PURE__*/ React.memo<BadgeProps>(\n  ({\n    variant = 'subtle',\n    size = 'sm',\n    color = 'neutral',\n    uppercase = false,\n    icon,\n    removable = false,\n    onRemove,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const resolved = resolveBadgeColor(color);\n\n    const handleRemoveClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onRemove?.(event);\n      },\n      [onRemove]\n    );\n\n    const inlineVars = assignInlineVars({\n      [badgeColorVar]: resolved.color,\n      [badgeContrastVar]: resolved.contrast,\n    });\n\n    return (\n      <span\n        ref={ref}\n        className={cx(\n          badgeRecipe({\n            variant,\n            size,\n            uppercase: uppercase || undefined,\n          }),\n          className\n        )}\n        style={{ ...inlineVars, ...style }}\n        data-testid={testId}\n        {...rest}\n      >\n        {variant === 'dot' && <span className={badgeDotStyle} aria-hidden />}\n        {icon && (\n          <span className={badgeIconStyle} aria-hidden>\n            {icon}\n          </span>\n        )}\n        {children && <span>{children}</span>}\n        {removable && (\n          <button\n            type=\"button\"\n            className={badgeRemoveButtonStyle}\n            onClick={handleRemoveClick}\n            aria-label=\"Remove\"\n          >\n            <RemoveIcon />\n          </button>\n        )}\n      </span>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;;;;;AAKG;AACH;AAIE;;;;AAKE;;AAEF;AACF;AAEA;AAIA;;;;;;;;;;;;;;AAcG;;AAiBC;AAEA;;AAGI;AACF;;AAKA;AACA;AACD;;;;;AAUM;AA0BT;AAGF;;"}

package/dist/esm/components/primitives/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;;AAiBC;AAsBF;AAGF;;"}
+{"version":3,"file":"Button.js","sources":["src/components/primitives/Button/Button.tsx"],"sourcesContent":["'use client';\n\n// src/primitives/Button/Button.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  buttonRecipe,\n  loadingSpinnerStyle,\n  iconWrapperStyle,\n} from './Button.css';\n\nimport type { Size, Variant } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Button sizes optimized for editor interfaces\n */\nexport type ButtonSize = Size;\n\n/**\n * Visual variants for the button\n */\nexport type ButtonVariant = Variant;\n\n/**\n * Base props for the Button component\n */\nexport interface ButtonBaseProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'css'\n> {\n  /**\n   * Button content — text, icons, or other React elements\n   * @example \"Save\", <><SaveIcon /> Save</>\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Size variant optimized for editor interfaces\n   * - `sm`: 20px height, compact for toolbars\n   * - `md`: 24px height, standard for panels\n   * - `lg`: 32px height, prominent actions\n   * @default \"md\"\n   */\n  size?: ButtonSize;\n\n  /**\n   * Visual variant of the button\n   * - `default`: Transparent with border, fills on hover\n   * - `ghost`: No border, subtle hover state\n   * - `filled`: Solid background with accent color\n   * @default \"default\"\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * Whether the button is disabled\n   * When true, button becomes non-interactive with reduced opacity\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Loading state — shows spinner and disables interaction\n   * Use for async operations like saving, loading data\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Icon element to display before text\n   * Should be 16x16px for optimal appearance\n   * @example <SaveIcon />, <PlayIcon />\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Whether the button should take the full width of the container\n   * Useful for form actions and modal buttons\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  /**\n   * Click event handler\n   * Called when button is clicked (not when disabled/loading)\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the Button component with prettified type for better IntelliSense\n */\nexport type ButtonProps = Prettify<ButtonBaseProps>;\n\n/**\n * Versatile button component for editor interfaces.\n *\n * Supports multiple variants, sizes, and states. Optimized for professional\n * editor interfaces with compact dimensions and precise interactions.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Button variant=\"default\" size=\"md\">Save</Button>\n *\n * // With icon and loading state\n * <Button\n *   icon={<SaveIcon />}\n *   loading={isSaving}\n *   onClick={handleSave}\n * >\n *   Save Project\n * </Button>\n *\n * // Full width button\n * <Button variant=\"filled\" fullWidth>\n *   Confirm\n * </Button>\n * ```\n */\nexport const Button = /*#__PURE__*/ React.memo<ButtonProps>(\n  ({\n    children,\n    className,\n    size = 'md',\n    variant = 'default',\n    disabled = false,\n    loading = false,\n    icon,\n    fullWidth = false,\n    onClick,\n    testId,\n    style,\n    ref,\n    ...props\n  }) => {\n    return (\n      <button\n        ref={ref}\n        className={cx(\n          buttonRecipe({ variant, size, fullWidth: fullWidth || undefined }),\n          className\n        )}\n        disabled={disabled || loading}\n        onClick={onClick}\n        data-testid={testId}\n        style={style}\n        {...props}\n      >\n        {loading ? (\n          <div className={loadingSpinnerStyle} />\n        ) : icon ? (\n          <span className={iconWrapperStyle}>{icon}</span>\n        ) : null}\n\n        {children && <span>{children}</span>}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":[],"mappings":";;;;;;AAwGA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;;AAiBC;AAsBF;AAGF;;"}

package/dist/esm/components/primitives/Checkbox/Checkbox.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext, useId, useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useContext, useId, useState, useCallback } from 'react';
+import { FormHelperText } from '../../form/FormHelperText.js';
 import { CheckIcon } from '../../Icons/CheckIcon.js';
 import { MinusIcon } from '../../Icons/MinusIcon.js';
-import { FormHelperText } from '../../form/FormHelperText.js';
-import { CheckboxGroupContext } from './CheckboxGroup.js';
 import { cx } from '../../../utils/cx.js';
 import { boxSizeVar, checkboxBoxRecipe, checkboxLabelRecipe, checkboxContainerStyle } from './Checkbox.css.js';
+import { CheckboxGroupContext } from './CheckboxGroup.js';
 
 // --- Size maps ---
 const BOX_SIZES = {
@@ -34,7 +34,7 @@ const ICON_SIZES = {
  * <Checkbox indeterminate label="Select all" />
  * ```
  */
-const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate = false, label, labelPosition = 'right', size: sizeProp = 'md', variant = 'default', disabled: disabledProp = false, required = false, error = false, helperText, errorMessage, value, name, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
+const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate = false, label, labelPosition = 'right', size: sizeProp, variant = 'default', disabled: disabledProp = false, required = false, error = false, helperText, errorMessage, value, name, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
     const groupContext = useContext(CheckboxGroupContext);
     const autoId = useId();
     const checkboxId = idProp ?? autoId;
@@ -43,6 +43,8 @@ const Checkbox = ({ checked: checkedProp, defaultChecked = false, indeterminate
     const [internalChecked, setInternalChecked] = useState(defaultChecked);
     // Resolve group context
     const disabled = disabledProp || (groupContext?.disabled ?? false);
+    // Size resolves from the checkbox prop, then the group, then the default —
+    // mirroring how `disabled` above falls back to the group context.
     const size = sizeProp ?? groupContext?.size ?? 'md';
     // Determine checked state for group integration
     const isGrouped = groupContext !== null && value !== undefined;

package/dist/esm/components/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAiBA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;AAaG;AACI;AAuBL;AACA;AACA;AACA;;;;;;;;AAWA;AAEA;;;;;;;;;;AASA;AACE;;AAEA;AAEA;AACE;;AAGF;;;AAIA;AACF;;;;;;;;AAQC;AAED;AACA;;AAGE;AACA;AACE;;AAGJ;;;AAIC;;;;AAKD;AAEE;AACA;;;;;;AAmBG;AAUK;;;AAGA;AACE;AACA;;AAiBZ;AACE;;AAGF;;;;AAOO;AAYT;AAEA;;"}
+{"version":3,"file":"Checkbox.js","sources":["src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useId, useContext, useState } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { CheckIcon } from '@/components/Icons/CheckIcon';\nimport { MinusIcon } from '@/components/Icons/MinusIcon';\nimport { cx } from '@/utils/cx';\n\nimport {\n  checkboxContainerStyle,\n  checkboxLabelRecipe,\n  checkboxBoxRecipe,\n  boxSizeVar,\n} from './Checkbox.css';\nimport { CheckboxGroupContext } from './CheckboxGroup';\n\nimport type { CheckboxProps, CheckboxSize } from './Checkbox.types';\n\n// --- Size maps ---\n\nconst BOX_SIZES: Record<CheckboxSize, number> = {\n  sm: 14,\n  md: 16,\n  lg: 20,\n};\n\nconst ICON_SIZES: Record<CheckboxSize, number> = {\n  sm: 10,\n  md: 12,\n  lg: 14,\n};\n\n/**\n * Checkbox component for boolean selection in settings panels,\n * property inspectors, and form interfaces.\n *\n * Supports controlled/uncontrolled modes, indeterminate state,\n * label positioning, sizes, variants, and error states.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Enable shadows\" />\n * <Checkbox checked={value} onChange={setValue} label=\"Auto-save\" />\n * <Checkbox indeterminate label=\"Select all\" />\n * ```\n */\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  label,\n  labelPosition = 'right',\n  size: sizeProp,\n  variant = 'default',\n  disabled: disabledProp = false,\n  required = false,\n  error = false,\n  helperText,\n  errorMessage,\n  value,\n  name,\n  onChange,\n  className,\n  style,\n  testId,\n  ref,\n  id: idProp,\n  ...rest\n}) => {\n  const groupContext = useContext(CheckboxGroupContext);\n  const autoId = useId();\n  const checkboxId = idProp ?? autoId;\n  const helperId = `${checkboxId}-helper`;\n\n  // Internal state for uncontrolled mode\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n\n  // Resolve group context\n  const disabled = disabledProp || (groupContext?.disabled ?? false);\n  // Size resolves from the checkbox prop, then the group, then the default —\n  // mirroring how `disabled` above falls back to the group context.\n  const size = sizeProp ?? groupContext?.size ?? 'md';\n\n  // Determine checked state for group integration\n  const isGrouped = groupContext !== null && value !== undefined;\n  const isControlled = checkedProp !== undefined;\n\n  let resolvedChecked: boolean;\n  if (isGrouped) {\n    resolvedChecked = groupContext.groupValue.includes(value);\n  } else if (isControlled) {\n    resolvedChecked = checkedProp;\n  } else {\n    resolvedChecked = internalChecked;\n  }\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    const newChecked = !resolvedChecked;\n\n    if (isGrouped && value) {\n      groupContext.toggleValue(value);\n    }\n\n    if (!isControlled && !isGrouped) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [\n    disabled,\n    resolvedChecked,\n    isGrouped,\n    value,\n    groupContext,\n    isControlled,\n    onChange,\n  ]);\n\n  const iconSize = ICON_SIZES[size];\n  const showHelperText = error && errorMessage ? errorMessage : helperText;\n\n  const ariaChecked: 'true' | 'false' | 'mixed' = indeterminate\n    ? 'mixed'\n    : resolvedChecked\n      ? 'true'\n      : 'false';\n\n  const isActive = resolvedChecked || indeterminate;\n\n  const boxInlineVars = assignInlineVars({\n    [boxSizeVar]: `${BOX_SIZES[size]}px`,\n  });\n\n  // Respect OS-level reduced-motion preference for the inline check-mark\n  // animation. Stylesheet @media queries cover CSS-driven motion elsewhere;\n  // this style is set inline, so the check has to happen here.\n  const prefersReducedMotion =\n    typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  const checkboxBox = (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={ariaChecked}\n      aria-disabled={disabled || undefined}\n      aria-required={required || undefined}\n      aria-invalid={error || undefined}\n      aria-describedby={showHelperText ? helperId : undefined}\n      disabled={disabled}\n      onClick={handleClick}\n      className={checkboxBoxRecipe({\n        active: isActive || undefined,\n        variant,\n        disabled: disabled || undefined,\n        error: error || undefined,\n      })}\n      style={boxInlineVars}\n      data-testid={testId}\n      {...rest}\n    >\n      {indeterminate ? (\n        <MinusIcon size={iconSize} color=\"white\" decorative />\n      ) : (\n        <span\n          style={{\n            display: 'inline-flex',\n            opacity: resolvedChecked ? 1 : 0,\n            transform: resolvedChecked ? 'scale(1)' : 'scale(0)',\n            transition: prefersReducedMotion\n              ? 'none'\n              : 'opacity 150ms ease-out, transform 150ms ease-out',\n          }}\n          aria-hidden=\"true\"\n        >\n          <CheckIcon size={iconSize} color=\"white\" decorative />\n        </span>\n      )}\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={resolvedChecked ? (value ?? 'on') : ''}\n        />\n      )}\n    </button>\n  );\n\n  if (!label && !showHelperText) {\n    return checkboxBox;\n  }\n\n  return (\n    <div className={cx(checkboxContainerStyle, className)} style={style}>\n      <label\n        className={checkboxLabelRecipe({\n          labelPosition,\n          disabled: disabled || undefined,\n          size,\n        })}\n      >\n        {checkboxBox}\n        {label && <span>{label}</span>}\n      </label>\n      {showHelperText && (\n        <FormHelperText id={helperId} error={error}>\n          {showHelperText}\n        </FormHelperText>\n      )}\n    </div>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;AAaG;AACI;AAuBL;AACA;AACA;AACA;;;;;;;;;;AAaA;AAEA;;;;;;;;;;AASA;AACE;;AAEA;AAEA;AACE;;AAGF;;;AAIA;AACF;;;;;;;;AAQC;AAED;AACA;;AAGE;AACA;AACE;;AAGJ;;;AAIC;;;;AAKD;AAEE;AACA;;;;;;AAmBG;AAUK;;;AAGA;AACE;AACA;;AAiBZ;AACE;;AAGF;;;;AAOO;AAYT;AAEA;;"}

package/dist/esm/components/primitives/Checkbox/CheckboxGroup.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useCallback, createContext } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { FormLabel } from '../../form/FormLabel.js';
+import { useId, useState, useCallback, createContext } from 'react';
 import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
 import { cx } from '../../../utils/cx.js';
 import { groupItemsStyle, groupGapVar, groupDirectionVar, groupContainerStyle } from './Checkbox.css.js';
 

package/dist/esm/components/primitives/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/primitives/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAmBE;AAEF;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAqBL;AACA;AACA;AACA;;AAGA;;AAGA;AAEI;AACE;AACA;;;;AAKF;;AAKJ;AACE;;;;;AAMF;AAEA;;AAqBU;;AAaZ;AAEA;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["src/components/primitives/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { createContext, useCallback, useId, useState } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { FormLabel } from '@/components/form/FormLabel';\nimport { cx } from '@/utils/cx';\n\nimport {\n  groupContainerStyle,\n  groupItemsStyle,\n  groupDirectionVar,\n  groupGapVar,\n} from './Checkbox.css';\n\nimport type {\n  CheckboxGroupProps,\n  CheckboxGroupContextValue,\n} from './Checkbox.types';\n\nexport const CheckboxGroupContext =\n  /*#__PURE__*/ createContext<CheckboxGroupContextValue | null>(null);\n\n/**\n * Groups multiple Checkbox components with shared state management.\n *\n * Manages a `string[]` value, propagates `disabled` and `size` to children\n * via React Context. Supports controlled and uncontrolled modes.\n *\n * @example\n * ```tsx\n * <CheckboxGroup\n *   label=\"Render passes\"\n *   value={selected}\n *   onChange={setSelected}\n * >\n *   <Checkbox value=\"diffuse\" label=\"Diffuse\" />\n *   <Checkbox value=\"specular\" label=\"Specular\" />\n *   <Checkbox value=\"shadow\" label=\"Shadow\" />\n * </CheckboxGroup>\n * ```\n */\nexport const CheckboxGroup: React.FC<CheckboxGroupProps> = ({\n  value: valueProp,\n  defaultValue = [],\n  label,\n  direction = 'column',\n  gap = 2,\n  disabled = false,\n  size = 'md',\n  helperText,\n  error = false,\n  errorMessage,\n  required = false,\n  children,\n  onChange,\n  className,\n  style,\n  testId,\n  ref,\n  id: idProp,\n  ...rest\n}) => {\n  const autoId = useId();\n  const groupId = idProp ?? autoId;\n  const labelId = `${groupId}-label`;\n  const helperId = `${groupId}-helper`;\n\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue);\n  const isControlled = valueProp !== undefined;\n  const currentValue = isControlled ? valueProp : internalValue;\n\n  const toggleValue = useCallback(\n    (itemValue: string) => {\n      const nextValue = currentValue.includes(itemValue)\n        ? currentValue.filter(v => v !== itemValue)\n        : [...currentValue, itemValue];\n\n      if (!isControlled) {\n        setInternalValue(nextValue);\n      }\n      onChange?.(nextValue);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const contextValue: CheckboxGroupContextValue = {\n    groupValue: currentValue,\n    toggleValue,\n    disabled,\n    size,\n  };\n\n  const showHelperText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-labelledby={label ? labelId : undefined}\n      aria-describedby={showHelperText ? helperId : undefined}\n      className={cx(groupContainerStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {label && (\n        <FormLabel id={labelId} required={required} disabled={disabled}>\n          {label}\n        </FormLabel>\n      )}\n      <CheckboxGroupContext.Provider value={contextValue}>\n        <div\n          className={groupItemsStyle}\n          style={assignInlineVars({\n            [groupDirectionVar]: direction,\n            [groupGapVar]: `${8 * gap}px`,\n          })}\n        >\n          {children}\n        </div>\n      </CheckboxGroupContext.Provider>\n      {showHelperText && (\n        <FormHelperText id={helperId} error={error}>\n          {showHelperText}\n        </FormHelperText>\n      )}\n    </div>\n  );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n"],"names":[],"mappings":";;;;;;;;;;AAsBE;AAEF;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAqBL;AACA;AACA;AACA;;AAGA;;AAGA;AAEI;AACE;AACA;;;;AAKF;;AAKJ;AACE;;;;;AAMF;AAEA;;AAqBU;;AAaZ;AAEA;;"}

package/dist/esm/components/primitives/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../../../../src/components/primitives/Code/Code.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;AAUG;AACI;AAEH;AAWF;AAGF;;"}
+{"version":3,"file":"Code.js","sources":["src/components/primitives/Code/Code.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { codeRecipe } from './Code.css';\n\nimport type { CodeProps } from './Code.types';\n\n/**\n * Small inline `<code>` primitive with theme-aware background and font.\n *\n * Complements `ChatCodeBlock` (block-level) — use `Code` for short inline\n * snippets inside sentences and markdown renderers.\n *\n * @example\n * ```tsx\n * <Text>Run <Code>npm install</Code> to add the package.</Text>\n * ```\n */\nexport const Code = /*#__PURE__*/ React.memo<CodeProps>(\n  ({ children, size = 'sm', className, style, testId, ref, ...rest }) => {\n    return (\n      <code\n        ref={ref}\n        className={cx(codeRecipe({ size }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </code>\n    );\n  }\n);\n\nCode.displayName = 'Code';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;AAUG;AACI;AAEH;AAWF;AAGF;;"}

package/dist/esm/components/primitives/Collapsible/Collapsible.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useId, useState, useCallback } from 'react';
 import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
+import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { triggerFontSizeVar, triggerPaddingVar, triggerHeightVar, contentPaddingHVar, contentPaddingVVar, chevronSizeVar, chevronRecipe, triggerRecipe, contentInnerStyle, contentBodyStyle, contentWrapperRecipe, collapsibleRootStyle } from './Collapsible.css.js';
-import { vars } from '../../../theme/contract.css.js';
 
 const TRIGGER_SIZE_MAP = {
     sm: {

package/dist/esm/components/primitives/Collapsible/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../../../src/components/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;;AAQH;AACE;AACA;AACA;;AAGF;;AAkBE;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AACA;AACA;;AAGE;AACA;AACA;AACD;;AAGC;AACA;AACD;;;AAoBM;;AAOI;AAEC;AACD;;AAcF;AAeX;AAEA;;"}
+{"version":3,"file":"Collapsible.js","sources":["src/components/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useId, useState } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  collapsibleRootStyle,\n  triggerRecipe,\n  triggerHeightVar,\n  triggerPaddingVar,\n  triggerFontSizeVar,\n  chevronRecipe,\n  chevronSizeVar,\n  contentWrapperRecipe,\n  contentInnerStyle,\n  contentBodyStyle,\n  contentPaddingVVar,\n  contentPaddingHVar,\n} from './Collapsible.css';\n\nimport type { CollapsibleProps, CollapsibleSize } from './Collapsible.types';\n\n// --- Size maps ---\n\ninterface TriggerSizeConfig {\n  height: string;\n  padding: string;\n  fontSize: string;\n  chevronSize: number;\n}\n\nconst TRIGGER_SIZE_MAP: Record<CollapsibleSize, TriggerSizeConfig> = {\n  sm: {\n    height: '24px',\n    padding: vars.spacing.md,\n    fontSize: vars.typography.fontSize.xs,\n    chevronSize: 10,\n  },\n  md: {\n    height: '28px',\n    padding: vars.spacing.md,\n    fontSize: vars.typography.fontSize.sm,\n    chevronSize: 12,\n  },\n  lg: {\n    height: '32px',\n    padding: vars.spacing.lg,\n    fontSize: vars.typography.fontSize.md,\n    chevronSize: 14,\n  },\n};\n\ninterface ContentSizeConfig {\n  paddingV: string;\n  paddingH: string;\n}\n\nconst CONTENT_SIZE_MAP: Record<CollapsibleSize, ContentSizeConfig> = {\n  sm: { paddingV: vars.spacing.sm, paddingH: vars.spacing.md },\n  md: { paddingV: vars.spacing.md, paddingH: vars.spacing.lg },\n  lg: { paddingV: vars.spacing.lg, paddingH: vars.spacing.xl },\n};\n\n// --- Component ---\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  trigger,\n  open: openProp,\n  defaultOpen = false,\n  size = 'sm',\n  indicator,\n  disabled = false,\n  keepMounted = false,\n  onChange,\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n  const triggerId = `collapsible-${autoId}-trigger`;\n  const contentId = `collapsible-${autoId}-content`;\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = openProp !== undefined;\n  const resolvedOpen = isControlled ? openProp : internalOpen;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    const nextOpen = !resolvedOpen;\n\n    if (!isControlled) {\n      setInternalOpen(nextOpen);\n    }\n\n    onChange?.(nextOpen);\n  }, [disabled, resolvedOpen, isControlled, onChange]);\n\n  const showIndicator = indicator !== null;\n  const sizeConfig = TRIGGER_SIZE_MAP[size];\n  const contentConfig = CONTENT_SIZE_MAP[size];\n\n  const triggerInlineVars = assignInlineVars({\n    [triggerHeightVar]: sizeConfig.height,\n    [triggerPaddingVar]: sizeConfig.padding,\n    [triggerFontSizeVar]: sizeConfig.fontSize,\n  });\n\n  const contentInlineVars = assignInlineVars({\n    [contentPaddingVVar]: contentConfig.paddingV,\n    [contentPaddingHVar]: contentConfig.paddingH,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={cx(collapsibleRootStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        id={triggerId}\n        aria-expanded={resolvedOpen}\n        aria-controls={contentId}\n        aria-disabled={disabled || undefined}\n        disabled={disabled}\n        onClick={handleToggle}\n        className={triggerRecipe({\n          disabled: disabled || undefined,\n        })}\n        style={triggerInlineVars}\n      >\n        {showIndicator && (\n          <span\n            className={chevronRecipe({\n              open: resolvedOpen || undefined,\n            })}\n            style={assignInlineVars({\n              [chevronSizeVar]: `${sizeConfig.chevronSize}px`,\n            })}\n          >\n            {indicator ?? (\n              <ChevronRightIcon size={sizeConfig.chevronSize} decorative />\n            )}\n          </span>\n        )}\n        <span>{trigger}</span>\n      </button>\n\n      {(resolvedOpen || keepMounted) && (\n        <div\n          className={contentWrapperRecipe({\n            open: resolvedOpen || undefined,\n          })}\n          role=\"region\"\n          id={contentId}\n          aria-labelledby={triggerId}\n          hidden={!resolvedOpen || undefined}\n        >\n          <div className={contentInnerStyle}>\n            <div className={contentBodyStyle} style={contentInlineVars}>\n              {children}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCollapsible.displayName = 'Collapsible';\n"],"names":[],"mappings":";;;;;;;;;AAmCA;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;;AAQH;AACE;AACA;AACA;;AAGF;;AAkBE;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AACA;AACA;;AAGE;AACA;AACA;AACD;;AAGC;AACA;AACD;;;AAoBM;;AAOI;AAEC;AACD;;AAcF;AAeX;AAEA;;"}

package/dist/esm/components/primitives/HoverCard/HoverCard.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, safePolygon, useFocus, useInteractions } from '@floating-ui/react';
 import React, { useId, useRef, useState, useCallback, useMemo, useEffect, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { useFloating, autoUpdate, offset, flip, shift, useHover, safePolygon, useFocus, useInteractions } from '@floating-ui/react';
 import { cx } from '../../../utils/cx.js';
 import { hoverCardContentRecipe } from './HoverCard.css.js';
 
@@ -117,8 +117,7 @@ const HoverCardContent = ({ children, width, maxHeight, padding = 'md', classNam
             externalRef(node);
         }
         else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
+            externalRef.current = node;
         }
     }, [contentRef, floatingRefs, externalRef]);
     useEffect(() => {
@@ -130,6 +129,9 @@ const HoverCardContent = ({ children, width, maxHeight, padding = 'md', classNam
                 cancelAnimationFrame(handle);
             };
         }
+        // Reset enter-animation state on close; gated by the `isOpen` prop, so this
+        // is a one-shot transition rather than continuous state synchronization.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setVisible(false);
         return undefined;
     }, [isOpen]);

package/dist/esm/components/primitives/HoverCard/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../../../../src/components/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAkCA;AACE;AAEF;AACE;;AAEE;;AAIF;AACF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAaE;AACA;AACA;;AAGA;AACA;AAEA;;;;;;AAMI;;;AAMF;AACA;AACA;AACA;AACA;AACD;AAED;;;;AAIE;AACD;AACD;AAEA;;;AAGC;AAED;;AAGI;;;;AAIA;;AAEA;;;AAGD;;;;;;;;;AAUA;AAGH;AAKF;AAEA;AAEA;AACE;AAEA;AAEA;AAEI;AACA;AACF;AAIF;AAAqC;AAErC;AAEA;AAGI;AACA;;AAED;AAEL;AAEA;AAEA;AAWE;;AAWA;AAEA;AAEI;AACA;AACA;;;AAEO;AACJ;AACC;;;;;AAQJ;;AAEA;AACA;;AAEA;;;AAGF;AACF;AAEA;AAAa;;AAGb;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;;AAWO;AAID;AACA;AACA;;AAUN;;;AAGA;AACF;AAEA;;AAQE;AACA;AACD;;"}
+{"version":3,"file":"HoverCard.js","sources":["src/components/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["'use client';\n\nimport {\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  safePolygon,\n  shift,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n} from '@floating-ui/react';\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cx } from '@/utils/cx';\n\nimport { hoverCardContentRecipe } from './HoverCard.css';\n\nimport type {\n  HoverCardContentProps,\n  HoverCardContextValue,\n  HoverCardProps,\n  HoverCardTriggerProps,\n} from './HoverCard.types';\n\nconst HoverCardContext =\n  /*#__PURE__*/ createContext<HoverCardContextValue | null>(null);\n\nfunction useHoverCardContext(): HoverCardContextValue {\n  const ctx = useContext(HoverCardContext);\n  if (!ctx) {\n    throw new Error(\n      'HoverCard compound components must be used within <HoverCard>'\n    );\n  }\n  return ctx;\n}\n\n/**\n * A floating content container anchored to a trigger and shown on hover.\n * Cursor can move from the trigger onto the content without closing\n * (safe-polygon based). Also opens on keyboard focus for accessibility.\n *\n * @example\n * ```tsx\n * <HoverCard>\n *   <HoverCard.Trigger>\n *     <Link>@octocat</Link>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content width={280}>\n *     <UserPreview user={...} />\n *   </HoverCard.Content>\n * </HoverCard>\n * ```\n */\nconst HoverCardRoot: React.FC<HoverCardProps> = ({\n  open: openProp,\n  defaultOpen = false,\n  placement = 'bottom-start',\n  offset = 8,\n  openDelay = 400,\n  closeDelay = 150,\n  portal = true,\n  disableSafePolygon = false,\n  disabled = false,\n  onOpenChange,\n  children,\n}) => {\n  const autoId = useId();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = openProp !== undefined;\n  const isOpen = disabled ? false : isControlled ? openProp : internalOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (disabled && nextOpen) return;\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [disabled, isControlled, onOpenChange]\n  );\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    placement: placement,\n    middleware: [offsetMiddleware(offset), flip(), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    enabled: !disabled,\n    delay: { open: openDelay, close: closeDelay },\n    handleClose: disableSafePolygon ? null : safePolygon(),\n    move: false,\n  });\n  const focus = useFocus(context, { enabled: !disabled });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    focus,\n  ]);\n\n  const contextValue: HoverCardContextValue = useMemo(\n    () => ({\n      isOpen,\n      hoverCardId: autoId,\n      portal,\n      triggerRef,\n      contentRef,\n      floatingRefs: refs,\n      floatingStyles,\n      floatingContext: context,\n      getReferenceProps,\n      getFloatingProps,\n    }),\n    [\n      isOpen,\n      autoId,\n      portal,\n      refs,\n      floatingStyles,\n      context,\n      getReferenceProps,\n      getFloatingProps,\n    ]\n  );\n\n  return (\n    <HoverCardContext.Provider value={contextValue}>\n      {children}\n    </HoverCardContext.Provider>\n  );\n};\n\nHoverCardRoot.displayName = 'HoverCard';\n\nconst HoverCardTrigger: React.FC<HoverCardTriggerProps> = ({ children }) => {\n  const { isOpen, hoverCardId, triggerRef, floatingRefs, getReferenceProps } =\n    useHoverCardContext();\n  const contentId = `hovercard-${hoverCardId}-content`;\n\n  const setRef = useCallback(\n    (node: HTMLElement | null) => {\n      triggerRef.current = node;\n      floatingRefs.setReference(node);\n    },\n    [triggerRef, floatingRefs]\n  );\n\n  if (!React.isValidElement(children)) return null;\n\n  const referenceProps = getReferenceProps();\n\n  return React.cloneElement(\n    children as React.ReactElement<Record<string, unknown>>,\n    {\n      ref: setRef,\n      ...referenceProps,\n      'aria-describedby': isOpen ? contentId : undefined,\n    }\n  );\n};\n\nHoverCardTrigger.displayName = 'HoverCard.Trigger';\n\nconst HoverCardContent: React.FC<HoverCardContentProps> = ({\n  children,\n  width,\n  maxHeight,\n  padding = 'md',\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const {\n    isOpen,\n    contentRef,\n    portal,\n    hoverCardId,\n    floatingRefs,\n    floatingStyles,\n    getFloatingProps,\n  } = useHoverCardContext();\n\n  const [visible, setVisible] = useState(false);\n  const contentId = `hovercard-${hoverCardId}-content`;\n\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      floatingRefs.setFloating(node);\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [contentRef, floatingRefs, externalRef]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      const handle = requestAnimationFrame(() => {\n        setVisible(true);\n      });\n      return () => {\n        cancelAnimationFrame(handle);\n      };\n    }\n    // Reset enter-animation state on close; gated by the `isOpen` prop, so this\n    // is a one-shot transition rather than continuous state synchronization.\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setVisible(false);\n    return undefined;\n  }, [isOpen]);\n\n  if (!isOpen) return null;\n\n  const dimensionStyles: React.CSSProperties = {};\n  if (width != null) {\n    dimensionStyles.width =\n      typeof width === 'number' ? `${String(width)}px` : width;\n  }\n  if (maxHeight != null) {\n    dimensionStyles.maxHeight =\n      typeof maxHeight === 'number' ? `${String(maxHeight)}px` : maxHeight;\n    dimensionStyles.overflowY = 'auto';\n  }\n\n  const floatingProps = getFloatingProps();\n\n  const element = (\n    <div\n      ref={setRef}\n      role=\"tooltip\"\n      id={contentId}\n      className={cx(\n        hoverCardContentRecipe({\n          padding,\n          visible: visible || undefined,\n        }),\n        className\n      )}\n      style={{\n        ...floatingStyles,\n        ...dimensionStyles,\n        ...style,\n      }}\n      data-testid={testId}\n      {...floatingProps}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  if (portal && typeof document !== 'undefined') {\n    return createPortal(element, document.body);\n  }\n  return element;\n};\n\nHoverCardContent.displayName = 'HoverCard.Content';\n\ninterface HoverCardComponent extends React.FC<HoverCardProps> {\n  Trigger: React.FC<HoverCardTriggerProps>;\n  Content: React.FC<HoverCardContentProps>;\n}\n\nexport const HoverCard = Object.assign(HoverCardRoot, {\n  Trigger: HoverCardTrigger,\n  Content: HoverCardContent,\n}) as HoverCardComponent;\n"],"names":[],"mappings":";;;;;;;;AAoCA;AACE;AAEF;AACE;;AAEE;;AAIF;AACF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAaE;AACA;AACA;;AAGA;AACA;AAEA;;;;;;AAMI;;;AAMF;AACA;AACA;AACA;AACA;AACD;AAED;;;;AAIE;AACD;AACD;AAEA;;;AAGC;AAED;;AAGI;;;;AAIA;;AAEA;;;AAGD;;;;;;;;;AAUA;AAGH;AAKF;AAEA;AAEA;AACE;AAEA;AAEA;AAEI;AACA;AACF;AAIF;AAAqC;AAErC;AAEA;AAGI;AACA;;AAED;AAEL;AAEA;AAEA;AAWE;;AAWA;AAEA;AAEI;AACA;AACA;;;AAEO;AACL;;;;;AAQF;;AAEA;AACA;;AAEA;;;;;;AAMF;AACF;AAEA;AAAa;;AAGb;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;;AAWO;AAID;AACA;AACA;;AAUN;;;AAGA;AACF;AAEA;;AAQE;AACA;AACD;;"}

package/dist/esm/components/primitives/Icon/Icon.js

@@ -20,7 +20,7 @@ const STANDARD_SIZES = new Set(['sm', 'md', 'lg']);
 const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, testId, ref, ...props }) => {
     const isStandardColor = STANDARD_COLORS.has(color);
     const isStandardSize = typeof size === 'string' && STANDARD_SIZES.has(size);
-    const resolvedSize = isStandardSize || size === undefined
+    const resolvedSize = isStandardSize
         ? undefined
         : typeof size === 'number'
             ? `${size}px`

package/dist/esm/components/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA6CA;;AAEG;AACH;;;;;;;;AAQC;AAED;AAEO;;AAaH;AAEA;AAEI;AACA;;;;AAKJ;AAAsB;AACtB;AACE;AACA;;;;AASM;AACE;AAQA;AACH;AAeT;AAGF;;"}
+{"version":3,"file":"Icon.js","sources":["src/components/primitives/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\n// src/primitives/Icon/Icon.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { iconRecipe } from './Icon.css';\n\nimport type { Size } from '@/types/common';\nimport type { Prettify, LiteralUnion } from '@/types/utilities';\n\nexport type IconSize = LiteralUnion<Size> | number;\nexport type IconColor = LiteralUnion<\n  'primary' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'error'\n>;\n\nexport interface IconBaseProps {\n  children: React.ReactNode;\n  /**\n   * Icon size. `'sm' | 'md' | 'lg'` map to 12 / 16 / 20 px through the theme\n   * recipe. Pass a `number` for a custom pixel size, or a `string` for any\n   * CSS length (e.g. `'1.5em'`, `'24px'`).\n   * @default \"md\"\n   */\n  size?: IconSize;\n  /**\n   * Icon color. Standard tokens (`'primary' | 'secondary' | 'muted' |\n   * 'accent' | 'success' | 'warning' | 'error'`) map to theme variables;\n   * any other string is forwarded as an inline `color` value (hex,\n   * `currentColor`, `var(--…)`, etc.).\n   * @default \"primary\"\n   */\n  color?: IconColor;\n  className?: string;\n  title?: string;\n  decorative?: boolean;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nexport type IconProps = Prettify<IconBaseProps>;\n\n/**\n * Standard color keys that map to recipe variants\n */\nconst STANDARD_COLORS = new Set([\n  'primary',\n  'secondary',\n  'muted',\n  'accent',\n  'success',\n  'warning',\n  'error',\n]);\n\nconst STANDARD_SIZES = new Set(['sm', 'md', 'lg']);\n\nexport const Icon = /*#__PURE__*/ React.memo<IconProps>(\n  ({\n    children,\n    size = 'md',\n    color = 'primary',\n    className,\n    title,\n    decorative = false,\n    testId,\n    ref,\n    ...props\n  }) => {\n    const isStandardColor = STANDARD_COLORS.has(color);\n    const isStandardSize = typeof size === 'string' && STANDARD_SIZES.has(size);\n\n    const resolvedSize = isStandardSize\n      ? undefined\n      : typeof size === 'number'\n        ? `${size}px`\n        : size;\n\n    const inlineStyle: React.CSSProperties = {};\n    if (!isStandardColor) inlineStyle.color = color;\n    if (resolvedSize !== undefined) {\n      inlineStyle.width = resolvedSize;\n      inlineStyle.height = resolvedSize;\n    }\n\n    return (\n      <svg\n        ref={ref}\n        className={cx(\n          iconRecipe({\n            size: isStandardSize ? (size as Size) : undefined,\n            color: isStandardColor\n              ? (color as\n                  | 'primary'\n                  | 'secondary'\n                  | 'muted'\n                  | 'accent'\n                  | 'success'\n                  | 'warning'\n                  | 'error')\n              : undefined,\n          }),\n          className\n        )}\n        style={Object.keys(inlineStyle).length > 0 ? inlineStyle : undefined}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden={decorative}\n        role={decorative ? 'presentation' : 'img'}\n        data-testid={testId}\n        {...props}\n      >\n        {title && !decorative && <title>{title}</title>}\n        {children}\n      </svg>\n    );\n  }\n);\n\nIcon.displayName = 'Icon';\n"],"names":[],"mappings":";;;;;;AAgDA;;AAEG;AACH;;;;;;;;AAQC;AAED;AAEO;;AAaH;;AAGE;AACA;;;;AAKF;AAAsB;AACtB;AACE;AACA;;;;AASM;AACE;AAQA;AACH;AAeT;AAGF;;"}

package/dist/esm/components/primitives/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;;;;;;;AA4CL;AAGF;;"}
+{"version":3,"file":"IconButton.js","sources":["src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\n// src/primitives/IconButton/IconButton.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { iconButtonRecipe, loadingSpinnerRecipe } from './IconButton.css';\n\nimport type { Size, Variant } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Standard size variants for IconButton using library sizing.\n */\nexport type IconButtonSize = Size;\n\n/**\n * Visual variants for IconButton - strict typing for controlled API.\n */\nexport type IconButtonVariant = Variant;\n\n/**\n * Border radius variants for IconButton shape control.\n */\nexport type IconButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface IconButtonBaseProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'css' | 'children'\n> {\n  /**\n   * Icon component to display inside the button.\n   * Should be an Icon component or similar icon element.\n   * The button will automatically size itself based on the icon size.\n   *\n   * @example <SaveIcon />, <AddIcon />\n   */\n  children: React.ReactNode;\n\n  /**\n   * Button size using standard library sizing\n   * Button will be square and sized appropriately for the icon\n   * - `sm`: 20px square (for 12px icons)\n   * - `md`: 24px square (for 16px icons)\n   * - `lg`: 32px square (for 20px icons)\n   * @default \"md\"\n   */\n  size?: IconButtonSize;\n\n  /**\n   * Button visual variant\n   * - `default`: Transparent with border, fills on hover\n   * - `ghost`: No border, subtle hover state\n   * - `filled`: Solid background with accent color\n   * @default \"ghost\"\n   */\n  variant?: IconButtonVariant;\n\n  /**\n   * Border radius for button shape control\n   * - `none`: Sharp corners (0px)\n   * - `sm`: Slightly rounded (2px)\n   * - `md`: Moderately rounded (4px)\n   * - `lg`: More rounded (6px)\n   * - `full`: Fully circular\n   * @default \"md\"\n   */\n  radius?: IconButtonRadius;\n\n  /**\n   * Whether the button is disabled\n   * When true, button becomes non-interactive with reduced opacity\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the button is in a loading state\n   * Shows spinner and disables interaction\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Whether the button appears pressed/active\n   * Useful for toggle states and active tool indicators\n   * @default false\n   */\n  pressed?: boolean;\n\n  /**\n   * Accessible label for screen readers\n   * Required for proper accessibility\n   * @example \"Save file\", \"Delete item\", \"Close dialog\"\n   */\n  'aria-label': string;\n\n  /**\n   * Click event handler\n   * Called when button is clicked (not when disabled/loading)\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the IconButton component with prettified type for better IntelliSense\n */\nexport type IconButtonProps = Prettify<IconButtonBaseProps>;\n\n/**\n * A specialized square button component for displaying icons in editor interfaces.\n *\n * Designed for toolbar actions, quick controls, and icon-based interactions.\n * Always square and sized appropriately for the contained icon.\n * Supports various border radius options from sharp corners to fully circular.\n *\n * @example\n * ```tsx\n * // Basic ghost button (default)\n * <IconButton aria-label=\"Save file\">\n *   <SaveIcon />\n * </IconButton>\n *\n * // Circular filled button\n * <IconButton\n *   variant=\"filled\"\n *   radius=\"full\"\n *   size=\"lg\"\n *   aria-label=\"Add item\"\n * >\n *   <AddIcon />\n * </IconButton>\n *\n * // Sharp corners for toolbar\n * <IconButton\n *   variant=\"default\"\n *   radius=\"none\"\n *   aria-label=\"Settings\"\n * >\n *   <SettingsIcon />\n * </IconButton>\n *\n * // Toggle state\n * <IconButton\n *   pressed={isVisible}\n *   radius=\"sm\"\n *   aria-label=\"Toggle visibility\"\n *   onClick={toggleVisibility}\n * >\n *   <EyeIcon />\n * </IconButton>\n * ```\n */\nexport const IconButton = /*#__PURE__*/ React.memo<IconButtonProps>(\n  ({\n    children,\n    className,\n    size = 'md',\n    variant = 'ghost',\n    radius = 'md',\n    disabled = false,\n    loading = false,\n    pressed = false,\n    onClick,\n    'aria-label': ariaLabel,\n    testId,\n    style,\n    ref,\n    ...props\n  }) => {\n    return (\n      <button\n        ref={ref}\n        className={cx(\n          iconButtonRecipe({\n            size,\n            variant,\n            radius,\n            pressed: pressed || undefined,\n          }),\n          className\n        )}\n        disabled={disabled || loading}\n        onClick={onClick}\n        aria-label={ariaLabel}\n        aria-pressed={pressed}\n        data-testid={testId}\n        style={style}\n        {...props}\n      >\n        {loading ? (\n          <div className={loadingSpinnerRecipe({ size })} />\n        ) : (\n          children\n        )}\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":[],"mappings":";;;;;;AAqHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;;;;;;;AA4CL;AAGF;;"}

package/dist/esm/components/primitives/Input/Input.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { inputWrapperRecipe } from '../../form/InputWrapper.css.js';
 import { cx } from '../../../utils/cx.js';
-import React from 'react';
 import { labelRecipe, iconStartStyle, inputRecipe, iconEndStyle, helperTextRecipe, inputContainerStyle } from './Input.css.js';
 
 /**

package/dist/esm/components/primitives/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAiJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAyBL;AACA;AAEA;;AAEE;AACF;AAEA;;AAEE;AACF;AAEA;;AAEA;;;;;;AAoBO;AAiCT;AAEA;;"}
+{"version":3,"file":"Input.js","sources":["src/components/primitives/Input/Input.tsx"],"sourcesContent":["'use client';\n\n// src/primitives/Input/Input.tsx\nimport React from 'react';\n\nimport { inputWrapperRecipe } from '@/components/form/InputWrapper.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  inputContainerStyle,\n  labelRecipe,\n  inputRecipe,\n  iconStartStyle,\n  iconEndStyle,\n  helperTextRecipe,\n} from './Input.css';\n\nimport type { Size } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Standard input sizes using library sizing.\n */\nexport type InputSize = Size;\n\nexport interface InputBaseProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange' | 'size' | 'css'\n> {\n  /**\n   * Input value (controlled)\n   */\n  value?: string | undefined;\n\n  /**\n   * Default value (uncontrolled)\n   */\n  defaultValue?: string | undefined;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string | undefined;\n\n  /**\n   * Input type\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'url'\n    | 'tel'\n    | undefined;\n\n  /**\n   * Input size using standard library sizing\n   * - `sm`: 20px height, compact for toolbars\n   * - `md`: 24px height, standard for forms\n   * - `lg`: 32px height, prominent inputs\n   * @default \"md\"\n   */\n  size?: InputSize;\n\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the input has an error state\n   * @default false\n   */\n  error?: boolean;\n\n  /**\n   * Whether the input is required\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the input is read-only\n   * @default false\n   */\n  readOnly?: boolean;\n\n  /**\n   * Input label\n   */\n  label?: string | undefined;\n\n  /**\n   * Helper text displayed below the input\n   */\n  helperText?: string | undefined;\n\n  /**\n   * Error message displayed when error is true\n   */\n  errorMessage?: string | undefined;\n\n  /**\n   * Icon displayed at the start of the input\n   */\n  startIcon?: React.ReactNode;\n\n  /**\n   * Icon displayed at the end of the input\n   */\n  endIcon?: React.ReactNode;\n\n  /**\n   * Change event handler — receives the new string value directly\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Focus event handler\n   */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n  /**\n   * Blur event handler\n   */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n  /**\n   * Key down event handler\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * Props for the Input component with prettified type for better IntelliSense\n */\nexport type InputProps = Prettify<InputBaseProps>;\n\n/**\n * A versatile input component for text entry in editor interfaces.\n *\n * Provides a clean, consistent text input with support for labels, helper text,\n * icons, and various states. Optimized for editor UIs with compact sizing.\n *\n * @example\n * ```tsx\n * // Basic text input\n * <Input\n *   placeholder=\"Enter text...\"\n *   value={text}\n *   onChange={setText}\n * />\n *\n * // With label and helper text\n * <Input\n *   label=\"Project Name\"\n *   placeholder=\"My Project\"\n *   helperText=\"Choose a unique name for your project\"\n *   value={name}\n *   onChange={setName}\n * />\n *\n * // With icons and error state\n * <Input\n *   label=\"Email\"\n *   type=\"email\"\n *   startIcon={<SearchIcon />}\n *   error={!!emailError}\n *   errorMessage={emailError}\n *   value={email}\n *   onChange={setEmail}\n * />\n * ```\n */\nexport const Input: React.FC<InputProps> = ({\n  value,\n  defaultValue,\n  placeholder,\n  type = 'text',\n  size = 'md',\n  disabled = false,\n  error = false,\n  required = false,\n  readOnly = false,\n  label,\n  helperText,\n  errorMessage,\n  startIcon,\n  endIcon,\n  className,\n  style,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  testId,\n  ref,\n  ...props\n}) => {\n  const [focused, setFocused] = React.useState(false);\n  const inputId = React.useId();\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value);\n  };\n\n  return (\n    <div className={cx(inputContainerStyle, className)} style={style}>\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={labelRecipe({ disabled: disabled || undefined })}\n        >\n          {label}\n          {required && <span style={{ color: 'var(--accent-error)' }}> *</span>}\n        </label>\n      )}\n\n      <div\n        className={inputWrapperRecipe({\n          size,\n          error,\n          disabled,\n          focused,\n        })}\n      >\n        {startIcon && <div className={iconStartStyle}>{startIcon}</div>}\n\n        <input\n          ref={ref}\n          id={inputId}\n          type={type}\n          value={value}\n          defaultValue={defaultValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          className={inputRecipe({ size })}\n          onChange={onChange ? handleChange : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={onKeyDown}\n          data-testid={testId}\n          {...props}\n        />\n\n        {endIcon && <div className={iconEndStyle}>{endIcon}</div>}\n      </div>\n\n      {(helperText ?? (error && errorMessage)) && (\n        <div className={helperTextRecipe({ error: error || undefined })}>\n          {error && errorMessage ? errorMessage : helperText}\n        </div>\n      )}\n    </div>\n  );\n};\n\nInput.displayName = 'Input';\n"],"names":[],"mappings":";;;;;;;AAoJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAyBL;AACA;AAEA;;AAEE;AACF;AAEA;;AAEE;AACF;AAEA;;AAEA;;;;;;AAoBO;AAiCT;AAEA;;"}

package/dist/esm/components/primitives/Kbd/Kbd.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useEffect, useMemo } from 'react';
-import { getPlatform, parseShortcut, getKeyGlyph } from '../../../utils/platform.js';
 import { cx } from '../../../utils/cx.js';
+import { getPlatform, parseShortcut, getKeyGlyph } from '../../../utils/platform.js';
 import { separatorStyle, keycapRecipe, kbdRoot } from './Kbd.css.js';
 
 function getKeys(children) {

package/dist/esm/components/primitives/Kbd/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sources":["../../../../../../src/components/primitives/Kbd/Kbd.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AASA;AACE;AACE;;;AAIJ;AAEA;;;;;;;;;;;AAWG;;;;AAmBG;AACE;;AAEJ;AAEA;AACA;AAEA;AACE;AACE;;AAGF;AACF;;AA0BF;AAGF;;"}
+{"version":3,"file":"Kbd.js","sources":["src/components/primitives/Kbd/Kbd.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { cx } from '@/utils/cx';\nimport { getKeyGlyph, getPlatform, parseShortcut } from '@/utils/platform';\n\nimport { kbdRoot, keycapRecipe, separatorStyle } from './Kbd.css';\n\nimport type { KbdProps } from './Kbd.types';\nimport type { Platform } from '@/utils/platform';\n\nfunction getKeys(children: React.ReactNode): React.ReactNode[] {\n  if (typeof children === 'string') {\n    return parseShortcut(children);\n  }\n\n  return React.Children.toArray(children);\n}\n\n/**\n * Render keyboard shortcuts with consistent keycap styling and platform-aware glyphs.\n *\n * Use Kbd for shortcut hints in menus, tooltips, command palettes, help overlays,\n * and keyboard reference panels.\n *\n * @example\n * ```tsx\n * <Kbd>Ctrl+S</Kbd>\n * <Kbd platform=\"mac\" separator={null}>Cmd+S</Kbd>\n * ```\n */\nexport const Kbd = /*#__PURE__*/ React.memo<KbdProps>(\n  ({\n    children,\n    size = 'md',\n    variant = 'outline',\n    glyphs = true,\n    platform = 'auto',\n    separator = '+',\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const [platformDetected, setPlatformDetected] =\n      useState<Platform>('windows');\n\n    useEffect(() => {\n      if (platform === 'auto') {\n        setPlatformDetected(getPlatform());\n      }\n    }, [platform]);\n\n    const platformResolved = platform === 'auto' ? platformDetected : platform;\n    const keys = useMemo(() => getKeys(children), [children]);\n\n    const renderKey = (key: React.ReactNode): React.ReactNode => {\n      if (glyphs && typeof key === 'string') {\n        return getKeyGlyph(key, platformResolved);\n      }\n\n      return key;\n    };\n\n    return (\n      <span\n        ref={ref}\n        className={cx(kbdRoot, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {keys.map((key, index) => (\n          <React.Fragment\n            key={`${typeof key === 'string' ? key : index}-${index}`}\n          >\n            {index > 0 && separator !== null && (\n              <span className={separatorStyle} aria-hidden=\"true\">\n                {separator}\n              </span>\n            )}\n            <kbd className={keycapRecipe({ size, variant })}>\n              {renderKey(key)}\n            </kbd>\n          </React.Fragment>\n        ))}\n      </span>\n    );\n  }\n);\n\nKbd.displayName = 'Kbd';\n"],"names":[],"mappings":";;;;;;;AAYA;AACE;AACE;;;AAIJ;AAEA;;;;;;;;;;;AAWG;;;;AAmBG;AACE;;AAEJ;AAEA;AACA;AAEA;AACE;AACE;;AAGF;AACF;;AA0BF;AAGF;;"}

package/dist/esm/components/primitives/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../../../src/components/primitives/Link/Link.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAgBA;AAEA;;;AAGG;AACH;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;AACE;AACA;AAAW;;AAEb;AAEA;;;;;;;AAOG;AACH;;;;;;;;;;;;;;;;;;;;AAqBA;;AAIE;AACE;;;AAGA;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH;AAGE;AAkBA;AACA;AACA;;;;;;;;AAWE;;;;;AAMD;;;;;AAMD;;AAGE;;;;;;;;;;AAcA;AACI;;AAEE;AACH;;AAGL;AAEI;AACA;AACA;;;AAMJ;AA4BF;AAiBO;AACP;;"}
+{"version":3,"file":"Link.js","sources":["src/components/primitives/Link/Link.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { ExternalLinkIcon } from '@/components/Icons/ExternalLinkIcon';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  externalIconStyle,\n  linkColorVar,\n  linkHoverColorVar,\n  linkRecipe,\n  srOnlyStyle,\n} from './Link.css';\n\nimport type { LinkColor, LinkProps, LinkVariant } from './Link.types';\n\nconst EXTERNAL_PROTOCOL_RE = /^https?:\\/\\//i;\n\n/**\n * Defaults — keep variant and color in sync so consumers can pass either\n * (or both) without surprising results.\n */\nconst VARIANT_DEFAULT_COLOR: Record<LinkVariant, LinkColor> = {\n  default: 'primary',\n  subtle: 'secondary',\n  inline: 'inherit',\n};\n\nconst VARIANT_DEFAULT_UNDERLINE = {\n  default: 'hover',\n  subtle: 'hover',\n  inline: 'always',\n} as const;\n\nconst NAMED_COLOR_TOKENS: Record<string, { base: string; hover: string }> = {\n  primary: {\n    base: vars.colors.accent.primary,\n    hover: vars.colors.accent.secondary,\n  },\n  secondary: {\n    base: vars.colors.text.secondary,\n    hover: vars.colors.accent.primary,\n  },\n  inherit: {\n    base: 'inherit',\n    hover: vars.colors.accent.primary,\n  },\n};\n\nfunction resolveLinkColor(color: LinkColor): { base: string; hover: string } {\n  const named = NAMED_COLOR_TOKENS[color];\n  if (named) return named;\n  return { base: color, hover: color };\n}\n\n/**\n * Props stripped from the rest spread when the link is disabled.\n *\n * Without this, `<Link as={RouterLink} disabled to=\"/x\" onClick={fn} />`\n * would still navigate / fire the handler — `aria-disabled` and CSS\n * pointer-events alone don't block keyboard activation or programmatic\n * triggers fired by router libraries.\n */\nconst NAV_PROPS_TO_STRIP_WHEN_DISABLED = [\n  'href',\n  'to',\n  'onClick',\n  'onClickCapture',\n  'onPointerDown',\n  'onPointerDownCapture',\n  'onMouseDown',\n  'onMouseDownCapture',\n  'onKeyDown',\n  'onKeyDownCapture',\n  'onKeyUp',\n  'onKeyUpCapture',\n  'onAuxClick',\n  'replace',\n  'reloadDocument',\n  'preventScrollReset',\n  'state',\n  'relative',\n] as const;\n\nfunction stripNavProps(\n  props: Record<string, unknown>\n): Record<string, unknown> {\n  const cleaned: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(props)) {\n    if ((NAV_PROPS_TO_STRIP_WHEN_DISABLED as readonly string[]).includes(key)) {\n      continue;\n    }\n    cleaned[key] = value;\n  }\n  return cleaned;\n}\n\n/**\n * Styled anchor primitive.\n *\n * Standardises link color, underline behavior, hover/focus states, and\n * external-link affordances. Polymorphic via `as` so it can wrap a\n * router's link component (react-router, TanStack Router, Next.js).\n *\n * Scope: **styling-only**, not router-aware. Pass your router's link\n * component via `as` for client-side navigation — the router's props\n * (`to`, `replace`, …) are type-checked automatically.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Documentation</Link>\n *\n * <Link href=\"https://example.com\">External</Link> // auto-detected\n *\n * <Link as={RouterLink} to=\"/profile\">\n *   Profile\n * </Link>\n *\n * <Text>\n *   Read the <Link variant=\"inline\" href=\"/guide\">guide</Link> first.\n * </Text>\n * ```\n */\nfunction LinkImpl<E extends React.ElementType = 'a'>(\n  props: LinkProps<E>\n): React.ReactElement {\n  const {\n    href,\n    as,\n    variant,\n    color,\n    underline,\n    size,\n    external,\n    disabled,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    'aria-label': ariaLabel,\n    ...rest\n  } = props;\n\n  const resolvedVariant: LinkVariant = variant ?? 'default';\n  const resolvedSize = size ?? 'md';\n  const isDisabled = disabled === true;\n  const resolvedColor = color ?? VARIANT_DEFAULT_COLOR[resolvedVariant];\n  const resolvedUnderline =\n    underline ?? VARIANT_DEFAULT_UNDERLINE[resolvedVariant];\n\n  // External affordances only apply when the link is actually navigable.\n  // A disabled link with `external` would be misleading: no target, no\n  // rel, no real navigation — but icon + \"opens in new tab\" suggest\n  // otherwise. So we suppress all of it.\n  const isExternal =\n    !isDisabled &&\n    (external ?? (typeof href === 'string' && EXTERNAL_PROTOCOL_RE.test(href)));\n\n  const { base, hover } = resolveLinkColor(resolvedColor);\n  const inlineVars = assignInlineVars({\n    [linkColorVar]: base,\n    [linkHoverColorVar]: hover,\n  });\n\n  // Disabled forces a non-navigating <span> regardless of `as`. If we\n  // honored `as` while disabled, a router link would still respond to\n  // `to` / `onClick` because pointer-events: none and aria-disabled are\n  // visual hints, not functional locks for programmatic triggers.\n  const Component: React.ElementType = isDisabled ? 'span' : (as ?? 'a');\n\n  const cleanedRest = isDisabled\n    ? stripNavProps(rest)\n    : (rest as Record<string, unknown>);\n\n  // Only set `href` when rendering a plain anchor and not disabled. For\n  // custom `as` components (router links) the navigation prop is the\n  // router's own (`to`, `href`, …), passed through `...rest`.\n  const hrefProp =\n    !isDisabled && Component === 'a' && href !== undefined ? { href } : {};\n\n  const externalAttrs = isExternal\n    ? { target: '_blank', rel: 'noopener noreferrer' }\n    : {};\n\n  const ariaLabelProp = ariaLabel\n    ? {\n        'aria-label': isExternal\n          ? `${ariaLabel} (opens in new tab)`\n          : ariaLabel,\n      }\n    : {};\n\n  const linkClassName = cx(\n    linkRecipe({\n      variant: resolvedVariant,\n      underline: resolvedUnderline,\n      size: resolvedSize,\n      disabled: isDisabled || undefined,\n    }),\n    className\n  );\n\n  return (\n    <Component\n      {...cleanedRest}\n      {...hrefProp}\n      {...externalAttrs}\n      {...ariaLabelProp}\n      ref={ref}\n      className={linkClassName}\n      style={{ ...inlineVars, ...style }}\n      data-testid={testId}\n      data-disabled={isDisabled || undefined}\n      aria-disabled={isDisabled || undefined}\n    >\n      {children}\n      {isExternal && (\n        <>\n          <ExternalLinkIcon\n            className={externalIconStyle}\n            size=\"0.75em\"\n            decorative\n          />\n          {!ariaLabel && (\n            <span className={srOnlyStyle}> (opens in new tab)</span>\n          )}\n        </>\n      )}\n    </Component>\n  );\n}\n\n/**\n * Public Link signature.\n *\n * Modelled as a callable interface so the polymorphic generic\n * (`<Link as={RouterLink} to=\"/x\" />`) survives the export. `React.memo`\n * is intentionally not applied here — wrapping a generic function in\n * `memo` collapses the call signature and forces an `as unknown as` cast,\n * which the codebase forbids. The library has precedent for non-memoised\n * primitives (e.g. `Switch`), and Link's render is cheap.\n */\ninterface LinkComponent {\n  <E extends React.ElementType = 'a'>(props: LinkProps<E>): React.ReactElement;\n  displayName?: string;\n}\n\nexport const Link = LinkImpl as LinkComponent;\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;AAmBA;AAEA;;;AAGG;AACH;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;AACE;AACA;AAAW;;AAEb;AAEA;;;;;;;AAOG;AACH;;;;;;;;;;;;;;;;;;;;AAqBA;;AAIE;AACE;;;AAGA;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH;AAGE;AAkBA;AACA;AACA;;;;;;;;AAWE;;;;;AAMD;;;;;AAMD;;AAGE;;;;;;;;;;AAcA;AACI;;AAEE;AACH;;AAGL;AAEI;AACA;AACA;;;AAMJ;AA4BF;AAiBO;AACP;;"}

package/dist/esm/components/primitives/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.js","sources":["../../../../../../src/components/primitives/Paper/Paper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;;AAgBC;AAEI;AACI;;AAGI;AACL;;;;;;;;;AAuBT;AAGF;;"}
+{"version":3,"file":"Paper.js","sources":["src/components/primitives/Paper/Paper.tsx"],"sourcesContent":["'use client';\n\n// src/components/primitives/Paper/Paper.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { paperRecipe } from './Paper.css';\n\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Paper elevation levels (shadow intensity)\n */\nexport type PaperElevation = 0 | 1 | 2 | 3;\n\n/**\n * Paper nesting levels for automatic background adjustment\n * Higher levels get progressively lighter backgrounds\n */\nexport type PaperNestLevel = 0 | 1 | 2 | 3;\n\n/**\n * Paper spacing variants based on theme spacing tokens\n */\nexport type PaperSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';\n\nexport interface PaperBaseProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'css'\n> {\n  /**\n   * Paper content - any React elements\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Paper elevation level controlling shadow intensity\n   * - `0`: No shadow (flat)\n   * - `1`: Small shadow (subtle depth)\n   * - `2`: Medium shadow (moderate depth)\n   * - `3`: Large shadow (high depth)\n   * @default 1\n   */\n  elevation?: PaperElevation;\n\n  /**\n   * Whether to show border around the paper\n   * Uses theme border color with subtle opacity\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * Internal padding using theme spacing tokens\n   * - `xs`: 2px padding\n   * - `sm`: 4px padding\n   * - `md`: 8px padding (default)\n   * - `lg`: 12px padding\n   * - `xl`: 16px padding\n   * - `xxl`: 24px padding\n   * - `xxxl`: 32px padding\n   * @default \"md\"\n   */\n  padding?: PaperSpacing;\n\n  /**\n   * Nesting level for automatic background adjustment\n   * Higher levels get progressively lighter backgrounds for better visual hierarchy\n   * - `0`: Primary background (darkest)\n   * - `1`: Secondary background\n   * - `2`: Tertiary background\n   * - `3`: Elevated background (lightest)\n   * @default 0\n   */\n  nestLevel?: PaperNestLevel;\n\n  /**\n   * Whether the paper should expand to fill available space\n   * Sets width and height to 100%\n   * @default false\n   */\n  expand?: boolean;\n\n  /**\n   * Custom border radius override\n   * Overrides default theme border radius if provided\n   * @example \"8px\", \"50%\", \"0\"\n   */\n  customRadius?: string | number;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Props for the Paper component with prettified type for better IntelliSense\n */\nexport type PaperProps = Prettify<PaperBaseProps>;\n\n/**\n * A versatile paper component providing surface elevation and visual hierarchy.\n *\n * Perfect for creating cards, panels, modals, and any content that needs to stand out\n * from the background. Supports elevation shadows, automatic background adjustment\n * for nested components, and flexible spacing control.\n *\n * @example\n * ```tsx\n * // Basic paper with elevation\n * <Paper elevation={2} padding=\"lg\">\n *   <h3>Card Title</h3>\n *   <p>Card content goes here</p>\n * </Paper>\n *\n * // Nested papers with automatic background adjustment\n * <Paper nestLevel={0} padding=\"xl\">\n *   <h2>Main Container</h2>\n *   <Paper nestLevel={1} padding=\"lg\">\n *     <h3>Nested Section</h3>\n *     <Paper nestLevel={2} padding=\"md\">\n *       <p>Deeply nested content</p>\n *     </Paper>\n *   </Paper>\n * </Paper>\n *\n * // Bordered paper without shadow\n * <Paper elevation={0} bordered padding=\"md\">\n *   <p>Subtle outlined container</p>\n * </Paper>\n *\n * // Full-width expanded paper\n * <Paper expand elevation={1} padding=\"lg\">\n *   <header>Full width header</header>\n *   <main>Main content area</main>\n * </Paper>\n *\n * // Custom radius paper\n * <Paper elevation={2} customRadius=\"12px\" padding=\"lg\">\n *   <p>Paper with custom border radius</p>\n * </Paper>\n *\n * // Compact paper for small UI elements\n * <Paper elevation={1} padding=\"xs\">\n *   <Icon name=\"settings\" />\n * </Paper>\n * ```\n */\nexport const Paper = /*#__PURE__*/ React.memo<PaperProps>(\n  ({\n    children,\n    elevation = 1,\n    bordered = false,\n    padding = 'md',\n    nestLevel = 0,\n    expand = false,\n    customRadius,\n    className,\n    testId,\n    style,\n    ref,\n    ...htmlProps\n  }) => {\n    const customRadiusStyle =\n      customRadius !== undefined\n        ? {\n            borderRadius:\n              typeof customRadius === 'number'\n                ? `${customRadius}px`\n                : customRadius,\n          }\n        : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          paperRecipe({\n            elevation,\n            bordered: bordered || undefined,\n            padding,\n            nestLevel,\n            expand: expand || undefined,\n          }),\n          className\n        )}\n        data-testid={testId}\n        style={{ ...customRadiusStyle, ...style }}\n        {...htmlProps}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nPaper.displayName = 'Paper';\n"],"names":[],"mappings":";;;;;;AAwGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;;AAgBC;AAEI;AACI;;AAGI;AACL;;;;;;;;;AAuBT;AAGF;;"}

package/dist/esm/components/primitives/Popover/Popover.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
 import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useInteractions } from '@floating-ui/react';
+import { useId, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
 
 // --- Context ---
 const PopoverContext = /*#__PURE__*/ createContext(null);

package/dist/esm/components/primitives/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../../../src/components/primitives/Popover/Popover.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAwBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;;AAcD;AACA;AACA;;AAGA;;AAGA;;;;AAKI;AACF;AAIF;;AAEA;AAEA;;;AAGI;;AAEJ;AAEA;;AAEI;;;AAEA;;;;;AAMF;AACA;AACA;AACA;AACA;AACD;;AAGD;AACA;AACE;AACA;AACD;AAED;;;AAGC;AAED;;AAGI;AACA;;;;;;;;AAQA;;AAEA;;AAEA;;;AAGD;;;;;;;;;;;;;;;AAgBA;AAGH;AAKF;AAEA;;"}
+{"version":3,"file":"Popover.js","sources":["src/components/primitives/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useFloating,\n  offset as offsetMiddleware,\n  flip,\n  shift,\n  autoUpdate,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from '@floating-ui/react';\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport type { PopoverContextValue, PopoverProps } from './Popover.types';\n\n// --- Context ---\n\nconst PopoverContext = /*#__PURE__*/ createContext<PopoverContextValue | null>(\n  null\n);\n\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) {\n    throw new Error(\n      'Popover compound components must be used within <Popover>'\n    );\n  }\n  return ctx;\n}\n\n// --- Component ---\n\n/**\n * Popover component — a floating content container for interactive content\n * anchored to a trigger element.\n *\n * Uses @floating-ui/react for robust positioning with collision detection,\n * flip/shift behavior, and scroll-aware auto-updating.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>\n *     <Button>Open</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nexport const Popover: React.FC<PopoverProps> = ({\n  open: openProp,\n  defaultOpen = false,\n  placement = 'bottom-start',\n  offset = 8,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  returnFocus = true,\n  portal = true,\n  matchTriggerWidth = false,\n  children,\n  onOpenChange,\n}) => {\n  const autoId = useId();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = openProp !== undefined;\n  const isOpen = isControlled ? openProp : internalOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPopover = useCallback(() => {\n    handleOpenChange(true);\n  }, [handleOpenChange]);\n\n  const closePopover = useCallback(() => {\n    handleOpenChange(false);\n    if (returnFocus) {\n      triggerRef.current?.focus();\n    }\n  }, [handleOpenChange, returnFocus]);\n\n  const toggle = useCallback(() => {\n    if (isOpen) {\n      closePopover();\n    } else {\n      openPopover();\n    }\n  }, [isOpen, openPopover, closePopover]);\n\n  // Floating UI setup\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    placement: placement,\n    middleware: [offsetMiddleware(offset), flip(), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  // Interactions\n  const click = useClick(context);\n  const dismiss = useDismiss(context, {\n    outsidePress: closeOnClickOutside,\n    escapeKey: closeOnEscape,\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    click,\n    dismiss,\n  ]);\n\n  const contextValue: PopoverContextValue = useMemo(\n    () => ({\n      isOpen,\n      open: openPopover,\n      close: closePopover,\n      toggle,\n      triggerRef,\n      contentRef,\n      placement,\n      offset,\n      portal,\n      matchTriggerWidth,\n      popoverId: autoId,\n      // Floating UI context\n      floatingRefs: refs,\n      floatingStyles,\n      floatingContext: context,\n      getReferenceProps,\n      getFloatingProps,\n    }),\n    [\n      isOpen,\n      openPopover,\n      closePopover,\n      toggle,\n      placement,\n      offset,\n      portal,\n      matchTriggerWidth,\n      autoId,\n      refs,\n      floatingStyles,\n      context,\n      getReferenceProps,\n      getFloatingProps,\n    ]\n  );\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      {children}\n    </PopoverContext.Provider>\n  );\n};\n\nPopover.displayName = 'Popover';\n"],"names":[],"mappings":";;;;;AAwBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;;AAcD;AACA;AACA;;AAGA;;AAGA;;;;AAKI;AACF;AAIF;;AAEA;AAEA;;;AAGI;;AAEJ;AAEA;;AAEI;;;AAEA;;;;;AAMF;AACA;AACA;AACA;AACA;AACD;;AAGD;AACA;AACE;AACA;AACD;AAED;;;AAGC;AAED;;AAGI;AACA;;;;;;;;AAQA;;AAEA;;AAEA;;;AAGD;;;;;;;;;;;;;;;AAgBA;AAGH;AAKF;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverClose.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
-import { usePopoverContext } from './Popover.js';
 import { cx } from '../../../utils/cx.js';
+import { usePopoverContext } from './Popover.js';
 import { closeButtonStyle } from './Popover.css.js';
 
 // --- Component ---

package/dist/esm/components/primitives/Popover/PopoverClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverClose.js","sources":["../../../../../../src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AASA;;AAUE;AAEA;;AAGI;AACF;;AAkBJ;AAEA;;"}
+{"version":3,"file":"PopoverClose.js","sources":["src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { cx } from '@/utils/cx';\n\nimport { usePopoverContext } from './Popover';\nimport { closeButtonStyle } from './Popover.css';\n\nimport type { PopoverCloseProps } from './Popover.types';\n\n// --- Component ---\n\nexport const PopoverClose: React.FC<PopoverCloseProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { close } = usePopoverContext();\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      close();\n    },\n    [close]\n  );\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Close\"\n      onClick={handleClick}\n      className={cx(closeButtonStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children ?? <CloseIcon size=\"sm\" decorative />}\n    </button>\n  );\n};\n\nPopoverClose.displayName = 'PopoverClose';\n"],"names":[],"mappings":";;;;;;;;AAYA;;AAUE;AAEA;;AAGI;AACF;;AAkBJ;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverContent.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { FloatingFocusManager } from '@floating-ui/react';
 import { useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { FloatingFocusManager } from '@floating-ui/react';
-import { usePopoverContext } from './Popover.js';
 import { cx } from '../../../utils/cx.js';
+import { usePopoverContext } from './Popover.js';
 import { contentPanelRecipe } from './Popover.css.js';
 
 // --- Component ---
@@ -20,8 +20,7 @@ const PopoverContent = ({ children, width, maxHeight, padding = 'md', className,
             externalRef(node);
         }
         else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
+            externalRef.current = node;
         }
     }, [contentRef, floatingRefs, externalRef]);
     // Trigger enter animation on next frame after open
@@ -32,6 +31,9 @@ const PopoverContent = ({ children, width, maxHeight, padding = 'md', className,
             });
         }
         else {
+            // Reset enter-animation state on close; gated by the `isOpen` prop, so
+            // this is a one-shot transition rather than continuous state sync.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setVisible(false);
         }
     }, [isOpen]);

package/dist/esm/components/primitives/Popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","sources":["../../../../../../src/components/primitives/Popover/PopoverContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAUA;AAEO;;;AAwBL;;AAGA;AAEI;AACA;AACA;;;AAEO;AACJ;AACC;;;;;;;;AAWJ;;;;;AAIJ;;AAGE;;;;AAKA;AACE;AACA;;;AAKJ;;;AAIA;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;AAWS;AAID;AACA;AACA;;;;;AAeR;AACF;AAEA;;"}
+{"version":3,"file":"PopoverContent.js","sources":["src/components/primitives/Popover/PopoverContent.tsx"],"sourcesContent":["'use client';\n\nimport { FloatingFocusManager } from '@floating-ui/react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cx } from '@/utils/cx';\n\nimport { usePopoverContext } from './Popover';\nimport { contentPanelRecipe } from './Popover.css';\n\nimport type { PopoverContentProps } from './Popover.types';\n\n// --- Component ---\n\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n  children,\n  width,\n  maxHeight,\n  padding = 'md',\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const {\n    isOpen,\n    contentRef,\n    portal,\n    matchTriggerWidth,\n    popoverId,\n    floatingRefs,\n    floatingStyles,\n    floatingContext,\n    getFloatingProps,\n  } = usePopoverContext();\n\n  const [visible, setVisible] = useState(false);\n  const contentId = `popover-${popoverId}-content`;\n\n  // Set ref\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      floatingRefs.setFloating(node);\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [contentRef, floatingRefs, externalRef]\n  );\n\n  // Trigger enter animation on next frame after open\n  useEffect(() => {\n    if (isOpen) {\n      requestAnimationFrame(() => {\n        setVisible(true);\n      });\n    } else {\n      // Reset enter-animation state on close; gated by the `isOpen` prop, so\n      // this is a one-shot transition rather than continuous state sync.\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVisible(false);\n    }\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  // Get trigger width for matchTriggerWidth\n  const triggerWidth = matchTriggerWidth\n    ? floatingRefs.reference.current\n      ? (floatingRefs.reference.current as HTMLElement).offsetWidth\n      : undefined\n    : undefined;\n\n  const computedWidth = matchTriggerWidth ? triggerWidth : width;\n\n  const floatingProps = getFloatingProps();\n\n  // Build dimension styles\n  const dimensionStyles: React.CSSProperties = {};\n  if (computedWidth != null) {\n    dimensionStyles.width =\n      typeof computedWidth === 'number' ? `${computedWidth}px` : computedWidth;\n  }\n  if (maxHeight != null) {\n    dimensionStyles.maxHeight =\n      typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n    dimensionStyles.overflowY = 'auto';\n  }\n\n  const contentElement = (\n    <FloatingFocusManager context={floatingContext} modal={false}>\n      <div\n        ref={setRef}\n        role=\"dialog\"\n        id={contentId}\n        tabIndex={-1}\n        className={cx(\n          contentPanelRecipe({\n            padding,\n            visible: visible || undefined,\n          }),\n          className\n        )}\n        style={{\n          ...floatingStyles,\n          ...dimensionStyles,\n          ...style,\n        }}\n        data-testid={testId}\n        {...floatingProps}\n        {...rest}\n      >\n        {children}\n      </div>\n    </FloatingFocusManager>\n  );\n\n  if (portal) {\n    return createPortal(contentElement, document.body);\n  }\n\n  return contentElement;\n};\n\nPopoverContent.displayName = 'PopoverContent';\n"],"names":[],"mappings":";;;;;;;;;AAaA;AAEO;;;AAwBL;;AAGA;AAEI;AACA;AACA;;;AAEO;AACL;;;;;;;;AAWF;;;;;;;;AAOJ;;AAGE;;;;AAKA;AACE;AACA;;;AAKJ;;;AAIA;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;AAWS;AAID;AACA;AACA;;;;;AAeR;AACF;AAEA;;"}

package/dist/esm/components/primitives/Popover/PopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverTrigger.js","sources":["../../../../../../src/components/primitives/Popover/PopoverTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;;;AAGG;;AAED;AAQA;AAEA;;AAGI;AACF;AAIF;AAEI;AACA;AACF;;;AAMA;;;AAIA;AACD;AAED;AAGI;AACA;AACA;AACA;;AAED;AAEL;AAEA;;"}
+{"version":3,"file":"PopoverTrigger.js","sources":["src/components/primitives/Popover/PopoverTrigger.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { usePopoverContext } from './Popover';\n\nimport type { PopoverTriggerProps } from './Popover.types';\n\n/**\n * Wraps the trigger element for a Popover.\n * Clicking the trigger toggles the popover open/closed.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n  const {\n    toggle,\n    isOpen,\n    triggerRef,\n    popoverId,\n    floatingRefs,\n    getReferenceProps,\n  } = usePopoverContext();\n  const contentId = `popover-${popoverId}-content`;\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      toggle();\n    },\n    [toggle]\n  );\n\n  const setRef = useCallback(\n    (node: HTMLElement | null) => {\n      triggerRef.current = node;\n      floatingRefs.setReference(node);\n    },\n    [triggerRef, floatingRefs]\n  );\n\n  // Clone the child element to add props\n  if (!React.isValidElement(children)) {\n    return null;\n  }\n\n  const referenceProps = getReferenceProps({\n    onClick: handleClick,\n  });\n\n  return React.cloneElement(\n    children as React.ReactElement<Record<string, unknown>>,\n    {\n      ref: setRef,\n      ...referenceProps,\n      'aria-haspopup': 'dialog',\n      'aria-expanded': isOpen,\n      'aria-controls': isOpen ? contentId : undefined,\n    }\n  );\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n"],"names":[],"mappings":";;;;AAQA;;;AAGG;;AAED;AAQA;AAEA;;AAGI;AACF;AAIF;AAEI;AACA;AACF;;;AAMA;;;AAIA;AACD;AAED;AAGI;AACA;AACA;AACA;;AAED;AAEL;AAEA;;"}

package/dist/esm/components/primitives/Radio/Radio.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useContext, useId, useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useContext, useId, useState, useCallback } from 'react';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { cx } from '../../../utils/cx.js';
-import { RadioGroupContext } from './RadioGroup.js';
 import { innerSizeVar, outerSizeVar, visuallyHiddenInputStyle, radioDotRecipe, radioOuterRecipe, radioLabelTextStyle, radioLabelRecipe, radioContainerStyle } from './Radio.css.js';
+import { RadioGroupContext } from './RadioGroup.js';
 
 const OUTER_SIZES = {
     sm: 12,
@@ -87,7 +87,7 @@ const Radio = /*#__PURE__*/ React.memo(({ value, checked: checkedProp, defaultCh
             labelPosition,
             size,
             disabled: disabled || undefined,
-        }), children: [jsx("input", { ref: ref, type: "radio", role: "radio", id: radioId, name: name, value: value, checked: resolvedChecked, disabled: disabled, "aria-checked": resolvedChecked, "aria-disabled": disabled || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, onChange: handleChange, className: visuallyHiddenInputStyle, "data-testid": testId, ...rest }), jsx("span", { "aria-hidden": "true", className: radioOuterRecipe({
+        }), children: [jsx("input", { ref: ref, type: "radio", id: radioId, name: name, value: value, checked: resolvedChecked, disabled: disabled, "aria-checked": resolvedChecked, "aria-disabled": disabled || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, onChange: handleChange, className: visuallyHiddenInputStyle, "data-testid": testId, ...rest }), jsx("span", { "aria-hidden": "true", className: radioOuterRecipe({
                     checked: resolvedChecked || undefined,
                     disabled: disabled || undefined,
                     error: error || undefined,

package/dist/esm/components/primitives/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/primitives/Radio/Radio.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAmBA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAqBH;AACA;AACA;AACA;;AAGA;AACA;;AAGA;;;AAGE;AACF;AACA;AAEA;;AAEE;;;;;;;;AAOF;AAEI;;;AAGE;;;;;;AAQF;AACF;AAIF;AAEI;;AAEE;;;;;AAML;AAED;;;;AAMK;;;;;;;AAiCI;;AAQP;AACE;;AAMF;;AAGF;AAQF;AAGF;;"}
+{"version":3,"file":"Radio.js","sources":["src/components/primitives/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useContext, useId, useState } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { cx } from '@/utils/cx';\n\nimport {\n  innerSizeVar,\n  outerSizeVar,\n  radioContainerStyle,\n  radioDotRecipe,\n  radioLabelRecipe,\n  radioLabelTextStyle,\n  radioOuterRecipe,\n  visuallyHiddenInputStyle,\n} from './Radio.css';\nimport { RadioGroupContext } from './RadioGroup';\n\nimport type { RadioProps, RadioSize } from './Radio.types';\n\nconst OUTER_SIZES: Record<RadioSize, number> = {\n  sm: 12,\n  md: 14,\n  lg: 16,\n};\n\nconst INNER_SIZES: Record<RadioSize, number> = {\n  sm: 6,\n  md: 6,\n  lg: 8,\n};\n\n/**\n * Radio component for mutually exclusive selection in property panels,\n * settings, and form interfaces.\n *\n * Works standalone (controlled or uncontrolled) or as a child of `RadioGroup`,\n * which manages exclusive selection across siblings via context. When inside\n * a `RadioGroup`, the group's `value`, `name`, `size`, `disabled`, and `error`\n * override the corresponding props on individual radios.\n *\n * @example\n * ```tsx\n * <Radio value=\"local\" label=\"Local\" />\n *\n * <RadioGroup value={space} onChange={setSpace} label=\"Coordinate space\">\n *   <Radio value=\"local\" label=\"Local\" />\n *   <Radio value=\"world\" label=\"World\" />\n *   <Radio value=\"parent\" label=\"Parent\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = /*#__PURE__*/ React.memo<RadioProps>(\n  ({\n    value,\n    checked: checkedProp,\n    defaultChecked = false,\n    label,\n    labelPosition = 'right',\n    size: sizeProp,\n    disabled: disabledProp,\n    helperText,\n    error: errorProp,\n    errorMessage,\n    name: nameProp,\n    onChange,\n    className,\n    style,\n    testId,\n    ref,\n    id: idProp,\n    ...rest\n  }) => {\n    const groupContext = useContext(RadioGroupContext);\n    const autoId = useId();\n    const radioId = idProp ?? autoId;\n    const helperId = `${radioId}-helper`;\n\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const isGrouped = groupContext !== null;\n\n    // Group context overrides individual props when present\n    const size: RadioSize = isGrouped ? groupContext.size : (sizeProp ?? 'md');\n    const disabled = isGrouped\n      ? groupContext.disabled\n      : (disabledProp ?? false);\n    const error = isGrouped ? groupContext.error : (errorProp ?? false);\n    const name = isGrouped ? groupContext.name : nameProp;\n\n    let resolvedChecked: boolean;\n    if (isGrouped) {\n      resolvedChecked = groupContext.value === value;\n    } else if (isControlled) {\n      resolvedChecked = checkedProp;\n    } else {\n      resolvedChecked = internalChecked;\n    }\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) return;\n\n        if (isGrouped) {\n          groupContext.onChange(value, event);\n          return;\n        }\n\n        if (!isControlled) {\n          setInternalChecked(true);\n        }\n\n        onChange?.(value, event);\n      },\n      [disabled, isGrouped, groupContext, value, isControlled, onChange]\n    );\n\n    const showHelperText =\n      !isGrouped && error && errorMessage\n        ? errorMessage\n        : !isGrouped\n          ? helperText\n          : undefined;\n\n    const outerInlineVars = assignInlineVars({\n      [outerSizeVar]: `${OUTER_SIZES[size]}px`,\n      [innerSizeVar]: `${INNER_SIZES[size]}px`,\n    });\n\n    const labelNode = (\n      <label\n        className={radioLabelRecipe({\n          labelPosition,\n          size,\n          disabled: disabled || undefined,\n        })}\n      >\n        {/* aria-invalid surfaces the error state to assistive tech and is part\n            of this component's documented/tested API; jsx-a11y's role support\n            table for the implicit radio role is overly strict here. */}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={radioId}\n          name={name}\n          value={value}\n          checked={resolvedChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          aria-disabled={disabled || undefined}\n          aria-invalid={error || undefined}\n          aria-describedby={showHelperText ? helperId : undefined}\n          onChange={handleChange}\n          className={visuallyHiddenInputStyle}\n          data-testid={testId}\n          {...rest}\n        />\n        <span\n          aria-hidden=\"true\"\n          className={radioOuterRecipe({\n            checked: resolvedChecked || undefined,\n            disabled: disabled || undefined,\n            error: error || undefined,\n          })}\n          style={outerInlineVars}\n        >\n          <span\n            className={radioDotRecipe({\n              checked: resolvedChecked || undefined,\n              error: error || undefined,\n            })}\n          />\n        </span>\n        {label && <span className={radioLabelTextStyle}>{label}</span>}\n      </label>\n    );\n\n    if (!showHelperText) {\n      if (className || style) {\n        return (\n          <div className={cx(radioContainerStyle, className)} style={style}>\n            {labelNode}\n          </div>\n        );\n      }\n      return labelNode;\n    }\n\n    return (\n      <div className={cx(radioContainerStyle, className)} style={style}>\n        {labelNode}\n        <FormHelperText id={helperId} error={error}>\n          {showHelperText}\n        </FormHelperText>\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n"],"names":[],"mappings":";;;;;;;;;AAsBA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAqBH;AACA;AACA;AACA;;AAGA;AACA;;AAGA;;;AAGE;AACF;AACA;AAEA;;AAEE;;;;;;;;AAOF;AAEI;;;AAGE;;;;;;AAQF;AACF;AAIF;AAEI;;AAEE;;;;;AAML;AAED;;;;AAMK;;;;;;;AAoCI;;AAQP;AACE;;AAMF;;AAGF;AAQF;AAGF;;"}

package/dist/esm/components/primitives/Radio/RadioGroup.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId, useState, useCallback, useMemo, createContext } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { FormLabel } from '../../form/FormLabel.js';
+import React, { useId, useState, useCallback, useMemo, createContext } from 'react';
 import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { groupItemsStyle, groupSpacingVar, groupOrientationVar, groupContainerStyle } from './Radio.css.js';

package/dist/esm/components/primitives/Radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/primitives/Radio/RadioGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBE;AAEF;;;;;;;;;;AAWA;;AACmC;;;;AAInC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAuBH;AACA;AACA;AACA;;AAKA;;AAGA;;;;AAKI;AACF;AAIF;AAEI;;;;;AAKA;AACD;AAIH;AAEA;;;AA2BU;;AAaZ;AAGF;;"}
+{"version":3,"file":"RadioGroup.js","sources":["src/components/primitives/Radio/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  createContext,\n  useCallback,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { FormLabel } from '@/components/form/FormLabel';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  groupContainerStyle,\n  groupItemsStyle,\n  groupOrientationVar,\n  groupSpacingVar,\n} from './Radio.css';\n\nimport type { RadioGroupContextValue, RadioGroupProps } from './Radio.types';\n\nexport const RadioGroupContext =\n  /*#__PURE__*/ createContext<RadioGroupContextValue | null>(null);\n\nconst SPACING_SCALE: readonly string[] = [\n  '0',\n  vars.spacing.xs,\n  vars.spacing.sm,\n  vars.spacing.md,\n  vars.spacing.lg,\n  vars.spacing.xl,\n  vars.spacing.xxl,\n  vars.spacing.xxxl,\n];\n\nconst resolveSpacing = (spacing: number | string): string => {\n  if (typeof spacing === 'string') return spacing;\n  const clamped = Math.max(0, Math.min(SPACING_SCALE.length - 1, spacing));\n  const index = Math.floor(clamped);\n  return SPACING_SCALE[index] ?? vars.spacing.sm;\n};\n\n/**\n * Groups multiple Radio components with shared, exclusive selection state.\n *\n * Manages a single `string` value, propagates `name`, `size`, `disabled`,\n * and `error` to children via React Context, and applies `aria-required`\n * for required fields. Supports controlled and uncontrolled modes.\n *\n * @example\n * ```tsx\n * <RadioGroup\n *   label=\"Coordinate space\"\n *   value={space}\n *   onChange={setSpace}\n * >\n *   <Radio value=\"local\" label=\"Local\" />\n *   <Radio value=\"world\" label=\"World\" />\n *   <Radio value=\"parent\" label=\"Parent\" />\n * </RadioGroup>\n * ```\n */\nexport const RadioGroup = /*#__PURE__*/ React.memo<RadioGroupProps>(\n  ({\n    value: valueProp,\n    defaultValue,\n    label,\n    helperText,\n    disabled = false,\n    error = false,\n    errorMessage,\n    required = false,\n    orientation = 'vertical',\n    spacing = 2,\n    name,\n    size = 'md',\n    onChange,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    id: idProp,\n    ...rest\n  }) => {\n    const autoId = useId();\n    const groupId = idProp ?? autoId;\n    const labelId = `${groupId}-label`;\n    const helperId = `${groupId}-helper`;\n\n    const [internalValue, setInternalValue] = useState<string | undefined>(\n      defaultValue\n    );\n    const isControlled = valueProp !== undefined;\n    const currentValue = isControlled ? valueProp : internalValue;\n\n    const handleChange = useCallback(\n      (nextValue: string) => {\n        if (!isControlled) {\n          setInternalValue(nextValue);\n        }\n        onChange?.(nextValue);\n      },\n      [isControlled, onChange]\n    );\n\n    const contextValue = useMemo<RadioGroupContextValue>(\n      () => ({\n        value: currentValue,\n        name,\n        size,\n        disabled,\n        error,\n        onChange: handleChange,\n      }),\n      [currentValue, name, size, disabled, error, handleChange]\n    );\n\n    const showHelperText = error && errorMessage ? errorMessage : helperText;\n\n    const flexDirection = orientation === 'horizontal' ? 'row' : 'column';\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-labelledby={label ? labelId : undefined}\n        aria-describedby={showHelperText ? helperId : undefined}\n        aria-required={required || undefined}\n        aria-invalid={error || undefined}\n        aria-disabled={disabled || undefined}\n        aria-orientation={orientation}\n        className={cx(groupContainerStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {label && (\n          <FormLabel id={labelId} required={required} disabled={disabled}>\n            {label}\n          </FormLabel>\n        )}\n        <RadioGroupContext.Provider value={contextValue}>\n          <div\n            className={groupItemsStyle}\n            style={assignInlineVars({\n              [groupOrientationVar]: flexDirection,\n              [groupSpacingVar]: resolveSpacing(spacing),\n            })}\n          >\n            {children}\n          </div>\n        </RadioGroupContext.Provider>\n        {showHelperText && (\n          <FormHelperText id={helperId} error={error}>\n            {showHelperText}\n          </FormHelperText>\n        )}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BE;AAEF;;;;;;;;;;AAWA;;AACmC;;;;AAInC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAuBH;AACA;AACA;AACA;;AAKA;;AAGA;;;;AAKI;AACF;AAIF;AAEI;;;;;AAKA;AACD;AAIH;AAEA;;;AA2BU;;AAaZ;AAGF;;"}

package/dist/esm/components/primitives/Switch/Switch.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useId, useState, useCallback } from 'react';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { cx } from '../../../utils/cx.js';
 import { trackHeightVar, trackWidthVar, thumbTranslateVar, thumbDiameterVar, thumbRecipe, trackRecipe, labelTextStyle, switchRowRecipe, switchContainerStyle } from './Switch.css.js';