flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -4,20 +4,24 @@ import { formsBaseTheme } from '../forms.theme.js';
  * Default theme for the Select component
  * Extends the common forms base theme
  */
-var selectTheme = {
+const 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",
+    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 - uses base sizes from common theme
+    // Button style - bg-white for light mode only; dark mode bg comes from baseStyle (inputGroupBaseStyle)
+    buttonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Placeholder text style - matches Input placeholder styling
+    placeholderTextStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    // Selected value text style
+    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    // Size variants - composed from atomic tokens
     sizes: {
-        sm: formsBaseTheme.sizes.sm.base,
-        md: formsBaseTheme.sizes.md.base,
-        lg: formsBaseTheme.sizes.lg.base,
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
     },
     // State variants - inherited from common form theme
     states: formsBaseTheme.states,
@@ -25,29 +29,36 @@ var selectTheme = {
     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-[var(--color-neutral-300)] scrollbar-track-[var(--color-neutral-100)]",
+    // 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-[var(--color-background)]/90 backdrop-blur-md py-0 text-sm " +
+        "shadow-real-lg ring-1 ring-slate-200 focus:outline-none " +
+        "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
     // Search input style
     searchInputStyle: "group",
     // Individual option style
-    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-neutral-900)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50",
+    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
+        "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
+        "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)] dark:hover:bg-[var(--color-primary-900)]/50",
     // Selected option style
-    selectedOptionStyle: "font-medium text-[var(--color-primary)]",
+    selectedOptionStyle: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
     // Disabled option style
-    disabledOptionStyle: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-neutral-900)]",
+    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-gray-500",
-        disabled: "text-gray-400",
+        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
+        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
     },
     // Left icon style - inherited from common form theme
-    leftIconStyle: formsBaseTheme.iconStyles.left,
+    iconStartStyle: formsBaseTheme.iconStyles.left,
     // Right icon style - inherited from common form theme
-    rightIconStyle: formsBaseTheme.iconStyles.right,
+    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-600)]",
+    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] " +
+        "dark:text-[var(--color-primary-400)]",
     // Icon padding styles - inherited from common form theme
     iconPadding: formsBaseTheme.iconStyles.padding,
 };

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import type { SelectPlacement } from "../../../hooks/useSelectPortal";
 /**
  * Select value option type
  * @template T The type of the option value
@@ -35,6 +36,8 @@ export interface SelectProps<T = any> extends SelectBaseProps {
     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 */
