@tenerife.music/ui 1.0.8 → 1.0.12

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

@@ -1,91 +0,0 @@
-/**
- * Card Component Tokens
- *
- * Component-level design tokens for Card component.
- * Maps foundation tokens (spacing, radius, shadows) to card-specific usage.
- *
- * Prepared for future size variants (sm, md, lg).
- */
-/**
- * Card Component Tokens
- *
- * Defines spacing, radius, and shadow tokens for Card component.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const CARD_TOKENS: {
-    /**
-     * Padding for card sections (CardHeader, CardContent, CardFooter)
-     */
-    readonly padding: {
-        readonly sm: "p-sm";
-        readonly md: "p-lg";
-        readonly lg: "p-xl";
-    };
-    /**
-     * Border radius for cards
-     */
-    readonly radius: {
-        readonly sm: "rounded-md";
-        readonly md: "rounded-xl";
-        readonly lg: "rounded-2xl";
-    };
-    /**
-     * Vertical spacing within card sections
-     * Used for CardHeader spacing
-     */
-    readonly spacing: {
-        readonly vertical: {
-            readonly xs: "space-y-xs";
-            readonly sm: "space-y-sm";
-            readonly md: "space-y-md";
-        };
-    };
-    /**
-     * Shadow (elevation) for cards
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: {
-        readonly default: "shadow";
-        readonly sm: "shadow-sm";
-        readonly md: "shadow-md";
-        readonly lg: "shadow-lg";
-    };
-    /**
-     * Size-based token structure
-     * Organized by size for easy access
-     */
-    readonly size: {
-        readonly sm: {
-            readonly padding: "p-sm";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-sm";
-            readonly spacing: {
-                readonly vertical: "space-y-xs";
-            };
-        };
-        readonly md: {
-            readonly padding: "p-lg";
-            readonly radius: "rounded-xl";
-            readonly shadow: "shadow";
-            readonly spacing: {
-                readonly vertical: "space-y-xs";
-            };
-        };
-        readonly lg: {
-            readonly padding: "p-xl";
-            readonly radius: "rounded-2xl";
-            readonly shadow: "shadow-md";
-            readonly spacing: {
-                readonly vertical: "space-y-sm";
-            };
-        };
-    };
-};
-/**
- * Type exports for Card tokens
- */
-export type CardPadding = keyof typeof CARD_TOKENS.padding;
-export type CardRadius = keyof typeof CARD_TOKENS.radius;
-export type CardSpacingVertical = keyof typeof CARD_TOKENS.spacing.vertical;
-export type CardShadow = keyof typeof CARD_TOKENS.shadow;
-export type CardSize = keyof typeof CARD_TOKENS.size;

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

