@tenerife.music/ui 1.0.15 → 1.1.0

package/dist/index.d.cts

@@ -1,110 +1,209 @@
-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 { d4 as ResponsiveSelectSize, df as SelectVariantToken, d5 as ResponsiveSelectWidth, d7 as ResponsiveSideOffset, cT as ResponsiveAlignOffset, dd as SelectSizeToken, de as SelectStateToken, dg as SelectWidthToken, d0 as ResponsiveModalSize, d1 as ResponsiveModalWidth, c$ as ResponsiveModalHeight, d8 as ResponsiveSpace, cS as RadiusToken, dl as SurfaceToken, cK as ModalFooterAlignToken, dr as Responsive, c as INPUT_TOKENS, a2 as InputSize, d3 as ResponsiveRadius$1, dh as ShadowToken, cW as ResponsiveColor$1, cX as ResponsiveContainerMaxWidth, c_ as ResponsiveFlexBasis, cZ as ResponsiveDelay, ds as ResponsiveContextMenuSize, dt as ResponsiveContextMenuWidth, du as ContextMenuItemToneToken, dv as ResponsiveTabsSize, dw as TabsVariantToken, dx as TabsToneToken, cU as ResponsiveAnimationPreset } from './index-Cj8oRSOc.cjs';
+export { A as ALERT_TOKENS, k as AlertVariant, bj as Animation, B as BUTTON_TOKENS, bM as BorderRadius, dy as Breakpoint, l as ButtonFontSize, m as ButtonHeight, n as ButtonPaddingHorizontal, o as ButtonPaddingVertical, p as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, ch as CanonicalFontSize, ci as CanonicalFontWeight, cj as CanonicalLetterSpacing, ck as CanonicalLineHeight, cl as CanonicalTextColor, q as CardPadding, r as CardRadius, s as CardShadow, t as CardSize, u as CardSpacingVertical, v as CheckboxSize, w as CheckboxState, x as CheckboxVariant, bS as ColoredShadow, bN as ComponentRadius, c4 as ComponentSpacing, c5 as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, y as DataListLabelWidth, z as DataListRowPadding, E as DomainCardBadge, F as DomainCardImage, G as DomainCardLayout, H as DomainCardMetadata, J as DomainCardMotion, K as DomainCardPriceCapacity, L as DomainCardSkeleton, Q as DomainCardSkeletonContentWidth, U as DomainCardSurface, bk as Duration, bl as Easing, bT as ElevationShadow, V as EmptyStateIconSize, bU as FocusRing, cm as FontFamily, cn as FontSize, co as FontWeight, bV as GlowEffect, c6 as GridSpacing, I as ICON_TOKENS, W as IconColor, X as IconSize, Y as IconStroke, Z as InputFontSize, _ as InputHeight, $ as InputPaddingHorizontal, a0 as InputPaddingVertical, a1 as InputRadius, bm as Keyframe, cp as LetterSpacing, cq as LineHeight, M as MENU_TOKENS, d as MOTION_TOKENS, a3 as MenuContentMinWidth, a4 as MenuContentPadding, a5 as MenuContentRadius, a6 as MenuContentShadow, a7 as MenuIndicatorOffset, a8 as MenuIndicatorSize, a9 as MenuItemGap, aa as MenuItemHeight, ab as MenuItemPadding, ac as MenuItemRadius, ad as MenuLabelPadding, ae as MenuSeparatorMargin, af as MotionAnimation, ag as MotionDuration, ah as MotionEasing, ai as MotionTransition, aj as MotionTransitionPreset, by as MotionV2CombinedType, bz as MotionV2Duration, bA as MotionV2Easing, bB as MotionV2SlideDirection, bC as MotionV2Transition, N as NAVIGATION_TOKENS, e as NOTIFICATION_TOKENS, ak as NavigationItemPadding, al as NavigationListGap, am as NavigationRadius, an as NavigationShadow, ao as NavigationSize, ap as NavigationState, aq as NotificationPanelWidth, ar as NotificationTokenVariant, O as OVERLAY_TOKENS, as as OverlayBackdropVariant, at as OverlayModalSize, P as POPOVER_TOKENS, au as PopoverArrowOffset, av as PopoverArrowSize, aw as PopoverContentPadding, ax as PopoverContentRadius, ay as PopoverContentShadow, az as PopoverContentWidth, R as RADIO_TOKENS, aA as RadioSize, aB as RadioState, aC as RadioVariant, S as SECTION_TOKENS, g as SURFACE_TOKENS, h as SWITCH_TOKENS, aD as SectionGap, aE as SectionPadding, c7 as SectionSpacing, c8 as SemanticSpacing, aV as SkeletonAnimation, aW as SkeletonBackground, aX as SkeletonVariant, c9 as Spacing, bn as Spring, ca as StackSpacing, aY as SurfacePadding, aZ as SurfaceRadius, a_ as SurfaceShadow, a$ as SurfaceVariant, b0 as SwitchSize, b1 as SwitchState, b2 as SwitchVariant, T as TEXT_TOKENS, i as TOAST_TOKENS, j as TOOLTIP_TOKENS, b3 as TableCellPadding, b4 as TableGap, b5 as TableHeaderPadding, b6 as TableRowHeight, b7 as TableShadow, b8 as TextFontSize, b9 as TextFontWeight, ba as TextLetterSpacing, bb as TextLineHeight, cr as TextStyle, bc as ToastVariant, bd as TooltipContentRadius, be as TooltipContentShadow, bo as Transition, cg as UI_COLORS, bW as accentColoredShadows, bf as allCSSVariables, bg as allCSSVariablesCSS, bp as animations, bO as borderRadius, bP as componentRadius, bX as componentShadowMapping, bq as durations, br as easings, bY as elevationShadows, bZ as focusRings, cs as fontFamily, ct as fontSize, cu as fontSizeWithMd, cv as fontWeight, bh as generateCSSVariablesCSS, b_ as glowEffects, bs as keyframes, cb as layoutSpacing, cw as letterSpacing, cx as lineHeight, bt as motionCSSVariables, bD as motionV2CSSVariables, bE as motionV2Combined, bF as motionV2Durations, bG as motionV2Easings, bH as motionV2Fade, bI as motionV2Scale, bJ as motionV2Slide, bK as motionV2TailwindConfig, bL as motionV2Transitions, b$ as primaryColoredShadows, bQ as radiusCSSVariables, bu as reducedMotion, cc as semanticSpacing, c0 as shadowBase, c1 as shadowCSSVariables, c2 as shadowOpacity, cd as spacing, ce as spacingCSSVariables, bv as springs, bw as tailwindMotionConfig, bR as tailwindRadiusConfig, c3 as tailwindShadowConfig, cf as tailwindSpacingConfig, cy as tailwindTypographyConfig, cz as textStyles, bi as tokenSystemSummary, bx as transitions, cA as typographyCSSVariables } from './index-Cj8oRSOc.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 React__default, { 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';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Placement } from '@floating-ui/react-dom';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 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 "@/FOUNDATION/lib/token-cva";
+ * import { BUTTON_TOKENS } from "@/FOUNDATION/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>>;
 
