flikkui 0.1.0-beta.2

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

@@ -0,0 +1,51 @@
+/**
+ * State variants for the radio component
+ */
+export type RadioState = 'default' | 'disabled' | 'invalid';
+/**
+ * Radio component props
+ * @property {string} id - Unique identifier for the radio input
+ * @property {string} name - Name for the radio input group
+ * @property {string} value - Value for the radio input
+ * @property {boolean} checked - Whether the radio is checked
+ * @property {(checked: boolean, value: string) => void} onChange - Function called when the radio state changes
+ * @property {string} label - Label text for the radio
+ * @property {string} description - Optional description text
+ * @property {RadioState} state - The state of the radio (default, disabled, invalid)
+ * @property {RadioThemeOverrides} theme - Optional theme overrides
+ */
+export interface RadioProps {
+    id: string;
+    name: string;
+    value: string;
+    checked?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    label?: string;
+    description?: string;
+    state?: RadioState;
+    theme?: RadioThemeOverrides;
+}
+/**
+ * Radio theme configuration
+ */
+export interface RadioThemeConfig {
+    baseStyle: {
+        container: string;
+        inputContainer: string;
+        labelContainer: string;
+        input: string;
+        dot: string;
+        description: string;
+        states?: {
+            default: string;
+            disabled: string;
+            invalid: string;
+        };
+    };
+}
+/**
+ * Radio theme overrides
+ */
+export interface RadioThemeOverrides {
+    baseStyle?: Partial<RadioThemeConfig['baseStyle']>;
+}

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

@@ -0,0 +1,3 @@
+export { default, Radio } from './Radio';
+export * from './Radio.types';
+export * from './Radio.theme';

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

@@ -0,0 +1,5 @@
+import { Variants } from 'motion/react';
+/**
+ * Dropdown animation variants for the Select component
+ */
+export declare const dropdownAnimations: Variants;

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

@@ -0,0 +1,30 @@
+/**
+ * Dropdown animation variants for the Select component
+ */
+var dropdownAnimations = {
+    initial: {
+        opacity: 0,
+        y: -10,
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut'
+        }
+    },
+    exit: {
+        opacity: 0,
+        y: -10,
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn'
+        }
+    }
+};
+
+export { dropdownAnimations };

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { SelectProps, SelectButtonProps, SelectOptionsProps, SelectOptionProps, SelectLabelProps } from "./Select.types";
+/**
+ * Select Label Component
+ */
+export declare const SelectLabel: React.FC<SelectLabelProps>;
+/**
+ * Select Button Component
+ */
+export declare const SelectButton: React.FC<SelectButtonProps>;
+/**
+ * Select Options Component
+ */
+export declare const SelectOptions: React.FC<SelectOptionsProps>;
+/**
+ * Select Option Component
+ */
+export declare const SelectOption: <T extends any>({ value, isSelected, disabled, className, onSelect, children, }: SelectOptionProps<T>) => React.JSX.Element;
+/**
+ * Main Select Component
+ */
+export declare const Select: <T extends any>({ id, name, size, state, value, placeholder, disabled, required, options, label, helperText, onChange, onFocus, onBlur, leftIcon, rightIcon, theme: themeOverrides, className, searchable, searchPlaceholder, children, }: SelectProps<T>) => React.JSX.Element;

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

