@tenerife.music/ui 1.0.12 → 1.0.13

package/dist/index.d.ts

@@ -1,13 +1,18 @@
-export { B as BaseColorTokens, c as ChartColors, C as ColorScale, a as ColorTokens, M as Mode, b as SemanticColors, S as SurfaceColors, T as TextColors, e as accentColors, j as baseColors, h as chartColors, k as colorCSSVariables, d as cssVariableColorTokens, p as primaryColors, s as secondaryColors, g as semanticColors, f as surfaceColors, t as tailwindThemeColors, i as textColors } from './colors-DPNI96bB.js';
-import { spacing, semanticSpacing, borderRadius } from './tokens/index.js';
-export { ALERT_TOKENS, AlertVariant, Animation, BUTTON_TOKENS, BorderRadius, ButtonFontSize, ButtonHeight, ButtonPaddingHorizontal, ButtonPaddingVertical, ButtonShadow, CARD_TOKENS, CHECKBOX_TOKENS, CanonicalFontSize, CanonicalFontWeight, CanonicalLetterSpacing, CanonicalLineHeight, CanonicalTextColor, CardPadding, CardRadius, CardShadow, CardSize, CardSpacingVertical, CheckboxSize, CheckboxState, CheckboxVariant, ColoredShadow, ComponentRadius, ComponentSpacing, ContainerSpacing, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, DataListLabelWidth, DataListRowPadding, DomainCardBadge, DomainCardImage, DomainCardLayout, DomainCardMetadata, DomainCardMotion, DomainCardPriceCapacity, DomainCardSkeleton, DomainCardSkeletonContentWidth, DomainCardSurface, DropdownItemSize, DropdownMenuSize, DropdownTriggerSize, DropdownVariant, Duration, Easing, ElevationShadow, EmptyStateIconSize, FocusRing, FontFamily, FontSize, FontWeight, GlowEffect, GridSpacing, ICON_TOKENS, INPUT_TOKENS, IconColor, IconSize, IconStroke, InputFontSize, InputHeight, InputPaddingHorizontal, InputPaddingVertical, InputRadius, InputSize, Keyframe, LetterSpacing, LineHeight, MENU_TOKENS, MOTION_TOKENS, MenuContentMinWidth, MenuContentPadding, MenuContentRadius, MenuContentShadow, MenuIndicatorOffset, MenuIndicatorSize, MenuItemGap, MenuItemHeight, MenuItemPadding, MenuItemRadius, MenuLabelPadding, MenuSeparatorMargin, MotionAnimation, MotionDuration, MotionEasing, MotionTransition, MotionTransitionPreset, MotionV2CombinedType, MotionV2Duration, MotionV2Easing, MotionV2SlideDirection, MotionV2Transition, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NavigationItemPadding, NavigationListGap, NavigationRadius, NavigationShadow, NavigationSize, NavigationState, NotificationPanelWidth, OVERLAY_TOKENS, OverlayBackdropVariant, OverlayModalSize, POPOVER_TOKENS, PopoverArrowOffset, PopoverArrowSize, PopoverContentPadding, PopoverContentRadius, PopoverContentShadow, PopoverContentWidth, RADIO_TOKENS, RadioSize, RadioState, RadioVariant, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, SectionGap, SectionPadding, SectionSpacing, SemanticSpacing, SkeletonAnimation, SkeletonBackground, SkeletonVariant, Spacing, Spring, StackSpacing, SurfacePadding, SurfaceRadius, SurfaceShadow, SurfaceVariant, SwitchSize, SwitchState, SwitchVariant, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableCellPadding, TableGap, TableHeaderPadding, TableRowHeight, TableShadow, TextFontSize, TextFontWeight, TextLetterSpacing, TextLineHeight, TextStyle, ToastVariant, TooltipContentRadius, TooltipContentShadow, Transition, UI_COLORS, accentColoredShadows, allCSSVariables, allCSSVariablesCSS, animations, componentRadius, componentShadowMapping, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, radiusCSSVariables, reducedMotion, shadowBase, shadowCSSVariables, shadowOpacity, spacingCSSVariables, springs, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindTypographyConfig, textStyles, tokenSystemSummary, transitions, typographyCSSVariables } from './tokens/index.js';
+import { R as ResponsiveSelectSize, S as SelectVariantToken, a as ResponsiveSelectWidth, b as ResponsiveSideOffset, c as ResponsiveAlignOffset, d as SelectSizeToken, e as SelectStateToken, f as SelectWidthToken, g as ResponsiveModalSize, h as ResponsiveModalWidth, i as ResponsiveModalHeight, j as ResponsiveSpace, k as RadiusToken, l as SurfaceToken, M as ModalFooterAlignToken, m as ResponsiveRadius$1, n as ShadowToken, o as ResponsiveColor$1, p as Responsive, q as ResponsiveContainerMaxWidth, r as ResponsiveFlexBasis, s as ResponsiveDelay, t as ResponsiveContextMenuSize, u as ResponsiveContextMenuWidth, C as ContextMenuItemToneToken, v as ResponsiveTabsSize, T as TabsVariantToken, w as TabsToneToken, x as ResponsiveAnimationPreset } from './index-Bv4wWj9I.js';
+export { A as ALERT_TOKENS, y as AlertVariant, bB as Animation, z as BUTTON_TOKENS, c2 as BorderRadius, B as Breakpoint, D as ButtonFontSize, E as ButtonHeight, F as ButtonPaddingHorizontal, G as ButtonPaddingVertical, H as ButtonShadow, I as CARD_TOKENS, P as CHECKBOX_TOKENS, cz as CanonicalFontSize, cA as CanonicalFontWeight, cB as CanonicalLetterSpacing, cC as CanonicalLineHeight, cD as CanonicalTextColor, J as CardPadding, K as CardRadius, L as CardShadow, N as CardSize, O as CardSpacingVertical, Q as CheckboxSize, U as CheckboxState, V as CheckboxVariant, c8 as ColoredShadow, c3 as ComponentRadius, cm as ComponentSpacing, cn as ContainerSpacing, W as DATA_TOKENS, Z as DOMAIN_TOKENS, a7 as DROPDOWN_TOKENS, X as DataListLabelWidth, Y as DataListRowPadding, _ as DomainCardBadge, $ as DomainCardImage, a0 as DomainCardLayout, a1 as DomainCardMetadata, a2 as DomainCardMotion, a3 as DomainCardPriceCapacity, a4 as DomainCardSkeleton, a5 as DomainCardSkeletonContentWidth, a6 as DomainCardSurface, a8 as DropdownItemSize, a9 as DropdownMenuSize, aa as DropdownTriggerSize, ab as DropdownVariant, bC as Duration, bD as Easing, c9 as ElevationShadow, ac as EmptyStateIconSize, ca as FocusRing, cE as FontFamily, cF as FontSize, cG as FontWeight, cb as GlowEffect, co as GridSpacing, bt as ICON_TOKENS, ad as INPUT_TOKENS, bu as IconColor, bv as IconSize, bw as IconStroke, ae as InputFontSize, af as InputHeight, ag as InputPaddingHorizontal, ah as InputPaddingVertical, ai as InputRadius, aj as InputSize, bE as Keyframe, cH as LetterSpacing, cI as LineHeight, ak as MENU_TOKENS, ax as MOTION_TOKENS, al as MenuContentMinWidth, am as MenuContentPadding, an as MenuContentRadius, ao as MenuContentShadow, ap as MenuIndicatorOffset, aq as MenuIndicatorSize, ar as MenuItemGap, as as MenuItemHeight, at as MenuItemPadding, au as MenuItemRadius, av as MenuLabelPadding, aw as MenuSeparatorMargin, ay as MotionAnimation, az as MotionDuration, aA as MotionEasing, aB as MotionTransition, aC as MotionTransitionPreset, bF as MotionV2CombinedType, bG as MotionV2Duration, bH as MotionV2Easing, bI as MotionV2SlideDirection, bJ as MotionV2Transition, aD as NAVIGATION_TOKENS, aK as NOTIFICATION_TOKENS, aE as NavigationItemPadding, aF as NavigationListGap, aG as NavigationRadius, aH as NavigationShadow, aI as NavigationSize, aJ as NavigationState, aL as NotificationPanelWidth, aM as NotificationTokenVariant, aN as OVERLAY_TOKENS, aO as OverlayBackdropVariant, aP as OverlayModalSize, aQ as POPOVER_TOKENS, aR as PopoverArrowOffset, aS as PopoverArrowSize, aT as PopoverContentPadding, aU as PopoverContentRadius, aV as PopoverContentShadow, aW as PopoverContentWidth, aX as RADIO_TOKENS, aY as RadioSize, aZ as RadioState, a_ as RadioVariant, a$ as SECTION_TOKENS, b5 as SURFACE_TOKENS, ba as SWITCH_TOKENS, b0 as SectionGap, b1 as SectionPadding, cp as SectionSpacing, cq as SemanticSpacing, b2 as SkeletonAnimation, b3 as SkeletonBackground, b4 as SkeletonVariant, cr as Spacing, bK as Spring, cs as StackSpacing, b6 as SurfacePadding, b7 as SurfaceRadius, b8 as SurfaceShadow, b9 as SurfaceVariant, bb as SwitchSize, bc as SwitchState, bd as SwitchVariant, bj as TEXT_TOKENS, bo as TOAST_TOKENS, bq as TOOLTIP_TOKENS, be as TableCellPadding, bf as TableGap, bg as TableHeaderPadding, bh as TableRowHeight, bi as TableShadow, bk as TextFontSize, bl as TextFontWeight, bm as TextLetterSpacing, bn as TextLineHeight, cJ as TextStyle, bp as ToastVariant, br as TooltipContentRadius, bs as TooltipContentShadow, bL as Transition, cy as UI_COLORS, cc as accentColoredShadows, bx as allCSSVariables, by as allCSSVariablesCSS, bM as animations, c4 as borderRadius, c5 as componentRadius, cd as componentShadowMapping, bN as durations, bO as easings, ce as elevationShadows, cf as focusRings, cK as fontFamily, cL as fontSize, cM as fontSizeWithMd, cN as fontWeight, bz as generateCSSVariablesCSS, cg as glowEffects, bP as keyframes, ct as layoutSpacing, cO as letterSpacing, cP as lineHeight, bQ as motionCSSVariables, bS as motionV2CSSVariables, bR as motionV2Combined, bT as motionV2Durations, bU as motionV2Easings, bV as motionV2Fade, bW as motionV2Scale, bX as motionV2Slide, bY as motionV2TailwindConfig, bZ as motionV2Transitions, ch as primaryColoredShadows, c6 as radiusCSSVariables, b_ as reducedMotion, cu as semanticSpacing, ci as shadowBase, cj as shadowCSSVariables, ck as shadowOpacity, cv as spacing, cw as spacingCSSVariables, b$ as springs, c0 as tailwindMotionConfig, c7 as tailwindRadiusConfig, cl as tailwindShadowConfig, cx as tailwindSpacingConfig, cQ as tailwindTypographyConfig, cR as textStyles, bA as tokenSystemSummary, c1 as transitions, cS as typographyCSSVariables } from './index-Bv4wWj9I.js';
+export { B as BaseColorTokens, b as ChartColors, C as ColorScale, c as ColorTokens, M as Mode, a as SemanticColors, S as SurfaceColors, T as TextColors, e as accentColors, f as baseColors, g as chartColors, h as colorCSSVariables, d as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from './colors-CVA7_16U.js';
 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 * as react_jsx_runtime from 'react/jsx-runtime';
+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 TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | null | undefined;
@@ -72,7 +77,7 @@ interface CodeProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<ty
 declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLElement>>;
 
 declare const displayVariants: (props?: ({
-    size?: "2xl" | "3xl" | "4xl" | "xl" | null | undefined;
+    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;
@@ -100,6 +105,314 @@ interface LeadProps extends React$1.HTMLAttributes<HTMLParagraphElement>, Varian
 }
 declare const Lead: React$1.ForwardRefExoticComponent<LeadProps & React$1.RefAttributes<HTMLElement>>;
 
+interface SelectRootProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
+}
+/**
+ * Select Root component
+ * Radix Root is a context provider, not a DOM element, so it doesn't accept refs
+ */
+declare const SelectRoot: React$1.FC<SelectRootProps>;
+interface SelectTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "size" | "variant" | "width"> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveSelectSize;
+    /**
+     * Visual variant - token-based
+     */
+    variant?: SelectVariantToken;
+    /**
+     * Width - token-based
+     */
+    width?: ResponsiveSelectWidth;
+}
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> {
+}
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface SelectIconProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Icon> {
+}
+declare const SelectIcon: React$1.ForwardRefExoticComponent<SelectIconProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface SelectContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "size" | "sideOffset" | "alignOffset"> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveSelectSize;
+    /**
+     * Side offset - token-based
+     */
+    sideOffset?: ResponsiveSideOffset;
+    /**
+     * Alignment offset - token-based
+     */
+    alignOffset?: ResponsiveAlignOffset;
+}
+declare const SelectContent: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectViewportProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Viewport> {
+}
+declare const SelectViewport: React$1.ForwardRefExoticComponent<SelectViewportProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveSelectSize;
+}
+declare const SelectItem: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectItemTextProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.ItemText> {
+}
+declare const SelectItemText: React$1.ForwardRefExoticComponent<SelectItemTextProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface SelectItemIndicatorProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.ItemIndicator> {
+}
+declare const SelectItemIndicator: React$1.ForwardRefExoticComponent<SelectItemIndicatorProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface SelectSeparatorProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveSelectSize;
+}
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectGroupProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+}
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectLabelProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {
+    /**
+     * Size variant - token-based
+     */
+    size?: ResponsiveSelectSize;
+}
+declare const SelectLabel: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Select: {
+    Root: React$1.FC<SelectRootProps>;
+    Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Value: React$1.ForwardRefExoticComponent<SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+    Icon: React$1.ForwardRefExoticComponent<SelectIconProps & React$1.RefAttributes<HTMLSpanElement>>;
+    Content: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
+    Viewport: React$1.ForwardRefExoticComponent<SelectViewportProps & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
+    ItemText: React$1.ForwardRefExoticComponent<SelectItemTextProps & React$1.RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: React$1.ForwardRefExoticComponent<SelectItemIndicatorProps & React$1.RefAttributes<HTMLSpanElement>>;
+    Separator: React$1.ForwardRefExoticComponent<SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+    Group: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+    Label: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Select size token type
+ */
+type SelectSize = SelectSizeToken;
+/**
+ * Select variant token type
+ */
+type SelectVariant = SelectVariantToken;
+/**
+ * Select width token type
+ */
+type SelectWidth = SelectWidthToken;
+/**
+ * Select state token type
+ */
+type SelectState = SelectStateToken;
+
+/**
+ * Modal Component
+ *
+ * Radix-based modal component with token-driven styling.
+ * All behavior (focus trap, keyboard navigation, a11y, portal) is handled by Radix Dialog.
+ * Tenerife UI provides visual styling through tokens only.
+ */
+
+interface ModalRootProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+}
+/**
+ * Modal Root component
+ * Radix Root is a context provider, not a DOM element, so it doesn't accept refs
+ */
+declare const ModalRoot: React$1.FC<ModalRootProps>;
+interface ModalTriggerProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {
+}
+/**
+ * Modal Trigger component
+ * Wrapper around Radix Dialog Trigger
+ */
+declare const ModalTrigger: React$1.ForwardRefExoticComponent<ModalTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface ModalOverlayProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+}
+/**
+ * Modal Overlay component
+ * Wrapper around Radix Dialog Overlay with token-based styling
+ */
+declare const ModalOverlay: React$1.ForwardRefExoticComponent<ModalOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ModalContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "size" | "width" | "height" | "padding" | "radius" | "surface"> {
+    /**
+     * Size variant - token-based
+     *
+     * **Precedence Rule:** The `size` prop applies a preset configuration (width, height, padding, radius, shadow).
+     * Individual override props (`width`, `height`, `padding`, `radius`) take precedence over the size preset.
+     *
+     * **Example:**
+     * - `size="md"` → applies md preset (max-w-md, p-lg, rounded-lg, etc.)
+     * - `size="md" width="lg"` → md preset applied, but width overridden to lg (max-w-lg)
+     * - `width="lg"` (no size) → only width applied, other defaults used
+     *
+     * @default "md"
+     */
+    size?: ResponsiveModalSize;
+    /**
+     * Width - token-based
+     *
+     * **Precedence:** Overrides the width from the `size` preset if provided.
+     * If `size` is not provided, only this width is applied.
+     *
+     * @example
+     * ```tsx
+     * <Modal.Content size="md" width="lg" />
+     * // Applies md preset, but width is overridden to lg
+     * ```
+     */
+    width?: ResponsiveModalWidth;
+    /**
+     * Height - token-based
+     *
+     * **Precedence:** Overrides the height from the `size` preset if provided.
+     * If `size` is not provided, only this height is applied.
+     */
+    height?: ResponsiveModalHeight;
+    /**
+     * Padding - token-based
+     *
+     * **Precedence:** Overrides the padding from the `size` preset if provided.
+     * If `size` is not provided, only this padding is applied.
+     */
+    padding?: ResponsiveSpace;
+    /**
+     * Border radius - token-based
+     *
+     * **Precedence:** Overrides the radius from the `size` preset if provided.
+     * If `size` is not provided, only this radius is applied.
+     */
+    radius?: RadiusToken;
+    /**
+     * Surface variant - token-based
+     *
+     * Applies surface styling (background, shadow) independent of size preset.
+     *
+     * @example
+     * ```tsx
+     * <Modal.Content size="md" surface="raised" />
+     * // Applies md preset + raised surface styling
+     * ```
+     */
+    surface?: SurfaceToken;
+}
+/**
+ * Modal Content component
+ * Wrapper around Radix Dialog Content with token-based styling.
+ *
+ * **Prop Precedence:**
+ * 1. `size` prop applies a preset configuration (width, height, padding, radius, shadow)
+ * 2. Individual override props (`width`, `height`, `padding`, `radius`) take precedence over size preset
+ * 3. `surface` is applied independently and does not conflict with size preset
+ *
+ * **Usage:**
+ * ```tsx
+ * // Use size preset only
+ * <Modal.Content size="md" />
+ *
+ * // Override specific properties from preset
+ * <Modal.Content size="md" width="lg" padding="xl" />
+ *
+ * // Use individual props without preset
+ * <Modal.Content width="lg" padding="md" />
+ * ```
+ */
+declare const ModalContent: React$1.ForwardRefExoticComponent<ModalContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ModalHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gap between header items - token-based
+     */
+    gap?: ResponsiveSpace;
+}
+/**
+ * Modal Header component
+ * Presentational wrapper for modal header content
+ */
+declare const ModalHeader: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ModalTitleProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+}
+/**
+ * Modal Title component
+ * Wrapper around Radix Dialog Title with token-based typography
+ */
+declare const ModalTitle: React$1.ForwardRefExoticComponent<ModalTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
+interface ModalDescriptionProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+}
+/**
+ * Modal Description component
+ * Wrapper around Radix Dialog Description with token-based typography
+ */
+declare const ModalDescription: React$1.ForwardRefExoticComponent<ModalDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface ModalFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gap between footer items - token-based
+     */
+    gap?: ResponsiveSpace;
+    /**
+     * Footer alignment - token-based
+     */
+    align?: ModalFooterAlignToken;
+}
+/**
+ * Modal Footer component
+ * Presentational wrapper for modal footer content
+ */
+declare const ModalFooter: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ModalCloseProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {
+}
+/**
+ * Modal Close component
+ * Wrapper around Radix Dialog Close with token-based styling
+ */
+declare const ModalClose: React$1.ForwardRefExoticComponent<ModalCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Modal Component
+ *
+ * Radix Dialog-based modal component with token-driven styling.
+ *
+ * **Usage:**
+ * ```tsx
+ * <Modal.Root open={open} onOpenChange={setOpen}>
+ *   <Modal.Trigger>Open</Modal.Trigger>
+ *   <Modal.Content>
+ *     <Modal.Header>
+ *       <Modal.Title>Title</Modal.Title>
+ *       <Modal.Description>Description</Modal.Description>
+ *     </Modal.Header>
+ *     <div>Content</div>
+ *     <Modal.Footer>
+ *       <Modal.Close>Close</Modal.Close>
+ *     </Modal.Footer>
+ *     <Modal.Close />
+ *   </Modal.Content>
+ * </Modal.Root>
+ * ```
+ *
+ * **Note:** Modal.Portal and Modal.Overlay are internal and should not be used directly.
+ * ModalContent automatically handles portal and overlay rendering.
+ */
+declare const Modal: {
+    Root: React$1.FC<ModalRootProps>;
+    Trigger: React$1.ForwardRefExoticComponent<ModalTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Overlay: React$1.ForwardRefExoticComponent<ModalOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<ModalContentProps & React$1.RefAttributes<HTMLDivElement>>;
+    Header: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+    Title: React$1.ForwardRefExoticComponent<ModalTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
+    Description: React$1.ForwardRefExoticComponent<ModalDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+    Footer: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+    Close: React$1.ForwardRefExoticComponent<ModalCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+};
+
 /**
  * Checkbox Variants
  *
@@ -111,7 +424,7 @@ declare const Lead: React$1.ForwardRefExoticComponent<LeadProps & React$1.RefAtt
 declare const checkboxVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "disabled" | "default" | "error" | "checked" | "indeterminate" | null | undefined;
+    state?: "default" | "disabled" | "error" | "checked" | "indeterminate" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -211,7 +524,7 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$
 declare const inputVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "disabled" | "default" | "success" | "error" | null | undefined;
+    state?: "default" | "disabled" | "success" | "error" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -280,7 +593,7 @@ declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefA
 declare const radioVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "disabled" | "default" | "error" | "checked" | null | undefined;
+    state?: "default" | "disabled" | "error" | "checked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -413,174 +726,6 @@ interface RadioGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
-/**
- * Select Variants
- *
- * CVA-based variant system for Select component.
- * Supports variants (primary, secondary, outline, ghost),
- * sizes (xs, sm, md, lg), and states (open, closed, disabled).
- * All styling uses token-based values with CSS variable references.
- */
-/**
- * Select Trigger Variants
- * Button element that opens/closes the dropdown
- */
-declare const selectTriggerVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    state?: "disabled" | "closed" | "open" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * Select Listbox Variants
- * Container for the dropdown options
- */
-declare const selectListboxVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * Select Option Variants
- * Individual option item in the listbox
- */
-declare const selectOptionVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    state?: "disabled" | "default" | "selected" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-
-/**
- * Select Variant Props
- */
-type SelectVariant = VariantProps<typeof selectTriggerVariants>["variant"];
-type SelectSize = VariantProps<typeof selectTriggerVariants>["size"];
-/**
- * Select Root Props
- */
-interface SelectRootProps {
-    /**
-     * Current value (controlled mode)
-     */
-    value?: string;
-    /**
-     * Default value (uncontrolled mode)
-     */
-    defaultValue?: string;
-    /**
-     * Callback when value changes
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Whether the select is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the select is open (controlled mode)
-     */
-    open?: boolean;
-    /**
-     * Callback when open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Default open state (uncontrolled mode)
-     */
-    defaultOpen?: boolean;
-    /**
-     * Variant style (applies to trigger)
-     */
-    variant?: SelectVariant;
-    /**
-     * Size (applies to trigger, listbox, and options)
-     */
-    size?: SelectSize;
-    /**
-     * Children
-     */
-    children: React.ReactNode;
-}
-/**
- * Select Trigger Props
- */
-interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Variant style
-     */
-    variant?: SelectVariant;
-    /**
-     * Size
-     */
-    size?: SelectSize;
-    /**
-     * Placeholder text when no value is selected
-     */
-    placeholder?: string;
-}
-/**
- * Select Listbox Props
- */
-interface SelectListboxProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Size (should match trigger size)
-     */
-    size?: SelectSize;
-}
-/**
- * Select Option Props
- */
-interface SelectOptionProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Option value
-     */
-    value: string;
-    /**
-     * Option label
-     */
-    label?: string;
-    /**
-     * Whether the option is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Size (should match trigger size)
-     */
-    size?: SelectSize;
-}
-
-/**
- * Select Root Component
- * Manages state and provides context for all Select sub-components
- */
-declare function SelectRoot({ value: controlledValue, defaultValue, onValueChange, disabled, open: controlledOpen, onOpenChange, defaultOpen, children, variant, size, }: SelectRootProps & {
-    variant?: SelectRootProps["variant"];
-    size?: SelectRootProps["size"];
-}): react_jsx_runtime.JSX.Element;
-declare namespace SelectRoot {
-    var displayName: string;
-}
-/**
- * Select Trigger Component
- * Button that opens/closes the dropdown and displays the selected value
- */
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-/**
- * Select Listbox Component
- * Container for options with keyboard navigation
- */
-declare const SelectListbox: React$1.ForwardRefExoticComponent<SelectListboxProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Select Option Component
- * Individual option in the listbox
- */
-declare const SelectOption: React$1.ForwardRefExoticComponent<SelectOptionProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Select Component (Compound)
- * Main export that combines all sub-components
- */
-declare const Select: {
-    Root: typeof SelectRoot;
-    Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Listbox: React$1.ForwardRefExoticComponent<SelectListboxProps & React$1.RefAttributes<HTMLDivElement>>;
-    Option: React$1.ForwardRefExoticComponent<SelectOptionProps & React$1.RefAttributes<HTMLDivElement>>;
-};
-
 /**
  * Textarea Variants
  *
@@ -592,7 +737,7 @@ declare const Select: {
 declare const textareaVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "disabled" | "default" | "success" | "error" | null | undefined;
+    state?: "default" | "disabled" | "success" | "error" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -705,31 +850,11 @@ declare const FieldRoot: typeof Field & {
 };
 
 /**
- * Responsive value type - can be a single value or an object with breakpoint keys
+ * Layout Primitives Shared Types
+ *
+ * Common types used across Box, Flex, Grid, and Stack components.
  */