-declare const bodyVariants: (props?: ({
-    size?: "md" | "lg" | null | undefined;
-    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> {
-    as?: "p" | "span" | "div";
-}
-declare const Body: React$1.ForwardRefExoticComponent<BodyProps & React$1.RefAttributes<HTMLElement>>;
-
-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> {
-    as?: "span" | "p" | "div";
-}
-declare const Caption: React$1.ForwardRefExoticComponent<CaptionProps & React$1.RefAttributes<HTMLElement>>;
-
-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> {
-    as?: "code" | "pre";
-}
-declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLElement>>;
-
-declare const displayVariants: (props?: ({
-    size?: "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
-    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> {
-    as?: "h1" | "h2" | "div";
-}
-declare const Display: React$1.ForwardRefExoticComponent<DisplayProps & React$1.RefAttributes<HTMLElement>>;
-
 declare const headingVariants: (props?: ({
     level?: 1 | 2 | 4 | 6 | 3 | 5 | null | undefined;
     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>>;
 
-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> {
-    as?: "p" | "span" | "div";
-}
-declare const Lead: React$1.ForwardRefExoticComponent<LeadProps & React$1.RefAttributes<HTMLElement>>;
-
 interface SelectRootProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
 }
 /**
@@ -433,7 +532,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"
@@ -513,6 +612,57 @@ interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare const labelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps$1<typeof labelVariants> {
+    /**
+     * Whether the field is required (shows asterisk)
+     */
+    required?: boolean;
+}
+declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * Field Container Component
+ * Provides spacing between field elements using Stack
+ */
+interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Field Label Component
+ * Wraps Label component with proper styling
+ */
+interface FieldLabelProps extends React$1.ComponentProps<typeof Label> {
+}
+declare const FieldLabel: React$1.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+/**
+ * Field Control Component
+ * Wrapper for input/textarea/select controls
+ */
+interface FieldControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const FieldControl: React$1.ForwardRefExoticComponent<FieldControlProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Field Description Component
+ * Helper text displayed below the control
+ */
+interface FieldDescriptionProps extends React$1.ComponentProps<typeof Text> {
+}
+declare const FieldDescription: React$1.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * Field Error Component
+ * Error message displayed below the control
+ */
+interface FieldErrorProps extends React$1.ComponentProps<typeof Text> {
+}
+declare const FieldError: React$1.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const FieldRoot: typeof Field & {
+    Label: typeof FieldLabel;
+    Control: typeof FieldControl;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+};
+
 /**
  * Input Variants
  *
@@ -528,22 +678,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 +792,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 +936,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"
@@ -798,56 +988,34 @@ 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> {
-    /**
-     * Whether the field is required (shows asterisk)
-     */
-    required?: boolean;
+interface ProgressProps {
+    value: number;
+    max?: number;
+    className?: string;
 }
-declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+declare const Progress: React__default.FC<ProgressProps>;
 
-/**
- * Field Container Component
- * Provides spacing between field elements using Stack
- */
-interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Field Label Component
- * Wraps Label component with proper styling
- */
-interface FieldLabelProps extends React$1.ComponentProps<typeof Label> {
-}
-declare const FieldLabel: React$1.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
-/**
- * Field Control Component
- * Wrapper for input/textarea/select controls
- */
-interface FieldControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-declare const FieldControl: React$1.ForwardRefExoticComponent<FieldControlProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Field Description Component
- * Helper text displayed below the control
- */
-interface FieldDescriptionProps extends React$1.ComponentProps<typeof Text> {
+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$1<typeof skeletonVariants> {
+    /**
+     * Whether to hide from screen readers
+     * @default true
+     */
+    "aria-hidden"?: boolean;
 }
-declare const FieldDescription: React$1.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 /**
- * Field Error Component
- * Error message displayed below the control
+ * Skeleton component for loading states
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" />
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="card" />
+ * ```
  */
-interface FieldErrorProps extends React$1.ComponentProps<typeof Text> {
-}
-declare const FieldError: React$1.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
-declare const FieldRoot: typeof Field & {
-    Label: typeof FieldLabel;
-    Control: typeof FieldControl;
-    Description: typeof FieldDescription;
-    Error: typeof FieldError;
-};
+declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Layout Primitives Shared Types
@@ -887,10 +1055,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
  */
@@ -931,17 +1095,32 @@ type ResponsiveRows = Responsive<RowValue>;
  * Responsive flow prop type
  */
 type ResponsiveFlow = Responsive<FlowValue>;
-/**
- * Surface variant values
- */
-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 +1187,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 +1199,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 +1208,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 +1256,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 +1268,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 +1307,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 +1379,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,46 +1453,51 @@ 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>>;
 
-declare const surfaceVariants$1: (props?: ({
-    variant?: "flat" | "raised" | "sunken" | null | undefined;
+declare const surfaceVariants: (props?: ({
+    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SurfaceProps$1 extends Omit<BoxProps, "bg" | "shadow"> {
+interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p">, VariantProps$1<typeof surfaceVariants> {
     /**
      * Surface variant
      */
-    variant?: SurfaceVariant;
+    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle";
     /**
-     * Border radius - token-based
+     * Padding - token-based (sm, md, lg, xl)
+     * Overrides default variant padding
+     */
+    p?: ResponsiveSpacing;
+    /**
+     * Border radius - token-based (sm, md, lg, xl, 2xl, 3xl, full)
+     * Overrides default variant radius
      */
-    radius?: BoxProps["radius"];
+    radius?: ResponsiveRadius;
 }
 /**
- * Surface component - elevation variant component
+ * Surface component - elevation variant container
  */
-declare const Surface$1: React$1.ForwardRefExoticComponent<SurfaceProps$1 & React$1.RefAttributes<HTMLDivElement>>;
+declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Card Container Component
@@ -1380,30 +1606,6 @@ interface SectionProps extends Omit<StackProps, "py" | "gap"> {
  */
 declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.RefAttributes<HTMLDivElement>>;
 
-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> {
-    /**
-     * Surface variant
-     */
-    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle";
-    /**
-     * Padding - token-based (sm, md, lg, xl)
-     * Overrides default variant padding
-     */
-    p?: ResponsiveSpacing;
-    /**
-     * Border radius - token-based (sm, md, lg, xl, 2xl, 3xl, full)
-     * Overrides default variant radius
-     */
-    radius?: ResponsiveRadius;
-}
-/**
- * Surface component - elevation variant container
- */
-declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
-
 /**
  * Portal Component
  *
@@ -1437,7 +1639,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 +1746,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
      */
@@ -1656,118 +1858,403 @@ declare function ToastProvider({ children, position, swipeDirection, duration, }
  */
 declare function useToast(): ToastContextType;
 
+declare function Toaster(): react_jsx_runtime.JSX.Element;
+
 /**
- * NotificationCenter.DismissAll Component
+ * ============================================================================
+ * 🔒 FOUNDATION LOCK - ContextMenu Component
+ * ============================================================================
  *
- * Button component to clear all notifications.
- * Located in Panel header.
+ * This component is LOCKED as part of the UI Foundation Layer.
+ *
+ * **ARCHITECTURE LOCK DOCUMENTATION:**
+ * See: docs/architecture/TUI_ARCHITECTURE_LOCK.md
+ *
+ * This component must not be modified except for critical bug fixes.
+ * All architectural decisions are final. Museum-grade quality achieved.
+ *
+ * LOCKED STATUS:
+ * - Component: ContextMenu (Radix ContextMenu wrapper)
+ * - Category: Menus (Foundation Layer)
+ * - Lock Date: 2025-12-12
+ * - Status: ✅ LOCKED (FOUNDATION_LOCKED)
+ *
+ * ALLOWED CHANGES (Minimal, approval required):
+ * - Critical bug fixes only (with explicit approval)
+ * - Typing improvements (TypeScript only, no runtime changes)
+ * - Token wiring improvements (connecting existing tokens, no new tokens)
+ * - Stories/tests fixes (test updates only, no component changes)
+ * - Documentation updates (comments, docs only)
+ * - Code comments explaining intentional design decisions
+ *
+ * FORBIDDEN CHANGES (Strictly prohibited):
+ * - ❌ New foundation components or subcomponents
+ * - ❌ Duplicate component implementations
+ * - ❌ Custom behavior that Radix ContextMenu should handle
+ * - ❌ String/number visual props (must use tokens only)
+ * - ❌ Re-implementing focus/keyboard/aria/portal logic
+ * - ❌ Breaking API changes
+ * - ❌ Behavioral rewrites or custom logic additions
+ * - ❌ Token system modifications (additions/removals)
+ * - ❌ Style modifications beyond token wiring
+ * - ❌ New props that change component behavior
+ *
+ * **If you believe changes are necessary, review TUI_ARCHITECTURE_LOCK.md first.**
+ *
+ * ============================================================================
+ *
+ * ContextMenu Component
+ *
+ * Radix-based context menu component with token-driven styling.
+ * All behavior (pointer, keyboard, focus, ARIA, positioning, collision handling)
+ * is handled by Radix ContextMenu. Tenerife UI provides visual styling through
+ * tokens only. This is a strict wrapper pattern - no custom behavior logic.
  */
 
-interface NotificationCenterDismissAllProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+type ContextMenuRootProps = React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
+/**
+ * ContextMenu Root component
+ * Radix Root is a context provider, not a DOM element, so it doesn't accept refs
+ */
+declare const ContextMenuRoot: React$1.FC<ContextMenuRootProps>;
+interface ContextMenuTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>, "children"> {
+    children?: React$1.ReactNode;
+}
+/**
+ * ContextMenu Trigger component
+ * Radix handles right-click behavior automatically
+ */
+declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface ContextMenuContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>, "size" | "width" | "padding" | "radius" | "surface"> {
     /**
-     * Show confirmation before clearing
+     * Size variant - token-based
      */
-    confirm?: boolean;
+    size?: ResponsiveContextMenuSize;
     /**
-     * Confirmation message
+     * Width - token-based
      */
-    confirmMessage?: string;
+    width?: ResponsiveContextMenuWidth;
+    /**
+     * Padding - token-based
+     */
+    padding?: ResponsiveSpace;
+    /**
+     * Radius - token-based
+     */
+    radius?: RadiusToken;
+    /**
+     * Surface variant - token-based
+     */
+    surface?: SurfaceToken;
 }
 /**
- * NotificationCenter.DismissAll component - clear all notifications button
+ * ContextMenu Content component
+ * Wrapper around Radix ContextMenu Content with token-based styling.
  */
-declare const NotificationCenterDismissAll: React$1.ForwardRefExoticComponent<NotificationCenterDismissAllProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-interface NotificationCenterGroupHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const ContextMenuContent: React$1.ForwardRefExoticComponent<ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>, "children"> {
+    children?: React$1.ReactNode;
     /**
-     * Group label text
+     * Size variant - token-based
+     *
+     * @default Inherited from ContextMenuContent
+     * @note If not specified, the size is automatically inherited from the parent
+     * ContextMenuContent. You can override this by providing an explicit size prop.
+     * This allows you to set size once on Content and have all Items inherit it.
      */
-    label: string;
+    size?: ResponsiveContextMenuSize;
     /**
-     * Whether the group is collapsed
+     * Tone variant - token-based
      */
-    collapsed?: boolean;
+    tone?: ContextMenuItemToneToken;
     /**
-     * Callback when collapse/expand is toggled
+     * Gap between item content - token-based
      */
-    onToggleCollapse?: () => void;
+    gap?: ResponsiveSpace;
     /**
-     * Show collapse/expand button
+     * Inset padding for item
      */
-    collapsible?: boolean;
+    inset?: boolean;
 }
 /**
- * NotificationCenter.GroupHeader component - group section header
- */
-declare const NotificationCenterGroupHeader: React$1.ForwardRefExoticComponent<NotificationCenterGroupHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * Notification Center Types
- *
- * Type definitions for Notification Center components.
- */
-
-/**
- * Notification channel types
+ * ContextMenu Item component
+ * Wrapper around Radix ContextMenu Item with token-based styling.
  */
-type NotificationChannel = "success" | "error" | "info" | "warning" | "system" | "log";
+declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuCheckboxItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>, "children"> {
+    children?: React$1.ReactNode;
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveContextMenuSize;
+    /**
+     * Tone variant - token-based
+     */
+    tone?: ContextMenuItemToneToken;
+    /**
+     * Gap between item content - token-based
+     */
+    gap?: ResponsiveSpace;
+}
 /**
- * Notification variant (extends toast variants)
+ * ContextMenu CheckboxItem component
+ * Wrapper around Radix ContextMenu CheckboxItem with token-based styling.
  */
-type NotificationVariant = "default" | "success" | "info" | "warning" | "danger" | "system" | "log";
+declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuRadioGroupProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>, "children"> {
+    children?: React$1.ReactNode;
+}
 /**
- * Notification data structure
+ * ContextMenu RadioGroup component
+ * Wrapper around Radix ContextMenu RadioGroup.
  */
-interface NotificationData {
-    id: string;
-    title?: string;
-    description?: string;
-    variant?: NotificationVariant;
-    channel?: NotificationChannel;
-    action?: ToastActionData;
+declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuRadioItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>, "children"> {
+    children?: React$1.ReactNode;
     /**
-     * Notification duration - token-based
-     * Uses motion duration tokens
+     * Size variant - token-based
      */
-    duration?: ResponsiveDelay;
-    persistent?: boolean;
-    timestamp: number;
-    read?: boolean;
+    size?: ResponsiveContextMenuSize;
+    /**
+     * Tone variant - token-based
+     */
+    tone?: ContextMenuItemToneToken;
+    /**
+     * Gap between item content - token-based
+     */
+    gap?: ResponsiveSpace;
 }
 /**
- * Notification options for creating notifications
+ * ContextMenu RadioItem component
+ * Wrapper around Radix ContextMenu RadioItem with token-based styling.
  */
-interface NotificationOptions {
-    title?: string;
-    description?: string;
-    variant?: NotificationVariant;
-    channel?: NotificationChannel;
-    action?: ToastActionData;
+declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSeparatorProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {
+    className?: string;
+}
+/**
+ * ContextMenu Separator component
+ * Wrapper around Radix ContextMenu Separator with token-based styling.
+ */
+declare const ContextMenuSeparator: React$1.ForwardRefExoticComponent<ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuLabelProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>, "children"> {
+    children?: React$1.ReactNode;
     /**
-     * Notification duration - token-based
-     * Uses motion duration tokens
+     * Padding - token-based
      */
-    duration?: ResponsiveDelay;
-    persistent?: boolean;
+    padding?: ResponsiveSpace;
 }
 /**
- * Group by function type
+ * ContextMenu Label component
+ * Wrapper around Radix ContextMenu Label with token-based styling.
  */
-type GroupByFunction = (notification: NotificationData) => string;
+declare const ContextMenuLabel: React$1.ForwardRefExoticComponent<ContextMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSubProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub> {
+    children?: React$1.ReactNode;
+}
 /**
- * Notification context type
+ * ContextMenu Sub component
+ * Wrapper around Radix ContextMenu Sub.
  */
-interface NotificationContextType {
+declare const ContextMenuSub: React$1.FC<ContextMenuSubProps>;
+interface ContextMenuSubTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>, "children"> {
+    children?: React$1.ReactNode;
     /**
-     * Push a new notification
+     * Size variant - token-based
      */
-    push: (notification: NotificationOptions) => string;
+    size?: ResponsiveContextMenuSize;
     /**
-     * Remove a specific notification by ID
+     * Tone variant - token-based
      */
-    remove: (id: string) => void;
+    tone?: ContextMenuItemToneToken;
     /**
-     * Clear all notifications
+     * Gap between item content - token-based
+     */
+    gap?: ResponsiveSpace;
+}
+/**
+ * ContextMenu SubTrigger component
+ * Wrapper around Radix ContextMenu SubTrigger with token-based styling.
+ */
+declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSubContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>, "size" | "width" | "padding" | "radius" | "surface"> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveContextMenuSize;
+    /**
+     * Width - token-based
+     */
+    width?: ResponsiveContextMenuWidth;
+    /**
+     * Padding - token-based
+     */
+    padding?: ResponsiveSpace;
+    /**
+     * Radius - token-based
+     */
+    radius?: RadiusToken;
+    /**
+     * Surface variant - token-based
+     */
+    surface?: SurfaceToken;
+}
+/**
+ * ContextMenu SubContent component
+ * Wrapper around Radix ContextMenu SubContent with token-based styling.
+ */
+declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ContextMenu Component
+ *
+ * Radix ContextMenu-based component with token-driven styling.
+ *
+ * **Usage:**
+ * ```tsx
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>Right-click me</ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item>Item 1</ContextMenu.Item>
+ *     <ContextMenu.Item>Item 2</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Sub>
+ *       <ContextMenu.SubTrigger>Submenu</ContextMenu.SubTrigger>
+ *       <ContextMenu.SubContent>
+ *         <ContextMenu.Item>Sub Item 1</ContextMenu.Item>
+ *       </ContextMenu.SubContent>
+ *     </ContextMenu.Sub>
+ *   </ContextMenu.Content>
+ * </ContextMenu.Root>
+ * ```
+ */
+declare const ContextMenu: {
+    Root: React$1.FC<ContextMenuPrimitive.ContextMenuProps>;
+    Trigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
+    Content: React$1.ForwardRefExoticComponent<ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
+    RadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+    RadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
+    Separator: React$1.ForwardRefExoticComponent<ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+    Label: React$1.ForwardRefExoticComponent<ContextMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+    Sub: React$1.FC<ContextMenuSubProps>;
+    SubTrigger: React$1.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
+    SubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * NotificationCenter.DismissAll Component
+ *
+ * Button component to clear all notifications.
+ * Located in Panel header.
+ */
+
+interface NotificationCenterDismissAllProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Show confirmation before clearing
+     */
+    confirm?: boolean;
+    /**
+     * Confirmation message
+     */
+    confirmMessage?: string;
+}
+/**
+ * NotificationCenter.DismissAll component - clear all notifications button
+ */
+declare const NotificationCenterDismissAll: React$1.ForwardRefExoticComponent<NotificationCenterDismissAllProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface NotificationCenterGroupHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Group label text
+     */
+    label: string;
+    /**
+     * Whether the group is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapse/expand is toggled
+     */
+    onToggleCollapse?: () => void;
+    /**
+     * Show collapse/expand button
+     */
+    collapsible?: boolean;
+}
+/**
+ * NotificationCenter.GroupHeader component - group section header
+ */
+declare const NotificationCenterGroupHeader: React$1.ForwardRefExoticComponent<NotificationCenterGroupHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Notification Center Types
+ *
+ * Type definitions for Notification Center components.
+ */
+
+/**
+ * Notification channel types
+ */
+type NotificationChannel = "success" | "error" | "info" | "warning" | "system" | "log";
+/**
+ * Notification variant (extends toast variants)
+ */
+type NotificationVariant = "default" | "success" | "info" | "warning" | "danger" | "system" | "log";
+/**
+ * Notification data structure
+ */
+interface NotificationData {
+    id: string;
+    title?: string;
+    description?: string;
+    variant?: NotificationVariant;
+    channel?: NotificationChannel;
+    action?: ToastActionData;
+    /**
+     * Notification duration - token-based
+     * Uses motion duration tokens
+     */
+    duration?: ResponsiveDelay;
+    persistent?: boolean;
+    timestamp: number;
+    read?: boolean;
+}
+/**
+ * Notification options for creating notifications
+ */
+interface NotificationOptions {
+    title?: string;
+    description?: string;
+    variant?: NotificationVariant;
+    channel?: NotificationChannel;
+    action?: ToastActionData;
+    /**
+     * Notification duration - token-based
+     * Uses motion duration tokens
+     */
+    duration?: ResponsiveDelay;
+    persistent?: boolean;
+}
+/**
+ * Group by function type
+ */
+type GroupByFunction = (notification: NotificationData) => string;
+/**
+ * Notification context type
+ */
+interface NotificationContextType {
+    /**
+     * Push a new notification
+     */
+    push: (notification: NotificationOptions) => string;
+    /**
+     * Remove a specific notification by ID
+     */
+    remove: (id: string) => void;
+    /**
+     * Clear all notifications
      */
     clearAll: () => void;
     /**
@@ -1979,50 +2466,45 @@ declare const NotificationCenter: {
     DismissAll: React$1.ForwardRefExoticComponent<NotificationCenterDismissAllProps & React$1.RefAttributes<HTMLButtonElement>>;
 };
 
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "sideOffset" | "alignOffset"> & VariantProps$1<(props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    sideOffset?: ResponsiveSideOffset;
+    alignOffset?: ResponsiveAlignOffset;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
- * Popover Arrow Component
+ * HoverCard Content Component
  *
- * Arrow indicator pointing to the trigger element.
- * Uses POPOVER_TOKENS for sizing and positioning.
+ * Content container for HoverCard.
+ * Wraps PopoverContent with hover-specific behavior.
  */
 
-interface PopoverArrowProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Arrow size
-     */
-    size?: "sm" | "md";
+interface HoverCardContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof PopoverContent>, "onMouseEnter" | "onMouseLeave"> {
+    onMouseEnter?: React$1.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React$1.MouseEventHandler<HTMLDivElement>;
 }
 /**
- * Popover Arrow component
+ * HoverCard Content component
  */
-declare const PopoverArrow: React$1.ForwardRefExoticComponent<PopoverArrowProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const HoverCardContent: React$1.ForwardRefExoticComponent<HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
-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> {
-    /**
-     * Placement preference
-     */
-    placement?: Placement;
+interface HoverCardRootProps {
     /**
-     * Offset between trigger and content - token-based
-     * Uses spacing tokens for positioning offsets
+     * Delay before opening - token-based
+     * Uses motion duration tokens
+     * @default 0
      */
-    offset?: ResponsiveAlignOffset;
+    openDelay?: ResponsiveDelay;
     /**
-     * Whether to close on outside click
+     * Delay before closing - token-based
+     * Uses motion duration tokens
+     * @default 300
      */
-    closeOnInteractOutside?: boolean;
-}
-/**
- * Popover Content component
- */
-declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-interface PopoverRootProps {
+    closeDelay?: ResponsiveDelay;
     /**
-     * Whether the popover is open (controlled mode)
+     * Whether the hover card is open (controlled mode)
      */
     open?: boolean;
     /**
@@ -2034,7 +2516,7 @@ interface PopoverRootProps {
      */
     defaultOpen?: boolean;
     /**
-     * Whether the popover is modal (blocks interaction with other elements)
+     * Whether the hover card is modal (blocks interaction with other elements)
      */
     modal?: boolean;
     /**
@@ -2043,1537 +2525,980 @@ interface PopoverRootProps {
     children: React$1.ReactNode;
 }
 /**
- * Popover Root component
+ * HoverCard Root component
  */
-declare function PopoverRoot({ open: controlledOpen, onOpenChange, defaultOpen, children, }: PopoverRootProps): react_jsx_runtime.JSX.Element;
-declare namespace PopoverRoot {
+declare function HoverCardRoot({ openDelay, closeDelay, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, modal, ...props }: HoverCardRootProps): react_jsx_runtime.JSX.Element;
+declare namespace HoverCardRoot {
     var displayName: string;
 }
 
 /**
- * Popover Trigger Component
+ * HoverCard Trigger Component
  *
- * Trigger element that opens/closes the popover.
- * Supports asChild pattern for composition.
+ * Trigger element that opens HoverCard on hover/focus.
  */
 
-interface PopoverTriggerProps extends React$1.HTMLAttributes<HTMLElement> {
+interface HoverCardTriggerProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * Render as child element (composition pattern)
      */
     asChild?: boolean;
 }
 /**
- * Popover Trigger component
+ * HoverCard Trigger component
  */
-declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverTriggerProps & React$1.RefAttributes<HTMLElement>>;
+declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardTriggerProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * DropdownMenu Item Component
+ * DataList Root Component
  *
- * Menu item with keyboard navigation support (roving tabindex).
- * Uses MENU_TOKENS for styling.
+ * Mobile-first data list component for displaying key-value pairs.
+ * Uses Stack for vertical layout and DATA_LIST_TOKENS for spacing.
  */
 
-interface DropdownMenuItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSelect"> {
-    /**
-     * Whether the item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the item is selected
-     */
-    selected?: boolean;
-    /**
-     * Callback when item is selected
-     * Receives native Event (not SyntheticEvent)
-     */
-    onSelect?: (event: Event) => void;
+interface DataListRootProps extends React$1.HTMLAttributes<HTMLDListElement> {
     /**
-     * Whether item has inset padding (for nested items)
+     * Label width for desktop layout
+     * @default "md"
      */
-    inset?: boolean;
+    labelWidth?: "sm" | "md" | "lg";
 }
 /**
- * DropdownMenu Item component
+ * DataList Root component
+ *
+ * @example
+ * ```tsx
+ * <DataList.Root>
+ *   <DataList.Item>
+ *     <DataList.Label>Name</DataList.Label>
+ *     <DataList.Value>John Doe</DataList.Value>
+ *   </DataList.Item>
+ * </DataList.Root>
+ * ```
  */
-declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DataListRoot: React$1.ForwardRefExoticComponent<DataListRootProps & React$1.RefAttributes<HTMLDListElement>>;
 
 /**
- * DropdownMenu CheckItem Component
+ * Tabs Component
  *
- * Menu item with checkbox indicator.
- * Uses MENU_TOKENS for styling.
+ * Radix-based tabs component with token-driven styling.
+ * All behavior (keyboard navigation, focus management, a11y) is handled by Radix.
+ * Tenerife UI provides visual styling through tokens only.
  */
 
-interface DropdownMenuCheckItemProps extends Omit<DropdownMenuItemProps, "selected"> {
+interface TabsRootProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+}
+interface TabsListProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "size" | "variant"> {
     /**
-     * Whether the item is checked
+     * Size variant - token-based
      */
-    checked?: boolean;
-}
-/**
- * DropdownMenu CheckItem component
- */
-declare const DropdownMenuCheckItem: React$1.ForwardRefExoticComponent<DropdownMenuCheckItemProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu Content Component
- *
- * Content container for dropdown menu.
- * Wraps PopoverContent with menu-specific styling and role.
- * Handles keyboard navigation (Arrow keys, Home/End, Escape).
- */
-
-interface DropdownMenuContentProps extends PopoverContentProps {
-}
-/**
- * DropdownMenu Content component
- */
-declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu Group Component
- *
- * Group container for related menu items.
- */
-
-interface DropdownMenuGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * DropdownMenu Group component
- */
-declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu Label Component
- *
- * Label/section header for menu items.
- * Uses MENU_TOKENS for styling.
- */
-
-interface DropdownMenuLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Whether label has inset padding (for nested items)
-     */
-    inset?: boolean;
-}
-/**
- * DropdownMenu Label component
- */
-declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu RadioGroup Component
- *
- * Radio group container for radio menu items.
- */
-
-interface DropdownMenuRadioGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Selected value
-     */
-    value?: string;
-    /**
-     * Callback when value changes
-     */
-    onValueChange?: (value: string) => void;
-}
-/**
- * DropdownMenu RadioGroup component
- */
-declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu RadioItem Component
- *
- * Menu item with radio indicator.
- * Uses MENU_TOKENS for styling.
- */
-
-interface DropdownMenuRadioItemProps extends Omit<DropdownMenuItemProps, "selected"> {
-    /**
-     * Radio item value
-     */
-    value: string;
-}
-/**
- * DropdownMenu RadioItem component
- */
-declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
-
-interface DropdownMenuRootProps extends PopoverRootProps {
-}
-/**
- * DropdownMenu Root component
- */
-declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
-declare namespace DropdownMenuRoot {
-    var displayName: string;
-}
-
-/**
- * DropdownMenu Separator Component
- *
- * Visual separator between menu items.
- * Uses MENU_TOKENS for styling.
- */
-
-interface DropdownMenuSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * DropdownMenu Separator component
- */
-declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
-
-interface DropdownMenuSubProps extends PopoverRootProps {
-}
-/**
- * DropdownMenu Sub component
- */
-declare function DropdownMenuSub(props: DropdownMenuSubProps): react_jsx_runtime.JSX.Element;
-declare namespace DropdownMenuSub {
-    var displayName: string;
-}
-
-/**
- * DropdownMenu SubContent Component
- *
- * Content container for submenu.
- */
-
-interface DropdownMenuSubContentProps extends DropdownMenuContentProps {
-}
-/**
- * DropdownMenu SubContent component
- */
-declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu SubTrigger Component
- *
- * Trigger for submenu items.
- */
-
-interface DropdownMenuSubTriggerProps extends DropdownMenuItemProps {
-}
-/**
- * DropdownMenu SubTrigger component
- */
-declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DropdownMenu Trigger Component
- *
- * Trigger element for dropdown menu.
- * Wraps PopoverTrigger with menu-specific ARIA attributes.
- */
-
-interface DropdownMenuTriggerProps extends PopoverTriggerProps {
-}
-/**
- * DropdownMenu Trigger component
- */
-declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuTriggerProps & React$1.RefAttributes<HTMLElement>>;
-
-/**
- * HoverCard Content Component
- *
- * Content container for HoverCard.
- * Wraps PopoverContent with hover-specific behavior.
- */
-
-interface HoverCardContentProps extends PopoverContentProps {
-}
-/**
- * HoverCard Content component
- */
-declare const HoverCardContent: React$1.ForwardRefExoticComponent<HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-interface HoverCardRootProps extends Omit<PopoverRootProps, "open" | "onOpenChange"> {
-    /**
-     * Delay before opening - token-based
-     * Uses motion duration tokens
-     * @default 0
-     */
-    openDelay?: ResponsiveDelay;
-    /**
-     * Delay before closing - token-based
-     * Uses motion duration tokens
-     * @default 300
-     */
-    closeDelay?: ResponsiveDelay;
-}
-/**
- * HoverCard Root component
- */
-declare function HoverCardRoot({ openDelay, closeDelay, defaultOpen, ...props }: HoverCardRootProps): react_jsx_runtime.JSX.Element;
-declare namespace HoverCardRoot {
-    var displayName: string;
-}
-
-/**
- * HoverCard Trigger Component
- *
- * Trigger element that opens HoverCard on hover/focus.
- */
-
-interface HoverCardTriggerProps extends PopoverTriggerProps {
-}
-/**
- * HoverCard Trigger component
- */
-declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardTriggerProps & React$1.RefAttributes<HTMLElement>>;
-
-/**
- * ============================================================================
- * 🔒 FOUNDATION LOCK - ContextMenu Component
- * ============================================================================
- *
- * This component is LOCKED as part of the UI Foundation Layer.
- *
- * **ARCHITECTURE LOCK DOCUMENTATION:**
- * See: docs/architecture/TUI_ARCHITECTURE_LOCK.md
- *
- * This component must not be modified except for critical bug fixes.
- * All architectural decisions are final. Museum-grade quality achieved.
- *
- * LOCKED STATUS:
- * - Component: ContextMenu (Radix ContextMenu wrapper)
- * - Category: Menus (Foundation Layer)
- * - Lock Date: 2025-12-12
- * - Status: ✅ LOCKED (FOUNDATION_LOCKED)
- *
- * ALLOWED CHANGES (Minimal, approval required):
- * - Critical bug fixes only (with explicit approval)
- * - Typing improvements (TypeScript only, no runtime changes)
- * - Token wiring improvements (connecting existing tokens, no new tokens)
- * - Stories/tests fixes (test updates only, no component changes)
- * - Documentation updates (comments, docs only)
- * - Code comments explaining intentional design decisions
- *
- * FORBIDDEN CHANGES (Strictly prohibited):
- * - ❌ New foundation components or subcomponents
- * - ❌ Duplicate component implementations
- * - ❌ Custom behavior that Radix ContextMenu should handle
- * - ❌ String/number visual props (must use tokens only)
- * - ❌ Re-implementing focus/keyboard/aria/portal logic
- * - ❌ Breaking API changes
- * - ❌ Behavioral rewrites or custom logic additions
- * - ❌ Token system modifications (additions/removals)
- * - ❌ Style modifications beyond token wiring
- * - ❌ New props that change component behavior
- *
- * **If you believe changes are necessary, review TUI_ARCHITECTURE_LOCK.md first.**
- *
- * ============================================================================
- *
- * ContextMenu Component
- *
- * Radix-based context menu component with token-driven styling.
- * All behavior (pointer, keyboard, focus, ARIA, positioning, collision handling)
- * is handled by Radix ContextMenu. Tenerife UI provides visual styling through
- * tokens only. This is a strict wrapper pattern - no custom behavior logic.
- */
-
-type ContextMenuRootProps = React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
-/**
- * ContextMenu Root component
- * Radix Root is a context provider, not a DOM element, so it doesn't accept refs
- */
-declare const ContextMenuRoot: React$1.FC<ContextMenuRootProps>;
-interface ContextMenuTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>, "children"> {
-    children?: React$1.ReactNode;
-}
-/**
- * ContextMenu Trigger component
- * Radix handles right-click behavior automatically
- */
-declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
-interface ContextMenuContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>, "size" | "width" | "padding" | "radius" | "surface"> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Width - token-based
-     */
-    width?: ResponsiveContextMenuWidth;
-    /**
-     * Padding - token-based
-     */
-    padding?: ResponsiveSpace;
-    /**
-     * Radius - token-based
-     */
-    radius?: RadiusToken;
-    /**
-     * Surface variant - token-based
-     */
-    surface?: SurfaceToken;
-}
-/**
- * ContextMenu Content component
- * Wrapper around Radix ContextMenu Content with token-based styling.
- */
-declare const ContextMenuContent: React$1.ForwardRefExoticComponent<ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>, "children"> {
-    children?: React$1.ReactNode;
-    /**
-     * Size variant - token-based
-     *
-     * @default Inherited from ContextMenuContent
-     * @note If not specified, the size is automatically inherited from the parent
-     * ContextMenuContent. You can override this by providing an explicit size prop.
-     * This allows you to set size once on Content and have all Items inherit it.
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Tone variant - token-based
-     */
-    tone?: ContextMenuItemToneToken;
-    /**
-     * Gap between item content - token-based
-     */
-    gap?: ResponsiveSpace;
-    /**
-     * Inset padding for item
-     */
-    inset?: boolean;
-}
-/**
- * ContextMenu Item component
- * Wrapper around Radix ContextMenu Item with token-based styling.
- */
-declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuCheckboxItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>, "children"> {
-    children?: React$1.ReactNode;
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Tone variant - token-based
-     */
-    tone?: ContextMenuItemToneToken;
-    /**
-     * Gap between item content - token-based
-     */
-    gap?: ResponsiveSpace;
-}
-/**
- * ContextMenu CheckboxItem component
- * Wrapper around Radix ContextMenu CheckboxItem with token-based styling.
- */
-declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuRadioGroupProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>, "children"> {
-    children?: React$1.ReactNode;
-}
-/**
- * ContextMenu RadioGroup component
- * Wrapper around Radix ContextMenu RadioGroup.
- */
-declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuRadioItemProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>, "children"> {
-    children?: React$1.ReactNode;
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Tone variant - token-based
-     */
-    tone?: ContextMenuItemToneToken;
-    /**
-     * Gap between item content - token-based
-     */
-    gap?: ResponsiveSpace;
-}
-/**
- * ContextMenu RadioItem component
- * Wrapper around Radix ContextMenu RadioItem with token-based styling.
- */
-declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuSeparatorProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {
-    className?: string;
-}
-/**
- * ContextMenu Separator component
- * Wrapper around Radix ContextMenu Separator with token-based styling.
- */
-declare const ContextMenuSeparator: React$1.ForwardRefExoticComponent<ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuLabelProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>, "children"> {
-    children?: React$1.ReactNode;
-    /**
-     * Padding - token-based
-     */
-    padding?: ResponsiveSpace;
-}
-/**
- * ContextMenu Label component
- * Wrapper around Radix ContextMenu Label with token-based styling.
- */
-declare const ContextMenuLabel: React$1.ForwardRefExoticComponent<ContextMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuSubProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub> {
-    children?: React$1.ReactNode;
-}
-/**
- * ContextMenu Sub component
- * Wrapper around Radix ContextMenu Sub.
- */
-declare const ContextMenuSub: React$1.FC<ContextMenuSubProps>;
-interface ContextMenuSubTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>, "children"> {
-    children?: React$1.ReactNode;
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Tone variant - token-based
-     */
-    tone?: ContextMenuItemToneToken;
-    /**
-     * Gap between item content - token-based
-     */
-    gap?: ResponsiveSpace;
-}
-/**
- * ContextMenu SubTrigger component
- * Wrapper around Radix ContextMenu SubTrigger with token-based styling.
- */
-declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
-interface ContextMenuSubContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>, "size" | "width" | "padding" | "radius" | "surface"> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveContextMenuSize;
-    /**
-     * Width - token-based
-     */
-    width?: ResponsiveContextMenuWidth;
-    /**
-     * Padding - token-based
-     */
-    padding?: ResponsiveSpace;
-    /**
-     * Radius - token-based
-     */
-    radius?: RadiusToken;
-    /**
-     * Surface variant - token-based
-     */
-    surface?: SurfaceToken;
-}
-/**
- * ContextMenu SubContent component
- * Wrapper around Radix ContextMenu SubContent with token-based styling.
- */
-declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * ContextMenu Component
- *
- * Radix ContextMenu-based component with token-driven styling.
- *
- * **Usage:**
- * ```tsx
- * <ContextMenu.Root>
- *   <ContextMenu.Trigger>Right-click me</ContextMenu.Trigger>
- *   <ContextMenu.Content>
- *     <ContextMenu.Item>Item 1</ContextMenu.Item>
- *     <ContextMenu.Item>Item 2</ContextMenu.Item>
- *     <ContextMenu.Separator />
- *     <ContextMenu.Sub>
- *       <ContextMenu.SubTrigger>Submenu</ContextMenu.SubTrigger>
- *       <ContextMenu.SubContent>
- *         <ContextMenu.Item>Sub Item 1</ContextMenu.Item>
- *       </ContextMenu.SubContent>
- *     </ContextMenu.Sub>
- *   </ContextMenu.Content>
- * </ContextMenu.Root>
- * ```
- */
-declare const ContextMenu: {
-    Root: React$1.FC<ContextMenuPrimitive.ContextMenuProps>;
-    Trigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
-    Content: React$1.ForwardRefExoticComponent<ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-    Item: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
-    CheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
-    RadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-    RadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
-    Separator: React$1.ForwardRefExoticComponent<ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
-    Label: React$1.ForwardRefExoticComponent<ContextMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
-    Sub: React$1.FC<ContextMenuSubProps>;
-    SubTrigger: React$1.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
-    SubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
-};
-
-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> {
-    /**
-     * Whether to hide from screen readers
-     * @default true
-     */
-    "aria-hidden"?: boolean;
-}
-/**
- * Skeleton component for loading states
- *
- * @example
- * ```tsx
- * <Skeleton variant="text" />
- * <Skeleton variant="circle" />
- * <Skeleton variant="card" />
- * ```
- */
-declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * EmptyState Component
- *
- * Token-driven empty state component for displaying empty or no-data states.
- * Uses EMPTY_STATE_TOKENS for all spacing and sizing.
- * Integrates with Surface and Stack components.
- */
-
-interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Unique ID for accessibility (auto-generated if not provided)
-     */
-    id?: string;
-}
-/**
- * EmptyState root component
- *
- * @example
- * ```tsx
- * <EmptyState>
- *   <EmptyState.Icon>📭</EmptyState.Icon>
- *   <EmptyState.Title>No items found</EmptyState.Title>
- *   <EmptyState.Description>Try adjusting your filters</EmptyState.Description>
- *   <EmptyState.Action>
- *     <Button>Create Item</Button>
- *   </EmptyState.Action>
- * </EmptyState>
- * ```
- */
-declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * EmptyState Action Component
- *
- * Action subcomponent for EmptyState (typically contains Button).
- */
-
-interface EmptyStateActionProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Action button or link (typically Button component)
-     */
-    children: React$1.ReactNode;
-}
-/**
- * EmptyState Action component
- */
-declare const EmptyStateAction: React$1.ForwardRefExoticComponent<EmptyStateActionProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * EmptyState Description Component
- *
- * Description subcomponent for EmptyState.
- */
-
-interface EmptyStateDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
-    /**
-     * Description text
-     */
-    children: React$1.ReactNode;
-}
-/**
- * EmptyState Description component
- */
-declare const EmptyStateDescription: React$1.ForwardRefExoticComponent<EmptyStateDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-
-/**
- * EmptyState Icon Component
- *
- * Icon subcomponent for EmptyState.
- */
-
-interface EmptyStateIconProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Icon content (any ReactNode)
-     */
-    children: React$1.ReactNode;
+    size?: ResponsiveTabsSize;
     /**
-     * Icon size
-     * @default "md"
+     * Visual variant - token-based
      */
-    size?: "sm" | "md" | "lg";
+    variant?: TabsVariantToken;
 }
-/**
- * EmptyState Icon component
- */
-declare const EmptyStateIcon: React$1.ForwardRefExoticComponent<EmptyStateIconProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * EmptyState Title Component
- *
- * Title subcomponent for EmptyState.
- */
-
-interface EmptyStateTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
+interface TabsTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "size" | "variant" | "tone"> {
     /**
-     * Title text
+     * Size variant - token-based (inherited from context if not provided)
      */
-    children: React$1.ReactNode;
-}
-/**
- * EmptyState Title component
- */
-declare const EmptyStateTitle: React$1.ForwardRefExoticComponent<EmptyStateTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
-
-/**
- * DataList Root Component
- *
- * Mobile-first data list component for displaying key-value pairs.
- * Uses Stack for vertical layout and DATA_LIST_TOKENS for spacing.
- */
-
-interface DataListRootProps extends React$1.HTMLAttributes<HTMLDListElement> {
+    size?: ResponsiveTabsSize;
     /**
-     * Label width for desktop layout
-     * @default "md"
+     * Visual variant - token-based (inherited from context if not provided)
      */
-    labelWidth?: "sm" | "md" | "lg";
-}
-/**
- * DataList Root component
- *
- * @example
- * ```tsx
- * <DataList.Root>
- *   <DataList.Item>
- *     <DataList.Label>Name</DataList.Label>
- *     <DataList.Value>John Doe</DataList.Value>
- *   </DataList.Item>
- * </DataList.Root>
- * ```
- */
-declare const DataListRoot: React$1.ForwardRefExoticComponent<DataListRootProps & React$1.RefAttributes<HTMLDListElement>>;
-
-/**
- * DataList Component Types
- *
- * TypeScript interfaces and types for DataList component.
- */
-
-/**
- * DataList Item component props
- */
-interface DataListItemProps$1 extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: TabsVariantToken;
     /**
-     * Row padding - token-based
-     * Accepts spacing tokens (xs, sm, md, lg, xl, etc.) or responsive object
-     * @default "md"
-     * @example padding="sm"
-     * @example padding={{ base: "sm", md: "lg" }}
-     */
-    padding?: ResponsiveSpacing;
-}
-
-/**
- * DataList Item Component
- *
- * Individual item in DataList (contains Label and Value).
- */
-
-interface DataListItemProps extends DataListItemProps$1 {
-}
-/**
- * DataList Item component
- * Mobile: vertical layout (label above value)
- * Desktop: horizontal layout (label left, value right)
- */
-declare const DataListItem: React$1.ForwardRefExoticComponent<DataListItemProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * DataList Label Component
- *
- * Label subcomponent for DataList items.
- */
-
-interface DataListLabelProps extends React$1.HTMLAttributes<HTMLElement> {
+     * Tone - token-based (inherited from context if not provided)
+     */
+    tone?: TabsToneToken;
     /**
-     * Label text
+     * Leading icon - semantic prop
      */
-    children: React$1.ReactNode;
+    leadingIcon?: React$1.ReactNode;
+    /**
+     * Trailing icon - semantic prop
+     */
+    trailingIcon?: React$1.ReactNode;
+    /**
+     * Icon - semantic prop (for backward compatibility, maps to leadingIcon)
+     */
+    icon?: React$1.ReactNode;
 }
-/**
- * DataList Label component
- * Mobile: full width
- * Desktop: fixed width (from tokens)
- */
-declare const DataListLabel: React$1.ForwardRefExoticComponent<DataListLabelProps & React$1.RefAttributes<HTMLElement>>;
-
-/**
- * DataList Value Component
- *
- * Value subcomponent for DataList items.
- */
-
-interface DataListValueProps extends React$1.HTMLAttributes<HTMLElement> {
+interface TabsContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, "size"> {
     /**
-     * Value content
+     * Size variant - token-based (for padding)
      */
-    children: React$1.ReactNode;
+    size?: ResponsiveTabsSize;
 }
-/**
- * DataList Value component
- * Flex-grow to fill remaining space on desktop
- */
-declare const DataListValue: React$1.ForwardRefExoticComponent<DataListValueProps & React$1.RefAttributes<HTMLElement>>;
-
-/**
- * Table Component Types
- *
- * TypeScript interfaces and types for Table component.
- */
+declare const Tabs: {
+    Root: React$1.FC<TabsRootProps>;
+    List: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+    Trigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Content: React$1.ForwardRefExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
+};
 
-/**
- * Table column definition
- */
-interface TableColumn<T = Record<string, unknown>> {
+declare const segmentedControlRootVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+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$1<typeof segmentedControlRootVariants> {
     /**
-     * Column key (must match a key in the data object)
+     * Controlled value
      */
-    key: keyof T;
+    value?: string;
     /**
-     * Column header title
+     * Default value for uncontrolled usage
      */
-    title: string;
+    defaultValue?: string;
     /**
-     * Custom render function for cell content
+     * Callback when value changes
      */
-    render?: (value: T[keyof T], item: T, index: number) => ReactNode;
+    onValueChange?: (value: string) => void;
     /**
-     * Column alignment
-     * @default "left"
+     * Name for the radio group
      */
-    align?: "left" | "center" | "right";
+    name?: string;
+}
+interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps$1<typeof segmentedControlItemVariants> {
     /**
-     * Column width (CSS value or Tailwind class)
+     * Value of this item
      */
-    width?: string;
+    value: string;
     /**
-     * Whether column is sortable
-     * @default false
+     * Whether this item is disabled
      */
-    sortable?: boolean;
+    disabled?: boolean;
+}
+declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Root: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<SegmentedControlItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+};
+
+interface BreadcrumbItem {
     /**
-     * Cell size
-     * @default "md"
+     * Label text for the breadcrumb item
      */
-    size?: "sm" | "md" | "lg";
-}
-/**
- * Sort direction
- */
-type SortDirection = "asc" | "desc" | null;
-/**
- * Sort state
- */
-interface SortState {
+    label: string;
     /**
-     * Column key being sorted
+     * Optional href for clickable items
      */
-    column: string | null;
+    href?: string;
     /**
-     * Sort direction
+     * Whether this item is disabled
      */
-    direction: SortDirection;
+    disabled?: boolean;
 }
-/**
- * Table context value
- */
-interface TableContextValue {
+interface BreadcrumbsRootProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
-     * Current sort state
+     * Array of breadcrumb items
      */
-    sortState: SortState;
+    items: BreadcrumbItem[];
     /**
-     * Set sort state
+     * Custom separator component or string
+     * @default ChevronRight icon
      */
-    setSortState: (state: SortState) => void;
+    separator?: React$1.ReactNode;
     /**
-     * Expanded rows (for expandable rows)
+     * ARIA label for the navigation element
+     * @default "Breadcrumb"
      */
-    expandedRows: Set<string | number>;
+    ariaLabel?: string;
+}
+interface BreadcrumbsItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     /**
-     * Toggle row expansion
+     * Whether this is the last item (current page)
      */
-    toggleRow: (rowKey: string | number) => void;
+    isLast?: boolean;
     /**
-     * Whether table has expandable rows
+     * Whether this item is disabled
      */
-    expandable?: boolean;
+    disabled?: boolean;
+}
+interface BreadcrumbsSeparatorProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     /**
-     * Render function for expandable content
+     * Custom separator content
      */
-    renderExpandableContent?: (item: unknown, index: number) => ReactNode;
+    children?: React$1.ReactNode;
 }
-/**
- * Table Root component props
- */
-interface TableRootProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLTableElement> {
+declare const Breadcrumbs: React$1.ForwardRefExoticComponent<BreadcrumbsRootProps & React$1.RefAttributes<HTMLElement>> & {
+    Root: React$1.ForwardRefExoticComponent<BreadcrumbsRootProps & React$1.RefAttributes<HTMLElement>>;
+    Item: React$1.ForwardRefExoticComponent<BreadcrumbsItemProps & React$1.RefAttributes<HTMLLIElement>>;
+    Separator: React$1.ForwardRefExoticComponent<BreadcrumbsSeparatorProps & React$1.RefAttributes<HTMLSpanElement>>;
+};
+
+interface PaginationRootProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
-     * Table data array
+     * Current active page (1-indexed)
      */
-    data: T[];
+    currentPage: number;
     /**
-     * Column definitions
+     * Total number of pages
      */
-    columns: TableColumn<T>[];
+    totalPages: number;
     /**
-     * Key to use for row identification
+     * Callback when page changes
      */
-    rowKey: keyof T | ((item: T, index: number) => string | number);
+    onPageChange: (page: number) => void;
     /**
-     * Whether table supports sorting
-     * @default false
+     * Number of pages to show on each side of current page
+     * @default 2
      */
-    sortable?: boolean;
+    delta?: number;
     /**
-     * Whether table supports expandable rows
-     * @default false
+     * ARIA label for the navigation element
+     * @default "Pagination"
      */
-    expandable?: boolean;
+    ariaLabel?: string;
+}
+interface PaginationItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Render function for expandable content
+     * Page number (or "..." for ellipsis)
      */
-    renderExpandableContent?: (item: T, index: number) => ReactNode;
+    page: number | "...";
     /**
-     * Whether table is in loading state
-     * @default false
+     * Whether this is the current page
      */
-    loading?: boolean;
+    isCurrent?: boolean;
     /**
-     * Empty state message (shown when data is empty)
+     * Whether this item is disabled
      */
-    emptyMessage?: string;
+    disabled?: boolean;
+}
+interface PaginationPrevProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Whether header is sticky
-     * @default false
+     * Whether previous button is disabled
      */
-    stickyHeader?: boolean;
+    disabled?: boolean;
+}
+interface PaginationNextProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Row size
-     * @default "md"
+     * Whether next button is disabled
      */
-    rowSize?: "sm" | "md" | "lg";
+    disabled?: boolean;
 }
-/**
- * Table Header component props
- */
-interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+interface PaginationEllipsisProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+}
+declare const Pagination: React$1.ForwardRefExoticComponent<PaginationRootProps & React$1.RefAttributes<HTMLElement>> & {
+    Root: React$1.ForwardRefExoticComponent<PaginationRootProps & React$1.RefAttributes<HTMLElement>>;
+    Item: React$1.ForwardRefExoticComponent<PaginationItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Prev: React$1.ForwardRefExoticComponent<PaginationPrevProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Next: React$1.ForwardRefExoticComponent<PaginationNextProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Ellipsis: React$1.ForwardRefExoticComponent<PaginationEllipsisProps & React$1.RefAttributes<HTMLSpanElement>>;
+};
+
+interface StepperStep {
     /**
-     * Whether header is sticky
-     * @default false
+     * Unique identifier for the step
      */
-    sticky?: boolean;
-}
-/**
- * Table Head component props
- */
-interface TableHeadProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    id: string;
+    /**
+     * Label text for the step
+     */
+    label: string;
+    /**
+     * Optional description for the step
+     */
+    description?: string;
+    /**
+     * Optional icon for the step indicator
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Whether this step is disabled
+     */
+    disabled?: boolean;
+}
+interface StepperRootProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Column alignment
-     * @default "left"
+     * Array of steps
      */
-    align?: "left" | "center" | "right";
+    steps: StepperStep[];
     /**
-     * Whether column is sortable
-     * @default false
+     * Current active step index (0-indexed)
      */
-    sortable?: boolean;
+    activeStep: number;
     /**
-     * Column key (for sorting)
+     * Orientation of the stepper
+     * @default "horizontal"
      */
-    columnKey?: string;
+    orientation?: "horizontal" | "vertical";
     /**
-     * Cell size
-     * @default "md"
+     * Whether to show step numbers
+     * @default true
      */
-    size?: "sm" | "md" | "lg";
-}
-/**
- * Table Body component props
- */
-interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    showNumbers?: boolean;
 }
-/**
- * Table Row component props
- */
-interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+interface StepperItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether row is selected
-     * @default false
+     * Step data
      */
-    selected?: boolean;
+    step: StepperStep;
     /**
-     * Whether row is expandable
-     * @default false
+     * Step index (0-indexed)
      */
-    expandable?: boolean;
+    index: number;
     /**
-     * Row key (for expansion tracking)
+     * Whether this is the active step
      */
-    rowKey?: string | number;
+    isActive: boolean;
     /**
-     * Whether row is expanded
-     * @default false
+     * Whether this step is completed
      */
-    expanded?: boolean;
+    isCompleted: boolean;
+    /**
+     * Whether to show step number
+     */
+    showNumber?: boolean;
 }
-/**
- * Table Cell component props
- */
-interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface StepperIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Cell alignment
-     * @default "left"
+     * Step index
      */
-    align?: "left" | "center" | "right";
+    index: number;
     /**
-     * Cell size
-     * @default "md"
+     * Whether this is the active step
      */
-    size?: "sm" | "md" | "lg";
-}
-/**
- * Table SortIcon component props
- */
-interface TableSortIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    isActive: boolean;
     /**
-     * Sort direction
+     * Whether this step is completed
      */
-    direction: SortDirection;
-}
-/**
- * Table Empty component props
- */
-interface TableEmptyProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    isCompleted: boolean;
     /**
-     * Number of columns to span
+     * Whether this step is disabled
      */
-    colSpan: number;
+    disabled?: boolean;
     /**
-     * Empty message
+     * Custom icon
      */
-    message?: string;
+    icon?: React$1.ReactNode;
+    /**
+     * Whether to show step number
+     */
+    showNumber?: boolean;
 }
