flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -1,25 +1,19 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { richTextEditorTheme, colorOptions } from './RichTextEditor.theme.js';
 import { floatingToolbarVariants } from './RichTextEditor.animations.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { Button } from '../../core/Button/Button.js';
+import { ArrowUturnRightIcon, ArrowUturnLeftIcon, Bars3BottomRightIcon, Bars3Icon, Bars3BottomLeftIcon, UnderlineIcon, ItalicIcon, BoldIcon } from '@heroicons/react/24/outline';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { PaintBrushIcon } from '@heroicons/react/24/solid';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowUturnRightIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowUturnLeftIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3BottomRightIcon.js';
-import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
-import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3BottomLeftIcon.js';
-import ForwardRef$5 from '../../../node_modules/@heroicons/react/24/solid/esm/PaintBrushIcon.js';
-import ForwardRef$6 from '../../../node_modules/@heroicons/react/24/outline/esm/UnderlineIcon.js';
-import ForwardRef$7 from '../../../node_modules/@heroicons/react/24/outline/esm/ItalicIcon.js';
-import ForwardRef$8 from '../../../node_modules/@heroicons/react/24/outline/esm/BoldIcon.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var FONT_SIZE_OPTIONS = [
     { key: "xs", label: "XS", value: "0.75rem", px: 12 },
@@ -539,13 +533,13 @@ var RichTextEditor = React__default.forwardRef(function (_a, ref) {
         switch (tool) {
             case "bold":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$8, { className: "w-4 h-4" })));
+                    React__default.createElement(BoldIcon, { className: "w-4 h-4" })));
             case "italic":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$7, { className: "w-4 h-4" })));
+                    React__default.createElement(ItalicIcon, { className: "w-4 h-4" })));
             case "underline":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$6, { className: "w-4 h-4" })));
+                    React__default.createElement(UnderlineIcon, { className: "w-4 h-4" })));
             case "fontSize": {
                 var currentOption = getFontSizeOption(formattingState.fontSize);
                 var dropdownClassName = themeStyles.dropdownStyle;
@@ -635,7 +629,7 @@ var RichTextEditor = React__default.forwardRef(function (_a, ref) {
                                 setShowFontSizePicker(false);
                                 setShowColorPicker(function (previous) { return !previous; });
                             }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker },
-                            React__default.createElement(ForwardRef$5, { className: "w-4 h-4" })),
+                            React__default.createElement(PaintBrushIcon, { className: "w-4 h-4" })),
                         isFloatingToolbar ? null : renderedColorDropdown,
                         isFloatingToolbar ? renderedColorDropdown : null));
                 }
@@ -645,27 +639,27 @@ var RichTextEditor = React__default.forwardRef(function (_a, ref) {
                         event.stopPropagation();
                         handleAlign("left");
                     }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$4, { className: "w-4 h-4" })));
+                    React__default.createElement(Bars3BottomLeftIcon, { className: "w-4 h-4" })));
             case "alignCenter":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: function (event) {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("center");
                     }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$3, { className: "w-4 h-4" })));
+                    React__default.createElement(Bars3Icon, { className: "w-4 h-4" })));
             case "alignRight":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: function (event) {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("right");
                     }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false" },
-                    React__default.createElement(ForwardRef$2, { className: "w-4 h-4" })));
+                    React__default.createElement(Bars3BottomRightIcon, { className: "w-4 h-4" })));
             case "undo":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo" },
-                    React__default.createElement(ForwardRef$1, { className: "w-4 h-4" })));
+                    React__default.createElement(ArrowUturnLeftIcon, { className: "w-4 h-4" })));
             case "redo":
                 return (React__default.createElement(Button, { key: index, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo" },
-                    React__default.createElement(ForwardRef, { className: "w-4 h-4" })));
+                    React__default.createElement(ArrowUturnRightIcon, { className: "w-4 h-4" })));
             case "separator":
                 return React__default.createElement("div", { key: index, className: themeStyles.separatorStyle });
             default:

package/dist/components/forms/Select/Select.js

