@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/input-group/index.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__ from "./InputGroup.js";
+var __webpack_exports__InputGroup = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroup;
+var __webpack_exports__InputGroupInput = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroupInput;
+var __webpack_exports__InputGroupPrefix = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroupPrefix;
+var __webpack_exports__InputGroupRoot = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroupRoot;
+var __webpack_exports__InputGroupSuffix = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroupSuffix;
+var __webpack_exports__InputGroupTextArea = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__.InputGroupTextArea;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__InputGroup_js_50b8d472__["default"];
+export { __webpack_exports__InputGroup as InputGroup, __webpack_exports__InputGroupInput as InputGroupInput, __webpack_exports__InputGroupPrefix as InputGroupPrefix, __webpack_exports__InputGroupRoot as InputGroupRoot, __webpack_exports__InputGroupSuffix as InputGroupSuffix, __webpack_exports__InputGroupTextArea as InputGroupTextArea, __webpack_exports__default as default };

package/dist/components/input-otp/InputOTP.classes.d.ts

@@ -0,0 +1,23 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "input-otp";
+        readonly variant: {
+            readonly primary: "input-otp--primary";
+            readonly secondary: "input-otp--secondary";
+        };
+    };
+    readonly Input: {
+        readonly base: "input-otp__input";
+    };
+    readonly Group: {
+        readonly base: "input-otp__group";
+    };
+    readonly Slot: {
+        readonly base: "input-otp__slot";
+        readonly value: "input-otp__slot-value";
+        readonly caret: "input-otp__caret";
+    };
+    readonly Separator: {
+        readonly base: "input-otp__separator";
+    };
+};

package/dist/components/input-otp/InputOTP.classes.js

@@ -0,0 +1,24 @@
+const CLASSES = {
+    Root: {
+        base: "input-otp",
+        variant: {
+            primary: "input-otp--primary",
+            secondary: "input-otp--secondary"
+        }
+    },
+    Input: {
+        base: "input-otp__input"
+    },
+    Group: {
+        base: "input-otp__group"
+    },
+    Slot: {
+        base: "input-otp__slot",
+        value: "input-otp__slot-value",
+        caret: "input-otp__caret"
+    },
+    Separator: {
+        base: "input-otp__separator"
+    }
+};
+export { CLASSES };

package/dist/components/input-otp/InputOTP.css