-/**
- * Table LoadingState component props
- */
-interface TableLoadingStateProps extends React.HTMLAttributes<HTMLTableRowElement> {
+interface StepperLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Number of columns to span
+     * Step label text
      */
-    colSpan: number;
+    label: string;
     /**
-     * Number of skeleton rows to show
-     * @default 5
+     * Optional description
      */
-    rows?: number;
-}
-/**
- * Table ExpandableContent component props
- */
-interface TableExpandableContentProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    description?: string;
     /**
-     * Number of columns to span
+     * Whether this is the active step
      */
-    colSpan: number;
+    isActive: boolean;
+}
+interface StepperContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether content is expanded
+     * Step index this content belongs to
      */
-    expanded: boolean;
+    stepIndex: number;
     /**
-     * Content to render
+     * Whether this content should be visible
      */
-    children: ReactNode;
+    isActive: boolean;
 }
-
-declare function useTableContext(): TableContextValue;
 /**
- * Table Root component
- *
- * @example
- * ```tsx
- * <Table.Root
- *   data={users}
- *   columns={columns}
- *   rowKey="id"
- *   sortable
- * >
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.Head>Name</Table.Head>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     {users.map((user) => (
- *       <Table.Row key={user.id}>
- *         <Table.Cell>{user.name}</Table.Cell>
- *       </Table.Row>
- *     ))}
- *   </Table.Body>
- * </Table.Root>
- * ```
+ * Stepper.Item - Individual step container
  */
