@tenerife.music/ui 1.0.8 → 1.0.12

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

@@ -1,159 +0,0 @@
-/**
- * Notification Component Tokens
- *
- * Component-level design tokens for Notification Center components.
- * Maps foundation tokens (spacing, radius, shadows, motion) to notification-specific usage.
- * Extends toast tokens with additional tokens for panel, grouping, and timeline features.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Notification Component Tokens
- *
- * Defines tokens for notification spacing, radius, shadow, surface variants, animations,
- * panel configuration, item styling, and timeline features.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const NOTIFICATION_TOKENS: {
-    /**
-     * Spacing tokens for notification layout
-     * Maps to semanticSpacing tokens
-     */
-    readonly spacing: {
-        readonly gap: "gap-sm";
-        readonly padding: "p-md";
-        readonly paddingHorizontal: "px-md";
-        readonly paddingVertical: "py-md";
-        readonly itemPadding: "p-sm";
-        readonly panelPadding: "p-lg";
-    };
-    /**
-     * Border radius for notifications
-     * Maps to componentRadius.notification
-     */
-    readonly radius: {
-        readonly item: "rounded-md";
-        readonly panel: "rounded-lg";
-        readonly default: "rounded-lg";
-    };
-    /**
-     * Shadow for notifications
-     * Maps to elevationShadows
-     */
-    readonly shadow: {
-        readonly item: "shadow-sm";
-        readonly panel: "shadow-xl";
-        readonly default: "shadow-lg";
-    };
-    /**
-     * Width tokens for notifications
-     * Maps to spacing tokens for width constraints
-     */
-    readonly width: {
-        readonly item: "w-full";
-        readonly itemMax: "max-w-md";
-        readonly panel: "w-full";
-        readonly panelSm: "w-sm";
-        readonly panelMd: "w-md";
-        readonly panelLg: "w-lg";
-        readonly panelMaxHeight: "max-h-[calc(100vh-2rem)]";
-    };
-    /**
-     * Item-specific tokens
-     * For individual notification items in lists
-     */
-    readonly item: {
-        readonly padding: "p-sm";
-        readonly gap: "gap-sm";
-        readonly iconSize: "h-5 w-5";
-        readonly radius: "rounded-md";
-        readonly minHeight: "min-h-[3rem]";
-    };
-    /**
-     * Surface tokens for notification variants
-     * Extends toast variants with system and log
-     * Maps to SURFACE_TOKENS for background colors
-     */
-    readonly surface: {
-        readonly success: "bg-success/10 border-success/20 text-success-foreground";
-        readonly info: "bg-info/10 border-info/20 text-info-foreground";
-        readonly warning: "bg-warning/10 border-warning/20 text-warning-foreground";
-        readonly danger: "bg-destructive/10 border-destructive/20 text-destructive-foreground";
-        readonly system: "bg-muted border-border text-foreground";
-        readonly log: "bg-background border-border/50 text-muted-foreground";
-        readonly default: "bg-background border border-border text-foreground";
-    };
-    /**
-     * Timeline tokens for grouped notifications
-     * Visual timeline indicators for grouped items
-     */
-    readonly timeline: {
-        readonly dotSize: "h-2 w-2";
-        readonly lineWidth: "w-0.5";
-        readonly gap: "gap-xs";
-    };
-    /**
-     * Animation tokens for notification enter/exit animations
-     * Maps to Motion V2 utility classes
-     * Uses CSS-only animations from motion/v2.ts
-     */
-    readonly animation: {
-        readonly enter: {
-            readonly slideInRight: "tm-motion-fade-slide-right";
-            readonly fadeIn: "tm-motion-fade-in";
-            readonly combined: "tm-motion-fade-slide-right";
-        };
-        readonly exit: {
-            readonly slideOutRight: "tm-motion-fade-slide-right-out";
-            readonly fadeOut: "tm-motion-fade-out";
-            readonly combined: "tm-motion-fade-slide-right-out";
-        };
-        readonly panel: {
-            readonly enter: {
-                readonly slideInRight: "tm-motion-fade-slide-right";
-                readonly fadeIn: "tm-motion-fade-in";
-                readonly combined: "tm-motion-fade-slide-right";
-            };
-            readonly exit: {
-                readonly slideOutRight: "tm-motion-fade-slide-right-out";
-                readonly fadeOut: "tm-motion-fade-out";
-                readonly combined: "tm-motion-fade-slide-right-out";
-            };
-        };
-    };
-    /**
-     * Panel-specific tokens
-     * For the side drawer notification panel
-     */
-    readonly panel: {
-        readonly width: {
-            readonly default: "w-md";
-            readonly sm: "w-sm";
-            readonly md: "w-md";
-            readonly lg: "w-lg";
-        };
-        readonly maxHeight: "max-h-[calc(100vh-2rem)]";
-        readonly spacing: {
-            readonly gap: "gap-md";
-            readonly padding: "p-lg";
-            readonly headerPadding: "px-lg py-md";
-        };
-        readonly radius: {
-            readonly default: "rounded-lg";
-            readonly topLeft: "rounded-tl-lg";
-            readonly topRight: "rounded-tr-lg";
-        };
-        readonly shadow: {
-            readonly default: "shadow-xl";
-        };
-        readonly backdrop: {
-            readonly bg: "bg-black/50";
-            readonly blur: "backdrop-blur-sm";
-        };
-    };
-};
-/**
- * Type exports for Notification tokens
- */
-export type NotificationVariant = keyof typeof NOTIFICATION_TOKENS.surface;
-export type NotificationPanelWidth = keyof typeof NOTIFICATION_TOKENS.panel.width;

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

