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

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChart.js';
 
@@ -10,6 +10,18 @@ const GanttSplitter = () => {
     const { theme, tablePanelWidth, setTablePanelWidth } = useGanttContext();
     const startX = useRef(0);
     const startWidth = useRef(0);
+    // Track active pointer listeners so they can be cleaned up on unmount during a drag
+    const activeListenersRef = useRef({ move: null, up: null });
+    // Cleanup on unmount — removes any lingering listeners if component unmounts during a drag
+    useEffect(() => {
+        return () => {
+            const { move, up } = activeListenersRef.current;
+            if (move)
+                document.removeEventListener("pointermove", move);
+            if (up)
+                document.removeEventListener("pointerup", up);
+        };
+    }, []);
     const onPointerDown = useCallback((e) => {
         e.preventDefault();
         startX.current = e.clientX;
@@ -20,9 +32,11 @@ const GanttSplitter = () => {
             setTablePanelWidth(next);
         };
         const onPointerUp = () => {
+            activeListenersRef.current = { move: null, up: null };
             document.removeEventListener("pointermove", onPointerMove);
             document.removeEventListener("pointerup", onPointerUp);
         };
+        activeListenersRef.current = { move: onPointerMove, up: onPointerUp };
         document.addEventListener("pointermove", onPointerMove);
         document.addEventListener("pointerup", onPointerUp);
     }, [tablePanelWidth, setTablePanelWidth]);

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

@@ -38,7 +38,7 @@ const TableContext = createContext({
  */
 function TableComponent(props) {
     var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -148,7 +148,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsx("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] })) }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;

package/dist/components/data-display/Table/Table.types.d.ts

@@ -193,6 +193,8 @@ export interface TableProps<T = unknown> {
         totalItems: number;
     };
     children?: ReactNode;
+    /** Optional accessible caption for the table, rendered as a visually-hidden <caption> element */
+    caption?: string;
 }
 export interface TableHeaderProps {
     children?: ReactNode;

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
-import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
+import { useRef, useState, useCallback } from 'react';
+import { inferFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, getOperatorsForFilterType } from './Table.filterUtils.js';
 import { Button } from '../../core/Button/Button.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
@@ -57,6 +57,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
 }
 function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, className, }) {
     const filterableColumns = columns.filter((col) => col.filterable);
+    const filterIdRef = useRef(0);
     // Internal filter logic state
     const [internalLogic, setInternalLogic] = useState("and");
     const filterLogic = controlledLogic !== null && controlledLogic !== void 0 ? controlledLogic : internalLogic;
@@ -87,7 +88,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         const resolvedType = inferFilterType(defaultColumn, data);
         return [
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 columnId: defaultColumn.id,
                 operator: getDefaultOperator(resolvedType),
                 value: "",
@@ -107,7 +108,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return "text";
         return inferFilterType(column, data);
     };
-    const syncFilters = (filters) => {
+    const syncFilters = useCallback((filters) => {
         const newFilterConfig = filters
             .filter((f) => {
             if (!f.columnId)
@@ -131,8 +132,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             operator: f.operator,
         }));
         onFilterChange(newFilterConfig);
-    };
-    const handleAddFilter = () => {
+    }, [onFilterChange]);
+    const handleAddFilter = useCallback(() => {
         const defaultColumn = filterableColumns[0];
         if (!defaultColumn)
             return;
@@ -141,21 +142,22 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         setActiveFilters((prev) => [
             ...prev,
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 columnId: defaultColumn.id,
                 operator: defaultOp,
                 value: "",
             },
         ]);
-    };
-    const handleRemoveFilter = (filterId) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, onFilterChange]);
+    const handleRemoveFilter = useCallback((filterId) => {
         setActiveFilters((prev) => {
             const updated = prev.filter((f) => f.id !== filterId);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterColumnChange = (filterId, columnId) => {
+    }, [syncFilters]);
+    const handleFilterColumnChange = useCallback((filterId, columnId) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -168,8 +170,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterOperatorChange = (filterId, operator) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, data, syncFilters]);
+    const handleFilterOperatorChange = useCallback((filterId, operator) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -188,18 +191,18 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterValueChange = (filterId, value) => {
+    }, [syncFilters]);
+    const handleFilterValueChange = useCallback((filterId, value) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => f.id === filterId ? { ...f, value } : f);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleClearAll = () => {
+    }, [syncFilters]);
+    const handleClearAll = useCallback(() => {
         setActiveFilters([]);
         onFilterChange([]);
-    };
+    }, [onFilterChange]);
     const appliedFilterCount = activeFilters.filter((f) => {
         if (!f.columnId)
             return false;

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -204,13 +204,9 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     const { cursorPos, isActive, cursorRef } = useCustomCursor();
     const cursorFollowRef = React.useRef(null);
     const shouldReduceMotion = useReducedMotion();
-    // Select random color for user variant if not provided (stable across renders)
-    const resolvedColor = React.useMemo(() => {
-        if (color)
-            return color;
-        const randomIndex = Math.floor(Math.random() * userVariantColors.length);
-        return userVariantColors[randomIndex];
-    }, [color]);
+    // Select random color for user variant if not provided (stable across renders via ref)
+    const randomColorRef = React.useRef(userVariantColors[Math.floor(Math.random() * userVariantColors.length)]);
+    const resolvedColor = color !== null && color !== void 0 ? color : randomColorRef.current;
     React.useImperativeHandle(ref, () => cursorFollowRef.current);
     const x = useMotionValue(0);
     const y = useMotionValue(0);

package/dist/components/effects/Overlay/Overlay.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
+import React__default, { useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useOverlay, lockScroll, unlockScroll } from '../../../hooks/useOverlay.js';
 import { useFocusTrap } from '../../../hooks/useFocusTrap.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 import { overlayTheme, overlayPositionVariants } from './Overlay.theme.js';
 
 /**
@@ -138,14 +139,8 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
             };
         }
     }
-    // Detect dark mode from document (memoized to avoid DOM traversal on every animation frame)
-    const isDarkMode = useMemo(() => {
-        if (!isClient)
-            return false;
-        return (document.documentElement.classList.contains("dark") ||
-            document.body.classList.contains("dark") ||
-            document.querySelector(".dark") !== null);
-    }, [isClient]);
+    // Detect dark mode reactively via a shared MutationObserver-backed hook (SSR-safe)
+    const isDarkMode = useDarkMode();
     // Determine portal target
     const target = portalTarget !== undefined
         ? portalTarget

package/dist/components/effects/PageTransition/PageTransition.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } from './PageTransition.animations.js';
@@ -7,7 +7,14 @@ import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } f
 const PageTransition = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color = "bg-[var(--color-primary)]", className, parallax = true, onStart, onComplete, }) => {
     const [phase, setPhase] = useState("covered");
     const [completedPanels, setCompletedPanels] = useState(0);
+    // Stable refs for callbacks to avoid stale closures without re-running the effect
+    const onStartRef = useRef(onStart);
+    const onCompleteRef = useRef(onComplete);
+    useEffect(() => { onStartRef.current = onStart; }, [onStart]);
+    useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]);
     useEffect(() => {
+        if (typeof window === "undefined" || typeof document === "undefined")
+            return;
         let cancelled = false;
         const loadPromise = new Promise((resolve) => {
             if (document.readyState === "complete") {
@@ -24,8 +31,9 @@ const PageTransition = ({ children, logo, type = "slide", direction = "up", dura
             if (!cancelled) {
                 setPhase("exit");
                 setTimeout(() => {
+                    var _a;
                     if (!cancelled)
-                        onStart === null || onStart === void 0 ? void 0 : onStart();
+                        (_a = onStartRef.current) === null || _a === void 0 ? void 0 : _a.call(onStartRef);
                 }, 250);
             }
         });
@@ -34,10 +42,11 @@ const PageTransition = ({ children, logo, type = "slide", direction = "up", dura
         };
     }, [delay]);
     useEffect(() => {
+        var _a;
         if (type === "split" && completedPanels === 2) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+            (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
         }
-    }, [completedPanels, type, onComplete]);
+    }, [completedPanels, type]);
     if (type === "split") {
         const axis = direction === "up" || direction === "down" ? "h" : "v";
         const splitVars = buildSplitVariants(axis, duration);
@@ -58,13 +67,15 @@ const PageTransition = ({ children, logo, type = "slide", direction = "up", dura
     if (type === "slide" && parallax) {
         const logoVariants = buildLogoParallaxVariants(direction, duration);
         return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                        var _a;
                         if (def === "exit")
-                            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                            (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
                     }, children: logo && (jsx(motion.div, { className: "relative z-10 select-none", variants: logoVariants, initial: "covered", animate: phase, children: logo })) })] }));
     }
     return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                    var _a;
                     if (def === "exit")
-                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                        (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
                 }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
 };
 

package/dist/components/effects/SpotlightBorder/SpotlightBorder.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
 import * as THREE from 'three';
 import { cn } from '../../../utils/cn.js';
 import { variationMap } from './SpotlightBorder.types.js';
@@ -21,12 +22,10 @@ import { fragmentShader, vertexShader } from './SpotlightBorder.shaders.js';
  * ```
  */
 const SpotlightBorder = ({ children, variation = "rounded-rect", rounded, borderWidth = 2, color = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, tiltIntensity = 5, shouldAnimate = true, className, style, ...props }) => {
-    var _a;
     const outerRef = useRef(null);
     const containerRef = useRef(null);
-    // Check for reduced motion preference
-    const prefersReducedMotion = typeof window !== "undefined" &&
-        ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+    // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
+    const prefersReducedMotion = useReducedMotion();
     const isAnimating = shouldAnimate && !prefersReducedMotion;
     // Refs to store THREE.js objects across effects
     const rendererRef = useRef(null);

package/dist/components/forms/Checkbox/Checkbox.js

@@ -22,6 +22,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
     const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
     const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
     // Determine checked state
     const isInGroup = groupContext !== undefined;
     const [internalChecked, setInternalChecked] = useState(false);
@@ -42,6 +43,15 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
+    // Dev-only warning when no accessible name is provided
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+                console.warn('[Checkbox]: No accessible name provided. Add a `label` prop, `aria-label`, or `aria-labelledby`.');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const handleChange = (e) => {
         if (isDisabled)
             return;
@@ -59,7 +69,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": isInvalid || undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -24,12 +24,15 @@ const checkboxTheme = {
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)] " +
+        // Invalid state
+        "data-[state=invalid]:border-[var(--color-danger)] data-[state=invalid]:focus-visible:outline-[var(--color-danger)]",
     // Description text - light and dark
     descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
+        lg: "size-7",
     },
     // Group styles
     groupStyle: "flex flex-col gap-1.5",

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

@@ -2,11 +2,11 @@ import React from 'react';
 /**
  * State variants for the checkbox component
  */
-export type CheckboxState = 'default' | 'disabled';
+export type CheckboxState = 'default' | 'disabled' | 'invalid';
 /**
  * Size variants for the checkbox component
  */
-export type CheckboxSize = 'sm' | 'md';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
 /**
  * Orientation for Checkbox.Group layout
  */
@@ -14,11 +14,9 @@ export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Checkbox component props
  */
-export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id?: string;
-    name?: string;
     value: string;
-    checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean, value: string) => void;
     label?: React.ReactNode;
@@ -40,7 +38,11 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
     orientation?: CheckboxGroupOrientation;
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
+     */
     error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

package/dist/components/forms/Checkbox/CheckboxGroup.js

@@ -5,7 +5,12 @@ import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { CheckboxGroupContext } from './CheckboxContext.js';
 
-const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state: stateProp = "default", orientation = "vertical", label, description, error, errorMessage, required, className, children, ...props }, ref) => {
+    // Prefer errorMessage; fall back to deprecated error prop
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
+    // If error (deprecated) is provided and state not explicitly set to something else,
+    // implicitly treat the group as invalid
+    const state = resolvedError && stateProp === "default" ? "invalid" : stateProp;
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `checkbox-group-${autoId}`;
     const labelId = `${autoId}-label`;
@@ -31,9 +36,9 @@ const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defau
         size,
         state,
     }), [groupName, currentValue, size, state]);