-declare function TableRoot<T extends Record<string, unknown>>({ data: _data, columns: _columns, rowKey: _rowKey, sortable: _sortable, expandable, renderExpandableContent, loading: _loading, emptyMessage: _emptyMessage, stickyHeader: _stickyHeader, rowSize: _rowSize, className, children, ...props }: TableRootProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace TableRoot {
-    var displayName: string;
+interface StepperItemPropsInternal extends StepperItemProps {
+    orientation?: "horizontal" | "vertical";
 }
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Root: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<StepperItemPropsInternal & React$1.RefAttributes<HTMLDivElement>>;
+    Indicator: React$1.ForwardRefExoticComponent<StepperIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
+    Label: React$1.ForwardRefExoticComponent<StepperLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<StepperContentProps & React$1.RefAttributes<HTMLDivElement>>;
+};
 
 /**
- * Table Body Component
+ * DataList Component Types
  *
- * Body section for table (tbody element).
+ * TypeScript interfaces and types for DataList component.
  */
 
 /**
- * Table Body component
+ * DataList Item component props
  */
-declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+interface DataListItemProps$1 extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Row padding - token-based
+     * Accepts spacing tokens (xs, sm, md, lg, xl, etc.) or responsive object
+     * @default "md"
+     * @example padding="sm"
+     * @example padding={{ base: "sm", md: "lg" }}
+     */
+    padding?: ResponsiveSpacing;
+}
 
 /**
- * Table Cell Component
+ * DataList Item Component
  *
- * Table cell component with alignment and size support.
+ * Individual item in DataList (contains Label and Value).
  */
 
