@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/hooks/useSelectPortal.d.ts

@@ -8,6 +8,14 @@ export interface UseSimpleDropdownOptions {
     autoWidth?: boolean;
     onClose?: () => void;
     stickyTracking?: boolean;
+    /**
+     * Clamp the dropdown horizontally so it never overflows the viewport edges.
+     * Runs even when `stickyTracking` is on, because horizontal position is
+     * independent of vertical scroll and so cannot fight the scroll-follow
+     * behavior. Vertical clamping remains gated on `!stickyTracking`.
+     * @default true
+     */
+    clampToViewport?: boolean;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -26,5 +34,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -6,7 +6,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffec
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, clampToViewport = true, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -169,28 +169,31 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
                 left = rect.right + offset;
             }
         }
-        // Collision detection - handle both horizontal and vertical overflow
-        // Skip clamping for stickyTracking so the dropdown follows the trigger past viewport edges
-        if (!stickyTracking) {
+        // Collision detection. Horizontal clamping runs whenever `clampToViewport`
+        // is on (default) — even with stickyTracking — because horizontal position
+        // is independent of vertical scroll and so cannot fight scroll-follow.
+        // Vertical clamping stays gated on `!stickyTracking` so the dropdown can
+        // follow the trigger past the top/bottom viewport edges during scroll.
+        if (clampToViewport) {
             // Horizontal bounds checking
             const rightEdge = left + dropdownWidth;
             const overflow = rightEdge - (viewportWidth - margin);
             if (overflow > 0) {
                 // Shift left just enough to fit
                 const shiftedLeft = left - overflow;
-                if (shiftedLeft >= margin) {
-                    left = shiftedLeft;
-                }
-                else {
-                    // Clamp to viewport margin
-                    left = margin;
-                }
+                left = shiftedLeft >= margin ? shiftedLeft : margin;
             }
             // Handle left edge overflow
             if (left < margin) {
                 left = margin;
             }
-            // Vertical bounds checking
+        }
+        {
+            // Vertical clamp runs on every calculatePosition — initial open, resize,
+            // and the non-sticky scroll path. The sticky scroll-follow path
+            // (updatePositionInDOM) stays unclamped so the popover tracks the trigger
+            // past the top/bottom edges during scroll. Clamping here means a sticky
+            // popover still OPENS fully on-screen even in a short viewport.
             const bottomEdge = top + dropdownHeight;
             const verticalOverflow = bottomEdge - (viewportHeight - margin);
             if (verticalOverflow > 0) {
@@ -210,13 +213,19 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             }
         }
         setPosition({ top, left, width: dropdownWidth });
-        // Calculate available space based on placement direction
+        // Calculate available space (drives the scrollable max-height var).
+        // Sticky overlays (Popover/Dropdown) clamp their open position to the
+        // viewport, so they can occupy the full usable viewport height regardless
+        // of which side of the trigger they sit on — size against that, not just
+        // the cramped space below. Non-sticky dropdowns (Select) keep per-side
+        // space so they never grow over their trigger.
+        const usableViewportHeight = viewportHeight - margin * 2 - offset;
         let availableSpace = 0;
         if (finalPlacement.startsWith("top")) {
-            availableSpace = spaceAbove - offset;
+            availableSpace = stickyTracking ? usableViewportHeight : spaceAbove - offset;
         }
         else if (finalPlacement.startsWith("bottom")) {
-            availableSpace = spaceBelow - offset;
+            availableSpace = stickyTracking ? usableViewportHeight : spaceBelow - offset;
         }
         else if (finalPlacement.startsWith("left")) {
             availableSpace = spaceLeft - offset;
@@ -240,7 +249,7 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         }
         setCssVariables(cssVars);
         // Mark initial render as complete after first calculation
-    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef, stickyTracking]);
+    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef, stickyTracking, clampToViewport]);
     // Direct DOM mutation for stickyTracking — bypasses React state for zero-lag scroll tracking
     const updatePositionInDOM = useCallback(() => {
         if (!triggerRef.current || !contentRef.current)
@@ -285,9 +294,22 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
                 left = rect.right + offset;
             }
         }
+        // Keep horizontal clamping consistent with calculatePosition so the popover
+        // doesn't re-overflow the right edge when scroll-tracking recomputes position.
+        if (clampToViewport) {
+            const margin = 16;
+            const viewportWidth = window.innerWidth;
+            const overflow = left + dropdownWidth - (viewportWidth - margin);
+            if (overflow > 0) {
+                const shiftedLeft = left - overflow;
+                left = shiftedLeft >= margin ? shiftedLeft : margin;
+            }
+            if (left < margin)
+                left = margin;
+        }
         contentRef.current.style.top = `${top}px`;
         contentRef.current.style.left = `${left}px`;
