@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,13 +1,39 @@
-export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+/**
+ * State variants for the InputOTP component
+ */
+export type InputOTPState = 'default' | 'disabled' | 'invalid';
+/**
+ * Character sets accepted by the InputOTP component
+ */
+export type InputOTPCharset = 'numeric' | 'alphanumeric';
+/**
+ * Slot size variants for the InputOTP component.
+ *
+ * `sm`/`md`/`lg` resolve to the same heights as the equivalent `Input` size,
+ * so an OTP lines up with adjacent controls. `xl` has no form-ramp
+ * counterpart — an OTP slot is a square display element and legitimately
+ * wants a size above the form ramp's top rung.
+ */
+export type InputOTPSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /**
      * Number of OTP input fields
      * @default 6
      */
     length?: number;
     /**
-     * Current OTP value
+     * Size of the OTP slots.
+     * @default 'lg'
+     */
+    size?: InputOTPSize;
+    /**
+     * Current OTP value (controlled)
      */
     value?: string;
+    /**
+     * Default OTP value (uncontrolled)
+     */
+    defaultValue?: string;
     /**
      * Callback when OTP value changes
      */
@@ -16,21 +42,44 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * Callback when OTP is complete (all fields filled)
      */
     onComplete?: (value: string) => void;
+    /**
+     * Which characters the code accepts. Drives the sanitizer (typed and pasted
+     * characters outside the set are stripped), the native `pattern` attribute,
+     * and the mobile keyboard via `inputMode` (`'numeric'` → numeric keypad,
+     * `'alphanumeric'` → standard text keyboard).
+     * @default 'alphanumeric'
+     */
+    charset?: InputOTPCharset;
+    /**
+     * Visual and functional state of the OTP input group.
+     * Use 'disabled' instead of the deprecated `disabled` boolean prop.
+     * Use 'invalid' instead of the deprecated `error` string prop.
+     * @default 'default'
+     */
+    state?: InputOTPState;
     /**
      * Whether the input is disabled
+     * @deprecated Use `state='disabled'` instead.
      * @default false
      */
     disabled?: boolean;
     /**
      * Label for the OTP input group
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Helper text below the inputs
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over both `helperText` and the deprecated `error` string
+     * while invalid; `helperText`/`error` are unaffected otherwise.
+     */
+    errorMessage?: React.ReactNode;
     /**
      * Error message
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
      */
     error?: string;
     /**
@@ -42,8 +91,25 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 export interface InputOTPTheme {
     wrapperStyle: string;
     containerStyle: string;
-    inputStyle: string;
-    inputGroupStyle: string;
+    /**
+     * Slot geometry (square size + centering) per size, layered over
+     * `formsBaseTheme.inputGroupBaseStyle`.
+     */
+    inputGroupSizes: Record<InputOTPSize, string>;
+    /**
+     * Digit type per size, applied to the slot WRAPPER (not the digit span) so
+     * the digit inherits it and the caret can size in `em`. Runs one rung
+     * hotter than form body text — a display numeral, not label text.
+     */
+    charSizes: Record<InputOTPSize, string>;
+    /**
+     * Hover-edge guard for the JS-driven active slot. The hidden input lives
+     * outside the slot, so `:focus-within` never applies and the base theme's
+     * `not-focus-within:hover:` border change would otherwise override the
+     * active (primary) border on hover — this re-asserts primary under the same
+     * variant (mirrors `Input.theme.ts` states.invalid's hover re-assert).
+     */
+    slotActiveHoverGuard: string;
     separatorStyle: string;
     helperText: string;
 }

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

@@ -1,3 +1,3 @@
 export { InputOTP } from './InputOTP';
-export type { InputOTPProps, InputOTPTheme } from './InputOTP.types';
+export type { InputOTPProps, InputOTPTheme, InputOTPSize } from './InputOTP.types';
 export { inputOTPTheme } from './InputOTP.theme';

package/dist/components/forms/InputTag/InputTag.js

