@pathscale/ui 1.1.33 → 1.1.35

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

@@ -0,0 +1,385 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><input data-slot=input-otp-input type=text autocomplete=one-time-code>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=input-otp__slot-value data-slot=input-otp-slot-value>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=input-otp__caret data-slot=input-otp-caret>");
+const VARIANT_CLASS_MAP = {
+    primary: "input-otp--primary",
+    secondary: "input-otp--secondary"
+};
+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, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-otp", VARIANT_CLASS_MAP[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);
+            _el$2.addEventListener("select", ()=>syncActiveFromInputCaret());
+            _el$2.$$keydown = handleKeyDown;
+            _el$2.$$input = handleInput;
+            _el$2.addEventListener("focus", ()=>{
+                setIsFocused(true);
+                syncActiveFromInputCaret();
+            });
+            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__.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);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-otp__input", local.inputClassName), _v$2 = local.inputMode, _v$3 = local.pattern, _v$4 = maxLength(), _v$5 = local.name, _v$6 = isDisabled(), _v$7 = isDisabled() ? "true" : void 0, _v$8 = isInvalid() ? "true" : void 0;
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "inputmode", _p$.t = _v$2);
+                _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "pattern", _p$.a = _v$3);
+                _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "maxlength", _p$.o = _v$4);
+                _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "name", _p$.i = _v$5);
+                _v$6 !== _p$.n && (_el$2.disabled = _p$.n = _v$6);
+                _v$7 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-disabled", _p$.s = _v$7);
+                _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-invalid", _p$.h = _v$8);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0,
+                n: void 0,
+                s: void 0,
+                h: void 0
+            });
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.value = value());
+            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, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-otp__group", 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, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-otp__slot", 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$3();
+                (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 () {
+                return _tmpl$4();
+            }
+        }), 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, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-otp__separator", 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;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "input",
+    "keydown"
+]);
+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/label/Label.css

@@ -0,0 +1,30 @@
+@layer components {
+  .label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-foreground);
+  }
+
+  .label--required::after,
+  [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"])
+    > .label::after,
+  [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label::after {
+    margin-inline-start: 0.125rem;
+    color: var(--color-danger);
+    content: "*";
+  }
+
+  .label--disabled,
+  [data-disabled="true"] .label {
+    opacity: var(--disabled-opacity, 0.5);
+    cursor: var(--cursor-disabled, not-allowed);
+    pointer-events: none;
+  }
+
+  .label--invalid,
+  [data-invalid="true"] .label,
+  [aria-invalid="true"] .label {
+    color: var(--color-danger);
+  }
+}

package/dist/components/label/Label.d.ts

@@ -0,0 +1,17 @@
+import "./Label.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type LabelRootProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & IComponentBaseProps & {
+    for?: string;
+    htmlFor?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+declare const LabelRoot: Component<LabelRootProps>;
+declare const Label: Component<LabelRootProps> & {
+    Root: Component<LabelRootProps>;
+};
+export default Label;
+export { Label, LabelRoot };
+export type { LabelRootProps as LabelProps };

package/dist/components/label/Label.js

@@ -0,0 +1,64 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Label.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label>");
+const LABEL_STATE_CLASS_MAP = {
+    required: "label--required",
+    disabled: "label--disabled",
+    invalid: "label--invalid"
+};
+const LabelRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "for",
+        "htmlFor",
+        "isRequired",
+        "isDisabled",
+        "isInvalid"
+    ]);
+    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 ["for"] () {
+                return local.for ?? local.htmlFor;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("label", local.isRequired && LABEL_STATE_CLASS_MAP.required, local.isDisabled && LABEL_STATE_CLASS_MAP.disabled, local.isInvalid && LABEL_STATE_CLASS_MAP.invalid, local.class, local.className);
+            },
+            "data-slot": "label",
+            get ["data-required"] () {
+                return local.isRequired ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["data-invalid"] () {
+                return local.isInvalid ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return local.isInvalid ? "true" : void 0;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Label = Object.assign(LabelRoot, {
+    Root: LabelRoot
+});
+const label_Label = Label;
+export { Label, LabelRoot, label_Label as default };

package/dist/components/label/index.d.ts

@@ -0,0 +1 @@
+export { default, Label, LabelRoot, type LabelProps, type LabelRootProps, } from "./Label";

package/dist/components/label/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
+var __webpack_exports__Label = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__.Label;
+var __webpack_exports__LabelRoot = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__.LabelRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__["default"];
+export { __webpack_exports__Label as Label, __webpack_exports__LabelRoot as LabelRoot, __webpack_exports__default as default };

package/dist/components/list-box/ListBox.css

@@ -0,0 +1,148 @@
+@layer components {
+  .list-box {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.25rem;
+    overflow: clip;
+    padding: 0.25rem;
+  }
+
+  .list-box [data-slot="separator"][data-orientation="horizontal"] {
+    margin-inline-start: 3%;
+    width: 94%;
+  }
+
+  .list-box-item {
+    position: relative;
+    display: flex;
+    min-height: 2.25rem;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    border-radius: 1rem;
+    padding-inline: 0.5rem;
+    padding-block: 0.375rem;
+    outline: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      transform 250ms var(--ease-out-quart),
+      box-shadow 150ms var(--ease-out);
+    cursor: var(--cursor-interactive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list-box-item {
+      transition: none;
+    }
+  }
+
+  .list-box-item [data-slot="label"] {
+    pointer-events: none;
+    width: fit-content;
+    user-select: none;
+  }
+
+  .list-box-item [data-slot="description"] {
+    pointer-events: none;
+    text-wrap: wrap;
+    user-select: none;
+  }
+
+  .list-box-item:has(.list-box-item__indicator) {
+    padding-inline-end: 1.75rem;
+  }
+
+  .list-box-item:focus-visible:not(:focus),
+  .list-box-item[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .list-box-item:active,
+  .list-box-item[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  @media (hover: hover) {
+    .list-box-item:hover,
+    .list-box-item[data-hovered="true"] {
+      background-color: var(--color-default);
+    }
+  }
+
+  .list-box-item[data-disabled="true"],
+  .list-box-item[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .list-box-item__indicator {
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    top: 50%;
+    display: flex;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transform: translateY(-50%);
+    align-items: center;
+    justify-content: center;
+    color: var(--color-default-foreground);
+    opacity: 0;
+    transition: all 250ms ease;
+  }
+
+  .list-box-item__indicator[data-visible="true"] {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list-box-item__indicator {
+      transition: none;
+    }
+  }
+
+  .list-box-item__indicator [data-slot="listbox-item-indicator--checkmark"] {
+    width: 0.625rem;
+    height: 0.625rem;
+    transition: all 300ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list-box-item__indicator [data-slot="listbox-item-indicator--checkmark"] {
+      transition: none;
+    }
+  }
+
+  .list-box-item[aria-selected="true"] [data-slot="listbox-item-indicator--checkmark"],
+  .list-box-item[data-selected="true"] [data-slot="listbox-item-indicator--checkmark"] {
+    transition: stroke-dashoffset 250ms linear;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list-box-item[aria-selected="true"] [data-slot="listbox-item-indicator--checkmark"],
+    .list-box-item[data-selected="true"] [data-slot="listbox-item-indicator--checkmark"] {
+      transition: none;
+    }
+  }
+
+  .list-box-item--danger .list-box-item__indicator,
+  .list-box-item--danger [data-slot="label"] {
+    color: var(--color-danger);
+  }
+
+  .list-box-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .list-box-section__title {
+    width: 100%;
+  }
+}