@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,212 @@
+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?: React.ReactNode;
+    /** 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;
+    /** Enable multi-select mode — value becomes T[] and chips are rendered in trigger */
+    multiple?: boolean;
+    /** Maximum number of chips to display before showing "+N more" (default: 3) */
+    maxDisplayedChips?: number;
+    /** 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" | "invalid";
+/**
+ * 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 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 */
+    searchInputStyle?: string;
+    /** Style for individual options */
+    optionStyle?: string;
+    /** Style for selected options */
+    selectedOptionStyle?: string;
+    /** Style for highlighted options (keyboard navigation) */
+    highlightedOptionStyle?: string;
+    /** Style for disabled options */
+    disabledOptionStyle?: string;
+    /** Style for create option */
+    createOptionStyle?: 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;
+    };
+    /** Container style for multi-select chips */
+    chipContainerStyle?: string;
+    /** Style for the overflow "+N more" indicator */
+    chipOverflowStyle?: string;
+}

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

@@ -0,0 +1,7 @@
+export { Select, SelectButton, SelectOptions, SelectOption, } from "./Select";
+export { SelectProvider, SelectContext, useSelectContext, } from "./Select";
+export { useSelectState, } from "./Select";
+export { selectTheme } from "./Select.theme";
+export type { SelectProps, SelectOption as SelectOptionType, SelectSize, SelectState, SelectThemeOverrides, SelectButtonProps, SelectOptionsProps, SelectOptionProps, } from "./Select.types";
+export type { UseSelectStateProps, UseSelectStateReturn, } from "./useSelectState";
+export type { SelectContextValue, SelectProviderProps, SelectOptionsExtendedProps, } from "./Select";

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

@@ -0,0 +1,72 @@
+import type { SelectOption } from "./Select.types";
+/**
+ * Props for the useSelectState hook
+ */
+export interface UseSelectStateProps<T = any> {
+    /** Array of available options */
+    options: SelectOption<T>[];
+    /** Currently selected value (controlled) */
+    value?: T;
+    /** Callback when selection changes */
+    onChange?: (value: T) => void;
+    /** Whether filtering/search is enabled */
+    searchable?: boolean;
+    /** Whether new options can be created */
+    creatable?: boolean;
+    /** Callback when creating a new option */
+    onCreateOption?: (inputValue: string) => void;
+    /** Label template for create option */
+    createLabel?: string | ((inputValue: string) => string);
+    /** Whether typeahead is enabled (default: true) */
+    enableTypeahead?: boolean;
+    /** Enable multi-select mode */
+    multiple?: boolean;
+}
+/**
+ * Return type for the useSelectState hook
+ */
+export interface UseSelectStateReturn<T = any> {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    highlightedIndex: number;
+    setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+    searchValue: string;
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+    selectedValue: T | undefined;
+    setSelectedValue: React.Dispatch<React.SetStateAction<T | undefined>>;
+    typeaheadValue: string;
+    setTypeaheadValue: React.Dispatch<React.SetStateAction<string>>;
+    typeaheadTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
+    filteredOptions: SelectOption<T>[];
+    selectedOption: SelectOption<T> | undefined;
+    hasCreateOption: boolean;
+    selectOption: (value: T, isCreateAction?: boolean) => void;
+    getOptionByValue: (searchValue: T) => SelectOption<T> | undefined;
+    multiple: boolean;
+    selectedValues: T[];
+    isValueSelected: (value: T) => boolean;
+    removeValue: (value: T) => void;
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
+    optionsRef: React.MutableRefObject<HTMLDivElement | null>;
+    options: SelectOption<T>[];
+}
+/**
+ * useSelectState
+ *
+ * A headless hook that manages all state for select/dropdown components.
+ * This hook can be used by Select, Combobox, MultiSelect, TagInput, etc.
+ *
+ * @example
+ * ```tsx
+ * const selectState = useSelectState({
+ *   options,
+ *   value,
+ *   onChange,
+ *   searchable: true,
+ * });
+ *
+ * // Use in your component:
+ * const { isOpen, setIsOpen, filteredOptions, selectOption } = selectState;
+ * ```
+ */
+export declare function useSelectState<T = any>({ options, value, onChange, searchable, creatable, onCreateOption, createLabel, enableTypeahead, multiple, }: UseSelectStateProps<T>): UseSelectStateReturn<T>;

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

