@tenerife.music/ui 1.0.15 → 1.0.16

package/dist/index.d.cts

@@ -1,10 +1,10 @@
-import { d9 as ResponsiveSelectSize, dk as SelectVariantToken, da as ResponsiveSelectWidth, dc as ResponsiveSideOffset, cY as ResponsiveAlignOffset, di as SelectSizeToken, dj as SelectStateToken, dl as SelectWidthToken, d5 as ResponsiveModalSize, d6 as ResponsiveModalWidth, d4 as ResponsiveModalHeight, dd as ResponsiveSpace, cX as RadiusToken, dr as SurfaceToken, cP as ModalFooterAlignToken, d8 as ResponsiveRadius$1, dm as ShadowToken, c$ as ResponsiveColor$1, dw as Responsive, d0 as ResponsiveContainerMaxWidth, d3 as ResponsiveFlexBasis, d2 as ResponsiveDelay, dx as ResponsiveContextMenuSize, dy as ResponsiveContextMenuWidth, dz as ContextMenuItemToneToken, dA as ResponsiveTabsSize, dB as TabsVariantToken, dC as TabsToneToken, cZ as ResponsiveAnimationPreset } from './index-CP_dmFn4.cjs';
-export { A as ALERT_TOKENS, l as AlertVariant, bo as Animation, B as BUTTON_TOKENS, bR as BorderRadius, dD as Breakpoint, m as ButtonFontSize, n as ButtonHeight, o as ButtonPaddingHorizontal, p as ButtonPaddingVertical, q as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, cm as CanonicalFontSize, cn as CanonicalFontWeight, co as CanonicalLetterSpacing, cp as CanonicalLineHeight, cq as CanonicalTextColor, r as CardPadding, s as CardRadius, t as CardShadow, u as CardSize, v as CardSpacingVertical, w as CheckboxSize, x as CheckboxState, y as CheckboxVariant, bX as ColoredShadow, bS as ComponentRadius, c9 as ComponentSpacing, ca as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, c as DROPDOWN_TOKENS, z as DataListLabelWidth, E as DataListRowPadding, F as DomainCardBadge, G as DomainCardImage, H as DomainCardLayout, J as DomainCardMetadata, K as DomainCardMotion, L as DomainCardPriceCapacity, Q as DomainCardSkeleton, U as DomainCardSkeletonContentWidth, V as DomainCardSurface, W as DropdownItemSize, X as DropdownMenuSize, Y as DropdownTriggerSize, Z as DropdownVariant, bp as Duration, bq as Easing, bY as ElevationShadow, _ as EmptyStateIconSize, bZ as FocusRing, cr as FontFamily, cs as FontSize, ct as FontWeight, b_ as GlowEffect, cb as GridSpacing, I as ICON_TOKENS, d as INPUT_TOKENS, $ as IconColor, a0 as IconSize, a1 as IconStroke, a2 as InputFontSize, a3 as InputHeight, a4 as InputPaddingHorizontal, a5 as InputPaddingVertical, a6 as InputRadius, a7 as InputSize, br as Keyframe, cu as LetterSpacing, cv as LineHeight, M as MENU_TOKENS, e as MOTION_TOKENS, a8 as MenuContentMinWidth, a9 as MenuContentPadding, aa as MenuContentRadius, ab as MenuContentShadow, ac as MenuIndicatorOffset, ad as MenuIndicatorSize, ae as MenuItemGap, af as MenuItemHeight, ag as MenuItemPadding, ah as MenuItemRadius, ai as MenuLabelPadding, aj as MenuSeparatorMargin, ak as MotionAnimation, al as MotionDuration, am as MotionEasing, an as MotionTransition, ao as MotionTransitionPreset, bD as MotionV2CombinedType, bE as MotionV2Duration, bF as MotionV2Easing, bG as MotionV2SlideDirection, bH as MotionV2Transition, N as NAVIGATION_TOKENS, f as NOTIFICATION_TOKENS, ap as NavigationItemPadding, aq as NavigationListGap, ar as NavigationRadius, as as NavigationShadow, at as NavigationSize, au as NavigationState, av as NotificationPanelWidth, aw as NotificationTokenVariant, O as OVERLAY_TOKENS, ax as OverlayBackdropVariant, ay as OverlayModalSize, P as POPOVER_TOKENS, az as PopoverArrowOffset, aA as PopoverArrowSize, aB as PopoverContentPadding, aC as PopoverContentRadius, aD as PopoverContentShadow, aE as PopoverContentWidth, R as RADIO_TOKENS, aF as RadioSize, aG as RadioState, aH as RadioVariant, S as SECTION_TOKENS, h as SURFACE_TOKENS, i as SWITCH_TOKENS, aI as SectionGap, aJ as SectionPadding, cc as SectionSpacing, cd as SemanticSpacing, a_ as SkeletonAnimation, a$ as SkeletonBackground, b0 as SkeletonVariant, ce as Spacing, bs as Spring, cf as StackSpacing, b1 as SurfacePadding, b2 as SurfaceRadius, b3 as SurfaceShadow, b4 as SurfaceVariant, b5 as SwitchSize, b6 as SwitchState, b7 as SwitchVariant, T as TEXT_TOKENS, j as TOAST_TOKENS, k as TOOLTIP_TOKENS, b8 as TableCellPadding, b9 as TableGap, ba as TableHeaderPadding, bb as TableRowHeight, bc as TableShadow, bd as TextFontSize, be as TextFontWeight, bf as TextLetterSpacing, bg as TextLineHeight, cw as TextStyle, bh as ToastVariant, bi as TooltipContentRadius, bj as TooltipContentShadow, bt as Transition, cl as UI_COLORS, b$ as accentColoredShadows, bk as allCSSVariables, bl as allCSSVariablesCSS, bu as animations, bT as borderRadius, bU as componentRadius, c0 as componentShadowMapping, bv as durations, bw as easings, c1 as elevationShadows, c2 as focusRings, cx as fontFamily, cy as fontSize, cz as fontSizeWithMd, cA as fontWeight, bm as generateCSSVariablesCSS, c3 as glowEffects, bx as keyframes, cg as layoutSpacing, cB as letterSpacing, cC as lineHeight, by as motionCSSVariables, bI as motionV2CSSVariables, bJ as motionV2Combined, bK as motionV2Durations, bL as motionV2Easings, bM as motionV2Fade, bN as motionV2Scale, bO as motionV2Slide, bP as motionV2TailwindConfig, bQ as motionV2Transitions, c4 as primaryColoredShadows, bV as radiusCSSVariables, bz as reducedMotion, ch as semanticSpacing, c5 as shadowBase, c6 as shadowCSSVariables, c7 as shadowOpacity, ci as spacing, cj as spacingCSSVariables, bA as springs, bB as tailwindMotionConfig, bW as tailwindRadiusConfig, c8 as tailwindShadowConfig, ck as tailwindSpacingConfig, cD as tailwindTypographyConfig, cE as textStyles, bn as tokenSystemSummary, bC as transitions, cF as typographyCSSVariables } from './index-CP_dmFn4.cjs';
-export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from './colors-BZtZJBBm.cjs';
+import { d9 as ResponsiveSelectSize, dk as SelectVariantToken, da as ResponsiveSelectWidth, dc as ResponsiveSideOffset, cY as ResponsiveAlignOffset, di as SelectSizeToken, dj as SelectStateToken, dl as SelectWidthToken, d5 as ResponsiveModalSize, d6 as ResponsiveModalWidth, d4 as ResponsiveModalHeight, dd as ResponsiveSpace, cX as RadiusToken, dr as SurfaceToken, cP as ModalFooterAlignToken, dw as Responsive, d as INPUT_TOKENS, a7 as InputSize, d8 as ResponsiveRadius$1, dm as ShadowToken, c$ as ResponsiveColor$1, d0 as ResponsiveContainerMaxWidth, d3 as ResponsiveFlexBasis, d2 as ResponsiveDelay, dx as ResponsiveContextMenuSize, dy as ResponsiveContextMenuWidth, dz as ContextMenuItemToneToken, dA as ResponsiveTabsSize, dB as TabsVariantToken, dC as TabsToneToken, cZ as ResponsiveAnimationPreset } from './index-DPWxsWs3.cjs';
+export { A as ALERT_TOKENS, l as AlertVariant, bo as Animation, B as BUTTON_TOKENS, bR as BorderRadius, dD as Breakpoint, m as ButtonFontSize, n as ButtonHeight, o as ButtonPaddingHorizontal, p as ButtonPaddingVertical, q as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, cm as CanonicalFontSize, cn as CanonicalFontWeight, co as CanonicalLetterSpacing, cp as CanonicalLineHeight, cq as CanonicalTextColor, r as CardPadding, s as CardRadius, t as CardShadow, u as CardSize, v as CardSpacingVertical, w as CheckboxSize, x as CheckboxState, y as CheckboxVariant, bX as ColoredShadow, bS as ComponentRadius, c9 as ComponentSpacing, ca as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, c as DROPDOWN_TOKENS, z as DataListLabelWidth, E as DataListRowPadding, F as DomainCardBadge, G as DomainCardImage, H as DomainCardLayout, J as DomainCardMetadata, K as DomainCardMotion, L as DomainCardPriceCapacity, Q as DomainCardSkeleton, U as DomainCardSkeletonContentWidth, V as DomainCardSurface, W as DropdownItemSize, X as DropdownMenuSize, Y as DropdownTriggerSize, Z as DropdownVariant, bp as Duration, bq as Easing, bY as ElevationShadow, _ as EmptyStateIconSize, bZ as FocusRing, cr as FontFamily, cs as FontSize, ct as FontWeight, b_ as GlowEffect, cb as GridSpacing, I as ICON_TOKENS, $ as IconColor, a0 as IconSize, a1 as IconStroke, a2 as InputFontSize, a3 as InputHeight, a4 as InputPaddingHorizontal, a5 as InputPaddingVertical, a6 as InputRadius, br as Keyframe, cu as LetterSpacing, cv as LineHeight, M as MENU_TOKENS, e as MOTION_TOKENS, a8 as MenuContentMinWidth, a9 as MenuContentPadding, aa as MenuContentRadius, ab as MenuContentShadow, ac as MenuIndicatorOffset, ad as MenuIndicatorSize, ae as MenuItemGap, af as MenuItemHeight, ag as MenuItemPadding, ah as MenuItemRadius, ai as MenuLabelPadding, aj as MenuSeparatorMargin, ak as MotionAnimation, al as MotionDuration, am as MotionEasing, an as MotionTransition, ao as MotionTransitionPreset, bD as MotionV2CombinedType, bE as MotionV2Duration, bF as MotionV2Easing, bG as MotionV2SlideDirection, bH as MotionV2Transition, N as NAVIGATION_TOKENS, f as NOTIFICATION_TOKENS, ap as NavigationItemPadding, aq as NavigationListGap, ar as NavigationRadius, as as NavigationShadow, at as NavigationSize, au as NavigationState, av as NotificationPanelWidth, aw as NotificationTokenVariant, O as OVERLAY_TOKENS, ax as OverlayBackdropVariant, ay as OverlayModalSize, P as POPOVER_TOKENS, az as PopoverArrowOffset, aA as PopoverArrowSize, aB as PopoverContentPadding, aC as PopoverContentRadius, aD as PopoverContentShadow, aE as PopoverContentWidth, R as RADIO_TOKENS, aF as RadioSize, aG as RadioState, aH as RadioVariant, S as SECTION_TOKENS, h as SURFACE_TOKENS, i as SWITCH_TOKENS, aI as SectionGap, aJ as SectionPadding, cc as SectionSpacing, cd as SemanticSpacing, a_ as SkeletonAnimation, a$ as SkeletonBackground, b0 as SkeletonVariant, ce as Spacing, bs as Spring, cf as StackSpacing, b1 as SurfacePadding, b2 as SurfaceRadius, b3 as SurfaceShadow, b4 as SurfaceVariant, b5 as SwitchSize, b6 as SwitchState, b7 as SwitchVariant, T as TEXT_TOKENS, j as TOAST_TOKENS, k as TOOLTIP_TOKENS, b8 as TableCellPadding, b9 as TableGap, ba as TableHeaderPadding, bb as TableRowHeight, bc as TableShadow, bd as TextFontSize, be as TextFontWeight, bf as TextLetterSpacing, bg as TextLineHeight, cw as TextStyle, bh as ToastVariant, bi as TooltipContentRadius, bj as TooltipContentShadow, bt as Transition, cl as UI_COLORS, b$ as accentColoredShadows, bk as allCSSVariables, bl as allCSSVariablesCSS, bu as animations, bT as borderRadius, bU as componentRadius, c0 as componentShadowMapping, bv as durations, bw as easings, c1 as elevationShadows, c2 as focusRings, cx as fontFamily, cy as fontSize, cz as fontSizeWithMd, cA as fontWeight, bm as generateCSSVariablesCSS, c3 as glowEffects, bx as keyframes, cg as layoutSpacing, cB as letterSpacing, cC as lineHeight, by as motionCSSVariables, bI as motionV2CSSVariables, bJ as motionV2Combined, bK as motionV2Durations, bL as motionV2Easings, bM as motionV2Fade, bN as motionV2Scale, bO as motionV2Slide, bP as motionV2TailwindConfig, bQ as motionV2Transitions, c4 as primaryColoredShadows, bV as radiusCSSVariables, bz as reducedMotion, ch as semanticSpacing, c5 as shadowBase, c6 as shadowCSSVariables, c7 as shadowOpacity, ci as spacing, cj as spacingCSSVariables, bA as springs, bB as tailwindMotionConfig, bW as tailwindRadiusConfig, c8 as tailwindShadowConfig, ck as tailwindSpacingConfig, cD as tailwindTypographyConfig, cE as textStyles, bn as tokenSystemSummary, bC as transitions, cF as typographyCSSVariables } from './index-DPWxsWs3.cjs';
+export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from './colors-BrFmCQv-.cjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
+import { VariantProps as VariantProps$1 } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -14,37 +14,183 @@ import { Placement } from '@floating-ui/react-dom';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
+/**
+ * Token CVA Utility
+ *
+ * A type-safe wrapper around class-variance-authority (CVA) that enforces
+ * token-based styling and provides validation in development mode.
+ *
+ * @enforcement TUNG: tokenCVA introduction
+ * @rule ALL visual properties MUST use token-based utilities
+ * @rule NO raw Tailwind color/spacing/shadow classes allowed
+ * @rule CVA variants MUST reference component tokens
+ *
+ * @example
+ * ```typescript
+ * import { tokenCVA } from "@/lib/token-cva";
+ * import { BUTTON_TOKENS } from "@/tokens/components/button";
+ *
+ * const buttonVariants = tokenCVA({
+ *   base: `${BUTTON_TOKENS.gap} ${BUTTON_TOKENS.radius}`,
+ *   variants: {
+ *     variant: {
+ *       primary: `${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text}`,
+ *       secondary: `${BUTTON_TOKENS.variant.secondary.background} ${BUTTON_TOKENS.variant.secondary.text}`,
+ *     },
+ *   },
+ *   defaultVariants: {
+ *     variant: "primary",
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Re-export VariantProps for convenience
+ * This allows components to use VariantProps from tokenCVA instead of CVA directly
+ */
+type VariantProps<T extends (...args: any) => any> = VariantProps$1<T>;
+
+/**
+ * Button CVA Variants
+ *
+ * @enforcement C0_BUTTON_CVA_ENFORCEMENT
+ * @enforcement TUNG_BUTTON_CVA_ENFORCEMENT
+ * @enforcement TUNG: tokenCVA introduction
+ * @enforcement TUNG_BUTTON_INTERACTION_FIX
+ *
+ * CVA Enforcement Rules (C0_BUTTON_CVA_ENFORCEMENT):
+ * - CVA may ONLY reference token-derived classes
+ * - NO raw Tailwind color utilities (bg-red-*, text-blue-*, etc.)
+ * - NO direct hover/active utilities outside State Matrix
+ * - NO inline conditional class concatenation
+ * - NO per-variant Tailwind overrides
+ * - Structural utilities (inline-flex, items-center, etc.) are ALLOWED
+ *
+ * Color Authority Rules:
+ * - ALL color-related classes MUST be token-based utilities only
+ * - NO raw Tailwind color classes (bg-red-*, text-blue-*, etc.) allowed
+ * - ALL color logic MUST be centralized in BUTTON_TOKENS
+ * - Button is NOT a source of color - all colors come from Color Authority (tokens/colors.ts)
+ * - Button MUST react to token changes - changing tokens/colors.ts MUST change Button appearance
+ *
+ * State Matrix Authority Rules:
+ * - ALL state classes (hover, active, disabled) MUST use State Matrix CSS variables
+ * - NO raw Tailwind state utilities (hover:bg-primary/80, active:opacity-50)
+ * - States react to Color Authority changes automatically through State Matrix
+ *
+ * Interaction Authority Contract (TUNG_INTERACTION_AUTHORITY_FOUNDATION):
+ * - State Priority: disabled > loading > active > hover > focus-visible > base
+ * - CSS variables (--button-*-hover-bg, etc.) are ONLY for visual appearance
+ * - pointer-events is NOT a visual token - it controls interaction behavior
+ * - Base state MUST have pointer-events: auto (default) - NO pointer-events-none in base
+ * - pointer-events-none is ONLY allowed in disabled state (via disabled: prefix)
+ * - DevTools Force :hover is NOT proof of functionality - real mouse hover must work
+ * - Interaction state (pointer-events, cursor) is SEPARATE from visual state (colors, opacity)
+ * - Base state CANNOT block pointer events - only disabled/loading states can
+ * - Hover is FORBIDDEN when disabled={true} or loading={true}
+ * - Active is FORBIDDEN when disabled={true} or loading={true}
+ * - Focus is FORBIDDEN when disabled={true} (for interactions)
+ * - All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
+ *
+ * @see docs/architecture/BUTTON_CVA_ENFORCEMENT.md
+ * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+ * @see docs/architecture/STATE_AUTHORITY_CONTRACT.md
+ * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
+ * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
+ * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+ * @see docs/architecture/SPACING_AUTHORITY_CONTRACT.md
+ *
+ * Authority Compliance:
+ * - Motion Authority: Button uses MOTION_TOKENS.transitionPreset.colors for transitions
+ * - Radius Authority: Button references componentRadius.button.md for border radius
+ * - Typography Authority: Button references fontSize tokens for text sizing
+ * - Spacing Authority: Button references semanticSpacing tokens for padding/gap
+ * - State Authority: Button uses State Matrix CSS variables for all states
+ * - Interaction Authority: Button follows Interaction Authority Contract for state priority
+ *
+ * Color tokens used (all from BUTTON_TOKENS, which reference tokens/colors.ts):
+ * - bg-primary, bg-secondary, bg-accent, bg-destructive, bg-background, bg-muted
+ * - text-primary-foreground, text-secondary-foreground, text-accent-foreground, text-destructive-foreground, text-foreground
+ * - border-input, border-accent
+ * - ring-ring (token-based focus ring)
+ * - All hover/active/disabled states use State Matrix CSS variables (--button-*-hover-bg, etc.)
+ *
+ * Type-level enforcement:
+ * - Variant values are restricted to: "primary" | "secondary" | "accent" | "outline" | "ghost" | "destructive"
+ * - Size values are restricted to: "sm" | "md" | "lg" | "icon"
+ * - TypeScript will error if invalid variant/size values are passed
+ * - tokenCVA validates token usage in development mode (warns on forbidden patterns)
+ * - No arbitrary color classes can be passed via className prop (enforced by tokenCVA validation)
+ *
+ * Reference Implementation:
+ * - Button is the canonical reference for token-driven CVA patterns
+ * - Future components should follow Button's CVA enforcement patterns
+ * - Button CVA is immutable - changes require explicit unlock task
+ */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Button Component Props
+ *
+ * @enforcement TUNG_BUTTON_CVA_ENFORCEMENT
+ * @rule variant prop is restricted to ButtonVariant union type
+ * @rule size prop is restricted to ButtonSize union type
+ * @rule className prop cannot override color classes (tokenCVA validation in dev mode)
+ * @rule Button is fully token-based - no raw Tailwind colors allowed
+ */
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     leftIcon?: React$1.ReactNode;
     rightIcon?: React$1.ReactNode;
 }