-type ResponsiveValue<T> = T | {
-    base?: T;
-    sm?: T;
-    md?: T;
-    lg?: T;
-    xl?: T;
-    "2xl"?: T;
-};
 
-/**
- * Spacing token values
- * Supports numeric keys (0-96) and semantic keys (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
- */
-type SpacingValue = number | keyof typeof spacing | keyof typeof semanticSpacing;
-/**
- * Border radius token values
- */
-type RadiusValue = keyof typeof borderRadius;
-/**
- * Color token values
- * Supports CSS variable names (e.g., "background", "primary", "card")
- */
-type ColorValue = "background" | "foreground" | "card" | "card-foreground" | "popover" | "popover-foreground" | "primary" | "primary-foreground" | "secondary" | "secondary-foreground" | "muted" | "muted-foreground" | "accent" | "accent-foreground" | "destructive" | "destructive-foreground" | "border" | "input" | "ring" | string;
 /**
  * Alignment values for flexbox/grid
  */
@@ -759,9 +884,9 @@ type RowValue = 1 | 2 | 3 | 4 | 5 | 6 | "none";
  */
 type FlowValue = "row" | "col" | "dense" | "row-dense" | "col-dense";
 /**
- * Shadow token values (elevation shadows)
+ * Shadow token values
  */
