flikkui 0.1.0-beta.11

package/dist/components/forms/DatePicker/DatePickerContent.js

@@ -0,0 +1,182 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext, useState, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar } from '../../core/Calendar/Calendar.js';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+import { DatePickerContext } from './DatePicker.js';
+import { DatePickerPresets } from './DatePickerPresets.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { createDropdownAnimations } from './DatePicker.animations.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';
+
+/**
+ * DatePicker Content Component - contains the Calendar and optional Presets
+ * Uses portal positioning like Select component
+ */
+var DatePickerContent = function (_a) {
+    var isOpen = _a.isOpen, className = _a.className, onClose = _a.onClose, _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.offset, offset = _d === void 0 ? 4 : _d, presets = _a.presets, children = _a.children;
+    var context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePickerContent must be used within a DatePicker');
+    }
+    var mode = context.mode, theme = context.theme, triggerRef = context.triggerRef, contentRef = context.contentRef, selectedValue = context.selectedValue, minDate = context.minDate, maxDate = context.maxDate, isDateDisabled = context.isDateDisabled, showToday = context.showToday, selectTodayByDefault = context.selectTodayByDefault, weekdays = context.weekdays, months = context.months, handleDateSelect = context.handleDateSelect, handleRangeSelect = context.handleRangeSelect;
+    // Determine if we should show presets
+    var showPresets = mode === 'range' && presets && presets.length > 0;
+    // Temp range state for range mode (not committed until Apply is clicked)
+    var _e = useState(mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+        ? selectedValue
+        : undefined), tempRange = _e[0], setTempRange = _e[1];
+    // Handle preset selection - update calendar view to show the range
+    var handlePresetSelect = function (range) {
+        if (range.start) {
+            setLeftCalendarDate(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+    };
+    // Dual calendar state for range mode
+    var getInitialLeftDate = function () {
+        if (mode === 'range' && (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start)) {
+            return tempRange.start;
+        }
+        if (mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue) {
+            return selectedValue.start || new Date();
+        }
+        return new Date();
+    };
+    var _f = useState(getInitialLeftDate), leftCalendarDate = _f[0], setLeftCalendarDate = _f[1];
+    // Right calendar always shows next month
+    var rightCalendarDate = useMemo(function () {
+        var nextMonth = new Date(leftCalendarDate);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    }, [leftCalendarDate]);
+    // Navigation handlers for dual calendar
+    var handleNavigatePrev = function () {
+        setLeftCalendarDate(function (prev) {
+            var newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate;
+        });
+    };
+    var handleNavigateNext = function () {
+        setLeftCalendarDate(function (prev) {
+            var newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate;
+        });
+    };
+    // Footer handlers for range mode
+    var handleApply = function () {
+        if (tempRange && mode === 'range') {
+            handleRangeSelect === null || handleRangeSelect === void 0 ? void 0 : handleRangeSelect(tempRange); // Commit the temp range
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    var handleCancel = function () {
+        // Reset temp range to committed value
+        setTempRange(selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+            ? selectedValue
+            : undefined);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    // Format range for footer display
+    var formatRangeDisplay = function (range) {
+        if (!(range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end))
+            return 'Select start and end dates';
+        if (!range.end)
+            return "".concat(formatDateCustom(range.start, 'DD/MM/YYYY'), " - ...");
+        return "".concat(formatDateCustom(range.start, 'DD/MM/YYYY'), " - ").concat(formatDateCustom(range.end, 'DD/MM/YYYY'));
+    };
+    // Use simplified dropdown positioning hook (same as Select)
+    var _g = useSelectPortal({
+        triggerRef: triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset,
+        autoWidth: true, // Allow dropdown to size to its content
+    }), position = _g.position, cssVariables = _g.cssVariables, portalContentRef = _g.contentRef, isFlipped = _g.isFlipped, isReady = _g.isReady;
+    // Create direction-aware animations based on dropdown placement
+    var animations = createDropdownAnimations(isFlipped);
+    // Combine refs for portal and legacy usage
+    var combinedRef = React__default.useCallback(function (el) {
+        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+            contentRef.current = el;
+        }
+        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [contentRef, portalContentRef]);
+    // Handle click outside to close
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleClickOutside = function (event) {
+            var currentContentRef = portal ? portalContentRef.current : contentRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(event.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
+    // Handle escape key
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape') {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    var contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: __assign(__assign({}, cssVariables), (portal ? {
+            top: "".concat(position.top, "px"),
+            left: "".concat(position.left, "px"),
+            minWidth: "".concat(position.width, "px"),
+        } : {})), variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit" },
+        showPresets && presets && (React__default.createElement(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })),
+        React__default.createElement("div", { className: "flex flex-col flex-1" }, mode === 'range' ? (
+        // Dual calendar for range mode
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "flex justify-between items-start gap-6 p-4" }, children || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "flex-1 min-w-fit" },
+                    React__default.createElement(Calendar, { mode: "range", value: tempRange, onChange: function (value) {
+                            setTempRange(value); // Update temp state only
+                        }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })),
+                React__default.createElement("div", { className: "flex-1 min-w-fit" },
+                    React__default.createElement(Calendar, { mode: "range", value: tempRange, onChange: function (value) {
+                            setTempRange(value); // Update temp state only
+                        }, viewDate: rightCalendarDate, onViewDateChange: function (newDate) {
+                            // Adjust left calendar when right calendar changes
+                            var adjustedLeft = new Date(newDate);
+                            adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                            setLeftCalendarDate(adjustedLeft);
+                        }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, size: "md" }))))),
+            React__default.createElement("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]" },
+                React__default.createElement("div", { className: "text-sm text-[var(--color-text-secondary)]" }, formatRangeDisplay(tempRange)),
+                React__default.createElement("div", { className: "flex items-center gap-2" },
+                    React__default.createElement(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel }, "Cancel"),
+                    React__default.createElement(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end) }, "Apply"))))) : (
+        // Single calendar for single mode
+        React__default.createElement("div", { className: "flex-1 p-4" }, children || (React__default.createElement(Calendar, { mode: "single", value: selectedValue, onChange: function (value) {
+                handleDateSelect(value);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })))))))));
+    // Use portal if enabled and client-side
+    return portal && typeof document !== 'undefined'
+        ? createPortal(contentElement, document.body)
+        : contentElement;
+};
+
+export { DatePickerContent };

