@flikk/ui 1.0.0-beta.10 → 1.0.0-beta.11

package/dist/components/core/Button/Button.ripple.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 /**
  * Custom hook for managing ripple effects on button clicks
@@ -21,6 +21,13 @@ function useRipple(config = {}) {
     const { scale = 10, duration = 600, effect = 'default' } = config;
     const [ripples, setRipples] = useState([]);
     const buttonRef = useRef(null);
+    const timeoutsRef = useRef([]);
+    // Cleanup all pending timeouts on unmount
+    useEffect(() => {
+        return () => {
+            timeoutsRef.current.forEach(clearTimeout);
+        };
+    }, []);
     const createRipple = useCallback((event) => {
         const button = buttonRef.current;
         if (!button)
@@ -44,12 +51,14 @@ function useRipple(config = {}) {
                 maxDuration = 800; // Longest layer duration
                 break;
             case 'particle':
-                // Multiple small ripples at random offsets
+                // Multiple small ripples at random offsets (random values stored for stable renders)
                 newRipples = Array.from({ length: 6 }, (_, i) => ({
                     id: baseId + i,
                     x: x + (Math.random() - 0.5) * 20,
                     y: y + (Math.random() - 0.5) * 20,
                     layer: i + 1,
+                    randomScale: Math.random(),
+                    randomDuration: Math.random(),
                 }));
                 maxDuration = 700;
                 break;
@@ -75,12 +84,11 @@ function useRipple(config = {}) {
                 newRipples = [{ id: baseId, x, y, layer: 1 }];
                 maxDuration = 800;
                 // Spawn echo ripples with delays
-                setTimeout(() => {
+                timeoutsRef.current.push(setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
-                }, 100);
-                setTimeout(() => {
+                }, 100), setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
-                }, 200);
+                }, 200));
                 break;
             case 'default':
             default:
@@ -91,9 +99,9 @@ function useRipple(config = {}) {
         }
         setRipples((prev) => [...prev, ...newRipples]);
         // Auto-remove all ripples after longest animation completes
-        setTimeout(() => {
+        timeoutsRef.current.push(setTimeout(() => {
             setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
-        }, maxDuration);
+        }, maxDuration));
     }, [duration, effect]);
     return {
         ripples,
@@ -124,8 +132,6 @@ function getRippleColorClass(variant, color) {
             return "bg-[var(--color-danger)]/20";
         case "neutral":
             return "bg-[var(--color-neutral-500)]/20";
-        case "muted":
-            return "bg-[var(--color-text-muted)]/20";
         default:
             return "bg-[var(--color-primary)]/20";
     }
@@ -133,7 +139,9 @@ function getRippleColorClass(variant, color) {
 /**
  * Get animation properties for specific ripple effect and layer
  */