@@ -1,53 +1,31 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
-import { TagIcon, PlusIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { Tag, Plus, Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
-import { Tag } from '../../core/Tag/Tag.js';
+import { Tag as Tag$1 } from '../../core/Tag/Tag.js';
 import { inputTagTheme } from './InputTag.theme.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * Default filter function for suggestions
  */
 const defaultFilterFn = (option, inputValue) => {
     return option.label.toLowerCase().includes(inputValue.toLowerCase());
 };
-const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selectedTags, highlightedIndex, setHighlightedIndex, onSelectOption, showSelectedIndicator, portal, placement, offset, emptyMessage, className, theme, }) => {
+const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selectedTags, highlightedIndex, setHighlightedIndex, onSelectOption, showSelectedIndicator, portal, placement, offset, emptyMessage, className, theme, elevation, lift, listboxId, }) => {
     var _a;
+    // Relative elevation: the suggestion dropdown lifts above its host surface
+    // (overlay base = 5) so an InputTag inside a Popover/Modal still reads higher.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const optionsRef = useRef(null);
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
@@ -87,7 +65,7 @@ const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selecte
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, onClose, portal, contentRef, optionsRef, triggerRef]);
-    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, role: "listbox", className: cn(theme.dropdownStyle, className), style: {
+    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, id: listboxId, role: "listbox", className: cn(surfaceClasses(surfaceLevel, { translucent: true }), theme.dropdownStyle, className), style: {
                 ...cssVariables,
                 overscrollBehavior: "contain",
                 ...(portal
@@ -97,18 +75,18 @@ const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selecte
                         width: `${position.width}px`,
                     }
                     : {}),
-            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: filteredOptions.length === 0 ? (jsx("div", { className: theme.emptyMessageStyle, children: emptyMessage })) : (filteredOptions.map((option, index) => {
-                const isSelected = selectedTags.includes(option.value);
-                const isHighlighted = index === highlightedIndex;
-                const isCreateOption = option.id === "__create__";
-                return (jsx("div", { role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(theme.optionStyle, isHighlighted && theme.highlightedOptionStyle, option.disabled && theme.disabledOptionStyle, isCreateOption && theme.createOptionStyle), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
-                        if (!option.disabled) {
-                            onSelectOption(option, isCreateOption);
-                        }
-                    }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsxs("span", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "block truncate", children: option.label }), showSelectedIndicator && isSelected && (jsx(CheckIcon, { className: "size-4 shrink-0 text-[var(--color-primary)]", strokeWidth: 2 }))] })) }, option.id));
-            })) })) }));
+            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: filteredOptions.length === 0 ? (jsx("div", { className: theme.emptyMessageStyle, children: emptyMessage })) : (jsxs(Fragment, { children: [(filteredOptions.length > 100 ? filteredOptions.slice(0, 100) : filteredOptions).map((option, index) => {
+                            const isSelected = selectedTags.includes(option.value);
+                            const isHighlighted = index === highlightedIndex;
+                            const isCreateOption = option.id === "__create__";
+                            return (jsx("div", { role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(theme.optionStyle, isHighlighted && theme.highlightedOptionStyle, option.disabled && theme.disabledOptionStyle, isCreateOption && theme.createOptionStyle), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
+                                    if (!option.disabled) {
+                                        onSelectOption(option, isCreateOption);
+                                    }
+                                }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(Plus, { className: "size-4 shrink-0", weight: "bold" }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsxs("span", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "block truncate", children: option.label }), showSelectedIndicator && isSelected && (jsx(Check, { className: "size-4 shrink-0 text-[var(--color-primary)]", weight: "bold" }))] })) }, option.id));
+                        }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] })) }) })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
     return optionsContent;
 };
@@ -154,7 +132,7 @@ const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selecte
  */
 const InputTag = React__default.forwardRef(({ value, defaultValue = [], onChange, maxTags, allowDuplicates = false, size = "md", state = "default", label, helperText, placeholder = "Add a tag...", disabled = false, className, inputClassName, tagsContainerClassName, tagClassName, theme: customTheme, 
 // Dropdown props
-suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No suggestions", createLabel, hideSelected = true, showSelectedIndicator = false, portal = true, placement = "bottom-start", offset = 8, dropdownClassName, ...props }, ref) => {
+suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No suggestions", createLabel, hideSelected = true, showSelectedIndicator = false, portal = true, placement = "bottom-start", offset = 8, dropdownClassName, elevation, lift, ...props }, ref) => {
     // Merge default theme with custom theme overrides
     const theme = useMemo(() => ({
         ...inputTagTheme,
@@ -162,6 +140,10 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
     }), [customTheme]);
     // Determine if dropdown mode is enabled
     const hasDropdown = suggestions !== undefined && suggestions.length > 0;
+    // id for the suggestions listbox — wired to the trigger's aria-controls
+    // (role="combobox" requires it per ARIA's required-attributes rule).
+    const generatedListboxId = React__default.useId();
+    const listboxId = `${generatedListboxId}-listbox`;
     // Internal state for tags (controlled/uncontrolled pattern)
     const [internalTags, setInternalTags] = useState(defaultValue || []);
     const [inputValue, setInputValue] = useState("");
@@ -171,6 +153,9 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
     const warningTimeoutRef = useRef(null);
+    // Guards against the dropdown reopening when handleSelectOption refocuses
+    // the input after a click-selection (mirrors Combobox's justSelectedRef).
+    const justSelectedRef = useRef(false);
     // Determine if component is controlled
     const isControlled = value !== undefined;
     const tags = isControlled ? value : internalTags;
@@ -344,6 +329,9 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
             setInputValue("");
             setIsOpen(false);
             setHighlightedIndex(-1);
+            // Prevent the imminent refocus below from immediately reopening the
+            // dropdown via handleFocus's openOnFocus check.
+            justSelectedRef.current = true;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [addTag]);
@@ -417,22 +405,51 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
         tags.length,
         removeTag,
     ]);