@@ -0,0 +1,171 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * useSelectState
+ *
+ * A headless hook that manages all state for select/dropdown components.
+ * This hook can be used by Select, Combobox, MultiSelect, TagInput, etc.
+ *
+ * @example
+ * ```tsx
+ * const selectState = useSelectState({
+ *   options,
+ *   value,
+ *   onChange,
+ *   searchable: true,
+ * });
+ *
+ * // Use in your component:
+ * const { isOpen, setIsOpen, filteredOptions, selectOption } = selectState;
+ * ```
+ */
+function useSelectState({ options = [], value, onChange, searchable = false, creatable = false, onCreateOption, createLabel, enableTypeahead = true, multiple = false, }) {
+    // Core state
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [searchValue, setSearchValue] = useState("");
+    // Multi-select state
+    const [selectedValues, setSelectedValues] = useState(() => {
+        if (multiple && Array.isArray(value))
+            return value;
+        return [];
+    });
+    // Typeahead state
+    const [typeaheadValue, setTypeaheadValue] = useState("");
+    const typeaheadTimeoutRef = useRef(null);
+    // Refs for trigger and options container
+    const triggerRef = useRef(null);
+    const optionsRef = useRef(null);
+    // Sync internal state with controlled value
+    useEffect(() => {
+        if (multiple && Array.isArray(value)) {
+            setSelectedValues(value);
+        }
+        else {
+            setSelectedValue(value);
+        }
+    }, [value, multiple]);
+    // Get option by value
+    const getOptionByValue = useCallback((searchVal) => {
+        return options.find((option) => option.value === searchVal);
+    }, [options]);
+    // Selected option derived from selectedValue
+    const selectedOption = useMemo(() => {
+        return selectedValue !== undefined
+            ? getOptionByValue(selectedValue)
+            : undefined;
+    }, [selectedValue, getOptionByValue]);
+    // Filter options based on search query
+    const baseFilteredOptions = useMemo(() => {
+        if (!searchValue)
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    }, [options, searchValue]);
+    // Check if we should show the create option
+    const hasCreateOption = useMemo(() => {
+        return (creatable &&
+            searchable &&
+            searchValue.trim() !== "" &&
+            !baseFilteredOptions.some((option) => option.label.toLowerCase() === searchValue.toLowerCase()));
+    }, [creatable, searchable, searchValue, baseFilteredOptions]);
+    // Final filtered options with create option if applicable
+    const filteredOptions = useMemo(() => {
+        if (!hasCreateOption)
+            return baseFilteredOptions;
+        const createOptionLabel = typeof createLabel === "function"
+            ? createLabel(searchValue)
+            : createLabel || `Create "${searchValue}"`;
+        return [
+            {
+                id: "__create__",
+                label: createOptionLabel,
+                value: searchValue,
+            },
+            ...baseFilteredOptions,
+        ];
+    }, [hasCreateOption, baseFilteredOptions, searchValue, createLabel]);
+    // Multi-select helpers
+    const isValueSelected = useCallback((val) => {
+        return selectedValues.some((v) => v === val);
+    }, [selectedValues]);
+    const removeValue = useCallback((val) => {
+        const updated = selectedValues.filter((v) => v !== val);
+        setSelectedValues(updated);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+    }, [selectedValues, onChange]);
+    // Select an option
+    const selectOption = useCallback((newValue, isCreateAction = false) => {
+        // Handle create action callback
+        if (isCreateAction && onCreateOption) {
+            onCreateOption(String(newValue));
+        }
+        if (multiple) {
+            // Toggle value in multi-select mode
+            const isAlreadySelected = selectedValues.some((v) => v === newValue);
+            const updated = isAlreadySelected
+                ? selectedValues.filter((v) => v !== newValue)
+                : [...selectedValues, newValue];
+            setSelectedValues(updated);
+            onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+            // Don't close dropdown in multi-select mode
+            setSearchValue("");
+            return;
+        }
+        // Single-select: update state if value changed
+        if (newValue !== selectedValue) {
+            setSelectedValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        // Close and reset
+        setIsOpen(false);
+        setSearchValue("");
+    }, [selectedValue, selectedValues, onChange, onCreateOption, multiple]);
+    // Reset state when closing
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(-1);
+            setTypeaheadValue("");
+            // Clear any pending typeahead timeout
+            if (typeaheadTimeoutRef.current) {
+                clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        }
+    }, [isOpen]);
+    return {
+        // Core state
+        isOpen,
+        setIsOpen,
+        highlightedIndex,
+        setHighlightedIndex,
+        searchValue,
+        setSearchValue,
+        selectedValue,
+        setSelectedValue,
+        // Typeahead state
+        typeaheadValue,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+        // Derived state
+        filteredOptions,
+        selectedOption,
+        hasCreateOption,
+        // Actions
+        selectOption,
+        getOptionByValue,
+        // Multi-select state
+        multiple,
+        selectedValues,
+        isValueSelected,
+        removeValue,
+        // Refs
+        triggerRef,
+        optionsRef,
+        // Original options
+        options,
+    };
+}
+
+export { useSelectState };

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>>;

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

