@tribepad/themis 1.6.4 → 1.6.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/TimeField/TimeField.types.ts","../../../src/elements/TimeField/TimeField.tsx"],"names":["cn","inputs","twMerge","clsx","TEXT_SIZE_SMALL_SCALE","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","TimeFieldPropsSchema","z","timeFieldVariants","cva","timeSegmentVariants","timeFieldLabelVariants","timeFieldDescriptionVariants","timeFieldErrorVariants","TimeField","forwardRef","label","description","errorMessage","size","className","props","ref","jsxs","AriaTimeField","jsx","AriaLabel","AriaDateInput","segment","AriaDateSegment","AriaText","AriaFieldError"],"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 * TimeField Component Types\n *\n * Zod schemas and TypeScript types for the TimeField component.\n * Includes CVA variant definitions for styling.\n *\n * Note: Zod schemas are used for contract tests and developer guardrails,\n * not runtime validation. This follows the established Themis pattern.\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { z } from 'zod';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, TEXT_SIZE_SMALL_SCALE } from '../../styles';\nimport type {\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue,\n} from 'react-aria-components';\n\n// ============================================================================\n// Time Value Types (re-exported for convenience)\n// ============================================================================\n\n/**\n * Union type for all time values supported by the TimeField.\n * - Time: Time only (no date, no timezone)\n * - CalendarDateTime: Date and time (no timezone)\n * - ZonedDateTime: Date, time, and timezone\n */\nexport type { TimeValue } from 'react-aria-components';\n\n// ============================================================================\n// Granularity Type\n// ============================================================================\n\n/**\n * Controls which time segments are displayed.\n * - 'hour': Hour only (+ AM/PM in 12-hour mode)\n * - 'minute': Hour + minute (default)\n * - 'second': Hour + minute + second\n *\n * Note: Millisecond granularity is intentionally excluded - no common UI use case.\n */\nexport type TimeGranularity = 'hour' | 'minute' | 'second';\n\n// ============================================================================\n// Size Variant Type\n// ============================================================================\n\n/**\n * Size variants for TimeField component.\n * - 'sm': Compact size (36px height) - AA compliant only, not AAA\n * - 'default': Standard size (44px height) - AAA compliant\n * - 'lg': Large size (56px height) - AAA compliant\n */\nexport type TimeFieldSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Hour Cycle Type\n// ============================================================================\n\n/**\n * Hour cycle format.\n * - 12: 12-hour format with AM/PM\n * - 24: 24-hour format\n */\nexport type HourCycle = 12 | 24;\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\n/**\n * Zod schema for TimeField props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const TimeFieldPropsSchema = z.object({\n  // Value props\n  value: z.custom<TimeValue>().optional(),\n  defaultValue: z.custom<TimeValue>().optional(),\n  placeholderValue: z.custom<TimeValue>().optional(),\n\n  // Granularity props\n  granularity: z.enum(['hour', 'minute', 'second']).default('minute'),\n  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),\n  hideTimeZone: z.boolean().optional(),\n  shouldForceLeadingZeros: z.boolean().optional(),\n\n  // Constraint props\n  minValue: z.custom<TimeValue>().optional(),\n  maxValue: z.custom<TimeValue>().optional(),\n\n  // State props\n  isDisabled: z.boolean().optional(),\n  isReadOnly: z.boolean().optional(),\n  isRequired: z.boolean().optional(),\n  isInvalid: z.boolean().optional(),\n\n  // Validation props\n  /** Custom validation function that returns an error message or null */\n  validate: z.function().optional(),\n  validationBehavior: z.enum(['native', 'aria']).default('native'),\n\n  // Display props\n  label: z.string(),\n  description: z.string().optional(),\n  /** Error message string or render function */\n  errorMessage: z.union([z.string(), z.function()]).optional(),\n\n  // Form props\n  name: z.string().optional(),\n\n  // Variant props\n  size: z.enum(['sm', 'default', 'lg']).default('default'),\n\n  // Event props\n  /** Called when the time value changes */\n  onChange: z.function().optional(),\n  /** Called when the field gains focus */\n  onFocus: z.function().optional(),\n  /** Called when the field loses focus */\n  onBlur: z.function().optional(),\n  /** Called when focus state changes */\n  onFocusChange: z.function().optional(),\n\n  // Standard props\n  className: z.string().optional(),\n  autoFocus: z.boolean().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Custom props added to TimeField (not from React Aria).\n */\nexport interface ThemisTimeFieldCustomProps {\n  /** Size variant: 'sm', 'default', or 'lg' */\n  size?: TimeFieldSize;\n  /** Field label */\n  label?: string;\n  /** Description text below the field */\n  description?: string;\n  /** Error message when field is invalid */\n  errorMessage?: string;\n}\n\n/**\n * Props for the TimeField component.\n * Uses React Aria's TimeFieldProps directly to ensure correct function types.\n */\nexport type TimeFieldProps = AriaTimeFieldProps<TimeValue> &\n  ThemisTimeFieldCustomProps;\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Variants for the TimeField input container.\n * Applies to the DateInput element wrapping time segments.\n *\n * Size notes:\n * - sm (36px): Desktop-only, AA compliant only (not AAA touch target)\n * - default (44px): AAA compliant, recommended for most use cases\n * - lg (56px): AAA compliant, enhanced touch targets\n */\nexport const timeFieldVariants = cva(\n  [\n    // Base styles\n    'inline-flex items-center rounded-md border',\n    'bg-[var(--content-background)] text-[var(--content-foreground)]',\n    'transition-colors duration-200',\n    // Focus within\n    'focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2',\n    // Disabled\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} gap-0.5`,\n        default: `${FIELD_INPUT_SIZES.default} gap-0.5`,\n        lg: `${FIELD_INPUT_SIZES.lg} gap-1`,\n      },\n      isInvalid: {\n        true: 'border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]',\n        false: 'border-[var(--input-border)] hover:border-[var(--input-border)]/80',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Variants for individual time segment elements.\n * Each segment (hour, minute, second, dayPeriod) uses these styles.\n */\nexport const timeSegmentVariants = cva(\n  [\n    // Base styles\n    'tabular-nums rounded px-0.5',\n    // Focus\n    'focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]',\n    // Placeholder\n    'data-[placeholder]:text-[var(--menu-muted)]',\n    // Literal segments (colons, spaces)\n    'data-[type=literal]:text-[var(--menu-muted)]',\n    // Disabled\n    'data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${TEXT_SIZE_SMALL_SCALE.sm} min-w-[1.5ch]`,\n        default: `${TEXT_SIZE_SMALL_SCALE.default} min-w-[2ch]`,\n        lg: `${TEXT_SIZE_SMALL_SCALE.lg} min-w-[2ch]`,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the TimeField label.\n */\nexport const timeFieldLabelVariants = cva(\n  [\n    'block font-medium text-[var(--content-foreground)]',\n    'mb-1.5',\n    // Required indicator\n    'data-[required]:after:content-[\"*\"] data-[required]:after:ml-0.5',\n    'data-[required]:after:text-[var(--destructive-background)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the description text below the field.\n */\nexport const timeFieldDescriptionVariants = cva(\n  [\n    'text-[var(--menu-muted)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the error message display.\n */\nexport const timeFieldErrorVariants = cva(\n  [\n    'flex items-center gap-1',\n    'text-[var(--destructive-background)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n// ============================================================================\n// Variant Types (from CVA)\n// ============================================================================\n\n/**\n * Variant props for timeFieldVariants CVA function.\n */\nexport type TimeFieldVariantProps = VariantProps<typeof timeFieldVariants>;\n\n/**\n * Variant props for timeSegmentVariants CVA function.\n */\nexport type TimeSegmentVariantProps = VariantProps<typeof timeSegmentVariants>;\n","'use client';\n\n/**\n * TimeField Component\n *\n * A fully accessible time input component built on React Aria's TimeField primitive.\n * Provides keyboard-editable time segments for entering hours, minutes, and seconds.\n *\n * Features:\n * - WCAG 2.2 AAA compliant (default/lg sizes) / AA compliant (sm size)\n * - Configurable granularity (hour, minute, second)\n * - 12-hour and 24-hour format support\n * - Step increment support\n * - Min/max constraints with validation\n * - Form integration with hidden input\n * - Full keyboard navigation\n * - Screen reader accessible\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { forwardRef, type ReactElement } from 'react';\nimport {\n  TimeField as AriaTimeField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { TimeFieldProps } from './TimeField.types';\nimport {\n  timeFieldVariants,\n  timeSegmentVariants,\n  timeFieldLabelVariants,\n  timeFieldDescriptionVariants,\n  timeFieldErrorVariants,\n} from './TimeField.types';\n\n// =============================================================================\n// TimeField Component\n// =============================================================================\n\n/**\n * TimeField component for time input with keyboard-editable segments.\n *\n * @example\n * ```tsx\n * import { TimeField, Time } from '@tribepad/themis/elements/TimeField';\n *\n * // Basic usage\n * <TimeField label=\"Meeting Time\" />\n *\n * // With default value\n * <TimeField\n *   label=\"Start Time\"\n *   defaultValue={new Time(14, 30)}\n * />\n *\n * // 12-hour format with step\n * <TimeField\n *   label=\"Appointment\"\n *   hourCycle={12}\n *   step={15}\n * />\n *\n * // With validation\n * <TimeField\n *   label=\"Office Hours\"\n *   minValue={new Time(9, 0)}\n *   maxValue={new Time(17, 0)}\n *   errorMessage=\"Please select a time within office hours\"\n * />\n * ```\n */\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Variant props\n      size = 'default',\n      // Standard props\n      className,\n      // All other props go to AriaTimeField\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    return (\n      <AriaTimeField\n        ref={ref}\n        className={cn('group flex flex-col gap-1', className)}\n        {...props}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel\n            className={cn(timeFieldLabelVariants({ size }))}\n            data-required={props.isRequired || undefined}\n          >\n            {label}\n          </AriaLabel>\n        )}\n\n        {/* Time Input */}\n        <AriaDateInput\n          className={cn(\n            FIELD_TOUCH_TARGET,\n            timeFieldVariants({\n              size,\n              isInvalid: props.isInvalid,\n            }),\n            'w-fit'\n          )}\n        >\n          {(segment) => (\n            <AriaDateSegment\n              segment={segment}\n              className={cn(timeSegmentVariants({ size }))}\n            />\n          )}\n        </AriaDateInput>\n\n        {/* Description */}\n        {description && (\n          <AriaText\n            slot=\"description\"\n            className={cn(timeFieldDescriptionVariants({ size }))}\n          >\n            {description}\n          </AriaText>\n        )}\n\n        {/* Error Message */}\n        <AriaFieldError className={cn(timeFieldErrorVariants({ size }))}>\n          {errorMessage}\n        </AriaFieldError>\n      </AriaTimeField>\n    );\n  }\n);\n\nTimeField.displayName = 'TimeField';\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/TimeField/TimeField.types.ts","../../../src/elements/TimeField/TimeField.tsx"],"names":["cn","inputs","twMerge","clsx","TEXT_SIZE_SMALL_SCALE","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","TimeFieldPropsSchema","z","timeFieldVariants","cva","timeSegmentVariants","timeFieldLabelVariants","timeFieldDescriptionVariants","timeFieldErrorVariants","TimeField","forwardRef","label","description","errorMessage","size","className","props","ref","jsxs","AriaTimeField","jsx","AriaLabel","AriaDateInput","segment","AriaDateSegment","AriaText","AriaFieldError"],"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 * Directional slide animations for edge-anchored drawers (Modal `position` variant).\n *\n * Unitless `slide-in-from-*` / `slide-out-to-*` translate the full extent of the\n * element (100%), so the drawer slides all the way in from / out to its anchored\n * edge — distinct from `MODAL_SLIDE_*` above, which is the small 1rem nudge used by\n * the centred `slide` animation. No `fade` is paired here: a drawer slides, it\n * does not fade. Honour `prefers-reduced-motion` via REDUCED_MOTION on the element.\n */\nexport const MODAL_SLIDE_IN_LEFT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-left',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_LEFT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-left',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_RIGHT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-right',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_RIGHT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-right',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_TOP = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-top',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_TOP = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-top',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_BOTTOM = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-bottom',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_BOTTOM = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-bottom',\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 * TimeField Component Types\n *\n * Zod schemas and TypeScript types for the TimeField component.\n * Includes CVA variant definitions for styling.\n *\n * Note: Zod schemas are used for contract tests and developer guardrails,\n * not runtime validation. This follows the established Themis pattern.\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { z } from 'zod';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, TEXT_SIZE_SMALL_SCALE } from '../../styles';\nimport type {\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue,\n} from 'react-aria-components';\n\n// ============================================================================\n// Time Value Types (re-exported for convenience)\n// ============================================================================\n\n/**\n * Union type for all time values supported by the TimeField.\n * - Time: Time only (no date, no timezone)\n * - CalendarDateTime: Date and time (no timezone)\n * - ZonedDateTime: Date, time, and timezone\n */\nexport type { TimeValue } from 'react-aria-components';\n\n// ============================================================================\n// Granularity Type\n// ============================================================================\n\n/**\n * Controls which time segments are displayed.\n * - 'hour': Hour only (+ AM/PM in 12-hour mode)\n * - 'minute': Hour + minute (default)\n * - 'second': Hour + minute + second\n *\n * Note: Millisecond granularity is intentionally excluded - no common UI use case.\n */\nexport type TimeGranularity = 'hour' | 'minute' | 'second';\n\n// ============================================================================\n// Size Variant Type\n// ============================================================================\n\n/**\n * Size variants for TimeField component.\n * - 'sm': Compact size (36px height) - AA compliant only, not AAA\n * - 'default': Standard size (44px height) - AAA compliant\n * - 'lg': Large size (56px height) - AAA compliant\n */\nexport type TimeFieldSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Hour Cycle Type\n// ============================================================================\n\n/**\n * Hour cycle format.\n * - 12: 12-hour format with AM/PM\n * - 24: 24-hour format\n */\nexport type HourCycle = 12 | 24;\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\n/**\n * Zod schema for TimeField props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const TimeFieldPropsSchema = z.object({\n  // Value props\n  value: z.custom<TimeValue>().optional(),\n  defaultValue: z.custom<TimeValue>().optional(),\n  placeholderValue: z.custom<TimeValue>().optional(),\n\n  // Granularity props\n  granularity: z.enum(['hour', 'minute', 'second']).default('minute'),\n  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),\n  hideTimeZone: z.boolean().optional(),\n  shouldForceLeadingZeros: z.boolean().optional(),\n\n  // Constraint props\n  minValue: z.custom<TimeValue>().optional(),\n  maxValue: z.custom<TimeValue>().optional(),\n\n  // State props\n  isDisabled: z.boolean().optional(),\n  isReadOnly: z.boolean().optional(),\n  isRequired: z.boolean().optional(),\n  isInvalid: z.boolean().optional(),\n\n  // Validation props\n  /** Custom validation function that returns an error message or null */\n  validate: z.function().optional(),\n  validationBehavior: z.enum(['native', 'aria']).default('native'),\n\n  // Display props\n  label: z.string(),\n  description: z.string().optional(),\n  /** Error message string or render function */\n  errorMessage: z.union([z.string(), z.function()]).optional(),\n\n  // Form props\n  name: z.string().optional(),\n\n  // Variant props\n  size: z.enum(['sm', 'default', 'lg']).default('default'),\n\n  // Event props\n  /** Called when the time value changes */\n  onChange: z.function().optional(),\n  /** Called when the field gains focus */\n  onFocus: z.function().optional(),\n  /** Called when the field loses focus */\n  onBlur: z.function().optional(),\n  /** Called when focus state changes */\n  onFocusChange: z.function().optional(),\n\n  // Standard props\n  className: z.string().optional(),\n  autoFocus: z.boolean().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Custom props added to TimeField (not from React Aria).\n */\nexport interface ThemisTimeFieldCustomProps {\n  /** Size variant: 'sm', 'default', or 'lg' */\n  size?: TimeFieldSize;\n  /** Field label */\n  label?: string;\n  /** Description text below the field */\n  description?: string;\n  /** Error message when field is invalid */\n  errorMessage?: string;\n}\n\n/**\n * Props for the TimeField component.\n * Uses React Aria's TimeFieldProps directly to ensure correct function types.\n */\nexport type TimeFieldProps = AriaTimeFieldProps<TimeValue> &\n  ThemisTimeFieldCustomProps;\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Variants for the TimeField input container.\n * Applies to the DateInput element wrapping time segments.\n *\n * Size notes:\n * - sm (36px): Desktop-only, AA compliant only (not AAA touch target)\n * - default (44px): AAA compliant, recommended for most use cases\n * - lg (56px): AAA compliant, enhanced touch targets\n */\nexport const timeFieldVariants = cva(\n  [\n    // Base styles\n    'inline-flex items-center rounded-md border',\n    'bg-[var(--content-background)] text-[var(--content-foreground)]',\n    'transition-colors duration-200',\n    // Focus within\n    'focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2',\n    // Disabled\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} gap-0.5`,\n        default: `${FIELD_INPUT_SIZES.default} gap-0.5`,\n        lg: `${FIELD_INPUT_SIZES.lg} gap-1`,\n      },\n      isInvalid: {\n        true: 'border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]',\n        false: 'border-[var(--input-border)] hover:border-[var(--input-border)]/80',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Variants for individual time segment elements.\n * Each segment (hour, minute, second, dayPeriod) uses these styles.\n */\nexport const timeSegmentVariants = cva(\n  [\n    // Base styles\n    'tabular-nums rounded px-0.5',\n    // Focus\n    'focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]',\n    // Placeholder\n    'data-[placeholder]:text-[var(--menu-muted)]',\n    // Literal segments (colons, spaces)\n    'data-[type=literal]:text-[var(--menu-muted)]',\n    // Disabled\n    'data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${TEXT_SIZE_SMALL_SCALE.sm} min-w-[1.5ch]`,\n        default: `${TEXT_SIZE_SMALL_SCALE.default} min-w-[2ch]`,\n        lg: `${TEXT_SIZE_SMALL_SCALE.lg} min-w-[2ch]`,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the TimeField label.\n */\nexport const timeFieldLabelVariants = cva(\n  [\n    'block font-medium text-[var(--content-foreground)]',\n    'mb-1.5',\n    // Required indicator\n    'data-[required]:after:content-[\"*\"] data-[required]:after:ml-0.5',\n    'data-[required]:after:text-[var(--destructive-background)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the description text below the field.\n */\nexport const timeFieldDescriptionVariants = cva(\n  [\n    'text-[var(--menu-muted)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the error message display.\n */\nexport const timeFieldErrorVariants = cva(\n  [\n    'flex items-center gap-1',\n    'text-[var(--destructive-background)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n// ============================================================================\n// Variant Types (from CVA)\n// ============================================================================\n\n/**\n * Variant props for timeFieldVariants CVA function.\n */\nexport type TimeFieldVariantProps = VariantProps<typeof timeFieldVariants>;\n\n/**\n * Variant props for timeSegmentVariants CVA function.\n */\nexport type TimeSegmentVariantProps = VariantProps<typeof timeSegmentVariants>;\n","'use client';\n\n/**\n * TimeField Component\n *\n * A fully accessible time input component built on React Aria's TimeField primitive.\n * Provides keyboard-editable time segments for entering hours, minutes, and seconds.\n *\n * Features:\n * - WCAG 2.2 AAA compliant (default/lg sizes) / AA compliant (sm size)\n * - Configurable granularity (hour, minute, second)\n * - 12-hour and 24-hour format support\n * - Step increment support\n * - Min/max constraints with validation\n * - Form integration with hidden input\n * - Full keyboard navigation\n * - Screen reader accessible\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { forwardRef, type ReactElement } from 'react';\nimport {\n  TimeField as AriaTimeField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { TimeFieldProps } from './TimeField.types';\nimport {\n  timeFieldVariants,\n  timeSegmentVariants,\n  timeFieldLabelVariants,\n  timeFieldDescriptionVariants,\n  timeFieldErrorVariants,\n} from './TimeField.types';\n\n// =============================================================================\n// TimeField Component\n// =============================================================================\n\n/**\n * TimeField component for time input with keyboard-editable segments.\n *\n * @example\n * ```tsx\n * import { TimeField, Time } from '@tribepad/themis/elements/TimeField';\n *\n * // Basic usage\n * <TimeField label=\"Meeting Time\" />\n *\n * // With default value\n * <TimeField\n *   label=\"Start Time\"\n *   defaultValue={new Time(14, 30)}\n * />\n *\n * // 12-hour format with step\n * <TimeField\n *   label=\"Appointment\"\n *   hourCycle={12}\n *   step={15}\n * />\n *\n * // With validation\n * <TimeField\n *   label=\"Office Hours\"\n *   minValue={new Time(9, 0)}\n *   maxValue={new Time(17, 0)}\n *   errorMessage=\"Please select a time within office hours\"\n * />\n * ```\n */\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Variant props\n      size = 'default',\n      // Standard props\n      className,\n      // All other props go to AriaTimeField\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    return (\n      <AriaTimeField\n        ref={ref}\n        className={cn('group flex flex-col gap-1', className)}\n        {...props}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel\n            className={cn(timeFieldLabelVariants({ size }))}\n            data-required={props.isRequired || undefined}\n          >\n            {label}\n          </AriaLabel>\n        )}\n\n        {/* Time Input */}\n        <AriaDateInput\n          className={cn(\n            FIELD_TOUCH_TARGET,\n            timeFieldVariants({\n              size,\n              isInvalid: props.isInvalid,\n            }),\n            'w-fit'\n          )}\n        >\n          {(segment) => (\n            <AriaDateSegment\n              segment={segment}\n              className={cn(timeSegmentVariants({ size }))}\n            />\n          )}\n        </AriaDateInput>\n\n        {/* Description */}\n        {description && (\n          <AriaText\n            slot=\"description\"\n            className={cn(timeFieldDescriptionVariants({ size }))}\n          >\n            {description}\n          </AriaText>\n        )}\n\n        {/* Error Message */}\n        <AriaFieldError className={cn(timeFieldErrorVariants({ size }))}>\n          {errorMessage}\n        </AriaFieldError>\n      </AriaTimeField>\n    );\n  }\n);\n\nTimeField.displayName = 'TimeField';\n"]}

