@pathscale/ui 1.2.0 → 1.2.2

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 };

package/dist/components/join/Join.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "join";
+    readonly flag: {
+        readonly vertical: "join-vertical";
+        readonly horizontal: "join-horizontal";
+        readonly responsive: "join-vertical lg:join-horizontal";
+    };
+};

package/dist/components/join/Join.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "join",
+    flag: {
+        vertical: "join-vertical",
+        horizontal: "join-horizontal",
+        responsive: "join-vertical lg:join-horizontal"
+    }
+};
+export { CLASSES };

package/dist/components/join/Join.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__ from "./Join.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Join = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,17 +16,16 @@ const Join = (props)=>{
         "children"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("join", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "join-vertical": !local.responsive && local.vertical,
-            "join-horizontal": !local.responsive && local.horizontal,
-            "join-vertical lg:join-horizontal": local.responsive
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.vertical]: !local.responsive && local.vertical,
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.responsive]: local.responsive
         }), local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: classes()
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },

package/dist/components/kbd/Kbd.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "kbd";
+    readonly variant: {
+        readonly default: "kbd--default";
+        readonly light: "kbd--light";
+    };
+    readonly slot: {
+        readonly abbr: "kbd__abbr";
+        readonly content: "kbd__content";
+    };
+};

package/dist/components/kbd/Kbd.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "kbd",
+    variant: {
+        default: "kbd--default",
+        light: "kbd--light"
+    },
+    slot: {
+        abbr: "kbd__abbr",
+        content: "kbd__content"
+    }
+};
+export { CLASSES };

package/dist/components/kbd/Kbd.css

@@ -0,0 +1,60 @@
+@layer components {
+  .kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    padding-inline: 0.5rem;
+    border-radius: 0.5rem;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    font-family: var(
+      --font-sans,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif
+    );
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    word-spacing: -0.25rem;
+  }
+
+  .kbd--default {
+    background-color: var(--color-default, var(--color-base-200));
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 72%, transparent)
+    );
+    border: 1px solid
+      color-mix(in oklab, var(--color-base-content) 16%, transparent);
+  }
+
+  .kbd--light {
+    background-color: transparent;
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 72%, transparent)
+    );
+    border: 1px solid transparent;
+  }
+
+  .kbd__abbr {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    font-style: normal;
+  }
+
+  .kbd__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/components/kbd/Kbd.d.ts

@@ -1,5 +1,29 @@
-import "./kbd.css";
-import { type ComponentProps } from "solid-js";
-export type KbdProps = ComponentProps<"kbd">;
-declare const Kbd: (props: KbdProps) => import("solid-js").JSX.Element;
+import "./Kbd.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type KbdVariant = "default" | "light";
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export declare const kbdKeysMap: Record<KbdKey, string>;
+export declare const kbdKeysLabelMap: Record<KbdKey, string>;
+export type KbdRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    variant?: KbdVariant;
+};
+export type KbdAbbrProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    keyValue: KbdKey;
+};
+export type KbdContentProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const KbdRoot: Component<KbdRootProps>;
+declare const KbdAbbr: Component<KbdAbbrProps>;
+declare const KbdContent: Component<KbdContentProps>;
+type KbdComponent = Component<KbdRootProps> & {
+    Root: Component<KbdRootProps>;
+    Abbr: Component<KbdAbbrProps>;
+    Content: Component<KbdContentProps>;
+};
+declare const Kbd: KbdComponent;
+export type KbdProps = KbdRootProps;
+export { KbdRoot, KbdAbbr, KbdContent };
 export default Kbd;