flikkui 0.2.0-beta.2 → 0.2.0-beta.5

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

@@ -0,0 +1,60 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Combobox component
+ * Extends the common forms base theme
+ */
+const comboboxTheme = {
+    // Container style for the entire combobox component
+    containerStyle: formsBaseTheme.wrapperStyle,
+    // Wrapper style
+    wrapperStyle: "relative w-full",
+    // Input group styles - extends the common input group style
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base input styles
+    inputStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3 pr-8 ` +
+        "cursor-text",
+    // Placeholder text style
+    inputPlaceholderStyle: formsBaseTheme.placeholderStyle,
+    // Size variants - composed from atomic tokens
+    sizes: {
+        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,
+    // Focus state variants - inherited from common form theme
+    focusStates: formsBaseTheme.focusStates,
+    // Icon positioning styles
+    iconStartStyle: formsBaseTheme.iconStyles.left,
+    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-500)]",
+    // Icon padding configuration
+    iconPadding: formsBaseTheme.iconStyles.padding,
+    // Clear button styles
+    clearButtonStyle: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
+        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
+    clearIconStyle: "size-4",
+    // Dropdown styles - matches Select component for consistency
+    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
+    // Individual option style
+    optionStyle: formsBaseTheme.dropdownStyles.option,
+    // Selected option style
+    selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
+    // Highlighted option style (keyboard navigation)
+    highlightedOptionStyle: formsBaseTheme.dropdownStyles.optionHighlighted,
+    // Disabled option style
+    disabledOptionStyle: formsBaseTheme.dropdownStyles.optionDisabled,
+    // Empty message style
+    emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,
+    // Create option style
+    createOptionStyle: formsBaseTheme.dropdownStyles.optionCreate,
+    // Helper text style - inherited from common form theme
+    helperTextStyle: formsBaseTheme.helperText,
+    // Helper text state variants
+    helperTextStates: formsBaseTheme.helperTextStates,
+};
+
+export { comboboxTheme };

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

@@ -0,0 +1,111 @@
+import React from "react";
+/**
+ * Individual option for Combobox
+ */
+export interface ComboboxOption<T = string> {
+    /** Unique identifier for the option */
+    id: string;
+    /** Display label shown in dropdown */
+    label: string;
+    /** Value stored when option is selected */
+    value: T;
+    /** Whether option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Size variants for Combobox
+ */
+export type ComboboxSize = "sm" | "md" | "lg";
+/**
+ * State variants for Combobox
+ */
+export type ComboboxState = "default" | "disabled" | "invalid";
+/**
+ * Props for the Combobox component
+ */
+export interface ComboboxProps<T = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Array of options to display */
+    options: ComboboxOption<T>[];
+    /** Currently selected value */
+    value?: T;
+    /** Callback when value changes */
+    onChange?: (value: T | undefined) => void;
+    /** Placeholder text when no value is selected */
+    placeholder?: string;
+    /** Label text displayed above the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Size variant */
+    size?: ComboboxSize;
+    /** State variant (controls styling) */
+    state?: ComboboxState;
+    /** Whether the clear button is shown (default: true) */
+    clearable?: boolean;
+    /** Icon displayed at the start of the input */
+    iconStart?: React.ReactNode;
+    /** Whether to open dropdown on focus (default: true) */
+    openOnFocus?: boolean;
+    /** Custom filter function */
+    filterFn?: (option: ComboboxOption<T>, inputValue: string) => boolean;
+    /** Message shown when no options match the filter */
+    emptyMessage?: string;
+    /** Whether to allow creating new options */
+    creatable?: boolean;
+    /** Callback when a new option is created */
+    onCreateOption?: (inputValue: string) => void;
+    /** Label for the create option - can be a string or function */
+    createLabel?: string | ((inputValue: string) => string);
+    /** Whether the input is required */
+    required?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Additional className for the wrapper */
+    wrapperClassName?: string;
+    /** Additional className for the input */
+    inputClassName?: string;
+    /** Additional className for the dropdown */
+    dropdownClassName?: string;
+    /** Theme overrides */
+    theme?: ComboboxThemeOverrides;
+    /** Whether to use portal for dropdown positioning (default: true) */
+    portal?: boolean;
+    /** Dropdown placement */
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    /** Offset from trigger */
+    offset?: number;
+}
+/**
+ * Theme configuration for Combobox
+ */
+export interface ComboboxTheme {
+    containerStyle: string;
+    wrapperStyle: string;
+    inputGroupStyle: string;
+    inputStyle: string;
+    inputPlaceholderStyle: string;
+    sizes: Record<ComboboxSize, string>;
+    states: Record<ComboboxState, string>;
+    focusStates: Record<ComboboxState, string>;
+    iconStartStyle: string;
+    iconEndStyle: string;
+    iconPadding: {
+        left: string;
+        right: string;
+    };
+    clearButtonStyle: string;
+    clearIconStyle: string;
+    dropdownStyle: string;
+    optionStyle: string;
+    selectedOptionStyle: string;
+    highlightedOptionStyle: string;
+    disabledOptionStyle: string;
+    emptyMessageStyle: string;
+    createOptionStyle: string;
+    helperTextStyle: string;
+    helperTextStates: Partial<Record<ComboboxState, string>>;
+}
+/**
+ * Partial theme overrides for Combobox
+ */
+export type ComboboxThemeOverrides = Partial<ComboboxTheme>;

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

@@ -0,0 +1,3 @@
+export { Combobox } from "./Combobox";
+export { comboboxTheme } from "./Combobox.theme";
+export type { ComboboxProps, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTheme, ComboboxThemeOverrides, } from "./Combobox.types";

package/dist/components/forms/FileUpload/FileUpload.js

@@ -36,6 +36,7 @@ import '../../core/Modal/Modal.js';
 import '../../core/Pagination/Pagination.js';
 import '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
 import '../../core/ProgressiveBlur/ProgressiveBlur.js';
 import '../../core/Segmented/Segmented.js';
 import '../../core/Skeleton/Skeleton.js';
@@ -49,6 +50,7 @@ import '../../core/Tabs/TabsContext.js';
 import '../../core/Tooltip/Tooltip.js';
 import '../../core/Tooltip/Tooltip.animations.js';
 import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
 import '../../core/Alert/Alert.js';
 import '../../core/Toast/Toast.js';
 import '../../core/Toast/ToastProvider.js';

package/dist/components/forms/Input/Input.js

@@ -11,16 +11,7 @@ import '../../../icons/core/DollarIcon.js';
 import '../../../icons/core/TickIcon.js';
 import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
 
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, addonPrefix, addonSuffix, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, value, currencyDecimalPlaces, ...props }, ref) => {
-    // Deprecation warnings for old props
-    if (process.env.NODE_ENV !== 'production') {
-        if (addonPrefix) {
-            console.warn('[Input]: `addonPrefix` is deprecated and will be removed in v0.2.0. Use `contentStart` instead.');
-        }
-        if (addonSuffix) {
-            console.warn('[Input]: `addonSuffix` is deprecated and will be removed in v0.2.0. Use `contentEnd` instead.');
-        }
-    }
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, value, currencyDecimalPlaces, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
@@ -38,26 +29,29 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const defaultSearchIcon = type === "search" && !iconStart ? (React__default.createElement(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
-    // Support both old and new prop names (prefer new)
-    const finalContentStart = contentStart !== null && contentStart !== void 0 ? contentStart : addonPrefix;
-    const finalContentEnd = contentEnd !== null && contentEnd !== void 0 ? contentEnd : addonSuffix;
     // Derived state flags for internal use
     const hasLeftIcon = Boolean(finalLeftIcon);
     const isDisabled = state === "disabled";
     const isInvalid = state === "invalid";
     const hasRightIcon = Boolean(iconEnd);
-    const hasContentStart = Boolean(finalContentStart);
-    const hasContentEnd = Boolean(finalContentEnd);
+    const hasContentStart = Boolean(contentStart);
+    const hasContentEnd = Boolean(contentEnd);
     const hasKeyboardShortcut = Boolean(keyboardShortcut);
     const isPasswordField = type === "password" && passwordToggle;
     const isNumberField = type === "number";
     const displayNumberControls = isNumberField && showNumberControls;
-    const isMaskedInput = ['creditCard', 'expiryDate', 'phone', 'ssn', 'currency'].includes(type);
+    const isMaskedInput = [
+        "creditCard",
+        "expiryDate",
+        "phone",
+        "ssn",
+        "currency",
+    ].includes(type);
     // Password strength indicator flags
     const hasPasswordStrength = type === "password" && (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.show);
-    const strengthPosition = (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.position) || 'right';
-    const showStrengthWithLabel = hasPasswordStrength && strengthPosition === 'right';
-    const showStrengthBelow = hasPasswordStrength && strengthPosition === 'below';
+    const strengthPosition = (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.position) || "right";
+    const showStrengthWithLabel = hasPasswordStrength && strengthPosition === "right";
+    const showStrengthBelow = hasPasswordStrength && strengthPosition === "below";
     // State class for CSS selectors
     const stateClass = isInvalid
         ? "state-invalid"
@@ -75,7 +69,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         }
     };
     // Determine the actual input type to use
-    const actualInputType = isPasswordField && showPassword ? "text" : (isMaskedInput ? "text" : type);
+    const actualInputType = isPasswordField && showPassword ? "text" : isMaskedInput ? "text" : type;
     // Validate masked inputs
     useEffect(() => {
         if (isMaskedInput && value) {
@@ -155,7 +149,9 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         cursorPositionRef.current = e.target.selectionStart;
         if (isMaskedInput) {
             // Apply masking with options
-            const maskedValue = applyInputMask(originalValue, type, { currencyDecimalPlaces: currencyDecimalPlaces });
+            const maskedValue = applyInputMask(originalValue, type, {
+                currencyDecimalPlaces: currencyDecimalPlaces,
+            });
             // Update the input value
             e.target.value = maskedValue;
             // Adjust cursor position
@@ -169,7 +165,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
                 }, 0);
             }
             // For currency inputs, ensure we immediately validate
-            if (type === 'currency' && isInvalid && onChange) {
+            if (type === "currency" && isInvalid && onChange) {
                 const event = { ...e };
                 onChange(event);
             }
@@ -261,7 +257,8 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         const dotActiveStyle = inputTheme.passwordStrengthIndicator.dotActiveStyle;
         const dotInactiveStyle = inputTheme.passwordStrengthIndicator.dotInactiveStyle;
         // Get color and label based on strength using design tokens
-        const strengthConfig = inputTheme.passwordStrengthIndicator.strengthStyles[strength] || {
+        const strengthConfig = inputTheme.passwordStrengthIndicator
+            .strengthStyles[strength] || {
             label: "Password",
             color: "text-[var(--color-text-muted)]",
         };
@@ -293,10 +290,10 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
             showStrengthWithLabel && (React__default.createElement(PasswordStrengthIndicator, { inline: true })))),
         React__default.createElement("div", null,
             React__default.createElement("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), onClick: handleInputGroupClick, role: "presentation" },
-                hasContentStart && (React__default.createElement("div", { className: cn(contentStyleClasses, contentStartStyle) }, finalContentStart)),
+                hasContentStart && (React__default.createElement("div", { className: cn(contentStyleClasses, contentStartStyle) }, contentStart)),
                 React__default.createElement("div", { className: "relative flex-1" },
-                    React__default.createElement("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) && iconEndPadding, className // User className has highest priority
-                        ), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
+                    React__default.createElement("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
+                            iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
                             var _a;
                             setIsFocused(true);
                             (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -310,8 +307,8 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
                     isPasswordField && React__default.createElement(PasswordToggleButton, null),
                     displayNumberControls && React__default.createElement(NumberButtons, null),
                     hasKeyboardShortcut && (React__default.createElement("div", { className: inputTheme.keyboardShortcutStyle }, keyboardShortcut))),
-                hasContentEnd && (React__default.createElement("div", { className: cn(contentStyleClasses, contentEndStyle) }, finalContentEnd)))),
-        showStrengthBelow && (React__default.createElement(PasswordStrengthIndicator, { inline: false })),
+                hasContentEnd && (React__default.createElement("div", { className: cn(contentStyleClasses, contentEndStyle) }, contentEnd)))),
+        showStrengthBelow && React__default.createElement(PasswordStrengthIndicator, { inline: false }),
         helperText && (React__default.createElement("div", { className: cn(helperTextClasses, helperTextClassName) }, helperText))));
 });
 Input.displayName = "Input";

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

@@ -71,6 +71,21 @@ export declare const applyInputMask: (value: string, type: string, options?: {
  * @returns Whether the value is valid or not
  */
 export declare const validateMaskedInput: (type: string, value: string) => boolean;
+/**
+ * Format time input as HH:MM with real-time validation
+ * Prevents invalid hour/minute values as user types
+ * @param value The raw input value
+ * @param format The time format ('12h' or '24h')
+ * @returns The formatted time string (only valid digits are kept)
+ */
+export declare const formatTimeInput: (value: string, format?: "12h" | "24h") => string;
+/**
+ * Validate if a formatted time string is a complete, valid time
+ * @param value The formatted time string (HH:MM)
+ * @param format The time format ('12h' or '24h')
+ * @returns Whether the time is valid and complete
+ */
+export declare const isValidTimeInput: (value: string, format?: "12h" | "24h") => boolean;
 /**
  * Get cursor position after applying a mask
  * This helps maintain the cursor position when formatting

package/dist/components/forms/Input/inputMasks.js

@@ -299,6 +299,77 @@ const validateMaskedInput = (type, value) => {
             return true;
     }
 };
+/**
+ * Format time input as HH:MM with real-time validation
+ * Prevents invalid hour/minute values as user types
+ * @param value The raw input value
+ * @param format The time format ('12h' or '24h')
+ * @returns The formatted time string (only valid digits are kept)
+ */
+const formatTimeInput = (value, format = '24h') => {
+    const digitsOnly = value.replace(/\D/g, '');
+    if (digitsOnly.length === 0)
+        return '';
+    const maxHourFirstDigit = format === '24h' ? 2 : 1;
+    const maxHour = format === '24h' ? 23 : 12;
+    const minHour = format === '12h' ? 1 : 0;
+    // First digit of hour
+    if (digitsOnly.length === 1) {
+        const d = parseInt(digitsOnly[0], 10);
+        if (d > maxHourFirstDigit)
+            return ''; // reject
+        return digitsOnly;
+    }
+    // Second digit of hour
+    if (digitsOnly.length === 2) {
+        const hour = parseInt(digitsOnly.slice(0, 2), 10);
+        if (hour > maxHour || (format === '12h' && hour < minHour)) {
+            return digitsOnly.slice(0, 1); // reject second digit
+        }
+        return `${digitsOnly}:`;
+    }
+    // First digit of minute
+    if (digitsOnly.length === 3) {
+        parseInt(digitsOnly.slice(0, 2), 10);
+        const minTens = parseInt(digitsOnly[2], 10);
+        if (minTens > 5)
+            return `${digitsOnly.slice(0, 2)}:`; // reject — minute tens max is 5
+        return `${digitsOnly.slice(0, 2)}:${digitsOnly.slice(2)}`;
+    }
+    // Second digit of minute (complete time)
+    if (digitsOnly.length >= 4) {
+        parseInt(digitsOnly.slice(0, 2), 10);
+        const minute = parseInt(digitsOnly.slice(2, 4), 10);
+        if (minute > 59) {
+            return `${digitsOnly.slice(0, 2)}:${digitsOnly.slice(2, 3)}`; // reject fourth digit
+        }
+        return `${digitsOnly.slice(0, 2)}:${digitsOnly.slice(2, 4)}`;
+    }
+    return digitsOnly;
+};
+/**
+ * Validate if a formatted time string is a complete, valid time
+ * @param value The formatted time string (HH:MM)
+ * @param format The time format ('12h' or '24h')
+ * @returns Whether the time is valid and complete
+ */
+const isValidTimeInput = (value, format = '24h') => {
+    if (value.length !== 5)
+        return false;
+    const match = value.match(/^(\d{2}):(\d{2})$/);
+    if (!match)
+        return false;
+    const hour = parseInt(match[1], 10);
+    const minute = parseInt(match[2], 10);
+    if (minute < 0 || minute > 59)
+        return false;
+    if (format === '24h') {
+        return hour >= 0 && hour <= 23;
+    }
+    else {
+        return hour >= 1 && hour <= 12;
+    }
+};
 /**
  * Get cursor position after applying a mask
  * This helps maintain the cursor position when formatting
@@ -357,4 +428,4 @@ const getAdjustedCursorPosition = (previousValue, currentValue, previousPosition
     return previousPosition;
 };
 
-export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, getAdjustedCursorPosition, isValidDateInput, isValidMonth, validateMaskedInput };
+export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, formatTimeInput, getAdjustedCursorPosition, isValidDateInput, isValidMonth, isValidTimeInput, validateMaskedInput };

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { InputTagProps } from "./InputTag.types";
+/**
+ * InputTag component for entering multiple tags/keywords.
+ *
+ * Supports:
+ * - Enter key to add tag
+ * - Comma to add tag
+ * - Paste multiple comma-separated values
+ * - Backspace to remove last tag (when input is empty)
+ * - Click X to remove individual tags
+ * - Optional dropdown suggestions with filtering
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic free-form tags (uncontrolled)
+ * <InputTag
+ *   defaultValue={['JavaScript', 'React']}
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ *
+ * // Controlled with max tags
+ * <InputTag
+ *   value={tags}
+ *   onChange={setTags}
+ *   maxTags={5}
+ * />
+ *
+ * // With suggestions dropdown
+ * <InputTag
+ *   suggestions={[
+ *     { id: '1', label: 'React', value: 'react' },
+ *     { id: '2', label: 'Vue', value: 'vue' },
+ *   ]}
+ *   creatable={true}
+ * />
+ * ```
+ */
+export declare const InputTag: React.ForwardRefExoticComponent<InputTagProps & React.RefAttributes<HTMLDivElement>>;