flikkui 0.1.0-beta.11

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

@@ -0,0 +1,393 @@
+import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { selectTheme } from './Select.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { createDropdownAnimations } from './Select.animations.js';
+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';
+
+var SelectContext = createContext(undefined);
+var useSelectContext = function () {
+    var context = useContext(SelectContext);
+    if (!context) {
+        throw new Error("Select components must be used within a SelectContainer");
+    }
+    return context;
+};
+/**
+ * Select Button Component
+ */
+var SelectButton = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var id = _a.id, disabled = _a.disabled, isOpen = _a.isOpen, _h = _a.state, state = _h === void 0 ? "default" : _h, _j = _a.size, size = _j === void 0 ? "md" : _j, iconStart = _a.iconStart, iconEnd = _a.iconEnd, _k = _a.className, className = _k === void 0 ? "" : _k, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children;
+    var _l = useSelectContext(), theme = _l.theme, buttonRef = _l.buttonRef;
+    var baseStyle = theme.baseStyle || "";
+    var sizeStyle = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
+    var stateStyle = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    var hoverStateStyle = ((_d = theme.hoverStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    var focusStateStyle = ((_e = theme.focusStates) === null || _e === void 0 ? void 0 : _e[state]) || "";
+    var buttonWrapperStyle = theme.buttonWrapperStyle || "";
+    var buttonStyle = theme.buttonStyle || "";
+    var iconStartStyle = theme.iconStartStyle || "";
+    var iconEndStyle = theme.iconEndStyle || "";
+    var iconStartPadding = iconStart ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.left) || "" : "";
+    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"
+        : "";
+    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" },
+            iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart),
+            children,
+            iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd))));
+};
+/**
+ * Select Options Component
+ */
+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;
+    var searchInputRef = useRef(null);
+    // Use enhanced dropdown positioning hook with direction-aware animations
+    // Pass trigger width so dropdown matches trigger size
+    var triggerWidth = ((_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
+    var _j = useSelectPortal({
+        triggerRef: buttonRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset,
+        estimatedWidth: triggerWidth,
+    }), position = _j.position, cssVariables = _j.cssVariables, contentRef = _j.contentRef, isFlipped = _j.isFlipped;
+    // Create direction-aware animations based on actual placement
+    var animations = createDropdownAnimations(isFlipped);
+    var optionsContainerStyle = theme.optionsContainerStyle || "";
+    var searchInputStyle = theme.searchInputStyle || "";
+    // Convert maxHeight to a valid CSS value
+    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 (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+            contentRef.current = el;
+        }
+    }, [optionsRef, contentRef]);
+    // Handle click outside to close options
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleClickOutside = function (event) {
+            var currentContentRef = portal ? contentRef.current : optionsRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, optionsRef, buttonRef, contentRef, portal]);
+    // Handle keyboard navigation
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleKeyDown = function (event) {
+            // Handle typeahead if enabled and not in search input
+            if (enableTypeahead && isValidTypeaheadChar(event.key)) {
+                // Only do typeahead when not typing in search input
+                if (!(event.target instanceof HTMLInputElement)) {
+                    event.preventDefault();
+                    // Clear existing timeout
+                    if (typeaheadTimeoutRef.current) {
+                        clearTimeout(typeaheadTimeoutRef.current);
+                    }
+                    // Build search string
+                    var newTypeaheadValue = typeaheadValue + event.key.toLowerCase();
+                    setTypeaheadValue(newTypeaheadValue);
+                    // Find matching option
+                    var matchingIndex_1 = findNextMatchingOption({
+                        options: filteredOptions,
+                        searchChar: event.key.toLowerCase(),
+                        currentIndex: highlightedIndex,
+                        previousSearch: typeaheadValue,
+                    });
+                    if (matchingIndex_1 >= 0) {
+                        setHighlightedIndex(matchingIndex_1);
+                        // Scroll to highlighted option
+                        setTimeout(function () {
+                            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' });
+                            }
+                        }, 0);
+                    }
+                    // Set timeout to reset typeahead
+                    typeaheadTimeoutRef.current = setTimeout(function () {
+                        setTypeaheadValue("");
+                    }, TYPEAHEAD_TIMEOUT_MS);
+                    return;
+                }
+            }
+            // Handle navigation keys
+            if (!["ArrowUp", "ArrowDown", "Enter", "Escape", "Tab"].includes(event.key))
+                return;
+            if (event.target instanceof HTMLInputElement) {
+                // Don't navigate with arrow keys when typing in search input
+                if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+                    return;
+                }
+            }
+            event.preventDefault();
+            if (event.key === "Escape" || event.key === "Tab") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                setHighlightedIndex(function (prev) {
+                    return prev <= 0 ? filteredOptions.length - 1 : prev - 1;
+                });
+            }
+            else if (event.key === "ArrowDown") {
+                setHighlightedIndex(function (prev) {
+                    return prev >= filteredOptions.length - 1 ? 0 : prev + 1;
+                });
+            }
+            else if (event.key === "Enter") {
+                if (highlightedIndex >= 0 &&
+                    highlightedIndex < filteredOptions.length) {
+                    var highlightedOption = filteredOptions[highlightedIndex];
+                    if (!highlightedOption.disabled) {
+                        var value = highlightedOption.value;
+                        var context = useSelectContext();
+                        context.selectOption(value);
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                    }
+                }
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function () {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, onClose, highlightedIndex, filteredOptions, setHighlightedIndex, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, optionsRef]);
+    // Reset search and highlighted index when closing
+    useEffect(function () {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(-1);
+            setTypeaheadValue("");
+            // Clear any pending typeahead timeout
+            if (typeaheadTimeoutRef.current) {
+                clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        }
+    }, [isOpen, setSearchValue, setHighlightedIndex, setTypeaheadValue, typeaheadTimeoutRef]);
+    // Autofocus search input on open for searchable selects
+    useEffect(function () {
+        if (isOpen && searchable && searchInputRef.current) {
+            searchInputRef.current.focus({ preventScroll: true });
+            searchInputRef.current.select();
+        }
+    }, [isOpen, searchable]);
+    // Add effect to measure content after render for improved positioning
+    useEffect(function () {
+        if (isOpen && contentRef.current) {
+            // Trigger recalculation after content renders
+            var timer_1 = setTimeout(function () {
+                // Hook will remeasure automatically due to contentRef dependency
+            }, 0);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [isOpen, children, filteredOptions.length]);
+    // Handle search input change
+    var handleSearchChange = function (e) {
+        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" },
+        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',
+            } },
+            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: {
+                    border: "none",
+                    outline: "none",
+                    boxShadow: "none"
+                } }))),
+        children))));
+    // Use portal if enabled and client-side
+    return portal && typeof document !== 'undefined'
+        ? createPortal(optionsContent, document.body)
+        : optionsContent;
+};
+/**
+ * Select Option Component
+ */
+var SelectOption = function (_a) {
+    var _b;
+    var value = _a.value, isSelected = _a.isSelected, disabled = _a.disabled, _c = _a.className, className = _c === void 0 ? "" : _c, onSelect = _a.onSelect, children = _a.children;
+    var _d = useSelectContext(), highlightedIndex = _d.highlightedIndex, setHighlightedIndex = _d.setHighlightedIndex; _d.options; var filteredOptions = _d.filteredOptions, theme = _d.theme, selectOption = _d.selectOption;
+    var optionStyle = theme.optionStyle || "";
+    var selectedOptionStyle = theme.selectedOptionStyle || "";
+    var disabledOptionStyle = theme.disabledOptionStyle || "";
+    // Find index of this option in filteredOptions (not options, to support create option)
+    var optionIndex = filteredOptions.findIndex(function (option) { return option.value === value; });
+    var isHighlighted = optionIndex === highlightedIndex;
+    // Check if this is the create option
+    var isCreateOption = ((_b = filteredOptions[optionIndex]) === null || _b === void 0 ? void 0 : _b.id) === "__create__";
+    var handleClick = function () {
+        if (disabled)
+            return;
+        selectOption(value, isCreateOption);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+    };
+    // Apply the hover style directly when keyboard navigating
+    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));
+};
+/**
+ * Main Select Component
+ */
+var Select = function (_a) {
+    var _b;
+    var id = _a.id, name = _a.name, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, value = _a.value, displayValue = _a.displayValue, _e = _a.placeholder, placeholder = _e === void 0 ? "Select an option" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, _h = _a.options, options = _h === void 0 ? [] : _h, label = _a.label, helperText = _a.helperText, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, iconStart = _a.iconStart, iconEnd = _a.iconEnd, themeOverrides = _a.theme, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.wrapperClassName, wrapperClassName = _k === void 0 ? "" : _k, _l = _a.searchable, searchable = _l === void 0 ? false : _l; _a.searchPlaceholder; var _o = _a.portal, portal = _o === void 0 ? true : _o, _p = _a.placement, placement = _p === void 0 ? "bottom-start" : _p, _q = _a.offset, offset = _q === void 0 ? 8 : _q, _r = _a.enableTypeahead, enableTypeahead = _r === void 0 ? true : _r, _s = _a.creatable, creatable = _s === void 0 ? false : _s, onCreateOption = _a.onCreateOption, createLabel = _a.createLabel, children = _a.children;
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, selectTheme), (themeOverrides || {}));
+    // State
+    var _t = useState(false), isOpen = _t[0], setIsOpen = _t[1];
+    var _u = useState(value), selectedValue = _u[0], setSelectedValue = _u[1];
+    var _v = useState(-1), highlightedIndex = _v[0], setHighlightedIndex = _v[1];
+    var _w = useState(""), searchValue = _w[0], setSearchValue = _w[1];
+    // Typeahead state
+    var _x = useState(""), typeaheadValue = _x[0], setTypeaheadValue = _x[1];
+    var typeaheadTimeoutRef = useRef(null);
+    // Refs
+    var buttonRef = useRef(null);
+    var optionsRef = useRef(null);
+    // Update internal state when prop value changes
+    useEffect(function () {
+        setSelectedValue(value);
+    }, [value]);
+    // Get display value for the selected option
+    var getOptionByValue = function (searchValue) {
+        return options.find(function (option) { return option.value === searchValue; });
+    };
+    // Filter options based on search query
+    var baseFilteredOptions = searchValue
+        ? options.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        })
+        : options;
+    // Check if we should show the create option
+    var shouldShowCreateOption = creatable &&
+        searchable &&
+        searchValue.trim() !== "" &&
+        !baseFilteredOptions.some(function (option) { return option.label.toLowerCase() === searchValue.toLowerCase(); });
+    // Add create option if needed
+    var filteredOptions = shouldShowCreateOption
+        ? __spreadArray([
+            {
+                id: "__create__",
+                label: typeof createLabel === "function"
+                    ? createLabel(searchValue)
+                    : createLabel || "Create \"".concat(searchValue, "\""),
+                value: searchValue,
+            }
+        ], baseFilteredOptions, true) : baseFilteredOptions;
+    var selectedOption = getOptionByValue(selectedValue);
+    var computedDisplayValue = displayValue || (selectedOption ? selectedOption.label : placeholder);
+    // Function to select an option
+    var selectOption = function (newValue, isCreateAction) {
+        if (isCreateAction === void 0) { isCreateAction = false; }
+        if (isCreateAction && onCreateOption) {
+            // Call onCreateOption callback if provided
+            onCreateOption(String(newValue));
+        }
+        if (newValue !== selectedValue) {
+            setSelectedValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        setIsOpen(false);
+        setSearchValue(""); // Clear search value after selection
+    };
+    // Button click handler
+    var handleButtonClick = function () {
+        if (!disabled) {
+            setIsOpen(function (prev) { return !prev; });
+        }
+    };
+    // Helper text state style
+    var helperTextStateStyle = ((_b = theme.helperTextStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    var helperTextStyle = theme.helperTextStyle || "";
+    // Container style
+    var containerStyle = theme.containerStyle || "";
+    // Default chevron icon if no iconEnd provided
+    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: {
+            isOpen: isOpen,
+            setIsOpen: setIsOpen,
+            selectedValue: selectedValue,
+            setSelectedValue: setSelectedValue,
+            highlightedIndex: highlightedIndex,
+            setHighlightedIndex: setHighlightedIndex,
+            options: options,
+            filteredOptions: filteredOptions,
+            searchValue: searchValue,
+            setSearchValue: setSearchValue,
+            getOptionByValue: getOptionByValue,
+            selectOption: selectOption,
+            size: size,
+            state: state,
+            theme: theme,
+            searchable: searchable,
+            enableTypeahead: enableTypeahead,
+            typeaheadValue: typeaheadValue,
+            setTypeaheadValue: setTypeaheadValue,
+            typeaheadTimeoutRef: typeaheadTimeoutRef,
+            buttonRef: buttonRef,
+            optionsRef: optionsRef,
+            creatable: creatable,
+            createLabel: createLabel,
+            onCreateOption: onCreateOption,
+            hasCreateOption: shouldShowCreateOption,
+        } },
+        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(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))); })),
+            helperText && (React__default.createElement("p", { className: cn(helperTextStyle, helperTextStateStyle) }, helperText)),
+            name && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" })))));
+};
+
+export { Select, SelectButton, SelectOption, SelectOptions };

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