+/**
+ * Button Component Implementation
+ *
+ * @enforcement TUNG_BUTTON_CVA_ENFORCEMENT
+ * @rule NO color-related classes outside CVA
+ * @rule JSX must only consume CVA output via buttonVariants()
+ * @rule NO conditional className logic affecting colors
+ * @rule Button is NOT a source of color - all colors come from Color Authority
+ * @rule Button MUST react to token changes - changing tokens/colors.ts MUST change Button appearance
+ *
+ * Token-only contract:
+ * - All colors are defined in BUTTON_TOKENS (src/tokens/components/button.ts)
+ * - BUTTON_TOKENS reference foundation tokens from tokens/colors.ts
+ * - No raw Tailwind color classes (bg-red-500, text-blue-600, etc.) are allowed
+ * - tokenCVA validates token usage in development mode
+ * - TypeScript enforces valid variant/size values at compile time
+ *
+ * Color Authority compliance:
+ * - Button does NOT define colors - it consumes them from tokens
+ * - Changing tokens/colors.ts will automatically change Button appearance
+ * - Button variants are visually distinct and react to theme changes
+ * - All hover states use token-based opacity variants
+ */
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const textVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
     weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
     muted?: boolean | null | undefined;
-    variant?: "primary" | "secondary" | "muted" | "accent" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "primary" | "secondary" | "muted" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textVariants> {
+interface TextProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps$1<typeof textVariants> {
     /**
      * @deprecated Use muted prop or semantic text colors instead
      */
     variant?: "primary" | "secondary" | "accent" | "outline" | "ghost" | "link" | "destructive" | "muted";
 }
 declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLSpanElement>>;
-type TextSize = VariantProps<typeof textVariants>["size"];
-type TextWeight = VariantProps<typeof textVariants>["weight"];
+type TextSize = VariantProps$1<typeof textVariants>["size"];
+type TextWeight = VariantProps$1<typeof textVariants>["weight"];
 
 declare const alertVariants: (props?: ({
     variant?: "primary" | "secondary" | "accent" | "destructive" | "default" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps$1<typeof alertVariants> {
 }
 declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -53,16 +199,24 @@ declare const bodyVariants: (props?: ({
     weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BodyProps extends React$1.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof bodyVariants> {
+interface BodyProps extends React$1.HTMLAttributes<HTMLParagraphElement>, VariantProps$1<typeof bodyVariants> {
     as?: "p" | "span" | "div";
 }
 declare const Body: React$1.ForwardRefExoticComponent<BodyProps & React$1.RefAttributes<HTMLElement>>;
 
+/**
+ * Caption component variants
+ *
+ * Note: fontSize, lineHeight, and letterSpacing are intentionally fixed in the base class
+ * rather than variants, as Caption always uses a consistent small size (xs) with tight
+ * line height and wide letter spacing. This design decision ensures caption text maintains
+ * its distinctive appearance across all use cases.
+ */
 declare const captionVariants: (props?: ({
     weight?: "normal" | "medium" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CaptionProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof captionVariants> {
+interface CaptionProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps$1<typeof captionVariants> {
     as?: "span" | "p" | "div";
 }
 declare const Caption: React$1.ForwardRefExoticComponent<CaptionProps & React$1.RefAttributes<HTMLElement>>;
@@ -71,7 +225,7 @@ declare const codeVariants: (props?: ({
     variant?: "block" | "inline" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CodeProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof codeVariants> {
+interface CodeProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps$1<typeof codeVariants> {
     as?: "code" | "pre";
 }
 declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLElement>>;
@@ -81,7 +235,7 @@ declare const displayVariants: (props?: ({
     weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface DisplayProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof displayVariants> {
+interface DisplayProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps$1<typeof displayVariants> {
     as?: "h1" | "h2" | "div";
 }
 declare const Display: React$1.ForwardRefExoticComponent<DisplayProps & React$1.RefAttributes<HTMLElement>>;
@@ -91,7 +245,7 @@ declare const headingVariants: (props?: ({
     weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps$1<typeof headingVariants> {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
@@ -100,7 +254,7 @@ declare const leadVariants: (props?: ({
     size?: "lg" | "xl" | null | undefined;
     muted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface LeadProps extends React$1.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof leadVariants> {
+interface LeadProps extends React$1.HTMLAttributes<HTMLParagraphElement>, VariantProps$1<typeof leadVariants> {
     as?: "p" | "span" | "div";
 }
 declare const Lead: React$1.ForwardRefExoticComponent<LeadProps & React$1.RefAttributes<HTMLElement>>;
@@ -433,7 +587,7 @@ declare const checkboxVariants: (props?: ({
  * Extends native button HTML attributes with variant props, checked state, and accessibility props.
  * Uses button role="checkbox" pattern for full keyboard accessibility.
  */
-interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange">, VariantProps<typeof checkboxVariants> {
+interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange">, VariantProps$1<typeof checkboxVariants> {
     /**
      * Checkbox variant style
      * @default "outline"
@@ -528,22 +682,62 @@ declare const inputVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
+/**
+ * Input variant type derived from INPUT_TOKENS
+ *
+ * Available variants: "primary" | "secondary" | "outline" | "ghost" | "destructive"
+ *
+ * @example
+ * ```tsx
+ * const variant: InputVariant = "outline";
+ * ```
+ */
+type InputVariant = keyof typeof INPUT_TOKENS.variant;
+
 /**
  * Input Component Props
  *
  * Extends native input HTML attributes with variant props, icon slots, and accessibility props.
  */
-interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, Omit<VariantProps$1<typeof inputVariants>, "variant" | "size"> {
     /**
      * Input variant style
+     *
+     * Supports responsive values:
+     * - Single value: `variant="outline"`
+     * - Responsive object: `variant={{ base: "outline", md: "primary" }}`
+     *
      * @default "outline"
+     *
+     * @example
+     * ```tsx
+     * // Single value
+     * <Input variant="outline" />
+     *
+     * // Responsive
+     * <Input variant={{ base: "outline", md: "primary" }} />
+     * ```
      */
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    variant?: Responsive<InputVariant>;
     /**
      * Input size
+     *
+     * Supports responsive values:
+     * - Single value: `size="md"`
+     * - Responsive object: `size={{ base: "sm", md: "lg" }}`
+     *
      * @default "md"
+     *
+     * @example
+     * ```tsx
+     * // Single value
+     * <Input size="md" />
+     *
+     * // Responsive
+     * <Input size={{ base: "sm", md: "lg" }} />
+     * ```
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: Responsive<InputSize>;
     /**
      * Input state
      * @default "default"
@@ -602,7 +796,7 @@ declare const radioVariants: (props?: ({
  * Extends native button HTML attributes with variant props, checked state, and accessibility props.
  * Uses button role="radio" pattern for full keyboard accessibility.
  */
-interface RadioProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange">, VariantProps<typeof radioVariants> {
+interface RadioProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange">, VariantProps$1<typeof radioVariants> {
     /**
      * Radio variant style
      * @default "outline"
@@ -746,7 +940,7 @@ declare const textareaVariants: (props?: ({
  *
  * Extends native textarea HTML attributes with variant props, character counter, and accessibility props.
  */
-interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps$1<typeof textareaVariants> {
     /**
      * Textarea variant style
      * @default "outline"
@@ -799,7 +993,7 @@ interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaEleme
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const labelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps$1<typeof labelVariants> {
     /**
      * Whether the field is required (shows asterisk)
      */
@@ -887,10 +1081,6 @@ type FlowValue = "row" | "col" | "dense" | "row-dense" | "col-dense";
  * Shadow token values
  */
 type ShadowValue = ShadowToken;
-/**
- * Display type values
- */
-type DisplayValue = "block" | "inline" | "inline-block" | "flex" | "grid" | "inline-flex" | "inline-grid" | "none";
 /**
  * Responsive spacing prop type
  */
@@ -939,9 +1129,28 @@ type SurfaceVariant = "flat" | "raised" | "sunken";
 /**
  * Box Primitive Component
  *
- * Token-driven base container component with support for padding, margin,
- * display, flex, grid, radius, and shadow. All styling uses token-based
- * Tailwind classes only (no raw numeric values).
+ * Box is the lowest-level layout primitive - a pure, generic container component.
+ * It provides token-based styling for spacing (padding/margin), visual properties
+ * (radius, shadow, background), and element rendering (via `as` prop).
+ *
+ * Box does NOT provide layout composition semantics (display, flexDirection, gap,
+ * alignment). For layout composition, use Stack, Flex, or Grid components.
+ *
+ * All styling uses token-based values only (no raw numeric values).
+ *
+ * @example
+ * ```tsx
+ * // Basic container with padding
+ * <Box p="md" radius="lg" bg="background">
+ *   Content
+ * </Box>
+ *
+ * // Use Stack for layout composition
+ * <Stack direction="vertical" spacing="md">
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Stack>
+ * ```
  */
 
 /**
@@ -1008,14 +1217,6 @@ interface BoxProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * Margin left
      */
     ml?: ResponsiveSpacing;
-    /**
-     * Display type
-     */
-    display?: DisplayValue;
-    /**
-     * Flex direction (when display is flex)
-     */
-    flexDirection?: FlexDirectionValue;
     /**
      * Border radius - token-based (none, xs, sm, md, lg, xl, 2xl, 3xl, full)
      */
@@ -1028,18 +1229,6 @@ interface BoxProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * Background color - token-based
      */
     bg?: ResponsiveColor;
-    /**
-     * Gap (for flex/grid layouts) - token-based
-     */
-    gap?: ResponsiveSpacing;
-    /**
-     * Align items (for flex/grid layouts)
-     */
-    align?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Justify content (for flex/grid layouts)
-     */
-    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
 }
 /**
  * Box component
@@ -1049,23 +1238,42 @@ declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttri
 /**
  * Stack Primitive Component
  *
- * Token-driven vertical layout component (flex column). Uses Box internally
- * with flex display and column direction. All spacing uses token-based values.
+ * Stack is the primary layout composition primitive for vertical and horizontal flows.
+ * It provides semantic spacing between items and handles flexbox layout composition.
+ * Uses Box internally as the base container.
+ *
+ * All spacing uses token-based values only.
+ *
+ * @example
+ * ```tsx
+ * // Vertical stack (default)
+ * <Stack direction="vertical" spacing="md">
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Stack>
+ *
+ * // Horizontal stack
+ * <Stack direction="horizontal" spacing="lg" align="center">
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Stack>
+ * ```
  */
 
 interface StackProps extends Omit<BoxProps, "display" | "flexDirection" | "gap"> {
     /**
      * Stack direction - vertical (column) or horizontal (row)
+     * @default "vertical"
      */
     direction?: "vertical" | "horizontal";
     /**
      * Spacing between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
-     * Alias for gap prop
+     * This is the canonical prop for spacing. Use `spacing` instead of `gap` for clarity.
      */
     spacing?: ResponsiveSpacing;
     /**
      * Gap between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
-     * Alias for spacing prop
+     * @deprecated Use `spacing` prop instead. This prop is kept for backward compatibility.
      */
     gap?: ResponsiveSpacing;
     /**
@@ -1078,7 +1286,7 @@ interface StackProps extends Omit<BoxProps, "display" | "flexDirection" | "gap">
     justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
 }
 /**
- * Stack component - vertical layout using flex column by default
+ * Stack component - primary layout composition primitive
  */
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -1090,8 +1298,21 @@ declare const Column: React$1.ForwardRefExoticComponent<StackProps & React$1.Ref
 /**
  * Container Layout Primitive Component
  *
- * Token-driven container component for constraining content width and centering.
- * Uses CSS-layer class .tm-container with token-based padding and max-width.
+ * Container is a specialized layout primitive with a single, focused responsibility:
+ * width constraint and horizontal padding. It does NOT provide layout composition
+ * behaviors (flex, grid, alignment). For layout composition, use Stack, Flex, or Grid.
+ *
+ * Container uses CSS-layer class .tm-container with token-based padding and max-width.
+ *
+ * @example
+ * ```tsx
+ * // Basic container with width constraint
+ * <Container maxWidth="lg" padding="md">
+ *   <Stack spacing="md">
+ *     <Box>Content</Box>
+ *   </Stack>
+ * </Container>
+ * ```
  */
 
 interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -1116,16 +1337,30 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     center?: boolean;
 }
 /**
- * Container component - layout primitive for constraining content width
+ * Container component - specialized primitive for width constraint and horizontal padding only
  */
 declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Flex Primitive Component
  *
- * Token-driven flexbox container with full control over direction, wrap,
- * grow, shrink, basis, alignment, and spacing. Uses Box internally.
+ * Flex is an advanced flexbox container extension of Box. It provides full control
+ * over flexbox properties (direction, wrap, grow, shrink, basis, alignment, spacing).
+ * Uses Box internally as the base container.
+ *
+ * Use Flex when you need advanced flexbox control beyond what Stack provides.
+ * For simple vertical/horizontal layouts, prefer Stack.
+ *
  * All spacing values use tokens only.
+ *
+ * @example
+ * ```tsx
+ * // Advanced flexbox with wrap and grow
+ * <Flex direction="row" wrap="wrap" gap="md" grow={1}>
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Flex>
+ * ```
  */
 
 interface FlexProps extends Omit<BoxProps, "display" | "flexDirection" | "align" | "justify"> {
@@ -1174,8 +1409,24 @@ declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAtt
 /**
  * Grid Primitive Component
  *
- * Token-driven CSS Grid container with support for columns, rows, gap,
- * flow, and alignment. Uses Box internally. All spacing values use tokens only.
+ * Grid is a CSS Grid container extension of Box. It provides full control
+ * over grid layout properties (columns, rows, gap, flow, alignment).
+ * Uses Box internally as the base container.
+ *
+ * Use Grid for two-dimensional layouts that require precise control over
+ * both rows and columns. For one-dimensional layouts, prefer Stack or Flex.
+ *
+ * All spacing values use tokens only.
+ *
+ * @example
+ * ```tsx
+ * // CSS Grid layout
+ * <Grid cols={3} gap="md" align="center">
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ *   <Box>Item 3</Box>
+ * </Grid>
+ * ```
  */
 
 interface GridProps extends Omit<BoxProps, "display" | "align" | "justify"> {
@@ -1232,26 +1483,25 @@ declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAtt
 /**
  * Row Primitive Component
  *
- * Token-driven horizontal layout component (flex row). Uses Box internally
- * with flex display and row direction. All spacing uses token-based values.
+ * Row is a semantic alias for Stack with horizontal direction.
+ * It provides a more explicit API for horizontal layouts.
+ * Uses Stack internally with direction="horizontal".
+ *
+ * All spacing uses token-based values only.
+ *
+ * @example
+ * ```tsx
+ * <Row spacing="md" align="center">
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Row>
+ * ```
  */
 
-interface RowProps extends Omit<BoxProps, "display" | "flexDirection"> {
-    /**
-     * Gap between row items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
-     */
-    gap?: ResponsiveSpacing;
-    /**
-     * Align items
-     */
-    align?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Justify content
-     */
-    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
+interface RowProps extends Omit<StackProps, "direction"> {
 }
 /**
- * Row component - horizontal layout using flex row
+ * Row component - semantic alias for Stack with horizontal direction
  */
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -1383,7 +1633,7 @@ declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.
 declare const surfaceVariants: (props?: ({
     variant?: "flat" | "raised" | "sunken" | "outline" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p">, VariantProps<typeof surfaceVariants> {
+interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p">, VariantProps$1<typeof surfaceVariants> {
     /**
      * Surface variant
      */
@@ -1437,7 +1687,7 @@ declare const Portal: React$1.ForwardRefExoticComponent<PortalProps & React$1.Re
 declare const backdropVariants: (props?: ({
     variant?: "default" | "transparent" | "blurred" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BackdropProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof backdropVariants> {
+interface BackdropProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps$1<typeof backdropVariants> {
     /**
      * Backdrop variant
      */
@@ -1544,7 +1794,7 @@ interface ToastData {
      */
     duration?: ResponsiveDelay;
 }
-interface ToastRootProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "duration">, VariantProps<typeof toastVariants> {
+interface ToastRootProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "duration">, VariantProps$1<typeof toastVariants> {
     /**
      * Toast data
      */
@@ -2000,7 +2250,7 @@ declare const PopoverArrow: React$1.ForwardRefExoticComponent<PopoverArrowProps
 declare const popoverContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface PopoverContentProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onAnimationEnd">, VariantProps<typeof popoverContentVariants> {
+interface PopoverContentProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onAnimationEnd">, VariantProps$1<typeof popoverContentVariants> {
     /**
      * Placement preference
      */
@@ -2611,7 +2861,7 @@ declare const ContextMenu: {
 declare const skeletonVariants: (props?: ({
     variant?: "block" | "card" | "text" | "circle" | "inline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps$1<typeof skeletonVariants> {
     /**
      * Whether to hide from screen readers
      * @default true
@@ -3302,7 +3552,7 @@ declare const segmentedControlItemVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     state?: "default" | "selected" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "role">, VariantProps<typeof segmentedControlRootVariants> {
+interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "role">, VariantProps$1<typeof segmentedControlRootVariants> {
     /**
      * Controlled value
      */
@@ -3320,7 +3570,7 @@ interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivE
      */
     name?: string;
 }
-interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps<typeof segmentedControlItemVariants> {
+interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps$1<typeof segmentedControlItemVariants> {
     /**
      * Value of this item
      */
@@ -3688,7 +3938,7 @@ declare const iconVariants: (props?: ({
     color?: "muted" | "default" | "success" | "warning" | "danger" | "info" | null | undefined;
     stroke?: "normal" | "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "color" | "stroke">, VariantProps<typeof iconVariants> {
+interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "color" | "stroke">, VariantProps$1<typeof iconVariants> {
     /**
      * Icon name from registry
      */
@@ -4091,4 +4341,4 @@ interface EventCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const EventCard: React$1.ForwardRefExoticComponent<EventCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Alert, type AlertProps, ArtistCard, type ArtistCardProps, type ArtistCardSize, type ArtistCardVariant, Backdrop, type BackdropProps, Body, type BodyProps, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, Caption, type CaptionProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CategoryCard, type CategoryCardProps, type CategoryCardSize, type CategoryCardVariant, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type StackProps as ColumnProps, Container, type ContainerProps, Surface as ContainerSurface, type SurfaceProps as ContainerSurfaceProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DataListRoot as DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListLabelProps, DataListRoot, type DataListRootProps, DataListValue, type DataListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogRoot, DialogTitle, type DialogTitleProps, Display, type DisplayProps, DropdownMenuCheckItem, type DropdownMenuCheckItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuRoot, type DropdownMenuRootProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateAction, type EmptyStateActionProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps, EventCard, type EventCardLayout, type EventCardProps, type EventCardSize, type EventCardVariant, FieldRoot as Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Flex, type FlexProps, Grid, type GridProps, type GroupByFunction, Heading, type HeadingProps, HoverCardContent, type HoverCardContentProps, HoverCardRoot, type HoverCardRootProps, HoverCardTrigger, type HoverCardTriggerProps, ICONS_MAP, Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, type IconProps$1 as IconComponentProps, IconError, IconInfo, IconLocation, IconMenu, type IconName, type IconProps, IconSearch, IconSuccess, IconWarning, Input, type InputProps, Label, type LabelProps, Lead, type LeadProps, Modal, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalRoot, type ModalRootProps, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, NotificationCenter, NotificationCenterDismissAll, type NotificationCenterDismissAllProps, NotificationCenterGroupHeader, type NotificationCenterGroupHeaderProps, NotificationCenterItem, type NotificationCenterItemProps, NotificationCenterList, type NotificationCenterListProps, NotificationCenterPanel, type NotificationCenterPanelProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, type NotificationChannel, type NotificationContextType, type NotificationData, type NotificationOptions, type NotificationVariant, Pagination, type PaginationEllipsisProps, type PaginationItemProps, type PaginationNextProps, type PaginationPrevProps, type PaginationRootProps, PopoverArrow, type PopoverArrowProps, PopoverContent, type PopoverContentProps, PopoverRoot, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PromoCard, type PromoCardProps, type PromoCardSize, type PromoCardVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Responsive, Row, type RowProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlRootProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, type SelectState, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, SelectViewport, type SelectViewportProps, type SelectWidth, Skeleton, type SkeletonProps, type SortDirection, type SortState, Stack, type StackProps, Stepper, type StepperContentProps, type StepperIndicatorProps, type StepperItemProps, type StepperLabelProps, type StepperRootProps, type StepperStep, Surface$1 as Surface, type SurfaceProps$1 as SurfaceProps, TableRoot as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableColumn, type TableContextValue, TableEmpty, type TableEmptyProps, TableExpandableContent, type TableExpandableContentProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoadingState, type TableLoadingStateProps, TableRoot, type TableRootProps, TableRow, type TableRowProps, TableSortIcon, type TableSortIconProps, Tabs, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Text, type TextProps, type TextSize, type TextWeight, Textarea, type TextareaProps, type TicketAvailability, TicketCard, type TicketCardProps, type TicketCardSize, type TicketCardVariant, Toast, ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, alertVariants, bodyVariants, buttonVariants, captionVariants, checkboxVariants, codeVariants, surfaceVariants as containerSurfaceVariants, displayVariants, headingVariants, iconVariants, inputVariants, labelVariants, leadVariants, popoverContentVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, skeletonVariants, surfaceVariants$1 as surfaceVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { Alert, type AlertProps, ArtistCard, type ArtistCardProps, type ArtistCardSize, type ArtistCardVariant, Backdrop, type BackdropProps, Body, type BodyProps, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, Caption, type CaptionProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CategoryCard, type CategoryCardProps, type CategoryCardSize, type CategoryCardVariant, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type StackProps as ColumnProps, Container, type ContainerProps, Surface as ContainerSurface, type SurfaceProps as ContainerSurfaceProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DataListRoot as DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListLabelProps, DataListRoot, type DataListRootProps, DataListValue, type DataListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogRoot, DialogTitle, type DialogTitleProps, Display, type DisplayProps, DropdownMenuCheckItem, type DropdownMenuCheckItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuRoot, type DropdownMenuRootProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateAction, type EmptyStateActionProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps, EventCard, type EventCardLayout, type EventCardProps, type EventCardSize, type EventCardVariant, FieldRoot as Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Flex, type FlexProps, Grid, type GridProps, type GroupByFunction, Heading, type HeadingProps, HoverCardContent, type HoverCardContentProps, HoverCardRoot, type HoverCardRootProps, HoverCardTrigger, type HoverCardTriggerProps, ICONS_MAP, INPUT_TOKENS, Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, type IconProps$1 as IconComponentProps, IconError, IconInfo, IconLocation, IconMenu, type IconName, type IconProps, IconSearch, IconSuccess, IconWarning, Input, type InputProps, InputSize, Label, type LabelProps, Lead, type LeadProps, Modal, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalRoot, type ModalRootProps, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, NotificationCenter, NotificationCenterDismissAll, type NotificationCenterDismissAllProps, NotificationCenterGroupHeader, type NotificationCenterGroupHeaderProps, NotificationCenterItem, type NotificationCenterItemProps, NotificationCenterList, type NotificationCenterListProps, NotificationCenterPanel, type NotificationCenterPanelProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, type NotificationChannel, type NotificationContextType, type NotificationData, type NotificationOptions, type NotificationVariant, Pagination, type PaginationEllipsisProps, type PaginationItemProps, type PaginationNextProps, type PaginationPrevProps, type PaginationRootProps, PopoverArrow, type PopoverArrowProps, PopoverContent, type PopoverContentProps, PopoverRoot, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PromoCard, type PromoCardProps, type PromoCardSize, type PromoCardVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Responsive, Row, type RowProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlRootProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, type SelectState, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, SelectViewport, type SelectViewportProps, type SelectWidth, Skeleton, type SkeletonProps, type SortDirection, type SortState, Stack, type StackProps, Stepper, type StepperContentProps, type StepperIndicatorProps, type StepperItemProps, type StepperLabelProps, type StepperRootProps, type StepperStep, Surface$1 as Surface, type SurfaceProps$1 as SurfaceProps, TableRoot as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableColumn, type TableContextValue, TableEmpty, type TableEmptyProps, TableExpandableContent, type TableExpandableContentProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoadingState, type TableLoadingStateProps, TableRoot, type TableRootProps, TableRow, type TableRowProps, TableSortIcon, type TableSortIconProps, Tabs, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Text, type TextProps, type TextSize, type TextWeight, Textarea, type TextareaProps, type TicketAvailability, TicketCard, type TicketCardProps, type TicketCardSize, type TicketCardVariant, Toast, ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, alertVariants, bodyVariants, buttonVariants, captionVariants, checkboxVariants, codeVariants, surfaceVariants as containerSurfaceVariants, displayVariants, headingVariants, iconVariants, inputVariants, labelVariants, leadVariants, popoverContentVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, skeletonVariants, surfaceVariants$1 as surfaceVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };