@tenerife.music/ui 1.1.0 → 1.2.0

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 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-.js';
-export { A as ALERT_TOKENS, k as AlertVariant, cB as AlignOffsetToken, bj as Animation, cC as AnimationPresetToken, cD as AspectRatioToken, B as BUTTON_TOKENS, bM as BorderRadius, 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, cE as ColorToken, bS as ColoredShadow, bN as ComponentRadius, c4 as ComponentSpacing, cF as ContainerMaxWidthToken, cG as ContainerPaddingToken, c5 as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, y as DataListLabelWidth, z as DataListRowPadding, cH as DelayToken, 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, cI as FlexBasisToken, bU as FocusRing, cm as FontFamily, cn as FontSize, co as FontWeight, bV as GlowEffect, c6 as GridSpacing, I as ICON_TOKENS, c as INPUT_TOKENS, W as IconColor, X as IconSize, Y as IconStroke, Z as InputFontSize, _ as InputHeight, $ as InputPaddingHorizontal, a0 as InputPaddingVertical, a1 as InputRadius, a2 as InputSize, bm as Keyframe, cJ as LayoutSpaceToken, 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, cK as ModalFooterAlignToken, cL as ModalHeightToken, cM as ModalSizeToken, cN as ModalWidthToken, af as MotionAnimation, ag as MotionDuration, cO as MotionDurationToken, ah as MotionEasing, cP as MotionEasingToken, cQ as MotionToken, ai as MotionTransition, aj as MotionTransitionPreset, cR as MotionTransitionToken, 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 NotificationVariant, 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, cS as RadiusToken, cT as ResponsiveAlignOffset, cU as ResponsiveAnimationPreset, cV as ResponsiveAspectRatio, cW as ResponsiveColor, cX as ResponsiveContainerMaxWidth, cY as ResponsiveContainerPadding, cZ as ResponsiveDelay, c_ as ResponsiveFlexBasis, c$ as ResponsiveModalHeight, d0 as ResponsiveModalSize, d1 as ResponsiveModalWidth, d2 as ResponsiveMotion, d3 as ResponsiveRadius, d4 as ResponsiveSelectSize, d5 as ResponsiveSelectWidth, d6 as ResponsiveShadow, d7 as ResponsiveSideOffset, d8 as ResponsiveSpace, d9 as ResponsiveSurface, da as ResponsiveTextLineHeight, db as ResponsiveTextSize, dc as ResponsiveTextWeight, S as SECTION_TOKENS, f as SELECT_TOKENS, g as SURFACE_TOKENS, h as SWITCH_TOKENS, aD as SectionGap, aE as SectionPadding, c7 as SectionSpacing, aF as SelectContentPadding, aG as SelectContentRadius, aH as SelectItemFontSize, aI as SelectItemPaddingHorizontal, aJ as SelectItemPaddingVertical, aK as SelectItemRadius, aL as SelectLabelFontSize, aM as SelectLabelPaddingHorizontal, aN as SelectLabelPaddingVertical, aO as SelectSeparatorMarginHorizontal, aP as SelectSeparatorMarginVertical, dd as SelectSizeToken, de as SelectStateToken, aQ as SelectTriggerFontSize, aR as SelectTriggerHeight, aS as SelectTriggerPaddingHorizontal, aT as SelectTriggerPaddingVertical, aU as SelectTriggerRadius, df as SelectVariantToken, dg as SelectWidthToken, c8 as SemanticSpacing, dh as ShadowToken, di as SideOffsetToken, aV as SkeletonAnimation, aW as SkeletonBackground, aX as SkeletonVariant, dj as SpaceToken, c9 as Spacing, dk as SpacingToken, bn as Spring, ca as StackSpacing, aY as SurfacePadding, aZ as SurfaceRadius, a_ as SurfaceShadow, dl as SurfaceToken, 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, dm as TextLetterSpacingToken, bb as TextLineHeight, dn as TextLineHeightToken, dp as TextSizeToken, cr as TextStyle, dq as TextWeightToken, 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.js';
+export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DXmHg8ji.js';
 
 /**
  * Artist Card Component Tokens
@@ -86,4 +86,488 @@ type ArtistCardImageSizing = typeof ARTIST_TOKENS.image.sizing;
 type ArtistCardImagePlaceholder = typeof ARTIST_TOKENS.image.placeholder;
 type ArtistCardFooterBorder = typeof ARTIST_TOKENS.footer.border;
 
-export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing };
+/**
+ * Domain Component Tokens
+ *
+ * Domain-specific design tokens for card components (EventCard, VenueCard, ArtistCard,
+ * TicketCard, PromoCard, CategoryCard). These tokens provide a consistent foundation
+ * for card surface styles, layout, images, metadata, badges, price/capacity displays,
+ * hover/motion states, and skeleton loading states.
+ *
+ * All values reference foundation tokens or other component tokens.
+ * Based on audit requirements from L3_CARD_AUDIT.md.
+ *
+ * Foundation tokens referenced:
+ * - SPACING_TOKENS: semanticSpacing (xs, sm, md, lg, xl, 2xl, 3xl) from src/tokens/spacing.ts
+ * - RADIUS_TOKENS: borderRadius (xs, sm, md, lg, xl, 2xl, full) from src/tokens/radius.ts
+ * - TEXT_TOKENS: fontSize, fontWeight from src/tokens/components/text.ts
+ * - ICON_TOKENS: sizes, colors from src/tokens/components/icon.ts
+ * - SHADOW_TOKENS: elevationShadows (xs, sm, md, lg, xl, 2xl) from src/tokens/shadows.ts
+ * - MOTION_TOKENS: transition, transitionPreset from src/tokens/components/motion.ts
+ * - DATA_TOKENS: skeleton patterns from src/tokens/components/data.ts
+ */
+/**
+ * Domain Card Component Tokens
+ *
+ * Defines all tokens for domain-specific card components.
+ * Values reference foundation tokens or other component tokens.
+ */
+declare const DOMAIN_TOKENS: {
+    /**
+     * Surface tokens for card containers
+     * Defines background, border, radius, and shadow for card surfaces
+     */
+    readonly surface: {
+        /**
+         * Background colors
+         * Maps to semantic color tokens
+         */
+        readonly bg: {
+            readonly default: "bg-card";
+            readonly hover: "hover:bg-card/95";
+        };
+        /**
+         * Border styles
+         * Maps to semantic border tokens
+         */
+        readonly border: {
+            readonly default: "border border-border";
+            readonly hover: "hover:border-primary/20";
+        };
+        /**
+         * Border radius
+         * References borderRadius.xl (0.75rem / 12px)
+         * Using Tailwind class "rounded-xl" which maps to borderRadius.xl
+         */
+        readonly radius: {
+            readonly default: "rounded-xl";
+        };
+        /**
+         * Shadow (elevation) tokens
+         * References elevationShadows.md
+         * Using Tailwind class "shadow-md" which maps to elevationShadows.md
+         */
+        readonly shadow: {
+            readonly default: "shadow-md";
+        };
+        /**
+         * Elevation change on hover
+         * References elevationShadows.xl
+         * Using Tailwind class "hover:shadow-xl" which maps to elevationShadows.xl
+         */
+        readonly elevation: {
+            readonly hover: "hover:shadow-xl";
+        };
+    };
+    /**
+     * Spacing tokens for card component spacing
+     * References semanticSpacing tokens
+     * Note: Tailwind classes are used for component className application
+     */
+    readonly spacing: {
+        /**
+         * Section spacing - vertical spacing between card sections
+         */
+        readonly section: {
+            readonly titleToSubtitle: "mb-xs";
+            readonly subtitleToMetadata: "mb-sm";
+        };
+        /**
+         * Badge spacing offsets
+         */
+        readonly badges: {
+            readonly offsetX: "1rem";
+            readonly offsetY: "1rem";
+        };
+        /**
+         * Image spacing
+         */
+        readonly image: {
+            readonly bottomMargin: "0";
+        };
+        /**
+         * Card vertical gap
+         */
+        readonly card: {
+            readonly verticalGap: "1rem";
+        };
+        /**
+         * Metadata item gap
+         */
+        readonly metadata: {
+            readonly itemGap: "0.25rem";
+        };
+        /**
+         * Footer spacing
+         */
+        readonly footer: {
+            readonly paddingTopDefault: "pt-sm";
+            readonly paddingTopCompact: "pt-xs";
+        };
+        /**
+         * Button spacing
+         */
+        readonly button: {
+            readonly paddingDefault: "px-md py-xs";
+            readonly paddingCompact: "px-sm py-xs";
+            readonly iconMarginLeft: "ml-xs";
+        };
+    };
+    /**
+     * Layout tokens for card spacing and gaps
+     * References semanticSpacing tokens
+     * Note: Tailwind utilities are used for component className application
+     */
+    readonly layout: {
+        /**
+         * Padding tokens
+         * References semanticSpacing (md = 16px, sm = 8px)
+         * Note: "p-md" and "p-sm" are Tailwind utilities that apply semanticSpacing values
+         */
+        readonly padding: {
+            readonly default: "p-md";
+            readonly compact: "p-sm";
+        };
+        /**
+         * Gap tokens for spacing between card elements
+         * References semanticSpacing (md = 16px, xs = 4px)
+         * Note: "gap-md" and "gap-xs" are Tailwind utilities that apply semanticSpacing values
+         */
+        readonly gap: {
+            readonly default: "gap-md";
+            readonly compact: "gap-xs";
+        };
+    };
+    /**
+     * Image tokens for card media
+     * Defines aspect ratio, radius, overlay styles, and placeholder gradients
+     */
+    readonly image: {
+        /**
+         * Aspect ratio for card images
+         * Standard 16:9 aspect ratio for card images
+         */
+        readonly aspectRatio: "aspect-video";
+        /**
+         * Border radius for images
+         * References borderRadius.xl (0.75rem / 12px) for top corners only
+         * Using Tailwind class "rounded-t-xl" which maps to borderRadius.xl
+         */
+        readonly radius: "rounded-t-xl";
+        /**
+         * Overlay gradient tokens for image overlays
+         * Used for hover states and text readability
+         */
+        readonly overlay: {
+            readonly gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent";
+        };
+        /**
+         * Placeholder gradient tokens for image placeholders
+         * Used when no image URL is provided
+         */
+        readonly placeholder: {
+            readonly gradient: "bg-gradient-to-br from-muted to-muted/50";
+        };
+    };
+    /**
+     * Text tokens for card text elements
+     * Defines hover states and line clamping for titles and descriptions
+     */
+    readonly text: {
+        /**
+         * Hover state tokens for text elements
+         * Used for interactive text elements like titles
+         */
+        readonly hover: {
+            readonly primary: "group-hover:text-primary";
+        };
+        /**
+         * Line clamp tokens for text truncation
+         * Used for limiting text to specific number of lines
+         */
+        readonly lineClamp: {
+            readonly one: "line-clamp-1";
+            readonly two: "line-clamp-2";
+            readonly three: "line-clamp-3";
+        };
+    };
+    /**
+     * Metadata tokens for card information displays
+     * Used for date/time, location, and other metadata patterns
+     * Maps to TEXT_TOKENS, ICON_TOKENS, and semanticSpacing
+     */
+    readonly metadata: {
+        /**
+         * Text color tokens
+         * Maps to semantic text color tokens
+         */
+        readonly text: {
+            readonly primary: "text-foreground";
+            readonly secondary: "text-muted-foreground";
+        };
+        /**
+         * Icon tokens
+         * Maps to ICON_TOKENS for sizes and colors
+         */
+        readonly icon: {
+            readonly default: "text-muted-foreground";
+            readonly sizeSm: "h-4 w-4";
+        };
+        /**
+         * Spacing tokens for metadata layouts
+         * References semanticSpacing (xs = 4px, sm = 8px)
+         * Using Tailwind classes which map to semanticSpacing values
+         */
+        readonly spacing: {
+            readonly vertical: "gap-xs";
+            readonly horizontal: "gap-sm";
+        };
+    };
+    /**
+     * Badge tokens for featured/popular badges
+     * References semanticSpacing, borderRadius, and elevationShadows
+     */
+    readonly badges: {
+        /**
+         * Badge size tokens (padding)
+         * References semanticSpacing for padding values
+         * Using Tailwind classes which map to semanticSpacing values
+         */
+        readonly size: {
+            readonly sm: "px-xs py-xs";
+            readonly md: "px-sm py-xs";
+        };
+        /**
+         * Badge positioning tokens
+         * References semanticSpacing for absolute positioning
+         * Using Tailwind classes which map to semanticSpacing values
+         */
+        readonly position: {
+            readonly default: "right-md top-md";
+            readonly compact: "right-sm top-sm";
+        };
+        /**
+         * Additional vertical positioning tokens for multi-badge scenarios
+         * References semanticSpacing for top positioning
+         * Using Tailwind classes which map to semanticSpacing values
+         */
+        readonly positionY: {
+            readonly xl: "top-xl";
+            readonly "2xl": "top-2xl";
+            readonly "3xl": "top-3xl";
+        };
+        /**
+         * Badge surface (background) tokens
+         * Maps to semantic color tokens
+         */
+        readonly surface: {
+            readonly default: "bg-primary";
+            readonly featured: "bg-gradient-to-r from-accent-500 to-primary-600";
+        };
+        /**
+         * Badge text color
+         * White for contrast on colored backgrounds
+         */
+        readonly text: {
+            readonly color: "text-white";
+        };
+        /**
+         * Badge border radius
+         * References borderRadius.full (pill shape)
+         * Using Tailwind class "rounded-full" which maps to borderRadius.full
+         */
+        readonly radius: "rounded-full";
+        /**
+         * Badge shadow
+         * References elevationShadows.lg
+         * Using Tailwind class "shadow-lg" which maps to elevationShadows.lg
+         */
+        readonly shadow: "shadow-lg";
+    };
+    /**
+     * Price/Capacity tokens for displaying price and capacity information
+     * Maps to semantic text color tokens and semanticSpacing
+     */
+    readonly priceCapacity: {
+        /**
+         * Text color tokens
+         * Maps to semantic text color tokens
+         */
+        readonly text: {
+            readonly primary: "text-foreground";
+            readonly secondary: "text-muted-foreground";
+        };
+        /**
+         * Spacing between price and capacity elements
+         * References semanticSpacing.sm (8px)
+         * Using Tailwind class "gap-sm" which maps to semanticSpacing.sm
+         */
+        readonly spacing: "gap-sm";
+    };
+    /**
+     * Motion tokens for hover and interaction states
+     * References MOTION_TOKENS for transitions and animations
+     */
+    readonly motion: {
+        /**
+         * Hover state tokens
+         * References MOTION_TOKENS and elevationShadows
+         */
+        readonly hover: {
+            readonly transition: "transition-all duration-normal ease-in-out";
+            readonly scale: "hover:scale-110";
+            readonly elevation: "hover:shadow-xl";
+        };
+    };
+    /**
+     * Skeleton tokens for loading states
+     * References DATA_TOKENS.skeleton for skeleton patterns and semanticSpacing for dimensions
+     */
+    readonly skeleton: {
+        /**
+         * Base skeleton wrapper tokens
+         * Default styling for skeleton wrapper components
+         */
+        readonly base: {
+            /**
+             * Default border radius for skeleton wrapper
+             * References DATA_TOKENS.skeleton.radius.text
+             */
+            readonly radius: "rounded-sm";
+            /**
+             * Default animation for skeleton wrapper
+             * References DATA_TOKENS.skeleton.animation.pulse
+             */
+            readonly animation: "animate-pulse";
+            /**
+             * Default background for skeleton wrapper
+             * References DATA_TOKENS.skeleton.background.default
+             */
+            readonly background: "bg-muted";
+        };
+        /**
+         * Image skeleton height
+         * Domain-specific: card images need 192px (spacing[48] = 12rem)
+         * Note: DATA_TOKENS.skeleton.height.card is 128px, but card images need 192px
+         * Using Tailwind class "h-48" which maps to spacing[48] (12rem / 192px)
+         */
+        readonly image: {
+            readonly height: "h-48";
+        };
+        /**
+         * Content gap for skeleton elements
+         * References semanticSpacing.md (16px)
+         * Using Tailwind class "gap-md" which maps to semanticSpacing.md
+         */
+        readonly content: {
+            readonly gap: "gap-md";
+            /**
+             * Content width tokens for skeleton elements
+             * References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
+             */
+            readonly width: {
+                readonly full: "w-full";
+                readonly threeQuarters: "w-3/4";
+                readonly half: "w-1/2";
+            };
+        };
+        /**
+         * Badge skeleton dimensions
+         * Domain-specific values for badge skeleton sizing
+         * References spacing values via Tailwind classes
+         */
+        readonly badge: {
+            readonly width: "w-20";
+            readonly height: "h-6";
+        };
+    };
+    /**
+     * CTA (Call-to-Action) button tokens for domain card components
+     * Provides PromoCard-specific CTA button styling tokens
+     * These tokens are semantically owned by domain card components, not by the Button component
+     * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+     */
+    readonly cta: {
+        /**
+         * CTA button styling tokens
+         * Used by PromoCard and other domain card components for CTA button elements
+         */
+        readonly button: {
+            /**
+             * Button heights by size
+             * Maps to Tailwind height utilities: h-8, h-9
+             */
+            readonly height: {
+                readonly sm: "h-8";
+                readonly md: "h-9";
+            };
+            /**
+             * Button padding by size
+             * Horizontal and vertical padding values
+             * References semanticSpacing tokens
+             */
+            readonly padding: {
+                readonly horizontal: {
+                    readonly sm: "px-sm";
+                    readonly md: "px-md";
+                };
+                readonly vertical: {
+                    readonly sm: "py-xs";
+                };
+            };
+            /**
+             * Border radius for CTA buttons
+             * References borderRadius.md (6px / 0.375rem)
+             * Using Tailwind class "rounded-md" which maps to borderRadius.md
+             */
+            readonly radius: "rounded-md";
+            /**
+             * Font sizes by button size
+             * Maps to foundation typography fontSize tokens
+             */
+            readonly fontSize: {
+                readonly sm: "text-xs";
+                readonly md: "text-sm";
+            };
+            /**
+             * Shadow tokens for CTA buttons
+             * Maps to foundation elevation shadow tokens
+             */
+            readonly shadow: {
+                readonly primary: "shadow";
+            };
+            /**
+             * Color tokens for CTA button variants
+             * Uses semantic color tokens that map to CSS variables
+             */
+            readonly variant: {
+                readonly primary: {
+                    readonly background: "bg-primary";
+                    readonly text: "text-primary-foreground";
+                    readonly hover: "hover:bg-primary/90";
+                };
+            };
+            /**
+             * Transition tokens for CTA buttons
+             * References MOTION_TOKENS for transitions
+             */
+            readonly transition: {
+                readonly colors: "transition-colors";
+            };
+        };
+    };
+};
+/**
+ * Type exports for Domain Card tokens
+ */
+type DomainCardSurface = typeof DOMAIN_TOKENS.surface;
+type DomainCardLayout = typeof DOMAIN_TOKENS.layout;
+type DomainCardImage = typeof DOMAIN_TOKENS.image;
+type DomainCardMetadata = typeof DOMAIN_TOKENS.metadata;
+type DomainCardBadge = typeof DOMAIN_TOKENS.badges;
+type DomainCardPriceCapacity = typeof DOMAIN_TOKENS.priceCapacity;
+type DomainCardMotion = typeof DOMAIN_TOKENS.motion;
+type DomainCardSkeleton = typeof DOMAIN_TOKENS.skeleton;
+type DomainCardSkeletonContentWidth = typeof DOMAIN_TOKENS.skeleton.content.width;
+
+export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing, DOMAIN_TOKENS, type DomainCardBadge, type DomainCardImage, type DomainCardLayout, type DomainCardMetadata, type DomainCardMotion, type DomainCardPriceCapacity, type DomainCardSkeleton, type DomainCardSkeletonContentWidth, type DomainCardSurface };

package/dist/tokens/index.mjs

@@ -658,15 +658,16 @@ var BUTTON_TOKENS = {
   /**
    * Icon size within buttons by button size
    * Scales proportionally with button size for visual balance
+   * Contains full SVG selector classes for direct use in CVA
    */
   iconSize: {
-    sm: "size-3.5",
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
     // 14px (0.875rem) - smaller icon for small buttons
-    md: "size-4",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "size-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "size-4"
+    icon: "[&_svg]:w-4 [&_svg]:h-4"
     // 16px (1rem) - medium icon for icon-only buttons
   },
   /**