-    }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset]);
+    }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset, clampToViewport]);
     // Reset initial render flag when dropdown opens
     useIsomorphicLayoutEffect(() => {
         if (typeof window === 'undefined')
@@ -395,18 +417,17 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         if (typeof ResizeObserver === "undefined")
             return;
         const observer = new ResizeObserver(() => {
-            if (stickyTracking) {
-                updatePositionInDOM();
-            }
-            else {
-                calculatePosition();
-            }
+            // Content resize (incl. the initial settle right after open) goes through
+            // calculatePosition so the popover re-fits and stays vertically clamped to
+            // the viewport. Only the scroll path uses the unclamped updatePositionInDOM
+            // follow — otherwise the resize-on-open would immediately undo the clamp.
+            calculatePosition();
         });
         observer.observe(contentRef.current);
         return () => {
             observer.disconnect();
         };
-    }, [isOpen, calculatePosition, stickyTracking, updatePositionInDOM]);
+    }, [isOpen, calculatePosition]);
     return {
         position,
         cssVariables,

package/dist/index.js

@@ -1,233 +1,239 @@
+export { cn } from './utils/cn.js';
+export { debounce } from './utils/debounce.js';
+export { useClickOutside } from './hooks/useClickOutside.js';
+export { useOverlay } from './hooks/useOverlay.js';
+export { useSlidingNumber } from './hooks/useSlidingNumber.js';
+export { useTypewriter } from './hooks/useTypewriter.js';
 export { Accordion } from './components/core/Accordion/Accordion.js';
+export { Alert } from './components/core/Alert/Alert.js';
 export { AlertDialog } from './components/core/AlertDialog/AlertDialog.js';
+export { AnimatePresence } from 'motion/react';
+export { AppShell } from './components/layout/AppShell/AppShell.js';
 export { AspectRatio } from './components/core/AspectRatio/AspectRatio.js';
 export { Avatar } from './components/core/Avatar/Avatar.js';
 export { AvatarGroup } from './components/core/AvatarGroup/AvatarGroup.js';
 export { Badge } from './components/core/Badge/Badge.js';
 export { Breadcrumbs } from './components/core/Breadcrumbs/Breadcrumbs.js';
-export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './components/core/Breadcrumbs/Breadcrumbs.theme.js';
 export { Button } from './components/core/Button/Button.js';
-export { getRippleAnimation, getRippleColorClass, useRipple } from './components/core/Button/Button.ripple.js';
 export { ButtonGroup } from './components/core/ButtonGroup/ButtonGroup.js';
 export { ButtonGroupSeparator } from './components/core/ButtonGroup/ButtonGroupSeparator.js';
 export { ButtonGroupText } from './components/core/ButtonGroup/ButtonGroupText.js';
 export { Calendar } from './components/core/Calendar/Calendar.js';
-export { calendarTheme } from './components/core/Calendar/Calendar.theme.js';
-export { calendarAnimations } from './components/core/Calendar/Calendar.animations.js';
 export { CalendarMini } from './components/core/Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './components/core/Card/Card.js';
+export { CardBody } from './components/core/Card/CardBody.js';
+export { CardFooter } from './components/core/Card/CardFooter.js';
+export { CardHeader } from './components/core/Card/CardHeader.js';
 export { CardStack } from './components/core/CardStack/CardStack.js';
+export { CardSubtitle } from './components/core/Card/CardSubtitle.js';
+export { CardTitle } from './components/core/Card/CardTitle.js';
 export { Carousel } from './components/core/Carousel/Carousel.js';
 export { CarouselBody } from './components/core/Carousel/CarouselBody.js';
+export { Checkbox } from './components/forms/Checkbox/Checkbox.js';
+export { ColorPicker } from './components/forms/ColorPicker/ColorPicker.js';
+export { ColorPicker2DCanvas } from './components/forms/ColorPicker/ColorPicker2DCanvas.js';
+export { ColorPickerBody } from './components/forms/ColorPicker/ColorPickerBody.js';
+export { ColorPickerEyeDropper } from './components/forms/ColorPicker/ColorPickerEyeDropper.js';
+export { ColorPickerFormatSelector } from './components/forms/ColorPicker/ColorPickerFormatSelector.js';
+export { ColorPickerGradient } from './components/forms/ColorPicker/ColorPickerGradient.js';
+export { ColorPickerHeader } from './components/forms/ColorPicker/ColorPickerHeader.js';
+export { ColorPickerImage } from './components/forms/ColorPicker/ColorPickerImage.js';
+export { ColorPickerInput } from './components/forms/ColorPicker/ColorPickerInput.js';
+export { ColorPickerPresets } from './components/forms/ColorPicker/ColorPickerPresets.js';
+export { ColorPickerSavedColors } from './components/forms/ColorPicker/ColorPickerSavedColors.js';
+export { ColorPickerSliders } from './components/forms/ColorPicker/ColorPickerSliders.js';
+export { ColorPickerSwatch } from './components/forms/ColorPicker/ColorPickerSwatch.js';
+export { ColorPickerTrigger } from './components/forms/ColorPicker/ColorPickerTrigger.js';
+export { Combobox } from './components/forms/Combobox/Combobox.js';
 export { CommandPalette } from './components/core/CommandPalette/CommandPalette.js';
-export { commandPaletteTheme } from './components/core/CommandPalette/CommandPalette.theme.js';
-export { Separator } from './components/core/Separator/Separator.js';
-export { separatorTheme } from './components/core/Separator/Separator.theme.js';
+export { ContextMenu } from './components/core/ContextMenu/ContextMenu.js';
+export { DEFAULT_DATE_RANGE_PRESETS } from './components/forms/DateRangePicker/dateRangePresets.js';
+export { DatePicker } from './components/forms/DatePicker/DatePicker.js';
+export { DatePickerBody } from './components/forms/DatePicker/DatePickerBody.js';
+export { DatePickerPresets } from './components/forms/DatePicker/DatePickerPresets.js';
+export { DatePickerTrigger } from './components/forms/DatePicker/DatePickerTrigger.js';
+export { DateRangePicker } from './components/forms/DateRangePicker/DateRangePicker.js';
+export { DateRangePickerBody } from './components/forms/DateRangePicker/DateRangePickerBody.js';
+export { DateRangePickerPresets } from './components/forms/DateRangePicker/DateRangePickerPresets.js';
+export { DateRangePickerTrigger } from './components/forms/DateRangePicker/DateRangePickerTrigger.js';
+export { DescriptionList } from './components/data-display/DescriptionList/DescriptionList.js';
+export { DotSeparator } from './components/core/DotSeparator/DotSeparator.js';
+export { DragDropProvider, Draggable, Droppable } from './components/core/DragDrop/DragDrop.js';
 export { Drawer } from './components/core/Drawer/Drawer.js';
 export { DrawerBody } from './components/core/Drawer/DrawerBody.js';
 export { Dropdown } from './components/core/Dropdown/Dropdown.js';
-export { DropdownTrigger } from './components/core/Dropdown/DropdownTrigger.js';
-export { DropdownMenu } from './components/core/Dropdown/DropdownMenu.js';
 export { DropdownItem } from './components/core/Dropdown/DropdownItem.js';
+export { DropdownMenu } from './components/core/Dropdown/DropdownMenu.js';
 export { DropdownSection } from './components/core/Dropdown/DropdownSection.js';
 export { DropdownSeparator } from './components/core/Dropdown/DropdownSeparator.js';
-export { dropdownTheme } from './components/core/Dropdown/Dropdown.theme.js';
+export { DropdownTrigger } from './components/core/Dropdown/DropdownTrigger.js';
+export { Empty } from './components/core/Empty/Empty.js';
+export { Feed } from './components/data-display/Feed/Feed.js';
+export { FileUpload } from './components/forms/FileUpload/FileUpload.js';
+export { FileUploadProgress } from './components/forms/FileUpload/FileUploadProgress.js';
+export { FormLabel } from './components/forms/FormLabel/FormLabel.js';
+export { FormLayout } from './components/layout/FormLayout/FormLayout.js';
+export { GanttChart } from './components/data-display/GanttChart/GanttChart.js';
+export { Grid } from './components/layout/Grid/Grid.js';
+export { HERO_CARD_DEFAULT_IMAGE, HeroCard } from './components/core/HeroCard/HeroCard.js';
+export { Icon } from './components/core/Icon/Icon.js';
+export { ImagePlaceholder } from './components/core/ImagePlaceholder/ImagePlaceholder.js';
+export { Input } from './components/forms/Input/Input.js';
+export { InputAddress } from './components/forms/InputAddress/InputAddress.js';
+export { InputCounter } from './components/forms/InputCounter/InputCounter.js';
+export { InputCreditCard } from './components/forms/InputCreditCard/InputCreditCard.js';
+export { InputDate } from './components/forms/InputDate/InputDate.js';
+export { InputOTP } from './components/forms/InputOTP/InputOTP.js';
+export { InputTag } from './components/forms/InputTag/InputTag.js';
+export { KPI } from './components/data-display/KPI/KPI.js';
 export { Kbd } from './components/core/Kbd/Kbd.js';
-export { MenuItem } from './components/core/MenuItem/MenuItem.js';
-export { menuItemTheme } from './components/core/MenuItem/MenuItem.theme.js';
 export { Link } from './components/core/Link/Link.js';
+export { Masonry } from './components/core/Masonry/Masonry.js';
+export { Mention } from './components/forms/Mention/Mention.js';
+export { MenuItem } from './components/core/MenuItem/MenuItem.js';
+export { Message } from './components/core/Message/Message.js';
+export { MessageAudio } from './components/core/Message/MessageAudio.js';
+export { MessageBody } from './components/core/Message/MessageBody.js';
+export { MessageDateDivider } from './components/core/Message/MessageDateDivider.js';
+export { MessageFile } from './components/core/Message/MessageFile.js';
+export { MessageImage } from './components/core/Message/MessageImage.js';
+export { MessageLink } from './components/core/Message/MessageLink.js';
+export { MessageReactions } from './components/core/Message/MessageReactions.js';
+export { MessageReply } from './components/core/Message/MessageReply.js';
+export { MessageSenderName } from './components/core/Message/MessageSenderName.js';
+export { MessageStatusIndicator } from './components/core/Message/MessageStatusIndicator.js';
+export { Metric } from './components/data-display/Metric/Metric.js';
 export { Modal } from './components/core/Modal/Modal.js';
 export { ModalStack } from './components/core/ModalStack/ModalStack.js';
+export { NavItem } from './components/core/NavItem/NavItem.js';
+export { OfflineIndicator } from './components/core/OfflineIndicator/OfflineIndicator.js';
 export { PageHeading } from './components/core/PageHeading/PageHeading.js';
+export { PageHeadingActions } from './components/core/PageHeading/PageHeadingActions.js';
+export { PageHeadingBackButton } from './components/core/PageHeading/PageHeadingBackButton.js';
+export { PageHeadingIcon } from './components/core/PageHeading/PageHeadingIcon.js';
+export { PageHeadingSubtitle } from './components/core/PageHeading/PageHeadingSubtitle.js';
+export { PageHeadingTitle } from './components/core/PageHeading/PageHeadingTitle.js';
+export { PageLayout } from './components/layout/PageLayout/PageLayout.js';
 export { Pagination } from './components/core/Pagination/Pagination.js';
+export { Pill } from './components/core/Pill/Pill.js';
 export { Popover } from './components/core/Popover/Popover.js';
-export { PopoverContext, usePopoverContext } from './components/core/Popover/PopoverContext.js';
 export { PopoverBody } from './components/core/Popover/PopoverBody.js';
+export { PopoverContext, usePopoverContext } from './components/core/Popover/PopoverContext.js';
 export { Progress } from './components/core/Progress/Progress.js';
+export { Radio } from './components/forms/Radio/Radio.js';
 export { Rating } from './components/core/Rating/Rating.js';
+export { RichTextEditor } from './components/forms/RichTextEditor/RichTextEditor.js';
 export { ScrollArea } from './components/core/ScrollArea/ScrollArea.js';
-export { scrollAreaTheme } from './components/core/ScrollArea/ScrollArea.theme.js';
-export { useSmoothScroll } from './components/core/ScrollArea/smooth/useSmoothScroll.js';
+export { Section } from './components/layout/Section/Section.js';
 export { Segmented } from './components/core/Segmented/Segmented.js';
-export { Skeleton } from './components/core/Skeleton/Skeleton.js';
-export { SlidingNumber } from './components/core/SlidingNumber/SlidingNumber.js';
-export { Tabs } from './components/core/Tabs/Tabs.js';
-export { TabsList } from './components/core/Tabs/TabsList.js';
-export { TabsTrigger } from './components/core/Tabs/TabsTrigger.js';
-export { TabsBody } from './components/core/Tabs/TabsBody.js';
-export { TabsContext, useTabsContext } from './components/core/Tabs/TabsContext.js';
-export { Tooltip } from './components/core/Tooltip/Tooltip.js';
-export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './components/core/Tooltip/Tooltip.animations.js';
-export { Tree } from './components/core/Tree/Tree.js';
-export { treeTheme } from './components/core/Tree/Tree.theme.js';
-export { Tag } from './components/core/Tag/Tag.js';
-export { tagTheme } from './components/core/Tag/Tag.theme.js';
-export { Alert } from './components/core/Alert/Alert.js';
-export { alertTheme } from './components/core/Alert/Alert.theme.js';
-export { Toast } from './components/core/Toast/Toast.js';
-export { ToastProvider, useToastContext } from './components/core/Toast/ToastProvider.js';
-export { useToast } from './components/core/Toast/useToast.js';
-export { toastTheme } from './components/core/Toast/Toast.theme.js';
-export { Spinner } from './components/core/Spinner/Spinner.js';
-export { Message } from './components/core/Message/Message.js';
-export { messageTheme } from './components/core/Message/Message.theme.js';
-export { messageListTheme } from './components/core/Message/MessageList.theme.js';
-export { TypeWriter } from './components/core/Message/TypeWriter.js';
-export { MessageBody } from './components/core/Message/MessageBody.js';
-export { MessageStatusIndicator } from './components/core/Message/MessageStatusIndicator.js';
-export { MessageSenderName } from './components/core/Message/MessageSenderName.js';
-export { MessageFile } from './components/core/Message/MessageFile.js';
-export { MessageImage } from './components/core/Message/MessageImage.js';
-export { MessageAudio } from './components/core/Message/MessageAudio.js';
-export { MessageLink } from './components/core/Message/MessageLink.js';
-export { MessageReply } from './components/core/Message/MessageReply.js';
-export { MessageReactions } from './components/core/Message/MessageReactions.js';
-export { MessageDateDivider } from './components/core/Message/MessageDateDivider.js';
-export { Empty } from './components/core/Empty/Empty.js';
-export { emptyTheme } from './components/core/Empty/Empty.theme.js';
-export { Masonry } from './components/core/Masonry/Masonry.js';
-export { getMasonryTheme, masonryTheme } from './components/core/Masonry/Masonry.theme.js';
-export { DragDropProvider, Draggable, Droppable } from './components/core/DragDrop/DragDrop.js';
-export { Sortable, SortableItem } from './components/core/Sortable/Sortable.js';
-export { NavItem } from './components/core/NavItem/NavItem.js';
+export { Select, SelectButton, SelectOption, SelectOptions } from './components/forms/Select/Select.js';
+export { SelectableCard } from './components/forms/SelectableCard/SelectableCard.js';
+export { Separator } from './components/core/Separator/Separator.js';
 export { Sidebar } from './components/core/Sidebar/Sidebar.js';
-export { SidebarHeader } from './components/core/Sidebar/SidebarHeader.js';
+export { SidebarCard } from './components/core/Sidebar/SidebarCard.js';
 export { SidebarContent } from './components/core/Sidebar/SidebarContent.js';
 export { SidebarFooter } from './components/core/Sidebar/SidebarFooter.js';
+export { SidebarHeader } from './components/core/Sidebar/SidebarHeader.js';
+export { SidebarLogo } from './components/core/Sidebar/SidebarLogo.js';
+export { SidebarMobileTrigger } from './components/core/Sidebar/SidebarMobileTrigger.js';
 export { SidebarNav } from './components/core/Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './components/core/Sidebar/SidebarNavGroup.js';
+export { SidebarProvider, useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
+export { SidebarSearch } from './components/core/Sidebar/SidebarSearch.js';
 export { SidebarToggle } from './components/core/Sidebar/SidebarToggle.js';
-export { SidebarMobileTrigger } from './components/core/Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './components/core/Sidebar/SidebarUserProfile.js';
-export { SidebarLogo } from './components/core/Sidebar/SidebarLogo.js';
-export { SidebarProvider, useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
-export { OfflineIndicator } from './components/core/OfflineIndicator/OfflineIndicator.js';
-export { offlineIndicatorTheme } from './components/core/OfflineIndicator/OfflineIndicator.theme.js';
-export { ContextMenu } from './components/core/ContextMenu/ContextMenu.js';
-export { contextMenuTheme } from './components/core/ContextMenu/ContextMenu.theme.js';
-export { Pill } from './components/core/Pill/Pill.js';
-export { pillTheme } from './components/core/Pill/Pill.theme.js';
-export { Icon } from './components/core/Icon/Icon.js';
-export { fileTypes } from './components/core/Icon/data/fileTypes.js';
-export { ImagePlaceholder } from './components/core/ImagePlaceholder/ImagePlaceholder.js';
+export { Signature } from './components/forms/Signature/Signature.js';
+export { Skeleton } from './components/core/Skeleton/Skeleton.js';
+export { Slider } from './components/forms/Slider/Slider.js';
+export { SlidingNumber } from './components/core/SlidingNumber/SlidingNumber.js';
+export { Sortable, SortableItem } from './components/core/Sortable/Sortable.js';
+export { Spinner } from './components/core/Spinner/Spinner.js';
+export { Stack } from './components/layout/Stack/Stack.js';
+export { Switch } from './components/forms/Switch/Switch.js';
 export { Table } from './components/data-display/Table/index.js';
-export { KPI } from './components/data-display/KPI/KPI.js';
-export { kpiTheme } from './components/data-display/KPI/KPI.theme.js';
-export { Metric } from './components/data-display/Metric/Metric.js';
-export { metricTheme } from './components/data-display/Metric/Metric.theme.js';
-export { DescriptionList } from './components/data-display/DescriptionList/DescriptionList.js';
-export { Timeline } from './components/data-display/Timeline/Timeline.js';
-export { Feed } from './components/data-display/Feed/Feed.js';
-export { GanttChart } from './components/data-display/GanttChart/GanttChart.js';
-export { ganttChartTheme } from './components/data-display/GanttChart/GanttChart.theme.js';
-export { Input } from './components/forms/Input/Input.js';
-export { inputTheme } from './components/forms/Input/Input.theme.js';
-export { Select, SelectButton, SelectOption, SelectOptions } from './components/forms/Select/Select.js';
-export { selectTheme } from './components/forms/Select/Select.theme.js';
+export { TableActions } from './components/data-display/Table/TableActions.js';
+export { TableActionsMenu } from './components/data-display/Table/TableActionsMenu.js';
+export { TableFilter } from './components/data-display/Table/TableFilter.js';
+export { TablePagination } from './components/data-display/Table/TablePagination.js';
+export { Tabs } from './components/core/Tabs/Tabs.js';
+export { TabsBody } from './components/core/Tabs/TabsBody.js';
+export { TabsContext, useTabsContext } from './components/core/Tabs/TabsContext.js';
+export { TabsList } from './components/core/Tabs/TabsList.js';
+export { TabsTrigger } from './components/core/Tabs/TabsTrigger.js';
+export { Tag } from './components/core/Tag/Tag.js';
 export { Textarea } from './components/forms/Textarea/Textarea.js';
-export { textareaTheme } from './components/forms/Textarea/Textarea.theme.js';
-export { FormLabel } from './components/forms/FormLabel/FormLabel.js';
-export { formLabelTheme } from './components/forms/FormLabel/FormLabel.theme.js';
-export { Radio } from './components/forms/Radio/Radio.js';
-export { radioTheme } from './components/forms/Radio/Radio.theme.js';
-export { Checkbox } from './components/forms/Checkbox/Checkbox.js';
+export { TimePicker } from './components/forms/TimePicker/TimePicker.js';
+export { Timeline } from './components/data-display/Timeline/Timeline.js';
+export { Toast } from './components/core/Toast/Toast.js';
+export { ToastProvider, useToastContext } from './components/core/Toast/ToastProvider.js';
+export { Tooltip } from './components/core/Tooltip/Tooltip.js';
+export { Tree } from './components/core/Tree/Tree.js';
+export { TypeWriter } from './components/core/Message/TypeWriter.js';
+export { alertTheme } from './components/core/Alert/Alert.theme.js';
+export { appShellTheme, getAppShellTheme } from './components/layout/AppShell/AppShell.theme.js';
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './components/core/Tooltip/Tooltip.animations.js';
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './components/core/Breadcrumbs/Breadcrumbs.theme.js';
+export { calendarAnimations } from './components/core/Calendar/Calendar.animations.js';
+export { calendarTheme } from './components/core/Calendar/Calendar.theme.js';
 export { checkboxTheme } from './components/forms/Checkbox/Checkbox.theme.js';
-export { Switch } from './components/forms/Switch/Switch.js';
-export { switchTheme } from './components/forms/Switch/Switch.theme.js';
-export { DatePicker } from './components/forms/DatePicker/DatePicker.js';
+export { comboboxTheme } from './components/forms/Combobox/Combobox.theme.js';
+export { commandPaletteTheme } from './components/core/CommandPalette/CommandPalette.theme.js';
+export { contextMenuTheme } from './components/core/ContextMenu/ContextMenu.theme.js';
 export { datePickerTheme } from './components/forms/DatePicker/DatePicker.theme.js';
-export { DateRangePicker } from './components/forms/DateRangePicker/DateRangePicker.js';
 export { dateRangePickerTheme } from './components/forms/DateRangePicker/DateRangePicker.theme.js';
-export { DEFAULT_DATE_RANGE_PRESETS } from './components/forms/DateRangePicker/dateRangePresets.js';
-export { FileUpload } from './components/forms/FileUpload/FileUpload.js';
-export { fileUploadTheme } from './components/forms/FileUpload/FileUpload.theme.js';
-export { FileUploadProgress } from './components/forms/FileUpload/FileUploadProgress.js';
+export { dotSeparatorTheme } from './components/core/DotSeparator/DotSeparator.theme.js';
+export { dropdownTheme } from './components/core/Dropdown/Dropdown.theme.js';
+export { emptyTheme } from './components/core/Empty/Empty.theme.js';
+export { fileTypes } from './components/core/Icon/data/fileTypes.js';
 export { fileUploadProgressTheme } from './components/forms/FileUpload/FileUploadProgress.theme.js';
-export { TimePicker } from './components/forms/TimePicker/TimePicker.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@heroicons/react/24/outline';
-export { cn } from './utils/cn.js';
-export { AnimatePresence } from 'motion/react';
-import 'react-dom';
-import './components/forms/TimePicker/WheelColumn.js';
-export { timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
-export { Slider } from './components/forms/Slider/Slider.js';
-export { sliderTheme } from './components/forms/Slider/Slider.theme.js';
-export { Signature } from './components/forms/Signature/Signature.js';
-export { signatureTheme } from './components/forms/Signature/Signature.theme.js';
-export { RichTextEditor } from './components/forms/RichTextEditor/RichTextEditor.js';
-export { richTextEditorTheme } from './components/forms/RichTextEditor/RichTextEditor.theme.js';
-export { InputOTP } from './components/forms/InputOTP/InputOTP.js';
-export { inputOTPTheme } from './components/forms/InputOTP/InputOTP.theme.js';
-export { InputCreditCard } from './components/forms/InputCreditCard/InputCreditCard.js';
-export { inputCreditCardTheme } from './components/forms/InputCreditCard/InputCreditCard.theme.js';
-export { InputAddress } from './components/forms/InputAddress/InputAddress.js';
+export { fileUploadTheme } from './components/forms/FileUpload/FileUpload.theme.js';
+export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './components/data-display/Table/Table.filterUtils.js';
+export { formLabelTheme } from './components/forms/FormLabel/FormLabel.theme.js';
+export { formLayoutTheme } from './components/layout/FormLayout/FormLayout.theme.js';
+export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './components/forms/ColorPicker/colorUtils.js';
+export { formsBaseTheme } from './components/forms/forms.theme.js';
+export { ganttChartTheme } from './components/data-display/GanttChart/GanttChart.theme.js';
+export { getMasonryTheme, masonryTheme } from './components/core/Masonry/Masonry.theme.js';
+export { getRippleAnimation, getRippleColorClass, useRipple } from './components/core/Button/Button.ripple.js';
+export { gridTheme } from './components/layout/Grid/Grid.theme.js';
+export { heroCardTheme } from './components/core/HeroCard/HeroCard.theme.js';
 export { inputAddressTheme } from './components/forms/InputAddress/InputAddress.theme.js';
-export { InputDate } from './components/forms/InputDate/InputDate.js';
-export { inputDateTheme } from './components/forms/InputDate/InputDate.theme.js';
-export { InputCounter } from './components/forms/InputCounter/InputCounter.js';
 export { inputCounterTheme } from './components/forms/InputCounter/InputCounter.theme.js';
-export { formsBaseTheme } from './components/forms/forms.theme.js';
-export { InputTag } from './components/forms/InputTag/InputTag.js';
+export { inputCreditCardTheme } from './components/forms/InputCreditCard/InputCreditCard.theme.js';
+export { inputDateTheme } from './components/forms/InputDate/InputDate.theme.js';
+export { inputOTPTheme } from './components/forms/InputOTP/InputOTP.theme.js';
 export { inputTagTheme } from './components/forms/InputTag/InputTag.theme.js';
-export { Combobox } from './components/forms/Combobox/Combobox.js';
-export { comboboxTheme } from './components/forms/Combobox/Combobox.theme.js';
-export { ColorPicker } from './components/forms/ColorPicker/ColorPicker.js';
-export { useColorPicker } from './components/forms/ColorPicker/ColorPickerContext.js';
-export { ColorPickerTrigger } from './components/forms/ColorPicker/ColorPickerTrigger.js';
-export { ColorPickerBody } from './components/forms/ColorPicker/ColorPickerBody.js';
-export { ColorPicker2DCanvas } from './components/forms/ColorPicker/ColorPicker2DCanvas.js';
-export { ColorPickerSwatch } from './components/forms/ColorPicker/ColorPickerSwatch.js';
-export { ColorPickerSliders } from './components/forms/ColorPicker/ColorPickerSliders.js';
-export { ColorPickerInput } from './components/forms/ColorPicker/ColorPickerInput.js';
-export { ColorPickerFormatSelector } from './components/forms/ColorPicker/ColorPickerFormatSelector.js';
-export { ColorPickerEyeDropper } from './components/forms/ColorPicker/ColorPickerEyeDropper.js';
-export { ColorPickerPresets } from './components/forms/ColorPicker/ColorPickerPresets.js';
-export { ColorPickerSavedColors } from './components/forms/ColorPicker/ColorPickerSavedColors.js';
-export { ColorPickerHeader } from './components/forms/ColorPicker/ColorPickerHeader.js';
-export { ColorPickerGradient } from './components/forms/ColorPicker/ColorPickerGradient.js';
-export { ColorPickerImage } from './components/forms/ColorPicker/ColorPickerImage.js';
-export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './components/forms/ColorPicker/colorUtils.js';
-export { SelectableCard } from './components/forms/SelectableCard/SelectableCard.js';
-export { selectableCardTheme } from './components/forms/SelectableCard/SelectableCard.theme.js';
-export { Mention } from './components/forms/Mention/Mention.js';
+export { inputTheme } from './components/forms/Input/Input.theme.js';
+export { kpiTheme } from './components/data-display/KPI/KPI.theme.js';
 export { mentionTheme } from './components/forms/Mention/Mention.theme.js';
-export { CronInput } from './components/forms/CronInput/CronInput.js';
-export { cronInputTheme } from './components/forms/CronInput/CronInput.theme.js';
-export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRuns, parseCron, validateCron } from './components/forms/CronInput/CronInput.utils.js';
-export { FormLayout } from './components/layout/FormLayout/FormLayout.js';
-export { formLayoutTheme } from './components/layout/FormLayout/FormLayout.theme.js';
-export { PageLayout } from './components/layout/PageLayout/PageLayout.js';
+export { menuItemTheme } from './components/core/MenuItem/MenuItem.theme.js';
+export { messageListTheme } from './components/core/Message/MessageList.theme.js';
+export { messageTheme } from './components/core/Message/Message.theme.js';
+export { metricTheme } from './components/data-display/Metric/Metric.theme.js';
+export { offlineIndicatorTheme } from './components/core/OfflineIndicator/OfflineIndicator.theme.js';
 export { pageLayoutTheme } from './components/layout/PageLayout/PageLayout.theme.js';
-export { debounce } from './utils/debounce.js';
-export { useClickOutside } from './hooks/useClickOutside.js';
-export { useOverlay } from './hooks/useOverlay.js';
-export { useSlidingNumber } from './hooks/useSlidingNumber.js';
-export { useTypewriter } from './hooks/useTypewriter.js';
-export { CardBody } from './components/core/Card/CardBody.js';
-export { CardFooter } from './components/core/Card/CardFooter.js';
-export { CardHeader } from './components/core/Card/CardHeader.js';
-export { CardSubtitle } from './components/core/Card/CardSubtitle.js';
-export { CardTitle } from './components/core/Card/CardTitle.js';
-export { DatePickerBody } from './components/forms/DatePicker/DatePickerBody.js';
-export { DatePickerPresets } from './components/forms/DatePicker/DatePickerPresets.js';
-export { DatePickerTrigger } from './components/forms/DatePicker/DatePickerTrigger.js';
-export { DateRangePickerBody } from './components/forms/DateRangePicker/DateRangePickerBody.js';
-export { DateRangePickerPresets } from './components/forms/DateRangePicker/DateRangePickerPresets.js';
-export { DateRangePickerTrigger } from './components/forms/DateRangePicker/DateRangePickerTrigger.js';
-export { PageHeadingActions } from './components/core/PageHeading/PageHeadingActions.js';
-export { PageHeadingBackButton } from './components/core/PageHeading/PageHeadingBackButton.js';
-export { PageHeadingIcon } from './components/core/PageHeading/PageHeadingIcon.js';
-export { PageHeadingSubtitle } from './components/core/PageHeading/PageHeadingSubtitle.js';
-export { PageHeadingTitle } from './components/core/PageHeading/PageHeadingTitle.js';
-export { TableActions } from './components/data-display/Table/TableActions.js';
-export { TableActionsMenu } from './components/data-display/Table/TableActionsMenu.js';
-export { TableFilter } from './components/data-display/Table/TableFilter.js';
-export { TablePagination } from './components/data-display/Table/TablePagination.js';
-export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './components/data-display/Table/Table.filterUtils.js';
+export { pillTheme } from './components/core/Pill/Pill.theme.js';
+export { radioTheme } from './components/forms/Radio/Radio.theme.js';
+export { richTextEditorTheme } from './components/forms/RichTextEditor/RichTextEditor.theme.js';
+export { scrollAreaTheme } from './components/core/ScrollArea/ScrollArea.theme.js';
+export { sectionTheme } from './components/layout/Section/Section.theme.js';
+export { selectTheme } from './components/forms/Select/Select.theme.js';
+export { selectableCardTheme } from './components/forms/SelectableCard/SelectableCard.theme.js';
+export { separatorTheme } from './components/core/Separator/Separator.theme.js';
+export { signatureTheme } from './components/forms/Signature/Signature.theme.js';
+export { sliderTheme } from './components/forms/Slider/Slider.theme.js';
+export { stackTheme } from './components/layout/Stack/Stack.theme.js';
+export { switchTheme } from './components/forms/Switch/Switch.theme.js';
+export { tagTheme } from './components/core/Tag/Tag.theme.js';
+export { textareaTheme } from './components/forms/Textarea/Textarea.theme.js';
+export { timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
+export { toastTheme } from './components/core/Toast/Toast.theme.js';
+export { treeTheme } from './components/core/Tree/Tree.theme.js';
+export { useColorPicker } from './components/forms/ColorPicker/ColorPickerContext.js';
+export { useSmoothScroll } from './components/core/ScrollArea/smooth/useSmoothScroll.js';
 export { useTableColumns } from './components/data-display/Table/hooks/useTableColumns.js';
 export { useTableExpansion } from './components/data-display/Table/hooks/useTableExpansion.js';
 export { useTableFilter } from './components/data-display/Table/hooks/useTableFilter.js';
 export { useTablePagination } from './components/data-display/Table/hooks/useTablePagination.js';
 export { useTableSelection } from './components/data-display/Table/hooks/useTableSelection.js';
+export { useToast } from './components/core/Toast/useToast.js';