@@ -1,227 +0,0 @@
-/**
- * Overlay Component Tokens
- *
- * Component-level design tokens for Overlay components (Modal, Dialog, Backdrop).
- * Maps foundation tokens (spacing, radius, shadows, motion) to overlay-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Overlay Component Tokens
- *
- * Defines tokens for backdrop variants, modal sizes, and animations.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const OVERLAY_TOKENS: {
-    /**
-     * Backdrop tokens by variant
-     * Maps to SURFACE_TOKENS for background colors
-     */
-    readonly backdrop: {
-        readonly default: {
-            readonly bg: "bg-black/50";
-            readonly opacity: "opacity-100";
-        };
-        readonly blurred: {
-            readonly bg: "bg-black/50";
-            readonly opacity: "opacity-100";
-            readonly backdropFilter: "backdrop-blur-sm";
-        };
-        readonly transparent: {
-            readonly bg: "bg-transparent";
-            readonly opacity: "opacity-0";
-        };
-    };
-    /**
-     * Modal tokens by size variant
-     * Maps to foundation tokens for spacing, radius, and shadows
-     */
-    readonly modal: {
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-            readonly lg: "rounded-xl";
-            readonly xl: "rounded-2xl";
-            readonly fullscreen: "rounded-none";
-        };
-        readonly padding: {
-            readonly sm: "p-md";
-            readonly md: "p-lg";
-            readonly lg: "p-xl";
-            readonly xl: "p-xl";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-            readonly lg: "shadow-xl";
-            readonly xl: "shadow-xl";
-        };
-        readonly maxWidth: {
-            readonly sm: "max-w-md";
-            readonly md: "max-w-lg";
-            readonly lg: "max-w-2xl";
-            readonly xl: "max-w-4xl";
-            readonly fullscreen: "max-w-full";
-        };
-        /**
-         * Modal surface tokens by variant
-         * Token-based styling for all modal surface variants
-         */
-        readonly surface: {
-            readonly primary: {
-                readonly bg: "bg-background";
-                readonly border: "border border-border";
-            };
-            readonly secondary: {
-                readonly bg: "bg-card";
-                readonly border: "border border-border";
-                readonly shadow: "shadow-sm";
-            };
-            readonly tinted: {
-                readonly bg: "bg-muted/50";
-                readonly border: "border border-border/50";
-            };
-            readonly bare: {
-                readonly bg: "bg-transparent";
-                readonly border: "border-none";
-                readonly shadow: "shadow-none";
-            };
-        };
-        /**
-         * Modal container tokens
-         * For backdrop container positioning and layout
-         */
-        readonly container: {
-            readonly layout: "fixed inset-0 z-40 flex items-center justify-center";
-        };
-        /**
-         * Modal position tokens
-         * For centering and positioning modal content
-         */
-        readonly position: {
-            readonly center: "left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2";
-        };
-        /**
-         * Modal transition tokens
-         * Maps to motion tokens for appear/disappear animations
-         */
-        readonly transition: {
-            readonly appear: "tm-motion-fade-scale";
-            readonly disappear: "tm-motion-fade-scale-out";
-        };
-        /**
-         * Modal section spacing tokens
-         * For header, body, and footer spacing
-         */
-        readonly spacing: {
-            readonly header: {
-                readonly marginBottom: "mb-md";
-                readonly gap: "gap-xs";
-            };
-            readonly body: {
-                readonly layout: "flex-1";
-            };
-            readonly footer: {
-                readonly marginTop: "mt-md";
-                readonly gap: "gap-sm";
-            };
-        };
-    };
-    /**
-     * Animation tokens for overlay enter/exit animations
-     * Maps to Motion V2 utility classes
-     * Uses CSS-only animations from motion/v2.ts
-     */
-    readonly animation: {
-        readonly enter: {
-            readonly duration: "duration-normal";
-            readonly easing: "ease-out";
-            readonly keyframes: "tm-motion-fade-in";
-            readonly scale: "tm-motion-scale-in";
-            readonly combined: "tm-motion-fade-scale";
-        };
-        readonly exit: {
-            readonly duration: "duration-fast";
-            readonly easing: "ease-in";
-            readonly keyframes: "tm-motion-fade-out";
-            readonly scale: "tm-motion-scale-out";
-            readonly combined: "tm-motion-fade-scale-out";
-        };
-    };
-    /**
-     * Drawer tokens by size variant
-     * Maps to foundation tokens for spacing, radius, and shadows
-     */
-    readonly drawer: {
-        readonly width: {
-            readonly sm: "w-64";
-            readonly md: "w-80";
-            readonly lg: "w-96";
-        };
-        readonly height: {
-            readonly sm: "h-64";
-            readonly md: "h-80";
-            readonly lg: "h-96";
-        };
-        readonly radius: {
-            readonly left: {
-                readonly sm: "rounded-r-md";
-                readonly md: "rounded-r-lg";
-                readonly lg: "rounded-r-xl";
-            };
-            readonly right: {
-                readonly sm: "rounded-l-md";
-                readonly md: "rounded-l-lg";
-                readonly lg: "rounded-l-xl";
-            };
-            readonly bottom: {
-                readonly sm: "rounded-t-md";
-                readonly md: "rounded-t-lg";
-                readonly lg: "rounded-t-xl";
-            };
-        };
-        readonly padding: {
-            readonly sm: "p-md";
-            readonly md: "p-lg";
-            readonly lg: "p-xl";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-            readonly lg: "shadow-xl";
-        };
-        readonly animation: {
-            readonly left: {
-                readonly enter: "tm-motion-slide-right-in";
-                readonly exit: "tm-motion-slide-right-out";
-            };
-            readonly right: {
-                readonly enter: "tm-motion-slide-left-in";
-                readonly exit: "tm-motion-slide-left-out";
-            };
-            readonly bottom: {
-                readonly enter: "tm-motion-slide-up-in";
-                readonly exit: "tm-motion-slide-up-out";
-            };
-        };
-        /**
-         * Drawer section spacing tokens
-         * For header, body, and footer spacing
-         */
-        readonly spacing: {
-            readonly header: {
-                readonly marginBottom: "mb-md";
-                readonly gap: "gap-xs";
-            };
-            readonly footer: {
-                readonly marginTop: "mt-md";
-                readonly gap: "gap-sm";
-            };
-        };
-    };
-};
-/**
- * Type exports for Overlay tokens
- */
-export type OverlayBackdropVariant = keyof typeof OVERLAY_TOKENS.backdrop;
-export type OverlayModalSize = keyof typeof OVERLAY_TOKENS.modal.radius;

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