package/dist/components/forms/DatePicker/DatePickerPresets.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DateRangePreset, DateRange } from './DatePicker.types';
+/**
+ * DatePicker Presets Component - displays preset date range buttons
+ */
+export interface DatePickerPresetsProps {
+    presets: DateRangePreset[];
+    className?: string;
+    setTempRange?: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+    onPresetSelect?: (range: DateRange) => void;
+}
+export declare const DatePickerPresets: React.FC<DatePickerPresetsProps>;

package/dist/components/forms/DatePicker/DatePickerPresets.js

@@ -0,0 +1,41 @@
+import React__default, { useContext } from 'react';
+import { DatePickerContext } from './DatePicker.js';
+import { cn } from '../../../utils/cn.js';
+
+var DatePickerPresets = function (_a) {
+    var presets = _a.presets, className = _a.className, setTempRange = _a.setTempRange, onPresetSelect = _a.onPresetSelect;
+    var context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePickerPresets must be used within a DatePicker');
+    }
+    var theme = context.theme, selectedValue = context.selectedValue;
+    // Check if a preset is currently active (compare against committed selectedValue)
+    var isPresetActive = function (preset) {
+        if (!selectedValue || typeof selectedValue !== 'object' || !('start' in selectedValue)) {
+            return false;
+        }
+        var presetRange = preset.getValue();
+        var currentRange = selectedValue;
+        // Compare dates (ignoring time)
+        var isSameDate = function (d1, d2) {
+            if (!d1 || !d2)
+                return d1 === d2;
+            return (d1.getFullYear() === d2.getFullYear() &&
+                d1.getMonth() === d2.getMonth() &&
+                d1.getDate() === d2.getDate());
+        };
+        return (isSameDate(currentRange.start, presetRange.start) &&
+            isSameDate(currentRange.end, presetRange.end));
+    };
+    var handlePresetClick = function (preset) {
+        var range = preset.getValue();
+        // Update tempRange to show visual selection on calendar
+        // The range is only committed when Apply button is clicked
+        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
+        // Notify parent to adjust calendar view
+        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
+    };
+    return (React__default.createElement("div", { className: cn(theme.presetsContainerStyle, className) }, presets.map(function (preset, index) { return (React__default.createElement("button", { key: index, type: "button", onClick: function () { return handlePresetClick(preset); }, className: theme.presetButtonStyle, "data-active": isPresetActive(preset) }, preset.label)); })));
+};
+
+export { DatePickerPresets };