+interface DataListItemProps extends DataListItemProps$1 {
+}
 /**
- * Table Cell component
+ * DataList Item component
+ * Mobile: vertical layout (label above value)
+ * Desktop: horizontal layout (label left, value right)
  */
-declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const DataListItem: React$1.ForwardRefExoticComponent<DataListItemProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Table Empty Component
+ * DataList Label Component
  *
- * Empty state row for table (uses EmptyState component).
+ * Label subcomponent for DataList items.
  */
 
+interface DataListLabelProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * Label text
+     */
+    children: React$1.ReactNode;
+}
 /**
- * Table Empty component
+ * DataList Label component
+ * Mobile: full width
+ * Desktop: fixed width (from tokens)
  */
-declare const TableEmpty: React$1.ForwardRefExoticComponent<TableEmptyProps & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const DataListLabel: React$1.ForwardRefExoticComponent<DataListLabelProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * Table ExpandableContent Component
+ * DataList Value Component
  *
- * Expandable content cell with CSS height transitions.
+ * Value subcomponent for DataList items.
  */
 
+interface DataListValueProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * Value content
+     */
+    children: React$1.ReactNode;
+}
 /**
- * Table ExpandableContent component
- * Uses CSS height transitions (no framer-motion)
+ * DataList Value component
+ * Flex-grow to fill remaining space on desktop
  */