-function getRippleAnimation(effect, layer, baseScale) {
+function getRippleAnimation(effect, ripple, baseScale) {
+    var _a, _b, _c;
+    const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
     switch (effect) {
         case 'aurora':
             // Triple layer with different speeds and opacities
@@ -158,15 +166,17 @@ function getRippleAnimation(effect, layer, baseScale) {
                     transition: { duration: 0.8, ease: "easeOut" },
                 };
             }
-        case 'particle':
-            // Random scales and staggered delays
-            const randomScale = baseScale * (0.7 + Math.random() * 0.6);
-            const randomDelay = layer * 0.025;
+        case 'particle': {
+            // Use pre-computed random values from ripple creation for stable renders
+            const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
+            const particleDelay = layer * 0.025;
+            const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
             return {
                 initial: { scale: 0, opacity: 0.6 },
-                animate: { scale: randomScale, opacity: 0 },
-                transition: { duration: 0.5 + Math.random() * 0.2, ease: "easeOut", delay: randomDelay },
+                animate: { scale: particleScale, opacity: 0 },
+                transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
             };
+        }
         case 'glass':
             if (layer === 1) {
                 // Outer expanding ring

package/dist/components/core/Button/Button.theme.d.ts

@@ -3,7 +3,7 @@ import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.ty
  * Theme structure for the Button component using variant-first organization
  * This structure enables reliable dark: variants and className overrides
  */
-interface ButtonTheme {
+export interface ButtonTheme {
     baseStyle: string;
     variantStyles: Record<ButtonVariant, string>;
     variantColors: {
@@ -24,4 +24,3 @@ interface ButtonTheme {
  * Default theme for the Button component
  */
 export declare const buttonTheme: ButtonTheme;
-export {};

package/dist/components/core/Button/Button.theme.js

@@ -124,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm md:text-base",
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm md:text-base h-fit",
+            link: "p-0 text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm md:text-base",
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm md:text-base h-fit",
+            link: "p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base md:text-lg",
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base md:text-lg h-fit",
+            link: "p-0 text-lg h-fit",
         },
     },
     // State styles

package/dist/components/core/Button/index.d.ts

@@ -1,2 +1,4 @@
 export { Button } from './Button';
 export * from './Button.types';
+export { useRipple, getRippleColorClass, getRippleAnimation } from './Button.ripple';
+export type { RippleEffectType, RippleConfig, Ripple } from './Button.ripple';

package/dist/components/core/Card/Card.theme.js

@@ -1,10 +1,10 @@
 const cardTheme = {
-    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)] [&>*+*]:pt-0",
-    headerStyle: "flex flex-col space-y-1.5 p-4 md:p-6",
-    titleStyle: "text-base md:text-lg font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm md:text-base text-[var(--color-text-muted)]",
-    contentStyle: "p-4 md:p-6",
-    footerStyle: "flex items-center p-4 md:p-6",
+    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
+    headerStyle: "flex flex-col space-y-1.5 p-6",
+    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
+    contentStyle: "p-6 pt-0",
+    footerStyle: "flex items-center p-6 pt-0",
 };
 
 export { cardTheme };

package/dist/components/core/Card/Card.types.d.ts

@@ -39,28 +39,23 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
-    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
-    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLParagraphElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
+    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
     Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
-export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    children: ReactNode;
+export interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export interface CardSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
-    children: ReactNode;
+export interface CardSubtitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }

package/dist/components/core/Card/CardSubtitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CardSubtitleProps } from './Card.types';
-export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardTitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CardTitleProps } from './Card.types';
-export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Drawer/Drawer.js

@@ -64,7 +64,7 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
     return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
             overlay: drawerOverlayAnimations,
             content: getDrawerContentAnimations(position),
-        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.content, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), children] }) }) }));
+        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), children] }) }) }));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents

package/dist/components/core/Drawer/Drawer.theme.d.ts