-    // Handle paste
+    // Handle paste — parse every comma-separated value and commit them all in
+    // ONE state update. addTag() closes over the `tags` in scope at the time
+    // it's called, so calling it in a loop/forEach means every call after the
+    // first still sees the pre-paste array and each commit overwrites the
+    // previous one (only the last tag would survive). Building the full valid
+    // list up front and calling updateTags() once avoids that stale closure.
     const handlePaste = useCallback((e) => {
         e.preventDefault();
         const pastedText = e.clipboardData.getData("text");
-        // Split by comma and add each tag
         const pastedTags = pastedText
             .split(",")
             .map((t) => t.trim())
             .filter(Boolean);
-        if (pastedTags.length > 0) {
-            pastedTags.forEach((tag) => addTag(tag));
-            setInputValue("");
+        if (pastedTags.length === 0)
+            return;
+        const validTags = [];
+        const duplicateTags = [];
+        for (const tag of pastedTags) {
+            // Respect maxTags across the whole batch, not just the existing tags.
+            if (maxTags && tags.length + validTags.length >= maxTags)
+                break;
+            if (!allowDuplicates &&
+                (tags.includes(tag) || validTags.includes(tag))) {
+                if (!duplicateTags.includes(tag)) {
+                    duplicateTags.push(tag);
+                }
+                continue;
+            }
+            validTags.push(tag);
         }
-    }, [addTag]);
+        if (duplicateTags.length > 0) {
+            showDuplicateWarning(duplicateTags[0]);
+        }
+        if (validTags.length > 0) {
+            updateTags([...tags, ...validTags]);
+        }
+        setInputValue("");
+    }, [tags, maxTags, allowDuplicates, updateTags, showDuplicateWarning]);
     // Handle focus
     const handleFocus = useCallback(() => {
+        // Skip reopening if we just selected an option and are being refocused.
+        if (justSelectedRef.current) {
+            justSelectedRef.current = false;
+            return;
+        }
         if (hasDropdown && openOnFocus && !disabled) {
             setIsOpen(true);
         }
@@ -475,13 +492,13 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
     }, [tags]);
     // Helper text to display (for dropdown mode, we render it separately)
     const displayHelperText = duplicateWarning || helperText;
-    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxs("div", { ref: wrapperRef, className: "relative", children: [jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, iconStart: jsx(TagIcon, { className: "size-4" }), placeholder: maxTags && tags.length >= maxTags
+    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxs("div", { ref: wrapperRef, className: "relative", children: [jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, iconStart: jsx(Tag, { className: "size-4" }), placeholder: maxTags && tags.length >= maxTags
                             ? `Maximum ${maxTags} tags reached`
                             : placeholder, size: size, state: state, label: label, 
                         // Only pass helperText to Input when NOT in dropdown mode
                         // Otherwise the dropdown positions below the helper text
-                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
-                        return (jsx(Tag, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
+                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, role: hasDropdown ? "combobox" : undefined, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined, "aria-controls": hasDropdown ? listboxId : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme, elevation: elevation, lift: lift, listboxId: listboxId }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
+                        return (jsx(Tag$1, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
                     }) }) })] }));
 });
 InputTag.displayName = "InputTag";

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

@@ -4,7 +4,7 @@ const inputTagTheme = {
     // Tags container style
     tagsContainerStyle: "flex flex-wrap gap-2 mt-2",
     // Dropdown styles - reuse from formsBaseTheme for consistency
-    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
+    dropdownStyle: formsBaseTheme.dropdownStyles.container,
     optionStyle: formsBaseTheme.dropdownStyles.option,
     selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
     highlightedOptionStyle: formsBaseTheme.dropdownStyles.optionHighlighted,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { InputState } from "../Input";
 import { TagSize } from "../../core/Tag";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * Option type for InputTag suggestions dropdown
  */
@@ -33,9 +34,9 @@ export interface InputTagProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** The state of the input */
     state?: InputTagState;
     /** Label for the input */
-    label?: string;
+    label?: React.ReactNode;
     /** Helper text displayed below the tags */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Placeholder text for the input */
     placeholder?: string;
     /** Whether the input is disabled */
@@ -74,6 +75,13 @@ export interface InputTagProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     offset?: number;
     /** Additional class name for the dropdown */
     dropdownClassName?: string;
+    /**
+     * Pin the suggestion dropdown surface elevation rung (overrides the automatic
+     * relative lift) — a rung number (1–8) or a semantic alias.
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the dropdown's base rung. */
+    lift?: boolean;
 }
 export type InputTagSize = TagSize;
 export type InputTagState = InputState;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import type { MentionProps } from "./Mention.types";
-export declare const Mention: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Mention: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLDivElement>>;