-declare const TableExpandableContent: React$1.ForwardRefExoticComponent<TableExpandableContentProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const DataListValue: React$1.ForwardRefExoticComponent<DataListValueProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * Table Head Component
+ * EmptyState Component
  *
- * Header cell component with sorting support.
+ * Token-driven empty state component for displaying empty or no-data states.
+ * Uses EMPTY_STATE_TOKENS for all spacing and sizing.
+ * Integrates with Surface and Stack components.
  */
 
+interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique ID for accessibility (auto-generated if not provided)
+     */
+    id?: string;
+}
 /**
- * Table Head component
+ * EmptyState root component
+ *
+ * @example
+ * ```tsx
+ * <EmptyState>
+ *   <EmptyState.Icon>📭</EmptyState.Icon>
+ *   <EmptyState.Title>No items found</EmptyState.Title>
+ *   <EmptyState.Description>Try adjusting your filters</EmptyState.Description>
+ *   <EmptyState.Action>
+ *     <Button>Create Item</Button>
+ *   </EmptyState.Action>
+ * </EmptyState>
+ * ```
  */
-declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Table Header Component
+ * EmptyState Action Component
  *
- * Header section for table (thead element).
+ * Action subcomponent for EmptyState (typically contains Button).
  */
 
-declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+interface EmptyStateActionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action button or link (typically Button component)
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * EmptyState Action component
+ */
+declare const EmptyStateAction: React$1.ForwardRefExoticComponent<EmptyStateActionProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Table LoadingState Component
+ * EmptyState Description Component
  *
- * Loading state row for table (uses Skeleton component).
+ * Description subcomponent for EmptyState.
  */
 
+interface EmptyStateDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Description text
+     */
+    children: React$1.ReactNode;
+}
 /**
- * Table LoadingState component
+ * EmptyState Description component
  */
-declare const TableLoadingState: React$1.ForwardRefExoticComponent<TableLoadingStateProps & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const EmptyStateDescription: React$1.ForwardRefExoticComponent<EmptyStateDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
 
 /**
- * Table Row Component
+ * EmptyState Icon Component
  *
- * Table row component with hover and selected states.
+ * Icon subcomponent for EmptyState.
  */
 
