@tenerife.music/ui 1.0.8 → 1.0.13

package/dist/tokens/components/domain.d.ts

@@ -1,379 +0,0 @@
-/**
- * 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.
- */
-export 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, and overlay styles
-     */
-    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";
-        };
-    };
-    /**
-     * 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";
-        };
-    };
-};
-/**
- * Type exports for Domain Card tokens
- */
-export type DomainCardSurface = typeof DOMAIN_TOKENS.surface;
-export type DomainCardLayout = typeof DOMAIN_TOKENS.layout;
-export type DomainCardImage = typeof DOMAIN_TOKENS.image;
-export type DomainCardMetadata = typeof DOMAIN_TOKENS.metadata;
-export type DomainCardBadge = typeof DOMAIN_TOKENS.badges;
-export type DomainCardPriceCapacity = typeof DOMAIN_TOKENS.priceCapacity;
-export type DomainCardMotion = typeof DOMAIN_TOKENS.motion;
-export type DomainCardSkeleton = typeof DOMAIN_TOKENS.skeleton;
-export type DomainCardSkeletonContentWidth = typeof DOMAIN_TOKENS.skeleton.content.width;

package/dist/tokens/components/dropdown.d.ts

@@ -1,146 +0,0 @@
-/**
- * Dropdown Component Tokens
- *
- * Component-level design tokens for Dropdown component.
- * Maps foundation tokens (spacing, radius, shadows, typography) to dropdown-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Dropdown Component Tokens
- *
- * Defines tokens for trigger, menu, and item variants.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const DROPDOWN_TOKENS: {
-    /**
-     * Trigger tokens by size
-     * Button element that opens/closes the dropdown
-     */
-    readonly trigger: {
-        readonly height: {
-            readonly sm: "h-8";
-            readonly md: "h-9";
-            readonly lg: "h-10";
-        };
-        readonly padding: {
-            readonly horizontal: {
-                readonly sm: "px-sm";
-                readonly md: "px-md";
-                readonly lg: "px-lg";
-            };
-            readonly vertical: {
-                readonly sm: "py-xs";
-                readonly md: "py-xs";
-                readonly lg: "py-sm";
-            };
-        };
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-md";
-            readonly lg: "rounded-md";
-        };
-        readonly fontSize: {
-            readonly sm: "text-sm";
-            readonly md: "text-base";
-            readonly lg: "text-base";
-        };
-        readonly shadow: "shadow-sm";
-        /**
-         * Icon spacing for trigger
-         */
-        readonly icon: {
-            readonly spacing: "ml-sm";
-        };
-    };
-    /**
-     * Variant-based tokens
-     * Border, background, text, and focus colors for different variants
-     */
-    readonly variant: {
-        readonly neutral: {
-            readonly border: "border border-[hsl(var(--border))]";
-            readonly background: "bg-[hsl(var(--popover))]";
-            readonly text: "text-[hsl(var(--popover-foreground))]";
-            readonly focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2";
-        };
-        readonly tinted: {
-            readonly border: "border border-[hsl(var(--border))]";
-            readonly background: "bg-[hsl(var(--muted))]";
-            readonly text: "text-[hsl(var(--popover-foreground))]";
-            readonly focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2";
-        };
-    };
-    /**
-     * Menu tokens by size
-     * Container for the dropdown items
-     */
-    readonly menu: {
-        readonly border: {
-            readonly default: "border border-[hsl(var(--border))]";
-        };
-        readonly background: {
-            readonly neutral: "bg-[hsl(var(--popover))]";
-            readonly tinted: "bg-[hsl(var(--muted))]";
-        };
-        readonly text: {
-            readonly default: "text-[hsl(var(--popover-foreground))]";
-        };
-        readonly padding: {
-            readonly sm: "p-sm";
-            readonly md: "p-md";
-            readonly lg: "p-lg";
-        };
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-            readonly lg: "rounded-lg";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-            readonly lg: "shadow-xl";
-        };
-        readonly minWidth: {
-            readonly sm: "min-w-32";
-            readonly md: "min-w-48";
-            readonly lg: "min-w-64";
-        };
-    };
-    /**
-     * Item tokens by size
-     * Individual menu item
-     */
-    readonly item: {
-        readonly background: {
-            readonly focus: "focus:bg-[hsl(var(--accent))]";
-            readonly selected: "bg-[hsl(var(--accent))]";
-        };
-        readonly text: {
-            readonly focus: "focus:text-[hsl(var(--accent-foreground))]";
-            readonly selected: "text-[hsl(var(--accent-foreground))]";
-        };
-        readonly padding: {
-            readonly sm: "px-sm py-xs";
-            readonly md: "px-md py-xs";
-            readonly lg: "px-lg py-sm";
-        };
-        readonly radius: {
-            readonly sm: "rounded-sm";
-            readonly md: "rounded-md";
-            readonly lg: "rounded-md";
-        };
-        readonly fontSize: {
-            readonly sm: "text-sm";
-            readonly md: "text-sm";
-            readonly lg: "text-base";
-        };
-    };
-};
-/**
- * Type exports for Dropdown tokens
- */
-export type DropdownTriggerSize = keyof typeof DROPDOWN_TOKENS.trigger.height;
-export type DropdownVariant = keyof typeof DROPDOWN_TOKENS.variant;
-export type DropdownMenuSize = keyof typeof DROPDOWN_TOKENS.menu.padding;
-export type DropdownItemSize = keyof typeof DROPDOWN_TOKENS.item.padding;

package/dist/tokens/components/icon.d.ts