@@ -1,5 +1,6 @@
-import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { selectTheme } from './Select.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -10,10 +11,40 @@ import { ChevronUpDownIcon } from '../../../icons/core/ChevronUpDown.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/MagnifyingGlassIcon.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
+/**
+ * Hook to detect dark mode state from document
+ */
+var useDarkMode = function () {
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined")
+            return;
+        var checkDarkMode = function () {
+            var hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        var observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return isDark;
+};
 var SelectContext = createContext(undefined);
 var useSelectContext = function () {
     var context = useContext(SelectContext);
@@ -42,11 +73,11 @@ var SelectButton = function (_a) {
     var iconEndPadding = iconEnd ? ((_g = theme.iconPadding) === null || _g === void 0 ? void 0 : _g.right) || "" : "";
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     var activeFocusState = isOpen
-        ? focusStateStyle || "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        ? focusStateStyle ||
+            "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (React__default.createElement("div", { className: cn(buttonWrapperStyle) },
-        React__default.createElement("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className // User overrides take highest precedence
-            ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" },
+        React__default.createElement("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" },
             iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart),
             children,
             iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd))));
@@ -58,6 +89,8 @@ var SelectOptions = function (_a) {
     var _b;
     var isOpen = _a.isOpen, _c = _a.maxHeight, maxHeight = _c === void 0 ? "15rem" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, onClose = _a.onClose, children = _a.children, _e = _a.portal, portal = _e === void 0 ? true : _e, _f = _a.placement, placement = _f === void 0 ? "bottom-start" : _f, _g = _a.offset, offset = _g === void 0 ? 4 : _g;
     var _h = useSelectContext(), optionsRef = _h.optionsRef, buttonRef = _h.buttonRef, highlightedIndex = _h.highlightedIndex, setHighlightedIndex = _h.setHighlightedIndex; _h.options; var filteredOptions = _h.filteredOptions, searchable = _h.searchable, searchValue = _h.searchValue, setSearchValue = _h.setSearchValue, enableTypeahead = _h.enableTypeahead, typeaheadValue = _h.typeaheadValue, setTypeaheadValue = _h.setTypeaheadValue, typeaheadTimeoutRef = _h.typeaheadTimeoutRef, theme = _h.theme;
+    // Detect dark mode for portal content
+    var isDarkMode = useDarkMode();
     var searchInputRef = useRef(null);
     // Use enhanced dropdown positioning hook with direction-aware animations
     // Pass trigger width so dropdown matches trigger size
@@ -77,10 +110,15 @@ var SelectOptions = function (_a) {
     var maxHeightValue = typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight;
     // Combine refs for portal and legacy usage
     var combinedRef = React__default.useCallback(function (el) {
-        if (optionsRef && typeof optionsRef === 'object' && 'current' in optionsRef) {
-            optionsRef.current = el;
+        if (optionsRef &&
+            typeof optionsRef === "object" &&
+            "current" in optionsRef) {
+            optionsRef.current =
+                el;
         }
-        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
             contentRef.current = el;
         }
     }, [optionsRef, contentRef]);
@@ -89,7 +127,9 @@ var SelectOptions = function (_a) {
         if (!isOpen)
             return;
         var handleClickOutside = function (event) {
-            var currentContentRef = portal ? contentRef.current : optionsRef.current;
+            var currentContentRef = portal
+                ? contentRef.current
+                : optionsRef.current;
             if (currentContentRef &&
                 !currentContentRef.contains(event.target) &&
                 buttonRef.current &&
@@ -133,7 +173,7 @@ var SelectOptions = function (_a) {
                             var _a;
                             var optionElement = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-option-index=\"".concat(matchingIndex_1, "\"]"));
                             if (optionElement) {
-                                optionElement.scrollIntoView({ block: 'nearest' });
+                                optionElement.scrollIntoView({ block: "nearest" });
                             }
                         }, 0);
                     }
@@ -185,7 +225,18 @@ var SelectOptions = function (_a) {
         return function () {
             document.removeEventListener("keydown", handleKeyDown);
         };
-    }, [isOpen, onClose, highlightedIndex, filteredOptions, setHighlightedIndex, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, optionsRef]);
+    }, [
+        isOpen,
+        onClose,
+        highlightedIndex,
+        filteredOptions,
+        setHighlightedIndex,
+        enableTypeahead,
+        typeaheadValue,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+        optionsRef,
+    ]);
     // Reset search and highlighted index when closing
     useEffect(function () {
         if (!isOpen) {
@@ -198,7 +249,13 @@ var SelectOptions = function (_a) {
                 typeaheadTimeoutRef.current = null;
             }
         }
-    }, [isOpen, setSearchValue, setHighlightedIndex, setTypeaheadValue, typeaheadTimeoutRef]);
+    }, [
+        isOpen,
+        setSearchValue,
+        setHighlightedIndex,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+    ]);
     // Autofocus search input on open for searchable selects
     useEffect(function () {
         if (isOpen && searchable && searchInputRef.current) {
@@ -221,27 +278,30 @@ var SelectOptions = function (_a) {
         setSearchValue(e.target.value);
         setHighlightedIndex(-1); // Reset highlighted index when search changes
     };
-    var optionsContent = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(optionsContainerStyle, className), style: __assign(__assign(__assign({}, cssVariables), { overscrollBehavior: "contain" }), (portal ? {
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-            width: "".concat(position.width, "px"),
-            maxHeight: maxHeightValue,
-        } : {
-            maxHeight: searchable ? "none" : maxHeightValue,
-        })), role: "listbox", tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit" },
+    var optionsContent = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(optionsContainerStyle, className), style: __assign(__assign(__assign({}, cssVariables), { overscrollBehavior: "contain" }), (portal
+            ? {
+                top: "".concat(position.top, "px"),
+                left: "".concat(position.left, "px"),
+                width: "".concat(position.width, "px"),
+                maxHeight: maxHeightValue,
+            }
+            : {
+                maxHeight: searchable ? "none" : maxHeightValue,
+            })), role: "listbox", tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit" },
         searchable && (React__default.createElement("div", { className: "sticky top-0 py-1 bg-white z-[10000] border-b border-[var(--color-border)] ".concat(searchInputStyle), style: {
-                '--form-rounded': '0',
+                "--form-rounded": "0",
             } },
-            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-white border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: React__default.createElement(ForwardRef, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
+            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-white border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: React__default.createElement(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
                     border: "none",
                     outline: "none",
-                    boxShadow: "none"
+                    boxShadow: "none",
                 } }))),
         children))));
