flikkui 0.1.0-beta.11

package/dist/components/forms/InputOTP/InputOTP.js

@@ -0,0 +1,182 @@
+import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { inputOTPTheme } from './InputOTP.theme.js';
+
+/**
+ * InputOTP component for entering one-time passwords or verification codes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputOTP
+ *   length={6}
+ *   value={otpValue}
+ *   onChange={setOtpValue}
+ *   onComplete={handleOtpComplete}
+ *   label="Enter verification code"
+ * />
+ * ```
+ */
+var InputOTP = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.length, length = _b === void 0 ? 6 : _b, _c = _a.value, value = _c === void 0 ? '' : _c, onChange = _a.onChange, onComplete = _a.onComplete, _d = _a.disabled, disabled = _d === void 0 ? false : _d, label = _a.label, helperText = _a.helperText, error = _a.error, _e = _a.autoFocus, autoFocus = _e === void 0 ? true : _e, className = _a.className, props = __rest(_a, ["length", "value", "onChange", "onComplete", "disabled", "label", "helperText", "error", "autoFocus", "className"]);
+    var inputRefs = useRef([]);
+    var theme = inputOTPTheme;
+    // Internal state for uncontrolled usage
+    var _f = useState(''), internalValue = _f[0], setInternalValue = _f[1];
+    // Use controlled value if provided, otherwise use internal state
+    var currentValue = value !== undefined ? value : internalValue;
+    var setValue = onChange || setInternalValue;
+    // Convert value to array of characters
+    var valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
+    // Auto-focus first input on mount
+    useEffect(function () {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus, disabled]);
+    // Handle input change
+    var handleChange = useCallback(function (index, newValue) {
+        var _a;
+        if (disabled)
+            return;
+        // Only allow single character (take last character if multiple)
+        var char = newValue.slice(-1);
+        // Create new value array
+        var newValueArray = __spreadArray([], valueArray, true);
+        newValueArray[index] = char;
+        // Convert back to string and remove trailing spaces
+        var newValueString = newValueArray.join('').trimEnd();
+        setValue(newValueString);
+        // Auto-focus next input if character was entered
+        if (char && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // Check if OTP is complete
+        if (newValueString.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValueString);
+        }
+    }, [disabled, valueArray, length, setValue, onComplete]);
+    // Handle key down for navigation and deletion
+    var handleKeyDown = useCallback(function (index, event) {
+        var _a, _b, _c, _d, _e;
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Backspace':
+                if (!valueArray[index] && index > 0) {
+                    // If current field is empty, move to previous and clear it
+                    event.preventDefault();
+                    (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    handleChange(index - 1, '');
+                }
+                break;
+            case 'Delete':
+                // Clear current field
+                event.preventDefault();
+                handleChange(index, '');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0) {
+                    (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < length - 1) {
+                    (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                (_d = inputRefs.current[0]) === null || _d === void 0 ? void 0 : _d.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                (_e = inputRefs.current[length - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                break;
+        }
+    }, [disabled, valueArray, length, handleChange]);
+    // Handle paste
+    var handlePaste = useCallback(function (event) {
+        var _a;
+        if (disabled)
+            return;
+        event.preventDefault();
+        var pastedData = event.clipboardData.getData('text').slice(0, length);
+        if (pastedData) {
+            setValue(pastedData);
+            // Focus the next empty field or last field
+            var nextIndex = Math.min(pastedData.length, length - 1);
+            (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            // Check if OTP is complete
+            if (pastedData.length === length) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
+            }
+        }
+    }, [disabled, length, setValue, onComplete]);
+    // Handle focus and blur (simplified since we removed focus state)
+    var handleFocus = useCallback(function (index) {
+        // Focus logic can be added here if needed
+    }, []);
+    var handleBlur = useCallback(function () {
+        // Blur logic can be added here if needed
+    }, []);
+    // State class for CSS selectors (matches Input component pattern)
+    var stateClass = error
+        ? "state-invalid"
+        : disabled
+            ? "state-disabled"
+            : "state-default";
+    // Build classes with shadcn pattern - user className has highest priority
+    var wrapperClasses = cn(theme.wrapperStyle, stateClass, className);
+    var containerClasses = cn(theme.containerStyle);
+    // Get input classes based on position within group
+    var getInputClasses = function (index) {
+        if (length === 6) {
+            // For 6-digit: two groups of 3
+            var isFirst = index === 0 || index === 3;
+            var isLast = index === 2 || index === 5;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
+            });
+        }
+        else {
+            // For other lengths: one group
+            var isFirst = index === 0;
+            var isLast = index === length - 1;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
+            });
+        }
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: wrapperClasses }, props),
+        label && (React__default.createElement(FormLabel, { htmlFor: "otp-input-0", state: error ? "invalid" : disabled ? "disabled" : "default" }, label)),
+        React__default.createElement("div", { className: containerClasses }, length === 6 ? (
+        // For 6-digit OTP, create two groups of 3
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) { return (React__default.createElement(Input, { key: i, ref: function (el) {
+                    inputRefs.current[i] = el;
+                }, id: "otp-input-".concat(i), type: "text", value: valueArray[i] || '', onChange: function (e) { return handleChange(i, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(i, e); }, onFocus: function () { return handleFocus(i); }, onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(i), wrapperClassName: "space-y-0" })); })),
+            React__default.createElement("span", { className: theme.separatorStyle }, "\u2014"),
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) {
+                var index = i + 3;
+                return (React__default.createElement(Input, { key: index, ref: function (el) {
+                        inputRefs.current[index] = el;
+                    }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0" }));
+            })))) : (
+        // For other lengths, create one group
+        React__default.createElement("div", { className: "flex" }, Array.from({ length: length }, function (_, index) { return (React__default.createElement(Input, { key: index, ref: function (el) {
+                inputRefs.current[index] = el;
+            }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0" })); })))),
+        (error || helperText) && (React__default.createElement("div", { className: cn(theme.helperText) }, error || helperText))));
+});
+InputOTP.displayName = 'InputOTP';
+
+export { InputOTP };

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

@@ -0,0 +1,6 @@
+import { InputOTPTheme } from './InputOTP.types';
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
+export declare const inputOTPTheme: InputOTPTheme;

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

@@ -0,0 +1,22 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
+var inputOTPTheme = {
+    // Base container styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // OTP input container
+    containerStyle: 'flex items-center gap-3',
+    // Individual input field styles with design tokens
+    inputStyle: 'text-center text-lg text-[var(--color-text-primary)]',
+    // Input group wrapper for grouped inputs (overrides default Input styling)
+    inputGroupStyle: 'w-12 min-w-12 h-12 min-h-12',
+    // Separator between input groups
+    separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
+    // Helper text with state handling (reuses form base)
+    helperText: formsBaseTheme.helperText,
+};
+
+export { inputOTPTheme };

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

@@ -0,0 +1,49 @@
+export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Number of OTP input fields
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Current OTP value
+     */
+    value?: string;
+    /**
+     * Callback when OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when OTP is complete (all fields filled)
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the OTP input group
+     */
+    label?: string;
+    /**
+     * Helper text below the inputs
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Auto-focus the first input on mount
+     * @default true
+     */
+    autoFocus?: boolean;
+}
+export interface InputOTPTheme {
+    wrapperStyle: string;
+    containerStyle: string;
+    inputStyle: string;
+    inputGroupStyle: string;
+    separatorStyle: string;
+    helperText: string;
+}

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

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { RadioProps } from "./Radio.types";
+/**
+ * Radio component for selecting one option from a group
+ */
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/forms/Radio/Radio.js

@@ -0,0 +1,35 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { radioTheme } from './Radio.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Radio component for selecting one option from a group
+ */
+var Radio = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "onChange", "label", "description", "state", "size", "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 handleChange = function (e) {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
+    };
+    return (React__default.createElement("div", __assign({ className: cn(radioTheme.baseStyle, className) }, restProps),
+        React__default.createElement("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]) },
+            React__default.createElement("input", { type: "radio", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(radioTheme.inputStyle, radioTheme.sizes[size]) }),
+            isChecked && (React__default.createElement("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2" : "size-3", "opacity-100") }))),
+        (label || description) && (React__default.createElement("div", { className: "cursor-pointer" },
+            label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: radioTheme.descriptionStyle }, description))))));
+};
+
+export { Radio };

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