@@ -1,84 +0,0 @@
-/**
- * Popover Component Tokens
- *
- * Component-level design tokens for Popover component.
- * Maps foundation tokens (spacing, radius, shadows, motion) to popover-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Popover Component Tokens
- *
- * Defines tokens for popover content, arrow, and animations.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const POPOVER_TOKENS: {
-    /**
-     * Popover content tokens by size
-     * Maps to foundation spacing, radius, and shadow tokens
-     */
-    readonly content: {
-        readonly border: {
-            readonly default: "border";
-            readonly color: "border-border";
-        };
-        readonly background: {
-            readonly default: "bg-popover";
-        };
-        readonly text: {
-            readonly default: "text-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 shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-        };
-        readonly width: {
-            readonly xs: "w-40";
-            readonly sm: "w-48";
-            readonly md: "w-72";
-            readonly lg: "w-96";
-            readonly xl: "w-[32rem]";
-        };
-    };
-    /**
-     * Popover arrow tokens
-     * Maps to foundation spacing tokens
-     */
-    readonly arrow: {
-        readonly size: {
-            readonly sm: "w-2 h-2";
-            readonly md: "w-3 h-3";
-        };
-        readonly offset: {
-            readonly sm: "-translate-x-1/2";
-            readonly md: "-translate-x-1/2";
-        };
-    };
-    /**
-     * Animation tokens for popover enter/exit animations
-     * Maps to Motion V2 utility classes
-     * Uses CSS-only animations from motion/v2.ts
-     */
-    readonly animation: {
-        readonly enter: "tm-motion-fade-scale";
-        readonly exit: "tm-motion-fade-scale-out";
-    };
-};
-/**
- * Type exports for Popover tokens
- */
-export type PopoverContentPadding = keyof typeof POPOVER_TOKENS.content.padding;
-export type PopoverContentRadius = keyof typeof POPOVER_TOKENS.content.radius;
-export type PopoverContentShadow = keyof typeof POPOVER_TOKENS.content.shadow;
-export type PopoverContentWidth = keyof typeof POPOVER_TOKENS.content.width;
-export type PopoverArrowSize = keyof typeof POPOVER_TOKENS.arrow.size;
-export type PopoverArrowOffset = keyof typeof POPOVER_TOKENS.arrow.offset;

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