package/dist/components/forms/DatePicker/DatePickerTrigger.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DatePickerTriggerProps } from './DatePicker.types';
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+export declare const DatePickerTrigger: React.FC<DatePickerTriggerProps>;

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -0,0 +1,37 @@
+import React__default, { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { DatePickerContext } from './DatePicker.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/CalendarIcon.js';
+
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+var DatePickerTrigger = function (_a) {
+    var _b, _c, _d, _e;
+    var id = _a.id, disabled = _a.disabled, isOpen = _a.isOpen, _f = _a.state, state = _f === void 0 ? 'default' : _f, _g = _a.size, size = _g === void 0 ? 'md' : _g, className = _a.className, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children;
+    var context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePickerTrigger must be used within a DatePicker');
+    }
+    var theme = context.theme, triggerRef = context.triggerRef;
+    var baseStyle = theme.baseStyle || "";
+    var sizeStyle = ((_b = theme.triggerSizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
+    var stateStyle = ((_c = theme.triggerStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    var hoverStateStyle = ((_d = theme.triggerHoverStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    var focusStateStyle = ((_e = theme.triggerFocusStates) === null || _e === void 0 ? void 0 : _e[state]) || "";
+    var iconEndStyle = theme.iconEndStyle || "";
+    var iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
+    // Apply focused styles when open - same pattern as SelectButton
+    var activeFocusState = isOpen
+        ? focusStateStyle || "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (React__default.createElement("div", { className: "relative w-full" },
+        React__default.createElement("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, 'w-full cursor-pointer bg-white text-left', className // User overrides take highest precedence
+            ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar" },
+            children,
+            React__default.createElement("span", { className: iconEndStyle },
+                React__default.createElement(ForwardRef, { className: "h-4 w-4" })))));
+};
+
+export { DatePickerTrigger };

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

@@ -0,0 +1,3 @@
+export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
+export { datePickerTheme } from './DatePicker.theme';

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { FileUploadProps } from "./FileUpload.types";
+/**
+ * FileUpload component - Drag-and-drop file uploader with previews
+ *
+ * Features:
+ * - Click to select files or drag-and-drop
+ * - File type and size validation
+ * - Image preview thumbnails
+ * - Multiple file support
+ * - Maximum file limits
+ * - Accessible and keyboard-friendly
+ * - Full theme customization
+ *
+ * @example
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   multiple
+ *   onUpload={(files) => console.log(files)}
+ * />
+ */
+export declare const FileUpload: React.FC<FileUploadProps>;

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

@@ -0,0 +1,25 @@
+/**
+ * Internal theme structure for the FileUpload component
+ */
+interface FileUploadTheme {
+    containerStyle: string;
+    dropzoneStyle: string;
+    dropzoneActiveStyle: string;
+    dropzoneDisabledStyle: string;
+    contentStyle: string;
+    iconStyle: string;
+    textStyle: string;
+    helperTextStyle: string;
+    descriptionStyle: string;
+    previewContainerStyle: string;
+    previewItemStyle: string;
+    previewImageStyle: string;
+    previewFileStyle: string;
+    removeButtonStyle: string;
+}
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const fileUploadTheme: FileUploadTheme;
+export {};

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

@@ -0,0 +1,90 @@
+/**
+ * FileUpload component props
+ * Supports both click-to-upload and drag-and-drop
+ */
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /**
+     * Accepted file types (MIME types or file extensions)
+     * @example ["image/*", ".pdf", ".doc"]
+     */
+    accept?: string | string[];
+    /**
+     * Whether to allow multiple file selection
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Maximum file size in bytes
+     * @example 5000000 // 5MB
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files (when multiple is true)
+     */
+    maxFiles?: number;
+    /**
+     * Whether the upload area is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when files are selected/dropped
+     */
+    onUpload?: (files: File[]) => void;
+    /**
+     * Callback when files are removed
+     */
+    onRemove?: (file: File) => void;
+    /**
+     * Callback when there's an error (invalid file type, size exceeded, etc.)
+     */
+    onError?: (error: FileUploadError) => void;
+    /**
+     * Show preview thumbnails for images
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Custom upload button text
+     * @default "Choose files"
+     */
+    buttonText?: string;
+    /**
+     * Custom dropzone helper text
+     * @default "or drag and drop"
+     */
+    helperText?: string;
+    /**
+     * Helper text displayed below the upload area
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: FileUploadThemeOverrides;
+}
+export interface FileUploadError {
+    type: 'file-too-large' | 'file-invalid-type' | 'too-many-files';
+    message: string;
+    file?: File;
+}
+export interface FileUploadThemeOverrides {
+    containerStyle?: string;
+    dropzoneStyle?: string;
+    dropzoneActiveStyle?: string;
+    dropzoneDisabledStyle?: string;
+    contentStyle?: string;
+    iconStyle?: string;
+    textStyle?: string;
+    helperTextStyle?: string;
+    descriptionStyle?: string;
+    previewContainerStyle?: string;
+    previewItemStyle?: string;
+    previewImageStyle?: string;
+    previewFileStyle?: string;
+    removeButtonStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { FileUpload } from './FileUpload';
+export { fileUploadTheme } from './FileUpload.theme';
+export type { FileUploadProps, FileUploadError } from './FileUpload.types';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormLabelProps } from './FormLabel.types';
+/**
+ * FormLabel component for providing consistent labeling for form elements
+ */
+export declare const FormLabel: React.FC<FormLabelProps>;

package/dist/components/forms/FormLabel/FormLabel.js

@@ -0,0 +1,16 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { formLabelTheme } from './FormLabel.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * FormLabel component for providing consistent labeling for form elements
+ */
+var FormLabel = function (_a) {
+    var htmlFor = _a.htmlFor, children = _a.children, className = _a.className, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.state, state = _c === void 0 ? 'default' : _c, props = __rest(_a, ["htmlFor", "children", "className", "required", "state"]);
+    return (React__default.createElement("label", __assign({ htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className) }, props),
+        children,
+        required && (React__default.createElement("span", { className: formLabelTheme.requiredIndicatorStyle }, "*"))));
+};
+
+export { FormLabel };

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

@@ -0,0 +1,5 @@
+import { FormLabelTheme } from './FormLabel.types';
+/**
+ * Clean theme structure for FormLabel component
+ */
+export declare const formLabelTheme: FormLabelTheme;

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

@@ -0,0 +1,17 @@
+/**
+ * Clean theme structure for FormLabel component
+ */
+var formLabelTheme = {
+    // Base styles for the label element
+    baseStyle: "block text-sm/6 font-medium mb-2",
+    // State variants - using design tokens from global.scss
+    stateStyles: {
+        default: "text-[var(--color-text-primary)]",
+        disabled: "text-[var(--color-text-primary)]/80",
+        invalid: "text-[var(--color-danger)]",
+    },
+    // Required indicator style
+    requiredIndicatorStyle: "text-[var(--color-danger)] ml-1",
+};
+
+export { formLabelTheme };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+/**
+ * State variants for the FormLabel component
+ */
+export type FormLabelState = 'default' | 'disabled' | 'invalid';
+/**
+ * FormLabel component props
+ */
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** The ID of the form element the label is associated with */
+    htmlFor: string;
+    /** The content of the label */
+    children: React.ReactNode;
+    /** Additional class name for the label */
+    className?: string;
+    /** Whether the associated form element is required */
+    required?: boolean;
+    /** The state of the label */
+    state?: FormLabelState;
+}
+/**
+ * FormLabel theme configuration
+ */
+export interface FormLabelTheme {
+    baseStyle: string;
+    stateStyles: Record<FormLabelState, string>;
+    requiredIndicatorStyle: string;
+}

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

@@ -0,0 +1,3 @@
+export { FormLabel } from './FormLabel';
+export { formLabelTheme } from './FormLabel.theme';
+export type { FormLabelProps, FormLabelState, FormLabelTheme } from './FormLabel.types';

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

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