@@ -1,57 +0,0 @@
-/**
- * Icon Component Tokens
- *
- * Component-level design tokens for Icon component.
- * Maps foundation tokens (spacing, colors) to icon-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Icon Component Tokens
- *
- * Defines all sizing, stroke, and color tokens for Icon component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-export declare const ICON_TOKENS: {
-    /**
-     * Icon sizes
-     * Maps to Tailwind size utilities for consistent icon sizing
-     */
-    readonly sizes: {
-        readonly xs: "h-2.5 w-2.5";
-        readonly sm: "h-3 w-3";
-        readonly md: "h-4 w-4";
-        readonly lg: "h-5 w-5";
-        readonly xl: "h-6 w-6";
-        readonly "2xl": "h-8 w-8";
-        readonly "3xl": "h-10 w-10";
-        readonly "4xl": "h-12 w-12";
-    };
-    /**
-     * Stroke width variants
-     * Maps to Tailwind stroke-width utilities
-     */
-    readonly stroke: {
-        readonly thin: "stroke-[1px]";
-        readonly normal: "stroke-[1.5px]";
-        readonly bold: "stroke-2";
-    };
-    /**
-     * Color variants
-     * Maps to semantic text color tokens
-     */
-    readonly colors: {
-        readonly default: "text-foreground";
-        readonly muted: "text-muted-foreground";
-        readonly success: "text-success";
-        readonly warning: "text-warning";
-        readonly danger: "text-destructive";
-        readonly info: "text-info";
-    };
-};
-/**
- * Type exports for Icon tokens
- */
-export type IconSize = keyof typeof ICON_TOKENS.sizes;
-export type IconStroke = keyof typeof ICON_TOKENS.stroke;
-export type IconColor = keyof typeof ICON_TOKENS.colors;

package/dist/tokens/components/index.d.ts

@@ -1,31 +0,0 @@
-/**
- * Component Tokens
- *
- * Component-level design tokens that map foundation tokens (spacing, typography, radius, shadows)
- * to component-specific usage patterns.
- *
- * These tokens centralize component metrics (heights, padding, icon sizes, border radius)
- * and ensure consistency across the design system.
- */
-export { ALERT_TOKENS, type AlertVariant } from './alert';
-export { BUTTON_TOKENS, type ButtonFontSize, type ButtonHeight, type ButtonPaddingHorizontal, type ButtonPaddingVertical, type ButtonShadow, } from './button';
-export { CARD_TOKENS, type CardPadding, type CardRadius, type CardShadow, type CardSize, type CardSpacingVertical, } from './card';
-export { DOMAIN_TOKENS, type DomainCardBadge, type DomainCardImage, type DomainCardLayout, type DomainCardMetadata, type DomainCardMotion, type DomainCardPriceCapacity, type DomainCardSkeleton, type DomainCardSkeletonContentWidth, type DomainCardSurface, } from './domain';
-export { INPUT_TOKENS, type InputFontSize, type InputHeight, type InputPaddingHorizontal, type InputPaddingVertical, type InputRadius, type InputSize, } from './input';
-export { CHECKBOX_TOKENS, type CheckboxSize, type CheckboxState, type CheckboxVariant, } from './checkbox';
-export { SWITCH_TOKENS, type SwitchSize, type SwitchState, type SwitchVariant } from './switch';
-export { RADIO_TOKENS, type RadioSize, type RadioState, type RadioVariant } from './radio';
-export { SURFACE_TOKENS, type SurfacePadding, type SurfaceRadius, type SurfaceShadow, type SurfaceVariant, } from './surface';
-export { TEXT_TOKENS, type TextFontSize, type TextFontWeight, type TextLetterSpacing, type TextLineHeight, } from './text';
-export { SECTION_TOKENS, type SectionGap, type SectionPadding } from './section';
-export { OVERLAY_TOKENS, type OverlayBackdropVariant, type OverlayModalSize } from './overlay';
-export { TOAST_TOKENS, type ToastVariant } from './toast';
-export { NOTIFICATION_TOKENS, type NotificationPanelWidth, type NotificationVariant, } from './notifications';
-export { NAVIGATION_TOKENS, type NavigationItemPadding, type NavigationListGap, type NavigationRadius, type NavigationShadow, type NavigationSize, type NavigationState, } from './navigation';
-export { MENU_TOKENS, type MenuContentMinWidth, type MenuContentPadding, type MenuContentRadius, type MenuContentShadow, type MenuIndicatorOffset, type MenuIndicatorSize, type MenuItemGap, type MenuItemHeight, type MenuItemPadding, type MenuItemRadius, type MenuLabelPadding, type MenuSeparatorMargin, } from './menu';
-export { POPOVER_TOKENS, type PopoverArrowOffset, type PopoverArrowSize, type PopoverContentPadding, type PopoverContentRadius, type PopoverContentShadow, type PopoverContentWidth, } from './popover';
-export { DROPDOWN_TOKENS, type DropdownItemSize, type DropdownMenuSize, type DropdownTriggerSize, type DropdownVariant, } from './dropdown';
-export { TOOLTIP_TOKENS, type TooltipContentRadius, type TooltipContentShadow } from './tooltip';
-export { DATA_TOKENS, type DataListLabelWidth, type DataListRowPadding, type EmptyStateIconSize, type SkeletonAnimation, type SkeletonBackground, type SkeletonVariant, type TableCellPadding, type TableGap, type TableHeaderPadding, type TableRowHeight, type TableShadow, } from './data';
-export { ICON_TOKENS, type IconColor, type IconSize, type IconStroke } from './icon';
-export { MOTION_TOKENS, type MotionAnimation, type MotionDuration, type MotionEasing, type MotionTransition, type MotionTransitionPreset, } from './motion';