@flikk/ui 1.0.0-beta.22 → 1.0.0-beta.24

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

@@ -1,42 +1,100 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, useCallback, useState, useEffect } from 'react';
+import { useContext, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 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/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 '@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 '../../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 { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * TimePickerContent Component - contains the time selector dropdown
  * Uses portal positioning like Select and DatePicker components

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

@@ -9,7 +9,7 @@ import { TimePickerContext } from './TimePicker.js';
  * Displays a masked time input that opens the wheel picker on focus
  * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
-const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, }) => {
+const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
     var _a, _b, _c, _d;
     const context = useContext(TimePickerContext);
     if (!context) {
@@ -31,7 +31,7 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
     const iconStartPadding = theme.iconStartPadding || "";
     return (jsx("div", { ref: triggerRef, className: "relative w-full", children: jsxs("div", { className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
-            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Enter time", autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
+            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
                         e.stopPropagation();
                         onClear === null || onClear === void 0 ? void 0 : onClear();
                     }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: jsx(ChevronUpDownIcon, { className: "h-4 w-4" }) }))] }) }));

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';
@@ -53,7 +138,7 @@ export { inputTagTheme } from './InputTag/InputTag.theme.js';
 export { Combobox } from './Combobox/Combobox.js';
 export { comboboxTheme } from './Combobox/Combobox.theme.js';
 export { ColorPicker } from './ColorPicker/ColorPicker.js';
-export { ColorPickerContext, useColorPicker } from './ColorPicker/ColorPickerContext.js';
+export { useColorPicker } from './ColorPicker/ColorPickerContext.js';
 export { ColorPickerTrigger } from './ColorPicker/ColorPickerTrigger.js';
 export { ColorPickerBody } from './ColorPicker/ColorPickerBody.js';
 export { ColorPicker2DCanvas } from './ColorPicker/ColorPicker2DCanvas.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/index.js

@@ -0,0 +1,4 @@
+export { FormLayout } from './FormLayout/FormLayout.js';
+export { formLayoutTheme } from './FormLayout/FormLayout.theme.js';
+export { PageLayout } from './PageLayout/PageLayout.js';
+export { pageLayoutTheme } from './PageLayout/PageLayout.theme.js';

package/dist/hooks/index.d.ts

@@ -14,3 +14,4 @@ export { useClickOutside } from "./useClickOutside";
 export { useScaleBackground } from "./useScaleBackground";
 export type { UseScaleBackgroundOptions } from "./useScaleBackground";
 export { useMediaQuery } from "./useMediaQuery";
+export { useDarkMode } from './useDarkMode';

package/dist/hooks/useClickOutside.d.ts

@@ -1,7 +1,13 @@
 import { RefObject } from 'react';
 /**
- * Custom hook that handles clicks outside of the specified element
- * @param ref The reference to the element to detect clicks outside of
- * @param handler The callback function to execute when a click outside is detected
+ * Overload 1 — legacy API: useClickOutside(ref, handler)
+ * Preserves backward compatibility with existing callers.
  */
-export declare const useClickOutside: <T extends HTMLElement | null>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;
+export declare function useClickOutside<T extends HTMLElement | null>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
+/**
+ * Overload 2 — new API: useClickOutside(callback, isActive?, additionalRefs?)
+ * Returns a ref to attach to the primary element.
+ * Accepts an optional array of additional refs whose contents count as "inside"
+ * (useful for trigger+content patterns).
+ */
+export declare function useClickOutside(callback: () => void, isActive?: boolean, additionalRefs?: RefObject<HTMLElement | null>[]): RefObject<HTMLElement | null>;

package/dist/hooks/useClickOutside.js

