flikkui 0.1.0-beta.11

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

@@ -0,0 +1,109 @@
+import React from 'react';
+/**
+ * Slider component props
+ * @property {SliderSize} size - The size of the slider
+ * @property {SliderState} state - The state of the slider (default, disabled, invalid)
+ * @property {string} label - Optional label text for the slider
+ * @property {string} helperText - Optional helper text displayed below the slider
+ * @property {number} min - Minimum value for the slider
+ * @property {number} max - Maximum value for the slider
+ * @property {number} step - Step value for slider increments
+ * @property {number | number[]} value - Current value(s) of the slider
+ * @property {number | number[]} defaultValue - Default value(s) for uncontrolled usage
+ * @property {function} onChange - Callback fired when the value changes
+ * @property {function} onChangeCommitted - Callback fired when the user stops dragging
+ * @property {boolean} showValue - Whether to show the current value
+ * @property {string} unit - Unit to display with the value (e.g., "px", "%", "°")
+ * @property {boolean} showMinMax - Whether to show min/max labels
+ * @property {boolean} showTicks - Whether to show tick marks
+ * @property {number} tickStep - Step for tick marks (defaults to step)
+ * @property {boolean} range - Whether this is a range slider (dual thumbs)
+ * @property {React.ReactNode} iconStart - Icon to display at the start of the slider
+ * @property {React.ReactNode} iconEnd - Icon to display at the end of the slider
+ * @property {boolean} required - Whether the slider is required
+ */
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** The state of the slider (default, disabled, invalid) */
+    state?: SliderState;
+    /** Optional label text for the slider */
+    label?: string;
+    /** Optional helper text displayed below the slider */
+    helperText?: string;
+    /** Minimum value for the slider */
+    min?: number;
+    /** Maximum value for the slider */
+    max?: number;
+    /** Step value for slider increments */
+    step?: number;
+    /** Current value(s) of the slider */
+    value?: number | number[];
+    /** Default value(s) for uncontrolled usage */
+    defaultValue?: number | number[];
+    /** Callback fired when the value changes */
+    onChange?: (value: number | number[]) => void;
+    /** Callback fired when the user stops dragging */
+    onChangeCommitted?: (value: number | number[]) => void;
+    /** Whether to show the current value */
+    showValue?: boolean;
+    /** Unit to display with the value (e.g., "px", "%", "°") */
+    unit?: string;
+    /** Whether to show min/max labels */
+    showMinMax?: boolean;
+    /** Whether to show tick marks */
+    showTicks?: boolean;
+    /** Step for tick marks (defaults to step) */
+    tickStep?: number;
+    /** Whether this is a range slider (dual thumbs) */
+    range?: boolean;
+    /** Icon to display at the start of the slider */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end of the slider */
+    iconEnd?: React.ReactNode;
+    /** Additional class name for the slider */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Component-level theme overrides */
+    theme?: SliderThemeOverrides;
+    /** Whether the slider is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** ARIA labelledby for accessibility */
+    'aria-labelledby'?: string;
+    /** ARIA describedby for accessibility */
+    'aria-describedby'?: string;
+}
+export type SliderState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the Slider component
+ * Simplified flat structure following shadcn pattern
+ */
+export interface SliderThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the label */
+    labelStyle?: string;
+    /** Style for the helper text */
+    helperTextStyle?: string;
+    /** Style for the root slider container */
+    rootStyle?: string;
+    /** Style for the slider track (background) */
+    trackStyle?: string;
+    /** Style for the range (filled portion) */
+    rangeStyle?: string;
+    /** Base style for the slider thumb */
+    thumbStyle?: string;
+    /** Style for the value display */
+    valueDisplayStyle?: string;
+    /** Style for min/max labels */
+    minMaxLabelStyle?: string;
+    /** Style for tick marks */
+    tickStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderState, SliderThemeOverrides } from "./Slider.types";
+export { sliderTheme } from "./Slider.theme";

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { SwitchProps } from "./Switch.types";
+/**
+ * Switch component for toggling between two states
+ */
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/forms/Switch/Switch.js