@@ -0,0 +1,5 @@
+import { RadioTheme } from "./Radio.types";
+/**
+ * Default theme configuration for the Radio component
+ */
+export declare const radioTheme: RadioTheme;

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

@@ -0,0 +1,16 @@
+/**
+ * Default theme configuration for the Radio component
+ */
+var radioTheme = {
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
+    inputStyle: "peer appearance-none rounded-full border-2 border-[var(--color-border)] bg-white checked:border-[var(--color-primary)] checked:bg-white disabled:border-[var(--color-border)] disabled:bg-[var(--color-background-disabled)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:outline-0 data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed",
+    dotStyle: "absolute pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:opacity-80",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6"
+    }
+};
+
+export { radioTheme };

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

@@ -0,0 +1,35 @@
+import React from 'react';
+/**
+ * State variants for the radio component
+ */
+export type RadioState = 'default' | 'disabled';
+/**
+ * Size variants for the radio component
+ */
+export type RadioSize = 'sm' | 'md';
+/**
+ * Radio component props
+ */
+export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    id: string;
+    name: string;
+    value: string;
+    checked?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    label?: string;
+    description?: string;
+    state?: RadioState;
+    size?: RadioSize;
+    className?: string;
+}
+/**
+ * Radio theme configuration
+ */
+export interface RadioTheme {
+    baseStyle: string;
+    inputContainerStyle: string;
+    inputStyle: string;
+    dotStyle: string;
+    descriptionStyle: string;
+    sizes: Record<RadioSize, string>;
+}

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

@@ -0,0 +1,3 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioSize, RadioState } from './Radio.types';
+export { radioTheme } from './Radio.theme';

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

@@ -0,0 +1,7 @@
+import { Variants } from 'motion/react';
+/**
+ * Floating toolbar animation variants
+ * - Appears from bottom with subtle fade-in using spring animation
+ * - Disappears to top with subtle fade-out
+ */
+export declare const floatingToolbarVariants: Variants;

package/dist/components/forms/RichTextEditor/RichTextEditor.animations.js

@@ -0,0 +1,31 @@
+/**
+ * Floating toolbar animation variants
+ * - Appears from bottom with subtle fade-in using spring animation
+ * - Disappears to top with subtle fade-out
+ */
+var floatingToolbarVariants = {
+    initial: {
+        opacity: 0,
+        y: 4, // Subtle vertical offset from bottom
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 30,
+            mass: 0.8,
+        }
+    },
+    exit: {
+        opacity: 0,
+        y: -4, // Subtle vertical offset to top
+        transition: {
+            duration: 0.15,
+            ease: [0.7, 0, 0.84, 0], // Faster, eased exit
+        }
+    }
+};
+
+export { floatingToolbarVariants };

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

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