@@ -1,149 +0,0 @@
-/**
- * Radio Component Tokens
- *
- * Component-level design tokens for Radio component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to radio-specific usage.
- * All color values use CSS variables for theme-aware styling.
- */
-/**
- * Radio Component Tokens
- *
- * Defines spacing, sizing, typography, and visual tokens for Radio component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- * Radio sizes are typically smaller than input fields.
- */
-export declare const RADIO_TOKENS: {
-    /**
-     * Radio sizes by size variant
-     * Supports xs, sm, md, lg, xl sizes
-     * Radios are typically circular and smaller than input fields
-     */
-    readonly size: {
-        readonly xs: {
-            readonly width: "w-3.5";
-            readonly height: "h-3.5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-1.5";
-        };
-        readonly sm: {
-            readonly width: "w-4";
-            readonly height: "h-4";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-2";
-        };
-        readonly md: {
-            readonly width: "w-4.5";
-            readonly height: "h-4.5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-2.5";
-        };
-        readonly lg: {
-            readonly width: "w-5";
-            readonly height: "h-5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-3";
-        };
-        readonly xl: {
-            readonly width: "w-6";
-            readonly height: "h-6";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-3.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 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 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 disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Dot tokens (inner filled circle indicator)
-     * Size and styling for radio dot within radio button
-     */
-    readonly dot: {
-        readonly size: {
-            readonly xs: "size-1.5";
-            readonly sm: "size-2";
-            readonly md: "size-2.5";
-            readonly lg: "size-3";
-            readonly xl: "size-3.5";
-        };
-        readonly color: {
-            readonly default: "bg-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "bg-[hsl(var(--muted-foreground))]";
-        };
-        readonly radius: "rounded-full";
-    };
-    /**
-     * 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 Radio tokens
- */
-export type RadioSize = keyof typeof RADIO_TOKENS.size;
-export type RadioVariant = keyof typeof RADIO_TOKENS.variant;
-export type RadioState = keyof typeof RADIO_TOKENS.state.border;

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

@@ -1,41 +0,0 @@
-/**
- * Section Component Tokens
- *
- * Component-level design tokens for Section component.
- * Maps foundation tokens (spacing) to section-specific usage for page/landing layout composition.
- *
- * Defines tokens for vertical padding and content spacing within sections.
- */
-/**
- * Section Component Tokens
- *
- * Defines padding and spacing tokens for Section component.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-export declare const SECTION_TOKENS: {
-    /**
-     * Vertical padding for sections
-     * Used for spacing between major page sections
-     */
-    readonly padding: {
-        readonly sm: "py-md";
-        readonly md: "py-xl";
-        readonly lg: "py-2xl";
-        readonly xl: "py-3xl";
-    };
-    /**
-     * Gap spacing for content blocks within sections
-     * Used for spacing between content elements in a section
-     */
-    readonly spacing: {
-        readonly sm: "gap-sm";
-        readonly md: "gap-md";
-        readonly lg: "gap-lg";
-        readonly xl: "gap-xl";
-    };
-};
-/**
- * Type exports for Section tokens
- */
-export type SectionPadding = keyof typeof SECTION_TOKENS.padding;
-export type SectionGap = keyof typeof SECTION_TOKENS.spacing;