@tribepad/themis 1.5.8 → 1.6.0

package/dist/elements/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/ColorPicker/ColorPicker.types.ts","../../../src/elements/ColorPicker/ColorPicker.styles.ts","../../../src/elements/ColorPicker/ColorPicker.tsx"],"names":["cn","inputs","twMerge","clsx","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","DEFAULT_COLORS","ColorPickerModeSchema","z","ColorPickerSizeSchema","ColorPickerPropsSchema","colorPickerContainerVariants","cva","colorPickerLabelVariants","colorPickerDescriptionVariants","colorPickerErrorVariants","colorInputRowVariants","colorInputVariants","colorPreviewVariants","colorAreaVariants","colorThumbVariants","colorSliderTrackVariants","colorSwatchGridVariants","colorSwatchItemVariants","disclosureToggleVariants","ColorPicker","mode","size","value","defaultValue","label","description","errorMessage","colors","isDisabled","isRequired","isInvalid","isReadOnly","name","onChange","onChangeEnd","className","id","ariaLabel","dataTestId","generatedId","useId","pickerId","advancedSectionId","errorId","isAdvancedOpen","setIsAdvancedOpen","useState","currentHex","setCurrentHex","labelState","inputState","swatchColors","parsedValue","useMemo","parseColor","parsedDefaultValue","handleChange","useCallback","color","showSwatch","showAdvanced","showDisclosure","jsxs","AriaColorPicker","AriaLabel","jsx","AriaColorField","e","AriaInput","AriaColorSwatch","AriaColorSwatchPicker","AriaColorSwatchPickerItem","prev","ChevronDown","AriaColorArea","AriaColorThumb","AriaColorSlider","AriaSliderTrack"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive-background)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success-background)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n","/**\n * ColorPicker Component Types\n *\n * Zod schemas and TypeScript types for the ColorPicker component.\n * Supports three modes: swatch-only, advanced-only, and combined.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { z } from 'zod';\nimport type { Color } from 'react-aria-components';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/**\n * Default swatch palette when no `colors` prop is provided.\n */\nexport const DEFAULT_COLORS: string[] = [\n  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n  '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n  '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n];\n\n// ============================================================================\n// Mode & Size Types\n// ============================================================================\n\n/**\n * Operating modes for the ColorPicker.\n * - 'swatch': Preset color grid only\n * - 'advanced': Full picker (ColorArea + hue slider) only\n * - 'both': Swatch grid with expandable advanced section\n */\nexport type ColorPickerMode = 'swatch' | 'advanced' | 'both';\n\n/**\n * Size variants for the ColorPicker.\n */\nexport type ColorPickerSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\nexport const ColorPickerModeSchema = z.enum(['swatch', 'advanced', 'both']);\nexport const ColorPickerSizeSchema = z.enum(['sm', 'default', 'lg']);\n\n/**\n * Zod schema for ColorPicker props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const ColorPickerPropsSchema = z.object({\n  // Mode\n  /** Which picker UI to display */\n  mode: ColorPickerModeSchema.optional().default('both'),\n\n  // Size\n  /** Size variant for inputs and swatches */\n  size: ColorPickerSizeSchema.optional().default('default'),\n\n  // Value\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value: z.string().optional(),\n  /** Uncontrolled initial hex value */\n  defaultValue: z.string().optional().default('#000000'),\n\n  // Display\n  /** Label text */\n  label: z.string().optional(),\n  /** Helper/description text */\n  description: z.string().optional(),\n  /** Error message shown when isInvalid */\n  errorMessage: z.string().optional(),\n\n  // Swatch colors\n  /** Array of hex color strings for swatch grid */\n  colors: z.array(z.string()).optional(),\n\n  // State\n  /** Whether the picker is disabled */\n  isDisabled: z.boolean().optional(),\n  /** Whether a value is required */\n  isRequired: z.boolean().optional(),\n  /** Whether the field is in an invalid state */\n  isInvalid: z.boolean().optional(),\n  /** Whether the field is read-only */\n  isReadOnly: z.boolean().optional(),\n\n  // Form integration\n  /** Name attribute for hidden form input */\n  name: z.string().optional(),\n\n  // Events (as Zod functions for schema validation)\n  /** Called when color changes */\n  onChange: z.function().optional(),\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd: z.function().optional(),\n\n  // Standard props\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Component id */\n  id: z.string().optional(),\n  /** Accessible label */\n  'aria-label': z.string().optional(),\n  /** Test id */\n  'data-testid': z.string().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Props for the ColorPicker component.\n */\nexport interface ColorPickerProps {\n  /** Which picker UI to display (default: \"both\") */\n  mode?: ColorPickerMode;\n  /** Size variant (default: \"default\") */\n  size?: ColorPickerSize;\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value?: string;\n  /** Uncontrolled initial hex value (default: \"#000000\") */\n  defaultValue?: string;\n  /** Label text */\n  label?: string;\n  /** Helper/description text */\n  description?: string;\n  /** Error message shown when isInvalid */\n  errorMessage?: string;\n  /** Array of hex color strings for swatch grid */\n  colors?: string[];\n  /** Whether the picker is disabled */\n  isDisabled?: boolean;\n  /** Whether a value is required */\n  isRequired?: boolean;\n  /** Whether the field is in an invalid state */\n  isInvalid?: boolean;\n  /** Whether the field is read-only */\n  isReadOnly?: boolean;\n  /** Name attribute for hidden form input */\n  name?: string;\n  /** Called when color changes - receives React Aria Color object */\n  onChange?: (color: Color) => void;\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd?: (color: Color) => void;\n  /** Additional CSS classes */\n  className?: string;\n  /** Component id */\n  id?: string;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Test id */\n  'data-testid'?: string;\n}\n","/**\n * ColorPicker CVA Variant Styles\n *\n * Styling for ColorPicker sub-elements using class-variance-authority.\n * Matches Themis input patterns for visual consistency.\n */\n\nimport { cva } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, FIELD_HEIGHTS } from '../../styles';\n\n/**\n * Container for the entire ColorPicker component\n */\nexport const colorPickerContainerVariants = cva(\n  \"flex flex-col gap-2\",\n);\n\n/**\n * Label styling - matches TextField label pattern\n */\nexport const colorPickerLabelVariants = cva(\n  \"text-sm font-medium leading-none\",\n  {\n    variants: {\n      state: {\n        default: \"text-[var(--content-foreground)]\",\n        error: \"text-[var(--destructive-foreground)]\",\n        disabled: \"opacity-50 cursor-not-allowed\",\n      },\n    },\n    defaultVariants: {\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Description/helper text styling\n */\nexport const colorPickerDescriptionVariants = cva(\n  \"text-sm text-[var(--content-foreground)]\"\n);\n\n/**\n * Error message styling\n */\nexport const colorPickerErrorVariants = cva(\n  \"text-sm text-[var(--destructive-foreground)] font-medium mt-1\"\n);\n\n/**\n * Hex input row container (field + preview swatch)\n */\nexport const colorInputRowVariants = cva(\n  \"flex items-center gap-2\",\n);\n\n/**\n * Hex color input field - matches TextField input styles.\n * Uses FIELD_INPUT_SIZES for consistent sizing with all form fields.\n * min-h-[44px] makes the input itself the 44px touch target (same as TextField, Select, etc.)\n */\nexport const colorInputVariants = cva(\n  \"flex w-full rounded-md border bg-[var(--content-background)] shadow-xs px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} py-1`,\n        default: `${FIELD_INPUT_SIZES.default} py-2`,\n        lg: `${FIELD_INPUT_SIZES.lg} py-3`,\n      },\n      state: {\n        default: \"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n        error: \"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        readonly: \"cursor-default bg-[var(--content-background)] opacity-70\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Color preview swatch next to the hex input\n */\nexport const colorPreviewVariants = cva(\n  \"rounded-md border border-[var(--input-border)] shrink-0\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_HEIGHTS.sm} w-9 min-h-[44px]`,\n        default: `${FIELD_HEIGHTS.default} w-10 min-h-[44px]`,\n        lg: `${FIELD_HEIGHTS.lg} w-11 min-h-[44px]`,\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * ColorArea (2D saturation/brightness picker)\n */\nexport const colorAreaVariants = cva(\n  \"w-full rounded-md border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-32\",\n        default: \"h-40\",\n        lg: \"h-48\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Color thumb (draggable handle on area/slider)\n */\nexport const colorThumbVariants = cva(\n  \"h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2\",\n);\n\n/**\n * Hue slider track\n */\nexport const colorSliderTrackVariants = cva(\n  \"w-full rounded-full border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4\",\n        default: \"h-5\",\n        lg: \"h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Swatch grid container\n */\nexport const colorSwatchGridVariants = cva(\n  \"flex flex-wrap gap-1.5\",\n);\n\n/**\n * Individual swatch item in the grid\n */\nexport const colorSwatchItemVariants = cva(\n  \"relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-6\",\n        default: \"h-8 w-8\",\n        lg: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Disclosure toggle button for expanding advanced section\n */\nexport const disclosureToggleVariants = cva(\n  \"flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm\",\n);\n","'use client';\n\n/**\n * ColorPicker Component\n *\n * Accessible color selection with swatch presets, advanced picker, or both.\n * Built on React Aria ColorPicker and ColorSwatchPicker primitives.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { useState, useId, useMemo, useCallback } from 'react';\nimport {\n  ColorPicker as AriaColorPicker,\n  ColorArea as AriaColorArea,\n  ColorSlider as AriaColorSlider,\n  ColorField as AriaColorField,\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  ColorThumb as AriaColorThumb,\n  SliderTrack as AriaSliderTrack,\n  Input as AriaInput,\n  Label as AriaLabel,\n  parseColor,\n  type Color,\n} from 'react-aria-components';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { DEFAULT_COLORS } from './ColorPicker.types';\nimport {\n  colorPickerContainerVariants,\n  colorPickerLabelVariants,\n  colorPickerDescriptionVariants,\n  colorPickerErrorVariants,\n  colorInputRowVariants,\n  colorInputVariants,\n  colorPreviewVariants,\n  colorAreaVariants,\n  colorThumbVariants,\n  colorSliderTrackVariants,\n  colorSwatchGridVariants,\n  colorSwatchItemVariants,\n  disclosureToggleVariants,\n} from './ColorPicker.styles';\n\n/**\n * ColorPicker Component\n *\n * Supports three modes:\n * - \"swatch\": Preset color grid only\n * - \"advanced\": Full picker (ColorArea + hue slider) only\n * - \"both\": Swatch grid with expandable advanced section\n *\n * @example\n * <ColorPicker label=\"Brand Color\" mode=\"both\" defaultValue=\"#7c3aed\" />\n *\n * @example\n * <ColorPicker mode=\"swatch\" colors={['#ff0000', '#00ff00', '#0000ff']} />\n */\nexport function ColorPicker({\n  mode = 'both',\n  size = 'default',\n  value,\n  defaultValue = '#000000',\n  label,\n  description,\n  errorMessage,\n  colors,\n  isDisabled = false,\n  isRequired = false,\n  isInvalid = false,\n  isReadOnly = false,\n  name,\n  onChange,\n  onChangeEnd,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: ColorPickerProps) {\n  const generatedId = useId();\n  const pickerId = id || generatedId;\n  const advancedSectionId = `${pickerId}-advanced`;\n  const errorId = `${pickerId}-error`;\n\n  // Disclosure state for \"both\" mode\n  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);\n\n  // Track current color for hidden form input\n  const [currentHex, setCurrentHex] = useState(value || defaultValue);\n\n  // Determine label state\n  const labelState = isDisabled ? 'disabled' as const : isInvalid ? 'error' as const : 'default' as const;\n\n  // Determine input state\n  const inputState = isDisabled\n    ? 'disabled' as const\n    : isReadOnly\n      ? 'readonly' as const\n      : isInvalid\n        ? 'error' as const\n        : 'default' as const;\n\n  // Swatch colors to use\n  const swatchColors = colors || DEFAULT_COLORS;\n\n  // Parse the initial color value\n  const parsedValue = useMemo(() => {\n    try {\n      return value ? parseColor(value) : undefined;\n    } catch {\n      return undefined;\n    }\n  }, [value]);\n\n  const parsedDefaultValue = useMemo(() => {\n    try {\n      return parseColor(defaultValue);\n    } catch {\n      return parseColor('#000000');\n    }\n  }, [defaultValue]);\n\n  const handleChange = useCallback((color: Color) => {\n    setCurrentHex(color.toString('hex'));\n    onChange?.(color);\n  }, [onChange]);\n\n  const showSwatch = mode === 'swatch' || mode === 'both';\n  const showAdvanced = mode === 'advanced' || mode === 'both';\n  const showDisclosure = mode === 'both';\n\n  return (\n    <div\n      className={cn(colorPickerContainerVariants(), className)}\n      id={pickerId}\n      data-testid={dataTestId}\n    >\n      <AriaColorPicker\n        value={parsedValue}\n        defaultValue={parsedValue ? undefined : parsedDefaultValue}\n        onChange={handleChange}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel className={cn(colorPickerLabelVariants({ state: labelState }))}>\n            {label}\n            {isRequired && (\n              <span className=\"ml-1 text-[var(--destructive-background)]\" aria-hidden=\"true\">\n                <strong>*</strong>\n              </span>\n            )}\n          </AriaLabel>\n        )}\n\n        {/* Description */}\n        {description && (\n          <p className={cn(colorPickerDescriptionVariants())}>{description}</p>\n        )}\n\n        {/* Hex input row */}\n        <div className={cn(colorInputRowVariants())}>\n          <AriaColorField\n            aria-label={ariaLabel || label || 'Color value'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            className={cn(FIELD_TOUCH_TARGET, 'cursor-text', 'flex-1')}\n            onClick={(e) => {\n              if (e.target === e.currentTarget) {\n                (e.currentTarget as HTMLElement).querySelector('input')?.focus();\n              }\n            }}\n          >\n            <AriaInput\n              className={cn(colorInputVariants({ size, state: inputState }))}\n              aria-errormessage={isInvalid && errorMessage ? errorId : undefined}\n              aria-required={isRequired ? true : undefined}\n            />\n          </AriaColorField>\n          <AriaColorSwatch\n            className={cn(colorPreviewVariants({ size }))}\n            aria-label=\"Selected color preview\"\n          />\n        </div>\n\n        {/* Swatch picker */}\n        {showSwatch && (\n          <AriaColorSwatchPicker\n            className={cn(colorSwatchGridVariants())}\n            aria-label=\"Color swatches\"\n          >\n            {swatchColors.map((color) => (\n              <AriaColorSwatchPickerItem\n                key={color}\n                color={color}\n                className={cn(colorSwatchItemVariants({ size }))}\n              >\n                <AriaColorSwatch\n                  className=\"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2\"\n                />\n              </AriaColorSwatchPickerItem>\n            ))}\n          </AriaColorSwatchPicker>\n        )}\n\n        {/* Disclosure toggle for \"both\" mode */}\n        {showDisclosure && (\n          <button\n            type=\"button\"\n            className={cn(disclosureToggleVariants())}\n            onClick={() => setIsAdvancedOpen((prev) => !prev)}\n            aria-expanded={isAdvancedOpen}\n            aria-controls={advancedSectionId}\n            disabled={isDisabled}\n          >\n            <ChevronDown\n              className={cn(\n                \"h-4 w-4 transition-transform duration-200\",\n                isAdvancedOpen && \"rotate-180\"\n              )}\n            />\n            Custom color\n          </button>\n        )}\n\n        {/* Advanced section (ColorArea + hue slider) */}\n        {showAdvanced && (mode === 'advanced' || isAdvancedOpen) && (\n          <div\n            id={advancedSectionId}\n            role=\"group\"\n            aria-label=\"Custom color picker\"\n            className=\"flex flex-col gap-2\"\n          >\n            <AriaColorArea\n              colorSpace=\"hsb\"\n              xChannel=\"saturation\"\n              yChannel=\"brightness\"\n              className={cn(colorAreaVariants({ size }))}\n              isDisabled={isDisabled}\n            >\n              <AriaColorThumb className={cn(colorThumbVariants())} />\n            </AriaColorArea>\n\n            <AriaColorSlider\n              colorSpace=\"hsb\"\n              channel=\"hue\"\n              isDisabled={isDisabled}\n              onChangeEnd={onChangeEnd}\n              aria-label=\"Hue\"\n            >\n              <AriaSliderTrack className={cn(colorSliderTrackVariants({ size }))}>\n                <AriaColorThumb className={cn(colorThumbVariants())} />\n              </AriaSliderTrack>\n            </AriaColorSlider>\n          </div>\n        )}\n      </AriaColorPicker>\n\n      {/* Error message */}\n      {isInvalid && errorMessage && (\n        <p id={errorId} className={cn(colorPickerErrorVariants())} role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n\n      {/* Hidden form input */}\n      {name && (\n        <input type=\"hidden\" name={name} value={currentHex} />\n      )}\n    </div>\n  );\n}\n\nColorPicker.displayName = 'ColorPicker';\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/ColorPicker/ColorPicker.types.ts","../../../src/elements/ColorPicker/ColorPicker.styles.ts","../../../src/elements/ColorPicker/ColorPicker.tsx"],"names":["cn","inputs","twMerge","clsx","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","DEFAULT_COLORS","ColorPickerModeSchema","z","ColorPickerSizeSchema","ColorPickerPropsSchema","colorPickerContainerVariants","cva","colorPickerLabelVariants","colorPickerDescriptionVariants","colorPickerErrorVariants","colorInputRowVariants","colorInputVariants","colorPreviewVariants","colorAreaVariants","colorThumbVariants","colorSliderTrackVariants","colorSwatchGridVariants","colorSwatchItemVariants","disclosureToggleVariants","ColorPicker","mode","size","value","defaultValue","label","description","errorMessage","colors","isDisabled","isRequired","isInvalid","isReadOnly","name","onChange","onChangeEnd","className","id","ariaLabel","dataTestId","generatedId","useId","pickerId","advancedSectionId","errorId","isAdvancedOpen","setIsAdvancedOpen","useState","currentHex","setCurrentHex","labelState","inputState","swatchColors","parsedValue","useMemo","parseColor","parsedDefaultValue","handleChange","useCallback","color","showSwatch","showAdvanced","showDisclosure","jsxs","AriaColorPicker","AriaLabel","jsx","AriaColorField","e","AriaInput","AriaColorSwatch","AriaColorSwatchPicker","AriaColorSwatchPickerItem","prev","ChevronDown","AriaColorArea","AriaColorThumb","AriaColorSlider","AriaSliderTrack"],"mappings":"oTAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCyGO,IAAMG,CAAAA,CAAgB,CAC3B,EAAA,CAAI,KAAA,CACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CAAA,CAQaC,CAAAA,CAAoB,CAC/B,EAAA,CAAI,CAAA,EAAGD,CAAAA,CAAc,EAAE,CAAA,aAAA,CAAA,CACvB,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAc,OAAO,CAAA,aAAA,CAAA,CACjC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAc,EAAE,CAAA,eAAA,CACzB,CAAA,CASaE,CAAAA,CAAqB,gCAAA,CC9H3B,IAAMC,CAAAA,CAA2B,CACtC,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CACnG,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CACnG,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,UAAW,SAAA,CAAW,SACrG,CAAA,CAuBaC,CAAAA,CAAwBC,KAAAA,CAAE,IAAA,CAAK,CAAC,QAAA,CAAU,UAAA,CAAY,MAAM,CAAC,CAAA,CAC7DC,CAAAA,CAAwBD,KAAAA,CAAE,IAAA,CAAK,CAAC,IAAA,CAAM,SAAA,CAAW,IAAI,CAAC,CAAA,CAMtDE,EAAAA,CAAyBF,KAAAA,CAAE,MAAA,CAAO,CAG7C,IAAA,CAAMD,CAAAA,CAAsB,QAAA,EAAS,CAAE,OAAA,CAAQ,MAAM,CAAA,CAIrD,IAAA,CAAME,CAAAA,CAAsB,QAAA,EAAS,CAAE,OAAA,CAAQ,SAAS,CAAA,CAIxD,KAAA,CAAOD,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE3B,YAAA,CAAcA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAAE,OAAA,CAAQ,SAAS,CAAA,CAIrD,KAAA,CAAOA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE3B,WAAA,CAAaA,MAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAEjC,YAAA,CAAcA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAIlC,MAAA,CAAQA,KAAAA,CAAE,KAAA,CAAMA,KAAAA,CAAE,MAAA,EAAQ,CAAA,CAAE,QAAA,EAAS,CAIrC,UAAA,CAAYA,KAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAEjC,UAAA,CAAYA,KAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,GAExB,SAAA,CAAWA,KAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAEhC,UAAA,CAAYA,KAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAIjC,IAAA,CAAMA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAI1B,QAAA,CAAUA,KAAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS,CAEhC,WAAA,CAAaA,KAAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS,CAInC,UAAWA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE/B,EAAA,CAAIA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAExB,YAAA,CAAcA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAElC,aAAA,CAAeA,KAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAC5B,CAAC,ECjGM,IAAMG,EAA+BC,0BAAAA,CAC1C,qBACF,CAAA,CAKaC,CAAAA,CAA2BD,0BAAAA,CACtC,kCAAA,CACA,CACE,QAAA,CAAU,CACR,KAAA,CAAO,CACL,OAAA,CAAS,kCAAA,CACT,KAAA,CAAO,sCAAA,CACP,QAAA,CAAU,+BACZ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,KAAA,CAAO,SACT,CACF,CACF,CAAA,CAKaE,CAAAA,CAAiCF,0BAAAA,CAC5C,0CACF,CAAA,CAKaG,EAA2BH,0BAAAA,CACtC,+DACF,CAAA,CAKaI,CAAAA,CAAwBJ,0BAAAA,CACnC,yBACF,CAAA,CAOaK,CAAAA,CAAqBL,0BAAAA,CAChC,6MAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,CAAA,EAAGR,CAAAA,CAAkB,EAAE,CAAA,KAAA,CAAA,CAC3B,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAkB,OAAO,CAAA,KAAA,CAAA,CACrC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAkB,EAAE,CAAA,KAAA,CAC7B,EACA,KAAA,CAAO,CACL,OAAA,CAAS,2IAAA,CACT,KAAA,CAAO,uKAAA,CACP,QAAA,CAAU,+BAAA,CACV,QAAA,CAAU,0DACZ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SAAA,CACN,KAAA,CAAO,SACT,CACF,CACF,CAAA,CAKac,CAAAA,CAAuBN,0BAAAA,CAClC,yDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,GAAGT,CAAAA,CAAc,EAAE,CAAA,iBAAA,CAAA,CACvB,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAc,OAAO,CAAA,kBAAA,CAAA,CACjC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAc,EAAE,CAAA,kBAAA,CACzB,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKagB,CAAAA,CAAoBP,0BAAAA,CAC/B,uDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,GAAI,MAAA,CACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaQ,CAAAA,CAAqBR,0BAAAA,CAChC,sNACF,CAAA,CAKaS,CAAAA,CAA2BT,0BAAAA,CACtC,yDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,KAAA,CACJ,OAAA,CAAS,KAAA,CACT,GAAI,KACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaU,CAAAA,CAA0BV,0BAAAA,CACrC,wBACF,CAAA,CAKaW,CAAAA,CAA0BX,0BAAAA,CACrC,2OAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,SAAA,CACT,EAAA,CAAI,WACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaY,CAAAA,CAA2BZ,0BAAAA,CACtC,sVACF,ECrHO,SAASa,CAAAA,CAAY,CAC1B,IAAA,CAAAC,CAAAA,CAAO,MAAA,CACP,IAAA,CAAAC,CAAAA,CAAO,SAAA,CACP,KAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CAAe,SAAA,CACf,KAAA,CAAAC,EACA,WAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,SAAA,CAAAC,CAAAA,CAAY,KAAA,CACZ,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,IAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,EAAA,CAAAC,CAAAA,CACA,YAAA,CAAcC,CAAAA,CACd,cAAeC,EACjB,CAAA,CAAqB,CACnB,IAAMC,EAAAA,CAAcC,WAAAA,EAAM,CACpBC,CAAAA,CAAWL,CAAAA,EAAMG,EAAAA,CACjBG,CAAAA,CAAoB,CAAA,EAAGD,CAAQ,CAAA,SAAA,CAAA,CAC/BE,CAAAA,CAAU,CAAA,EAAGF,CAAQ,CAAA,MAAA,CAAA,CAGrB,CAACG,CAAAA,CAAgBC,EAAiB,CAAA,CAAIC,cAAAA,CAAS,KAAK,CAAA,CAGpD,CAACC,EAAAA,CAAYC,EAAa,CAAA,CAAIF,cAAAA,CAASxB,GAASC,CAAY,CAAA,CAG5D0B,EAAAA,CAAarB,CAAAA,CAAa,UAAA,CAAsBE,CAAAA,CAAY,OAAA,CAAmB,SAAA,CAG/EoB,EAAAA,CAAatB,CAAAA,CACf,UAAA,CACAG,CAAAA,CACE,UAAA,CACAD,CAAAA,CACE,OAAA,CACA,SAAA,CAGFqB,EAAAA,CAAexB,CAAAA,EAAU3B,CAAAA,CAGzBoD,CAAAA,CAAcC,aAAAA,CAAQ,IAAM,CAChC,GAAI,CACF,OAAO/B,CAAAA,CAAQgC,8BAAAA,CAAWhC,CAAK,CAAA,CAAI,MACrC,CAAA,KAAQ,CACN,MACF,CACF,CAAA,CAAG,CAACA,CAAK,CAAC,CAAA,CAEJiC,EAAAA,CAAqBF,aAAAA,CAAQ,IAAM,CACvC,GAAI,CACF,OAAOC,8BAAAA,CAAW/B,CAAY,CAChC,CAAA,KAAQ,CACN,OAAO+B,8BAAAA,CAAW,SAAS,CAC7B,CACF,CAAA,CAAG,CAAC/B,CAAY,CAAC,EAEXiC,EAAAA,CAAeC,iBAAAA,CAAaC,CAAAA,EAAiB,CACjDV,EAAAA,CAAcU,CAAAA,CAAM,QAAA,CAAS,KAAK,CAAC,CAAA,CACnCzB,CAAAA,GAAWyB,CAAK,EAClB,CAAA,CAAG,CAACzB,CAAQ,CAAC,CAAA,CAEP0B,EAAAA,CAAavC,CAAAA,GAAS,QAAA,EAAYA,CAAAA,GAAS,MAAA,CAC3CwC,EAAAA,CAAexC,CAAAA,GAAS,UAAA,EAAcA,CAAAA,GAAS,MAAA,CAC/CyC,EAAAA,CAAiBzC,CAAAA,GAAS,OAEhC,OACE0C,eAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAWrE,CAAAA,CAAGY,CAAAA,EAA6B,CAAG8B,CAAS,CAAA,CACvD,EAAA,CAAIM,CAAAA,CACJ,aAAA,CAAaH,EAAAA,CAEb,QAAA,CAAA,CAAAwB,eAAAA,CAACC,+BAAAA,CAAA,CACC,KAAA,CAAOX,CAAAA,CACP,YAAA,CAAcA,CAAAA,CAAc,MAAA,CAAYG,EAAAA,CACxC,QAAA,CAAUC,EAAAA,CAGT,QAAA,CAAA,CAAAhC,CAAAA,EACCsC,eAAAA,CAACE,yBAAAA,CAAA,CAAU,UAAWvE,CAAAA,CAAGc,CAAAA,CAAyB,CAAE,KAAA,CAAO0C,EAAW,CAAC,CAAC,CAAA,CACrE,QAAA,CAAA,CAAAzB,CAAAA,CACAK,CAAAA,EACCoC,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,2CAAA,CAA4C,aAAA,CAAY,MAAA,CACtE,QAAA,CAAAA,cAAAA,CAAC,QAAA,CAAA,CAAO,QAAA,CAAA,GAAA,CAAC,CAAA,CACX,CAAA,CAAA,CAEJ,CAAA,CAIDxC,CAAAA,EACCwC,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAWxE,CAAAA,CAAGe,CAAAA,EAAgC,CAAA,CAAI,QAAA,CAAAiB,CAAAA,CAAY,CAAA,CAInEqC,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWrE,CAAAA,CAAGiB,CAAAA,EAAuB,CAAA,CACxC,QAAA,CAAA,CAAAuD,cAAAA,CAACC,8BAAAA,CAAA,CACC,YAAA,CAAY7B,CAAAA,EAAab,CAAAA,EAAS,aAAA,CAClC,UAAA,CAAYI,CAAAA,CACZ,UAAA,CAAYG,CAAAA,CACZ,SAAA,CAAWtC,CAAAA,CAAGM,CAAAA,CAAoB,aAAA,CAAe,QAAQ,CAAA,CACzD,OAAA,CAAUoE,GAAM,CACVA,CAAAA,CAAE,MAAA,GAAWA,CAAAA,CAAE,aAAA,EAChBA,CAAAA,CAAE,aAAA,CAA8B,aAAA,CAAc,OAAO,CAAA,EAAG,KAAA,GAE7D,CAAA,CAEA,QAAA,CAAAF,cAAAA,CAACG,yBAAAA,CAAA,CACC,SAAA,CAAW3E,CAAAA,CAAGkB,CAAAA,CAAmB,CAAE,IAAA,CAAAU,CAAAA,CAAM,KAAA,CAAO6B,EAAW,CAAC,CAAC,CAAA,CAC7D,mBAAA,CAAmBpB,CAAAA,EAAaJ,EAAeiB,CAAAA,CAAU,MAAA,CACzD,eAAA,CAAed,CAAAA,CAAa,IAAA,CAAO,MAAA,CACrC,CAAA,CACF,CAAA,CACAoC,cAAAA,CAACI,+BAAAA,CAAA,CACC,SAAA,CAAW5E,CAAAA,CAAGmB,CAAAA,CAAqB,CAAE,IAAA,CAAAS,CAAK,CAAC,CAAC,CAAA,CAC5C,YAAA,CAAW,wBAAA,CACb,CAAA,CAAA,CACF,CAAA,CAGCsC,EAAAA,EACCM,cAAAA,CAACK,qCAAAA,CAAA,CACC,SAAA,CAAW7E,CAAAA,CAAGuB,GAAyB,CAAA,CACvC,YAAA,CAAW,gBAAA,CAEV,QAAA,CAAAmC,EAAAA,CAAa,GAAA,CAAKO,CAAAA,EACjBO,cAAAA,CAACM,yCAAAA,CAAA,CAEC,KAAA,CAAOb,CAAAA,CACP,SAAA,CAAWjE,CAAAA,CAAGwB,CAAAA,CAAwB,CAAE,IAAA,CAAAI,CAAK,CAAC,CAAC,CAAA,CAE/C,QAAA,CAAA4C,cAAAA,CAACI,+BAAAA,CAAA,CACC,SAAA,CAAU,kHAAA,CACZ,CAAA,CAAA,CANKX,CAOP,CACD,CAAA,CACH,CAAA,CAIDG,EAAAA,EACCC,eAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAK,QAAA,CACL,SAAA,CAAWrE,CAAAA,CAAGyB,CAAAA,EAA0B,CAAA,CACxC,OAAA,CAAS,IAAM2B,EAAAA,CAAmB2B,CAAAA,EAAS,CAACA,CAAI,CAAA,CAChD,eAAA,CAAe5B,CAAAA,CACf,eAAA,CAAeF,CAAAA,CACf,QAAA,CAAUd,CAAAA,CAEV,QAAA,CAAA,CAAAqC,cAAAA,CAACQ,uBAAAA,CAAA,CACC,SAAA,CAAWhF,EACT,2CAAA,CACAmD,CAAAA,EAAkB,YACpB,CAAA,CACF,CAAA,CAAE,cAAA,CAAA,CAEJ,CAAA,CAIDgB,EAAAA,GAAiBxC,CAAAA,GAAS,UAAA,EAAcwB,CAAAA,CAAAA,EACvCkB,eAAAA,CAAC,KAAA,CAAA,CACC,EAAA,CAAIpB,CAAAA,CACJ,IAAA,CAAK,OAAA,CACL,YAAA,CAAW,qBAAA,CACX,SAAA,CAAU,qBAAA,CAEV,QAAA,CAAA,CAAAuB,cAAAA,CAACS,6BAAAA,CAAA,CACC,UAAA,CAAW,KAAA,CACX,QAAA,CAAS,YAAA,CACT,QAAA,CAAS,aACT,SAAA,CAAWjF,CAAAA,CAAGoB,CAAAA,CAAkB,CAAE,IAAA,CAAAQ,CAAK,CAAC,CAAC,CAAA,CACzC,UAAA,CAAYO,CAAAA,CAEZ,QAAA,CAAAqC,cAAAA,CAACU,8BAAAA,CAAA,CAAe,SAAA,CAAWlF,CAAAA,CAAGqB,CAAAA,EAAoB,CAAA,CAAG,CAAA,CACvD,CAAA,CAEAmD,cAAAA,CAACW,+BAAAA,CAAA,CACC,UAAA,CAAW,KAAA,CACX,OAAA,CAAQ,KAAA,CACR,UAAA,CAAYhD,EACZ,WAAA,CAAaM,CAAAA,CACb,YAAA,CAAW,KAAA,CAEX,QAAA,CAAA+B,cAAAA,CAACY,+BAAAA,CAAA,CAAgB,SAAA,CAAWpF,CAAAA,CAAGsB,CAAAA,CAAyB,CAAE,IAAA,CAAAM,CAAK,CAAC,CAAC,CAAA,CAC/D,QAAA,CAAA4C,cAAAA,CAACU,8BAAAA,CAAA,CAAe,SAAA,CAAWlF,CAAAA,CAAGqB,CAAAA,EAAoB,CAAA,CAAG,CAAA,CACvD,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAGCgB,CAAAA,EAAaJ,CAAAA,EACZuC,cAAAA,CAAC,GAAA,CAAA,CAAE,EAAA,CAAItB,CAAAA,CAAS,SAAA,CAAWlD,CAAAA,CAAGgB,CAAAA,EAA0B,CAAA,CAAG,IAAA,CAAK,OAAA,CAC7D,QAAA,CAAAiB,CAAAA,CACH,CAAA,CAIDM,CAAAA,EACCiC,cAAAA,CAAC,OAAA,CAAA,CAAM,IAAA,CAAK,QAAA,CAAS,IAAA,CAAMjC,CAAAA,CAAM,KAAA,CAAOe,EAAAA,CAAY,CAAA,CAAA,CAExD,CAEJ,CAEA5B,CAAAA,CAAY,WAAA,CAAc,aAAA","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive-background)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success-background)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n","/**\n * ColorPicker Component Types\n *\n * Zod schemas and TypeScript types for the ColorPicker component.\n * Supports three modes: swatch-only, advanced-only, and combined.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { z } from 'zod';\nimport type { Color } from 'react-aria-components';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/**\n * Default swatch palette when no `colors` prop is provided.\n */\nexport const DEFAULT_COLORS: string[] = [\n  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n  '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n  '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n];\n\n// ============================================================================\n// Mode & Size Types\n// ============================================================================\n\n/**\n * Operating modes for the ColorPicker.\n * - 'swatch': Preset color grid only\n * - 'advanced': Full picker (ColorArea + hue slider) only\n * - 'both': Swatch grid with expandable advanced section\n */\nexport type ColorPickerMode = 'swatch' | 'advanced' | 'both';\n\n/**\n * Size variants for the ColorPicker.\n */\nexport type ColorPickerSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\nexport const ColorPickerModeSchema = z.enum(['swatch', 'advanced', 'both']);\nexport const ColorPickerSizeSchema = z.enum(['sm', 'default', 'lg']);\n\n/**\n * Zod schema for ColorPicker props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const ColorPickerPropsSchema = z.object({\n  // Mode\n  /** Which picker UI to display */\n  mode: ColorPickerModeSchema.optional().default('both'),\n\n  // Size\n  /** Size variant for inputs and swatches */\n  size: ColorPickerSizeSchema.optional().default('default'),\n\n  // Value\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value: z.string().optional(),\n  /** Uncontrolled initial hex value */\n  defaultValue: z.string().optional().default('#000000'),\n\n  // Display\n  /** Label text */\n  label: z.string().optional(),\n  /** Helper/description text */\n  description: z.string().optional(),\n  /** Error message shown when isInvalid */\n  errorMessage: z.string().optional(),\n\n  // Swatch colors\n  /** Array of hex color strings for swatch grid */\n  colors: z.array(z.string()).optional(),\n\n  // State\n  /** Whether the picker is disabled */\n  isDisabled: z.boolean().optional(),\n  /** Whether a value is required */\n  isRequired: z.boolean().optional(),\n  /** Whether the field is in an invalid state */\n  isInvalid: z.boolean().optional(),\n  /** Whether the field is read-only */\n  isReadOnly: z.boolean().optional(),\n\n  // Form integration\n  /** Name attribute for hidden form input */\n  name: z.string().optional(),\n\n  // Events (as Zod functions for schema validation)\n  /** Called when color changes */\n  onChange: z.function().optional(),\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd: z.function().optional(),\n\n  // Standard props\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Component id */\n  id: z.string().optional(),\n  /** Accessible label */\n  'aria-label': z.string().optional(),\n  /** Test id */\n  'data-testid': z.string().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Props for the ColorPicker component.\n */\nexport interface ColorPickerProps {\n  /** Which picker UI to display (default: \"both\") */\n  mode?: ColorPickerMode;\n  /** Size variant (default: \"default\") */\n  size?: ColorPickerSize;\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value?: string;\n  /** Uncontrolled initial hex value (default: \"#000000\") */\n  defaultValue?: string;\n  /** Label text */\n  label?: string;\n  /** Helper/description text */\n  description?: string;\n  /** Error message shown when isInvalid */\n  errorMessage?: string;\n  /** Array of hex color strings for swatch grid */\n  colors?: string[];\n  /** Whether the picker is disabled */\n  isDisabled?: boolean;\n  /** Whether a value is required */\n  isRequired?: boolean;\n  /** Whether the field is in an invalid state */\n  isInvalid?: boolean;\n  /** Whether the field is read-only */\n  isReadOnly?: boolean;\n  /** Name attribute for hidden form input */\n  name?: string;\n  /** Called when color changes - receives React Aria Color object */\n  onChange?: (color: Color) => void;\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd?: (color: Color) => void;\n  /** Additional CSS classes */\n  className?: string;\n  /** Component id */\n  id?: string;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Test id */\n  'data-testid'?: string;\n}\n","/**\n * ColorPicker CVA Variant Styles\n *\n * Styling for ColorPicker sub-elements using class-variance-authority.\n * Matches Themis input patterns for visual consistency.\n */\n\nimport { cva } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, FIELD_HEIGHTS } from '../../styles';\n\n/**\n * Container for the entire ColorPicker component\n */\nexport const colorPickerContainerVariants = cva(\n  \"flex flex-col gap-2\",\n);\n\n/**\n * Label styling - matches TextField label pattern\n */\nexport const colorPickerLabelVariants = cva(\n  \"text-sm font-medium leading-none\",\n  {\n    variants: {\n      state: {\n        default: \"text-[var(--content-foreground)]\",\n        error: \"text-[var(--destructive-foreground)]\",\n        disabled: \"opacity-50 cursor-not-allowed\",\n      },\n    },\n    defaultVariants: {\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Description/helper text styling\n */\nexport const colorPickerDescriptionVariants = cva(\n  \"text-sm text-[var(--content-foreground)]\"\n);\n\n/**\n * Error message styling\n */\nexport const colorPickerErrorVariants = cva(\n  \"text-sm text-[var(--destructive-foreground)] font-medium mt-1\"\n);\n\n/**\n * Hex input row container (field + preview swatch)\n */\nexport const colorInputRowVariants = cva(\n  \"flex items-center gap-2\",\n);\n\n/**\n * Hex color input field - matches TextField input styles.\n * Uses FIELD_INPUT_SIZES for consistent sizing with all form fields.\n * min-h-[44px] makes the input itself the 44px touch target (same as TextField, Select, etc.)\n */\nexport const colorInputVariants = cva(\n  \"flex w-full rounded-md border bg-[var(--content-background)] px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} py-1`,\n        default: `${FIELD_INPUT_SIZES.default} py-2`,\n        lg: `${FIELD_INPUT_SIZES.lg} py-3`,\n      },\n      state: {\n        default: \"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n        error: \"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        readonly: \"cursor-default bg-[var(--content-background)] opacity-70\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Color preview swatch next to the hex input\n */\nexport const colorPreviewVariants = cva(\n  \"rounded-md border border-[var(--input-border)] shrink-0\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_HEIGHTS.sm} w-9 min-h-[44px]`,\n        default: `${FIELD_HEIGHTS.default} w-10 min-h-[44px]`,\n        lg: `${FIELD_HEIGHTS.lg} w-11 min-h-[44px]`,\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * ColorArea (2D saturation/brightness picker)\n */\nexport const colorAreaVariants = cva(\n  \"w-full rounded-md border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-32\",\n        default: \"h-40\",\n        lg: \"h-48\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Color thumb (draggable handle on area/slider)\n */\nexport const colorThumbVariants = cva(\n  \"h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2\",\n);\n\n/**\n * Hue slider track\n */\nexport const colorSliderTrackVariants = cva(\n  \"w-full rounded-full border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4\",\n        default: \"h-5\",\n        lg: \"h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Swatch grid container\n */\nexport const colorSwatchGridVariants = cva(\n  \"flex flex-wrap gap-1.5\",\n);\n\n/**\n * Individual swatch item in the grid\n */\nexport const colorSwatchItemVariants = cva(\n  \"relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-6\",\n        default: \"h-8 w-8\",\n        lg: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Disclosure toggle button for expanding advanced section\n */\nexport const disclosureToggleVariants = cva(\n  \"flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm\",\n);\n","'use client';\n\n/**\n * ColorPicker Component\n *\n * Accessible color selection with swatch presets, advanced picker, or both.\n * Built on React Aria ColorPicker and ColorSwatchPicker primitives.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { useState, useId, useMemo, useCallback } from 'react';\nimport {\n  ColorPicker as AriaColorPicker,\n  ColorArea as AriaColorArea,\n  ColorSlider as AriaColorSlider,\n  ColorField as AriaColorField,\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  ColorThumb as AriaColorThumb,\n  SliderTrack as AriaSliderTrack,\n  Input as AriaInput,\n  Label as AriaLabel,\n  parseColor,\n  type Color,\n} from 'react-aria-components';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { DEFAULT_COLORS } from './ColorPicker.types';\nimport {\n  colorPickerContainerVariants,\n  colorPickerLabelVariants,\n  colorPickerDescriptionVariants,\n  colorPickerErrorVariants,\n  colorInputRowVariants,\n  colorInputVariants,\n  colorPreviewVariants,\n  colorAreaVariants,\n  colorThumbVariants,\n  colorSliderTrackVariants,\n  colorSwatchGridVariants,\n  colorSwatchItemVariants,\n  disclosureToggleVariants,\n} from './ColorPicker.styles';\n\n/**\n * ColorPicker Component\n *\n * Supports three modes:\n * - \"swatch\": Preset color grid only\n * - \"advanced\": Full picker (ColorArea + hue slider) only\n * - \"both\": Swatch grid with expandable advanced section\n *\n * @example\n * <ColorPicker label=\"Brand Color\" mode=\"both\" defaultValue=\"#7c3aed\" />\n *\n * @example\n * <ColorPicker mode=\"swatch\" colors={['#ff0000', '#00ff00', '#0000ff']} />\n */\nexport function ColorPicker({\n  mode = 'both',\n  size = 'default',\n  value,\n  defaultValue = '#000000',\n  label,\n  description,\n  errorMessage,\n  colors,\n  isDisabled = false,\n  isRequired = false,\n  isInvalid = false,\n  isReadOnly = false,\n  name,\n  onChange,\n  onChangeEnd,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: ColorPickerProps) {\n  const generatedId = useId();\n  const pickerId = id || generatedId;\n  const advancedSectionId = `${pickerId}-advanced`;\n  const errorId = `${pickerId}-error`;\n\n  // Disclosure state for \"both\" mode\n  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);\n\n  // Track current color for hidden form input\n  const [currentHex, setCurrentHex] = useState(value || defaultValue);\n\n  // Determine label state\n  const labelState = isDisabled ? 'disabled' as const : isInvalid ? 'error' as const : 'default' as const;\n\n  // Determine input state\n  const inputState = isDisabled\n    ? 'disabled' as const\n    : isReadOnly\n      ? 'readonly' as const\n      : isInvalid\n        ? 'error' as const\n        : 'default' as const;\n\n  // Swatch colors to use\n  const swatchColors = colors || DEFAULT_COLORS;\n\n  // Parse the initial color value\n  const parsedValue = useMemo(() => {\n    try {\n      return value ? parseColor(value) : undefined;\n    } catch {\n      return undefined;\n    }\n  }, [value]);\n\n  const parsedDefaultValue = useMemo(() => {\n    try {\n      return parseColor(defaultValue);\n    } catch {\n      return parseColor('#000000');\n    }\n  }, [defaultValue]);\n\n  const handleChange = useCallback((color: Color) => {\n    setCurrentHex(color.toString('hex'));\n    onChange?.(color);\n  }, [onChange]);\n\n  const showSwatch = mode === 'swatch' || mode === 'both';\n  const showAdvanced = mode === 'advanced' || mode === 'both';\n  const showDisclosure = mode === 'both';\n\n  return (\n    <div\n      className={cn(colorPickerContainerVariants(), className)}\n      id={pickerId}\n      data-testid={dataTestId}\n    >\n      <AriaColorPicker\n        value={parsedValue}\n        defaultValue={parsedValue ? undefined : parsedDefaultValue}\n        onChange={handleChange}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel className={cn(colorPickerLabelVariants({ state: labelState }))}>\n            {label}\n            {isRequired && (\n              <span className=\"ml-1 text-[var(--destructive-background)]\" aria-hidden=\"true\">\n                <strong>*</strong>\n              </span>\n            )}\n          </AriaLabel>\n        )}\n\n        {/* Description */}\n        {description && (\n          <p className={cn(colorPickerDescriptionVariants())}>{description}</p>\n        )}\n\n        {/* Hex input row */}\n        <div className={cn(colorInputRowVariants())}>\n          <AriaColorField\n            aria-label={ariaLabel || label || 'Color value'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            className={cn(FIELD_TOUCH_TARGET, 'cursor-text', 'flex-1')}\n            onClick={(e) => {\n              if (e.target === e.currentTarget) {\n                (e.currentTarget as HTMLElement).querySelector('input')?.focus();\n              }\n            }}\n          >\n            <AriaInput\n              className={cn(colorInputVariants({ size, state: inputState }))}\n              aria-errormessage={isInvalid && errorMessage ? errorId : undefined}\n              aria-required={isRequired ? true : undefined}\n            />\n          </AriaColorField>\n          <AriaColorSwatch\n            className={cn(colorPreviewVariants({ size }))}\n            aria-label=\"Selected color preview\"\n          />\n        </div>\n\n        {/* Swatch picker */}\n        {showSwatch && (\n          <AriaColorSwatchPicker\n            className={cn(colorSwatchGridVariants())}\n            aria-label=\"Color swatches\"\n          >\n            {swatchColors.map((color) => (\n              <AriaColorSwatchPickerItem\n                key={color}\n                color={color}\n                className={cn(colorSwatchItemVariants({ size }))}\n              >\n                <AriaColorSwatch\n                  className=\"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2\"\n                />\n              </AriaColorSwatchPickerItem>\n            ))}\n          </AriaColorSwatchPicker>\n        )}\n\n        {/* Disclosure toggle for \"both\" mode */}\n        {showDisclosure && (\n          <button\n            type=\"button\"\n            className={cn(disclosureToggleVariants())}\n            onClick={() => setIsAdvancedOpen((prev) => !prev)}\n            aria-expanded={isAdvancedOpen}\n            aria-controls={advancedSectionId}\n            disabled={isDisabled}\n          >\n            <ChevronDown\n              className={cn(\n                \"h-4 w-4 transition-transform duration-200\",\n                isAdvancedOpen && \"rotate-180\"\n              )}\n            />\n            Custom color\n          </button>\n        )}\n\n        {/* Advanced section (ColorArea + hue slider) */}\n        {showAdvanced && (mode === 'advanced' || isAdvancedOpen) && (\n          <div\n            id={advancedSectionId}\n            role=\"group\"\n            aria-label=\"Custom color picker\"\n            className=\"flex flex-col gap-2\"\n          >\n            <AriaColorArea\n              colorSpace=\"hsb\"\n              xChannel=\"saturation\"\n              yChannel=\"brightness\"\n              className={cn(colorAreaVariants({ size }))}\n              isDisabled={isDisabled}\n            >\n              <AriaColorThumb className={cn(colorThumbVariants())} />\n            </AriaColorArea>\n\n            <AriaColorSlider\n              colorSpace=\"hsb\"\n              channel=\"hue\"\n              isDisabled={isDisabled}\n              onChangeEnd={onChangeEnd}\n              aria-label=\"Hue\"\n            >\n              <AriaSliderTrack className={cn(colorSliderTrackVariants({ size }))}>\n                <AriaColorThumb className={cn(colorThumbVariants())} />\n              </AriaSliderTrack>\n            </AriaColorSlider>\n          </div>\n        )}\n      </AriaColorPicker>\n\n      {/* Error message */}\n      {isInvalid && errorMessage && (\n        <p id={errorId} className={cn(colorPickerErrorVariants())} role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n\n      {/* Hidden form input */}\n      {name && (\n        <input type=\"hidden\" name={name} value={currentHex} />\n      )}\n    </div>\n  );\n}\n\nColorPicker.displayName = 'ColorPicker';\n"]}