@@ -0,0 +1,170 @@
+@layer components {
+  .input-otp {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .input-otp[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .input-otp__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .input-otp__group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .input-otp__slot {
+    position: relative;
+    display: flex;
+    width: 2.375rem;
+    height: 2.5rem;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-field, 0.75rem);
+    border: var(--border-width-field, 1px) solid var(--color-field-border, var(--color-base-300));
+    background-color: var(--color-field, var(--color-base-100));
+    color: var(--color-field-foreground, var(--color-base-content));
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    box-shadow:
+      0 1px 0 color-mix(in oklab, var(--color-base-content) 8%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-base-100) 60%, transparent) inset;
+    outline: none;
+    transition:
+      background-color 150ms var(--ease-smooth),
+      border-color 150ms var(--ease-smooth),
+      box-shadow 150ms var(--ease-out);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .input-otp__slot {
+      transition: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .input-otp__slot:hover:not([data-disabled="true"]) {
+      background-color: var(--color-field-hover, var(--color-base-200));
+      border-color: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
+    }
+  }
+
+  .input-otp__slot[data-active="true"] {
+    z-index: 1;
+    border-color: var(--color-field-border-focus, var(--color-accent));
+    background-color: var(--color-field-focus, var(--color-base-100));
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-accent) 24%, transparent);
+  }
+
+  .input-otp__slot[data-filled="true"] {
+    background-color: var(--color-field-focus, var(--color-base-100));
+  }
+
+  .input-otp__slot[data-disabled="true"] {
+    cursor: not-allowed;
+    border-color: var(--color-base-300);
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    box-shadow: none;
+  }
+
+  .input-otp__slot[data-invalid="true"] {
+    border-color: var(--color-field-border-invalid, var(--color-danger));
+    background-color: var(--color-field-focus, var(--color-base-100));
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-danger) 20%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-danger) 20%, transparent);
+  }
+
+  .input-otp__slot-value {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    letter-spacing: -0.27px;
+    transform-origin: bottom center;
+    animation: input-otp-slot-value-in 250ms var(--ease-smooth) both;
+  }
+
+  .input-otp__caret {
+    position: absolute;
+    width: 2px;
+    height: 1rem;
+    border-radius: 4px;
+    background-color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    animation: input-otp-caret-blink 1.1s step-end infinite;
+  }
+
+  .input-otp__separator {
+    width: 6px;
+    height: 2px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background-color: var(--color-separator, var(--color-base-300));
+  }
+
+  .input-otp--secondary .input-otp__slot {
+    box-shadow: none;
+    background-color: var(--input-otp-slot-bg, var(--color-base-200));
+  }
+
+  @media (hover: hover) {
+    .input-otp--secondary .input-otp__slot:hover:not([data-disabled="true"]) {
+      background-color: var(--input-otp-slot-bg-hover, var(--color-base-300));
+    }
+  }
+
+  .input-otp--secondary .input-otp__slot[data-active="true"],
+  .input-otp--secondary .input-otp__slot[data-filled="true"] {
+    background-color: var(--input-otp-slot-bg-focus, var(--color-base-200));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .input-otp__slot-value,
+    .input-otp__caret {
+      animation: none;
+    }
+  }
+
+  @keyframes input-otp-slot-value-in {
+    0% {
+      opacity: 0;
+      transform: translateY(8px) scale(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes input-otp-caret-blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    50.01%,
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/dist/components/input-otp/InputOTP.d.ts

@@ -0,0 +1,46 @@
+import "./InputOTP.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type InputOTPVariant = "primary" | "secondary";
+export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+export type InputOTPRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onInput"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    maxLength?: number;
+    variant?: InputOTPVariant;
+    pattern?: string;
+    name?: string;
+    autoFocus?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    inputMode?: JSX.InputHTMLAttributes<HTMLInputElement>["inputMode"];
+};
+export type InputOTPGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type InputOTPSlotProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    index: number;
+};
+export type InputOTPSeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const InputOTPRoot: ParentComponent<InputOTPRootProps>;
+declare const InputOTPGroup: ParentComponent<InputOTPGroupProps>;
+declare const InputOTPSlot: Component<InputOTPSlotProps>;
+declare const InputOTPSeparator: ParentComponent<InputOTPSeparatorProps>;
+declare const InputOTP: ParentComponent<InputOTPRootProps> & {
+    Root: ParentComponent<InputOTPRootProps>;
+    Group: ParentComponent<InputOTPGroupProps>;
+    Slot: Component<InputOTPSlotProps>;
+    Separator: ParentComponent<InputOTPSeparatorProps>;
+};
+export default InputOTP;
+export { InputOTP, InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator, };
+export type { InputOTPRootProps as InputOTPProps };

package/dist/components/input-otp/InputOTP.js

@@ -0,0 +1,394 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./InputOTP.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__ from "./InputOTP.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><input>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const REGEXP_ONLY_DIGITS = "^\\d+$";
+const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+const InputOTPContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const InputOTPRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "value",
+        "defaultValue",
+        "onChange",
+        "onComplete",
+        "maxLength",
+        "variant",
+        "pattern",
+        "name",
+        "autoFocus",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "inputClassName",
+        "inputMode",
+        "onMouseDown",
+        "onFocusOut",
+        "aria-invalid",
+        "ref"
+    ]);
+    let inputRef;
+    let rootRef;
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultValue ?? "");
+    const [activeIndex, setActiveIndexSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    const [isFocused, setIsFocused] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const maxLength = ()=>{
+        const parsed = Number(local.maxLength);
+        if (!Number.isFinite(parsed)) return 6;
+        return Math.max(1, Math.floor(parsed));
+    };
+    const patternRegex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!local.pattern) return;
+        try {
+            return new RegExp(local.pattern);
+        } catch  {
+            return;
+        }
+    });
+    const isAllowedCharacter = (char)=>{
+        const regex = patternRegex();
+        if (!regex) return true;
+        return regex.test(char);
+    };
+    const sanitizeValue = (rawValue)=>{
+        if (!rawValue) return "";
+        const result = [];
+        for (const char of Array.from(rawValue))if (isAllowedCharacter(char)) {
+            result.push(char);
+            if (result.length >= maxLength()) break;
+        }
+        return result.join("");
+    };
+    const normalizedControlledValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>sanitizeValue(local.value ?? ""));
+    const value = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.value ? normalizedControlledValue() : sanitizeValue(internalValue()));
+    const chars = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const current = value();
+        return Array.from({
+            length: maxLength()
+        }, (_, index)=>current[index] ?? "");
+    });
+    const variant = ()=>local.variant ?? "primary";
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
+    const setValue = (nextValue)=>{
+        const normalized = sanitizeValue(nextValue);
+        const current = value();
+        if (normalized === current) return;
+        if (void 0 === local.value) setInternalValue(normalized);
+        local.onChange?.(normalized);
+        if (normalized.length === maxLength()) local.onComplete?.(normalized);
+    };
+    const normalizeIndex = (index)=>{
+        const bounded = clamp(index, 0, maxLength());
+        return bounded;
+    };
+    const resolveActiveSlot = (caret)=>{
+        const bounded = normalizeIndex(caret);
+        if (bounded >= maxLength()) return maxLength() - 1;
+        return bounded;
+    };
+    const syncActiveFromInputCaret = ()=>{
+        const caret = inputRef?.selectionStart;
+        if (null == caret) {
+            const firstEmpty = chars().findIndex((char)=>0 === char.length);
+            setActiveIndexSignal(firstEmpty >= 0 ? firstEmpty : maxLength() - 1);
+            return;
+        }
+        setActiveIndexSignal(resolveActiveSlot(caret));
+    };
+    const focusInputAt = (index)=>{
+        if (isDisabled()) return;
+        const bounded = normalizeIndex(index);
+        const input = inputRef;
+        if (!input) return;
+        input.focus();
+        input.setSelectionRange(bounded, bounded);
+        setActiveIndexSignal(resolveActiveSlot(bounded));
+    };
+    const handleRootMouseDown = (event)=>{
+        invokeEventHandler(local.onMouseDown, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        const target = event.target;
+        if (target.closest('[data-slot="input-otp-slot"]')) return;
+        event.preventDefault();
+        focusInputAt(value().length);
+    };
+    const handleFocusOut = (event)=>{
+        invokeEventHandler(local.onFocusOut, event);
+        if (event.defaultPrevented) return;
+        const nextTarget = event.relatedTarget;
+        if (rootRef?.contains(nextTarget)) return;
+        setIsFocused(false);
+    };
+    const handleInput = (event)=>{
+        if (isDisabled()) return;
+        setValue(event.currentTarget.value);
+        queueMicrotask(syncActiveFromInputCaret);
+    };
+    const handleKeyDown = (event)=>{
+        if (event.defaultPrevented || isDisabled()) return;
+        if ("ArrowLeft" === event.key || "ArrowRight" === event.key || "Backspace" === event.key || "Delete" === event.key || "Home" === event.key || "End" === event.key) queueMicrotask(syncActiveFromInputCaret);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const current = value();
+        if (current.length > maxLength()) setValue(current.slice(0, maxLength()));
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (void 0 !== local.value) return;
+        const normalized = sanitizeValue(internalValue());
+        if (normalized !== internalValue()) setInternalValue(normalized);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!isFocused()) return;
+        const active = clamp(activeIndex(), 0, maxLength());
+        inputRef?.setSelectionRange(active, active);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!local.autoFocus || isDisabled()) return;
+        queueMicrotask(()=>{
+            focusInputAt(value().length);
+        });
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputOTPContext.Provider, {
+        value: {
+            value,
+            chars,
+            maxLength,
+            variant,
+            isDisabled,
+            isInvalid,
+            isFocused,
+            activeIndex,
+            setActiveIndex: (index)=>setActiveIndexSignal(resolveActiveSlot(index)),
+            focusInputAt
+        },
+        get children () {
+            var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+                rootRef = node;
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Root.variant[variant()], local.class, local.className)
+                }), {
+                "data-slot": "input-otp",
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                onMouseDown: handleRootMouseDown,
+                onFocusOut: handleFocusOut
+            }), false, true);
+            var _ref$ = inputRef;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : inputRef = _el$2;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Input.base, local.inputClassName)
+                }), {
+                "data-slot": "input-otp-input",
+                type: "text",
+                get inputMode () {
+                    return local.inputMode;
+                },
+                get pattern () {
+                    return local.pattern;
+                },
+                get maxLength () {
+                    return maxLength();
+                },
+                get value () {
+                    return value();
+                },
+                get name () {
+                    return local.name;
+                },
+                get disabled () {
+                    return isDisabled();
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                autocomplete: "one-time-code",
+                onFocus: ()=>{
+                    setIsFocused(true);
+                    syncActiveFromInputCaret();
+                },
+                onInput: handleInput,
+                onKeyDown: handleKeyDown,
+                onSelect: ()=>syncActiveFromInputCaret()
+            }), false, false);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputOTPGroup, {
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                            get each () {
+                                return Array.from({
+                                    length: maxLength()
+                                }, (_, index)=>index);
+                            },
+                            children: (index)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputOTPSlot, {
+                                    index: index
+                                })
+                        });
+                    }
+                }), null);
+            return _el$;
+        }
+    });
+};
+const InputOTPGroup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Group.base, local.class, local.className)
+            }), {
+            "data-slot": "input-otp-group",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const InputOTPSlot = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputOTPContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "index",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onMouseDown"
+    ]);
+    const char = ()=>context?.chars()[local.index] ?? "";
+    const isActive = ()=>Boolean(context?.isFocused()) && !Boolean(context?.isDisabled()) && (context?.activeIndex() ?? 0) === local.index;
+    const handleMouseDown = (event)=>{
+        invokeEventHandler(local.onMouseDown, event);
+        if (event.defaultPrevented || context?.isDisabled()) return;
+        event.preventDefault();
+        context?.setActiveIndex(local.index);
+        context?.focusInputAt(local.index);
+    };
+    return (()=>{
+        var _el$4 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Slot.base, local.class, local.className)
+            }), {
+            "data-slot": "input-otp-slot",
+            get ["data-active"] () {
+                return isActive() ? "true" : void 0;
+            },
+            get ["data-filled"] () {
+                return char().length > 0 ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            get ["data-invalid"] () {
+                return context?.isInvalid() ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onMouseDown: handleMouseDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return char().length > 0;
+            },
+            get children () {
+                var _el$5 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Slot.value
+                    }), {
+                    "data-slot": "input-otp-slot-value"
+                }), false, true);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, char);
+                return _el$5;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isActive())() && 0 === char().length;
+            },
+            get children () {
+                var _el$6 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Slot.caret
+                    }), {
+                    "data-slot": "input-otp-caret"
+                }), false, false);
+                return _el$6;
+            }
+        }), null);
+        return _el$4;
+    })();
+};
+const InputOTPSeparator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputOTP_classes_js_44f237b3__.CLASSES.Separator.base, local.class, local.className)
+            }), {
+            "data-slot": "input-otp-separator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const InputOTP_InputOTP = Object.assign(InputOTPRoot, {
+    Root: InputOTPRoot,
+    Group: InputOTPGroup,
+    Slot: InputOTPSlot,
+    Separator: InputOTPSeparator
+});
+const InputOTP = InputOTP_InputOTP;
+export { InputOTP_InputOTP as InputOTP, InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, InputOTP as default };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1 @@
+export { default, InputOTP, InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator, REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS, type InputOTPProps, type InputOTPRootProps, type InputOTPGroupProps, type InputOTPSlotProps, type InputOTPSeparatorProps, type InputOTPVariant, } from "./InputOTP";