@@ -0,0 +1,6 @@
+import { SelectThemeOverrides } from './Select.types';
+/**
+ * Default theme for the Select component
+ * Extends the common forms base theme
+ */
+export declare const selectTheme: SelectThemeOverrides;

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

@@ -0,0 +1,56 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Select component
+ * Extends the common forms base theme
+ */
+var selectTheme = {
+    // Container style for the entire select component
+    containerStyle: formsBaseTheme.wrapperStyle,
+    // Base styles for the button element - extends the common input group style
+    baseStyle: formsBaseTheme.inputGroupBaseStyle + " items-center justify-between",
+    // Button wrapper style
+    buttonWrapperStyle: "relative w-full",
+    // Button style
+    buttonStyle: "w-full cursor-pointer bg-white",
+    // Size variants - composed from atomic tokens
+    sizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
+        md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.height),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " ").concat(formsBaseTheme.sizes.lg.padding, " ").concat(formsBaseTheme.sizes.lg.height),
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Focus state variants - inherited from common form theme
+    focusStates: formsBaseTheme.focusStates,
+    // Hover state variants - inherited from common form theme
+    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",
+    // 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",
+    // Selected option style
+    selectedOptionStyle: "font-medium text-[var(--color-primary)]",
+    // 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)]",
+    },
+    // 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)]",
+    // Icon padding styles - inherited from common form theme
+    iconPadding: formsBaseTheme.iconStyles.padding,
+};
+
+export { selectTheme };

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import type { SelectPlacement } from '../../../hooks/useSelectPortal';
+/**
+ * Select value option type
+ * @template T The type of the option value
+ */
+export interface SelectOption<T = any> {
+    /** Unique identifier for the option */
+    id: string | number;
+    /** Display label for the option */
+    label: string;
+    /** Option value */
+    value: T;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Base props for all Select subcomponents
+ */
+export interface SelectBaseProps {
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Select component props
+ * @template T The type of the select value
+ */
+export interface SelectProps<T = any> extends SelectBaseProps {
+    /** ID for the select component */
+    id?: string;
+    /** Name for the select component */
+    name?: string;
+    /** Size of the select component */
+    size?: SelectSize;
+    /** Current state of the select component */
+    state?: SelectState;
+    /** Currently selected option */
+    value?: T;
+    /** Custom display value to show in trigger (overrides selected option label) */
+    displayValue?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Array of options to display */
+    options: SelectOption<T>[];
+    /** Label text for the select */
+    label?: string;
+    /** Helper text displayed below the select */
+    helperText?: string;
+    /** Called when the selection changes */
+    onChange?: (value: T) => void;
+    /** Called when the select receives focus */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Called when the select loses focus */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Left icon to display in the select button */
+    iconStart?: React.ReactNode;
+    /** Right icon to display in the select button (default is chevron) */
+    iconEnd?: React.ReactNode;
+    /** Children to render instead of default options */
+    children?: React.ReactNode;
+    /** Component-level theme overrides */
+    theme?: SelectThemeOverrides;
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Whether to use portal rendering for dropdown (default: true) */
+    portal?: boolean;
+    /** Placement of the dropdown relative to trigger */
+    placement?: SelectPlacement;
+    /** Offset between trigger and dropdown in pixels */
+    offset?: number;
+    /** Whether to enable typeahead functionality (default: true) */
+    enableTypeahead?: boolean;
+    /** Additional class name for the container wrapper */
+    wrapperClassName?: string;
+    /** Whether to allow creating new options (requires searchable: true) */
+    creatable?: boolean;
+    /** Called when a new option is created */
+    onCreateOption?: (inputValue: string) => void;
+    /** Custom label for the create option (default: "Create '{inputValue}'") */
+    createLabel?: string | ((inputValue: string) => string);
+}
+/**
+ * Select button props
+ */
+export interface SelectButtonProps extends SelectBaseProps {
+    /** ID for the select button */
+    id?: string;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is open */
+    isOpen?: boolean;
+    /** Current state of the select */
+    state?: SelectState;
+    /** Size of the select */
+    size?: SelectSize;
+    /** Left icon to display */
+    iconStart?: React.ReactNode;
+    /** Right icon to display (default is chevron) */
+    iconEnd?: React.ReactNode;
+    /** Called when the button is clicked */
+    onClick?: () => void;
+    /** Called when the button receives focus */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Called when the button loses focus */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Children to render inside the button */
+    children?: React.ReactNode;
+}
+/**
+ * Select options container props
+ */
+export interface SelectOptionsProps extends SelectBaseProps {
+    /** Whether the options are visible */
+    isOpen?: boolean;
+    /** Maximum height of the options container */
+    maxHeight?: string | number;
+    /** Called when the options should close */
+    onClose?: () => void;
+    /** Children to render inside the options container */
+    children?: React.ReactNode;
+    /** Whether to use portal rendering (default: true) */
+    portal?: boolean;
+    /** Placement of the dropdown relative to trigger */
+    placement?: SelectPlacement;
+    /** Offset between trigger and dropdown in pixels */
+    offset?: number;
+}
+/**
+ * Select option props
+ */
+export interface SelectOptionProps<T = any> extends SelectBaseProps {
+    /** Option value */
+    value: T;
+    /** Whether the option is currently selected */
+    isSelected?: boolean;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Called when the option is selected */
+    onSelect?: (value: T) => void;
+    /** Children to render inside the option */
+    children?: React.ReactNode;
+}
+export type SelectSize = 'sm' | 'md' | 'lg';
+export type SelectState = 'default' | 'disabled';
+/**
+ * Theme overrides for the Select component
+ */
+export interface SelectThemeOverrides {
+    /** Base style for the select button */
+    baseStyle?: string;
+    /** Container style for the entire select component */
+    containerStyle?: string;
+    /** Size styles for the select button */
+    sizes?: Partial<Record<SelectSize, string>>;
+    /** State styles for the select button */
+    states?: Partial<Record<SelectState, string>>;
+    /** Focus state styles for the select button */
+    focusStates?: Partial<Record<SelectState, string>>;
+    /** Hover state styles for the select button */
+    hoverStates?: Partial<Record<SelectState, string>>;
+    /** Style for the select button wrapper */
+    buttonWrapperStyle?: string;
+    /** Style for the select button */
+    buttonStyle?: string;
+    /** Style for the options container */
+    optionsContainerStyle?: string;
+    /** Style for the search input container */
+    searchInputStyle?: string;
+    /** Style for individual options */
+    optionStyle?: string;
+    /** Style for selected options */
+    selectedOptionStyle?: string;
+    /** Style for disabled options */
+    disabledOptionStyle?: string;
+    /** Style for the helper text */
+    helperTextStyle?: string;
+    /** State styles for the helper text */
+    helperTextStates?: Partial<Record<SelectState, string>>;
+    /** Left icon style */
+    iconStartStyle?: string;
+    /** Right icon style */
+    iconEndStyle?: string;
+    /** Style for the check icon in selected options */
+    checkIconStyle?: string;
+    /** Icon padding styles */
+    iconPadding?: {
+        left?: string;
+        right?: string;
+    };
+}

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

@@ -0,0 +1,4 @@
+import { SelectButton, SelectOptions, SelectOption, Select } from './Select';
+export { SelectButton, SelectOptions, SelectOption, Select };
+export type { SelectProps, SelectOption as SelectOptionType, SelectSize, SelectState, SelectThemeOverrides } from './Select.types';
+export { selectTheme } from './Select.theme';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SignatureProps } from './Signature.types';
+export declare const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<HTMLDivElement>>;