package/dist/elements/ColorPicker/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import {useId,useState,useMemo,useCallback}from'react';import {parseColor,ColorPicker,Label,ColorField,Input,ColorSwatch,ColorSwatchPicker,ColorSwatchPickerItem,ColorArea,ColorThumb,ColorSlider,SliderTrack}from'react-aria-components';import {ChevronDown}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {z as z$1}from'zod';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function o(...n){return twMerge(clsx(n))}var i={sm:"h-9",default:"h-10",lg:"h-11"},d={sm:`${i.sm} px-2 text-xs`,default:`${i.default} px-3 text-sm`,lg:`${i.lg} px-4 text-base`},I="min-h-[44px] flex items-center";var _=["#000000","#434343","#666666","#999999","#b7b7b7","#cccccc","#d9d9d9","#efefef","#f3f3f3","#ffffff","#980000","#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff","#e6b8af","#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc"],B=z$1.enum(["swatch","advanced","both"]),z=z$1.enum(["sm","default","lg"]),mt=z$1.object({mode:B.optional().default("both"),size:z.optional().default("default"),value:z$1.string().optional(),defaultValue:z$1.string().optional().default("#000000"),label:z$1.string().optional(),description:z$1.string().optional(),errorMessage:z$1.string().optional(),colors:z$1.array(z$1.string()).optional(),isDisabled:z$1.boolean().optional(),isRequired:z$1.boolean().optional(),isInvalid:z$1.boolean().optional(),isReadOnly:z$1.boolean().optional(),name:z$1.string().optional(),onChange:z$1.function().optional(),onChangeEnd:z$1.function().optional(),className:z$1.string().optional(),id:z$1.string().optional(),"aria-label":z$1.string().optional(),"data-testid":z$1.string().optional()});var b=cva("flex flex-col gap-2"),C=cva("text-sm font-medium leading-none",{variants:{state:{default:"text-[var(--content-foreground)]",error:"text-[var(--destructive-foreground)]",disabled:"opacity-50 cursor-not-allowed"}},defaultVariants:{state:"default"}}),T=cva("text-sm text-[var(--content-foreground)]"),A=cva("text-sm text-[var(--destructive-foreground)] font-medium mt-1"),v=cva("flex items-center gap-2"),h=cva("flex w-full rounded-md border bg-[var(--content-background)] shadow-xs px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200",{variants:{size:{sm:`${d.sm} py-1`,default:`${d.default} py-2`,lg:`${d.lg} py-3`},state:{default:"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",error:"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2",disabled:"cursor-not-allowed opacity-50",readonly:"cursor-default bg-[var(--content-background)] opacity-70"}},defaultVariants:{size:"default",state:"default"}}),N=cva("rounded-md border border-[var(--input-border)] shrink-0",{variants:{size:{sm:`${i.sm} w-9 min-h-[44px]`,default:`${i.default} w-10 min-h-[44px]`,lg:`${i.lg} w-11 min-h-[44px]`}},defaultVariants:{size:"default"}}),O=cva("w-full rounded-md border border-[var(--input-border)]",{variants:{size:{sm:"h-32",default:"h-40",lg:"h-48"}},defaultVariants:{size:"default"}}),p=cva("h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2"),R=cva("w-full rounded-full border border-[var(--input-border)]",{variants:{size:{sm:"h-4",default:"h-5",lg:"h-6"}},defaultVariants:{size:"default"}}),P=cva("flex flex-wrap gap-1.5"),V=cva("relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",{variants:{size:{sm:"h-6 w-6",default:"h-8 w-8",lg:"h-10 w-10"}},defaultVariants:{size:"default"}}),k=cva("flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm");function q({mode:n="both",size:l="default",value:u,defaultValue:g="#000000",label:m,description:w,errorMessage:S,colors:Q,isDisabled:s=false,isRequired:D=false,isInvalid:f=false,isReadOnly:y=false,name:H,onChange:U,onChangeEnd:W,className:j,id:J,"aria-label":K,"data-testid":tt}){let ot=useId(),x=J||ot,M=`${x}-advanced`,G=`${x}-error`,[E,et]=useState(false),[at,rt]=useState(u||g),nt=s?"disabled":f?"error":"default",it=s?"disabled":y?"readonly":f?"error":"default",st=Q||_,F=useMemo(()=>{try{return u?parseColor(u):void 0}catch{return}},[u]),ct=useMemo(()=>{try{return parseColor(g)}catch{return parseColor("#000000")}},[g]),lt=useCallback(r=>{rt(r.toString("hex")),U?.(r);},[U]),dt=n==="swatch"||n==="both",ut=n==="advanced"||n==="both",ft=n==="both";return jsxs("div",{className:o(b(),j),id:x,"data-testid":tt,children:[jsxs(ColorPicker,{value:F,defaultValue:F?void 0:ct,onChange:lt,children:[m&&jsxs(Label,{className:o(C({state:nt})),children:[m,D&&jsx("span",{className:"ml-1 text-[var(--destructive-background)]","aria-hidden":"true",children:jsx("strong",{children:"*"})})]}),w&&jsx("p",{className:o(T()),children:w}),jsxs("div",{className:o(v()),children:[jsx(ColorField,{"aria-label":K||m||"Color value",isDisabled:s,isReadOnly:y,className:o(I,"cursor-text","flex-1"),onClick:r=>{r.target===r.currentTarget&&r.currentTarget.querySelector("input")?.focus();},children:jsx(Input,{className:o(h({size:l,state:it})),"aria-errormessage":f&&S?G:void 0,"aria-required":D?true:void 0})}),jsx(ColorSwatch,{className:o(N({size:l})),"aria-label":"Selected color preview"})]}),dt&&jsx(ColorSwatchPicker,{className:o(P()),"aria-label":"Color swatches",children:st.map(r=>jsx(ColorSwatchPickerItem,{color:r,className:o(V({size:l})),children:jsx(ColorSwatch,{className:"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2"})},r))}),ft&&jsxs("button",{type:"button",className:o(k()),onClick:()=>et(r=>!r),"aria-expanded":E,"aria-controls":M,disabled:s,children:[jsx(ChevronDown,{className:o("h-4 w-4 transition-transform duration-200",E&&"rotate-180")}),"Custom color"]}),ut&&(n==="advanced"||E)&&jsxs("div",{id:M,role:"group","aria-label":"Custom color picker",className:"flex flex-col gap-2",children:[jsx(ColorArea,{colorSpace:"hsb",xChannel:"saturation",yChannel:"brightness",className:o(O({size:l})),isDisabled:s,children:jsx(ColorThumb,{className:o(p())})}),jsx(ColorSlider,{colorSpace:"hsb",channel:"hue",isDisabled:s,onChangeEnd:W,"aria-label":"Hue",children:jsx(SliderTrack,{className:o(R({size:l})),children:jsx(ColorThumb,{className:o(p())})})})]})]}),f&&S&&jsx("p",{id:G,className:o(A()),role:"alert",children:S}),H&&jsx("input",{type:"hidden",name:H,value:at})]})}q.displayName="ColorPicker";export{q as ColorPicker,B as ColorPickerModeSchema,mt as ColorPickerPropsSchema,z as ColorPickerSizeSchema,_ as DEFAULT_COLORS,O as colorAreaVariants,v as colorInputRowVariants,h as colorInputVariants,b as colorPickerContainerVariants,T as colorPickerDescriptionVariants,A as colorPickerErrorVariants,C as colorPickerLabelVariants,N as colorPreviewVariants,R as colorSliderTrackVariants,P as colorSwatchGridVariants,V as colorSwatchItemVariants,p as colorThumbVariants,k as disclosureToggleVariants};//# sourceMappingURL=index.mjs.map
+import {useId,useState,useMemo,useCallback}from'react';import {parseColor,ColorPicker,Label,ColorField,Input,ColorSwatch,ColorSwatchPicker,ColorSwatchPickerItem,ColorArea,ColorThumb,ColorSlider,SliderTrack}from'react-aria-components';import {ChevronDown}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {z as z$1}from'zod';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function o(...n){return twMerge(clsx(n))}var i={sm:"h-9",default:"h-10",lg:"h-11"},d={sm:`${i.sm} px-2 text-xs`,default:`${i.default} px-3 text-sm`,lg:`${i.lg} px-4 text-base`},I="min-h-[44px] flex items-center";var _=["#000000","#434343","#666666","#999999","#b7b7b7","#cccccc","#d9d9d9","#efefef","#f3f3f3","#ffffff","#980000","#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff","#e6b8af","#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc"],B=z$1.enum(["swatch","advanced","both"]),z=z$1.enum(["sm","default","lg"]),mt=z$1.object({mode:B.optional().default("both"),size:z.optional().default("default"),value:z$1.string().optional(),defaultValue:z$1.string().optional().default("#000000"),label:z$1.string().optional(),description:z$1.string().optional(),errorMessage:z$1.string().optional(),colors:z$1.array(z$1.string()).optional(),isDisabled:z$1.boolean().optional(),isRequired:z$1.boolean().optional(),isInvalid:z$1.boolean().optional(),isReadOnly:z$1.boolean().optional(),name:z$1.string().optional(),onChange:z$1.function().optional(),onChangeEnd:z$1.function().optional(),className:z$1.string().optional(),id:z$1.string().optional(),"aria-label":z$1.string().optional(),"data-testid":z$1.string().optional()});var b=cva("flex flex-col gap-2"),C=cva("text-sm font-medium leading-none",{variants:{state:{default:"text-[var(--content-foreground)]",error:"text-[var(--destructive-foreground)]",disabled:"opacity-50 cursor-not-allowed"}},defaultVariants:{state:"default"}}),T=cva("text-sm text-[var(--content-foreground)]"),A=cva("text-sm text-[var(--destructive-foreground)] font-medium mt-1"),v=cva("flex items-center gap-2"),h=cva("flex w-full rounded-md border bg-[var(--content-background)] px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200",{variants:{size:{sm:`${d.sm} py-1`,default:`${d.default} py-2`,lg:`${d.lg} py-3`},state:{default:"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",error:"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2",disabled:"cursor-not-allowed opacity-50",readonly:"cursor-default bg-[var(--content-background)] opacity-70"}},defaultVariants:{size:"default",state:"default"}}),N=cva("rounded-md border border-[var(--input-border)] shrink-0",{variants:{size:{sm:`${i.sm} w-9 min-h-[44px]`,default:`${i.default} w-10 min-h-[44px]`,lg:`${i.lg} w-11 min-h-[44px]`}},defaultVariants:{size:"default"}}),O=cva("w-full rounded-md border border-[var(--input-border)]",{variants:{size:{sm:"h-32",default:"h-40",lg:"h-48"}},defaultVariants:{size:"default"}}),p=cva("h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2"),R=cva("w-full rounded-full border border-[var(--input-border)]",{variants:{size:{sm:"h-4",default:"h-5",lg:"h-6"}},defaultVariants:{size:"default"}}),P=cva("flex flex-wrap gap-1.5"),V=cva("relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",{variants:{size:{sm:"h-6 w-6",default:"h-8 w-8",lg:"h-10 w-10"}},defaultVariants:{size:"default"}}),k=cva("flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm");function q({mode:n="both",size:l="default",value:u,defaultValue:g="#000000",label:m,description:w,errorMessage:S,colors:Q,isDisabled:s=false,isRequired:D=false,isInvalid:f=false,isReadOnly:y=false,name:H,onChange:U,onChangeEnd:W,className:j,id:J,"aria-label":K,"data-testid":tt}){let ot=useId(),x=J||ot,M=`${x}-advanced`,G=`${x}-error`,[E,et]=useState(false),[at,rt]=useState(u||g),nt=s?"disabled":f?"error":"default",it=s?"disabled":y?"readonly":f?"error":"default",st=Q||_,F=useMemo(()=>{try{return u?parseColor(u):void 0}catch{return}},[u]),ct=useMemo(()=>{try{return parseColor(g)}catch{return parseColor("#000000")}},[g]),lt=useCallback(r=>{rt(r.toString("hex")),U?.(r);},[U]),dt=n==="swatch"||n==="both",ut=n==="advanced"||n==="both",ft=n==="both";return jsxs("div",{className:o(b(),j),id:x,"data-testid":tt,children:[jsxs(ColorPicker,{value:F,defaultValue:F?void 0:ct,onChange:lt,children:[m&&jsxs(Label,{className:o(C({state:nt})),children:[m,D&&jsx("span",{className:"ml-1 text-[var(--destructive-background)]","aria-hidden":"true",children:jsx("strong",{children:"*"})})]}),w&&jsx("p",{className:o(T()),children:w}),jsxs("div",{className:o(v()),children:[jsx(ColorField,{"aria-label":K||m||"Color value",isDisabled:s,isReadOnly:y,className:o(I,"cursor-text","flex-1"),onClick:r=>{r.target===r.currentTarget&&r.currentTarget.querySelector("input")?.focus();},children:jsx(Input,{className:o(h({size:l,state:it})),"aria-errormessage":f&&S?G:void 0,"aria-required":D?true:void 0})}),jsx(ColorSwatch,{className:o(N({size:l})),"aria-label":"Selected color preview"})]}),dt&&jsx(ColorSwatchPicker,{className:o(P()),"aria-label":"Color swatches",children:st.map(r=>jsx(ColorSwatchPickerItem,{color:r,className:o(V({size:l})),children:jsx(ColorSwatch,{className:"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2"})},r))}),ft&&jsxs("button",{type:"button",className:o(k()),onClick:()=>et(r=>!r),"aria-expanded":E,"aria-controls":M,disabled:s,children:[jsx(ChevronDown,{className:o("h-4 w-4 transition-transform duration-200",E&&"rotate-180")}),"Custom color"]}),ut&&(n==="advanced"||E)&&jsxs("div",{id:M,role:"group","aria-label":"Custom color picker",className:"flex flex-col gap-2",children:[jsx(ColorArea,{colorSpace:"hsb",xChannel:"saturation",yChannel:"brightness",className:o(O({size:l})),isDisabled:s,children:jsx(ColorThumb,{className:o(p())})}),jsx(ColorSlider,{colorSpace:"hsb",channel:"hue",isDisabled:s,onChangeEnd:W,"aria-label":"Hue",children:jsx(SliderTrack,{className:o(R({size:l})),children:jsx(ColorThumb,{className:o(p())})})})]})]}),f&&S&&jsx("p",{id:G,className:o(A()),role:"alert",children:S}),H&&jsx("input",{type:"hidden",name:H,value:at})]})}q.displayName="ColorPicker";export{q as ColorPicker,B as ColorPickerModeSchema,mt as ColorPickerPropsSchema,z as ColorPickerSizeSchema,_ as DEFAULT_COLORS,O as colorAreaVariants,v as colorInputRowVariants,h as colorInputVariants,b as colorPickerContainerVariants,T as colorPickerDescriptionVariants,A as colorPickerErrorVariants,C as colorPickerLabelVariants,N as colorPreviewVariants,R as colorSliderTrackVariants,P as colorSwatchGridVariants,V as colorSwatchItemVariants,p as colorThumbVariants,k as disclosureToggleVariants};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/elements/ColorPicker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/ColorPicker/ColorPicker.types.ts","../../../src/elements/ColorPicker/ColorPicker.styles.ts","../../../src/elements/ColorPicker/ColorPicker.tsx"],"names":["cn","inputs","twMerge","clsx","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","DEFAULT_COLORS","ColorPickerModeSchema","z","ColorPickerSizeSchema","ColorPickerPropsSchema","colorPickerContainerVariants","cva","colorPickerLabelVariants","colorPickerDescriptionVariants","colorPickerErrorVariants","colorInputRowVariants","colorInputVariants","colorPreviewVariants","colorAreaVariants","colorThumbVariants","colorSliderTrackVariants","colorSwatchGridVariants","colorSwatchItemVariants","disclosureToggleVariants","ColorPicker","mode","size","value","defaultValue","label","description","errorMessage","colors","isDisabled","isRequired","isInvalid","isReadOnly","name","onChange","onChangeEnd","className","id","ariaLabel","dataTestId","generatedId","useId","pickerId","advancedSectionId","errorId","isAdvancedOpen","setIsAdvancedOpen","useState","currentHex","setCurrentHex","labelState","inputState","swatchColors","parsedValue","useMemo","parseColor","parsedDefaultValue","handleChange","useCallback","color","showSwatch","showAdvanced","showDisclosure","jsxs","AriaColorPicker","AriaLabel","jsx","AriaColorField","e","AriaInput","AriaColorSwatch","AriaColorSwatchPicker","AriaColorSwatchPickerItem","prev","ChevronDown","AriaColorArea","AriaColorThumb","AriaColorSlider","AriaSliderTrack"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive-background)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success-background)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n","/**\n * ColorPicker Component Types\n *\n * Zod schemas and TypeScript types for the ColorPicker component.\n * Supports three modes: swatch-only, advanced-only, and combined.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { z } from 'zod';\nimport type { Color } from 'react-aria-components';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/**\n * Default swatch palette when no `colors` prop is provided.\n */\nexport const DEFAULT_COLORS: string[] = [\n  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n  '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n  '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n];\n\n// ============================================================================\n// Mode & Size Types\n// ============================================================================\n\n/**\n * Operating modes for the ColorPicker.\n * - 'swatch': Preset color grid only\n * - 'advanced': Full picker (ColorArea + hue slider) only\n * - 'both': Swatch grid with expandable advanced section\n */\nexport type ColorPickerMode = 'swatch' | 'advanced' | 'both';\n\n/**\n * Size variants for the ColorPicker.\n */\nexport type ColorPickerSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\nexport const ColorPickerModeSchema = z.enum(['swatch', 'advanced', 'both']);\nexport const ColorPickerSizeSchema = z.enum(['sm', 'default', 'lg']);\n\n/**\n * Zod schema for ColorPicker props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const ColorPickerPropsSchema = z.object({\n  // Mode\n  /** Which picker UI to display */\n  mode: ColorPickerModeSchema.optional().default('both'),\n\n  // Size\n  /** Size variant for inputs and swatches */\n  size: ColorPickerSizeSchema.optional().default('default'),\n\n  // Value\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value: z.string().optional(),\n  /** Uncontrolled initial hex value */\n  defaultValue: z.string().optional().default('#000000'),\n\n  // Display\n  /** Label text */\n  label: z.string().optional(),\n  /** Helper/description text */\n  description: z.string().optional(),\n  /** Error message shown when isInvalid */\n  errorMessage: z.string().optional(),\n\n  // Swatch colors\n  /** Array of hex color strings for swatch grid */\n  colors: z.array(z.string()).optional(),\n\n  // State\n  /** Whether the picker is disabled */\n  isDisabled: z.boolean().optional(),\n  /** Whether a value is required */\n  isRequired: z.boolean().optional(),\n  /** Whether the field is in an invalid state */\n  isInvalid: z.boolean().optional(),\n  /** Whether the field is read-only */\n  isReadOnly: z.boolean().optional(),\n\n  // Form integration\n  /** Name attribute for hidden form input */\n  name: z.string().optional(),\n\n  // Events (as Zod functions for schema validation)\n  /** Called when color changes */\n  onChange: z.function().optional(),\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd: z.function().optional(),\n\n  // Standard props\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Component id */\n  id: z.string().optional(),\n  /** Accessible label */\n  'aria-label': z.string().optional(),\n  /** Test id */\n  'data-testid': z.string().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Props for the ColorPicker component.\n */\nexport interface ColorPickerProps {\n  /** Which picker UI to display (default: \"both\") */\n  mode?: ColorPickerMode;\n  /** Size variant (default: \"default\") */\n  size?: ColorPickerSize;\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value?: string;\n  /** Uncontrolled initial hex value (default: \"#000000\") */\n  defaultValue?: string;\n  /** Label text */\n  label?: string;\n  /** Helper/description text */\n  description?: string;\n  /** Error message shown when isInvalid */\n  errorMessage?: string;\n  /** Array of hex color strings for swatch grid */\n  colors?: string[];\n  /** Whether the picker is disabled */\n  isDisabled?: boolean;\n  /** Whether a value is required */\n  isRequired?: boolean;\n  /** Whether the field is in an invalid state */\n  isInvalid?: boolean;\n  /** Whether the field is read-only */\n  isReadOnly?: boolean;\n  /** Name attribute for hidden form input */\n  name?: string;\n  /** Called when color changes - receives React Aria Color object */\n  onChange?: (color: Color) => void;\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd?: (color: Color) => void;\n  /** Additional CSS classes */\n  className?: string;\n  /** Component id */\n  id?: string;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Test id */\n  'data-testid'?: string;\n}\n","/**\n * ColorPicker CVA Variant Styles\n *\n * Styling for ColorPicker sub-elements using class-variance-authority.\n * Matches Themis input patterns for visual consistency.\n */\n\nimport { cva } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, FIELD_HEIGHTS } from '../../styles';\n\n/**\n * Container for the entire ColorPicker component\n */\nexport const colorPickerContainerVariants = cva(\n  \"flex flex-col gap-2\",\n);\n\n/**\n * Label styling - matches TextField label pattern\n */\nexport const colorPickerLabelVariants = cva(\n  \"text-sm font-medium leading-none\",\n  {\n    variants: {\n      state: {\n        default: \"text-[var(--content-foreground)]\",\n        error: \"text-[var(--destructive-foreground)]\",\n        disabled: \"opacity-50 cursor-not-allowed\",\n      },\n    },\n    defaultVariants: {\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Description/helper text styling\n */\nexport const colorPickerDescriptionVariants = cva(\n  \"text-sm text-[var(--content-foreground)]\"\n);\n\n/**\n * Error message styling\n */\nexport const colorPickerErrorVariants = cva(\n  \"text-sm text-[var(--destructive-foreground)] font-medium mt-1\"\n);\n\n/**\n * Hex input row container (field + preview swatch)\n */\nexport const colorInputRowVariants = cva(\n  \"flex items-center gap-2\",\n);\n\n/**\n * Hex color input field - matches TextField input styles.\n * Uses FIELD_INPUT_SIZES for consistent sizing with all form fields.\n * min-h-[44px] makes the input itself the 44px touch target (same as TextField, Select, etc.)\n */\nexport const colorInputVariants = cva(\n  \"flex w-full rounded-md border bg-[var(--content-background)] shadow-xs px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} py-1`,\n        default: `${FIELD_INPUT_SIZES.default} py-2`,\n        lg: `${FIELD_INPUT_SIZES.lg} py-3`,\n      },\n      state: {\n        default: \"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n        error: \"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        readonly: \"cursor-default bg-[var(--content-background)] opacity-70\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Color preview swatch next to the hex input\n */\nexport const colorPreviewVariants = cva(\n  \"rounded-md border border-[var(--input-border)] shrink-0\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_HEIGHTS.sm} w-9 min-h-[44px]`,\n        default: `${FIELD_HEIGHTS.default} w-10 min-h-[44px]`,\n        lg: `${FIELD_HEIGHTS.lg} w-11 min-h-[44px]`,\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * ColorArea (2D saturation/brightness picker)\n */\nexport const colorAreaVariants = cva(\n  \"w-full rounded-md border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-32\",\n        default: \"h-40\",\n        lg: \"h-48\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Color thumb (draggable handle on area/slider)\n */\nexport const colorThumbVariants = cva(\n  \"h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2\",\n);\n\n/**\n * Hue slider track\n */\nexport const colorSliderTrackVariants = cva(\n  \"w-full rounded-full border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4\",\n        default: \"h-5\",\n        lg: \"h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Swatch grid container\n */\nexport const colorSwatchGridVariants = cva(\n  \"flex flex-wrap gap-1.5\",\n);\n\n/**\n * Individual swatch item in the grid\n */\nexport const colorSwatchItemVariants = cva(\n  \"relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-6\",\n        default: \"h-8 w-8\",\n        lg: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Disclosure toggle button for expanding advanced section\n */\nexport const disclosureToggleVariants = cva(\n  \"flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm\",\n);\n","'use client';\n\n/**\n * ColorPicker Component\n *\n * Accessible color selection with swatch presets, advanced picker, or both.\n * Built on React Aria ColorPicker and ColorSwatchPicker primitives.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { useState, useId, useMemo, useCallback } from 'react';\nimport {\n  ColorPicker as AriaColorPicker,\n  ColorArea as AriaColorArea,\n  ColorSlider as AriaColorSlider,\n  ColorField as AriaColorField,\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  ColorThumb as AriaColorThumb,\n  SliderTrack as AriaSliderTrack,\n  Input as AriaInput,\n  Label as AriaLabel,\n  parseColor,\n  type Color,\n} from 'react-aria-components';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { DEFAULT_COLORS } from './ColorPicker.types';\nimport {\n  colorPickerContainerVariants,\n  colorPickerLabelVariants,\n  colorPickerDescriptionVariants,\n  colorPickerErrorVariants,\n  colorInputRowVariants,\n  colorInputVariants,\n  colorPreviewVariants,\n  colorAreaVariants,\n  colorThumbVariants,\n  colorSliderTrackVariants,\n  colorSwatchGridVariants,\n  colorSwatchItemVariants,\n  disclosureToggleVariants,\n} from './ColorPicker.styles';\n\n/**\n * ColorPicker Component\n *\n * Supports three modes:\n * - \"swatch\": Preset color grid only\n * - \"advanced\": Full picker (ColorArea + hue slider) only\n * - \"both\": Swatch grid with expandable advanced section\n *\n * @example\n * <ColorPicker label=\"Brand Color\" mode=\"both\" defaultValue=\"#7c3aed\" />\n *\n * @example\n * <ColorPicker mode=\"swatch\" colors={['#ff0000', '#00ff00', '#0000ff']} />\n */\nexport function ColorPicker({\n  mode = 'both',\n  size = 'default',\n  value,\n  defaultValue = '#000000',\n  label,\n  description,\n  errorMessage,\n  colors,\n  isDisabled = false,\n  isRequired = false,\n  isInvalid = false,\n  isReadOnly = false,\n  name,\n  onChange,\n  onChangeEnd,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: ColorPickerProps) {\n  const generatedId = useId();\n  const pickerId = id || generatedId;\n  const advancedSectionId = `${pickerId}-advanced`;\n  const errorId = `${pickerId}-error`;\n\n  // Disclosure state for \"both\" mode\n  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);\n\n  // Track current color for hidden form input\n  const [currentHex, setCurrentHex] = useState(value || defaultValue);\n\n  // Determine label state\n  const labelState = isDisabled ? 'disabled' as const : isInvalid ? 'error' as const : 'default' as const;\n\n  // Determine input state\n  const inputState = isDisabled\n    ? 'disabled' as const\n    : isReadOnly\n      ? 'readonly' as const\n      : isInvalid\n        ? 'error' as const\n        : 'default' as const;\n\n  // Swatch colors to use\n  const swatchColors = colors || DEFAULT_COLORS;\n\n  // Parse the initial color value\n  const parsedValue = useMemo(() => {\n    try {\n      return value ? parseColor(value) : undefined;\n    } catch {\n      return undefined;\n    }\n  }, [value]);\n\n  const parsedDefaultValue = useMemo(() => {\n    try {\n      return parseColor(defaultValue);\n    } catch {\n      return parseColor('#000000');\n    }\n  }, [defaultValue]);\n\n  const handleChange = useCallback((color: Color) => {\n    setCurrentHex(color.toString('hex'));\n    onChange?.(color);\n  }, [onChange]);\n\n  const showSwatch = mode === 'swatch' || mode === 'both';\n  const showAdvanced = mode === 'advanced' || mode === 'both';\n  const showDisclosure = mode === 'both';\n\n  return (\n    <div\n      className={cn(colorPickerContainerVariants(), className)}\n      id={pickerId}\n      data-testid={dataTestId}\n    >\n      <AriaColorPicker\n        value={parsedValue}\n        defaultValue={parsedValue ? undefined : parsedDefaultValue}\n        onChange={handleChange}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel className={cn(colorPickerLabelVariants({ state: labelState }))}>\n            {label}\n            {isRequired && (\n              <span className=\"ml-1 text-[var(--destructive-background)]\" aria-hidden=\"true\">\n                <strong>*</strong>\n              </span>\n            )}\n          </AriaLabel>\n        )}\n\n        {/* Description */}\n        {description && (\n          <p className={cn(colorPickerDescriptionVariants())}>{description}</p>\n        )}\n\n        {/* Hex input row */}\n        <div className={cn(colorInputRowVariants())}>\n          <AriaColorField\n            aria-label={ariaLabel || label || 'Color value'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            className={cn(FIELD_TOUCH_TARGET, 'cursor-text', 'flex-1')}\n            onClick={(e) => {\n              if (e.target === e.currentTarget) {\n                (e.currentTarget as HTMLElement).querySelector('input')?.focus();\n              }\n            }}\n          >\n            <AriaInput\n              className={cn(colorInputVariants({ size, state: inputState }))}\n              aria-errormessage={isInvalid && errorMessage ? errorId : undefined}\n              aria-required={isRequired ? true : undefined}\n            />\n          </AriaColorField>\n          <AriaColorSwatch\n            className={cn(colorPreviewVariants({ size }))}\n            aria-label=\"Selected color preview\"\n          />\n        </div>\n\n        {/* Swatch picker */}\n        {showSwatch && (\n          <AriaColorSwatchPicker\n            className={cn(colorSwatchGridVariants())}\n            aria-label=\"Color swatches\"\n          >\n            {swatchColors.map((color) => (\n              <AriaColorSwatchPickerItem\n                key={color}\n                color={color}\n                className={cn(colorSwatchItemVariants({ size }))}\n              >\n                <AriaColorSwatch\n                  className=\"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2\"\n                />\n              </AriaColorSwatchPickerItem>\n            ))}\n          </AriaColorSwatchPicker>\n        )}\n\n        {/* Disclosure toggle for \"both\" mode */}\n        {showDisclosure && (\n          <button\n            type=\"button\"\n            className={cn(disclosureToggleVariants())}\n            onClick={() => setIsAdvancedOpen((prev) => !prev)}\n            aria-expanded={isAdvancedOpen}\n            aria-controls={advancedSectionId}\n            disabled={isDisabled}\n          >\n            <ChevronDown\n              className={cn(\n                \"h-4 w-4 transition-transform duration-200\",\n                isAdvancedOpen && \"rotate-180\"\n              )}\n            />\n            Custom color\n          </button>\n        )}\n\n        {/* Advanced section (ColorArea + hue slider) */}\n        {showAdvanced && (mode === 'advanced' || isAdvancedOpen) && (\n          <div\n            id={advancedSectionId}\n            role=\"group\"\n            aria-label=\"Custom color picker\"\n            className=\"flex flex-col gap-2\"\n          >\n            <AriaColorArea\n              colorSpace=\"hsb\"\n              xChannel=\"saturation\"\n              yChannel=\"brightness\"\n              className={cn(colorAreaVariants({ size }))}\n              isDisabled={isDisabled}\n            >\n              <AriaColorThumb className={cn(colorThumbVariants())} />\n            </AriaColorArea>\n\n            <AriaColorSlider\n              colorSpace=\"hsb\"\n              channel=\"hue\"\n              isDisabled={isDisabled}\n              onChangeEnd={onChangeEnd}\n              aria-label=\"Hue\"\n            >\n              <AriaSliderTrack className={cn(colorSliderTrackVariants({ size }))}>\n                <AriaColorThumb className={cn(colorThumbVariants())} />\n              </AriaSliderTrack>\n            </AriaColorSlider>\n          </div>\n        )}\n      </AriaColorPicker>\n\n      {/* Error message */}\n      {isInvalid && errorMessage && (\n        <p id={errorId} className={cn(colorPickerErrorVariants())} role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n\n      {/* Hidden form input */}\n      {name && (\n        <input type=\"hidden\" name={name} value={currentHex} />\n      )}\n    </div>\n  );\n}\n\nColorPicker.displayName = 'ColorPicker';\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/ColorPicker/ColorPicker.types.ts","../../../src/elements/ColorPicker/ColorPicker.styles.ts","../../../src/elements/ColorPicker/ColorPicker.tsx"],"names":["cn","inputs","twMerge","clsx","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","DEFAULT_COLORS","ColorPickerModeSchema","z","ColorPickerSizeSchema","ColorPickerPropsSchema","colorPickerContainerVariants","cva","colorPickerLabelVariants","colorPickerDescriptionVariants","colorPickerErrorVariants","colorInputRowVariants","colorInputVariants","colorPreviewVariants","colorAreaVariants","colorThumbVariants","colorSliderTrackVariants","colorSwatchGridVariants","colorSwatchItemVariants","disclosureToggleVariants","ColorPicker","mode","size","value","defaultValue","label","description","errorMessage","colors","isDisabled","isRequired","isInvalid","isReadOnly","name","onChange","onChangeEnd","className","id","ariaLabel","dataTestId","generatedId","useId","pickerId","advancedSectionId","errorId","isAdvancedOpen","setIsAdvancedOpen","useState","currentHex","setCurrentHex","labelState","inputState","swatchColors","parsedValue","useMemo","parseColor","parsedDefaultValue","handleChange","useCallback","color","showSwatch","showAdvanced","showDisclosure","jsxs","AriaColorPicker","AriaLabel","jsx","AriaColorField","e","AriaInput","AriaColorSwatch","AriaColorSwatchPicker","AriaColorSwatchPickerItem","prev","ChevronDown","AriaColorArea","AriaColorThumb","AriaColorSlider","AriaSliderTrack"],"mappings":"6bAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCyGO,IAAMG,CAAAA,CAAgB,CAC3B,EAAA,CAAI,KAAA,CACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CAAA,CAQaC,CAAAA,CAAoB,CAC/B,EAAA,CAAI,CAAA,EAAGD,CAAAA,CAAc,EAAE,CAAA,aAAA,CAAA,CACvB,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAc,OAAO,CAAA,aAAA,CAAA,CACjC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAc,EAAE,CAAA,eAAA,CACzB,CAAA,CASaE,CAAAA,CAAqB,gCAAA,CC9H3B,IAAMC,CAAAA,CAA2B,CACtC,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CACnG,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CACnG,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,UAAW,SAAA,CAAW,SACrG,CAAA,CAuBaC,CAAAA,CAAwBC,GAAAA,CAAE,IAAA,CAAK,CAAC,QAAA,CAAU,UAAA,CAAY,MAAM,CAAC,CAAA,CAC7DC,CAAAA,CAAwBD,GAAAA,CAAE,IAAA,CAAK,CAAC,IAAA,CAAM,SAAA,CAAW,IAAI,CAAC,CAAA,CAMtDE,EAAAA,CAAyBF,GAAAA,CAAE,MAAA,CAAO,CAG7C,IAAA,CAAMD,CAAAA,CAAsB,QAAA,EAAS,CAAE,OAAA,CAAQ,MAAM,CAAA,CAIrD,IAAA,CAAME,CAAAA,CAAsB,QAAA,EAAS,CAAE,OAAA,CAAQ,SAAS,CAAA,CAIxD,KAAA,CAAOD,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE3B,YAAA,CAAcA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAAE,OAAA,CAAQ,SAAS,CAAA,CAIrD,KAAA,CAAOA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE3B,WAAA,CAAaA,IAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAEjC,YAAA,CAAcA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAIlC,MAAA,CAAQA,GAAAA,CAAE,KAAA,CAAMA,GAAAA,CAAE,MAAA,EAAQ,CAAA,CAAE,QAAA,EAAS,CAIrC,UAAA,CAAYA,GAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAEjC,UAAA,CAAYA,GAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,GAExB,SAAA,CAAWA,GAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAEhC,UAAA,CAAYA,GAAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS,CAIjC,IAAA,CAAMA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAI1B,QAAA,CAAUA,GAAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS,CAEhC,WAAA,CAAaA,GAAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS,CAInC,UAAWA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAE/B,EAAA,CAAIA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAExB,YAAA,CAAcA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS,CAElC,aAAA,CAAeA,GAAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAC5B,CAAC,ECjGM,IAAMG,EAA+BC,GAAAA,CAC1C,qBACF,CAAA,CAKaC,CAAAA,CAA2BD,GAAAA,CACtC,kCAAA,CACA,CACE,QAAA,CAAU,CACR,KAAA,CAAO,CACL,OAAA,CAAS,kCAAA,CACT,KAAA,CAAO,sCAAA,CACP,QAAA,CAAU,+BACZ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,KAAA,CAAO,SACT,CACF,CACF,CAAA,CAKaE,CAAAA,CAAiCF,GAAAA,CAC5C,0CACF,CAAA,CAKaG,EAA2BH,GAAAA,CACtC,+DACF,CAAA,CAKaI,CAAAA,CAAwBJ,GAAAA,CACnC,yBACF,CAAA,CAOaK,CAAAA,CAAqBL,GAAAA,CAChC,6MAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,CAAA,EAAGR,CAAAA,CAAkB,EAAE,CAAA,KAAA,CAAA,CAC3B,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAkB,OAAO,CAAA,KAAA,CAAA,CACrC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAkB,EAAE,CAAA,KAAA,CAC7B,EACA,KAAA,CAAO,CACL,OAAA,CAAS,2IAAA,CACT,KAAA,CAAO,uKAAA,CACP,QAAA,CAAU,+BAAA,CACV,QAAA,CAAU,0DACZ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SAAA,CACN,KAAA,CAAO,SACT,CACF,CACF,CAAA,CAKac,CAAAA,CAAuBN,GAAAA,CAClC,yDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,GAAGT,CAAAA,CAAc,EAAE,CAAA,iBAAA,CAAA,CACvB,OAAA,CAAS,CAAA,EAAGA,CAAAA,CAAc,OAAO,CAAA,kBAAA,CAAA,CACjC,EAAA,CAAI,CAAA,EAAGA,CAAAA,CAAc,EAAE,CAAA,kBAAA,CACzB,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKagB,CAAAA,CAAoBP,GAAAA,CAC/B,uDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,GAAI,MAAA,CACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaQ,CAAAA,CAAqBR,GAAAA,CAChC,sNACF,CAAA,CAKaS,CAAAA,CAA2BT,GAAAA,CACtC,yDAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,KAAA,CACJ,OAAA,CAAS,KAAA,CACT,GAAI,KACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaU,CAAAA,CAA0BV,GAAAA,CACrC,wBACF,CAAA,CAKaW,CAAAA,CAA0BX,GAAAA,CACrC,2OAAA,CACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,SAAA,CACT,EAAA,CAAI,WACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAKaY,CAAAA,CAA2BZ,GAAAA,CACtC,sVACF,ECrHO,SAASa,CAAAA,CAAY,CAC1B,IAAA,CAAAC,CAAAA,CAAO,MAAA,CACP,IAAA,CAAAC,CAAAA,CAAO,SAAA,CACP,KAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CAAe,SAAA,CACf,KAAA,CAAAC,EACA,WAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,SAAA,CAAAC,CAAAA,CAAY,KAAA,CACZ,UAAA,CAAAC,CAAAA,CAAa,KAAA,CACb,IAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,EAAA,CAAAC,CAAAA,CACA,YAAA,CAAcC,CAAAA,CACd,cAAeC,EACjB,CAAA,CAAqB,CACnB,IAAMC,EAAAA,CAAcC,KAAAA,EAAM,CACpBC,CAAAA,CAAWL,CAAAA,EAAMG,EAAAA,CACjBG,CAAAA,CAAoB,CAAA,EAAGD,CAAQ,CAAA,SAAA,CAAA,CAC/BE,CAAAA,CAAU,CAAA,EAAGF,CAAQ,CAAA,MAAA,CAAA,CAGrB,CAACG,CAAAA,CAAgBC,EAAiB,CAAA,CAAIC,QAAAA,CAAS,KAAK,CAAA,CAGpD,CAACC,EAAAA,CAAYC,EAAa,CAAA,CAAIF,QAAAA,CAASxB,GAASC,CAAY,CAAA,CAG5D0B,EAAAA,CAAarB,CAAAA,CAAa,UAAA,CAAsBE,CAAAA,CAAY,OAAA,CAAmB,SAAA,CAG/EoB,EAAAA,CAAatB,CAAAA,CACf,UAAA,CACAG,CAAAA,CACE,UAAA,CACAD,CAAAA,CACE,OAAA,CACA,SAAA,CAGFqB,EAAAA,CAAexB,CAAAA,EAAU3B,CAAAA,CAGzBoD,CAAAA,CAAcC,OAAAA,CAAQ,IAAM,CAChC,GAAI,CACF,OAAO/B,CAAAA,CAAQgC,UAAAA,CAAWhC,CAAK,CAAA,CAAI,MACrC,CAAA,KAAQ,CACN,MACF,CACF,CAAA,CAAG,CAACA,CAAK,CAAC,CAAA,CAEJiC,EAAAA,CAAqBF,OAAAA,CAAQ,IAAM,CACvC,GAAI,CACF,OAAOC,UAAAA,CAAW/B,CAAY,CAChC,CAAA,KAAQ,CACN,OAAO+B,UAAAA,CAAW,SAAS,CAC7B,CACF,CAAA,CAAG,CAAC/B,CAAY,CAAC,EAEXiC,EAAAA,CAAeC,WAAAA,CAAaC,CAAAA,EAAiB,CACjDV,EAAAA,CAAcU,CAAAA,CAAM,QAAA,CAAS,KAAK,CAAC,CAAA,CACnCzB,CAAAA,GAAWyB,CAAK,EAClB,CAAA,CAAG,CAACzB,CAAQ,CAAC,CAAA,CAEP0B,EAAAA,CAAavC,CAAAA,GAAS,QAAA,EAAYA,CAAAA,GAAS,MAAA,CAC3CwC,EAAAA,CAAexC,CAAAA,GAAS,UAAA,EAAcA,CAAAA,GAAS,MAAA,CAC/CyC,EAAAA,CAAiBzC,CAAAA,GAAS,OAEhC,OACE0C,IAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAWrE,CAAAA,CAAGY,CAAAA,EAA6B,CAAG8B,CAAS,CAAA,CACvD,EAAA,CAAIM,CAAAA,CACJ,aAAA,CAAaH,EAAAA,CAEb,QAAA,CAAA,CAAAwB,IAAAA,CAACC,WAAAA,CAAA,CACC,KAAA,CAAOX,CAAAA,CACP,YAAA,CAAcA,CAAAA,CAAc,MAAA,CAAYG,EAAAA,CACxC,QAAA,CAAUC,EAAAA,CAGT,QAAA,CAAA,CAAAhC,CAAAA,EACCsC,IAAAA,CAACE,KAAAA,CAAA,CAAU,UAAWvE,CAAAA,CAAGc,CAAAA,CAAyB,CAAE,KAAA,CAAO0C,EAAW,CAAC,CAAC,CAAA,CACrE,QAAA,CAAA,CAAAzB,CAAAA,CACAK,CAAAA,EACCoC,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,2CAAA,CAA4C,aAAA,CAAY,MAAA,CACtE,QAAA,CAAAA,GAAAA,CAAC,QAAA,CAAA,CAAO,QAAA,CAAA,GAAA,CAAC,CAAA,CACX,CAAA,CAAA,CAEJ,CAAA,CAIDxC,CAAAA,EACCwC,GAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAWxE,CAAAA,CAAGe,CAAAA,EAAgC,CAAA,CAAI,QAAA,CAAAiB,CAAAA,CAAY,CAAA,CAInEqC,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWrE,CAAAA,CAAGiB,CAAAA,EAAuB,CAAA,CACxC,QAAA,CAAA,CAAAuD,GAAAA,CAACC,UAAAA,CAAA,CACC,YAAA,CAAY7B,CAAAA,EAAab,CAAAA,EAAS,aAAA,CAClC,UAAA,CAAYI,CAAAA,CACZ,UAAA,CAAYG,CAAAA,CACZ,SAAA,CAAWtC,CAAAA,CAAGM,CAAAA,CAAoB,aAAA,CAAe,QAAQ,CAAA,CACzD,OAAA,CAAUoE,GAAM,CACVA,CAAAA,CAAE,MAAA,GAAWA,CAAAA,CAAE,aAAA,EAChBA,CAAAA,CAAE,aAAA,CAA8B,aAAA,CAAc,OAAO,CAAA,EAAG,KAAA,GAE7D,CAAA,CAEA,QAAA,CAAAF,GAAAA,CAACG,KAAAA,CAAA,CACC,SAAA,CAAW3E,CAAAA,CAAGkB,CAAAA,CAAmB,CAAE,IAAA,CAAAU,CAAAA,CAAM,KAAA,CAAO6B,EAAW,CAAC,CAAC,CAAA,CAC7D,mBAAA,CAAmBpB,CAAAA,EAAaJ,EAAeiB,CAAAA,CAAU,MAAA,CACzD,eAAA,CAAed,CAAAA,CAAa,IAAA,CAAO,MAAA,CACrC,CAAA,CACF,CAAA,CACAoC,GAAAA,CAACI,WAAAA,CAAA,CACC,SAAA,CAAW5E,CAAAA,CAAGmB,CAAAA,CAAqB,CAAE,IAAA,CAAAS,CAAK,CAAC,CAAC,CAAA,CAC5C,YAAA,CAAW,wBAAA,CACb,CAAA,CAAA,CACF,CAAA,CAGCsC,EAAAA,EACCM,GAAAA,CAACK,iBAAAA,CAAA,CACC,SAAA,CAAW7E,CAAAA,CAAGuB,GAAyB,CAAA,CACvC,YAAA,CAAW,gBAAA,CAEV,QAAA,CAAAmC,EAAAA,CAAa,GAAA,CAAKO,CAAAA,EACjBO,GAAAA,CAACM,qBAAAA,CAAA,CAEC,KAAA,CAAOb,CAAAA,CACP,SAAA,CAAWjE,CAAAA,CAAGwB,CAAAA,CAAwB,CAAE,IAAA,CAAAI,CAAK,CAAC,CAAC,CAAA,CAE/C,QAAA,CAAA4C,GAAAA,CAACI,WAAAA,CAAA,CACC,SAAA,CAAU,kHAAA,CACZ,CAAA,CAAA,CANKX,CAOP,CACD,CAAA,CACH,CAAA,CAIDG,EAAAA,EACCC,IAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAK,QAAA,CACL,SAAA,CAAWrE,CAAAA,CAAGyB,CAAAA,EAA0B,CAAA,CACxC,OAAA,CAAS,IAAM2B,EAAAA,CAAmB2B,CAAAA,EAAS,CAACA,CAAI,CAAA,CAChD,eAAA,CAAe5B,CAAAA,CACf,eAAA,CAAeF,CAAAA,CACf,QAAA,CAAUd,CAAAA,CAEV,QAAA,CAAA,CAAAqC,GAAAA,CAACQ,WAAAA,CAAA,CACC,SAAA,CAAWhF,EACT,2CAAA,CACAmD,CAAAA,EAAkB,YACpB,CAAA,CACF,CAAA,CAAE,cAAA,CAAA,CAEJ,CAAA,CAIDgB,EAAAA,GAAiBxC,CAAAA,GAAS,UAAA,EAAcwB,CAAAA,CAAAA,EACvCkB,IAAAA,CAAC,KAAA,CAAA,CACC,EAAA,CAAIpB,CAAAA,CACJ,IAAA,CAAK,OAAA,CACL,YAAA,CAAW,qBAAA,CACX,SAAA,CAAU,qBAAA,CAEV,QAAA,CAAA,CAAAuB,GAAAA,CAACS,SAAAA,CAAA,CACC,UAAA,CAAW,KAAA,CACX,QAAA,CAAS,YAAA,CACT,QAAA,CAAS,aACT,SAAA,CAAWjF,CAAAA,CAAGoB,CAAAA,CAAkB,CAAE,IAAA,CAAAQ,CAAK,CAAC,CAAC,CAAA,CACzC,UAAA,CAAYO,CAAAA,CAEZ,QAAA,CAAAqC,GAAAA,CAACU,UAAAA,CAAA,CAAe,SAAA,CAAWlF,CAAAA,CAAGqB,CAAAA,EAAoB,CAAA,CAAG,CAAA,CACvD,CAAA,CAEAmD,GAAAA,CAACW,WAAAA,CAAA,CACC,UAAA,CAAW,KAAA,CACX,OAAA,CAAQ,KAAA,CACR,UAAA,CAAYhD,EACZ,WAAA,CAAaM,CAAAA,CACb,YAAA,CAAW,KAAA,CAEX,QAAA,CAAA+B,GAAAA,CAACY,WAAAA,CAAA,CAAgB,SAAA,CAAWpF,CAAAA,CAAGsB,CAAAA,CAAyB,CAAE,IAAA,CAAAM,CAAK,CAAC,CAAC,CAAA,CAC/D,QAAA,CAAA4C,GAAAA,CAACU,UAAAA,CAAA,CAAe,SAAA,CAAWlF,CAAAA,CAAGqB,CAAAA,EAAoB,CAAA,CAAG,CAAA,CACvD,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAGCgB,CAAAA,EAAaJ,CAAAA,EACZuC,GAAAA,CAAC,GAAA,CAAA,CAAE,EAAA,CAAItB,CAAAA,CAAS,SAAA,CAAWlD,CAAAA,CAAGgB,CAAAA,EAA0B,CAAA,CAAG,IAAA,CAAK,OAAA,CAC7D,QAAA,CAAAiB,CAAAA,CACH,CAAA,CAIDM,CAAAA,EACCiC,GAAAA,CAAC,OAAA,CAAA,CAAM,IAAA,CAAK,QAAA,CAAS,IAAA,CAAMjC,CAAAA,CAAM,KAAA,CAAOe,EAAAA,CAAY,CAAA,CAAA,CAExD,CAEJ,CAEA5B,CAAAA,CAAY,WAAA,CAAc,aAAA","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive-background)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success-background)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n","/**\n * ColorPicker Component Types\n *\n * Zod schemas and TypeScript types for the ColorPicker component.\n * Supports three modes: swatch-only, advanced-only, and combined.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { z } from 'zod';\nimport type { Color } from 'react-aria-components';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/**\n * Default swatch palette when no `colors` prop is provided.\n */\nexport const DEFAULT_COLORS: string[] = [\n  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n  '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n  '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n];\n\n// ============================================================================\n// Mode & Size Types\n// ============================================================================\n\n/**\n * Operating modes for the ColorPicker.\n * - 'swatch': Preset color grid only\n * - 'advanced': Full picker (ColorArea + hue slider) only\n * - 'both': Swatch grid with expandable advanced section\n */\nexport type ColorPickerMode = 'swatch' | 'advanced' | 'both';\n\n/**\n * Size variants for the ColorPicker.\n */\nexport type ColorPickerSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\nexport const ColorPickerModeSchema = z.enum(['swatch', 'advanced', 'both']);\nexport const ColorPickerSizeSchema = z.enum(['sm', 'default', 'lg']);\n\n/**\n * Zod schema for ColorPicker props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const ColorPickerPropsSchema = z.object({\n  // Mode\n  /** Which picker UI to display */\n  mode: ColorPickerModeSchema.optional().default('both'),\n\n  // Size\n  /** Size variant for inputs and swatches */\n  size: ColorPickerSizeSchema.optional().default('default'),\n\n  // Value\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value: z.string().optional(),\n  /** Uncontrolled initial hex value */\n  defaultValue: z.string().optional().default('#000000'),\n\n  // Display\n  /** Label text */\n  label: z.string().optional(),\n  /** Helper/description text */\n  description: z.string().optional(),\n  /** Error message shown when isInvalid */\n  errorMessage: z.string().optional(),\n\n  // Swatch colors\n  /** Array of hex color strings for swatch grid */\n  colors: z.array(z.string()).optional(),\n\n  // State\n  /** Whether the picker is disabled */\n  isDisabled: z.boolean().optional(),\n  /** Whether a value is required */\n  isRequired: z.boolean().optional(),\n  /** Whether the field is in an invalid state */\n  isInvalid: z.boolean().optional(),\n  /** Whether the field is read-only */\n  isReadOnly: z.boolean().optional(),\n\n  // Form integration\n  /** Name attribute for hidden form input */\n  name: z.string().optional(),\n\n  // Events (as Zod functions for schema validation)\n  /** Called when color changes */\n  onChange: z.function().optional(),\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd: z.function().optional(),\n\n  // Standard props\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Component id */\n  id: z.string().optional(),\n  /** Accessible label */\n  'aria-label': z.string().optional(),\n  /** Test id */\n  'data-testid': z.string().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Props for the ColorPicker component.\n */\nexport interface ColorPickerProps {\n  /** Which picker UI to display (default: \"both\") */\n  mode?: ColorPickerMode;\n  /** Size variant (default: \"default\") */\n  size?: ColorPickerSize;\n  /** Controlled hex color value (e.g. \"#ff0000\") */\n  value?: string;\n  /** Uncontrolled initial hex value (default: \"#000000\") */\n  defaultValue?: string;\n  /** Label text */\n  label?: string;\n  /** Helper/description text */\n  description?: string;\n  /** Error message shown when isInvalid */\n  errorMessage?: string;\n  /** Array of hex color strings for swatch grid */\n  colors?: string[];\n  /** Whether the picker is disabled */\n  isDisabled?: boolean;\n  /** Whether a value is required */\n  isRequired?: boolean;\n  /** Whether the field is in an invalid state */\n  isInvalid?: boolean;\n  /** Whether the field is read-only */\n  isReadOnly?: boolean;\n  /** Name attribute for hidden form input */\n  name?: string;\n  /** Called when color changes - receives React Aria Color object */\n  onChange?: (color: Color) => void;\n  /** Called when drag interaction ends on area/slider */\n  onChangeEnd?: (color: Color) => void;\n  /** Additional CSS classes */\n  className?: string;\n  /** Component id */\n  id?: string;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Test id */\n  'data-testid'?: string;\n}\n","/**\n * ColorPicker CVA Variant Styles\n *\n * Styling for ColorPicker sub-elements using class-variance-authority.\n * Matches Themis input patterns for visual consistency.\n */\n\nimport { cva } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, FIELD_HEIGHTS } from '../../styles';\n\n/**\n * Container for the entire ColorPicker component\n */\nexport const colorPickerContainerVariants = cva(\n  \"flex flex-col gap-2\",\n);\n\n/**\n * Label styling - matches TextField label pattern\n */\nexport const colorPickerLabelVariants = cva(\n  \"text-sm font-medium leading-none\",\n  {\n    variants: {\n      state: {\n        default: \"text-[var(--content-foreground)]\",\n        error: \"text-[var(--destructive-foreground)]\",\n        disabled: \"opacity-50 cursor-not-allowed\",\n      },\n    },\n    defaultVariants: {\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Description/helper text styling\n */\nexport const colorPickerDescriptionVariants = cva(\n  \"text-sm text-[var(--content-foreground)]\"\n);\n\n/**\n * Error message styling\n */\nexport const colorPickerErrorVariants = cva(\n  \"text-sm text-[var(--destructive-foreground)] font-medium mt-1\"\n);\n\n/**\n * Hex input row container (field + preview swatch)\n */\nexport const colorInputRowVariants = cva(\n  \"flex items-center gap-2\",\n);\n\n/**\n * Hex color input field - matches TextField input styles.\n * Uses FIELD_INPUT_SIZES for consistent sizing with all form fields.\n * min-h-[44px] makes the input itself the 44px touch target (same as TextField, Select, etc.)\n */\nexport const colorInputVariants = cva(\n  \"flex w-full rounded-md border bg-[var(--content-background)] px-3 py-2 text-sm ring-offset-[var(--content-background)] font-mono uppercase placeholder:text-[var(--menu-muted)] transition-all duration-200\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} py-1`,\n        default: `${FIELD_INPUT_SIZES.default} py-2`,\n        lg: `${FIELD_INPUT_SIZES.lg} py-3`,\n      },\n      state: {\n        default: \"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n        error: \"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        readonly: \"cursor-default bg-[var(--content-background)] opacity-70\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Color preview swatch next to the hex input\n */\nexport const colorPreviewVariants = cva(\n  \"rounded-md border border-[var(--input-border)] shrink-0\",\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_HEIGHTS.sm} w-9 min-h-[44px]`,\n        default: `${FIELD_HEIGHTS.default} w-10 min-h-[44px]`,\n        lg: `${FIELD_HEIGHTS.lg} w-11 min-h-[44px]`,\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * ColorArea (2D saturation/brightness picker)\n */\nexport const colorAreaVariants = cva(\n  \"w-full rounded-md border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-32\",\n        default: \"h-40\",\n        lg: \"h-48\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Color thumb (draggable handle on area/slider)\n */\nexport const colorThumbVariants = cva(\n  \"h-5 w-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3),inset_0_0_0_1px_rgba(0,0,0,0.3)] data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2\",\n);\n\n/**\n * Hue slider track\n */\nexport const colorSliderTrackVariants = cva(\n  \"w-full rounded-full border border-[var(--input-border)]\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4\",\n        default: \"h-5\",\n        lg: \"h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Swatch grid container\n */\nexport const colorSwatchGridVariants = cva(\n  \"flex flex-wrap gap-1.5\",\n);\n\n/**\n * Individual swatch item in the grid\n */\nexport const colorSwatchItemVariants = cva(\n  \"relative rounded-md cursor-pointer data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-6\",\n        default: \"h-8 w-8\",\n        lg: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Disclosure toggle button for expanding advanced section\n */\nexport const disclosureToggleVariants = cva(\n  \"flex items-center gap-1.5 text-sm text-[var(--primary-action)] hover:text-[var(--primary-action-hover)] cursor-pointer bg-transparent border-none p-0 font-medium transition-colors duration-150 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--ring)] data-[focus-visible]:ring-offset-2 rounded-sm\",\n);\n","'use client';\n\n/**\n * ColorPicker Component\n *\n * Accessible color selection with swatch presets, advanced picker, or both.\n * Built on React Aria ColorPicker and ColorSwatchPicker primitives.\n *\n * @see React Aria ColorPicker: https://react-aria.adobe.com/ColorPicker\n * @see React Aria ColorSwatchPicker: https://react-aria.adobe.com/ColorSwatchPicker\n */\n\nimport { useState, useId, useMemo, useCallback } from 'react';\nimport {\n  ColorPicker as AriaColorPicker,\n  ColorArea as AriaColorArea,\n  ColorSlider as AriaColorSlider,\n  ColorField as AriaColorField,\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  ColorThumb as AriaColorThumb,\n  SliderTrack as AriaSliderTrack,\n  Input as AriaInput,\n  Label as AriaLabel,\n  parseColor,\n  type Color,\n} from 'react-aria-components';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { DEFAULT_COLORS } from './ColorPicker.types';\nimport {\n  colorPickerContainerVariants,\n  colorPickerLabelVariants,\n  colorPickerDescriptionVariants,\n  colorPickerErrorVariants,\n  colorInputRowVariants,\n  colorInputVariants,\n  colorPreviewVariants,\n  colorAreaVariants,\n  colorThumbVariants,\n  colorSliderTrackVariants,\n  colorSwatchGridVariants,\n  colorSwatchItemVariants,\n  disclosureToggleVariants,\n} from './ColorPicker.styles';\n\n/**\n * ColorPicker Component\n *\n * Supports three modes:\n * - \"swatch\": Preset color grid only\n * - \"advanced\": Full picker (ColorArea + hue slider) only\n * - \"both\": Swatch grid with expandable advanced section\n *\n * @example\n * <ColorPicker label=\"Brand Color\" mode=\"both\" defaultValue=\"#7c3aed\" />\n *\n * @example\n * <ColorPicker mode=\"swatch\" colors={['#ff0000', '#00ff00', '#0000ff']} />\n */\nexport function ColorPicker({\n  mode = 'both',\n  size = 'default',\n  value,\n  defaultValue = '#000000',\n  label,\n  description,\n  errorMessage,\n  colors,\n  isDisabled = false,\n  isRequired = false,\n  isInvalid = false,\n  isReadOnly = false,\n  name,\n  onChange,\n  onChangeEnd,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: ColorPickerProps) {\n  const generatedId = useId();\n  const pickerId = id || generatedId;\n  const advancedSectionId = `${pickerId}-advanced`;\n  const errorId = `${pickerId}-error`;\n\n  // Disclosure state for \"both\" mode\n  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);\n\n  // Track current color for hidden form input\n  const [currentHex, setCurrentHex] = useState(value || defaultValue);\n\n  // Determine label state\n  const labelState = isDisabled ? 'disabled' as const : isInvalid ? 'error' as const : 'default' as const;\n\n  // Determine input state\n  const inputState = isDisabled\n    ? 'disabled' as const\n    : isReadOnly\n      ? 'readonly' as const\n      : isInvalid\n        ? 'error' as const\n        : 'default' as const;\n\n  // Swatch colors to use\n  const swatchColors = colors || DEFAULT_COLORS;\n\n  // Parse the initial color value\n  const parsedValue = useMemo(() => {\n    try {\n      return value ? parseColor(value) : undefined;\n    } catch {\n      return undefined;\n    }\n  }, [value]);\n\n  const parsedDefaultValue = useMemo(() => {\n    try {\n      return parseColor(defaultValue);\n    } catch {\n      return parseColor('#000000');\n    }\n  }, [defaultValue]);\n\n  const handleChange = useCallback((color: Color) => {\n    setCurrentHex(color.toString('hex'));\n    onChange?.(color);\n  }, [onChange]);\n\n  const showSwatch = mode === 'swatch' || mode === 'both';\n  const showAdvanced = mode === 'advanced' || mode === 'both';\n  const showDisclosure = mode === 'both';\n\n  return (\n    <div\n      className={cn(colorPickerContainerVariants(), className)}\n      id={pickerId}\n      data-testid={dataTestId}\n    >\n      <AriaColorPicker\n        value={parsedValue}\n        defaultValue={parsedValue ? undefined : parsedDefaultValue}\n        onChange={handleChange}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel className={cn(colorPickerLabelVariants({ state: labelState }))}>\n            {label}\n            {isRequired && (\n              <span className=\"ml-1 text-[var(--destructive-background)]\" aria-hidden=\"true\">\n                <strong>*</strong>\n              </span>\n            )}\n          </AriaLabel>\n        )}\n\n        {/* Description */}\n        {description && (\n          <p className={cn(colorPickerDescriptionVariants())}>{description}</p>\n        )}\n\n        {/* Hex input row */}\n        <div className={cn(colorInputRowVariants())}>\n          <AriaColorField\n            aria-label={ariaLabel || label || 'Color value'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            className={cn(FIELD_TOUCH_TARGET, 'cursor-text', 'flex-1')}\n            onClick={(e) => {\n              if (e.target === e.currentTarget) {\n                (e.currentTarget as HTMLElement).querySelector('input')?.focus();\n              }\n            }}\n          >\n            <AriaInput\n              className={cn(colorInputVariants({ size, state: inputState }))}\n              aria-errormessage={isInvalid && errorMessage ? errorId : undefined}\n              aria-required={isRequired ? true : undefined}\n            />\n          </AriaColorField>\n          <AriaColorSwatch\n            className={cn(colorPreviewVariants({ size }))}\n            aria-label=\"Selected color preview\"\n          />\n        </div>\n\n        {/* Swatch picker */}\n        {showSwatch && (\n          <AriaColorSwatchPicker\n            className={cn(colorSwatchGridVariants())}\n            aria-label=\"Color swatches\"\n          >\n            {swatchColors.map((color) => (\n              <AriaColorSwatchPickerItem\n                key={color}\n                color={color}\n                className={cn(colorSwatchItemVariants({ size }))}\n              >\n                <AriaColorSwatch\n                  className=\"h-full w-full rounded-md data-[selected]:ring-2 data-[selected]:ring-[var(--ring)] data-[selected]:ring-offset-2\"\n                />\n              </AriaColorSwatchPickerItem>\n            ))}\n          </AriaColorSwatchPicker>\n        )}\n\n        {/* Disclosure toggle for \"both\" mode */}\n        {showDisclosure && (\n          <button\n            type=\"button\"\n            className={cn(disclosureToggleVariants())}\n            onClick={() => setIsAdvancedOpen((prev) => !prev)}\n            aria-expanded={isAdvancedOpen}\n            aria-controls={advancedSectionId}\n            disabled={isDisabled}\n          >\n            <ChevronDown\n              className={cn(\n                \"h-4 w-4 transition-transform duration-200\",\n                isAdvancedOpen && \"rotate-180\"\n              )}\n            />\n            Custom color\n          </button>\n        )}\n\n        {/* Advanced section (ColorArea + hue slider) */}\n        {showAdvanced && (mode === 'advanced' || isAdvancedOpen) && (\n          <div\n            id={advancedSectionId}\n            role=\"group\"\n            aria-label=\"Custom color picker\"\n            className=\"flex flex-col gap-2\"\n          >\n            <AriaColorArea\n              colorSpace=\"hsb\"\n              xChannel=\"saturation\"\n              yChannel=\"brightness\"\n              className={cn(colorAreaVariants({ size }))}\n              isDisabled={isDisabled}\n            >\n              <AriaColorThumb className={cn(colorThumbVariants())} />\n            </AriaColorArea>\n\n            <AriaColorSlider\n              colorSpace=\"hsb\"\n              channel=\"hue\"\n              isDisabled={isDisabled}\n              onChangeEnd={onChangeEnd}\n              aria-label=\"Hue\"\n            >\n              <AriaSliderTrack className={cn(colorSliderTrackVariants({ size }))}>\n                <AriaColorThumb className={cn(colorThumbVariants())} />\n              </AriaSliderTrack>\n            </AriaColorSlider>\n          </div>\n        )}\n      </AriaColorPicker>\n\n      {/* Error message */}\n      {isInvalid && errorMessage && (\n        <p id={errorId} className={cn(colorPickerErrorVariants())} role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n\n      {/* Hidden form input */}\n      {name && (\n        <input type=\"hidden\" name={name} value={currentHex} />\n      )}\n    </div>\n  );\n}\n\nColorPicker.displayName = 'ColorPicker';\n"]}