@@ -1,28 +1,48 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
-/**
- * Custom hook that handles clicks outside of the specified element
- * @param ref The reference to the element to detect clicks outside of
- * @param handler The callback function to execute when a click outside is detected
- */
-const useClickOutside = (ref, handler) => {
-    const handlerRef = useRef(handler);
-    handlerRef.current = handler;
-    useEffect(() => {
-        const listener = (event) => {
-            const el = ref.current;
-            if (!el || el.contains(event.target)) {
+// Implementation
+function useClickOutside(refOrCallback, handlerOrIsActive, additionalRefs) {
+    const internalRef = useRef(null);
+    const legacyHandlerRef = useRef(null);
+    // Keep legacy handler ref current
+    if (typeof refOrCallback !== 'function' && typeof handlerOrIsActive === 'function') {
+        legacyHandlerRef.current = handlerOrIsActive;
+    }
+    const isLegacy = typeof refOrCallback !== 'function';
+    const isActive = isLegacy
+        ? true
+        : typeof handlerOrIsActive === 'boolean'
+            ? handlerOrIsActive
+            : true;
+    const handleClickOutside = useCallback((event) => {
+        var _a;
+        const target = event.target;
+        if (isLegacy) {
+            const legacyRef = refOrCallback;
+            const el = legacyRef.current;
+            if (!el || el.contains(target))
+                return;
+            (_a = legacyHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(legacyHandlerRef, event);
+        }
+        else {
+            if (internalRef.current && internalRef.current.contains(target))
                 return;
-            }
-            handlerRef.current(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref]);
-};
+            if (additionalRefs === null || additionalRefs === void 0 ? void 0 : additionalRefs.some(r => { var _a; return (_a = r.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            refOrCallback();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLegacy, additionalRefs]);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [handleClickOutside, isActive]);
+    if (isLegacy) {
+        return;
+    }
+    return internalRef;
+}
 
 export { useClickOutside };

package/dist/hooks/useDarkMode.d.ts

@@ -0,0 +1 @@
+export declare function useDarkMode(): boolean;

package/dist/hooks/useDarkMode.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+const _subscribers = new Set();
+let _observer = null;
+function _getIsDark() {
+    if (typeof document === 'undefined')
+        return false;
+    return (document.documentElement.classList.contains('dark') ||
+        document.body.classList.contains('dark') ||
+        document.querySelector('.dark') !== null);
+}
+function _ensureObserver() {
+    if (_observer || typeof document === 'undefined')
+        return;
+    _getIsDark();
+    _observer = new MutationObserver(() => {
+        _getIsDark();
+        _subscribers.forEach((fn) => fn());
+    });
+    _observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+    });
+    _observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class'],
+    });
+}
+function useDarkMode() {
+    const [, rerender] = useState(0);
+    useEffect(() => {
+        _ensureObserver();
+        const notify = () => rerender((n) => n + 1);
+        _subscribers.add(notify);
+        return () => {
+            _subscribers.delete(notify);
+        };
+    }, []);
+    return typeof document === 'undefined' ? false : _getIsDark();
+}
+
+export { useDarkMode };

package/dist/hooks/useFormStateMachine.d.ts

@@ -1,5 +1,5 @@
 import { StateMachineConfig, StateIdentifier } from "../utils/stateMachine";
-export interface UseFormStateMachineOptions<TData = any> {
+export interface UseFormStateMachineOptions<TData = unknown> {
     /** Initial form data */
     initialData?: TData;
     /** Callback when state changes */

package/dist/hooks/useNetworkStatus.js

@@ -32,7 +32,7 @@ const getConnection = () => {
  * }
  */
 const useNetworkStatus = () => {
-    const [isOnline, setIsOnline] = useState(() => typeof navigator !== "undefined" ? navigator.onLine : true);
+    const [isOnline, setIsOnline] = useState(true);
     const [wasOffline, setWasOffline] = useState(false);
     const [networkInfo, setNetworkInfo] = useState({});
     const updateNetworkInfo = useCallback(() => {

package/dist/hooks/useOverlay.js

@@ -7,6 +7,8 @@ let lockCount = 0;
 let savedOverflow = '';
 let savedPaddingRight = '';
 function lockScroll() {
+    if (typeof window === 'undefined')
+        return;
     lockCount++;
     if (lockCount === 1) {
         const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
@@ -23,6 +25,8 @@ function lockScroll() {
     }
 }
 function unlockScroll() {
+    if (typeof window === 'undefined')
+        return;
     lockCount = Math.max(0, lockCount - 1);
     if (lockCount === 0) {
         document.body.style.overflow = savedOverflow;

package/dist/hooks/useScaleBackground.js

@@ -1,6 +1,7 @@
-import { useRef, useLayoutEffect, useEffect } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { animate } from 'motion/react';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const WRAPPER_SELECTOR = "[data-flik-drawer-wrapper]";
 /**
  * useScaleBackground
@@ -22,7 +23,9 @@ function useScaleBackground({ isOpen, scale = 0.94, borderRadius = 24, position
     const controlsRef = useRef(null);
     // Track current animation progress so rapid toggling picks up where it left off
     const progressRef = useRef(0);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         // Skip if no scaling needed
         if (scale >= 1)
             return;

package/dist/hooks/useSelectPortal.js

@@ -1,5 +1,6 @@
-import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
  * Fixed dropdown positioning hook
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
@@ -288,7 +289,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         contentRef.current.style.left = `${left}px`;
     }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset]);
     // Reset initial render flag when dropdown opens
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen) {
             if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
@@ -319,7 +322,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         };
     }, [isOpen, calculatePosition]);
     // Initial position calculation
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         calculatePosition();
@@ -363,7 +368,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         });
     }, [calculatePosition]);
     // Update position on scroll and resize - rAF-synced for smooth tracking
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
@@ -378,7 +385,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         };
     }, [isOpen, handleScroll, handleResize]);
     // Recalculate when dropdown content resizes (e.g. search filtering)
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         if (!contentRef.current)

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 export * from "./components/core";
 export * from "./components/data-display";
 export * from "./components/forms";
-export * from "./components/charts";
 export * from "./components/layout";
-export * from "./components/effects";
 export { cn } from "./utils/cn";
 export { debounce } from "./utils/debounce";
 export { useClickOutside } from "./hooks/useClickOutside";