+interface EmptyStateIconProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon content (any ReactNode)
+     */
+    children: React$1.ReactNode;
+    /**
+     * Icon size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
 /**
- * Table Row component
+ * EmptyState Icon component
  */
-declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const EmptyStateIcon: React$1.ForwardRefExoticComponent<EmptyStateIconProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Table SortIcon Component
+ * EmptyState Title Component
  *
- * Sort indicator icon with rotation animation.
+ * Title subcomponent for EmptyState.
  */
 
+interface EmptyStateTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Title text
+     */
+    children: React$1.ReactNode;
+}
 /**
- * Table SortIcon component
- * Uses CSS rotation animation (no framer-motion)
+ * EmptyState Title component
  */
-declare const TableSortIcon: React$1.ForwardRefExoticComponent<TableSortIconProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const EmptyStateTitle: React$1.ForwardRefExoticComponent<EmptyStateTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
 
 /**
- * Tabs Component
+ * Table Component Types
  *
- * Radix-based tabs component with token-driven styling.
- * All behavior (keyboard navigation, focus management, a11y) is handled by Radix.
- * Tenerife UI provides visual styling through tokens only.
+ * TypeScript interfaces and types for Table component.
  */
 
-interface TabsRootProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
-}
-interface TabsListProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "size" | "variant"> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveTabsSize;
-    /**
-     * Visual variant - token-based
-     */
-    variant?: TabsVariantToken;
-}
-interface TabsTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "size" | "variant" | "tone"> {
-    /**
-     * Size variant - token-based (inherited from context if not provided)
-     */
-    size?: ResponsiveTabsSize;
-    /**
-     * Visual variant - token-based (inherited from context if not provided)
-     */
-    variant?: TabsVariantToken;
-    /**
-     * Tone - token-based (inherited from context if not provided)
-     */
-    tone?: TabsToneToken;
-    /**
-     * Leading icon - semantic prop
-     */
-    leadingIcon?: React$1.ReactNode;
-    /**
-     * Trailing icon - semantic prop
-     */
-    trailingIcon?: React$1.ReactNode;
-    /**
-     * Icon - semantic prop (for backward compatibility, maps to leadingIcon)
-     */
-    icon?: React$1.ReactNode;
-}
-interface TabsContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, "size"> {
-    /**
-     * Size variant - token-based (for padding)
-     */
-    size?: ResponsiveTabsSize;
-}
-declare const Tabs: {
-    Root: React$1.FC<TabsRootProps>;
-    List: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
-    Trigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Content: React$1.ForwardRefExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
-};
-
-declare const segmentedControlRootVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-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> {
-    /**
-     * Controlled value
-     */
-    value?: string;
-    /**
-     * Default value for uncontrolled usage
-     */
-    defaultValue?: string;
-    /**
-     * Callback when value changes
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Name for the radio group
-     */
-    name?: string;
-}
-interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps<typeof segmentedControlItemVariants> {
-    /**
-     * Value of this item
-     */
-    value: string;
+/**
+ * Table column definition
+ */
+interface TableColumn$1<T = Record<string, unknown>> {
     /**
-     * Whether this item is disabled
+     * Column key (must match a key in the data object)
      */
-    disabled?: boolean;
-}
-declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Root: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>>;
-    Item: React$1.ForwardRefExoticComponent<SegmentedControlItemProps & React$1.RefAttributes<HTMLButtonElement>>;
-};
-
-interface BreadcrumbItem {
+    key: keyof T;
     /**
-     * Label text for the breadcrumb item
+     * Column header title
      */
-    label: string;
+    title: string;
     /**
-     * Optional href for clickable items
+     * Custom render function for cell content
      */
-    href?: string;
+    render?: (value: T[keyof T], item: T, index: number) => ReactNode;
     /**
-     * Whether this item is disabled
+     * Column alignment
+     * @default "left"
      */
-    disabled?: boolean;
-}
-interface BreadcrumbsRootProps extends React$1.HTMLAttributes<HTMLElement> {
+    align?: "left" | "center" | "right";
     /**
-     * Array of breadcrumb items
+     * Column width (CSS value or Tailwind class)
      */
-    items: BreadcrumbItem[];
+    width?: string;
     /**
-     * Custom separator component or string
-     * @default ChevronRight icon
+     * Whether column is sortable
+     * @default false
      */
-    separator?: React$1.ReactNode;
+    sortable?: boolean;
     /**
-     * ARIA label for the navigation element
-     * @default "Breadcrumb"
+     * Cell size
+     * @default "md"
      */
-    ariaLabel?: string;
+    size?: "sm" | "md" | "lg";
 }
-interface BreadcrumbsItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
+/**
+ * Sort direction
+ */
+type SortDirection = "asc" | "desc" | null;
+/**
+ * Sort state
+ */
+interface SortState {
     /**
-     * Whether this is the last item (current page)
+     * Column key being sorted
      */
-    isLast?: boolean;
+    column: string | null;
     /**
-     * Whether this item is disabled
+     * Sort direction
      */
-    disabled?: boolean;
+    direction: SortDirection;
 }
-interface BreadcrumbsSeparatorProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+/**
+ * Table context value
+ */
+interface TableContextValue {
     /**
-     * Custom separator content
+     * Current sort state
      */
-    children?: React$1.ReactNode;
-}
-declare const Breadcrumbs: React$1.ForwardRefExoticComponent<BreadcrumbsRootProps & React$1.RefAttributes<HTMLElement>> & {
-    Root: React$1.ForwardRefExoticComponent<BreadcrumbsRootProps & React$1.RefAttributes<HTMLElement>>;
-    Item: React$1.ForwardRefExoticComponent<BreadcrumbsItemProps & React$1.RefAttributes<HTMLLIElement>>;
-    Separator: React$1.ForwardRefExoticComponent<BreadcrumbsSeparatorProps & React$1.RefAttributes<HTMLSpanElement>>;
-};
-
-interface PaginationRootProps extends React$1.HTMLAttributes<HTMLElement> {
+    sortState: SortState;
     /**
-     * Current active page (1-indexed)
+     * Set sort state
      */
-    currentPage: number;
+    setSortState: (state: SortState) => void;
     /**
-     * Total number of pages
+     * Expanded rows (for expandable rows)
      */
-    totalPages: number;
+    expandedRows: Set<string | number>;
     /**
-     * Callback when page changes
+     * Toggle row expansion
      */
-    onPageChange: (page: number) => void;
+    toggleRow: (rowKey: string | number) => void;
     /**
-     * Number of pages to show on each side of current page
-     * @default 2
+     * Whether table has expandable rows
      */
-    delta?: number;
+    expandable?: boolean;
     /**
-     * ARIA label for the navigation element
-     * @default "Pagination"
+     * Render function for expandable content
      */
-    ariaLabel?: string;
+    renderExpandableContent?: (item: unknown, index: number) => ReactNode;
 }
-interface PaginationItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+/**
+ * Table Root component props
+ */
+interface TableRootProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLTableElement> {
     /**
-     * Page number (or "..." for ellipsis)
+     * Table data array
      */
-    page: number | "...";
+    data: T[];
     /**
-     * Whether this is the current page
+     * Column definitions
      */
-    isCurrent?: boolean;
+    columns: TableColumn$1<T>[];
     /**
-     * Whether this item is disabled
+     * Key to use for row identification
      */
-    disabled?: boolean;
-}
-interface PaginationPrevProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    rowKey: keyof T | ((item: T, index: number) => string | number);
     /**
-     * Whether previous button is disabled
+     * Whether table supports sorting
+     * @default false
      */
-    disabled?: boolean;
-}
-interface PaginationNextProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    sortable?: boolean;
     /**
-     * Whether next button is disabled
+     * Whether table supports expandable rows
+     * @default false
      */
-    disabled?: boolean;
-}
-interface PaginationEllipsisProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-}
-declare const Pagination: React$1.ForwardRefExoticComponent<PaginationRootProps & React$1.RefAttributes<HTMLElement>> & {
-    Root: React$1.ForwardRefExoticComponent<PaginationRootProps & React$1.RefAttributes<HTMLElement>>;
-    Item: React$1.ForwardRefExoticComponent<PaginationItemProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Prev: React$1.ForwardRefExoticComponent<PaginationPrevProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Next: React$1.ForwardRefExoticComponent<PaginationNextProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Ellipsis: React$1.ForwardRefExoticComponent<PaginationEllipsisProps & React$1.RefAttributes<HTMLSpanElement>>;
-};
-
-interface StepperStep {
+    expandable?: boolean;
     /**
-     * Unique identifier for the step
+     * Render function for expandable content
      */
-    id: string;
+    renderExpandableContent?: (item: T, index: number) => ReactNode;
     /**
-     * Label text for the step
+     * Whether table is in loading state
+     * @default false
      */
-    label: string;
+    loading?: boolean;
     /**
-     * Optional description for the step
+     * Empty state message (shown when data is empty)
      */
-    description?: string;
+    emptyMessage?: string;
     /**
-     * Optional icon for the step indicator
+     * Whether header is sticky
+     * @default false
      */
-    icon?: React$1.ReactNode;
+    stickyHeader?: boolean;
     /**
-     * Whether this step is disabled
+     * Row size
+     * @default "md"
      */
-    disabled?: boolean;
+    rowSize?: "sm" | "md" | "lg";
 }
-interface StepperRootProps extends React$1.HTMLAttributes<HTMLDivElement> {
+/**
+ * Table Header component props
+ */
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     /**
-     * Array of steps
+     * Whether header is sticky
+     * @default false
      */
-    steps: StepperStep[];
+    sticky?: boolean;
+}
+/**
+ * Table Head component props
+ */
+interface TableHeadProps extends React.HTMLAttributes<HTMLTableCellElement> {
     /**
-     * Current active step index (0-indexed)
+     * Column alignment
+     * @default "left"
      */
-    activeStep: number;
+    align?: "left" | "center" | "right";
     /**
-     * Orientation of the stepper
-     * @default "horizontal"
+     * Whether column is sortable
+     * @default false
      */
-    orientation?: "horizontal" | "vertical";
+    sortable?: boolean;
     /**
-     * Whether to show step numbers
-     * @default true
+     * Column key (for sorting)
      */
-    showNumbers?: boolean;
-}
-interface StepperItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    columnKey?: string;
     /**
-     * Step data
+     * Cell size
+     * @default "md"
      */
-    step: StepperStep;
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Table Body component props
+ */
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Table Row component props
+ */
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
-     * Step index (0-indexed)
+     * Whether row is selected
+     * @default false
      */
-    index: number;
+    selected?: boolean;
     /**
-     * Whether this is the active step
+     * Whether row is expandable
+     * @default false
      */
-    isActive: boolean;
+    expandable?: boolean;
     /**
-     * Whether this step is completed
+     * Row key (for expansion tracking)
      */
-    isCompleted: boolean;
+    rowKey?: string | number;
     /**
-     * Whether to show step number
+     * Whether row is expanded
+     * @default false
      */
-    showNumber?: boolean;
+    expanded?: boolean;
 }
-interface StepperIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Step index
-     */
-    index: number;
+/**
+ * Table Cell component props
+ */
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
     /**
-     * Whether this is the active step
+     * Cell alignment
+     * @default "left"
      */
-    isActive: boolean;
+    align?: "left" | "center" | "right";
     /**
-     * Whether this step is completed
+     * Cell size
+     * @default "md"
      */