@@ -20,11 +20,13 @@ export declare const drawerPositionVariantsFullWidth: {
 };
 export declare const drawerSizeVariants: {
     horizontal: {
+        sm: string;
         md: string;
         lg: string;
         full: string;
     };
     vertical: {
+        sm: string;
         md: string;
         lg: string;
         full: string;

package/dist/components/core/Drawer/Drawer.theme.js

@@ -5,39 +5,41 @@ const drawerTheme = {
         "border border-[var(--color-border)] ring-4 ring-white/10 " +
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
         "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
-    content: "h-full flex flex-col",
+    inner: "h-full flex flex-col",
     header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
     title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
-    body: "flex-1 overflow-y-auto p-4",
+    content: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
-        "dark:border-[var(--color-neutral-700)]",
+        "dark:border-[var(--color-border)]",
 };
 // Position variants with margin support
 const drawerPositionVariantsWithMargin = {
-    left: "left-6 top-6 h-[calc(100vh-3rem)]", // 100vh - 1.5rem top - 1.5rem bottom
-    right: "right-6 top-6 h-[calc(100vh-3rem)]",
-    top: "top-6 left-6 w-[calc(100vw-3rem)]",
-    bottom: "bottom-6 left-6 w-[calc(100vw-3rem)]",
+    left: "left-0 top-0 h-full", // 100vh - 1.5rem top - 1.5rem bottom
+    right: "right-0 top-0 h-full",
+    top: "top-0 left-0 w-full",
+    bottom: "bottom-0 left-0 w-full",
 };
 // Position variants for full-width/height drawers with consistent margins
 const drawerPositionVariantsFullWidth = {
-    left: "left-6 top-6 right-6 bottom-6", // Consistent margins on all sides
-    right: "right-6 top-6 left-6 bottom-6",
-    top: "top-6 left-6 right-6 bottom-6",
-    bottom: "bottom-6 left-6 right-6 top-6",
+    left: "left-0 top-0 right-0 bottom-0", // Consistent margins on all sides
+    right: "right-0 top-0 left-0 bottom-0",
+    top: "top-0 left-0 right-0 bottom-0",
+    bottom: "bottom-0 left-0 right-0 top-0",
 };
 // Size variants based on position
 const drawerSizeVariants = {
     // Horizontal drawers (left/right)
     horizontal: {
+        sm: "w-[min(320px,90vw)]", // 320px on large screens, max 90% on small
         md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
         lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
         full: "w-full", // Full width - positioning handles margins
     },
     // Vertical drawers (top/bottom)
     vertical: {
+        sm: "h-[min(240px,90vh)]", // 240px on large screens, max 90% on small
         md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
         lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
         full: "h-full", // Full height - positioning handles margins

package/dist/components/core/Drawer/Drawer.types.d.ts

@@ -1,26 +1,26 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "md" | "lg" | "full";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
 export interface DrawerTheme {
     overlay: string;
     container: string;
-    content: string;
+    inner: string;
     header: string;
     headerContent: string;
     title: string;
     subtitle: string;
-    body: string;
+    content: string;
     footer: string;
 }
 export interface DrawerThemeOverrides {
     overlay?: string;
     container?: string;
-    content?: string;
+    inner?: string;
     header?: string;
     headerContent?: string;
     title?: string;
     subtitle?: string;
-    body?: string;
+    content?: string;
     footer?: string;
 }
 export interface DrawerContextValue {

package/dist/components/core/Drawer/DrawerContent.js

@@ -4,7 +4,7 @@ import { useDrawerContext } from './Drawer.js';
 
 const DrawerContent = ({ children, className, ...props }) => {
     const { theme } = useDrawerContext();
-    return (jsx("div", { className: cn(theme.body, className), ...props, children: children }));
+    return (jsx("div", { className: cn(theme.content, className), ...props, children: children }));
 };
 DrawerContent.displayName = "Drawer.Content";
 

package/dist/components/core/Drawer/DrawerHeader.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 import { Button } from '../Button/Button.js';
+import 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {

package/dist/components/core/Drawer/DrawerTitle.js

@@ -4,7 +4,7 @@ import { useDrawerContext } from './Drawer.js';
 
 const DrawerTitle = ({ children, className, ...props }) => {
     const { theme, titleId } = useDrawerContext();
-    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx("h2", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 DrawerTitle.displayName = "Drawer.Title";
 

package/dist/components/core/Drawer/index.d.ts

@@ -1,2 +1,2 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, } from "./Drawer.types";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerContentProps, DrawerFooterProps, } from "./Drawer.types";

package/dist/components/core/Modal/ModalHeader.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 import { Button } from '../Button/Button.js';
+import 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {

package/dist/components/core/index.js

@@ -7,6 +7,7 @@ export { Badge } from './Badge/Badge.js';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.js';
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs/Breadcrumbs.theme.js';
 export { Button } from './Button/Button.js';
+export { getRippleAnimation, getRippleColorClass, useRipple } from './Button/Button.ripple.js';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
 export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -4,6 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChart.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 
 const ZOOM_OPTIONS = [

package/dist/components/data-display/Table/TableColumnManager.js

@@ -3,6 +3,7 @@ import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 

package/dist/components/data-display/Table/TableSelectionHeader.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
-import { cn } from '../../../utils/cn.js';
 import 'react';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Selection header that appears when rows are selected

package/dist/components/forms/FileUpload/FileUpload.js

@@ -3,7 +3,85 @@ import React__default, { useMemo, useRef, useState, useCallback } from 'react';
 import { fileUploadTheme } from './FileUpload.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Loader/Loader.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsContent.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import 'motion/react';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/SocialIcon/SocialIcon.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews

package/dist/components/forms/TimePicker/TimePickerContent.js

@@ -6,8 +6,85 @@ import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
-import { useIsClient } from '../../../hooks/useIsClient.js';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Loader/Loader.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsContent.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/SocialIcon/SocialIcon.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
  * Hook to detect dark mode state from document