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

package/dist/components/forms/Textarea/Textarea.js

@@ -4,7 +4,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, ...props }, ref) => {
+const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, onValueChange, ...props }, ref) => {
     var _a, _b, _c, _d;
     const [isFocused, setIsFocused] = useState(false);
     const generatedId = React__default.useId();
@@ -30,6 +30,8 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
         : isDisabled
             ? "state-disabled"
             : "state-default";
+    // Pull onChange out of props so the explicit handler below isn't overwritten by the spread
+    const { onChange: propsOnChange, ...restProps } = props;
     // Get theme classes
     const wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
     const inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
@@ -37,7 +39,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                 var _a;
                                 setIsFocused(true);
                                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -45,7 +47,10 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
                                 var _a;
                                 setIsFocused(false);
                                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, ...props }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+                            }, onChange: (e) => {
+                                propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(e);
+                                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
+                            }, ...restProps }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Textarea.displayName = "Textarea";
 

package/dist/components/forms/Textarea/Textarea.types.d.ts

@@ -35,6 +35,8 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     cols?: number;
     /** Render only the textarea element without wrapper, label, or helper text */
     unstyled?: boolean;
+    /** Callback fired with the raw string value on every change — convenience alternative to reading e.target.value from onChange */
+    onValueChange?: (value: string) => void;
 }
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export type TextareaState = 'default' | 'disabled' | 'invalid';

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

@@ -447,7 +447,7 @@ const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, f
                 else if (ref) {
                     ref.current = el;
                 }
-            }, className: cn(mergedTheme.containerStyle, className), children: [label && (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (jsx("p", { className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText }))] }) }));
+            }, className: cn(mergedTheme.containerStyle, className), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })) : (label)), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder, "aria-invalid": finalState === 'invalid' || undefined, "aria-describedby": helperText ? `${inputId}-helper` : undefined }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (typeof helperText === 'string' || validationError ? (jsx("p", { id: `${inputId}-helper`, className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText })) : (helperText))] }) }));
 });
 TimePicker.displayName = "TimePicker";
 

package/dist/components/forms/TimePicker/TimePicker.types.d.ts

@@ -44,9 +44,9 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     /** Whether to show a clear button */
     clearable?: boolean;
     /** Optional label text */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional helper text */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Icon to display at the start (left side) */
     iconStart?: React.ReactNode;
     /** Icon to display at the end (right side) */
@@ -175,6 +175,10 @@ export interface TimePickerTriggerProps {
     id?: string;
     /** Whether the trigger is disabled */
     disabled?: boolean;
+    /** Whether the trigger has an invalid value */
+    "aria-invalid"?: boolean;
+    /** ID of the element that describes the trigger */
+    "aria-describedby"?: string;
     /** Whether the dropdown is open */
     isOpen?: boolean;
     /** Visual state of the trigger */

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

@@ -1,5 +1,5 @@
 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';
@@ -93,35 +93,8 @@ 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

@@ -138,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/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";

package/dist/index.js

@@ -174,7 +174,7 @@ 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 { ColorPickerContext, useColorPicker } from './components/forms/ColorPicker/ColorPickerContext.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';
@@ -196,66 +196,10 @@ 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 { ChartContainer } from './components/charts/ChartContainer.js';
-export { BarChart } from './components/charts/BarChart/BarChart.js';
-export { StackedBarChart } from './components/charts/StackedBarChart/StackedBarChart.js';
-export { STACKED_BAR_CHART_DEFAULTS } from './components/charts/StackedBarChart/StackedBarChart.types.js';
-export { LineChart } from './components/charts/LineChart/LineChart.js';
-export { AreaChart } from './components/charts/AreaChart/AreaChart.js';
-export { DonutChart } from './components/charts/DonutChart/DonutChart.js';
-export { MultiSegmentDonutChart } from './components/charts/DonutChart/MultiSegmentDonutChart.js';
-export { Heatmap } from './components/charts/Heatmap/Heatmap.js';
-import './components/charts/Heatmap/HeatmapCell.js';
-export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData } from './components/charts/Heatmap/utils/heatmapUtils.js';
-export { FunnelChart } from './components/charts/FunnelChart/FunnelChart.js';
-export { ScatterPlot } from './components/charts/ScatterPlot/ScatterPlot.js';
-export { RadarChart } from './components/charts/RadarChart/RadarChart.js';
-export { ComboChart } from './components/charts/ComboChart/ComboChart.js';
-export { ActivityRings } from './components/charts/ActivityRings/ActivityRings.js';
-export { ChartTooltip } from './components/charts/shared/ChartTooltip/ChartTooltip.js';
-export { ChartLegend } from './components/charts/shared/ChartLegend/ChartLegend.js';
-export { ChartLegendContent } from './components/charts/shared/ChartLegend/ChartLegendContent.js';
-export { XAxis } from './components/charts/shared/ChartAxis/XAxis.js';
-export { YAxis } from './components/charts/shared/ChartAxis/YAxis.js';
-export { ChartText } from './components/charts/shared/ChartText/ChartText.js';
-export { ChartMarker } from './components/charts/shared/ChartMarker/ChartMarker.js';
-export { ChartCrosshair } from './components/charts/shared/ChartCrosshair/ChartCrosshair.js';
-export { HorizontalGrid } from './components/charts/shared/ChartGrid/HorizontalGrid.js';
-export { useChartTheme } from './components/charts/hooks/useChartTheme.js';
-export { useTooltipPosition } from './components/charts/hooks/useTooltipPosition.js';
-export { useChartAccessibility } from './components/charts/hooks/useChartAccessibility.js';
-export { useChartValidation } from './components/charts/hooks/useChartValidation.js';
-export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getContrastColor } from './components/charts/utils/color-utils.js';
-export { chartTheme } from './components/charts/theme/chart.theme.js';
-export { SafeMath, calculateSafeScaleRange, generateNiceTicks, niceNum, sanitizeChartData, validateChart, validateChartConfig, validateChartData } from './components/charts/utils/chart-validation.js';
-export { BAR_CHART_DEFAULTS } from './components/charts/BarChart/BarChart.types.js';
-export { LINE_CHART_DEFAULTS } from './components/charts/LineChart/LineChart.types.js';
-export { AREA_CHART_DEFAULTS } from './components/charts/AreaChart/AreaChart.types.js';
-export { ChartErrorBoundary } from './components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.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 { pageLayoutTheme } from './components/layout/PageLayout/PageLayout.theme.js';
-export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor } from './components/effects/CustomCursor/CustomCursor.js';
-export { GlassEffect } from './components/effects/GlassEffect/GlassEffect.js';
-export { Overlay } from './components/effects/Overlay/Overlay.js';
-export { GlassSurface } from './components/effects/GlassSurface/GlassSurface.js';
-export { Animated } from './components/effects/Animated/Animated.js';
-export { ProgressiveBlur } from './components/effects/ProgressiveBlur/ProgressiveBlur.js';
-export { Aurora } from './components/effects/Aurora/Aurora.js';
-export { MagneticElement } from './components/effects/MagneticElement/MagneticElement.js';
-export { MorphingText } from './components/effects/MorphingText/MorphingText.js';
-export { GridPattern } from './components/effects/GridPattern/GridPattern.js';
-export { DotPattern } from './components/effects/DotPattern/DotPattern.js';
-export { NoiseOverlay } from './components/effects/NoiseOverlay/NoiseOverlay.js';
-export { Spotlight } from './components/effects/Spotlight/Spotlight.js';
-export { ParallaxSection } from './components/effects/ParallaxSection/ParallaxSection.js';
-export { ScrollReveal } from './components/effects/ScrollReveal/ScrollReveal.js';
-export { StickyScroll } from './components/effects/StickyScroll/StickyScroll.js';
-export { PageTransition } from './components/effects/PageTransition/PageTransition.js';
-export { InteractiveCharacters } from './components/effects/InteractiveCharacters/InteractiveCharacters.js';
-export { InsetCircleButton } from './components/effects/Neumorphic/InsetCircleButton.js';
-export { InsetPill } from './components/effects/Neumorphic/InsetPill.js';
 export { debounce } from './utils/debounce.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useOverlay } from './hooks/useOverlay.js';