-    isCompleted: boolean;
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Table SortIcon component props
+ */
+interface TableSortIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
-     * Whether this step is disabled
+     * Sort direction
      */
-    disabled?: boolean;
+    direction: SortDirection;
+}
+/**
+ * Table Empty component props
+ */
+interface TableEmptyProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
-     * Custom icon
+     * Number of columns to span
      */
-    icon?: React$1.ReactNode;
+    colSpan: number;
     /**
-     * Whether to show step number
+     * Empty message
      */
-    showNumber?: boolean;
+    message?: string;
 }
-interface StepperLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+/**
+ * Table LoadingState component props
+ */
+interface TableLoadingStateProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
-     * Step label text
+     * Number of columns to span
      */
-    label: string;
+    colSpan: number;
     /**
-     * Optional description
+     * Number of skeleton rows to show
+     * @default 5
      */
-    description?: string;
+    rows?: number;
+}
+/**
+ * Table ExpandableContent component props
+ */
+interface TableExpandableContentProps extends React.HTMLAttributes<HTMLTableCellElement> {
     /**
-     * Whether this is the active step
+     * Number of columns to span
      */
-    isActive: boolean;
-}
-interface StepperContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    colSpan: number;
     /**
-     * Step index this content belongs to
+     * Whether content is expanded
      */
-    stepIndex: number;
+    expanded: boolean;
     /**
-     * Whether this content should be visible
+     * Content to render
      */
-    isActive: boolean;
+    children: ReactNode;
+}
+
+declare function useTableContext(): TableContextValue;
+/**
+ * Table Root component
+ *
+ * @example
+ * ```tsx
+ * <Table.Root
+ *   data={users}
+ *   columns={columns}
+ *   rowKey="id"
+ *   sortable
+ * >
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Name</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {users.map((user) => (
+ *       <Table.Row key={user.id}>
+ *         <Table.Cell>{user.name}</Table.Cell>
+ *       </Table.Row>
+ *     ))}
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare function TableRoot<T extends Record<string, unknown>>({ data: _data, columns: _columns, rowKey: _rowKey, sortable: _sortable, expandable, renderExpandableContent, loading: _loading, emptyMessage: _emptyMessage, stickyHeader: _stickyHeader, rowSize: _rowSize, className, children, ...props }: TableRootProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace TableRoot {
+    var displayName: string;
 }
+
+/**
+ * Table Body Component
+ *
+ * Body section for table (tbody element).
+ */
+
+/**
+ * Table Body component
+ */
+declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+
+/**
+ * Table Cell Component
+ *
+ * Table cell component with alignment and size support.
+ */
+
+/**
+ * Table Cell component
+ */
+declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+
 /**
- * Stepper.Item - Individual step container
+ * Table Empty Component
+ *
+ * Empty state row for table (uses EmptyState component).
  */
-interface StepperItemPropsInternal extends StepperItemProps {
-    orientation?: "horizontal" | "vertical";
+
+/**
+ * Table Empty component
+ */
+declare const TableEmpty: React$1.ForwardRefExoticComponent<TableEmptyProps & React$1.RefAttributes<HTMLTableRowElement>>;
+
+/**
+ * Table ExpandableContent Component
+ *
+ * Expandable content cell with CSS height transitions.
+ */
+
+/**
+ * Table ExpandableContent component
+ * Uses CSS height transitions (no framer-motion)
+ */
+declare const TableExpandableContent: React$1.ForwardRefExoticComponent<TableExpandableContentProps & React$1.RefAttributes<HTMLTableCellElement>>;
+
+/**
+ * Table Head Component
+ *
+ * Header cell component with sorting support.
+ */
+
+/**
+ * Table Head component
+ */
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+
+/**
+ * Table Header Component
+ *
+ * Header section for table (thead element).
+ */
+
+declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+
+/**
+ * Table LoadingState Component
+ *
+ * Loading state row for table (uses Skeleton component).
+ */
+
+/**
+ * Table LoadingState component
+ */
+declare const TableLoadingState: React$1.ForwardRefExoticComponent<TableLoadingStateProps & React$1.RefAttributes<HTMLTableRowElement>>;
+
+/**
+ * Table Row Component
+ *
+ * Table row component with hover and selected states.
+ */
+
+/**
+ * Table Row component
+ */
+declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+
+/**
+ * Table SortIcon Component
+ *
+ * Sort indicator icon with rotation animation.
+ */
+
+/**
+ * Table SortIcon component
+ * Uses CSS rotation animation (no framer-motion)
+ */
+declare const TableSortIcon: React$1.ForwardRefExoticComponent<TableSortIconProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+interface TableColumn<T> {
+    key: keyof T;
+    title: string;
+    render?: (value: T[keyof T], item: T) => React__default.ReactNode;
 }
-declare const Stepper: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Root: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>>;
-    Item: React$1.ForwardRefExoticComponent<StepperItemPropsInternal & React$1.RefAttributes<HTMLDivElement>>;
-    Indicator: React$1.ForwardRefExoticComponent<StepperIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
-    Label: React$1.ForwardRefExoticComponent<StepperLabelProps & React$1.RefAttributes<HTMLDivElement>>;
-    Content: React$1.ForwardRefExoticComponent<StepperContentProps & React$1.RefAttributes<HTMLDivElement>>;
-};
 
 /**
  * Icon Props Interface
@@ -3688,7 +3613,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
      */
@@ -3750,6 +3675,90 @@ interface ComponentAnimationConfig {
     animationProps?: AnimationProps;
 }
 
+/**
+ * EventCard Size Variant
+ * Controls padding, spacing, and overall card dimensions
+ */
+type EventCardSize = "default" | "compact";
+/**
+ * EventCard Layout Variant
+ * Controls card layout orientation
+ */
+type EventCardLayout = "vertical";
+/**
+ * EventCard Style Variant
+ * Controls visual appearance and featured state
+ */
+type EventCardVariant = "default" | "featured";
+/**
+ * Props for EventCard component.
+ * All props are flat and domain-agnostic. Consumer should provide pre-localized strings.
+ *
+ * Component uses CARD_TOKENS and DOMAIN_TOKENS for all styling.
+ * All visual values come from tokens - no hardcoded Tailwind classes.
+ */
+interface EventCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Event title (pre-localized string) */
+    title: string;
+    /** Event description (pre-localized string, optional) */
+    description?: string;
+    /** Event date/time display string (pre-formatted, optional) */
+    date?: string;
+    /** Venue name (pre-localized string, optional) */
+    venueName?: string;
+    /** Price display string with currency (e.g., "€20 - €50", optional) */
+    price?: string;
+    /** Image URL (optional) */
+    imageUrl?: string;
+    /** Link URL for event details page (optional) */
+    href?: string;
+    /** External ticket purchase URL (optional) */
+    ticketUrl?: string;
+    /** Whether this is a featured event */
+    featured?: boolean;
+    /** Show image section */
+    showImage?: boolean;
+    /** Label for "Get Tickets" button (required) */
+    getTicketsLabel: string;
+    /** Badge text for featured events (optional) */
+    featuredBadgeText?: string;
+    /** Size variant - controls padding and spacing */
+    size?: EventCardSize;
+    /** Layout variant - controls card layout orientation */
+    layout?: EventCardLayout;
+    /** Style variant - controls visual appearance */
+    variant?: EventCardVariant;
+    /** Additional CSS classes */
+    className?: string;
+    /** Animation configuration for entrance and hover animations */
+    animation?: ComponentAnimationConfig;
+}
+
+/**
+ * EventCard Component
+ *
+ * Domain-specific card component for displaying event information.
+ * Uses CardBase for layout and CARD_TOKENS + DOMAIN_TOKENS for all styling.
+ * All visual values come from tokens - no hardcoded Tailwind visual classes.
+ *
+ * Architecture:
+ * - Uses CVA variants for size and layout variants
+ * - All spacing, colors, radius from tokens
+ * - Semantic HTML elements (heading, time, address)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <EventCard
+ *   title="Concert"
+ *   date="2024-01-01"
+ *   venueName="Venue"
+ *   getTicketsLabel="Get Tickets"
+ * />
+ * ```
+ */
+declare const EventCard: React$1.ForwardRefExoticComponent<EventCardProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * ArtistCard Size Variant
  */
@@ -4007,88 +4016,4 @@ interface TicketCardProps {
  */
 declare const TicketCard: React$1.ForwardRefExoticComponent<TicketCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
-/**
- * EventCard Size Variant
- * Controls padding, spacing, and overall card dimensions
- */
-type EventCardSize = "default" | "compact";
-/**
- * EventCard Layout Variant
- * Controls card layout orientation
- */
-type EventCardLayout = "vertical";
-/**
- * EventCard Style Variant
- * Controls visual appearance and featured state
- */
-type EventCardVariant = "default" | "featured";
-/**
- * Props for EventCard component.
- * All props are flat and domain-agnostic. Consumer should provide pre-localized strings.
- *
- * Component uses CARD_TOKENS and DOMAIN_TOKENS for all styling.
- * All visual values come from tokens - no hardcoded Tailwind classes.
- */
-interface EventCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Event title (pre-localized string) */
-    title: string;
-    /** Event description (pre-localized string, optional) */
-    description?: string;
-    /** Event date/time display string (pre-formatted, optional) */
-    date?: string;
-    /** Venue name (pre-localized string, optional) */
-    venueName?: string;
-    /** Price display string with currency (e.g., "€20 - €50", optional) */
-    price?: string;
-    /** Image URL (optional) */
-    imageUrl?: string;
-    /** Link URL for event details page (optional) */
-    href?: string;
-    /** External ticket purchase URL (optional) */
-    ticketUrl?: string;
-    /** Whether this is a featured event */
-    featured?: boolean;
-    /** Show image section */
-    showImage?: boolean;
-    /** Label for "Get Tickets" button (required) */
-    getTicketsLabel: string;
-    /** Badge text for featured events (optional) */
-    featuredBadgeText?: string;
-    /** Size variant - controls padding and spacing */
-    size?: EventCardSize;
-    /** Layout variant - controls card layout orientation */
-    layout?: EventCardLayout;
-    /** Style variant - controls visual appearance */
-    variant?: EventCardVariant;
-    /** Additional CSS classes */
-    className?: string;
-    /** Animation configuration for entrance and hover animations */
-    animation?: ComponentAnimationConfig;
-}
-
-/**
- * EventCard Component
- *
- * Domain-specific card component for displaying event information.
- * Uses CardBase for layout and CARD_TOKENS + DOMAIN_TOKENS for all styling.
- * All visual values come from tokens - no hardcoded Tailwind visual classes.
- *
- * Architecture:
- * - Uses CVA variants for size and layout variants
- * - All spacing, colors, radius from tokens
- * - Semantic HTML elements (heading, time, address)
- * - Full accessibility support
- *
- * @example
- * ```tsx
- * <EventCard
- *   title="Concert"
- *   date="2024-01-01"
- *   venueName="Venue"
- *   getTicketsLabel="Get Tickets"
- * />
- * ```
- */
-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, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CategoryCard, type CategoryCardProps, type CategoryCardSize, type CategoryCardVariant, Checkbox, type CheckboxProps, 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, 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, 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, Portal, type PortalProps, Progress, type ProgressProps, 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, type 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, Toaster, alertVariants, buttonVariants, checkboxVariants, surfaceVariants as containerSurfaceVariants, headingVariants, iconVariants, inputVariants, labelVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, skeletonVariants, surfaceVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };