@pathscale/ui 1.2.1 → 1.2.2

package/dist/components/input-group/InputGroup.css

@@ -0,0 +1,172 @@
+@layer components {
+  .input-group {
+    position: relative;
+    display: inline-flex;
+    min-height: 2.25rem;
+    align-items: 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));
+    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);
+  }
+
+  .input-group:has([data-slot="input-group-textarea"]) {
+    align-items: flex-start;
+    height: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .input-group {
+      transition: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .input-group:hover:not(:focus-within):not([data-invalid="true"]):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-group:focus-within {
+    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-group[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-group[data-disabled="true"],
+  .input-group[aria-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);
+    opacity: var(--disabled-opacity, 0.6);
+    box-shadow: none;
+  }
+
+  .input-group__input {
+    min-width: 0;
+    flex: 1;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: inherit;
+    box-shadow: none;
+    outline: none;
+  }
+
+  .input-group__input::placeholder {
+    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+  }
+
+  .input-group:has([data-slot="input-group-prefix"]) .input-group__input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-inline-start: 0;
+  }
+
+  .input-group:has([data-slot="input-group-suffix"]) .input-group__input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-inline-end: 0;
+  }
+
+  .input-group__input:focus,
+  .input-group__input:focus-visible {
+    outline: none;
+  }
+
+  .input-group__input[data-slot="input-group-textarea"] {
+    min-height: 2.375rem;
+    resize: vertical;
+  }
+
+  .input-group__prefix,
+  .input-group__suffix {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background-color: transparent;
+    padding-inline: 0.75rem;
+    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    border-style: solid;
+    border-color: var(--color-field-border, var(--color-base-300));
+    border-width: 0;
+    transition:
+      background-color 150ms var(--ease-smooth),
+      border-color 150ms var(--ease-smooth);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .input-group__prefix,
+    .input-group__suffix {
+      transition: none;
+    }
+  }
+
+  .input-group__prefix {
+    border-top-left-radius: var(--radius-field, 0.75rem);
+    border-bottom-left-radius: var(--radius-field, 0.75rem);
+    border-inline-end-width: var(--border-width-field, 1px);
+  }
+
+  .input-group__suffix {
+    border-top-right-radius: var(--radius-field, 0.75rem);
+    border-bottom-right-radius: var(--radius-field, 0.75rem);
+    border-inline-start-width: var(--border-width-field, 1px);
+  }
+
+  .input-group:has([data-slot="input-group-textarea"]) .input-group__prefix,
+  .input-group:has([data-slot="input-group-textarea"]) .input-group__suffix {
+    align-items: flex-start;
+    padding-top: 0.5rem;
+  }
+
+  .input-group--secondary {
+    box-shadow: none;
+    background-color: var(--input-group-bg, var(--color-base-200));
+  }
+
+  @media (hover: hover) {
+    .input-group--secondary:hover:not(:focus-within):not([data-invalid="true"]):not([data-disabled="true"]) {
+      background-color: var(--input-group-bg-hover, var(--color-base-300));
+    }
+  }
+
+  .input-group--secondary:focus-within {
+    background-color: var(--input-group-bg-focus, var(--color-base-200));
+  }
+
+  .input-group--secondary[data-invalid="true"] {
+    border-color: var(--color-field-border-invalid, var(--color-danger));
+    background-color: var(--input-group-bg-focus, var(--color-base-200));
+  }
+
+  .input-group--full-width {
+    width: 100%;
+  }
+}

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,44 @@
+import "./InputGroup.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import { type TextFieldVariant } from "../text-field";
+import type { IComponentBaseProps } from "../types";
+export type InputGroupVariant = TextFieldVariant;
+export type InputGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    variant?: InputGroupVariant;
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "disabled"> & IComponentBaseProps & {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupTextAreaProps = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> & IComponentBaseProps & {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupPrefixProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type InputGroupSuffixProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const InputGroupRoot: ParentComponent<InputGroupRootProps>;
+declare const InputGroupInput: Component<InputGroupInputProps>;
+declare const InputGroupTextArea: Component<InputGroupTextAreaProps>;
+declare const InputGroupPrefix: ParentComponent<InputGroupPrefixProps>;
+declare const InputGroupSuffix: ParentComponent<InputGroupSuffixProps>;
+declare const InputGroup: ParentComponent<InputGroupRootProps> & {
+    Root: ParentComponent<InputGroupRootProps>;
+    Input: Component<InputGroupInputProps>;
+    TextArea: Component<InputGroupTextAreaProps>;
+    Prefix: ParentComponent<InputGroupPrefixProps>;
+    Suffix: ParentComponent<InputGroupSuffixProps>;
+};
+export default InputGroup;
+export { InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix, };
+export type { InputGroupRootProps as InputGroupProps };

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

@@ -0,0 +1,219 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./InputGroup.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__text_field_index_js_54530d22__ from "../text-field/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__InputGroup_classes_js_9b857fa5__ from "./InputGroup.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
+const InputGroupContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+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 InputGroupRoot = (props)=>{
+    const textFieldContext = (0, __WEBPACK_EXTERNAL_MODULE__text_field_index_js_54530d22__.useTextFieldContext)();
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "fullWidth",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "onClick",
+        "ref",
+        "aria-invalid"
+    ]);
+    let groupRef;
+    const variant = ()=>local.variant ?? textFieldContext?.variant?.() ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth) || Boolean(textFieldContext?.fullWidth?.());
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(textFieldContext?.isDisabled?.());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(textFieldContext?.isInvalid?.()) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
+    const handleClick = (event)=>{
+        if (!isDisabled()) {
+            const target = event.target;
+            const input = groupRef?.querySelector('[data-slot="input-group-input"], [data-slot="input-group-textarea"]');
+            if (input && target !== input && !input.contains(target)) input.focus();
+        }
+        invokeEventHandler(local.onClick, event);
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputGroupContext.Provider, {
+        value: {
+            variant,
+            fullWidth,
+            isDisabled,
+            isInvalid
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+                groupRef = 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__InputGroup_classes_js_9b857fa5__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__InputGroup_classes_js_9b857fa5__.CLASSES.Root.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__InputGroup_classes_js_9b857fa5__.CLASSES.Root.flag.fullWidth, local.class, local.className)
+                }), {
+                "data-slot": "input-group",
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                onClick: handleClick
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const InputGroupInput = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputGroupContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isDisabled",
+        "disabled",
+        "isInvalid"
+    ]);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(context?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(context?.isInvalid());
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputGroup_classes_js_9b857fa5__.CLASSES.Input.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-input",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+};
+const InputGroupTextArea = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputGroupContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isDisabled",
+        "disabled",
+        "isInvalid"
+    ]);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(context?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(context?.isInvalid());
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        (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__InputGroup_classes_js_9b857fa5__.CLASSES.Input.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-textarea",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            }
+        }), false, false);
+        return _el$3;
+    })();
+};
+const InputGroupPrefix = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        (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__InputGroup_classes_js_9b857fa5__.CLASSES.Prefix.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-prefix",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const InputGroupSuffix = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$5 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__InputGroup_classes_js_9b857fa5__.CLASSES.Suffix.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-suffix",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        return _el$5;
+    })();
+};
+const InputGroup = Object.assign(InputGroupRoot, {
+    Root: InputGroupRoot,
+    Input: InputGroupInput,
+    TextArea: InputGroupTextArea,
+    Prefix: InputGroupPrefix,
+    Suffix: InputGroupSuffix
+});
+const input_group_InputGroup = InputGroup;
+export { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea, input_group_InputGroup as default };

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

@@ -0,0 +1 @@
+export { default, InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix, type InputGroupProps, type InputGroupRootProps, type InputGroupInputProps, type InputGroupTextAreaProps, type InputGroupPrefixProps, type InputGroupSuffixProps, type InputGroupVariant, } from "./InputGroup";

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