package/dist/elements/TimeField/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import {forwardRef}from'react';import {TimeField,Label,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {z}from'zod';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';export{Time,parseTime}from'@internationalized/date';function e(...s){return twMerge(clsx(s))}var i={sm:"text-xs",default:"text-sm",lg:"text-base"};var l={sm:"h-9",default:"h-10",lg:"h-11"},o={sm:`${l.sm} px-2 text-xs`,default:`${l.default} px-3 text-sm`,lg:`${l.lg} px-4 text-base`},m="min-h-[44px] flex items-center";var N=z.object({value:z.custom().optional(),defaultValue:z.custom().optional(),placeholderValue:z.custom().optional(),granularity:z.enum(["hour","minute","second"]).default("minute"),hourCycle:z.union([z.literal(12),z.literal(24)]).optional(),hideTimeZone:z.boolean().optional(),shouldForceLeadingZeros:z.boolean().optional(),minValue:z.custom().optional(),maxValue:z.custom().optional(),isDisabled:z.boolean().optional(),isReadOnly:z.boolean().optional(),isRequired:z.boolean().optional(),isInvalid:z.boolean().optional(),validate:z.function().optional(),validationBehavior:z.enum(["native","aria"]).default("native"),label:z.string(),description:z.string().optional(),errorMessage:z.union([z.string(),z.function()]).optional(),name:z.string().optional(),size:z.enum(["sm","default","lg"]).default("default"),onChange:z.function().optional(),onFocus:z.function().optional(),onBlur:z.function().optional(),onFocusChange:z.function().optional(),className:z.string().optional(),autoFocus:z.boolean().optional()}),c=cva(["inline-flex items-center rounded-md border","bg-[var(--content-background)] text-[var(--content-foreground)]","transition-colors duration-200","focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"],{variants:{size:{sm:`${o.sm} gap-0.5`,default:`${o.default} gap-0.5`,lg:`${o.lg} gap-1`},isInvalid:{true:"border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]",false:"border-[var(--input-border)] hover:border-[var(--input-border)]/80"}},defaultVariants:{size:"default",isInvalid:false}}),u=cva(["tabular-nums rounded px-0.5","focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]","data-[placeholder]:text-[var(--menu-muted)]","data-[type=literal]:text-[var(--menu-muted)]","data-[disabled]:opacity-50"],{variants:{size:{sm:`${i.sm} min-w-[1.5ch]`,default:`${i.default} min-w-[2ch]`,lg:`${i.lg} min-w-[2ch]`}},defaultVariants:{size:"default"}}),p=cva(["block font-medium text-[var(--content-foreground)]","mb-1.5",'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',"data-[required]:after:text-[var(--destructive-background)]"],{variants:{size:{sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),T=cva(["text-[var(--menu-muted)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),f=cva(["flex items-center gap-1","text-[var(--destructive-background)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}});var E=forwardRef(({label:s,description:x,errorMessage:S,size:a="default",className:g,...d},_)=>jsxs(TimeField,{ref:_,className:e("group flex flex-col gap-1",g),...d,children:[s&&jsx(Label,{className:e(p({size:a})),"data-required":d.isRequired||void 0,children:s}),jsx(DateInput,{className:e(m,c({size:a,isInvalid:d.isInvalid}),"w-fit"),children:I=>jsx(DateSegment,{segment:I,className:e(u({size:a}))})}),x&&jsx(Text,{slot:"description",className:e(T({size:a})),children:x}),jsx(FieldError,{className:e(f({size:a})),children:S})]}));E.displayName="TimeField";export{E as TimeField,N as TimeFieldPropsSchema,T as timeFieldDescriptionVariants,f as timeFieldErrorVariants,p as timeFieldLabelVariants,c as timeFieldVariants,u as timeSegmentVariants};//# sourceMappingURL=index.mjs.map
+import {forwardRef}from'react';import {TimeField,Label,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {z}from'zod';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';export{Time,parseTime}from'@internationalized/date';function e(...s){return twMerge(clsx(s))}var i={sm:"text-xs",default:"text-sm",lg:"text-base"};var d={sm:"h-9",default:"h-10",lg:"h-11"},n={sm:`${d.sm} px-2 text-xs`,default:`${d.default} px-3 text-sm`,lg:`${d.lg} px-4 text-base`},m="min-h-[44px] flex items-center";var L=z.object({value:z.custom().optional(),defaultValue:z.custom().optional(),placeholderValue:z.custom().optional(),granularity:z.enum(["hour","minute","second"]).default("minute"),hourCycle:z.union([z.literal(12),z.literal(24)]).optional(),hideTimeZone:z.boolean().optional(),shouldForceLeadingZeros:z.boolean().optional(),minValue:z.custom().optional(),maxValue:z.custom().optional(),isDisabled:z.boolean().optional(),isReadOnly:z.boolean().optional(),isRequired:z.boolean().optional(),isInvalid:z.boolean().optional(),validate:z.function().optional(),validationBehavior:z.enum(["native","aria"]).default("native"),label:z.string(),description:z.string().optional(),errorMessage:z.union([z.string(),z.function()]).optional(),name:z.string().optional(),size:z.enum(["sm","default","lg"]).default("default"),onChange:z.function().optional(),onFocus:z.function().optional(),onBlur:z.function().optional(),onFocusChange:z.function().optional(),className:z.string().optional(),autoFocus:z.boolean().optional()}),c=cva(["inline-flex items-center rounded-md border","bg-[var(--content-background)] text-[var(--content-foreground)]","transition-colors duration-200","focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"],{variants:{size:{sm:`${n.sm} gap-0.5`,default:`${n.default} gap-0.5`,lg:`${n.lg} gap-1`},isInvalid:{true:"border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]",false:"border-[var(--input-border)] hover:border-[var(--input-border)]/80"}},defaultVariants:{size:"default",isInvalid:false}}),u=cva(["tabular-nums rounded px-0.5","focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]","data-[placeholder]:text-[var(--menu-muted)]","data-[type=literal]:text-[var(--menu-muted)]","data-[disabled]:opacity-50"],{variants:{size:{sm:`${i.sm} min-w-[1.5ch]`,default:`${i.default} min-w-[2ch]`,lg:`${i.lg} min-w-[2ch]`}},defaultVariants:{size:"default"}}),p=cva(["block font-medium text-[var(--content-foreground)]","mb-1.5",'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',"data-[required]:after:text-[var(--destructive-background)]"],{variants:{size:{sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),T=cva(["text-[var(--menu-muted)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),g=cva(["flex items-center gap-1","text-[var(--destructive-background)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}});var _=forwardRef(({label:s,description:x,errorMessage:E,size:a="default",className:f,...l},S)=>jsxs(TimeField,{ref:S,className:e("group flex flex-col gap-1",f),...l,children:[s&&jsx(Label,{className:e(p({size:a})),"data-required":l.isRequired||void 0,children:s}),jsx(DateInput,{className:e(m,c({size:a,isInvalid:l.isInvalid}),"w-fit"),children:I=>jsx(DateSegment,{segment:I,className:e(u({size:a}))})}),x&&jsx(Text,{slot:"description",className:e(T({size:a})),children:x}),jsx(FieldError,{className:e(g({size:a})),children:E})]}));_.displayName="TimeField";export{_ as TimeField,L as TimeFieldPropsSchema,T as timeFieldDescriptionVariants,g as timeFieldErrorVariants,p as timeFieldLabelVariants,c as timeFieldVariants,u as timeSegmentVariants};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/TimeField/TimeField.types.ts","../../../src/elements/TimeField/TimeField.tsx"],"names":["cn","inputs","twMerge","clsx","TEXT_SIZE_SMALL_SCALE","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","TimeFieldPropsSchema","z","timeFieldVariants","cva","timeSegmentVariants","timeFieldLabelVariants","timeFieldDescriptionVariants","timeFieldErrorVariants","TimeField","forwardRef","label","description","errorMessage","size","className","props","ref","jsxs","AriaTimeField","jsx","AriaLabel","AriaDateInput","segment","AriaDateSegment","AriaText","AriaFieldError"],"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 * TimeField Component Types\n *\n * Zod schemas and TypeScript types for the TimeField component.\n * Includes CVA variant definitions for styling.\n *\n * Note: Zod schemas are used for contract tests and developer guardrails,\n * not runtime validation. This follows the established Themis pattern.\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { z } from 'zod';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, TEXT_SIZE_SMALL_SCALE } from '../../styles';\nimport type {\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue,\n} from 'react-aria-components';\n\n// ============================================================================\n// Time Value Types (re-exported for convenience)\n// ============================================================================\n\n/**\n * Union type for all time values supported by the TimeField.\n * - Time: Time only (no date, no timezone)\n * - CalendarDateTime: Date and time (no timezone)\n * - ZonedDateTime: Date, time, and timezone\n */\nexport type { TimeValue } from 'react-aria-components';\n\n// ============================================================================\n// Granularity Type\n// ============================================================================\n\n/**\n * Controls which time segments are displayed.\n * - 'hour': Hour only (+ AM/PM in 12-hour mode)\n * - 'minute': Hour + minute (default)\n * - 'second': Hour + minute + second\n *\n * Note: Millisecond granularity is intentionally excluded - no common UI use case.\n */\nexport type TimeGranularity = 'hour' | 'minute' | 'second';\n\n// ============================================================================\n// Size Variant Type\n// ============================================================================\n\n/**\n * Size variants for TimeField component.\n * - 'sm': Compact size (36px height) - AA compliant only, not AAA\n * - 'default': Standard size (44px height) - AAA compliant\n * - 'lg': Large size (56px height) - AAA compliant\n */\nexport type TimeFieldSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Hour Cycle Type\n// ============================================================================\n\n/**\n * Hour cycle format.\n * - 12: 12-hour format with AM/PM\n * - 24: 24-hour format\n */\nexport type HourCycle = 12 | 24;\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\n/**\n * Zod schema for TimeField props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const TimeFieldPropsSchema = z.object({\n  // Value props\n  value: z.custom<TimeValue>().optional(),\n  defaultValue: z.custom<TimeValue>().optional(),\n  placeholderValue: z.custom<TimeValue>().optional(),\n\n  // Granularity props\n  granularity: z.enum(['hour', 'minute', 'second']).default('minute'),\n  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),\n  hideTimeZone: z.boolean().optional(),\n  shouldForceLeadingZeros: z.boolean().optional(),\n\n  // Constraint props\n  minValue: z.custom<TimeValue>().optional(),\n  maxValue: z.custom<TimeValue>().optional(),\n\n  // State props\n  isDisabled: z.boolean().optional(),\n  isReadOnly: z.boolean().optional(),\n  isRequired: z.boolean().optional(),\n  isInvalid: z.boolean().optional(),\n\n  // Validation props\n  /** Custom validation function that returns an error message or null */\n  validate: z.function().optional(),\n  validationBehavior: z.enum(['native', 'aria']).default('native'),\n\n  // Display props\n  label: z.string(),\n  description: z.string().optional(),\n  /** Error message string or render function */\n  errorMessage: z.union([z.string(), z.function()]).optional(),\n\n  // Form props\n  name: z.string().optional(),\n\n  // Variant props\n  size: z.enum(['sm', 'default', 'lg']).default('default'),\n\n  // Event props\n  /** Called when the time value changes */\n  onChange: z.function().optional(),\n  /** Called when the field gains focus */\n  onFocus: z.function().optional(),\n  /** Called when the field loses focus */\n  onBlur: z.function().optional(),\n  /** Called when focus state changes */\n  onFocusChange: z.function().optional(),\n\n  // Standard props\n  className: z.string().optional(),\n  autoFocus: z.boolean().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Custom props added to TimeField (not from React Aria).\n */\nexport interface ThemisTimeFieldCustomProps {\n  /** Size variant: 'sm', 'default', or 'lg' */\n  size?: TimeFieldSize;\n  /** Field label */\n  label?: string;\n  /** Description text below the field */\n  description?: string;\n  /** Error message when field is invalid */\n  errorMessage?: string;\n}\n\n/**\n * Props for the TimeField component.\n * Uses React Aria's TimeFieldProps directly to ensure correct function types.\n */\nexport type TimeFieldProps = AriaTimeFieldProps<TimeValue> &\n  ThemisTimeFieldCustomProps;\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Variants for the TimeField input container.\n * Applies to the DateInput element wrapping time segments.\n *\n * Size notes:\n * - sm (36px): Desktop-only, AA compliant only (not AAA touch target)\n * - default (44px): AAA compliant, recommended for most use cases\n * - lg (56px): AAA compliant, enhanced touch targets\n */\nexport const timeFieldVariants = cva(\n  [\n    // Base styles\n    'inline-flex items-center rounded-md border',\n    'bg-[var(--content-background)] text-[var(--content-foreground)]',\n    'transition-colors duration-200',\n    // Focus within\n    'focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2',\n    // Disabled\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} gap-0.5`,\n        default: `${FIELD_INPUT_SIZES.default} gap-0.5`,\n        lg: `${FIELD_INPUT_SIZES.lg} gap-1`,\n      },\n      isInvalid: {\n        true: 'border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]',\n        false: 'border-[var(--input-border)] hover:border-[var(--input-border)]/80',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Variants for individual time segment elements.\n * Each segment (hour, minute, second, dayPeriod) uses these styles.\n */\nexport const timeSegmentVariants = cva(\n  [\n    // Base styles\n    'tabular-nums rounded px-0.5',\n    // Focus\n    'focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]',\n    // Placeholder\n    'data-[placeholder]:text-[var(--menu-muted)]',\n    // Literal segments (colons, spaces)\n    'data-[type=literal]:text-[var(--menu-muted)]',\n    // Disabled\n    'data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${TEXT_SIZE_SMALL_SCALE.sm} min-w-[1.5ch]`,\n        default: `${TEXT_SIZE_SMALL_SCALE.default} min-w-[2ch]`,\n        lg: `${TEXT_SIZE_SMALL_SCALE.lg} min-w-[2ch]`,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the TimeField label.\n */\nexport const timeFieldLabelVariants = cva(\n  [\n    'block font-medium text-[var(--content-foreground)]',\n    'mb-1.5',\n    // Required indicator\n    'data-[required]:after:content-[\"*\"] data-[required]:after:ml-0.5',\n    'data-[required]:after:text-[var(--destructive-background)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the description text below the field.\n */\nexport const timeFieldDescriptionVariants = cva(\n  [\n    'text-[var(--menu-muted)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the error message display.\n */\nexport const timeFieldErrorVariants = cva(\n  [\n    'flex items-center gap-1',\n    'text-[var(--destructive-background)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n// ============================================================================\n// Variant Types (from CVA)\n// ============================================================================\n\n/**\n * Variant props for timeFieldVariants CVA function.\n */\nexport type TimeFieldVariantProps = VariantProps<typeof timeFieldVariants>;\n\n/**\n * Variant props for timeSegmentVariants CVA function.\n */\nexport type TimeSegmentVariantProps = VariantProps<typeof timeSegmentVariants>;\n","'use client';\n\n/**\n * TimeField Component\n *\n * A fully accessible time input component built on React Aria's TimeField primitive.\n * Provides keyboard-editable time segments for entering hours, minutes, and seconds.\n *\n * Features:\n * - WCAG 2.2 AAA compliant (default/lg sizes) / AA compliant (sm size)\n * - Configurable granularity (hour, minute, second)\n * - 12-hour and 24-hour format support\n * - Step increment support\n * - Min/max constraints with validation\n * - Form integration with hidden input\n * - Full keyboard navigation\n * - Screen reader accessible\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { forwardRef, type ReactElement } from 'react';\nimport {\n  TimeField as AriaTimeField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { TimeFieldProps } from './TimeField.types';\nimport {\n  timeFieldVariants,\n  timeSegmentVariants,\n  timeFieldLabelVariants,\n  timeFieldDescriptionVariants,\n  timeFieldErrorVariants,\n} from './TimeField.types';\n\n// =============================================================================\n// TimeField Component\n// =============================================================================\n\n/**\n * TimeField component for time input with keyboard-editable segments.\n *\n * @example\n * ```tsx\n * import { TimeField, Time } from '@tribepad/themis/elements/TimeField';\n *\n * // Basic usage\n * <TimeField label=\"Meeting Time\" />\n *\n * // With default value\n * <TimeField\n *   label=\"Start Time\"\n *   defaultValue={new Time(14, 30)}\n * />\n *\n * // 12-hour format with step\n * <TimeField\n *   label=\"Appointment\"\n *   hourCycle={12}\n *   step={15}\n * />\n *\n * // With validation\n * <TimeField\n *   label=\"Office Hours\"\n *   minValue={new Time(9, 0)}\n *   maxValue={new Time(17, 0)}\n *   errorMessage=\"Please select a time within office hours\"\n * />\n * ```\n */\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Variant props\n      size = 'default',\n      // Standard props\n      className,\n      // All other props go to AriaTimeField\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    return (\n      <AriaTimeField\n        ref={ref}\n        className={cn('group flex flex-col gap-1', className)}\n        {...props}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel\n            className={cn(timeFieldLabelVariants({ size }))}\n            data-required={props.isRequired || undefined}\n          >\n            {label}\n          </AriaLabel>\n        )}\n\n        {/* Time Input */}\n        <AriaDateInput\n          className={cn(\n            FIELD_TOUCH_TARGET,\n            timeFieldVariants({\n              size,\n              isInvalid: props.isInvalid,\n            }),\n            'w-fit'\n          )}\n        >\n          {(segment) => (\n            <AriaDateSegment\n              segment={segment}\n              className={cn(timeSegmentVariants({ size }))}\n            />\n          )}\n        </AriaDateInput>\n\n        {/* Description */}\n        {description && (\n          <AriaText\n            slot=\"description\"\n            className={cn(timeFieldDescriptionVariants({ size }))}\n          >\n            {description}\n          </AriaText>\n        )}\n\n        {/* Error Message */}\n        <AriaFieldError className={cn(timeFieldErrorVariants({ size }))}>\n          {errorMessage}\n        </AriaFieldError>\n      </AriaTimeField>\n    );\n  }\n);\n\nTimeField.displayName = 'TimeField';\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/shared-variants.ts","../../../src/elements/TimeField/TimeField.types.ts","../../../src/elements/TimeField/TimeField.tsx"],"names":["cn","inputs","twMerge","clsx","TEXT_SIZE_SMALL_SCALE","FIELD_HEIGHTS","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","TimeFieldPropsSchema","z","timeFieldVariants","cva","timeSegmentVariants","timeFieldLabelVariants","timeFieldDescriptionVariants","timeFieldErrorVariants","TimeField","forwardRef","label","description","errorMessage","size","className","props","ref","jsxs","AriaTimeField","jsx","AriaLabel","AriaDateInput","segment","AriaDateSegment","AriaText","AriaFieldError"],"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 * Directional slide animations for edge-anchored drawers (Modal `position` variant).\n *\n * Unitless `slide-in-from-*` / `slide-out-to-*` translate the full extent of the\n * element (100%), so the drawer slides all the way in from / out to its anchored\n * edge — distinct from `MODAL_SLIDE_*` above, which is the small 1rem nudge used by\n * the centred `slide` animation. No `fade` is paired here: a drawer slides, it\n * does not fade. Honour `prefers-reduced-motion` via REDUCED_MOTION on the element.\n */\nexport const MODAL_SLIDE_IN_LEFT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-left',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_LEFT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-left',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_RIGHT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-right',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_RIGHT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-right',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_TOP = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-top',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_TOP = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-top',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_BOTTOM = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-bottom',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_BOTTOM = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-bottom',\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 * TimeField Component Types\n *\n * Zod schemas and TypeScript types for the TimeField component.\n * Includes CVA variant definitions for styling.\n *\n * Note: Zod schemas are used for contract tests and developer guardrails,\n * not runtime validation. This follows the established Themis pattern.\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { z } from 'zod';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { FIELD_INPUT_SIZES, TEXT_SIZE_SMALL_SCALE } from '../../styles';\nimport type {\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue,\n} from 'react-aria-components';\n\n// ============================================================================\n// Time Value Types (re-exported for convenience)\n// ============================================================================\n\n/**\n * Union type for all time values supported by the TimeField.\n * - Time: Time only (no date, no timezone)\n * - CalendarDateTime: Date and time (no timezone)\n * - ZonedDateTime: Date, time, and timezone\n */\nexport type { TimeValue } from 'react-aria-components';\n\n// ============================================================================\n// Granularity Type\n// ============================================================================\n\n/**\n * Controls which time segments are displayed.\n * - 'hour': Hour only (+ AM/PM in 12-hour mode)\n * - 'minute': Hour + minute (default)\n * - 'second': Hour + minute + second\n *\n * Note: Millisecond granularity is intentionally excluded - no common UI use case.\n */\nexport type TimeGranularity = 'hour' | 'minute' | 'second';\n\n// ============================================================================\n// Size Variant Type\n// ============================================================================\n\n/**\n * Size variants for TimeField component.\n * - 'sm': Compact size (36px height) - AA compliant only, not AAA\n * - 'default': Standard size (44px height) - AAA compliant\n * - 'lg': Large size (56px height) - AAA compliant\n */\nexport type TimeFieldSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Hour Cycle Type\n// ============================================================================\n\n/**\n * Hour cycle format.\n * - 12: 12-hour format with AM/PM\n * - 24: 24-hour format\n */\nexport type HourCycle = 12 | 24;\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\n/**\n * Zod schema for TimeField props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const TimeFieldPropsSchema = z.object({\n  // Value props\n  value: z.custom<TimeValue>().optional(),\n  defaultValue: z.custom<TimeValue>().optional(),\n  placeholderValue: z.custom<TimeValue>().optional(),\n\n  // Granularity props\n  granularity: z.enum(['hour', 'minute', 'second']).default('minute'),\n  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),\n  hideTimeZone: z.boolean().optional(),\n  shouldForceLeadingZeros: z.boolean().optional(),\n\n  // Constraint props\n  minValue: z.custom<TimeValue>().optional(),\n  maxValue: z.custom<TimeValue>().optional(),\n\n  // State props\n  isDisabled: z.boolean().optional(),\n  isReadOnly: z.boolean().optional(),\n  isRequired: z.boolean().optional(),\n  isInvalid: z.boolean().optional(),\n\n  // Validation props\n  /** Custom validation function that returns an error message or null */\n  validate: z.function().optional(),\n  validationBehavior: z.enum(['native', 'aria']).default('native'),\n\n  // Display props\n  label: z.string(),\n  description: z.string().optional(),\n  /** Error message string or render function */\n  errorMessage: z.union([z.string(), z.function()]).optional(),\n\n  // Form props\n  name: z.string().optional(),\n\n  // Variant props\n  size: z.enum(['sm', 'default', 'lg']).default('default'),\n\n  // Event props\n  /** Called when the time value changes */\n  onChange: z.function().optional(),\n  /** Called when the field gains focus */\n  onFocus: z.function().optional(),\n  /** Called when the field loses focus */\n  onBlur: z.function().optional(),\n  /** Called when focus state changes */\n  onFocusChange: z.function().optional(),\n\n  // Standard props\n  className: z.string().optional(),\n  autoFocus: z.boolean().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Custom props added to TimeField (not from React Aria).\n */\nexport interface ThemisTimeFieldCustomProps {\n  /** Size variant: 'sm', 'default', or 'lg' */\n  size?: TimeFieldSize;\n  /** Field label */\n  label?: string;\n  /** Description text below the field */\n  description?: string;\n  /** Error message when field is invalid */\n  errorMessage?: string;\n}\n\n/**\n * Props for the TimeField component.\n * Uses React Aria's TimeFieldProps directly to ensure correct function types.\n */\nexport type TimeFieldProps = AriaTimeFieldProps<TimeValue> &\n  ThemisTimeFieldCustomProps;\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Variants for the TimeField input container.\n * Applies to the DateInput element wrapping time segments.\n *\n * Size notes:\n * - sm (36px): Desktop-only, AA compliant only (not AAA touch target)\n * - default (44px): AAA compliant, recommended for most use cases\n * - lg (56px): AAA compliant, enhanced touch targets\n */\nexport const timeFieldVariants = cva(\n  [\n    // Base styles\n    'inline-flex items-center rounded-md border',\n    'bg-[var(--content-background)] text-[var(--content-foreground)]',\n    'transition-colors duration-200',\n    // Focus within\n    'focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2',\n    // Disabled\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${FIELD_INPUT_SIZES.sm} gap-0.5`,\n        default: `${FIELD_INPUT_SIZES.default} gap-0.5`,\n        lg: `${FIELD_INPUT_SIZES.lg} gap-1`,\n      },\n      isInvalid: {\n        true: 'border-[var(--destructive-background)] focus-within:ring-[var(--destructive-background)]',\n        false: 'border-[var(--input-border)] hover:border-[var(--input-border)]/80',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Variants for individual time segment elements.\n * Each segment (hour, minute, second, dayPeriod) uses these styles.\n */\nexport const timeSegmentVariants = cva(\n  [\n    // Base styles\n    'tabular-nums rounded px-0.5',\n    // Focus\n    'focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]',\n    // Placeholder\n    'data-[placeholder]:text-[var(--menu-muted)]',\n    // Literal segments (colons, spaces)\n    'data-[type=literal]:text-[var(--menu-muted)]',\n    // Disabled\n    'data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: `${TEXT_SIZE_SMALL_SCALE.sm} min-w-[1.5ch]`,\n        default: `${TEXT_SIZE_SMALL_SCALE.default} min-w-[2ch]`,\n        lg: `${TEXT_SIZE_SMALL_SCALE.lg} min-w-[2ch]`,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the TimeField label.\n */\nexport const timeFieldLabelVariants = cva(\n  [\n    'block font-medium text-[var(--content-foreground)]',\n    'mb-1.5',\n    // Required indicator\n    'data-[required]:after:content-[\"*\"] data-[required]:after:ml-0.5',\n    'data-[required]:after:text-[var(--destructive-background)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the description text below the field.\n */\nexport const timeFieldDescriptionVariants = cva(\n  [\n    'text-[var(--menu-muted)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the error message display.\n */\nexport const timeFieldErrorVariants = cva(\n  [\n    'flex items-center gap-1',\n    'text-[var(--destructive-background)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n// ============================================================================\n// Variant Types (from CVA)\n// ============================================================================\n\n/**\n * Variant props for timeFieldVariants CVA function.\n */\nexport type TimeFieldVariantProps = VariantProps<typeof timeFieldVariants>;\n\n/**\n * Variant props for timeSegmentVariants CVA function.\n */\nexport type TimeSegmentVariantProps = VariantProps<typeof timeSegmentVariants>;\n","'use client';\n\n/**\n * TimeField Component\n *\n * A fully accessible time input component built on React Aria's TimeField primitive.\n * Provides keyboard-editable time segments for entering hours, minutes, and seconds.\n *\n * Features:\n * - WCAG 2.2 AAA compliant (default/lg sizes) / AA compliant (sm size)\n * - Configurable granularity (hour, minute, second)\n * - 12-hour and 24-hour format support\n * - Step increment support\n * - Min/max constraints with validation\n * - Form integration with hidden input\n * - Full keyboard navigation\n * - Screen reader accessible\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { forwardRef, type ReactElement } from 'react';\nimport {\n  TimeField as AriaTimeField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport { FIELD_TOUCH_TARGET } from '../../styles';\nimport type { TimeFieldProps } from './TimeField.types';\nimport {\n  timeFieldVariants,\n  timeSegmentVariants,\n  timeFieldLabelVariants,\n  timeFieldDescriptionVariants,\n  timeFieldErrorVariants,\n} from './TimeField.types';\n\n// =============================================================================\n// TimeField Component\n// =============================================================================\n\n/**\n * TimeField component for time input with keyboard-editable segments.\n *\n * @example\n * ```tsx\n * import { TimeField, Time } from '@tribepad/themis/elements/TimeField';\n *\n * // Basic usage\n * <TimeField label=\"Meeting Time\" />\n *\n * // With default value\n * <TimeField\n *   label=\"Start Time\"\n *   defaultValue={new Time(14, 30)}\n * />\n *\n * // 12-hour format with step\n * <TimeField\n *   label=\"Appointment\"\n *   hourCycle={12}\n *   step={15}\n * />\n *\n * // With validation\n * <TimeField\n *   label=\"Office Hours\"\n *   minValue={new Time(9, 0)}\n *   maxValue={new Time(17, 0)}\n *   errorMessage=\"Please select a time within office hours\"\n * />\n * ```\n */\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Variant props\n      size = 'default',\n      // Standard props\n      className,\n      // All other props go to AriaTimeField\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    return (\n      <AriaTimeField\n        ref={ref}\n        className={cn('group flex flex-col gap-1', className)}\n        {...props}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel\n            className={cn(timeFieldLabelVariants({ size }))}\n            data-required={props.isRequired || undefined}\n          >\n            {label}\n          </AriaLabel>\n        )}\n\n        {/* Time Input */}\n        <AriaDateInput\n          className={cn(\n            FIELD_TOUCH_TARGET,\n            timeFieldVariants({\n              size,\n              isInvalid: props.isInvalid,\n            }),\n            'w-fit'\n          )}\n        >\n          {(segment) => (\n            <AriaDateSegment\n              segment={segment}\n              className={cn(timeSegmentVariants({ size }))}\n            />\n          )}\n        </AriaDateInput>\n\n        {/* Description */}\n        {description && (\n          <AriaText\n            slot=\"description\"\n            className={cn(timeFieldDescriptionVariants({ size }))}\n          >\n            {description}\n          </AriaText>\n        )}\n\n        {/* Error Message */}\n        <AriaFieldError className={cn(timeFieldErrorVariants({ size }))}>\n          {errorMessage}\n        </AriaFieldError>\n      </AriaTimeField>\n    );\n  }\n);\n\nTimeField.displayName = 'TimeField';\n"]}

package/dist/elements/Wizard/index.js

@@ -1,3 +1,3 @@
 "use client";
-'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime'),lucideReact=require('lucide-react'),reactAriaComponents=require('react-aria-components'),zod=require('zod');function v(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var rt=react.createContext(null);function W(){let n=react.useContext(rt);if(!n)throw new Error("Wizard compound components must be used within <Wizard>");return n}var B=["motion-reduce:transition-none","motion-reduce:animate-none"],ot=["transition-colors","duration-200"];function G(...n){return n.flatMap(t=>Array.isArray(t)?[...t]:[t])}var nt=classVarianceAuthority.cva("flex min-h-0 flex-1 flex-col"),st=classVarianceAuthority.cva("flex min-h-0 flex-1 flex-col lg:flex-row"),dt=classVarianceAuthority.cva("flex min-w-0 flex-1 justify-center gap-8 overflow-y-auto bg-[var(--page-background)] p-6"),pt=classVarianceAuthority.cva("hidden w-56 shrink-0 pt-2 lg:block"),lt=classVarianceAuthority.cva("flex w-full max-w-2xl flex-col"),ct=classVarianceAuthority.cva("mt-3 text-center text-xs text-[var(--menu-muted)]"),ut=classVarianceAuthority.cva("hidden w-80 shrink-0 border-l border-[var(--border)] bg-[var(--accent-background)] p-6 xl:block"),mt=classVarianceAuthority.cva("flex flex-col gap-2"),ft=classVarianceAuthority.cva("text-xs font-semibold uppercase tracking-wide text-[var(--primary)]"),gt=classVarianceAuthority.cva("text-sm font-bold text-[var(--content-foreground)]"),xt=classVarianceAuthority.cva("mt-6 flex flex-col"),vt=classVarianceAuthority.cva("flex items-start"),zt=classVarianceAuthority.cva("flex w-11 shrink-0 flex-col items-center"),bt=classVarianceAuthority.cva(G("flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold",ot,B),{variants:{state:{completed:"bg-[var(--primary)] text-[var(--primary-foreground)]",current:"border-2 border-[var(--primary)] bg-[var(--content-background)] text-[var(--primary)]",upcoming:"border border-[var(--border)] bg-[var(--content-background)] text-[var(--menu-muted)]"}},defaultVariants:{state:"upcoming"}}),St=classVarianceAuthority.cva(G("my-0.5 h-5 w-0.5",ot,B),{variants:{completed:{true:"bg-[var(--primary)]",false:"bg-[var(--border)]"}},defaultVariants:{completed:false}}),ht=classVarianceAuthority.cva("flex min-h-11 items-center pl-3"),wt=classVarianceAuthority.cva("flex flex-col justify-center"),Nt=classVarianceAuthority.cva("text-sm",{variants:{state:{completed:"font-medium text-[var(--content-foreground)]",current:"font-semibold text-[var(--content-foreground)]",upcoming:"text-[var(--menu-muted)]"}},defaultVariants:{state:"upcoming"}}),Wt=classVarianceAuthority.cva("text-xs text-[var(--primary)]"),yt=classVarianceAuthority.cva("flex flex-col gap-6"),Vt=classVarianceAuthority.cva("flex items-start gap-4"),Ct=classVarianceAuthority.cva("flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--accent-background)] text-[var(--primary)]"),Lt=classVarianceAuthority.cva("text-lg font-bold text-[var(--content-foreground)] focus:outline-none"),Et=classVarianceAuthority.cva("mt-1 text-sm text-[var(--menu-muted)]"),$=classVarianceAuthority.cva("rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6 text-[var(--content-foreground)]"),Rt=classVarianceAuthority.cva("mt-4 flex items-center justify-between border-t border-[var(--border)] pt-4"),Pt=classVarianceAuthority.cva(""),Tt=classVarianceAuthority.cva("flex items-center gap-3"),It=classVarianceAuthority.cva("flex flex-col items-center gap-1.5 py-3 lg:hidden"),_t=classVarianceAuthority.cva("flex items-center justify-center gap-2"),At=classVarianceAuthority.cva(G("h-2 rounded-full transition-all duration-200",B),{variants:{state:{completed:"w-2 bg-[var(--primary)] opacity-60",current:"w-8 bg-[var(--primary)]",upcoming:"w-2 bg-[var(--border)]"}},defaultVariants:{state:"upcoming"}}),kt=classVarianceAuthority.cva("text-xs font-medium text-[var(--menu-muted)]"),Mt=classVarianceAuthority.cva("text-[var(--content-foreground)]"),U=classVarianceAuthority.cva("sr-only");var F=react.forwardRef(function({children:t,stepper:c,preview:s,helpText:u,className:x,"data-testid":r="wizard-layout"},i){return jsxRuntime.jsxs("div",{ref:i,className:v(st(),x),"data-testid":r,children:[jsxRuntime.jsxs("div",{className:dt(),children:[c?jsxRuntime.jsx("nav",{className:pt(),"aria-label":"Wizard steps","data-testid":`${r}-stepper-slot`,children:c}):null,jsxRuntime.jsxs("div",{className:lt(),children:[t,u?jsxRuntime.jsx("p",{className:ct(),children:u}):null]})]}),s?jsxRuntime.jsx("aside",{className:ut(),"aria-hidden":"true","data-testid":`${r}-preview`,children:s}):null]})});F.displayName="Wizard.Layout";var qt=classVarianceAuthority.cva("inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",{variants:{fullWidth:{true:"w-full",false:""},inVerticalGroup:{true:"items-stretch",false:"items-center"}},defaultVariants:{fullWidth:false,inVerticalGroup:false}}),Xt=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-normal ring-offset-background motion-safe:transition-transform motion-safe:duration-200 motion-safe:[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",{variants:{variant:{default:"bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] hover:-translate-y-1",destructive:"bg-[var(--destructive-background)] text-[var(--destructive-foreground)] hover:bg-[var(--destructive-background-hover,var(--destructive-background))] motion-safe:hover:btn-warn-shake",outline:"border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)]",secondary:"bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:bg-[var(--secondary-hover,var(--secondary))]",ghost:"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",link:"text-[var(--text-link)] underline underline-offset-4 hover:bg-[var(--accent)] hover:text-[var(--text-link-hover)]"},fullWidth:{true:"w-full",false:""},visualSize:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3 text-xs",lg:"h-11 rounded-md px-6 text-base",icon:"h-10 w-10",dot:"h-5 w-5 rounded-full p-0 min-h-0 min-w-0"},paywall:{true:"!bg-[var(--paywall)] !text-[var(--paywall-foreground)] hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",false:""}},defaultVariants:{variant:"default",visualSize:"default",paywall:false}});var Ot="data-[pressed]:scale-[0.97]";var Y="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",j="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";var te=react.createContext(null);te.displayName="ButtonGroupContext";function ee(){return react.useContext(te)}var ae=react.createContext(null);ae.displayName="ButtonGroupItemContext";function re(){return react.useContext(ae)}classVarianceAuthority.cva("inline-flex items-center gap-0",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col w-full"}},defaultVariants:{orientation:"horizontal"}});var ie=classVarianceAuthority.cva("",{variants:{orientation:{horizontal:"min-w-[44px]",vertical:"flex min-h-[44px]"},position:{first:"",middle:"",last:"",only:""}},compoundVariants:[{orientation:"horizontal",position:"first",className:"rounded-r-none border-r-0"},{orientation:"horizontal",position:"middle",className:"rounded-none border-r-0"},{orientation:"horizontal",position:"last",className:"rounded-l-none"},{orientation:"vertical",position:"first",className:"rounded-b-none border-b-0"},{orientation:"vertical",position:"middle",className:"rounded-none border-b-0"},{orientation:"vertical",position:"last",className:"rounded-t-none"}],defaultVariants:{orientation:"horizontal",position:"only"}});classVarianceAuthority.cva("bg-[var(--border)]",{variants:{orientation:{horizontal:"w-px h-6 mx-1",vertical:"h-px w-full my-1"}},defaultVariants:{orientation:"horizontal"}});var I=react.memo(react.forwardRef(({className:n,buttonVisualClassName:t,variant:c,size:s,visualSize:u,fullWidth:x,loading:r=false,loadingText:i="Loading...",shortcut:z,children:m,isDisabled:f,paywall:p=false,paywallRedirect:g,paywallDescription:o,onPress:l,...d},b)=>{let w=react.useId(),S=ee(),y=re(),E=c??S?.variant??"default",C=s??S?.size,A=f??S?.isDisabled??false,R=S?.orientation==="vertical",P=x||R,k=y?ie({orientation:S?.orientation??"horizontal",position:y.position}):"",T=u??C??"default";return process.env.NODE_ENV!=="production"&&(T==="dot"||T==="icon")&&!d["aria-label"]&&!m&&console.warn('[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'),jsxRuntime.jsx(reactAriaComponents.Button,{ref:b,isDisabled:A||r||void 0,"aria-disabled":p?true:void 0,"aria-describedby":p?w:void 0,onPress:O=>{if(p){g&&window.open(g,"_blank","noopener,noreferrer");return}l?.(O);},className:v(qt({fullWidth:P,inVerticalGroup:R}),n),...d,children:O=>jsxRuntime.jsxs("span",{className:v(Xt({variant:E,visualSize:T,paywall:p,fullWidth:P}),k,t,Ot,"",Y,j),"data-pressed":O.isPressed||void 0,children:[r&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(lucideReact.Loader2,{className:"motion-safe:animate-spin","aria-hidden":"true"}),jsxRuntime.jsx("span",{className:"sr-only","aria-live":"polite",children:i})]}),!r&&m,p&&jsxRuntime.jsx(lucideReact.Zap,{"data-testid":"zap-icon","aria-hidden":"true",className:"ml-1"}),p&&jsxRuntime.jsxs("span",{id:w,className:"sr-only",children:["Premium feature: ",o||"Upgrade required to access this feature"]}),O.isFocusVisible&&z&&jsxRuntime.jsx("kbd",{className:"ml-auto hidden text-xs opacity-60 lg:inline",children:z})]})})}));I.displayName="Button";var Z=react.forwardRef(function({sectionLabel:t,sectionNumber:c,totalSections:s,allowClickOnCompleted:u=true,className:x,"aria-label":r,"data-testid":i="wizard-stepper"},z){let{currentStepIndex:m,steps:f,onStepChange:p,isLoading:g}=W();return jsxRuntime.jsxs("div",{ref:z,className:v(mt(),x),"aria-label":r,"data-testid":i,children:[t&&c!==void 0&&s!==void 0?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("p",{className:ft(),children:["Section ",c," of ",s]}),jsxRuntime.jsx("h2",{className:gt(),children:t})]}):null,jsxRuntime.jsx("ol",{className:xt(),children:f.map((o,l)=>{let d=l<m,b=l===m,w=d?"completed":b?"current":"upcoming",S=d&&u&&!g,y=l===f.length-1,E=bt({state:w}),C=jsxRuntime.jsx("span",{className:E,"aria-hidden":"true",children:d?jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"}):jsxRuntime.jsx("span",{children:l+1})});return jsxRuntime.jsx("li",{"data-testid":`${i}-item-${o.id}`,"aria-current":b?"step":void 0,children:jsxRuntime.jsxs("div",{className:vt(),children:[jsxRuntime.jsxs("div",{className:zt(),children:[S?jsxRuntime.jsx(I,{variant:"ghost",visualSize:"icon",buttonVisualClassName:"rounded-full","aria-label":`Go back to ${o.label}`,onPress:()=>p({index:l,id:o.id,label:o.label,reason:"jump"}),"data-testid":`${i}-button-${o.id}`,children:C}):jsxRuntime.jsx("span",{className:"flex h-11 w-11 items-center justify-center",children:C}),y?null:jsxRuntime.jsx("span",{className:St({completed:d}),"aria-hidden":"true"})]}),jsxRuntime.jsxs("div",{className:ht(),children:[jsxRuntime.jsxs("span",{className:wt(),children:[jsxRuntime.jsx("span",{className:Nt({state:w}),children:o.label}),b?jsxRuntime.jsx("span",{className:Wt(),children:"Current step"}):null]}),b?null:jsxRuntime.jsx("span",{className:"sr-only",children:d?"(completed)":"(upcoming)"})]})]})},o.id)})})]})});Z.displayName="Wizard.Stepper";var Pe=react.Activity??function({children:t,mode:c}){return jsxRuntime.jsx("div",{"data-activity-mode":c,children:t})};function Te(n){if(!react.isValidElement(n))return  false;let t=n.type;return typeof t=="string"?false:t?.displayName==="Wizard.Step"}var X=react.forwardRef(function({children:t,className:c,"data-testid":s="wizard-content",preserveState:u=false},x){let{currentStepId:r,steps:i}=W(),z=react.Children.toArray(t).filter(Te);if(process.env.NODE_ENV!=="production"){let f=z.map(l=>l.props.id),p=i.map(l=>l.id),g=p.filter(l=>!f.includes(l)),o=f.filter(l=>!p.includes(l));(g.length>0||o.length>0)&&console.warn("[Wizard] Wizard.Step children do not match `steps` descriptors. "+(g.length?`Missing steps: ${g.join(", ")}. `:"")+(o.length?`Unknown step ids: ${o.join(", ")}.`:""));}if(u)return jsxRuntime.jsx("div",{ref:x,className:v($(),c),"data-testid":s,children:z.map(f=>jsxRuntime.jsx(Pe,{mode:f.props.id===r?"visible":"hidden",children:f},f.props.id))});let m=z.find(f=>f.props.id===r)??null;return jsxRuntime.jsx("div",{ref:x,className:v($(),c),"data-testid":s,children:m})});X.displayName="Wizard.Content";var Q=react.forwardRef(function({id:t,icon:c,children:s,className:u,"data-testid":x},r){let{steps:i,currentStepIndex:z,registerStepHeading:m,stepHeadingLevel:f}=W(),p=i.find(S=>S.id===t),g=p?.label??t,o=p?.description,l=react.useId(),d=react.useId(),b=x??`wizard-step-${t}`,w=f;return jsxRuntime.jsxs("section",{ref:r,className:v(yt(),u),"aria-labelledby":l,"aria-describedby":o?d:void 0,"data-testid":b,"data-wizard-step-id":t,"data-wizard-step-index":z,children:[jsxRuntime.jsxs("div",{className:Vt(),children:[c?jsxRuntime.jsx("span",{className:Ct(),"aria-hidden":"true",children:c}):null,jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(w,{id:l,ref:m,tabIndex:-1,className:Lt(),children:g}),o?jsxRuntime.jsx("p",{id:d,className:Et(),children:o}):null]})]}),jsxRuntime.jsx("div",{children:s})]})});Q.displayName="Wizard.Step";var D={back:"Back",skip:"Skip for now",next:"Next",start:"Next",finish:"Finish"};function H(n,t){return typeof n=="function"?n(t):n}var et=react.forwardRef(function({labels:t,showSkip:c=false,onBack:s,onNext:u,onSkip:x,className:r,"data-testid":i="wizard-navigation"},z){let{currentStepIndex:m,currentStepId:f,totalSteps:p,steps:g,isLoading:o,onStepChange:l}=W(),d={index:m,total:p,id:f},b={back:H(t?.back??D.back,d),skip:H(t?.skip??D.skip,d),next:H(t?.next??D.next,d),start:H(t?.start??t?.next??D.start,d),finish:H(t?.finish??D.finish,d)},w=m===0,S=m===p-1,y=m===p-2,E=!w&&!S,C=!S,A=c&&!w&&!S&&!y,R=w?b.start:y?b.finish:b.next,P=()=>{let h=Math.max(0,m-1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"back"}),s?.();},k=()=>{let h=Math.min(p-1,m+1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"next"}),u?.();},T=()=>{let h=Math.min(p-1,m+1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"skip"}),x?.();};return jsxRuntime.jsxs("div",{ref:z,className:v(Rt(),r),"data-testid":i,children:[jsxRuntime.jsx("div",{className:Pt(),children:E?jsxRuntime.jsxs(I,{variant:"secondary",onPress:P,isDisabled:o,"data-testid":`${i}-back`,children:[jsxRuntime.jsx(lucideReact.ArrowLeft,{className:"mr-1 h-4 w-4 rtl:rotate-180","aria-hidden":"true"}),b.back]}):null}),jsxRuntime.jsxs("div",{className:Tt(),children:[A?jsxRuntime.jsx(I,{variant:"ghost",onPress:T,isDisabled:o,"data-testid":`${i}-skip`,children:b.skip}):null,C?jsxRuntime.jsxs(I,{variant:"default",onPress:k,isDisabled:o,loading:o,"data-testid":`${i}-next`,children:[R,y?null:jsxRuntime.jsx(lucideReact.ArrowRight,{className:"ml-1 h-4 w-4 rtl:rotate-180","aria-hidden":"true"})]}):null]})]})});et.displayName="Wizard.Navigation";var at=react.forwardRef(function({className:t,"data-testid":c="wizard-mobile-progress"},s){let{currentStepIndex:u,steps:x,totalSteps:r}=W(),i=x[u]?.label,z=i?`Step ${u+1} of ${r}: ${i}`:`Step ${u+1} of ${r}`;return jsxRuntime.jsxs("div",{ref:s,className:v(It(),t),role:"progressbar","aria-label":"Wizard progress","aria-valuemin":1,"aria-valuemax":r,"aria-valuenow":u+1,"aria-valuetext":z,"data-testid":c,children:[jsxRuntime.jsx("div",{className:_t(),children:x.map((m,f)=>{let p=f<u?"completed":f===u?"current":"upcoming";return jsxRuntime.jsx("span",{className:At({state:p}),"aria-hidden":"true","data-testid":`${c}-dot-${m.id}`},m.id)})}),i?jsxRuntime.jsxs("p",{className:kt(),"aria-hidden":"true","data-testid":`${c}-caption`,children:["Step ",u+1," of ",r," \xB7 ",jsxRuntime.jsx("span",{className:Mt(),children:i})]}):null]})});at.displayName="Wizard.MobileProgress";var Be=(n,t)=>`Step ${n} of ${t}`,pe=react.forwardRef(function({children:t,currentStep:c,steps:s,onStepChange:u,isLoading:x=false,errors:r,announceTemplate:i=Be,stepHeadingLevel:z="h3",className:m,id:f,"aria-label":p,"aria-labelledby":g,"data-testid":o="wizard"},l){let d=Math.min(Math.max(c,0),Math.max(s.length-1,0)),b=s[d],w=b?.id??"",S=b?.label??"",[y,E]=react.useState("");react.useEffect(()=>{s.length!==0&&E(i(d+1,s.length,S));},[d,s.length,S,i]);let[C,A]=react.useState("");react.useEffect(()=>{if(!r||r.length===0){A("");return}A(r.join(". "));},[r]);let R=react.useRef(null),P=react.useRef(true),k=react.useCallback(h=>{R.current=h;},[]);react.useEffect(()=>{if(P.current){P.current=false;return}let h=requestAnimationFrame(()=>{R.current?.focus();});return ()=>cancelAnimationFrame(h)},[d]);let T=react.useMemo(()=>({currentStepIndex:d,currentStepId:w,steps:s,totalSteps:s.length,isLoading:x,errors:r??[],announceTemplate:i,stepHeadingLevel:z,onStepChange:u,registerStepHeading:k}),[d,w,s,x,r,i,z,u,k]);return jsxRuntime.jsx(rt.Provider,{value:T,children:jsxRuntime.jsxs("div",{ref:l,id:f,className:v(nt(),m),"aria-label":p,"aria-labelledby":g,"data-testid":o,"data-wizard-step":d,children:[t,jsxRuntime.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:U(),"data-testid":`${o}-live-polite`,children:y}),jsxRuntime.jsx("div",{role:"alert","aria-live":"assertive","aria-atomic":"true",className:U(),"data-testid":`${o}-live-assertive`,children:C})]})})});pe.displayName="Wizard";var Ge=Object.assign(pe,{Layout:F,Stepper:Z,Content:X,Step:Q,Navigation:et,MobileProgress:at});var L=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 Ue=zod.z.enum(["next","back","skip","jump"]),le=zod.z.object({id:zod.z.string().min(1),label:zod.z.string().min(1),description:zod.z.string().optional()}),Fe=zod.z.enum(["h2","h3","h4","h5","h6"]),Ye=L.extend({children:zod.z.custom(),currentStep:zod.z.number().int().min(0),steps:zod.z.array(le).min(1),onStepChange:zod.z.custom(),isLoading:zod.z.boolean().optional().default(false),errors:zod.z.array(zod.z.string()).optional(),announceTemplate:zod.z.custom().optional(),stepHeadingLevel:Fe.optional().default("h3")}),je=L.extend({children:zod.z.custom(),preview:zod.z.custom().optional(),helpText:zod.z.string().optional()}),Ze=L.extend({sectionLabel:zod.z.string().optional(),sectionNumber:zod.z.number().int().min(1).optional(),totalSections:zod.z.number().int().min(1).optional(),allowClickOnCompleted:zod.z.boolean().optional().default(true)}),qe=L.extend({id:zod.z.string().min(1),children:zod.z.custom(),icon:zod.z.custom().optional()}),Xe=L.extend({children:zod.z.custom(),preserveState:zod.z.boolean().optional().default(false)}),Ke=L.extend({labels:zod.z.custom().optional(),showSkip:zod.z.boolean().optional().default(false),onBack:zod.z.custom().optional(),onNext:zod.z.custom().optional(),onSkip:zod.z.custom().optional()}),Qe=L.extend({});exports.Wizard=Ge;exports.WizardChangeReasonSchema=Ue;exports.WizardContent=X;exports.WizardContentPropsSchema=Xe;exports.WizardLayout=F;exports.WizardLayoutPropsSchema=je;exports.WizardMobileProgress=at;exports.WizardMobileProgressPropsSchema=Qe;exports.WizardNavigation=et;exports.WizardNavigationPropsSchema=Ke;exports.WizardPropsSchema=Ye;exports.WizardStep=Q;exports.WizardStepDescriptorSchema=le;exports.WizardStepPropsSchema=qe;exports.WizardStepper=Z;exports.WizardStepperPropsSchema=Ze;exports.useWizardContext=W;exports.wizardContentCardVariants=$;exports.wizardLayoutContentSlotVariants=lt;exports.wizardLayoutHelpTextVariants=ct;exports.wizardLayoutMainVariants=dt;exports.wizardLayoutPreviewVariants=ut;exports.wizardLayoutStepperSlotVariants=pt;exports.wizardLayoutVariants=st;exports.wizardLiveRegionVariants=U;exports.wizardMobileProgressCaptionTitleVariants=Mt;exports.wizardMobileProgressCaptionVariants=kt;exports.wizardMobileProgressContainerVariants=It;exports.wizardMobileProgressDotRowVariants=_t;exports.wizardMobileProgressDotVariants=At;exports.wizardNavigationLeftVariants=Pt;exports.wizardNavigationRightVariants=Tt;exports.wizardNavigationVariants=Rt;exports.wizardRootVariants=nt;exports.wizardStepContainerVariants=yt;exports.wizardStepDescriptionVariants=Et;exports.wizardStepHeaderRowVariants=Vt;exports.wizardStepHeadingVariants=Lt;exports.wizardStepIconVariants=Ct;exports.wizardStepperCircleVariants=bt;exports.wizardStepperConnectorVariants=St;exports.wizardStepperContainerVariants=mt;exports.wizardStepperCurrentSubtitleVariants=Wt;exports.wizardStepperIndicatorColumnVariants=zt;exports.wizardStepperItemVariants=vt;exports.wizardStepperLabelColumnVariants=ht;exports.wizardStepperLabelTextVariants=Nt;exports.wizardStepperLabelVariants=wt;exports.wizardStepperListVariants=xt;exports.wizardStepperSectionHeadingVariants=gt;exports.wizardStepperSectionLabelVariants=ft;//# sourceMappingURL=index.js.map
+'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime'),lucideReact=require('lucide-react'),reactAriaComponents=require('react-aria-components'),zod=require('zod');function v(...o){return tailwindMerge.twMerge(clsx.clsx(o))}var rt=react.createContext(null);function W(){let o=react.useContext(rt);if(!o)throw new Error("Wizard compound components must be used within <Wizard>");return o}var B=["motion-reduce:transition-none","motion-reduce:animate-none"],nt=["transition-colors","duration-200"];function G(...o){return o.flatMap(t=>Array.isArray(t)?[...t]:[t])}var ot=classVarianceAuthority.cva("flex min-h-0 flex-1 flex-col"),st=classVarianceAuthority.cva("flex min-h-0 flex-1 flex-col lg:flex-row"),dt=classVarianceAuthority.cva("flex min-w-0 flex-1 justify-center gap-8 overflow-y-auto bg-[var(--page-background)] p-6"),pt=classVarianceAuthority.cva("hidden w-56 shrink-0 pt-2 lg:block"),lt=classVarianceAuthority.cva("flex w-full max-w-2xl flex-col"),ct=classVarianceAuthority.cva("mt-3 text-center text-xs text-[var(--menu-muted)]"),ut=classVarianceAuthority.cva("hidden w-80 shrink-0 border-l border-[var(--border)] bg-[var(--accent-background)] p-6 xl:block"),mt=classVarianceAuthority.cva("flex flex-col gap-2"),ft=classVarianceAuthority.cva("text-xs font-semibold uppercase tracking-wide text-[var(--primary)]"),gt=classVarianceAuthority.cva("text-sm font-bold text-[var(--content-foreground)]"),xt=classVarianceAuthority.cva("mt-6 flex flex-col"),vt=classVarianceAuthority.cva("flex items-start"),zt=classVarianceAuthority.cva("flex w-11 shrink-0 flex-col items-center"),bt=classVarianceAuthority.cva(G("flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold",nt,B),{variants:{state:{completed:"bg-[var(--primary)] text-[var(--primary-foreground)] ring-4 ring-[var(--primary)]/25",current:"bg-[var(--primary)] text-[var(--primary-foreground)] ring-4 ring-[var(--primary)]/25",upcoming:"border border-[var(--border)] bg-[var(--content-background)] text-[var(--menu-muted)]"}},defaultVariants:{state:"upcoming"}}),St=classVarianceAuthority.cva(G("my-0.5 h-5 w-0.5",nt,B),{variants:{completed:{true:"bg-[var(--primary)]",false:"bg-[var(--border)]"}},defaultVariants:{completed:false}}),ht=classVarianceAuthority.cva("flex min-h-11 items-center pl-3"),wt=classVarianceAuthority.cva("flex flex-col justify-center"),Nt=classVarianceAuthority.cva("text-sm",{variants:{state:{completed:"font-medium text-[var(--content-foreground)]",current:"font-semibold text-[var(--content-foreground)]",upcoming:"text-[var(--menu-muted)]"}},defaultVariants:{state:"upcoming"}}),Wt=classVarianceAuthority.cva("text-xs text-[var(--content-foreground)]"),yt=classVarianceAuthority.cva("flex flex-col gap-6"),Lt=classVarianceAuthority.cva("flex items-start gap-4"),Vt=classVarianceAuthority.cva("flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--accent-background)] text-[var(--primary)]"),Ct=classVarianceAuthority.cva("text-lg font-bold text-[var(--content-foreground)] focus:outline-none"),Et=classVarianceAuthority.cva("mt-1 text-sm text-[var(--menu-muted)]"),$=classVarianceAuthority.cva("rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6 text-[var(--content-foreground)]"),Rt=classVarianceAuthority.cva("mt-4 flex items-center justify-between border-t border-[var(--border)] pt-4"),Tt=classVarianceAuthority.cva(""),Pt=classVarianceAuthority.cva("flex items-center gap-3"),It=classVarianceAuthority.cva("flex flex-col items-center gap-1.5 py-3 lg:hidden"),_t=classVarianceAuthority.cva("flex items-center justify-center gap-2"),At=classVarianceAuthority.cva(G("h-2 rounded-full transition-all duration-200",B),{variants:{state:{completed:"w-2 bg-[var(--primary)] opacity-60",current:"w-8 bg-[var(--primary)]",upcoming:"w-2 bg-[var(--border)]"}},defaultVariants:{state:"upcoming"}}),Ot=classVarianceAuthority.cva("text-xs font-medium text-[var(--menu-muted)]"),Dt=classVarianceAuthority.cva("text-[var(--content-foreground)]"),U=classVarianceAuthority.cva("sr-only");var F=react.forwardRef(function({children:t,stepper:c,preview:s,helpText:u,className:x,"data-testid":r="wizard-layout"},i){return jsxRuntime.jsxs("div",{ref:i,className:v(st(),x),"data-testid":r,children:[jsxRuntime.jsxs("div",{className:dt(),children:[c?jsxRuntime.jsx("nav",{className:pt(),"aria-label":"Wizard steps","data-testid":`${r}-stepper-slot`,children:c}):null,jsxRuntime.jsxs("div",{className:lt(),children:[t,u?jsxRuntime.jsx("p",{className:ct(),children:u}):null]})]}),s?jsxRuntime.jsx("aside",{className:ut(),"aria-hidden":"true","data-testid":`${r}-preview`,children:s}):null]})});F.displayName="Wizard.Layout";var qt=classVarianceAuthority.cva("inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",{variants:{fullWidth:{true:"w-full",false:""},inVerticalGroup:{true:"items-stretch",false:"items-center"}},defaultVariants:{fullWidth:false,inVerticalGroup:false}}),Xt=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-normal ring-offset-background motion-safe:transition-transform motion-safe:duration-200 motion-safe:[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",{variants:{variant:{default:"bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] hover:-translate-y-1",destructive:"bg-[var(--destructive-background)] text-[var(--destructive-foreground)] hover:bg-[var(--destructive-background-hover,var(--destructive-background))] motion-safe:hover:btn-warn-shake",outline:"border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)]",secondary:"bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:bg-[var(--secondary-hover,var(--secondary))]",ghost:"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",link:"text-[var(--text-link)] underline underline-offset-4 hover:bg-[var(--accent)] hover:text-[var(--text-link-hover)]"},fullWidth:{true:"w-full",false:""},visualSize:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3 text-xs",lg:"h-11 rounded-md px-6 text-base",icon:"h-10 w-10",dot:"h-5 w-5 rounded-full p-0 min-h-0 min-w-0"},paywall:{true:"!bg-[var(--paywall)] !text-[var(--paywall-foreground)] hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",false:""}},defaultVariants:{variant:"default",visualSize:"default",paywall:false}});var Ht="data-[pressed]:scale-[0.97]";var Y="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",j="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";var te=react.createContext(null);te.displayName="ButtonGroupContext";function ee(){return react.useContext(te)}var ae=react.createContext(null);ae.displayName="ButtonGroupItemContext";function re(){return react.useContext(ae)}classVarianceAuthority.cva("inline-flex items-center gap-0",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col w-full"}},defaultVariants:{orientation:"horizontal"}});var ie=classVarianceAuthority.cva("",{variants:{orientation:{horizontal:"min-w-[44px]",vertical:"flex min-h-[44px]"},position:{first:"",middle:"",last:"",only:""}},compoundVariants:[{orientation:"horizontal",position:"first",className:"rounded-r-none border-r-0"},{orientation:"horizontal",position:"middle",className:"rounded-none border-r-0"},{orientation:"horizontal",position:"last",className:"rounded-l-none"},{orientation:"vertical",position:"first",className:"rounded-b-none border-b-0"},{orientation:"vertical",position:"middle",className:"rounded-none border-b-0"},{orientation:"vertical",position:"last",className:"rounded-t-none"}],defaultVariants:{orientation:"horizontal",position:"only"}});classVarianceAuthority.cva("bg-[var(--border)]",{variants:{orientation:{horizontal:"w-px h-6 mx-1",vertical:"h-px w-full my-1"}},defaultVariants:{orientation:"horizontal"}});var I=react.memo(react.forwardRef(({className:o,buttonVisualClassName:t,variant:c,size:s,visualSize:u,fullWidth:x,loading:r=false,loadingText:i="Loading...",shortcut:z,children:m,isDisabled:f,paywall:p=false,paywallRedirect:g,paywallDescription:n,onPress:l,...d},b)=>{let w=react.useId(),S=ee(),y=re(),E=c??S?.variant??"default",V=s??S?.size,A=f??S?.isDisabled??false,R=S?.orientation==="vertical",T=x||R,O=y?ie({orientation:S?.orientation??"horizontal",position:y.position}):"",P=u??V??"default";return process.env.NODE_ENV!=="production"&&(P==="dot"||P==="icon")&&!d["aria-label"]&&!m&&console.warn('[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'),jsxRuntime.jsx(reactAriaComponents.Button,{ref:b,isDisabled:A||r||void 0,"aria-disabled":p?true:void 0,"aria-describedby":p?w:void 0,onPress:H=>{if(p){g&&window.open(g,"_blank","noopener,noreferrer");return}l?.(H);},className:v(qt({fullWidth:T,inVerticalGroup:R}),o),...d,children:H=>jsxRuntime.jsxs("span",{className:v(Xt({variant:E,visualSize:P,paywall:p,fullWidth:T}),O,t,Ht,"",Y,j),"data-pressed":H.isPressed||void 0,children:[r&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(lucideReact.Loader2,{className:"motion-safe:animate-spin","aria-hidden":"true"}),jsxRuntime.jsx("span",{className:"sr-only","aria-live":"polite",children:i})]}),!r&&m,p&&jsxRuntime.jsx(lucideReact.Zap,{"data-testid":"zap-icon","aria-hidden":"true",className:"ml-1"}),p&&jsxRuntime.jsxs("span",{id:w,className:"sr-only",children:["Premium feature: ",n||"Upgrade required to access this feature"]}),H.isFocusVisible&&z&&jsxRuntime.jsx("kbd",{className:"ml-auto hidden text-xs opacity-60 lg:inline",children:z})]})})}));I.displayName="Button";var Z=react.forwardRef(function({sectionLabel:t,sectionNumber:c,totalSections:s,allowClickOnCompleted:u=true,className:x,"aria-label":r,"data-testid":i="wizard-stepper"},z){let{currentStepIndex:m,steps:f,onStepChange:p,isLoading:g}=W();return jsxRuntime.jsxs("div",{ref:z,className:v(mt(),x),"aria-label":r,"data-testid":i,children:[t&&c!==void 0&&s!==void 0?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("p",{className:ft(),children:["Section ",c," of ",s]}),jsxRuntime.jsx("h2",{className:gt(),children:t})]}):null,jsxRuntime.jsx("ol",{className:xt(),children:f.map((n,l)=>{let d=l<m,b=l===m,w=d?"completed":b?"current":"upcoming",S=d&&u&&!g,y=l===f.length-1,E=bt({state:w}),V=jsxRuntime.jsx("span",{className:E,"aria-hidden":"true",children:d?jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"}):jsxRuntime.jsx("span",{children:l+1})});return jsxRuntime.jsx("li",{"data-testid":`${i}-item-${n.id}`,"aria-current":b?"step":void 0,children:jsxRuntime.jsxs("div",{className:vt(),children:[jsxRuntime.jsxs("div",{className:zt(),children:[S?jsxRuntime.jsx(I,{variant:"ghost",visualSize:"icon",buttonVisualClassName:"rounded-full","aria-label":`Go back to ${n.label}`,onPress:()=>p({index:l,id:n.id,label:n.label,reason:"jump"}),"data-testid":`${i}-button-${n.id}`,children:V}):jsxRuntime.jsx("span",{className:"flex h-11 w-11 items-center justify-center",children:V}),y?null:jsxRuntime.jsx("span",{className:St({completed:d}),"aria-hidden":"true"})]}),jsxRuntime.jsxs("div",{className:ht(),children:[jsxRuntime.jsxs("span",{className:wt(),children:[jsxRuntime.jsx("span",{className:Nt({state:w}),children:n.label}),b?jsxRuntime.jsx("span",{className:Wt(),children:"Current step"}):null]}),b?null:jsxRuntime.jsx("span",{className:"sr-only",children:d?"(completed)":"(upcoming)"})]})]})},n.id)})})]})});Z.displayName="Wizard.Stepper";var Te=react.Activity??function({children:t,mode:c}){return jsxRuntime.jsx("div",{"data-activity-mode":c,children:t})};function Pe(o){if(!react.isValidElement(o))return  false;let t=o.type;return typeof t=="string"?false:t?.displayName==="Wizard.Step"}var X=react.forwardRef(function({children:t,className:c,"data-testid":s="wizard-content",preserveState:u=false},x){let{currentStepId:r,steps:i}=W(),z=react.Children.toArray(t).filter(Pe);if(process.env.NODE_ENV!=="production"){let f=z.map(l=>l.props.id),p=i.map(l=>l.id),g=p.filter(l=>!f.includes(l)),n=f.filter(l=>!p.includes(l));(g.length>0||n.length>0)&&console.warn("[Wizard] Wizard.Step children do not match `steps` descriptors. "+(g.length?`Missing steps: ${g.join(", ")}. `:"")+(n.length?`Unknown step ids: ${n.join(", ")}.`:""));}if(u)return jsxRuntime.jsx("div",{ref:x,className:v($(),c),"data-testid":s,children:z.map(f=>jsxRuntime.jsx(Te,{mode:f.props.id===r?"visible":"hidden",children:f},f.props.id))});let m=z.find(f=>f.props.id===r)??null;return jsxRuntime.jsx("div",{ref:x,className:v($(),c),"data-testid":s,children:m})});X.displayName="Wizard.Content";var Q=react.forwardRef(function({id:t,icon:c,children:s,className:u,"data-testid":x},r){let{steps:i,currentStepIndex:z,registerStepHeading:m,stepHeadingLevel:f}=W(),p=i.find(S=>S.id===t),g=p?.label??t,n=p?.description,l=react.useId(),d=react.useId(),b=x??`wizard-step-${t}`,w=f;return jsxRuntime.jsxs("section",{ref:r,className:v(yt(),u),"aria-labelledby":l,"aria-describedby":n?d:void 0,"data-testid":b,"data-wizard-step-id":t,"data-wizard-step-index":z,children:[jsxRuntime.jsxs("div",{className:Lt(),children:[c?jsxRuntime.jsx("span",{className:Vt(),"aria-hidden":"true",children:c}):null,jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(w,{id:l,ref:m,tabIndex:-1,className:Ct(),children:g}),n?jsxRuntime.jsx("p",{id:d,className:Et(),children:n}):null]})]}),jsxRuntime.jsx("div",{children:s})]})});Q.displayName="Wizard.Step";var M={back:"Back",skip:"Skip for now",next:"Next",start:"Next",finish:"Finish"};function k(o,t){return typeof o=="function"?o(t):o}var et=react.forwardRef(function({labels:t,showSkip:c=false,onBack:s,onNext:u,onSkip:x,className:r,"data-testid":i="wizard-navigation"},z){let{currentStepIndex:m,currentStepId:f,totalSteps:p,steps:g,isLoading:n,onStepChange:l}=W(),d={index:m,total:p,id:f},b={back:k(t?.back??M.back,d),skip:k(t?.skip??M.skip,d),next:k(t?.next??M.next,d),start:k(t?.start??t?.next??M.start,d),finish:k(t?.finish??M.finish,d)},w=m===0,S=m===p-1,y=m===p-2,E=!w&&!S,V=!S,A=c&&!w&&!S&&!y,R=w?b.start:y?b.finish:b.next,T=()=>{let h=Math.max(0,m-1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"back"}),s?.();},O=()=>{let h=Math.min(p-1,m+1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"next"}),u?.();},P=()=>{let h=Math.min(p-1,m+1);l({index:h,id:g[h]?.id??"",label:g[h]?.label??"",reason:"skip"}),x?.();};return jsxRuntime.jsxs("div",{ref:z,className:v(Rt(),r),"data-testid":i,children:[jsxRuntime.jsx("div",{className:Tt(),children:E?jsxRuntime.jsxs(I,{variant:"secondary",onPress:T,isDisabled:n,"data-testid":`${i}-back`,children:[jsxRuntime.jsx(lucideReact.ArrowLeft,{className:"mr-1 h-4 w-4 rtl:rotate-180","aria-hidden":"true"}),b.back]}):null}),jsxRuntime.jsxs("div",{className:Pt(),children:[A?jsxRuntime.jsx(I,{variant:"ghost",onPress:P,isDisabled:n,"data-testid":`${i}-skip`,children:b.skip}):null,V?jsxRuntime.jsxs(I,{variant:"default",onPress:O,isDisabled:n,loading:n,"data-testid":`${i}-next`,children:[R,y?null:jsxRuntime.jsx(lucideReact.ArrowRight,{className:"ml-1 h-4 w-4 rtl:rotate-180","aria-hidden":"true"})]}):null]})]})});et.displayName="Wizard.Navigation";var at=react.forwardRef(function({className:t,"data-testid":c="wizard-mobile-progress"},s){let{currentStepIndex:u,steps:x,totalSteps:r}=W(),i=x[u]?.label,z=i?`Step ${u+1} of ${r}: ${i}`:`Step ${u+1} of ${r}`;return jsxRuntime.jsxs("div",{ref:s,className:v(It(),t),role:"progressbar","aria-label":"Wizard progress","aria-valuemin":1,"aria-valuemax":r,"aria-valuenow":u+1,"aria-valuetext":z,"data-testid":c,children:[jsxRuntime.jsx("div",{className:_t(),children:x.map((m,f)=>{let p=f<u?"completed":f===u?"current":"upcoming";return jsxRuntime.jsx("span",{className:At({state:p}),"aria-hidden":"true","data-testid":`${c}-dot-${m.id}`},m.id)})}),i?jsxRuntime.jsxs("p",{className:Ot(),"aria-hidden":"true","data-testid":`${c}-caption`,children:["Step ",u+1," of ",r," \xB7 ",jsxRuntime.jsx("span",{className:Dt(),children:i})]}):null]})});at.displayName="Wizard.MobileProgress";var Be=(o,t)=>`Step ${o} of ${t}`,pe=react.forwardRef(function({children:t,currentStep:c,steps:s,onStepChange:u,isLoading:x=false,errors:r,announceTemplate:i=Be,stepHeadingLevel:z="h3",className:m,id:f,"aria-label":p,"aria-labelledby":g,"data-testid":n="wizard"},l){let d=Math.min(Math.max(c,0),Math.max(s.length-1,0)),b=s[d],w=b?.id??"",S=b?.label??"",[y,E]=react.useState("");react.useEffect(()=>{s.length!==0&&E(i(d+1,s.length,S));},[d,s.length,S,i]);let[V,A]=react.useState("");react.useEffect(()=>{if(!r||r.length===0){A("");return}A(r.join(". "));},[r]);let R=react.useRef(null),T=react.useRef(true),O=react.useCallback(h=>{R.current=h;},[]);react.useEffect(()=>{if(T.current){T.current=false;return}let h=requestAnimationFrame(()=>{R.current?.focus();});return ()=>cancelAnimationFrame(h)},[d]);let P=react.useMemo(()=>({currentStepIndex:d,currentStepId:w,steps:s,totalSteps:s.length,isLoading:x,errors:r??[],announceTemplate:i,stepHeadingLevel:z,onStepChange:u,registerStepHeading:O}),[d,w,s,x,r,i,z,u,O]);return jsxRuntime.jsx(rt.Provider,{value:P,children:jsxRuntime.jsxs("div",{ref:l,id:f,className:v(ot(),m),"aria-label":p,"aria-labelledby":g,"data-testid":n,"data-wizard-step":d,children:[t,jsxRuntime.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:U(),"data-testid":`${n}-live-polite`,children:y}),jsxRuntime.jsx("div",{role:"alert","aria-live":"assertive","aria-atomic":"true",className:U(),"data-testid":`${n}-live-assertive`,children:V})]})})});pe.displayName="Wizard";var Ge=Object.assign(pe,{Layout:F,Stepper:Z,Content:X,Step:Q,Navigation:et,MobileProgress:at});var C=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 Ue=zod.z.enum(["next","back","skip","jump"]),le=zod.z.object({id:zod.z.string().min(1),label:zod.z.string().min(1),description:zod.z.string().optional()}),Fe=zod.z.enum(["h2","h3","h4","h5","h6"]),Ye=C.extend({children:zod.z.custom(),currentStep:zod.z.number().int().min(0),steps:zod.z.array(le).min(1),onStepChange:zod.z.custom(),isLoading:zod.z.boolean().optional().default(false),errors:zod.z.array(zod.z.string()).optional(),announceTemplate:zod.z.custom().optional(),stepHeadingLevel:Fe.optional().default("h3")}),je=C.extend({children:zod.z.custom(),preview:zod.z.custom().optional(),helpText:zod.z.string().optional()}),Ze=C.extend({sectionLabel:zod.z.string().optional(),sectionNumber:zod.z.number().int().min(1).optional(),totalSections:zod.z.number().int().min(1).optional(),allowClickOnCompleted:zod.z.boolean().optional().default(true)}),qe=C.extend({id:zod.z.string().min(1),children:zod.z.custom(),icon:zod.z.custom().optional()}),Xe=C.extend({children:zod.z.custom(),preserveState:zod.z.boolean().optional().default(false)}),Ke=C.extend({labels:zod.z.custom().optional(),showSkip:zod.z.boolean().optional().default(false),onBack:zod.z.custom().optional(),onNext:zod.z.custom().optional(),onSkip:zod.z.custom().optional()}),Qe=C.extend({});exports.Wizard=Ge;exports.WizardChangeReasonSchema=Ue;exports.WizardContent=X;exports.WizardContentPropsSchema=Xe;exports.WizardLayout=F;exports.WizardLayoutPropsSchema=je;exports.WizardMobileProgress=at;exports.WizardMobileProgressPropsSchema=Qe;exports.WizardNavigation=et;exports.WizardNavigationPropsSchema=Ke;exports.WizardPropsSchema=Ye;exports.WizardStep=Q;exports.WizardStepDescriptorSchema=le;exports.WizardStepPropsSchema=qe;exports.WizardStepper=Z;exports.WizardStepperPropsSchema=Ze;exports.useWizardContext=W;exports.wizardContentCardVariants=$;exports.wizardLayoutContentSlotVariants=lt;exports.wizardLayoutHelpTextVariants=ct;exports.wizardLayoutMainVariants=dt;exports.wizardLayoutPreviewVariants=ut;exports.wizardLayoutStepperSlotVariants=pt;exports.wizardLayoutVariants=st;exports.wizardLiveRegionVariants=U;exports.wizardMobileProgressCaptionTitleVariants=Dt;exports.wizardMobileProgressCaptionVariants=Ot;exports.wizardMobileProgressContainerVariants=It;exports.wizardMobileProgressDotRowVariants=_t;exports.wizardMobileProgressDotVariants=At;exports.wizardNavigationLeftVariants=Tt;exports.wizardNavigationRightVariants=Pt;exports.wizardNavigationVariants=Rt;exports.wizardRootVariants=ot;exports.wizardStepContainerVariants=yt;exports.wizardStepDescriptionVariants=Et;exports.wizardStepHeaderRowVariants=Lt;exports.wizardStepHeadingVariants=Ct;exports.wizardStepIconVariants=Vt;exports.wizardStepperCircleVariants=bt;exports.wizardStepperConnectorVariants=St;exports.wizardStepperContainerVariants=mt;exports.wizardStepperCurrentSubtitleVariants=Wt;exports.wizardStepperIndicatorColumnVariants=zt;exports.wizardStepperItemVariants=vt;exports.wizardStepperLabelColumnVariants=ht;exports.wizardStepperLabelTextVariants=Nt;exports.wizardStepperLabelVariants=wt;exports.wizardStepperListVariants=xt;exports.wizardStepperSectionHeadingVariants=gt;exports.wizardStepperSectionLabelVariants=ft;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map