@tenerife.music/ui 1.0.2 → 1.0.4

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

@@ -0,0 +1,104 @@
+/**
+ * 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;
+//# sourceMappingURL=motion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../src/tokens/components/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH;;;;;GAKG;AACH,eAAO,MAAM,aAAa;IACxB;;;OAGG;;;;;;;;;IAUH;;;OAGG;;;;;;;;;;;;;;;;;;;;IAsBH;;;OAGG;;;;;;;;;IAUH;;;OAGG;;;;;;;;;IAUH;;;OAGG;;;;;;;;;;;;;;;;;CAiBK,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAC,UAAU,CAAC;AACrE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,aAAa,CAAC,QAAQ,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC,MAAM,CAAC;AAC7D,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,aAAa,CAAC,gBAAgB,CAAC;AACjF,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,aAAa,CAAC,SAAS,CAAC"}

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

@@ -0,0 +1,182 @@
+/**
+ * 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;
+//# sourceMappingURL=navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/tokens/components/navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCH;;OAEG;;;;;;;;IASH;;OAEG;;;;;;;;;;;;;;;;;IAkBH;;OAEG;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8BH;;;OAGG;;;;;;;;IASH;;OAEG;;;;;;;IAQH;;OAEG;;;;;IAMH;;;OAGG;;;;;;;;;;IAWH;;OAEG;;;;CAIK,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC,KAAK,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC,MAAM,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,iBAAiB,CAAC,MAAM,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC,MAAM,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC;AAC/E,MAAM,MAAM,qBAAqB,GAAG,MAAM,OAAO,iBAAiB,CAAC,OAAO,CAAC,WAAW,CAAC"}

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

@@ -0,0 +1,160 @@
+/**
+ * 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;
+//# sourceMappingURL=notifications.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/tokens/components/notifications.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;;OAGG;;;;;;;;;IAUH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;;;;;IAWH;;;OAGG;;;;;;;;IASH;;;;OAIG;;;;;;;;;;IAWH;;;OAGG;;;;;;IAOH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;IA0BH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BK,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,mBAAmB,CAAC,OAAO,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC"}

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

@@ -0,0 +1,228 @@
+/**
+ * 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;
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/tokens/components/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH;;;;;GAKG;AACH,eAAO,MAAM,cAAc;IACzB;;;OAGG;;;;;;;;;;;;;;;;IAiBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BD;;;WAGG;;;;;;;;;;;;;;;;;;;;;QAqBH;;;WAGG;;;;QAIH;;;WAGG;;;;QAIH;;;WAGG;;;;;QAKH;;;WAGG;;;;;;;;;;;;;;;IAgBL;;;;OAIG;;;;;;;;;;;;;;;;;IAkBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqDD;;;WAGG;;;;;;;;;;;;CAYG,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,cAAc,CAAC,QAAQ,CAAC;AAC1E,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC"}