package/dist/elements/Combobox/Combobox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;8EAY5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC;AAEF,eAAO,MAAM,8BAA8B;;8EAoB1C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;8EAkBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFASnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAmBhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAAc,CAAC;AAEnD,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAYvC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC"}
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;8EAY5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC;AAEF,eAAO,MAAM,8BAA8B;;8EAoB1C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;8EAkBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAQnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAmBhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAAc,CAAC;AAEnD,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAYvC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAYjC,CAAC"}

package/dist/elements/Combobox/index.js

@@ -1,3 +1,3 @@
 "use client";
-'use strict';var react=require('react'),reactAriaComponents=require('react-aria-components'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime'),zod=require('zod');function c(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var p={sm:"text-xs",default:"text-sm",lg:"text-base"};var b={sm:"h-9",default:"h-10",lg:"h-11"},l={sm:`${b.sm} px-2 text-xs`,default:`${b.default} px-3 text-sm`,lg:`${b.lg} px-4 text-base`},u="min-h-[44px] flex items-center";var f=classVarianceAuthority.cva("group flex flex-col gap-1.5 w-full",{variants:{size:{sm:"",default:"",lg:""}},defaultVariants:{size:"default"}}),g=classVarianceAuthority.cva("text-[var(--text-primary)] font-medium",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),S=classVarianceAuthority.cva(["flex-1 bg-transparent outline-none","placeholder:text-[var(--muted-foreground)]","disabled:cursor-not-allowed"],{variants:{size:p},defaultVariants:{size:"default"}}),I=classVarianceAuthority.cva(["flex items-center w-full rounded-md border","bg-[var(--input-background)] text-[var(--content-foreground)]","border-[var(--input-border)]","transition-colors duration-[var(--transition-fast)]","focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-[var(--ring-offset)]","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[invalid]:border-[var(--destructive-background)]"],{variants:{size:{sm:`${l.sm} gap-1`,default:`${l.default} gap-2`,lg:`${l.lg} gap-2`}},defaultVariants:{size:"default"}}),E=classVarianceAuthority.cva(["flex items-center justify-center shrink-0","text-[var(--muted-foreground)]","hover:text-[var(--text-primary)]","transition-colors","focus:outline-none"],{variants:{size:{sm:"h-4 w-4 min-h-[44px] min-w-[44px]",default:"h-5 w-5 min-h-[44px] min-w-[44px]",lg:"h-6 w-6 min-h-[44px] min-w-[44px]"}},defaultVariants:{size:"default"}}),_=classVarianceAuthority.cva(["w-[var(--trigger-width)] overflow-auto","rounded-md border border-[var(--border)]","bg-[var(--content-background)] text-[var(--content-foreground)]","shadow-md","data-[entering]:motion-safe:animate-in data-[entering]:motion-safe:fade-in-0","data-[exiting]:motion-safe:animate-out data-[exiting]:motion-safe:fade-out-0"]),T=classVarianceAuthority.cva("p-1 outline-none max-h-[300px] overflow-auto"),A=classVarianceAuthority.cva(["flex items-center gap-2 w-full rounded-sm px-2 py-1.5","text-[var(--content-foreground)]","cursor-pointer outline-none","data-[focused]:bg-[var(--accent-background)] data-[focused]:text-[var(--accent-foreground)]","data-[selected]:font-medium","data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"],{variants:{size:{sm:"text-xs min-h-[44px]",default:"text-sm min-h-[44px]",lg:"text-base min-h-[44px]"}},defaultVariants:{size:"default"}}),C=classVarianceAuthority.cva("pt-1"),N=classVarianceAuthority.cva("px-2 py-1.5 text-xs font-semibold text-[var(--muted-foreground)]"),O=classVarianceAuthority.cva("text-[var(--muted-foreground)]",{variants:{size:{sm:"text-xs",default:"text-xs",lg:"text-sm"}},defaultVariants:{size:"default"}}),v=classVarianceAuthority.cva("text-[var(--destructive-background)]",{variants:{size:{sm:"text-xs",default:"text-xs",lg:"text-sm"}},defaultVariants:{size:"default"}});var h=react.forwardRef(({className:n,size:a="default",label:i,description:d,errorMessage:s,isRequired:x,isDisabled:w,isReadOnly:H,placeholder:U,name:M,allowsCustomValue:z=false,menuTrigger:G="input",defaultInputValue:F,inputValue:k,defaultSelectedKey:Z,selectedKey:Y,onInputChange:K,onSelectionChange:W,children:$,"aria-label":R,"aria-labelledby":V,"data-testid":X,...j},q)=>(process.env.NODE_ENV!=="production"&&!i&&!R&&!V&&console.warn("[Combobox] Either label, aria-label, or aria-labelledby is required for accessibility (WCAG 1.1.1)"),jsxRuntime.jsxs(reactAriaComponents.ComboBox,{ref:q,className:c(f({size:a}),n),isRequired:x,isDisabled:w,isReadOnly:H,name:M,allowsCustomValue:z,menuTrigger:G,defaultInputValue:F,inputValue:k,defaultSelectedKey:Z,selectedKey:Y,onInputChange:K,onSelectionChange:W,"aria-label":i?void 0:R,"aria-labelledby":V,"data-testid":X,...j,children:[i&&jsxRuntime.jsxs(reactAriaComponents.Label,{className:g({size:a}),children:[i,x&&jsxRuntime.jsx("span",{className:"text-[var(--destructive-background)] ml-1","aria-hidden":"true",children:"*"})]}),jsxRuntime.jsxs("div",{className:c(u,I({size:a})),children:[jsxRuntime.jsx(reactAriaComponents.Input,{className:S({size:a}),placeholder:U}),jsxRuntime.jsx(reactAriaComponents.Button,{className:E({size:a}),children:jsxRuntime.jsx(lucideReact.ChevronsUpDown,{className:"h-full w-full","aria-hidden":"true"})})]}),d&&!s&&jsxRuntime.jsx(reactAriaComponents.Text,{slot:"description",className:O({size:a}),children:d}),s&&jsxRuntime.jsx(reactAriaComponents.Text,{slot:"errorMessage",className:v({size:a}),children:s}),jsxRuntime.jsx(reactAriaComponents.Popover,{className:_(),children:jsxRuntime.jsx(reactAriaComponents.ListBox,{className:T(),children:$})})]})));h.displayName="Combobox";function D({children:n,className:a,textValue:i,...d}){let s=i||(typeof n=="string"?n:void 0);return jsxRuntime.jsx(reactAriaComponents.ListBoxItem,{className:c(A({size:"default"}),a),textValue:s,...d,children:({isSelected:x})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{className:"flex-1",children:n}),x&&jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4 shrink-0 text-[var(--primary)]","aria-hidden":"true"})]})})}D.displayName="ComboboxItem";function y({header:n,children:a,className:i}){return jsxRuntime.jsxs(reactAriaComponents.ListBoxSection,{className:c(C(),i),children:[n&&jsxRuntime.jsx(reactAriaComponents.Header,{className:N(),children:n}),a]})}y.displayName="ComboboxSection";var P=zod.z.object({className:zod.z.string().optional(),children:zod.z.any().optional(),id:zod.z.string().optional(),"aria-label":zod.z.string().optional(),"aria-labelledby":zod.z.string().optional(),"aria-describedby":zod.z.string().optional(),"aria-live":zod.z.enum(["off","polite","assertive"]).optional(),"aria-hidden":zod.z.boolean().optional(),"data-testid":zod.z.string().optional()});var B=zod.z.enum(["sm","default","lg"]),po=P.extend({label:zod.z.string().optional(),description:zod.z.string().optional(),errorMessage:zod.z.string().optional(),size:B.optional().default("default"),placeholder:zod.z.string().optional(),isRequired:zod.z.boolean().optional(),isDisabled:zod.z.boolean().optional(),isReadOnly:zod.z.boolean().optional(),name:zod.z.string().optional(),allowsCustomValue:zod.z.boolean().optional().default(false),menuTrigger:zod.z.enum(["input","focus","manual"]).optional().default("input"),defaultInputValue:zod.z.string().optional(),inputValue:zod.z.string().optional(),defaultSelectedKey:zod.z.union([zod.z.string(),zod.z.number()]).optional(),selectedKey:zod.z.union([zod.z.string(),zod.z.number(),zod.z.null()]).optional()}),uo=zod.z.object({id:zod.z.union([zod.z.string(),zod.z.number()]).optional(),textValue:zod.z.string().optional(),isDisabled:zod.z.boolean().optional(),children:zod.z.custom(),className:zod.z.string().optional()}),fo=zod.z.object({header:zod.z.string().optional(),children:zod.z.custom(),className:zod.z.string().optional()});exports.Combobox=h;exports.ComboboxItem=D;exports.ComboboxItemPropsSchema=uo;exports.ComboboxPropsSchema=po;exports.ComboboxSection=y;exports.ComboboxSectionPropsSchema=fo;exports.ComboboxSizeSchema=B;exports.comboboxButtonVariants=E;exports.comboboxDescriptionVariants=O;exports.comboboxErrorVariants=v;exports.comboboxInputVariants=S;exports.comboboxItemVariants=A;exports.comboboxLabelVariants=g;exports.comboboxListBoxVariants=T;exports.comboboxPopoverVariants=_;exports.comboboxSectionHeaderVariants=N;exports.comboboxSectionVariants=C;exports.comboboxTriggerWrapperVariants=I;exports.comboboxVariants=f;//# sourceMappingURL=index.js.map
+'use strict';var react=require('react'),reactAriaComponents=require('react-aria-components'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime'),zod=require('zod');function c(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var p={sm:"text-xs",default:"text-sm",lg:"text-base"};var b={sm:"h-9",default:"h-10",lg:"h-11"},l={sm:`${b.sm} px-2 text-xs`,default:`${b.default} px-3 text-sm`,lg:`${b.lg} px-4 text-base`},u="min-h-[44px] flex items-center";var f=classVarianceAuthority.cva("group flex flex-col gap-1.5 w-full",{variants:{size:{sm:"",default:"",lg:""}},defaultVariants:{size:"default"}}),g=classVarianceAuthority.cva("text-[var(--text-primary)] font-medium",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),S=classVarianceAuthority.cva(["flex-1 bg-transparent outline-none","placeholder:text-[var(--muted-foreground)]","disabled:cursor-not-allowed"],{variants:{size:p},defaultVariants:{size:"default"}}),I=classVarianceAuthority.cva(["flex items-center w-full rounded-md border","bg-[var(--input-background)] text-[var(--content-foreground)]","border-[var(--input-border)]","transition-colors duration-[var(--transition-fast)]","focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-[var(--ring-offset)]","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[invalid]:border-[var(--destructive-background)]"],{variants:{size:{sm:`${l.sm} gap-1`,default:`${l.default} gap-2`,lg:`${l.lg} gap-2`}},defaultVariants:{size:"default"}}),E=classVarianceAuthority.cva(["flex items-center justify-center shrink-0","text-[var(--muted-foreground)]","hover:text-[var(--text-primary)]","transition-colors","focus:outline-none"],{variants:{size:{sm:"h-4 w-4 min-h-[44px] min-w-[44px]",default:"h-5 w-5 min-h-[44px] min-w-[44px]",lg:"h-6 w-6 min-h-[44px] min-w-[44px]"}},defaultVariants:{size:"default"}}),_=classVarianceAuthority.cva(["w-[var(--trigger-width)] overflow-auto","rounded-md border border-[var(--border)]","bg-[var(--content-background)] text-[var(--content-foreground)]","data-[entering]:motion-safe:animate-in data-[entering]:motion-safe:fade-in-0","data-[exiting]:motion-safe:animate-out data-[exiting]:motion-safe:fade-out-0"]),T=classVarianceAuthority.cva("p-1 outline-none max-h-[300px] overflow-auto"),A=classVarianceAuthority.cva(["flex items-center gap-2 w-full rounded-sm px-2 py-1.5","text-[var(--content-foreground)]","cursor-pointer outline-none","data-[focused]:bg-[var(--accent-background)] data-[focused]:text-[var(--accent-foreground)]","data-[selected]:font-medium","data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"],{variants:{size:{sm:"text-xs min-h-[44px]",default:"text-sm min-h-[44px]",lg:"text-base min-h-[44px]"}},defaultVariants:{size:"default"}}),C=classVarianceAuthority.cva("pt-1"),N=classVarianceAuthority.cva("px-2 py-1.5 text-xs font-semibold text-[var(--muted-foreground)]"),O=classVarianceAuthority.cva("text-[var(--muted-foreground)]",{variants:{size:{sm:"text-xs",default:"text-xs",lg:"text-sm"}},defaultVariants:{size:"default"}}),v=classVarianceAuthority.cva("text-[var(--destructive-background)]",{variants:{size:{sm:"text-xs",default:"text-xs",lg:"text-sm"}},defaultVariants:{size:"default"}});var h=react.forwardRef(({className:n,size:a="default",label:i,description:d,errorMessage:s,isRequired:x,isDisabled:w,isReadOnly:H,placeholder:U,name:M,allowsCustomValue:z=false,menuTrigger:G="input",defaultInputValue:F,inputValue:k,defaultSelectedKey:Z,selectedKey:Y,onInputChange:K,onSelectionChange:W,children:$,"aria-label":R,"aria-labelledby":V,"data-testid":X,...j},q)=>(process.env.NODE_ENV!=="production"&&!i&&!R&&!V&&console.warn("[Combobox] Either label, aria-label, or aria-labelledby is required for accessibility (WCAG 1.1.1)"),jsxRuntime.jsxs(reactAriaComponents.ComboBox,{ref:q,className:c(f({size:a}),n),isRequired:x,isDisabled:w,isReadOnly:H,name:M,allowsCustomValue:z,menuTrigger:G,defaultInputValue:F,inputValue:k,defaultSelectedKey:Z,selectedKey:Y,onInputChange:K,onSelectionChange:W,"aria-label":i?void 0:R,"aria-labelledby":V,"data-testid":X,...j,children:[i&&jsxRuntime.jsxs(reactAriaComponents.Label,{className:g({size:a}),children:[i,x&&jsxRuntime.jsx("span",{className:"text-[var(--destructive-background)] ml-1","aria-hidden":"true",children:"*"})]}),jsxRuntime.jsxs("div",{className:c(u,I({size:a})),children:[jsxRuntime.jsx(reactAriaComponents.Input,{className:S({size:a}),placeholder:U}),jsxRuntime.jsx(reactAriaComponents.Button,{className:E({size:a}),children:jsxRuntime.jsx(lucideReact.ChevronsUpDown,{className:"h-full w-full","aria-hidden":"true"})})]}),d&&!s&&jsxRuntime.jsx(reactAriaComponents.Text,{slot:"description",className:O({size:a}),children:d}),s&&jsxRuntime.jsx(reactAriaComponents.Text,{slot:"errorMessage",className:v({size:a}),children:s}),jsxRuntime.jsx(reactAriaComponents.Popover,{className:_(),children:jsxRuntime.jsx(reactAriaComponents.ListBox,{className:T(),children:$})})]})));h.displayName="Combobox";function D({children:n,className:a,textValue:i,...d}){let s=i||(typeof n=="string"?n:void 0);return jsxRuntime.jsx(reactAriaComponents.ListBoxItem,{className:c(A({size:"default"}),a),textValue:s,...d,children:({isSelected:x})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{className:"flex-1",children:n}),x&&jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4 shrink-0 text-[var(--primary)]","aria-hidden":"true"})]})})}D.displayName="ComboboxItem";function y({header:n,children:a,className:i}){return jsxRuntime.jsxs(reactAriaComponents.ListBoxSection,{className:c(C(),i),children:[n&&jsxRuntime.jsx(reactAriaComponents.Header,{className:N(),children:n}),a]})}y.displayName="ComboboxSection";var P=zod.z.object({className:zod.z.string().optional(),children:zod.z.any().optional(),id:zod.z.string().optional(),"aria-label":zod.z.string().optional(),"aria-labelledby":zod.z.string().optional(),"aria-describedby":zod.z.string().optional(),"aria-live":zod.z.enum(["off","polite","assertive"]).optional(),"aria-hidden":zod.z.boolean().optional(),"data-testid":zod.z.string().optional()});var B=zod.z.enum(["sm","default","lg"]),po=P.extend({label:zod.z.string().optional(),description:zod.z.string().optional(),errorMessage:zod.z.string().optional(),size:B.optional().default("default"),placeholder:zod.z.string().optional(),isRequired:zod.z.boolean().optional(),isDisabled:zod.z.boolean().optional(),isReadOnly:zod.z.boolean().optional(),name:zod.z.string().optional(),allowsCustomValue:zod.z.boolean().optional().default(false),menuTrigger:zod.z.enum(["input","focus","manual"]).optional().default("input"),defaultInputValue:zod.z.string().optional(),inputValue:zod.z.string().optional(),defaultSelectedKey:zod.z.union([zod.z.string(),zod.z.number()]).optional(),selectedKey:zod.z.union([zod.z.string(),zod.z.number(),zod.z.null()]).optional()}),uo=zod.z.object({id:zod.z.union([zod.z.string(),zod.z.number()]).optional(),textValue:zod.z.string().optional(),isDisabled:zod.z.boolean().optional(),children:zod.z.custom(),className:zod.z.string().optional()}),fo=zod.z.object({header:zod.z.string().optional(),children:zod.z.custom(),className:zod.z.string().optional()});exports.Combobox=h;exports.ComboboxItem=D;exports.ComboboxItemPropsSchema=uo;exports.ComboboxPropsSchema=po;exports.ComboboxSection=y;exports.ComboboxSectionPropsSchema=fo;exports.ComboboxSizeSchema=B;exports.comboboxButtonVariants=E;exports.comboboxDescriptionVariants=O;exports.comboboxErrorVariants=v;exports.comboboxInputVariants=S;exports.comboboxItemVariants=A;exports.comboboxLabelVariants=g;exports.comboboxListBoxVariants=T;exports.comboboxPopoverVariants=_;exports.comboboxSectionHeaderVariants=N;exports.comboboxSectionVariants=C;exports.comboboxTriggerWrapperVariants=I;exports.comboboxVariants=f;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map