package/dist/components/input-otp/index.js

@@ -0,0 +1,11 @@
+import * as __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__ from "./InputOTP.js";
+var __webpack_exports__InputOTP = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.InputOTP;
+var __webpack_exports__InputOTPGroup = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.InputOTPGroup;
+var __webpack_exports__InputOTPRoot = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.InputOTPRoot;
+var __webpack_exports__InputOTPSeparator = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.InputOTPSeparator;
+var __webpack_exports__InputOTPSlot = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.InputOTPSlot;
+var __webpack_exports__REGEXP_ONLY_CHARS = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.REGEXP_ONLY_CHARS;
+var __webpack_exports__REGEXP_ONLY_DIGITS = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.REGEXP_ONLY_DIGITS;
+var __webpack_exports__REGEXP_ONLY_DIGITS_AND_CHARS = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__.REGEXP_ONLY_DIGITS_AND_CHARS;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__InputOTP_js_2a735b74__["default"];
+export { __webpack_exports__InputOTP as InputOTP, __webpack_exports__InputOTPGroup as InputOTPGroup, __webpack_exports__InputOTPRoot as InputOTPRoot, __webpack_exports__InputOTPSeparator as InputOTPSeparator, __webpack_exports__InputOTPSlot as InputOTPSlot, __webpack_exports__REGEXP_ONLY_CHARS as REGEXP_ONLY_CHARS, __webpack_exports__REGEXP_ONLY_DIGITS as REGEXP_ONLY_DIGITS, __webpack_exports__REGEXP_ONLY_DIGITS_AND_CHARS as REGEXP_ONLY_DIGITS_AND_CHARS, __webpack_exports__default as default };