@pathscale/ui 1.3.0 → 1.4.0

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

@@ -1,46 +0,0 @@
-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

@@ -1,395 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import "./InputOTP.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./InputOTP.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><input>"), _tmpl$2 = /*#__PURE__*/ 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 = 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] = 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] = createSignal(local.defaultValue ?? "");
-    const [activeIndex, setActiveIndexSignal] = createSignal(0);
-    const [isFocused, setIsFocused] = createSignal(false);
-    const maxLength = ()=>{
-        const parsed = Number(local.maxLength);
-        if (!Number.isFinite(parsed)) return 6;
-        return Math.max(1, Math.floor(parsed));
-    };
-    const patternRegex = 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 = createMemo(()=>sanitizeValue(local.value ?? ""));
-    const value = createMemo(()=>void 0 !== local.value ? normalizedControlledValue() : sanitizeValue(internalValue()));
-    const chars = 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);
-    };
-    createEffect(()=>{
-        const current = value();
-        if (current.length > maxLength()) setValue(current.slice(0, maxLength()));
-    });
-    createEffect(()=>{
-        if (void 0 !== local.value) return;
-        const normalized = sanitizeValue(internalValue());
-        if (normalized !== internalValue()) setInternalValue(normalized);
-    });
-    createEffect(()=>{
-        if (!isFocused()) return;
-        const active = clamp(activeIndex(), 0, maxLength());
-        inputRef?.setSelectionRange(active, active);
-    });
-    onMount(()=>{
-        if (!local.autoFocus || isDisabled()) return;
-        queueMicrotask(()=>{
-            focusInputAt(value().length);
-        });
-    });
-    return 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;
-            use((node)=>{
-                rootRef = node;
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
-            spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, 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$ ? use(_ref$, _el$2) : inputRef = _el$2;
-            spread(_el$2, mergeProps(()=>({
-                    class: twMerge(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);
-            insert(_el$, ()=>local.children ?? createComponent(InputOTPGroup, {
-                    get children () {
-                        return createComponent(For, {
-                            get each () {
-                                return Array.from({
-                                    length: maxLength()
-                                }, (_, index)=>index);
-                            },
-                            children: (index)=>createComponent(InputOTPSlot, {
-                                    index: index
-                                })
-                        });
-                    }
-                }), null);
-            return _el$;
-        }
-    });
-};
-const InputOTPGroup = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$3 = _tmpl$2();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(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);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
-};
-const InputOTPSlot = (props)=>{
-    const context = useContext(InputOTPContext);
-    const [local, others] = 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();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(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);
-        insert(_el$4, createComponent(Show, {
-            get when () {
-                return char().length > 0;
-            },
-            get children () {
-                var _el$5 = _tmpl$2();
-                spread(_el$5, mergeProps(()=>({
-                        class: CLASSES.Slot.value
-                    }), {
-                    "data-slot": "input-otp-slot-value"
-                }), false, true);
-                insert(_el$5, char);
-                return _el$5;
-            }
-        }), null);
-        insert(_el$4, createComponent(Show, {
-            get when () {
-                return memo(()=>!!isActive())() && 0 === char().length;
-            },
-            get children () {
-                var _el$6 = _tmpl$2();
-                spread(_el$6, mergeProps(()=>({
-                        class: CLASSES.Slot.caret
-                    }), {
-                    "data-slot": "input-otp-caret"
-                }), false, false);
-                return _el$6;
-            }
-        }), null);
-        return _el$4;
-    })();
-};
-const InputOTPSeparator = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$2();
-        spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(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);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
-};
-const InputOTP = Object.assign(InputOTPRoot, {
-    Root: InputOTPRoot,
-    Group: InputOTPGroup,
-    Slot: InputOTPSlot,
-    Separator: InputOTPSeparator
-});
-const input_otp_InputOTP = InputOTP;
-export default input_otp_InputOTP;
-export { InputOTP, InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type JoinProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
-    responsive?: boolean;
-    vertical?: boolean;
-    horizontal?: boolean;
-};
-declare const Join: (props: JoinProps) => JSX.Element;
-export default Join;

package/dist/components/join/Join.js

@@ -1,41 +0,0 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { children, createMemo, splitProps } from "solid-js";
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Join.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const Join = (props)=>{
-    const [local, others] = splitProps(props, [
-        "responsive",
-        "vertical",
-        "horizontal",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "children"
-    ]);
-    const resolvedChildren = children(()=>local.children);
-    const classes = createMemo(()=>twMerge(CLASSES.base, clsx({
-            [CLASSES.flag.vertical]: !local.responsive && local.vertical,
-            [CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
-            [CLASSES.flag.responsive]: local.responsive
-        }), local.class, local.className));
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, resolvedChildren);
-        return _el$;
-    })();
-};
-const join_Join = Join;
-export default join_Join;

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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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.d.ts

@@ -1,29 +0,0 @@
-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;