@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/components/forms/index.js

@@ -29,6 +29,91 @@ import 'clsx';
 import 'tailwind-merge';
 import 'motion/react';
 import 'react-dom';
+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 '../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/Carousel/CarouselBody.js';
+import '../core/CommandPalette/CommandPalette.js';
+import '../core/Separator/Separator.js';
+import '../core/Drawer/Drawer.js';
+import '../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
+import '@heroicons/react/16/solid';
+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/SidebarMobileTrigger.js';
+import '../core/Sidebar/SidebarUserProfile.js';
+import '../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
 import './TimePicker/WheelColumn.js';
 export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
 export { Slider } from './Slider/Slider.js';
@@ -52,7 +137,8 @@ export { InputTag } from './InputTag/InputTag.js';
 export { inputTagTheme } from './InputTag/InputTag.theme.js';
 export { Combobox } from './Combobox/Combobox.js';
 export { comboboxTheme } from './Combobox/Combobox.theme.js';
-export { ColorPicker, ColorPickerContext, useColorPicker } from './ColorPicker/ColorPicker.js';
+export { ColorPicker } from './ColorPicker/ColorPicker.js';
+export { ColorPickerContext, useColorPicker } from './ColorPicker/ColorPickerContext.js';
 export { ColorPickerTrigger } from './ColorPicker/ColorPickerTrigger.js';
 export { ColorPickerBody } from './ColorPicker/ColorPickerBody.js';
 export { ColorPicker2DCanvas } from './ColorPicker/ColorPicker2DCanvas.js';
@@ -62,6 +148,10 @@ export { ColorPickerInput } from './ColorPicker/ColorPickerInput.js';
 export { ColorPickerFormatSelector } from './ColorPicker/ColorPickerFormatSelector.js';
 export { ColorPickerEyeDropper } from './ColorPicker/ColorPickerEyeDropper.js';
 export { ColorPickerPresets } from './ColorPicker/ColorPickerPresets.js';
+export { ColorPickerSavedColors } from './ColorPicker/ColorPickerSavedColors.js';
+export { ColorPickerHeader } from './ColorPicker/ColorPickerHeader.js';
+export { ColorPickerGradient } from './ColorPicker/ColorPickerGradient.js';
+export { ColorPickerImage } from './ColorPicker/ColorPickerImage.js';
 export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './ColorPicker/colorUtils.js';
 export { SelectableCard } from './SelectableCard/SelectableCard.js';
 export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';

package/dist/components/layout/FormLayout/FormLayout.js

@@ -1,10 +1,96 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.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 '../../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/Carousel/CarouselBody.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import { Separator } from '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+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/SidebarMobileTrigger.js';
+import '../../core/Sidebar/SidebarUserProfile.js';
+import '../../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
-import { Separator } from '../../core/Separator/Separator.js';
 
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {

package/dist/components/layout/FormLayout/FormLayout.theme.js

@@ -2,8 +2,8 @@ const formLayoutTheme = {
     root: "flex flex-col gap-6",
     section: "grid grid-cols-1 md:grid-cols-6 gap-6 md:gap-10",
     sectionSidebar: "col-span-full md:col-span-2",
-    sectionTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
-    sectionSubtitle: "text-base text-[var(--color-text-muted)] mt-1",
+    sectionTitle: "text-base font-semibold text-[var(--color-text-primary)]",
+    sectionSubtitle: "text-sm text-[var(--color-text-muted)] mt-1",
     sectionAction: "mt-4",
     sectionContent: "col-span-full md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4",
     sectionContentFull: "col-span-full grid grid-cols-1 sm:grid-cols-2 gap-4",

package/dist/hooks/useOverlay.d.ts

@@ -1,3 +1,5 @@
+export declare function lockScroll(): void;
+export declare function unlockScroll(): void;
 export interface UseOverlayOptions {
     /** Whether the overlay is currently open */
     isOpen: boolean;

package/dist/hooks/useOverlay.js

@@ -1,5 +1,35 @@
 import { useCallback, useEffect } from 'react';
 
+// ── Scroll-lock manager (ref-counted) ──────────────────────────────────
+// Supports nested overlays: only the first lock measures the scrollbar
+// and compensates; subsequent locks just bump the counter.
+let lockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+function lockScroll() {
+    lockCount++;
+    if (lockCount === 1) {
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Save originals before mutating
+        savedOverflow = document.body.style.overflow;
+        savedPaddingRight = document.body.style.paddingRight;
+        // Expose width as CSS variable so fixed-position elements can compensate
+        // e.g.  position: fixed; padding-right: var(--scrollbar-width, 0px);
+        document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+        if (scrollbarWidth > 0) {
+            document.body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+        document.body.style.overflow = 'hidden';
+    }
+}
+function unlockScroll() {
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+        document.documentElement.style.removeProperty('--scrollbar-width');
+    }
+}
 /**
  * Shared hook for overlay behavior (escape key, scroll lock, click handling)
  *
@@ -49,15 +79,15 @@ const useOverlay = ({ isOpen, onClose, closeOnEsc = true, closeOnOverlayClick =
         if (isOpen) {
             // Add Escape key listener
             document.addEventListener('keydown', handleEscKey);
-            // Lock body scroll to prevent background scrolling
+            // Lock body scroll (ref-counted so nested overlays work)
             if (enableScrollLock) {
-                document.body.style.overflow = 'hidden';
+                lockScroll();
             }
             // Cleanup on unmount or when overlay closes
             return () => {
                 document.removeEventListener('keydown', handleEscKey);
                 if (enableScrollLock) {
-                    document.body.style.overflow = 'unset';
+                    unlockScroll();
                 }
             };
         }
@@ -68,4 +98,4 @@ const useOverlay = ({ isOpen, onClose, closeOnEsc = true, closeOnOverlayClick =
     };
 };
 
-export { useOverlay };
+export { lockScroll, unlockScroll, useOverlay };