-    // Use portal if enabled and client-side
-    return portal && typeof document !== 'undefined'
-        ? createPortal(optionsContent, document.body)
-        : optionsContent;
+    // Use portal if enabled and client-side - wrap with dark class for dark mode support
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, optionsContent), document.body);
+    }
+    return optionsContent;
 };
 /**
  * Select Option Component
@@ -262,14 +322,19 @@ var SelectOption = function (_a) {
         if (disabled)
             return;
         selectOption(value, isCreateOption);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+        if (onSelect) {
+            onSelect(value);
+        }
     };
     // Apply the hover style directly when keyboard navigating
-    var keyboardHighlightStyle = isHighlighted ? "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50" : "";
+    var keyboardHighlightStyle = isHighlighted
+        ? "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50"
+        : "";
     // Style create option differently
-    var createOptionStyle = isCreateOption ? "font-medium text-[var(--color-primary)]" : "";
-    return (React__default.createElement("div", { className: cn(optionStyle, isSelected && selectedOptionStyle, disabled && disabledOptionStyle, keyboardHighlightStyle, createOptionStyle, className // User overrides take highest precedence
-        ), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-option-index": optionIndex, onMouseEnter: function () { return !disabled && setHighlightedIndex(optionIndex); }, onClick: handleClick }, children));
+    var createOptionStyle = isCreateOption
+        ? "font-medium text-[var(--color-primary)]"
+        : "";
+    return (React__default.createElement("div", { className: cn(optionStyle, isSelected && selectedOptionStyle, disabled && disabledOptionStyle, keyboardHighlightStyle, createOptionStyle, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-option-index": optionIndex, onMouseEnter: function () { return !disabled && setHighlightedIndex(optionIndex); }, onClick: handleClick }, children));
 };
 /**
  * Main Select Component
@@ -348,7 +413,7 @@ var Select = function (_a) {
     // Container style
     var containerStyle = theme.containerStyle || "";
     // Default chevron icon if no iconEnd provided
-    var defaultChevronIcon = (React__default.createElement(ChevronUpDownIcon, { size: 16, className: "" }));
+    var defaultChevronIcon = React__default.createElement(ChevronUpDownIcon, { size: 16, className: "" });
     // Generate a unique ID if not provided
     var selectId = id || "select-".concat(Math.random().toString(36).substring(2, 9));
     return (React__default.createElement(SelectContext.Provider, { value: {
@@ -382,7 +447,9 @@ var Select = function (_a) {
         React__default.createElement("div", { className: cn("relative", containerStyle, wrapperClassName) },
             label && (React__default.createElement(FormLabel, { htmlFor: selectId, required: required }, label)),
             React__default.createElement(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className },
-                React__default.createElement("span", { className: "block truncate" }, computedDisplayValue)),
+                React__default.createElement("span", { className: cn("block truncate", selectedOption
+                        ? theme.valueTextStyle
+                        : theme.placeholderTextStyle) }, computedDisplayValue)),
             React__default.createElement(SelectOptions, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, portal: portal, placement: placement, offset: offset }, children ||
                 filteredOptions.map(function (option) { return (React__default.createElement(SelectOption, { key: option.id, value: option.value, isSelected: option.value === selectedValue, disabled: option.disabled || false },
                     React__default.createElement("span", { className: "block truncate" }, option.label))); })),

package/dist/components/forms/Select/Select.theme.d.ts

@@ -1,4 +1,4 @@
-import { SelectThemeOverrides } from './Select.types';
+import { SelectThemeOverrides } from "./Select.types";
 /**
  * Default theme for the Select component
  * Extends the common forms base theme

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

@@ -11,8 +11,12 @@ var selectTheme = {
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " items-center justify-between",
     // Button wrapper style
     buttonWrapperStyle: "relative w-full",
-    // Button style
-    buttonStyle: "w-full cursor-pointer bg-white",
+    // Button style - bg-white for light mode only; dark mode bg comes from baseStyle (inputGroupBaseStyle)
+    buttonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Placeholder text style - matches Input placeholder styling
+    placeholderTextStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    // Selected value text style
+    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
     // Size variants - composed from atomic tokens
     sizes: {
         sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
@@ -27,28 +31,34 @@ var selectTheme = {
     hoverStates: formsBaseTheme.hoverStates,
     // Options container style - Uses position: fixed for proper scroll behavior with standardized z-index
     // Width is controlled by trigger size via estimatedWidth parameter
-    optionsContainerStyle: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain rounded-[var(--form-rounded)] bg-white/90 backdrop-blur-md py-0 text-sm shadow-real-lg ring-1 ring-slate-200 focus:outline-none",
+    optionsContainerStyle: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
+        "rounded-[var(--form-rounded)] bg-[var(--color-background)]/90 backdrop-blur-md py-0 text-sm " +
+        "shadow-real-lg ring-1 ring-slate-200 focus:outline-none " +
+        "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
     // Search input style
     searchInputStyle: "group",
     // Individual option style
-    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-neutral-900)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50",
+    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
+        "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
+        "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)] dark:hover:bg-[var(--color-primary-900)]/50",
     // Selected option style
-    selectedOptionStyle: "font-medium text-[var(--color-primary)]",
+    selectedOptionStyle: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
     // Disabled option style
     disabledOptionStyle: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-text-primary)]",
     // Helper text style - inherited from common form theme
     helperTextStyle: formsBaseTheme.helperText,
     // Helper text state variants
     helperTextStates: {
-        default: "text-[var(--color-text-muted)]",
-        disabled: "text-[var(--color-text-disabled)]",
+        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
+        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
     },
     // Left icon style - inherited from common form theme
     iconStartStyle: formsBaseTheme.iconStyles.left,
     // Right icon style - inherited from common form theme
     iconEndStyle: formsBaseTheme.iconStyles.right,
     // Check icon style for selected options
-    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)]",
+    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] " +
+        "dark:text-[var(--color-primary-400)]",
     // Icon padding styles - inherited from common form theme
     iconPadding: formsBaseTheme.iconStyles.padding,
 };

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { SelectPlacement } from '../../../hooks/useSelectPortal';
+import React from "react";
+import type { SelectPlacement } from "../../../hooks/useSelectPortal";
 /**
  * Select value option type
  * @template T The type of the option value
@@ -146,8 +146,8 @@ export interface SelectOptionProps<T = any> extends SelectBaseProps {
     /** Children to render inside the option */
     children?: React.ReactNode;
 }