-type ShadowValue = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type ShadowValue = ShadowToken;
 /**
  * Display type values
  */
@@ -769,43 +894,43 @@ type DisplayValue = "block" | "inline" | "inline-block" | "flex" | "grid" | "inl
 /**
  * Responsive spacing prop type
  */
-type ResponsiveSpacing = ResponsiveValue<SpacingValue>;
+type ResponsiveSpacing = ResponsiveSpace;
 /**
  * Responsive radius prop type
  */
-type ResponsiveRadius = ResponsiveValue<RadiusValue>;
+type ResponsiveRadius = ResponsiveRadius$1;
 /**
  * Responsive color prop type
  */
-type ResponsiveColor = ResponsiveValue<ColorValue>;
+type ResponsiveColor = ResponsiveColor$1;
 /**
  * Responsive alignment prop type
  */
-type ResponsiveAlignment = ResponsiveValue<AlignmentValue>;
+type ResponsiveAlignment = Responsive<AlignmentValue>;
 /**
  * Responsive justify prop type
  */
-type ResponsiveJustify = ResponsiveValue<JustifyValue>;
+type ResponsiveJustify = Responsive<JustifyValue>;
 /**
  * Responsive direction prop type
  */
-type ResponsiveFlexDirection = ResponsiveValue<FlexDirectionValue>;
+type ResponsiveFlexDirection = Responsive<FlexDirectionValue>;
 /**
  * Responsive wrap prop type
  */