package/dist/shadcn-compat.css

@@ -0,0 +1,80 @@
+/* Shadcn compatibility: alias shadcn variables to Flikkui variables */
+
+:root {
+  /* Base surfaces */
+  --background: var(--color-background);
+  --foreground: var(--color-text-primary);
+  --card: var(--color-background);
+  --card-foreground: var(--color-text-primary);
+  --popover: var(--color-background);
+  --popover-foreground: var(--color-text-primary);
+
+  /* Primary system */
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-text-inverse);
+
+  /* Secondary/muted/accent map to neutrals */
+  --secondary: var(--color-background-secondary);
+  --secondary-foreground: var(--color-text-primary);
+  --muted: var(--color-background-tertiary);
+  --muted-foreground: var(--color-text-muted);
+  --accent: var(--color-background-quaternary);
+  --accent-foreground: var(--color-text-primary);
+
+  /* Destructive maps to danger */
+  --destructive: var(--color-danger-600);
+
+  /* Borders/inputs/ring */
+  --border: var(--color-border);
+  --input: var(--color-border);
+  --ring: var(--color-primary-600);
+
+  /* Typography & radius */
+  --radius: var(--form-rounded);
+
+  /* Charts (approximate) */
+  --chart-1: var(--color-primary-600);
+  --chart-2: var(--color-success-600);
+  --chart-3: var(--color-warning-600);
+  --chart-4: var(--color-danger-600);
+  --chart-5: var(--color-primary-400);
+
+  /* Sidebar */
+  --sidebar: var(--color-background-secondary);
+  --sidebar-foreground: var(--color-text-primary);
+  --sidebar-primary: var(--color-primary);
+  --sidebar-primary-foreground: var(--color-text-inverse);
+  --sidebar-accent: var(--color-background-tertiary);
+  --sidebar-accent-foreground: var(--color-text-primary);
+  --sidebar-border: var(--color-border);
+  --sidebar-ring: var(--color-primary-600);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: var(--color-text-inverse);
+  --card: oklch(0.205 0 0);
+  --card-foreground: var(--color-text-inverse);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: var(--color-text-inverse);
+  --primary: var(--color-primary-400);
+  --primary-foreground: var(--color-text-inverse);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: var(--color-text-inverse);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: var(--color-text-muted);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: var(--color-text-inverse);
+  --destructive: var(--color-danger-500);
+  --border: color-mix(in oklab, var(--color-border) 80%, black);
+  --input: color-mix(in oklab, var(--color-border) 85%, black);
+  --ring: var(--color-primary-500);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: var(--color-text-inverse);
+  --sidebar-primary: var(--color-primary-400);
+  --sidebar-primary-foreground: var(--color-text-inverse);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: var(--color-text-inverse);
+  --sidebar-border: color-mix(in oklab, var(--color-border) 70%, black);
+  --sidebar-ring: var(--color-primary-500);
+}