@@ -1,161 +0,0 @@
-/**
- * Checkbox Component Tokens
- *
- * Component-level design tokens for Checkbox component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to checkbox-specific usage.
- * All color values use CSS variables for theme-aware styling.
- */
-/**
- * Checkbox Component Tokens
- *
- * Defines spacing, sizing, typography, and visual tokens for Checkbox component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- * Checkbox sizes are typically smaller than input fields.
- */
-export declare const CHECKBOX_TOKENS: {
-    /**
-     * Checkbox sizes by size variant
-     * Supports xs, sm, md, lg, xl sizes
-     * Checkboxes are typically square and smaller than input fields
-     */
-    readonly size: {
-        readonly xs: {
-            readonly width: "w-3.5";
-            readonly height: "h-3.5";
-            readonly radius: "rounded-sm";
-            readonly iconSize: "size-2.5";
-        };
-        readonly sm: {
-            readonly width: "w-4";
-            readonly height: "h-4";
-            readonly radius: "rounded-sm";
-            readonly iconSize: "size-3";
-        };
-        readonly md: {
-            readonly width: "w-4.5";
-            readonly height: "h-4.5";
-            readonly radius: "rounded-md";
-            readonly iconSize: "size-3.5";
-        };
-        readonly lg: {
-            readonly width: "w-5";
-            readonly height: "h-5";
-            readonly radius: "rounded-md";
-            readonly iconSize: "size-4";
-        };
-        readonly xl: {
-            readonly width: "w-6";
-            readonly height: "h-6";
-            readonly radius: "rounded-md";
-            readonly iconSize: "size-5";
-        };
-    };
-    /**
-     * 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 checked: "border-[hsl(var(--tm-primary))]";
-            readonly indeterminate: "border-[hsl(var(--tm-primary))]";
-            readonly error: "border-[hsl(var(--destructive))]";
-            readonly disabled: "border-[hsl(var(--input))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly background: {
-            readonly default: "bg-transparent";
-            readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly indeterminate: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-transparent";
-            readonly disabledChecked: "bg-[hsl(var(--muted))]";
-        };
-        readonly text: {
-            readonly default: "text-[hsl(var(--foreground))]";
-            readonly checked: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly indeterminate: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Icon tokens
-     * Size and styling for checkmark icon within checkbox
-     */
-    readonly icon: {
-        readonly size: {
-            readonly xs: "size-2.5";
-            readonly sm: "size-3";
-            readonly md: "size-3.5";
-            readonly lg: "size-4";
-            readonly xl: "size-5";
-        };
-        readonly stroke: "stroke-2";
-        readonly color: {
-            readonly default: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "text-[hsl(var(--muted-foreground))]";
-        };
-    };
-    /**
-     * Indeterminate indicator tokens
-     * Styling for indeterminate state (horizontal line)
-     */
-    readonly indeterminate: {
-        readonly width: "w-2";
-        readonly height: "h-0.5";
-        readonly color: "bg-[hsl(var(--tm-primary-foreground))]";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * Transition tokens
-     * Smooth transitions for state changes
-     */
-    readonly transition: "transition-all duration-200 ease-in-out";
-};
-/**
- * Type exports for Checkbox tokens
- */
-export type CheckboxSize = keyof typeof CHECKBOX_TOKENS.size;
-export type CheckboxVariant = keyof typeof CHECKBOX_TOKENS.variant;
-export type CheckboxState = keyof typeof CHECKBOX_TOKENS.state.border;

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

@@ -1,227 +0,0 @@
-/**
- * Data Component Tokens
- *
- * Component-level design tokens for data display components (Table, DataList, Skeleton, EmptyState).
- * Maps foundation tokens (spacing, typography, radius, shadows) to data component-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Data Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for data display components.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-export declare const DATA_TOKENS: {
-    /**
-     * Table Component Tokens
-     */
-    readonly table: {
-        /**
-         * Table row heights by size
-         * Maps to Tailwind height utilities
-         */
-        readonly rowHeight: {
-            readonly sm: "h-8";
-            readonly md: "h-10";
-            readonly lg: "h-12";
-        };
-        /**
-         * Table cell and header padding by size
-         * Maps to semantic spacing tokens
-         */
-        readonly padding: {
-            readonly cell: {
-                readonly sm: "p-xs";
-                readonly md: "p-sm";
-                readonly lg: "p-md";
-            };
-            readonly header: {
-                readonly sm: "px-xs py-sm";
-                readonly md: "px-sm py-md";
-                readonly lg: "px-md py-lg";
-            };
-        };
-        /**
-         * Gap between table cells (horizontal spacing)
-         */
-        readonly gap: {
-            readonly sm: "gap-xs";
-            readonly md: "gap-sm";
-        };
-        /**
-         * Border radius for table
-         */
-        readonly radius: {
-            readonly default: "rounded-md";
-        };
-        /**
-         * Shadow tokens for table
-         * Maps to foundation elevation shadow tokens
-         */
-        readonly shadow: {
-            readonly none: "shadow-none";
-            readonly subtle: "shadow-sm";
-        };
-        /**
-         * Typography tokens for table headers and cells
-         * Maps to foundation typography fontSize tokens
-         */
-        readonly typography: {
-            readonly header: {
-                readonly fontSize: "text-sm";
-                readonly fontWeight: "font-semibold";
-            };
-            readonly cell: {
-                readonly fontSize: "text-sm";
-                readonly fontWeight: "font-normal";
-            };
-        };
-        /**
-         * Color tokens for table states
-         * Uses semantic color tokens
-         */
-        readonly colors: {
-            readonly border: "border-border";
-            readonly rowHover: "hover:bg-muted/50";
-            readonly rowSelected: "bg-muted";
-        };
-    };
-    /**
-     * Skeleton Component Tokens
-     */
-    readonly skeleton: {
-        /**
-         * Skeleton heights by variant
-         * Maps to Tailwind height utilities
-         */
-        readonly height: {
-            readonly text: "h-4";
-            readonly circle: "h-10 w-10";
-            readonly block: "h-20";
-            readonly card: "h-32";
-            readonly inline: "h-4";
-        };
-        /**
-         * Border radius by variant
-         * Maps to foundation borderRadius tokens
-         */
-        readonly radius: {
-            readonly text: "rounded-sm";
-            readonly circle: "rounded-full";
-            readonly block: "rounded-md";
-            readonly card: "rounded-xl";
-            readonly inline: "rounded-sm";
-        };
-        /**
-         * Animation tokens
-         * Uses motion tokens for animations
-         */
-        readonly animation: {
-            readonly pulse: "animate-pulse";
-            readonly fade: "animate-pulse";
-        };
-        /**
-         * Background color tokens
-         * Uses semantic color tokens
-         */
-        readonly background: {
-            readonly default: "bg-muted";
-            readonly subtle: "bg-muted/50";
-        };
-        /**
-         * Width tokens for skeleton variants
-         */
-        readonly width: {
-            readonly full: "w-full";
-            readonly inline: "inline-block";
-        };
-    };
-    /**
-     * EmptyState Component Tokens
-     */
-    readonly emptyState: {
-        /**
-         * Spacing tokens for EmptyState
-         * Maps to semantic spacing tokens
-         */
-        readonly spacing: {
-            readonly gap: "gap-md";
-            readonly padding: "p-lg";
-        };
-        /**
-         * Border radius for EmptyState container
-         */
-        readonly radius: {
-            readonly default: "rounded-xl";
-        };
-        /**
-         * Icon sizes by variant
-         * Maps to Tailwind size utilities
-         */
-        readonly iconSize: {
-            readonly sm: "size-8";
-            readonly md: "size-12";
-            readonly lg: "size-16";
-        };
-        /**
-         * Typography tokens for EmptyState
-         * Maps to foundation typography tokens
-         */
-        readonly typography: {
-            readonly title: {
-                readonly fontSize: "text-lg";
-                readonly fontWeight: "font-semibold";
-            };
-            readonly description: {
-                readonly fontSize: "text-sm";
-                readonly fontWeight: "font-normal";
-            };
-        };
-    };
-    /**
-     * DataList Component Tokens
-     */
-    readonly dataList: {
-        /**
-         * Spacing tokens for DataList
-         * Maps to semantic spacing tokens
-         */
-        readonly spacing: {
-            readonly gap: "gap-md";
-            readonly padding: "p-md";
-        };
-        /**
-         * Label width tokens (for desktop horizontal layout)
-         * Maps to Tailwind width utilities
-         */
-        readonly labelWidth: {
-            readonly sm: "w-24";
-            readonly md: "w-32";
-            readonly lg: "w-40";
-        };
-        /**
-         * Row padding tokens
-         * Maps to semantic spacing tokens
-         */
-        readonly rowPadding: {
-            readonly sm: "py-xs";
-            readonly md: "py-sm";
-            readonly lg: "py-md";
-        };
-    };
-};
-/**
- * Type exports for Data tokens
- */
-export type TableRowHeight = keyof typeof DATA_TOKENS.table.rowHeight;
-export type TableCellPadding = keyof typeof DATA_TOKENS.table.padding.cell;
-export type TableHeaderPadding = keyof typeof DATA_TOKENS.table.padding.header;
-export type TableGap = keyof typeof DATA_TOKENS.table.gap;
-export type TableShadow = keyof typeof DATA_TOKENS.table.shadow;
-export type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
-export type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
-export type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
-export type EmptyStateIconSize = keyof typeof DATA_TOKENS.emptyState.iconSize;
-export type DataListLabelWidth = keyof typeof DATA_TOKENS.dataList.labelWidth;
-export type DataListRowPadding = keyof typeof DATA_TOKENS.dataList.rowPadding;