-type ResponsiveFlexWrap = ResponsiveValue<FlexWrapValue>;
+type ResponsiveFlexWrap = Responsive<FlexWrapValue>;
 /**
  * Responsive column prop type
  */
-type ResponsiveColumns = ResponsiveValue<ColumnValue>;
+type ResponsiveColumns = Responsive<ColumnValue>;
 /**
  * Responsive row prop type
  */
-type ResponsiveRows = ResponsiveValue<RowValue>;
+type ResponsiveRows = Responsive<RowValue>;
 /**
  * Responsive flow prop type
  */
-type ResponsiveFlow = ResponsiveValue<FlowValue>;
+type ResponsiveFlow = Responsive<FlowValue>;
 /**
  * Surface variant values
  */
@@ -972,9 +1097,12 @@ declare const Column: React$1.ForwardRefExoticComponent<StackProps & React$1.Ref
 interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Maximum width of the container
-     * Supports: spacing tokens, container sizes (sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full), or CSS values
+     * Token-based: accepts container size tokens (sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full) or spacing tokens
+     * @example maxWidth="lg" // 32rem (512px)
+     * @example maxWidth={{ base: "md", lg: "xl" }} // Responsive
+     * @example maxWidth="96" // Uses spacing token
      */
-    maxWidth?: string | ResponsiveSpacing;
+    maxWidth?: ResponsiveContainerMaxWidth;
     /**
      * Padding (horizontal) - token-based
      * Supports: spacing tokens or container spacing tokens (container-xs, container-sm, container-md, etc.)
@@ -1018,10 +1146,13 @@ interface FlexProps extends Omit<BoxProps, "display" | "flexDirection" | "align"
      */
     shrink?: 0 | 1 | boolean;
     /**
-     * Flex basis (CSS value or Tailwind class)
-     * Note: For token-based approach, use spacing tokens via className
+     * Flex basis - token-based
+     * Accepts spacing tokens (xs, sm, md, lg, etc.) or semantic CSS values (auto, 0, 100%, fit-content, max-content, min-content)
+     * @example basis="md" // Uses spacing token
+     * @example basis="auto" // Semantic CSS value
+     * @example basis={{ base: "sm", md: "lg" }} // Responsive
      */