@@ -0,0 +1,59 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { switchTheme, thumbPositions } from './Switch.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * Switch component for toggling between two states
+ */
+var Switch = function (_a) {
+    var id = _a.id, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, _c = _a.labelPosition, labelPosition = _c === void 0 ? "end" : _c, theme = _a.theme, className = _a.className, rest = __rest(_a, ["id", "checked", "onChange", "label", "description", "state", "labelPosition", "theme", "className"]);
+    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
+    // Determine if component is controlled or uncontrolled
+    var isControlled = controlledChecked !== undefined;
+    var isChecked = isControlled ? controlledChecked : internalChecked;
+    // Derive state flags
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var handleChange = function (e) {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
+    };
+    var handleTrackClick = function () {
+        if (!isDisabled) {
+            var newValue = !isChecked;
+            if (!isControlled) {
+                setInternalChecked(newValue);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
+    // Label and description content
+    var labelContent = (label || description) ? (React__default.createElement("div", { className: "flex grow flex-col" },
+        label && React__default.createElement(FormLabel, { htmlFor: id, state: state }, label),
+        description && React__default.createElement("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description) }, description))) : null;
+    // Build data attributes for state-based styling
+    var trackDataState = isDisabled
+        ? "disabled"
+        : isInvalid
+            ? "invalid"
+            : isChecked
+                ? "checked"
+                : "unchecked";
+    // Switch toggle component
+    var switchToggle = (React__default.createElement("div", { className: "relative flex items-center h-6" },
+        React__default.createElement("input", { type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }),
+        React__default.createElement("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick },
+            React__default.createElement(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 } }))));
+    return (React__default.createElement("div", __assign({ className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className) }, rest),
+        labelContent,
+        switchToggle));
+};
+
+export { Switch };

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

@@ -0,0 +1,18 @@
+import { SwitchTheme } from './Switch.types';
+/**
+ * Default theme configuration for the Switch component
+ */
+export declare const switchTheme: SwitchTheme;
+/**
+ * Thumb position values for animation
+ */
+export declare const thumbPositions: {
+    checked: {
+        x: number;
+        y: number;
+    };
+    unchecked: {
+        x: number;
+        y: number;
+    };
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme configuration for the Switch component
+ */
+var switchTheme = {
+    container: "flex w-full justify-between items-center gap-4",
+    track: "w-10 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-border)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)]",
+    thumb: "size-5 bg-white rounded-full shadow-md",
+    description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
+};
+/**
+ * Thumb position values for animation
+ */
+var thumbPositions = {
+    checked: { x: 18, y: 2 },
+    unchecked: { x: 2, y: 2 },
+};
+
+export { switchTheme, thumbPositions };

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

@@ -0,0 +1,47 @@
+/**
+ * Position options for the switch label
+ */
+export type SwitchLabelPosition = "start" | "end";
+/**
+ * State variants for the switch component
+ */
+export type SwitchState = 'default' | 'disabled' | 'invalid';
+/**
+ * Switch component props
+ */
+export interface SwitchProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for the switch input */
+    id: string;
+    /** Whether the switch is checked (controlled mode) */
+    checked?: boolean;
+    /** Function called when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** Label text for the switch */
+    label?: string;
+    /** Optional description text */
+    description?: string;
+    /** The state of the switch (default, disabled, invalid) */
+    state?: SwitchState;
+    /** Position of the label relative to the switch */
+    labelPosition?: SwitchLabelPosition;
+    /** Optional theme overrides */
+    theme?: SwitchThemeOverrides;
+}
+/**
+ * Switch theme configuration
+ */
+export interface SwitchTheme {
+    container: string;
+    track: string;
+    thumb: string;
+    description: string;
+}
+/**
+ * Switch theme overrides
+ */
+export interface SwitchThemeOverrides {
+    container?: string;
+    track?: string;
+    thumb?: string;
+    description?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchThemeOverrides } from './Switch.types';
+export { switchTheme } from './Switch.theme';

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { TextareaProps } from "./Textarea.types";
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/forms/Textarea/Textarea.js

@@ -0,0 +1,58 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { textareaTheme } from './Textarea.theme.js';
+
+var Textarea = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e;
+    var _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.state, state = _g === void 0 ? "default" : _g, _h = _a.className, className = _h === void 0 ? "" : _h, label = _a.label, _j = _a.labelClassName, labelClassName = _j === void 0 ? "" : _j, helperText = _a.helperText, _k = _a.helperTextClassName, helperTextClassName = _k === void 0 ? "" : _k, _l = _a.wrapperClassName, wrapperClassName = _l === void 0 ? "" : _l, _m = _a.inputGroupClassName, inputGroupClassName = _m === void 0 ? "" : _m, id = _a.id, _o = _a.theme, theme = _o === void 0 ? {} : _o, required = _a.required, _p = _a.rows, rows = _p === void 0 ? 3 : _p, cols = _a.cols, _q = _a.unstyled, unstyled = _q === void 0 ? false : _q, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "id", "theme", "required", "rows", "cols", "unstyled"]);
+    var _r = useState(false); _r[0]; var setIsFocused = _r[1];
+    var inputId = id || "textarea-".concat(Math.random().toString(36).substring(2, 9));
+    // Derived state flags for internal use
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    // If unstyled, render only the textarea element
+    if (unstyled) {
+        return (React__default.createElement("textarea", __assign({ ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: function (e) {
+                var _a;
+                setIsFocused(true);
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: function (e) {
+                var _a;
+                setIsFocused(false);
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } }, props)));
+    }
+    // State class for CSS selectors
+    var stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Get theme classes
+    var wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
+    var inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
+    var baseClasses = theme.baseStyle || textareaTheme.baseStyle || "";
+    var sizeClasses = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || ((_c = textareaTheme.sizes) === null || _c === void 0 ? void 0 : _c[size]) || "";
+    var stateClasses = ((_d = theme.states) === null || _d === void 0 ? void 0 : _d[state]) || ((_e = textareaTheme.states) === null || _e === void 0 ? void 0 : _e[state]) || "";
+    var helperTextClasses = theme.helperText || textareaTheme.helperText || "";
+    return (React__default.createElement("div", { className: "".concat(wrapperClasses, " ").concat(stateClass, " ").concat(wrapperClassName) },
+        label && (React__default.createElement("div", { className: "mb-1" },
+            React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required }, label))),
+        React__default.createElement("div", null,
+            React__default.createElement("div", { className: "".concat(inputGroupClasses, " ").concat(stateClasses, " ").concat(inputGroupClassName) },
+                React__default.createElement("div", { className: "relative flex-1" },
+                    React__default.createElement("textarea", __assign({ ref: ref, id: inputId, className: "\n                  ".concat(baseClasses, "\n                  ").concat(sizeClasses, "\n                  ").concat(className, "\n                "), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: function (e) {
+                            var _a;
+                            setIsFocused(true);
+                            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        }, onBlur: function (e) {
+                            var _a;
+                            setIsFocused(false);
+                            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        } }, props))))),
+        helperText && (React__default.createElement("div", { className: "".concat(helperTextClasses, " ").concat(helperTextClassName) }, helperText))));
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

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

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

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

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Textarea component
+ * Extends the common forms base theme
+ */
+var textareaTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - extends the common input group style
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base textarea styles - extends the common control base style
+    baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " resize-y"),
+    // Size variants - composed from atomic tokens
+    sizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.textareaHeight),
+        md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.textareaHeight),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " ").concat(formsBaseTheme.sizes.lg.padding, " ").concat(formsBaseTheme.sizes.lg.textareaHeight),
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { textareaTheme };

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