-    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
-                        checkboxTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error })) : (error))] }) }));
+    const labelState = state === "invalid" ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": resolvedError ? true : undefined, "aria-errormessage": resolvedError ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), resolvedError && (typeof resolvedError === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: resolvedError })) : (resolvedError))] }) }));
 });
 CheckboxGroup.displayName = "Checkbox.Group";
 

package/dist/components/forms/ColorPicker/ColorPicker.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import React__default, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { colorPickerTheme } from './ColorPicker.theme.js';
@@ -31,7 +31,10 @@ const DEFAULT_GRADIENT = {
  * ColorPicker Root Component
  * Follows Flikkui compound component pattern (similar to Accordion, Tabs, Popover)
  */
-const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, savedColors: savedColorsProp, onSavedColorsChange, defaultMode = 'solid', mode: modeProp, onModeChange, gradientValue: gradientProp, onGradientChange, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, children, ...props }, ref) => {
+const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, savedColors: savedColorsProp, onSavedColorsChange, defaultMode = 'solid', mode: modeProp, onModeChange, gradientValue: gradientProp, onGradientChange, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, id, children, ...props }, ref) => {
+    const generatedId = React__default.useId();
+    const componentId = id || generatedId;
+    const stopIdRef = useRef(0);
     // Parse initial color value
     const initialColor = useMemo(() => {
         const parsed = parseColor(value || defaultValue);
@@ -71,7 +74,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
     }, [gradient, setGradient]);
     const addGradientStop = useCallback((position) => {
         const newStop = {
-            id: `stop-${Date.now()}`,
+            id: `stop-${++stopIdRef.current}`,
             color: formatHex(color.h, color.s, color.l),
             position: Math.round(position),
         };
@@ -252,7 +255,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         addSavedColor,
         removeSavedColor,
     ]);
-    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
+    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: componentId, required: required, state: state, children: label })) : (label)), children, helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${componentId}-helper`, className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText })) : (helperText))] }) }));
 });
 ColorPickerRoot.displayName = 'ColorPicker';
 /**

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

@@ -83,11 +83,11 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /**
      * Label for the color picker
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Helper text displayed below the picker
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /**
      * Whether the picker is required
      * @default false

package/dist/components/forms/ColorPicker/ColorPickerBody.js

@@ -66,9 +66,11 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
                     damping: 30,
                 }, "data-state": isOpen ? 'open' : 'closed', ...domProps, children: children })) }));
     // Use portal if specified (same as Dropdown)
-    return portal && isClient
-        ? createPortal(content, document.body)
-        : content;
+    if (portal) {
+        const target = isClient ? document.body : null;
+        return target ? createPortal(content, target) : null;
+    }
+    return content;
 };
 ColorPickerBody.displayName = 'ColorPicker.Body';
 

package/dist/components/forms/ColorPicker/ColorPickerEyeDropper.js

@@ -1,19 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { EyeDropperIcon } from '@heroicons/react/20/solid';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
 import { parseColor } from './colorUtils.js';
 
-// Check if browser supports EyeDropper API
-const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
 /**
  * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
  * Uses browser EyeDropper API (if available)
  */
 const ColorPickerEyeDropper = ({ className, ...props }) => {
     const context = useContext(ColorPickerContext);
+    // Check if browser supports EyeDropper API (inside component to avoid SSR module-caching issues)
+    const supportsEyeDropper = useMemo(() => typeof window !== 'undefined' && 'EyeDropper' in window, []);
     if (!context) {
         throw new Error('ColorPickerEyeDropper must be used within a ColorPicker');
     }

package/dist/components/forms/ColorPicker/ColorPickerGradient.js

@@ -113,14 +113,14 @@ const ColorPickerGradient = ({ className, ...props }) => {
         setDragStopId(null);
     }, []);
     useEffect(() => {
-        if (dragStopId) {
-            window.addEventListener('pointermove', handlePointerMove);
-            window.addEventListener('pointerup', handlePointerUp);
-            return () => {
-                window.removeEventListener('pointermove', handlePointerMove);
-                window.removeEventListener('pointerup', handlePointerUp);
-            };
-        }
+        if (!dragStopId)
+            return; // no listeners to add; no cleanup needed
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+        };
     }, [dragStopId, handlePointerMove, handlePointerUp]);
     // --- Selected stop color input editing ---
     const [colorInput, setColorInput] = useState((_c = selectedStop === null || selectedStop === void 0 ? void 0 : selectedStop.color) !== null && _c !== void 0 ? _c : '');

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -20,7 +20,7 @@ const ColorPickerInput = ({ className, ...props }) => {
         if (!isInvalid) {
             setInputValue(getFormattedValue());
         }
-    }, [color, format]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [color, format, getFormattedValue, isInvalid]);
     const handleCopy = async () => {
         try {
             await navigator.clipboard.writeText(getFormattedValue());

package/dist/components/forms/ColorPicker/index.d.ts

@@ -3,7 +3,7 @@
  * Compound component following Flikkui patterns
  */
 export { ColorPicker } from './ColorPicker';
-export { useColorPicker, ColorPickerContext } from './ColorPickerContext';
+export { useColorPicker } from './ColorPickerContext';
 export { ColorPickerTrigger } from './ColorPickerTrigger';
 export { ColorPickerBody } from './ColorPickerBody';
 export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';