@@ -54,9 +57,9 @@ export interface SelectProps<T = any> extends SelectBaseProps {
     /** Called when the select loses focus */
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /** Left icon to display in the select button */
-    leftIcon?: React.ReactNode;
+    iconStart?: React.ReactNode;
     /** Right icon to display in the select button (default is chevron) */
-    rightIcon?: React.ReactNode;
+    iconEnd?: React.ReactNode;
     /** Children to render instead of default options */
     children?: React.ReactNode;
     /** Component-level theme overrides */
@@ -65,6 +68,22 @@ export interface SelectProps<T = any> extends SelectBaseProps {
     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
@@ -81,9 +100,9 @@ export interface SelectButtonProps extends SelectBaseProps {
     /** Size of the select */
     size?: SelectSize;
     /** Left icon to display */
-    leftIcon?: React.ReactNode;
+    iconStart?: React.ReactNode;
     /** Right icon to display (default is chevron) */
-    rightIcon?: React.ReactNode;
+    iconEnd?: React.ReactNode;
     /** Called when the button is clicked */
     onClick?: () => void;
     /** Called when the button receives focus */
@@ -105,6 +124,12 @@ export interface SelectOptionsProps extends SelectBaseProps {
     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
@@ -121,19 +146,8 @@ export interface SelectOptionProps<T = any> extends SelectBaseProps {
     /** 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';
+export type SelectSize = "sm" | "md" | "lg";
+export type SelectState = "default" | "disabled";
 /**
  * Theme overrides for the Select component
  */
@@ -154,6 +168,10 @@ export interface SelectThemeOverrides {
     buttonWrapperStyle?: string;
     /** Style for the select button */
     buttonStyle?: string;
+    /** Style for the placeholder text (when no value selected) */
+    placeholderTextStyle?: string;
+    /** Style for the selected value text */
+    valueTextStyle?: string;
     /** Style for the options container */
     optionsContainerStyle?: string;
     /** Style for the search input container */
@@ -164,16 +182,14 @@ export interface SelectThemeOverrides {
     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;
+    iconStartStyle?: string;
     /** Right icon style */
-    rightIconStyle?: string;
+    iconEndStyle?: string;
     /** Style for the check icon in selected options */
     checkIconStyle?: string;
     /** Icon padding styles */

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

@@ -1,4 +1,4 @@
-import { SelectLabel, SelectButton, SelectOptions, SelectOption, Select } from './Select';
-export { SelectLabel, SelectButton, SelectOptions, SelectOption, Select };
+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.js

@@ -1,21 +1,36 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { signatureTheme } from './Signature.theme.js';
-import Button from '../../core/Button/Button.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Button } from '../../core/Button/Button.js';
 
-var Signature = React__default.forwardRef(function (_a, ref) {
-    var _b = _a.width, width = _b === void 0 ? 400 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, _d = _a.strokeColor, strokeColor = _d === void 0 ? '#000000' : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 2 : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'transparent' : _f, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, onChange = _a.onChange, onClear = _a.onClear, _h = _a.showControls, showControls = _h === void 0 ? true : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Sign here' : _j, props = __rest(_a, ["width", "height", "strokeColor", "strokeWidth", "backgroundColor", "className", "theme", "onChange", "onClear", "showControls", "placeholder"]);
-    var canvasRef = useRef(null);
-    var _k = useState(false), isDrawing = _k[0], setIsDrawing = _k[1];
-    var _l = useState(true), isEmpty = _l[0], setIsEmpty = _l[1];
-    var _m = useState(null), lastPoint = _m[0], setLastPoint = _m[1];
-    var theme = __assign(__assign({}, signatureTheme), customTheme);
-    useEffect(function () {
-        var canvas = canvasRef.current;
+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 signatureId = id || `signature-${Math.random().toString(36).substring(2, 9)}`;
+    // 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;
-        var ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
         // Set canvas size
@@ -32,11 +47,11 @@ var Signature = React__default.forwardRef(function (_a, ref) {
             ctx.fillRect(0, 0, width, height);
         }
     }, [width, height, strokeColor, strokeWidth, backgroundColor]);
-    var getPointFromEvent = useCallback(function (event) {
-        var canvas = canvasRef.current;
+    const getPointFromEvent = useCallback((event) => {
+        const canvas = canvasRef.current;
         if (!canvas)
             return { x: 0, y: 0 };
-        var rect = canvas.getBoundingClientRect();
+        const rect = canvas.getBoundingClientRect();
         if ('touches' in event) {
             return {
                 x: event.touches[0].clientX - rect.left,
@@ -48,44 +63,53 @@ var Signature = React__default.forwardRef(function (_a, ref) {
             y: event.clientY - rect.top,
         };
     }, []);
-    var startDrawing = useCallback(function (event) {
+    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);
-        var point = getPointFromEvent(event.nativeEvent);
-        setLastPoint(point);
-    }, [getPointFromEvent]);
-    var draw = useCallback(function (event) {
+        const point = getPointFromEvent(event.nativeEvent);
+        lastPointRef.current = point;
+    }, [isDisabled, getPointFromEvent]);
+    const draw = useCallback((event) => {
+        if (isDisabled)
+            return;
         event.preventDefault();
         if (!isDrawing)
             return;
-        var canvas = canvasRef.current;
+        const canvas = canvasRef.current;
         if (!canvas)
             return;
-        var ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
-        var currentPoint = getPointFromEvent(event.nativeEvent);
-        ctx.beginPath();
-        if (lastPoint) {
-            ctx.moveTo(lastPoint.x, lastPoint.y);
+        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();
         }
-        ctx.stroke();
-        setLastPoint(currentPoint);
+        lastPointRef.current = currentPoint;
         // Emit change event
-        var dataURL = canvas.toDataURL();
+        const dataURL = canvas.toDataURL();
         onChange === null || onChange === void 0 ? void 0 : onChange(dataURL);
-    }, [isDrawing, lastPoint, getPointFromEvent, onChange]);
-    var stopDrawing = useCallback(function () {
+    }, [isDisabled, isDrawing, getPointFromEvent, onChange]);
+    const stopDrawing = useCallback(() => {
         setIsDrawing(false);
-        setLastPoint(null);
+        lastPointRef.current = null;
     }, []);
-    var clear = useCallback(function () {
-        var canvas = canvasRef.current;
+    const clear = useCallback(() => {
+        const canvas = canvasRef.current;
         if (!canvas)
             return;
-        var ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
         ctx.clearRect(0, 0, width, height);
@@ -98,23 +122,35 @@ var Signature = React__default.forwardRef(function (_a, ref) {
         onClear === null || onClear === void 0 ? void 0 : onClear();
         onChange === null || onChange === void 0 ? void 0 : onChange('');
     }, [width, height, backgroundColor, onClear, onChange]);
-    var save = useCallback(function () {
-        var canvas = canvasRef.current;
+    const save = useCallback(() => {
+        const canvas = canvasRef.current;
         if (!canvas)
             return;
-        var dataURL = canvas.toDataURL();
+        const dataURL = canvas.toDataURL();
         // Create download link
-        var link = document.createElement('a');
+        const link = document.createElement('a');
         link.download = 'signature.png';
         link.href = dataURL;
         link.click();
     }, []);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className), style: { width: width, height: height } }, props),
-        React__default.createElement("canvas", { ref: canvasRef, className: theme.canvasStyle, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing }),
-        isEmpty && placeholder && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-text-placeholder text-sm" }, placeholder)),
-        showControls && (React__default.createElement("div", { className: "absolute bottom-2 right-2 flex gap-1" },
-            React__default.createElement(Button, { size: "sm", variant: "clear", onClick: clear }, "Clear"),
-            React__default.createElement(Button, { size: "sm", variant: "outline", onClick: save, disabled: isEmpty }, "Download")))));
+    // 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 (React__default.createElement("div", { className: cn(wrapperClasses, stateClass, wrapperClassName) },
+        label && (React__default.createElement("div", { className: "mb-1" },
+            React__default.createElement(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required }, label))),
+        React__default.createElement("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height } },
+            React__default.createElement("div", { ref: ref, className: baseClasses, ...props },
+                React__default.createElement("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 && (React__default.createElement("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle) }, placeholder)),
+                showControls && !isDisabled && (React__default.createElement("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle) },
+                    React__default.createElement(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button" }, "Clear"),
+                    React__default.createElement(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button" }, "Save"))))),
+        helperText && (React__default.createElement("div", { className: cn(helperTextClasses, helperTextClassName) }, helperText))));
 });
 Signature.displayName = 'Signature';
 

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

@@ -1,2 +1,6 @@
-import { SignatureTheme } from './Signature.types';
+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

@@ -1,6 +1,32 @@
-var signatureTheme = {
-    baseStyle: 'relative border border-border rounded-[var(--form-rounded)] bg-white',
-    canvasStyle: 'block w-full h-full cursor-crosshair',
+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 };

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

@@ -1,13 +1,73 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Signature component size variants
+ */
+export type SignatureSize = 'sm' | 'md' | 'lg';
+/**
+ * Signature component state variants
+ */
+export type SignatureState = 'default' | 'disabled' | 'invalid';
+/**
+ * Signature theme configuration
+ */
 export interface SignatureTheme {
+    /** Wrapper container style */
+    wrapperStyle: string;
+    /** Input group container style (border, focus, states) */
+    inputGroupStyle: string;
+    /** Canvas wrapper style */
     baseStyle: string;
+    /** Canvas element style */
     canvasStyle: string;
+    /** Placeholder text style */
+    placeholderStyle: string;
+    /** Control buttons container style */
+    controlsStyle: string;
+    /** Size variants */
+    sizes?: Record<SignatureSize, string>;
+    /** State variants */
+    states?: Record<SignatureState, string>;
+    /** Helper text style */
+    helperText?: string;
 }
+/**
+ * Theme overrides for the Signature component
+ */
 export interface SignatureThemeOverrides {
+    wrapperStyle?: string;
+    inputGroupStyle?: string;
     baseStyle?: string;
     canvasStyle?: string;
+    placeholderStyle?: string;
+    controlsStyle?: string;
+    sizes?: Partial<Record<SignatureSize, string>>;
+    states?: Partial<Record<SignatureState, string>>;
+    helperText?: string;
 }
+/**
+ * Signature component props
+ */
 export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Unique identifier for the signature field */
+    id?: string;
+    /** Label text for the signature */
+    label?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Helper text displayed below the signature */
+    helperText?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Size variant of the signature component */
+    size?: SignatureSize;
+    /** State of the signature component */
+    state?: SignatureState;
+    /** Whether the signature is required */
+    required?: boolean;
+    /** Whether the signature is disabled */
+    disabled?: boolean;
     /** Canvas width */
     width?: number;
     /** Canvas height */

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

@@ -1,2 +1,3 @@
 export { Signature } from './Signature';
 export type { SignatureProps, SignatureTheme, SignatureThemeOverrides } from './Signature.types';
+export { signatureTheme } from './Signature.theme';

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

@@ -1,4 +1,3 @@
 import React from "react";
 import { SliderProps } from "./Slider.types";
 export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
-export default Slider;