@@ -0,0 +1,57 @@
+import React from 'react';
+/**
+ * Textarea component props
+ * @property {TextareaSize} size - The size of the textarea
+ * @property {TextareaState} state - The state of the textarea (default, disabled, invalid)
+ * @property {string} label - Optional label text for the textarea
+ * @property {string} helperText - Optional helper text displayed below the textarea
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** The size of the textarea */
+    size?: TextareaSize;
+    /** The state of the textarea (default, disabled, invalid) */
+    state?: TextareaState;
+    /** Optional label text for the textarea */
+    label?: string;
+    /** Optional helper text displayed below the textarea */
+    helperText?: string;
+    /** Additional class name for the textarea */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Additional class name for the input group */
+    inputGroupClassName?: string;
+    /** Component-level theme overrides */
+    theme?: TextareaThemeOverrides;
+    /** Whether the textarea is required */
+    required?: boolean;
+    /** Number of rows */
+    rows?: number;
+    /** Number of columns */
+    cols?: number;
+    /** Render only the textarea element without wrapper, label, or helper text */
+    unstyled?: boolean;
+}
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the Textarea component
+ */
+export interface TextareaThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the input group container (textarea + addons) */
+    inputGroupStyle?: string;
+    /** Base style for the textarea element */
+    baseStyle?: string;
+    /** Size variants for the textarea */
+    sizes?: Partial<Record<TextareaSize, string>>;
+    /** State variants for the textarea */
+    states?: Partial<Record<TextareaState, string>>;
+    /** Base style for the helper text */
+    helperText?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSize, TextareaState, TextareaThemeOverrides } from './Textarea.types';
+export { textareaTheme } from './Textarea.theme';

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

@@ -0,0 +1,177 @@
+/**
+ * Animation variants for TimePicker component using Framer Motion
+ *
+ * These animations provide smooth transitions for the dropdown
+ * and interactive feedback for the time selectors.
+ */
+export declare const timePickerAnimations: {
+    dropdown: {
+        initial: {
+            opacity: number;
+            y: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: number[];
+            };
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    selectorItem: {
+        initial: {
+            opacity: number;
+            x: number;
+        };
+        animate: {
+            opacity: number;
+            x: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        hover: {
+            scale: number;
+            backgroundColor: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        tap: {
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        selected: {
+            scale: number;
+            backgroundColor: string;
+            borderLeftColor: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    clearButton: {
+        initial: {
+            opacity: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        hover: {
+            scale: number;
+            backgroundColor: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        tap: {
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    columnHeader: {
+        initial: {
+            opacity: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+                ease: string;
+                delay: number;
+            };
+        };
+    };
+    selectorColumns: {
+        animate: {
+            transition: {
+                staggerChildren: number;
+                delayChildren: number;
+            };
+        };
+    };
+    inputField: {
+        focus: {
+            borderColor: string;
+            boxShadow: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        blur: {
+            borderColor: string;
+            boxShadow: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    errorMessage: {
+        initial: {
+            opacity: number;
+            y: number;
+            height: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            height: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            height: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    springSelection: {
+        type: string;
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    scrollToSelected: {
+        type: string;
+        duration: number;
+        ease: string;
+    };
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TimePickerProps } from './TimePicker.types';
+interface TimePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    theme: any;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    hasValue: boolean;
+    size: 'sm' | 'md' | 'lg';
+    state: 'default' | 'disabled' | 'invalid';
+}
+export declare const TimePickerContext: React.Context<TimePickerContextType | undefined>;
+/**
+ * Main TimePicker Component
+ */
+export declare const TimePicker: React.FC<TimePickerProps>;
+export {};