@@ -0,0 +1,152 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { signatureTheme } from './Signature.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Button } from '../../core/Button/Button.js';
+
+const Signature = React__default.forwardRef(({ id, label, labelClassName, helperText, helperTextClassName, wrapperClassName, size = 'md', state = 'default', required = false, disabled = false, width = 400, height = 200, strokeColor = '#000000', strokeWidth = 2, backgroundColor = 'transparent', className, theme: customTheme = {}, onChange, onClear, showControls = true, placeholder = 'Sign here', ...props }, ref) => {
+    var _a, _b;
+    const canvasRef = useRef(null);
+    const [isDrawing, setIsDrawing] = useState(false);
+    const [isEmpty, setIsEmpty] = useState(true);
+    const lastPointRef = useRef(null);
+    // Generate unique ID if not provided
+    const generatedId = React__default.useId();
+    const signatureId = id || generatedId;
+    // Derived state flags
+    const isDisabled = state === 'disabled' || disabled;
+    const isInvalid = state === 'invalid';
+    // State class for CSS selectors
+    const stateClass = isInvalid
+        ? 'state-invalid'
+        : isDisabled
+            ? 'state-disabled'
+            : 'state-default';
+    // Merge theme with defaults
+    const theme = {
+        ...signatureTheme,
+        ...customTheme,
+    };
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Set canvas size
+        canvas.width = width;
+        canvas.height = height;
+        // Configure drawing context
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        // Set background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }, [width, height, strokeColor, strokeWidth, backgroundColor]);
+    const getPointFromEvent = useCallback((event) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return { x: 0, y: 0 };
+        const rect = canvas.getBoundingClientRect();
+        if ('touches' in event) {
+            return {
+                x: event.touches[0].clientX - rect.left,
+                y: event.touches[0].clientY - rect.top,
+            };
+        }
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+    }, []);
+    const startDrawing = useCallback((event) => {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        // Focus the canvas to trigger focus-within on parent
+        const canvas = canvasRef.current;
+        if (canvas) {
+            canvas.focus();
+        }
+        setIsDrawing(true);
+        setIsEmpty(false);
+        const point = getPointFromEvent(event.nativeEvent);
+        lastPointRef.current = point;
+    }, [isDisabled, getPointFromEvent]);
+    const draw = useCallback((event) => {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        if (!isDrawing)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const currentPoint = getPointFromEvent(event.nativeEvent);
+        if (lastPointRef.current) {
+            ctx.beginPath();
+            ctx.moveTo(lastPointRef.current.x, lastPointRef.current.y);
+            ctx.lineTo(currentPoint.x, currentPoint.y);
+            ctx.stroke();
+        }
+        lastPointRef.current = currentPoint;
+    }, [isDisabled, isDrawing, getPointFromEvent]);
+    const stopDrawing = useCallback(() => {
+        setIsDrawing(false);
+        lastPointRef.current = null;
+        // Only call toDataURL and onChange on mouseup/touchend, not on every draw event
+        const canvas = canvasRef.current;
+        if (canvas && onChange) {
+            const dataURL = canvas.toDataURL();
+            onChange(dataURL);
+        }
+    }, [onChange]);
+    const clear = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.clearRect(0, 0, width, height);
+        // Reset background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+        setIsEmpty(true);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }, [width, height, backgroundColor, onClear, onChange]);
+    const save = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const dataURL = canvas.toDataURL();
+        // Create download link
+        const link = document.createElement('a');
+        link.download = 'signature.png';
+        link.href = dataURL;
+        link.click();
+    }, []);
+    // Get theme classes
+    const wrapperClasses = theme.wrapperStyle;
+    const inputGroupClasses = theme.inputGroupStyle;
+    const baseClasses = theme.baseStyle;
+    const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || '';
+    const stateClasses = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || '';
+    const helperTextClasses = theme.helperText || '';
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": label || 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+});
+Signature.displayName = 'Signature';
+
+export { Signature };

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

@@ -0,0 +1,6 @@
+import { SignatureTheme } from "./Signature.types";
+/**
+ * Default theme for the Signature component
+ * Extends the common forms base theme for consistency
+ */
+export declare const signatureTheme: SignatureTheme;

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

@@ -0,0 +1,32 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Signature component
+ * Extends the common forms base theme for consistency
+ */
+const signatureTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - extends the common input group style for consistent borders/focus
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Canvas wrapper style - minimal, container handles borders/focus
+    baseStyle: "relative overflow-hidden w-full h-full",
+    // Canvas element style
+    canvasStyle: "block w-full h-full cursor-crosshair touch-none focus:outline-none",
+    // Placeholder text style
+    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-sm",
+    // Control buttons container style
+    controlsStyle: "absolute bottom-2 right-2 flex gap-2 z-10",
+    // Size variants - use shared padding system
+    sizes: {
+        sm: `${formsBaseTheme.sizes.sm.padding}`,
+        md: `${formsBaseTheme.sizes.md.padding}`,
+        lg: `${formsBaseTheme.sizes.lg.padding}`,
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { signatureTheme };