@tenerife.music/ui 1.0.8 → 1.0.12

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

@@ -1,284 +0,0 @@
-/**
- * Input Component Tokens
- *
- * Component-level design tokens for Input component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to input-specific usage.
- * All color values use CSS variables for theme-aware styling.
- */
-/**
- * Input Component Tokens
- *
- * Defines spacing, sizing, typography, and visual tokens for Input component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- */
-export declare const INPUT_TOKENS: {
-    /**
-     * Input heights by size
-     * Supports xs, sm, md, lg, xl sizes
-     */
-    readonly height: {
-        readonly xs: "h-7";
-        readonly sm: "h-8";
-        readonly md: "h-9";
-        readonly lg: "h-10";
-        readonly xl: "h-11";
-    };
-    /**
-     * Input padding by size
-     * Horizontal and vertical padding values
-     */
-    readonly padding: {
-        readonly horizontal: {
-            readonly xs: "px-xs";
-            readonly sm: "px-sm";
-            readonly md: "px-sm";
-            readonly lg: "px-md";
-            readonly xl: "px-lg";
-        };
-        readonly vertical: {
-            readonly xs: "py-xs";
-            readonly sm: "py-xs";
-            readonly md: "py-xs";
-            readonly lg: "py-sm";
-            readonly xl: "py-md";
-        };
-    };
-    /**
-     * Border radius by size
-     */
-    readonly radius: {
-        readonly xs: "rounded-sm";
-        readonly sm: "rounded-md";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-md";
-        readonly xl: "rounded-lg";
-    };
-    /**
-     * Font sizes by size variant
-     * Maps to foundation typography fontSize tokens
-     */
-    readonly fontSize: {
-        readonly xs: "text-xs";
-        readonly sm: "text-sm";
-        readonly md: "text-base";
-        readonly lg: "text-base";
-        readonly xl: "text-lg";
-    };
-    /**
-     * Responsive font size (md breakpoint)
-     */
-    readonly fontSizeResponsive: {
-        readonly md: "md:text-sm";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * File input tokens
-     * Styling for file input elements
-     */
-    readonly file: {
-        readonly text: "text-[hsl(var(--foreground))]";
-    };
-    /**
-     * Select listbox tokens
-     * Styling for select dropdown container
-     */
-    readonly selectListbox: {
-        readonly border: "border border-[hsl(var(--border))]";
-        readonly background: "bg-[hsl(var(--popover))]";
-        readonly text: "text-[hsl(var(--popover-foreground))]";
-        readonly radius: "rounded-md";
-        readonly shadow: "shadow-md";
-    };
-    /**
-     * Select option tokens
-     * Styling for select option items
-     */
-    readonly selectOption: {
-        readonly focus: {
-            readonly background: "focus:bg-[hsl(var(--accent))]";
-            readonly text: "focus:text-[hsl(var(--accent-foreground))]";
-        };
-        readonly selected: {
-            readonly background: "bg-[hsl(var(--accent))]";
-            readonly text: "text-[hsl(var(--accent-foreground))]";
-        };
-    };
-    /**
-     * Variant-based tokens
-     * Border, background, and text colors for different variants
-     * All use CSS variable references for theme support
-     */
-    readonly variant: {
-        readonly primary: {
-            readonly border: "border-[hsl(var(--tm-primary))]";
-            readonly background: "bg-[hsl(var(--tm-primary))]";
-            readonly text: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
-        };
-        readonly secondary: {
-            readonly border: "border-[hsl(var(--tm-secondary))]";
-            readonly background: "bg-[hsl(var(--tm-secondary))]";
-            readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly outline: {
-            readonly border: "border-[hsl(var(--input))]";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly ghost: {
-            readonly border: "border-transparent";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly destructive: {
-            readonly border: "border-[hsl(var(--destructive))]";
-            readonly background: "bg-[hsl(var(--destructive))]";
-            readonly text: "text-[hsl(var(--destructive-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-    };
-    /**
-     * State-based tokens
-     * Border, background, and text colors for different states
-     * All use CSS variable references for theme support
-     */
-    readonly state: {
-        readonly border: {
-            readonly default: "border-[hsl(var(--input))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-            readonly error: "border-[hsl(var(--destructive))]";
-            readonly success: "border-[hsl(var(--semantic-success))]";
-            readonly disabled: "border-[hsl(var(--input))]";
-        };
-        readonly background: {
-            readonly default: "bg-transparent";
-            readonly disabled: "bg-transparent";
-        };
-        readonly text: {
-            readonly default: "text-[hsl(var(--foreground))]";
-            readonly placeholder: "placeholder:text-[hsl(var(--muted-foreground))]";
-            readonly disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Icon tokens
-     * Size, spacing, and color for icons within inputs
-     */
-    readonly icon: {
-        readonly size: "size-4";
-        readonly gap: "gap-sm";
-        readonly paddingLeft: "pl-lg";
-        readonly paddingRight: "pr-lg";
-        readonly color: "text-[hsl(var(--muted-foreground))]";
-        readonly position: {
-            readonly left: "left-0";
-            readonly right: "right-0";
-            readonly top: "top-0";
-        };
-    };
-    /**
-     * Label tokens
-     * Spacing and styling for labels
-     */
-    readonly label: {
-        readonly spacing: "space-y-sm";
-        readonly requiredMark: "text-destructive";
-    };
-    /**
-     * Width tokens
-     * Common width utilities
-     */
-    readonly width: {
-        readonly full: "w-full";
-    };
-    /**
-     * Message tokens
-     * Spacing, positioning, and styling for helper text and error messages
-     */
-    readonly message: {
-        readonly spacing: "space-y-sm";
-        readonly position: {
-            readonly bottom: "bottom-sm";
-            readonly right: "right-sm";
-        };
-        readonly color: {
-            readonly default: "text-[hsl(var(--muted-foreground))]";
-            readonly error: "text-[hsl(var(--destructive))]";
-            readonly success: "text-[hsl(var(--semantic-success))]";
-        };
-    };
-    /**
-     * Size-based token structure
-     * Organized by size for easy access
-     */
-    readonly size: {
-        readonly xs: {
-            readonly height: "h-7";
-            readonly padding: {
-                readonly horizontal: "px-xs";
-                readonly vertical: "py-xs";
-            };
-            readonly radius: "rounded-sm";
-            readonly fontSize: "text-xs";
-            readonly shadow: "shadow-sm";
-        };
-        readonly sm: {
-            readonly height: "h-8";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-sm";
-            readonly shadow: "shadow-sm";
-        };
-        readonly md: {
-            readonly height: "h-9";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-base";
-            readonly fontSizeResponsive: "md:text-sm";
-            readonly shadow: "shadow-sm";
-        };
-        readonly lg: {
-            readonly height: "h-10";
-            readonly padding: {
-                readonly horizontal: "px-md";
-                readonly vertical: "py-sm";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-base";
-            readonly shadow: "shadow-sm";
-        };
-        readonly xl: {
-            readonly height: "h-11";
-            readonly padding: {
-                readonly horizontal: "px-lg";
-                readonly vertical: "py-md";
-            };
-            readonly radius: "rounded-lg";
-            readonly fontSize: "text-lg";
-            readonly shadow: "shadow-sm";
-        };
-    };
-};
-/**
- * Type exports for Input tokens
- */
-export type InputHeight = keyof typeof INPUT_TOKENS.height;
-export type InputPaddingHorizontal = keyof typeof INPUT_TOKENS.padding.horizontal;
-export type InputPaddingVertical = keyof typeof INPUT_TOKENS.padding.vertical;
-export type InputRadius = keyof typeof INPUT_TOKENS.radius;
-export type InputFontSize = keyof typeof INPUT_TOKENS.fontSize;
-export type InputSize = keyof typeof INPUT_TOKENS.size;
-export type InputState = keyof typeof INPUT_TOKENS.state.border;

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

@@ -1,114 +0,0 @@
-/**
- * Menu Component Tokens
- *
- * Component-level design tokens for Menu components (DropdownMenu, ContextMenu).
- * Maps foundation tokens (spacing, radius, shadows, typography, motion) to menu-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Menu Component Tokens
- *
- * Defines tokens for menu items, content, separators, labels, and indicators.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const MENU_TOKENS: {
-    /**
-     * Menu item tokens by size
-     * Maps to foundation spacing and radius tokens
-     */
-    readonly item: {
-        readonly padding: {
-            readonly xs: "px-xs py-xs";
-            readonly sm: "px-sm py-sm";
-            readonly md: "px-md py-sm";
-        };
-        readonly radius: {
-            readonly sm: "rounded-sm";
-            readonly md: "rounded-md";
-        };
-        readonly gap: {
-            readonly xs: "gap-xs";
-            readonly sm: "gap-sm";
-        };
-        readonly height: {
-            readonly sm: "h-8";
-            readonly md: "h-10";
-            readonly lg: "h-12";
-        };
-    };
-    /**
-     * Menu content tokens by size
-     * Maps to foundation spacing, radius, and shadow tokens
-     */
-    readonly content: {
-        readonly padding: {
-            readonly sm: "p-sm";
-            readonly md: "p-md";
-        };
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-        };
-        readonly minWidth: {
-            readonly sm: "min-w-32";
-            readonly md: "min-w-48";
-        };
-    };
-    /**
-     * Menu separator tokens
-     * Maps to foundation spacing and color tokens
-     */
-    readonly separator: {
-        readonly margin: {
-            readonly sm: "my-xs";
-            readonly md: "my-sm";
-        };
-        readonly height: "h-px";
-        readonly color: "bg-border";
-    };
-    /**
-     * Menu label tokens
-     * Maps to foundation spacing and typography tokens
-     */
-    readonly label: {
-        readonly padding: {
-            readonly sm: "px-sm py-xs";
-            readonly md: "px-md py-sm";
-        };
-        readonly textStyle: "text-sm font-semibold";
-    };
-    /**
-     * Menu indicator tokens (for checkboxes, radio buttons)
-     * Maps to foundation spacing tokens
-     */
-    readonly indicator: {
-        readonly size: {
-            readonly sm: "w-4 h-4";
-            readonly md: "w-5 h-5";
-        };
-        readonly offset: {
-            readonly sm: "left-xs";
-            readonly md: "left-sm";
-        };
-    };
-};
-/**
- * Type exports for Menu tokens
- */
-export type MenuItemPadding = keyof typeof MENU_TOKENS.item.padding;
-export type MenuItemRadius = keyof typeof MENU_TOKENS.item.radius;
-export type MenuItemGap = keyof typeof MENU_TOKENS.item.gap;
-export type MenuItemHeight = keyof typeof MENU_TOKENS.item.height;
-export type MenuContentPadding = keyof typeof MENU_TOKENS.content.padding;
-export type MenuContentRadius = keyof typeof MENU_TOKENS.content.radius;
-export type MenuContentShadow = keyof typeof MENU_TOKENS.content.shadow;
-export type MenuContentMinWidth = keyof typeof MENU_TOKENS.content.minWidth;
-export type MenuSeparatorMargin = keyof typeof MENU_TOKENS.separator.margin;
-export type MenuLabelPadding = keyof typeof MENU_TOKENS.label.padding;
-export type MenuIndicatorSize = keyof typeof MENU_TOKENS.indicator.size;
-export type MenuIndicatorOffset = keyof typeof MENU_TOKENS.indicator.offset;

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

@@ -1,103 +0,0 @@
-/**
- * Motion Component Tokens
- *
- * Component-level design tokens for Motion/Animation utilities.
- * Maps foundation motion tokens (durations, easings, transitions) to Tailwind utility classes.
- *
- * All values use Tailwind utility classes that map to foundation motion tokens.
- */
-/**
- * Motion Component Tokens
- *
- * Defines transition, duration, and easing tokens for component usage.
- * Values are mapped to Tailwind utility classes for direct use in components.
- */
-export declare const MOTION_TOKENS: {
-    /**
-     * Transition property tokens
-     * Maps to Tailwind transition utilities
-     */
-    readonly transition: {
-        readonly all: "transition-all";
-        readonly colors: "transition-colors";
-        readonly opacity: "transition-opacity";
-        readonly transform: "transition-transform";
-        readonly shadow: "transition-shadow";
-        readonly none: "transition-none";
-    };
-    /**
-     * Duration tokens
-     * Maps to foundation motion duration tokens via Tailwind
-     */
-    readonly duration: {
-        readonly instant: "duration-0";
-        readonly fast: "duration-fast";
-        readonly normal: "duration-normal";
-        readonly slow: "duration-slow";
-        readonly slower: "duration-slower";
-        readonly slowest: "duration-slowest";
-        readonly "75": "duration-75";
-        readonly "100": "duration-100";
-        readonly "200": "duration-200";
-        readonly "250": "duration-250";
-        readonly "300": "duration-300";
-        readonly "400": "duration-400";
-        readonly "500": "duration-500";
-        readonly "600": "duration-600";
-        readonly "700": "duration-700";
-        readonly "800": "duration-800";
-        readonly "1000": "duration-1000";
-    };
-    /**
-     * Easing tokens
-     * Maps to foundation motion easing tokens via Tailwind
-     */
-    readonly easing: {
-        readonly linear: "ease-linear";
-        readonly in: "ease-in";
-        readonly out: "ease-out";
-        readonly "in-out": "ease-in-out";
-        readonly bounce: "ease-bounce";
-        readonly elastic: "ease-elastic";
-    };
-    /**
-     * Pre-configured transition tokens
-     * Combines duration and easing for common use cases
-     */
-    readonly transitionPreset: {
-        readonly fast: "transition-all duration-fast ease-out";
-        readonly normal: "transition-all duration-normal ease-in-out";
-        readonly slow: "transition-all duration-slow ease-in-out";
-        readonly colors: "transition-colors duration-normal ease-out";
-        readonly transform: "transition-transform duration-normal ease-out";
-        readonly opacity: "transition-opacity duration-fast ease-out";
-    };
-    /**
-     * Animation tokens
-     * Maps to foundation motion animation tokens via Tailwind
-     */
-    readonly animation: {
-        readonly none: "animate-none";
-        readonly spin: "animate-spin";
-        readonly pulse: "animate-pulse";
-        readonly bounce: "animate-bounce";
-        readonly ping: "animate-ping";
-        readonly shake: "animate-shake";
-        readonly fadeIn: "animate-fadeIn";
-        readonly fadeOut: "animate-fadeOut";
-        readonly slideInUp: "animate-slideInUp";
-        readonly slideInDown: "animate-slideInDown";
-        readonly slideInLeft: "animate-slideInLeft";
-        readonly slideInRight: "animate-slideInRight";
-        readonly scaleIn: "animate-scaleIn";
-        readonly scaleOut: "animate-scaleOut";
-    };
-};
-/**
- * Type exports for Motion tokens
- */
-export type MotionTransition = keyof typeof MOTION_TOKENS.transition;
-export type MotionDuration = keyof typeof MOTION_TOKENS.duration;
-export type MotionEasing = keyof typeof MOTION_TOKENS.easing;
-export type MotionTransitionPreset = keyof typeof MOTION_TOKENS.transitionPreset;
-export type MotionAnimation = keyof typeof MOTION_TOKENS.animation;

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

@@ -1,181 +0,0 @@
-/**
- * Navigation Component Tokens
- *
- * Component-level design tokens for Navigation components (Tabs, SegmentedControl, Breadcrumbs, Pagination, Stepper).
- * Maps foundation tokens (spacing, typography, radius, shadows) to navigation-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Navigation Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for Navigation components.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-export declare const NAVIGATION_TOKENS: {
-    /**
-     * Navigation item heights by size
-     * Maps to Tailwind height utilities: h-8, h-9, h-10
-     */
-    readonly sizes: {
-        readonly sm: {
-            readonly height: "h-8";
-            readonly width: "w-8";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly fontSize: "text-xs";
-            readonly gap: "gap-xs";
-        };
-        readonly md: {
-            readonly height: "h-9";
-            readonly padding: {
-                readonly horizontal: "px-md";
-                readonly vertical: "py-sm";
-            };
-            readonly fontSize: "text-sm";
-            readonly gap: "gap-sm";
-        };
-        readonly lg: {
-            readonly height: "h-10";
-            readonly padding: {
-                readonly horizontal: "px-lg";
-                readonly vertical: "py-sm";
-            };
-            readonly fontSize: "text-base";
-            readonly gap: "gap-sm";
-        };
-    };
-    /**
-     * Border radius for navigation items
-     */
-    readonly radius: {
-        readonly default: "rounded-md";
-        readonly sm: "rounded-sm";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-lg";
-        readonly full: "rounded-full";
-    };
-    /**
-     * Spacing tokens for navigation components
-     */
-    readonly spacing: {
-        readonly itemPadding: {
-            readonly sm: "px-sm py-xs";
-            readonly md: "px-md py-sm";
-            readonly lg: "px-lg py-sm";
-        };
-        readonly listGap: {
-            readonly xs: "gap-xs";
-            readonly sm: "gap-sm";
-            readonly md: "gap-md";
-            readonly lg: "gap-lg";
-        };
-        readonly content: {
-            readonly marginTop: "mt-md";
-        };
-    };
-    /**
-     * Typography tokens for navigation components
-     */
-    readonly typography: {
-        readonly default: "text-sm";
-        readonly sm: "text-xs";
-        readonly md: "text-sm";
-        readonly lg: "text-base";
-        readonly fontWeight: {
-            readonly default: "font-medium";
-            readonly normal: "font-normal";
-            readonly medium: "font-medium";
-            readonly semibold: "font-semibold";
-        };
-    };
-    /**
-     * State-based tokens for navigation items
-     * Colors, backgrounds, and borders for different states
-     */
-    readonly states: {
-        readonly default: {
-            readonly background: "bg-transparent";
-            readonly text: "text-foreground";
-            readonly border: "border-transparent";
-        };
-        readonly hover: {
-            readonly background: "hover:bg-accent";
-            readonly text: "hover:text-accent-foreground";
-            readonly border: "hover:border-accent";
-        };
-        readonly active: {
-            readonly background: "bg-accent";
-            readonly text: "text-accent-foreground";
-            readonly border: "border-accent";
-        };
-        readonly selected: {
-            readonly background: "bg-primary";
-            readonly text: "text-primary-foreground";
-            readonly border: "border-primary";
-        };
-        readonly disabled: {
-            readonly background: "bg-transparent";
-            readonly text: "text-muted-foreground disabled:opacity-50";
-            readonly border: "border-transparent";
-            readonly cursor: "disabled:cursor-not-allowed";
-        };
-    };
-    /**
-     * Indicator tokens for Tabs component
-     * Used for underline/indicator animation
-     */
-    readonly indicator: {
-        readonly height: "h-0.5";
-        readonly radius: "rounded-full";
-        readonly transition: "transition-all duration-normal ease-out";
-        readonly background: "bg-primary";
-        readonly position: "absolute bottom-0 left-0 right-0";
-    };
-    /**
-     * Shadow tokens for navigation components
-     */
-    readonly shadow: {
-        readonly none: "shadow-none";
-        readonly sm: "shadow-sm";
-        readonly default: "shadow-sm";
-        readonly md: "shadow";
-    };
-    /**
-     * Focus ring tokens for accessibility
-     */
-    readonly focus: {
-        readonly ring: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2";
-        readonly ringOffset: "focus-visible:ring-offset-2";
-    };
-    /**
-     * Container background tokens
-     * For segmented control and tab container backgrounds
-     */
-    readonly container: {
-        readonly background: {
-            readonly muted: "bg-muted";
-        };
-        readonly padding: {
-            readonly xs: "p-xs";
-            readonly sm: "p-sm";
-        };
-    };
-    /**
-     * Border color tokens
-     */
-    readonly border: {
-        readonly muted: "border-muted-foreground";
-    };
-};
-/**
- * Type exports for Navigation tokens
- */
-export type NavigationSize = keyof typeof NAVIGATION_TOKENS.sizes;
-export type NavigationRadius = keyof typeof NAVIGATION_TOKENS.radius;
-export type NavigationState = keyof typeof NAVIGATION_TOKENS.states;
-export type NavigationShadow = keyof typeof NAVIGATION_TOKENS.shadow;
-export type NavigationListGap = keyof typeof NAVIGATION_TOKENS.spacing.listGap;
-export type NavigationItemPadding = keyof typeof NAVIGATION_TOKENS.spacing.itemPadding;