-export type SelectSize = 'sm' | 'md' | 'lg';
-export type SelectState = 'default' | 'disabled';
+export type SelectSize = "sm" | "md" | "lg";
+export type SelectState = "default" | "disabled";
 /**
  * Theme overrides for the Select component
  */
@@ -168,6 +168,10 @@ export interface SelectThemeOverrides {
     buttonWrapperStyle?: string;
     /** Style for the select button */
     buttonStyle?: string;
+    /** Style for the placeholder text (when no value selected) */
+    placeholderTextStyle?: string;
+    /** Style for the selected value text */
+    valueTextStyle?: string;
     /** Style for the options container */
     optionsContainerStyle?: string;
     /** Style for the search input container */

package/dist/components/forms/Signature/Signature.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { signatureTheme } from './Signature.theme.js';

package/dist/components/forms/Slider/Slider.js

@@ -1,4 +1,4 @@
-import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __spreadArray, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useCallback } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { sliderTheme } from './Slider.theme.js';
@@ -75,7 +75,15 @@ var Slider = React__default.forwardRef(function (_a, ref) {
         };
         document.addEventListener("pointermove", handleMove);
         document.addEventListener("pointerup", handleEnd);
-    }, [isDisabled, range, values, getValueFromPosition, handleValueChange, onChangeCommitted, currentValue]);
+    }, [
+        isDisabled,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+        currentValue,
+    ]);
     // Handle track click
     var handleTrackClick = useCallback(function (e) {
         if (isDisabled || dragIndex !== null)
@@ -101,7 +109,15 @@ var Slider = React__default.forwardRef(function (_a, ref) {
             handleValueChange(newValue);
             onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValue);
         }
-    }, [isDisabled, dragIndex, range, values, getValueFromPosition, handleValueChange, onChangeCommitted]);
+    }, [
+        isDisabled,
+        dragIndex,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+    ]);
     // Handle keyboard navigation
     var handleKeyDown = useCallback(function (e, thumbIndex) {
         if (isDisabled)
@@ -200,29 +216,31 @@ var Slider = React__default.forwardRef(function (_a, ref) {
     return (React__default.createElement("div", __assign({ className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref }, props),
         label && (React__default.createElement(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName) }, label)),
         React__default.createElement("div", { className: "flex items-center gap-4" },
-            iconStart && React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconStart),
-            showMinMax && React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, min),
+            iconStart && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconStart)),
+            showMinMax && (React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, min)),
             React__default.createElement("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal" },
                 React__default.createElement("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation" },
                     React__default.createElement("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }),
                     showTicks &&
                         ticks.map(function (tick) {
                             var percentage = getPercentage(tick);
-                            return React__default.createElement("div", { key: tick, className: mergedTheme.tickStyle, style: { left: "".concat(percentage, "%") } });
+                            return (React__default.createElement("div", { key: tick, className: mergedTheme.tickStyle, style: { left: "".concat(percentage, "%") } }));
                         })),
                 values.map(function (val, index) {
                     var percentage = getPercentage(val);
-                    return (React__default.createElement("div", { key: index, className: cn(mergedTheme.thumbStyle), style: {
+                    return (React__default.createElement("div", { key: index, className: cn(mergedTheme.thumbStyle, "outline-[1px] outline-white/50 ring-0 shadow-none p-0 overflow-visible"), style: {
                             left: "".concat(percentage, "%"),
                             transform: "translate(-50%, -50%)",
                             position: "absolute",
                             top: "50%",
                         }, onPointerDown: function (e) { return handlePointerDown(e, index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? "Slider thumb ".concat(index + 1) : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }));
                 }),
-                name && (React__default.createElement("input", { type: "hidden", name: name, value: Array.isArray(currentValue) ? currentValue.join(",") : currentValue }))),
-            showMinMax && React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, max),
-            showValue && React__default.createElement("div", { className: cn(mergedTheme.valueDisplayStyle) }, formatValueDisplay()),
-            iconEnd && React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconEnd)),
+                name && (React__default.createElement("input", { type: "hidden", name: name, value: Array.isArray(currentValue)
+                        ? currentValue.join(",")
+                        : currentValue }))),
+            showMinMax && (React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, max)),
+            showValue && (React__default.createElement("div", { className: cn(mergedTheme.valueDisplayStyle) }, formatValueDisplay())),
+            iconEnd && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconEnd))),
         helperText && (React__default.createElement("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName) }, helperText))));
 });
 Slider.displayName = "Slider";

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

@@ -14,7 +14,7 @@ var sliderTheme = {
     // Range (filled portion) - rounded to match track clipping
     rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
     // Thumb (draggable handle)
-    thumbStyle: "block size-4 rounded-full bg-white border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)]",
+    thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
     // Value display
     valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels

package/dist/components/forms/StepperForm/StepperForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StepperFormRootProps, StepperFormStepProps, StepperFormIndicatorProps, StepperFormNavigationProps } from "./StepperForm.types";
+export declare const StepperForm: (<TData extends Record<string, any>>({ config, children, initialData, onTransition, onComplete, className, }: StepperFormRootProps<TData>) => React.JSX.Element) & {
+    Step: React.FC<StepperFormStepProps>;
+    Indicator: React.FC<StepperFormIndicatorProps>;
+    Navigation: React.FC<StepperFormNavigationProps>;
+};