-    basis?: string;
+    basis?: ResponsiveFlexBasis;
     /**
      * Align items
      */
@@ -1226,15 +1357,19 @@ declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & Re
 
 interface SectionProps extends Omit<StackProps, "py" | "gap"> {
     /**
-     * Vertical padding - token-based (sm, md, lg, xl)
-     * Maps to SECTION_TOKENS.padding
+     * Vertical padding - token-based
+     * Accepts spacing tokens (xs, sm, md, lg, xl, 2xl, etc.) or responsive object
+     * @example padding="md"
+     * @example padding={{ base: "sm", lg: "xl" }}
      */
-    padding?: "sm" | "md" | "lg" | "xl";
+    padding?: ResponsiveSpacing;
     /**
-     * Gap spacing for content blocks - token-based (sm, md, lg, xl)
-     * Maps to SECTION_TOKENS.spacing
+     * Gap spacing for content blocks - token-based
+     * Accepts spacing tokens (xs, sm, md, lg, xl, 2xl, etc.) or responsive object
+     * @example gap="md"
+     * @example gap={{ base: "sm", lg: "xl" }}
      */
-    gap?: "sm" | "md" | "lg" | "xl";
+    gap?: ResponsiveSpacing;
     /**
      * Render as different HTML element
      */
@@ -1246,7 +1381,7 @@ interface SectionProps extends Omit<StackProps, "py" | "gap"> {
 declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const surfaceVariants: (props?: ({
-    variant?: "outline" | "flat" | "raised" | "sunken" | "subtle" | null | undefined;
+    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> {
     /**
@@ -1321,64 +1456,6 @@ interface BackdropProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantP
  */
 declare const Backdrop: React$1.ForwardRefExoticComponent<BackdropProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const modalVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "fullscreen" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick" | "role" | "aria-modal" | "aria-labelledby" | "aria-describedby">, VariantProps<typeof modalVariants> {
-    /**
-     * Whether modal is open
-     */
-    open: boolean;
-    /**
-     * Callback when modal should close
-     */
-    onClose: () => void;
-    /**
-     * Modal size variant
-     */
-    size?: "sm" | "md" | "lg" | "fullscreen";
-    /**
-     * Backdrop variant
-     */
-    backdropVariant?: "default" | "blurred" | "transparent";
-    /**
-     * Whether to close on backdrop click
-     */
-    closeOnBackdropClick?: boolean;
-    /**
-     * Whether to close on escape key
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Element to return focus to when modal closes
-     */
-    returnFocusRef?: React$1.RefObject<HTMLElement>;
-}
-/**
- * Modal Header - Header section with spacing
- */
-interface ModalHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-declare const ModalHeader: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Modal Body - Main content area
- */
-interface ModalBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-declare const ModalBody: React$1.ForwardRefExoticComponent<ModalBodyProps & React$1.RefAttributes<HTMLDivElement>>;
-/**
- * Modal Footer - Footer section with layout
- */
-interface ModalFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
-}
-declare const ModalFooter: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const Modal: React$1.ForwardRefExoticComponent<ModalProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Content: React$1.ForwardRefExoticComponent<ModalProps & React$1.RefAttributes<HTMLDivElement>>;
-    Header: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-    Body: React$1.ForwardRefExoticComponent<ModalBodyProps & React$1.RefAttributes<HTMLDivElement>>;
-    Footer: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
-};
-
 /**
  * Dialog Component
  *
@@ -1387,7 +1464,7 @@ declare const Modal: React$1.ForwardRefExoticComponent<ModalProps & React$1.RefA
  * Full A11y compliance with aria-labelledby and aria-describedby.
  */
 
-interface DialogProps extends Omit<ModalProps, "role" | "aria-modal"> {
+interface DialogProps extends React$1.ComponentPropsWithoutRef<typeof Modal.Root> {
     /**
      * ID for the dialog title (for aria-labelledby)
      */
@@ -1399,8 +1476,11 @@ interface DialogProps extends Omit<ModalProps, "role" | "aria-modal"> {
 }
 /**
  * Dialog Root - Main dialog wrapper
+ *
+ * **Note:** This component is a semantic wrapper over Modal.Root and Modal.Content.
+ * It provides Dialog-specific subcomponents but uses the new Radix-based Modal internally.
  */
-declare const DialogRoot: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogRoot: React$1.FC<DialogProps>;
 /**
  * Dialog Header - Header section with spacing
  */
@@ -1435,8 +1515,8 @@ declare const DialogBody: React$1.ForwardRefExoticComponent<DialogBodyProps & Re
 interface DialogFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const DialogFooter: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Root: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Dialog: React$1.FC<DialogProps> & {
+    Root: React$1.FC<DialogProps>;
     Header: React$1.ForwardRefExoticComponent<DialogHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
     Title: React$1.ForwardRefExoticComponent<DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
     Description: React$1.ForwardRefExoticComponent<DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
@@ -1447,7 +1527,7 @@ declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.Re
 declare const toastVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ToastAction {
+interface ToastActionData {
     label: string;
     onClick: () => void;
 }
@@ -1456,72 +1536,92 @@ interface ToastData {
     title?: string;
     description?: string;
     variant?: "default" | "success" | "info" | "warning" | "danger";
-    action?: ToastAction;
-    duration?: number;
+    action?: ToastActionData;
+    /**
+     * Toast duration - token-based
+     * Uses motion duration tokens
+     * Passed to Radix Toast.Root duration prop
+     */
+    duration?: ResponsiveDelay;
 }
-interface ToastProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
+interface ToastRootProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "duration">, VariantProps<typeof toastVariants> {
     /**
      * Toast data
      */
     toast: ToastData;
-    /**
-     * Callback when toast is dismissed
-     */
-    onDismiss: (id: string) => void;
-    /**
-     * Whether toast is visible (for animation)
-     */
-    isVisible?: boolean;
 }
 /**
- * Toast component - notification toast
+ * Toast Action component
+ * Wrapper around Radix Toast.Action with token-based styling
+ */
+declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Legacy Exports (Backward Compatibility)
+ *
+ * These exports maintain backward compatibility with existing code:
+ *
+ * - Toast: Alias for ToastRoot
+ *   Rationale: Previous API used `Toast` as the main component name.
+ *   This alias allows existing code to continue working without changes.
+ *   Note: This is a simple alias - no legacy behavior is preserved.
+ *   The component is fully Radix-based regardless of which name is used.
+ *
+ * - ToastProps: Alias for ToastRootProps
+ *   Rationale: Previous API used `ToastProps` as the type name.
+ *   This alias maintains type compatibility for existing TypeScript code.
+ *
+ * Migration Path:
+ * - Existing code using `Toast` will continue to work
+ * - New code should use `ToastRoot` for clarity
+ * - These legacy exports may be removed in a future major version
  */
-declare const Toast: React$1.ForwardRefExoticComponent<ToastProps & React$1.RefAttributes<HTMLDivElement>>;
+type ToastProps = ToastRootProps;
+declare const Toast: React$1.ForwardRefExoticComponent<ToastRootProps & React$1.RefAttributes<HTMLLIElement>>;
 
 /**
  * ToastViewport Component
  *
- * Fixed positioning container for toast notifications.
- * Supports position variants (top-right, bottom-left, etc.).
- * Uses Portal for rendering outside DOM hierarchy.
+ * 🔒 FOUNDATION COMPONENT - ARCHITECTURE LOCKED
+ *
+ * Radix-based toast viewport with token-driven positioning.
+ * Radix Toast.Viewport handles portal rendering internally.
+ * Tenerife UI provides visual styling and positioning through tokens only.
+ *
+ * This component is locked as a foundation component per TUI_ARCHITECTURE_LOCK.md.
+ * DO NOT reimplement portal logic - Radix handles this internally.
  */
 
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-interface ToastViewportProps {
+interface ToastViewportProps extends React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> {
     /**
      * Position of toast viewport
      */
     position?: ToastPosition;
-    /**
-     * Children to render in viewport
-     */
-    children: React$1.ReactNode;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
 }
 /**
- * ToastViewport component - container for toast notifications
+ * ToastViewport component
+ * Wrapper around Radix Toast.Viewport with token-based positioning.
+ * Radix handles portal rendering internally - no custom Portal needed.
  */
-declare const ToastViewport: React$1.ForwardRefExoticComponent<ToastViewportProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ToastViewport: React$1.ForwardRefExoticComponent<ToastViewportProps & React$1.RefAttributes<HTMLOListElement>>;
 
 interface ToastOptions {
     title?: string;
     description?: string;
     variant?: "default" | "success" | "info" | "warning" | "danger";
-    action?: ToastAction;
-    duration?: number;
+    action?: ToastActionData;
+    /**
+     * Toast duration - token-based
+     * Uses motion duration tokens
+     * Passed to Radix Toast.Root duration prop (Radix handles auto-dismiss)
+     */
+    duration?: ResponsiveDelay;
 }
 interface ToastContextType {
     toast: (options: ToastOptions) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;
-    updateToast: (id: string, updates: Partial<ToastData>) => void;
-    getQueue: () => ToastData[];
-    getGrouped: () => Record<string, ToastData[]>;
 }
-type GroupByFunction$1 = (toast: ToastData) => string;
 interface ToastProviderProps {
     /**
      * Children to render
@@ -1532,23 +1632,25 @@ interface ToastProviderProps {
      */
     position?: ToastPosition;
     /**
-     * Maximum number of toasts to show (default: 5)
-     */
-    maxToasts?: number;
-    /**
-     * Maximum number of visible toasts (default: 3)
-     * Overflow notifications are queued
+     * Swipe direction for toast dismissal
+     * Radix handles swipe gestures internally
      */
-    maxVisible?: number;
+    swipeDirection?: "up" | "down" | "left" | "right";
     /**
-     * Function to group toasts (by date, type, or custom)
+     * Default duration for toasts in milliseconds
+     * Radix handles auto-dismiss based on this value
+     *
+     * NOTE: This is a behavioral prop for Radix Toast.Provider API (requires number),
+     * not a visual prop. The eslint rule is disabled for this specific case.
      */
-    groupBy?: GroupByFunction$1;
+    duration?: number;
 }
 /**
- * ToastProvider component - context provider for toast notifications
+ * ToastProvider component
+ * Wrapper around Radix Toast.Provider with convenience toast() function.
+ * Radix handles all state management, auto-dismiss, and queue management.
  */
-declare function ToastProvider({ children, position, maxVisible, groupBy, }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+declare function ToastProvider({ children, position, swipeDirection, duration, }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to use toast context
  */
@@ -1622,8 +1724,12 @@ interface NotificationData {
     description?: string;
     variant?: NotificationVariant;
     channel?: NotificationChannel;
-    action?: ToastAction;
-    duration?: number;
+    action?: ToastActionData;
+    /**
+     * Notification duration - token-based
+     * Uses motion duration tokens
+     */
+    duration?: ResponsiveDelay;
     persistent?: boolean;
     timestamp: number;
     read?: boolean;
@@ -1636,8 +1742,12 @@ interface NotificationOptions {
     description?: string;
     variant?: NotificationVariant;
     channel?: NotificationChannel;
-    action?: ToastAction;
-    duration?: number;
+    action?: ToastActionData;
+    /**
+     * Notification duration - token-based
+     * Uses motion duration tokens
+     */
+    duration?: ResponsiveDelay;
     persistent?: boolean;
 }
 /**
@@ -1896,9 +2006,10 @@ interface PopoverContentProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
      */
     placement?: Placement;
     /**
-     * Offset between trigger and content (in pixels)
+     * Offset between trigger and content - token-based
+     * Uses spacing tokens for positioning offsets
      */
-    offset?: number;
+    offset?: ResponsiveAlignOffset;
     /**
      * Whether to close on outside click
      */
@@ -2181,15 +2292,17 @@ declare const HoverCardContent: React$1.ForwardRefExoticComponent<HoverCardConte
 
 interface HoverCardRootProps extends Omit<PopoverRootProps, "open" | "onOpenChange"> {
     /**
-     * Delay before opening (in milliseconds)
+     * Delay before opening - token-based
+     * Uses motion duration tokens
      * @default 0
      */
-    openDelay?: number;
+    openDelay?: ResponsiveDelay;
     /**
-     * Delay before closing (in milliseconds)
+     * Delay before closing - token-based
+     * Uses motion duration tokens
      * @default 300
      */
-    closeDelay?: number;
+    closeDelay?: ResponsiveDelay;
 }
 /**
  * HoverCard Root component
@@ -2213,112 +2326,290 @@ interface HoverCardTriggerProps extends PopoverTriggerProps {
 declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardTriggerProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * ContextMenu Content Component
+ * ============================================================================
+ * 🔒 FOUNDATION LOCK - ContextMenu Component
+ * ============================================================================
  *
- * Content container for context menu.
- * Uses cursor position for initial placement.
+ * 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 ContextMenuContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+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"> {
     /**
-     * Placement preference (if position is not set)
+     * Size variant - token-based
      */
-    placement?: Placement;
+    size?: ResponsiveContextMenuSize;
+    /**
+     * Width - token-based
+     */
+    width?: ResponsiveContextMenuWidth;
+    /**
+     * Padding - token-based
+     */
+    padding?: ResponsiveSpace;
+    /**
+     * Radius - token-based
+     */
+    radius?: RadiusToken;
     /**
-     * Offset between trigger and content (in pixels)
+     * Surface variant - token-based
      */
-    offset?: number;
+    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 Group Component
- *
- * Group container for context menu.
- * Reuses DropdownMenuGroup.
+ * ContextMenu Item component
+ * Wrapper around Radix ContextMenu Item with token-based styling.
  */
-
-interface ContextMenuGroupProps extends DropdownMenuGroupProps {
+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 Group component
+ * ContextMenu CheckboxItem component
+ * Wrapper around Radix ContextMenu CheckboxItem with token-based styling.
  */
-declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-
+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 Item Component
- *
- * Menu item for context menu.
- * Reuses DropdownMenuItem logic.
+ * ContextMenu RadioGroup component
+ * Wrapper around Radix ContextMenu RadioGroup.
  */
-
-interface ContextMenuItemProps extends DropdownMenuItemProps {
+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 Item component
+ * ContextMenu RadioItem component
+ * Wrapper around Radix ContextMenu RadioItem with token-based styling.
  */
-declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
-
+declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSeparatorProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {
+    className?: string;
+}
 /**
- * ContextMenu Label Component
- *
- * Label for context menu.
- * Reuses DropdownMenuLabel.
+ * ContextMenu Separator component
+ * Wrapper around Radix ContextMenu Separator with token-based styling.
  */
-
-interface ContextMenuLabelProps extends DropdownMenuLabelProps {
+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 ContextMenuRootProps extends Omit<PopoverRootProps, "open" | "onOpenChange"> {
+interface ContextMenuSubProps extends React$1.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub> {
+    children?: React$1.ReactNode;
 }
 /**
- * ContextMenu Root component
+ * ContextMenu Sub component
+ * Wrapper around Radix ContextMenu Sub.
  */
-declare function ContextMenuRoot(props: ContextMenuRootProps): react_jsx_runtime.JSX.Element;
-declare namespace ContextMenuRoot {
-    var displayName: string;
+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 Separator Component
- *
- * Visual separator for context menu.
- * Reuses DropdownMenuSeparator.
+ * ContextMenu SubTrigger component
+ * Wrapper around Radix ContextMenu SubTrigger with token-based styling.
  */
-
-interface ContextMenuSeparatorProps extends DropdownMenuSeparatorProps {
+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 Separator component
+ * ContextMenu SubContent component
+ * Wrapper around Radix ContextMenu SubContent with token-based styling.
  */
-declare const ContextMenuSeparator: React$1.ForwardRefExoticComponent<ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * ContextMenu Trigger Component
+ * ContextMenu Component
  *
- * Trigger element that opens context menu on right-click.
- */
-
-interface ContextMenuTriggerProps extends React$1.HTMLAttributes<HTMLElement> {
-    /**
-     * Render as child element (composition pattern)
-     */
-    asChild?: boolean;
-}
-/**
- * ContextMenu Trigger 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 ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & React$1.RefAttributes<HTMLElement>>;
+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?: "text" | "circle" | "inline" | "block" | "card" | null | undefined;
+    variant?: "card" | "text" | "circle" | "inline" | "block" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
     /**
@@ -2473,17 +2764,32 @@ interface DataListRootProps extends React$1.HTMLAttributes<HTMLDListElement> {
 declare const DataListRoot: React$1.ForwardRefExoticComponent<DataListRootProps & React$1.RefAttributes<HTMLDListElement>>;
 
 /**
- * DataList Item Component
+ * DataList Component Types
  *
- * Individual item in DataList (contains Label and Value).
+ * TypeScript interfaces and types for DataList component.
  */
 
-interface DataListItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+/**
+ * DataList Item component props
+ */
+interface DataListItemProps$1 extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Row padding
+     * 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?: "sm" | "md" | "lg";
+    padding?: ResponsiveSpacing;
+}
+
+/**
+ * DataList Item Component
+ *
+ * Individual item in DataList (contains Label and Value).
+ */
+
+interface DataListItemProps extends DataListItemProps$1 {
 }
 /**
  * DataList Item component
@@ -2932,74 +3238,62 @@ declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$
  */
 declare const TableSortIcon: React$1.ForwardRefExoticComponent<TableSortIconProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare const tabsListVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const tabsTriggerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    state?: "default" | "selected" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TabsRootProps extends React$1.HTMLAttributes<HTMLDivElement> {
+/**
+ * Tabs Component
+ *
+ * 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 TabsRootProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+}
+interface TabsListProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "size" | "variant"> {
     /**
-     * Controlled value for the active tab
+     * Size variant - token-based
      */
-    value?: string;
+    size?: ResponsiveTabsSize;
     /**
-     * Default value for uncontrolled usage
+     * Visual variant - token-based
      */
-    defaultValue?: string;
+    variant?: TabsVariantToken;
+}
+interface TabsTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "size" | "variant" | "tone"> {
     /**
-     * Callback when the active tab changes
+     * Size variant - token-based (inherited from context if not provided)
      */
-    onValueChange?: (value: string) => void;
+    size?: ResponsiveTabsSize;
     /**
-     * Orientation of the tabs
-     * @default "horizontal"
+     * Visual variant - token-based (inherited from context if not provided)
      */
-    orientation?: "horizontal" | "vertical";
-}
-interface TabsListProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "role">, VariantProps<typeof tabsListVariants> {
+    variant?: TabsVariantToken;
     /**
-     * Gap between tab items
+     * Tone - token-based (inherited from context if not provided)
      */
-    gap?: "xs" | "sm" | "md" | "lg";
-}
-interface TabsTriggerProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps<typeof tabsTriggerVariants> {
+    tone?: TabsToneToken;
     /**
-     * Value of this tab (must be unique)
+     * Leading icon - semantic prop
      */
-    value: string;
+    leadingIcon?: React$1.ReactNode;
     /**
-     * Whether this tab is disabled
+     * Trailing icon - semantic prop
      */
-    disabled?: boolean;
-}
-interface TabsContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    trailingIcon?: React$1.ReactNode;
     /**
-     * Value of the tab this content belongs to
+     * Icon - semantic prop (for backward compatibility, maps to leadingIcon)
      */
-    value: string;
+    icon?: React$1.ReactNode;
+}
+interface TabsContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, "size"> {
     /**
-     * Force mount the content (useful for SSR)
+     * Size variant - token-based (for padding)
      */
-    forceMount?: boolean;
+    size?: ResponsiveTabsSize;
 }
-/**
- * Tabs.List - Container for tab triggers
- */
-interface TabsListPropsInternal extends TabsListProps {
-    onSizeChange?: (size: "sm" | "md" | "lg") => void;
-}
-/**
- * Tabs.Trigger - Individual tab button
- */
-interface TabsTriggerPropsInternal extends TabsTriggerProps {
-}
-declare const Tabs: React$1.ForwardRefExoticComponent<TabsRootProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Root: React$1.ForwardRefExoticComponent<TabsRootProps & React$1.RefAttributes<HTMLDivElement>>;
-    List: React$1.ForwardRefExoticComponent<TabsListPropsInternal & React$1.RefAttributes<HTMLDivElement>>;
-    Trigger: React$1.ForwardRefExoticComponent<TabsTriggerPropsInternal & React$1.RefAttributes<HTMLButtonElement>>;
+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>>;
 };
 
@@ -3444,10 +3738,10 @@ interface AnimationProps {
  */
 interface ComponentAnimationConfig {
     /**
-     * Animation preset for initial mount/entrance
-     * Can be a preset name string or CSS class name
+     * Animation preset for initial mount/entrance - token-based
+     * Uses predefined animation preset tokens
      */
-    animation?: "fadeIn" | "fadeInUp" | "fadeInDown" | "fadeInLeft" | "fadeInRight" | "slideInUp" | "slideInDown" | "slideInLeft" | "slideInRight" | "scaleIn" | string;
+    animation?: ResponsiveAnimationPreset | string;
     /**
      * Animation preset for hover state
      * Can be a preset name string or CSS class name
@@ -3723,4 +4017,4 @@ interface TicketCardProps {
  */
 declare const TicketCard: React$1.ForwardRefExoticComponent<TicketCardProps & 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, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type StackProps as ColumnProps, Container, type ContainerProps, Surface as ContainerSurface, type SurfaceProps as ContainerSurfaceProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuSeparator, type ContextMenuSeparatorProps, 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 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, ModalBody, type ModalBodyProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, 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, Row, type RowProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlRootProps, Select, SelectListbox, type SelectListboxProps, SelectOption, type SelectOptionProps, SelectRoot, type SelectRootProps, type SelectSize, SelectTrigger, type SelectTriggerProps, type SelectVariant, 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, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, alertVariants, bodyVariants, borderRadius, buttonVariants, captionVariants, checkboxVariants, codeVariants, surfaceVariants as containerSurfaceVariants, displayVariants, headingVariants, iconVariants, inputVariants, labelVariants, leadVariants, modalVariants, popoverContentVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, selectListboxVariants, selectOptionVariants, selectTriggerVariants, semanticSpacing, skeletonVariants, spacing, surfaceVariants$1 as surfaceVariants, tabsListVariants, tabsTriggerVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { Alert, type AlertProps, ArtistCard, type ArtistCardProps, type ArtistCardSize, type ArtistCardVariant, Backdrop, type BackdropProps, Body, type BodyProps, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, Caption, type CaptionProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, 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 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 };