@@ -0,0 +1,277 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useEffect, useState, useRef, useContext } from 'react';
+import { selectTheme } from './Select.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import '../../../icons/core/PlusIcon.js';
+import '../../../icons/core/MinusIcon.js';
+import { SearchIcon } from '../../../icons/core/SearchIcon.js';
+import '../../../icons/core/LockIcon.js';
+import '../../../icons/core/DollarIcon.js';
+import '../../../icons/core/TickIcon.js';
+import { dropdownAnimations } from './Select.animations.js';
+import { ChevronUpDownIcon } from '../../../icons/core/ChevronUpDown.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 Label Component
+ */
+var SelectLabel = function (_a) {
+    var htmlFor = _a.htmlFor, required = _a.required, _b = _a.className, className = _b === void 0 ? "" : _b, children = _a.children;
+    var theme = useSelectContext().theme;
+    var labelStyle = theme.labelStyle || "";
+    return (React__default.createElement("label", { htmlFor: htmlFor, className: "".concat(labelStyle, " ").concat(className) },
+        children,
+        required && React__default.createElement("span", { className: "text-danger-base ml-1" }, "*")));
+};
+/**
+ * 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, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _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 leftIconStyle = theme.leftIconStyle || "";
+    var rightIconStyle = theme.rightIconStyle || "";
+    var leftIconPadding = leftIcon ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.left) || "" : "";
+    var rightIconPadding = rightIcon ? ((_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-primary-600 -outline-offset-1 ring-4 ring-primary-base/10"
+        : "";
+    return (React__default.createElement("div", { className: "".concat(buttonWrapperStyle) },
+        React__default.createElement("button", { ref: buttonRef, id: id, type: "button", className: "".concat(baseStyle, " ").concat(sizeStyle, " ").concat(stateStyle, " ").concat(hoverStateStyle, " ").concat(activeFocusState, " ").concat(leftIconPadding, " ").concat(rightIconPadding, " ").concat(buttonStyle, " ").concat(className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" },
+            leftIcon && React__default.createElement("span", { className: leftIconStyle }, leftIcon),
+            children,
+            rightIcon && React__default.createElement("span", { className: rightIconStyle }, rightIcon))));
+};
+/**
+ * Select Options Component
+ */
+var SelectOptions = function (_a) {
+    var isOpen = _a.isOpen, _b = _a.maxHeight, maxHeight = _b === void 0 ? "15rem" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, onClose = _a.onClose, children = _a.children;
+    var _d = useSelectContext(), optionsRef = _d.optionsRef, buttonRef = _d.buttonRef, highlightedIndex = _d.highlightedIndex, setHighlightedIndex = _d.setHighlightedIndex; _d.options; var filteredOptions = _d.filteredOptions, searchable = _d.searchable, searchValue = _d.searchValue, setSearchValue = _d.setSearchValue, theme = _d.theme;
+    var optionsContainerStyle = theme.optionsContainerStyle || "";
+    var searchInputStyle = theme.searchInputStyle || "";
+    // Convert maxHeight to a valid CSS value
+    var maxHeightValue = typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight;
+    // Handle click outside to close options
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleClickOutside = function (event) {
+            if (optionsRef.current &&
+                !optionsRef.current.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]);
+    // Handle keyboard navigation
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleKeyDown = function (event) {
+            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]);
+    // Reset search and highlighted index when closing
+    useEffect(function () {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(-1);
+        }
+    }, [isOpen, setSearchValue, setHighlightedIndex]);
+    // Handle search input change
+    var handleSearchChange = function (e) {
+        setSearchValue(e.target.value);
+        setHighlightedIndex(-1); // Reset highlighted index when search changes
+    };
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: optionsRef, className: "".concat(optionsContainerStyle, " ").concat(className), style: { maxHeight: searchable ? "none" : maxHeightValue }, role: "listbox", tabIndex: -1, variants: dropdownAnimations, initial: "initial", animate: "visible", exit: "exit" },
+        searchable && (React__default.createElement("div", { className: "sticky top-0 py-1 bg-white z-10 border-b border-neutral-100 ".concat(searchInputStyle), style: {
+                '--form-rounded': '0',
+            } },
+            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", className: "border-none outline-none 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", leftIcon: React__default.createElement(SearchIcon, { size: "sm", className: "text-neutral-400 group-focus-within:text-neutral-900" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", style: {
+                    border: "none",
+                    outline: "none",
+                    boxShadow: "none"
+                }, theme: {
+                    baseStyle: "w-full block bg-white",
+                    states: {
+                        default: "!border-none !outline-none !ring-0 !shadow-none",
+                        disabled: "!border-none !outline-none !ring-0 !shadow-none",
+                    },
+                    inputGroupStyle: "!border-none !outline-none !ring-0 !shadow-none flex items-center",
+                    wrapperStyle: "!border-none !outline-none !ring-0 !shadow-none"
+                } }))),
+        React__default.createElement("div", { style: { maxHeight: maxHeightValue, overflow: "auto" } }, children)))));
+};
+/**
+ * Select Option Component
+ */
+var SelectOption = function (_a) {
+    var value = _a.value, isSelected = _a.isSelected, disabled = _a.disabled, _b = _a.className, className = _b === void 0 ? "" : _b, onSelect = _a.onSelect, children = _a.children;
+    var _c = useSelectContext(), highlightedIndex = _c.highlightedIndex, setHighlightedIndex = _c.setHighlightedIndex, options = _c.options, theme = _c.theme, selectOption = _c.selectOption;
+    var optionStyle = theme.optionStyle || "";
+    var selectedOptionStyle = theme.selectedOptionStyle || "";
+    var disabledOptionStyle = theme.disabledOptionStyle || "";
+    // Find index of this option
+    var optionIndex = options.findIndex(function (option) { return option.value === value; });
+    var isHighlighted = optionIndex === highlightedIndex;
+    var handleClick = function () {
+        if (disabled)
+            return;
+        selectOption(value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+    };
+    // Apply the hover style directly when keyboard navigating
+    var keyboardHighlightStyle = isHighlighted ? "text-primary-base bg-primary-50/50" : "";
+    return (React__default.createElement("div", { className: "\n        ".concat(optionStyle, "\n        ").concat(isSelected ? selectedOptionStyle : "", "\n        ").concat(disabled ? disabledOptionStyle : "", "\n        ").concat(keyboardHighlightStyle, "\n        ").concat(className, "\n      "), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, 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, _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, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, themeOverrides = _a.theme, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.searchable, searchable = _k === void 0 ? false : _k; _a.searchPlaceholder; var children = _a.children;
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, selectTheme), (themeOverrides || {}));
+    // State
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState(value), selectedValue = _o[0], setSelectedValue = _o[1];
+    var _p = useState(-1), highlightedIndex = _p[0], setHighlightedIndex = _p[1];
+    var _q = useState(""), searchValue = _q[0], setSearchValue = _q[1];
+    // 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 filteredOptions = searchValue
+        ? options.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        })
+        : options;
+    var selectedOption = getOptionByValue(selectedValue);
+    var displayValue = selectedOption ? selectedOption.label : placeholder;
+    // Function to select an option
+    var selectOption = function (newValue) {
+        if (newValue !== selectedValue) {
+            setSelectedValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        setIsOpen(false);
+    };
+    // 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 rightIcon 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,
+            buttonRef: buttonRef,
+            optionsRef: optionsRef,
+        } },
+        React__default.createElement("div", { className: "relative ".concat(containerStyle, " ").concat(className) },
+            label && (React__default.createElement(FormLabel, { htmlFor: selectId, required: required }, label)),
+            React__default.createElement(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, leftIcon: leftIcon, rightIcon: rightIcon || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur },
+                React__default.createElement("span", { className: "block truncate" }, displayValue)),
+            React__default.createElement(SelectOptions, { isOpen: isOpen, onClose: function () { return setIsOpen(false); } }, 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: "".concat(helperTextStyle, " ").concat(helperTextStateStyle) }, helperText)),
+            name && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" })))));
+};
+
+export { Select, SelectButton, SelectLabel, 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,55 @@
+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 + " justify-between",
+    // Button wrapper style
+    buttonWrapperStyle: "relative w-full",
+    // Button style
+    buttonStyle: "w-full cursor-pointer bg-white",
+    // Size variants - uses base sizes from common theme
+    sizes: {
+        sm: formsBaseTheme.sizes.sm.base,
+        md: formsBaseTheme.sizes.md.base,
+        lg: formsBaseTheme.sizes.lg.base,
+    },
+    // 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
+    optionsContainerStyle: "absolute z-10 mt-1.5 w-full min-w-[14rem] max-h-60 overflow-auto rounded-[var(--form-rounded)] bg-white py-0 text-sm shadow-xl ring-1 ring-slate-200 focus:outline-none scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-neutral-100",
+    // Search input style
+    searchInputStyle: "group",
+    // Individual option style
+    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-neutral-900 hover:text-primary-base hover:bg-primary-50/50",
+    // Selected option style
+    selectedOptionStyle: "font-medium text-primary-base",
+    // Disabled option style
+    disabledOptionStyle: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-neutral-900",
+    // Helper text style - inherited from common form theme
+    helperTextStyle: formsBaseTheme.helperText,
+    // Helper text state variants
+    helperTextStates: {
+        default: "text-gray-500",
+        disabled: "text-gray-400",
+    },
+    // Left icon style - inherited from common form theme
+    leftIconStyle: formsBaseTheme.iconStyles.left,
+    // Right icon style - inherited from common form theme
+    rightIconStyle: formsBaseTheme.iconStyles.right,
+    // Check icon style for selected options
+    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-primary-600",
+    // 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,184 @@
+import React from 'react';
+/**
+ * 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;
+    /** 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 */
+    leftIcon?: React.ReactNode;
+    /** Right icon to display in the select button (default is chevron) */
+    rightIcon?: 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;
+}
+/**
+ * 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 */
+    leftIcon?: React.ReactNode;
+    /** Right icon to display (default is chevron) */
+    rightIcon?: 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;
+}
+/**
+ * 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;
+}
+/**
+ * Select label props
+ */
+export interface SelectLabelProps extends SelectBaseProps {
+    /** ID of the select this label is for */
+    htmlFor?: string;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Children to render inside the label */
+    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 label */
+    labelStyle?: string;
+    /** Style for the helper text */
+    helperTextStyle?: string;
+    /** State styles for the helper text */
+    helperTextStates?: Partial<Record<SelectState, string>>;
+    /** Left icon style */
+    leftIconStyle?: string;
+    /** Right icon style */
+    rightIconStyle?: 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 { SelectLabel, SelectButton, SelectOptions, SelectOption, Select } from './Select';
+export { SelectLabel, 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>>;