@vkzstudio/muza-ui 1.3.0 → 1.4.0

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,7 +1,7 @@
-import { jsx as e, jsxs as b, Fragment as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as b, Fragment as N } from "react/jsx-runtime";
 import * as m from "react";
 import * as a from "@radix-ui/react-dropdown-menu";
-import { cva as N } from "class-variance-authority";
+import { cva as y } from "class-variance-authority";
 import { Button as I } from "../Button/Button.js";
 import { cn as s } from "../../utils/cn.js";
 import { UnreadOutline as x } from "@solar-icons/react-perf";
@@ -55,9 +55,9 @@ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /*
       )
     }
   ) });
-}, w = N(
+}, w = y(
   [
-    "text-comp-dropdown-menu-text-primary flex cursor-pointer items-center gap-sm rounded-md pt-md pr-lg pb-md pl-lg outline-0 transition-colors",
+    "flex cursor-pointer items-center gap-sm rounded-md pt-md pr-lg pb-md pl-lg text-comp-dropdown-menu-text-base-def outline-0 transition-colors",
     "hover:bg-comp-dropdown-menu-fill-base-hover hover:text-comp-dropdown-menu-text-base-hover",
     "focus-within:bg-comp-dropdown-menu-fill-base-focused"
   ],
@@ -83,7 +83,7 @@ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /*
 ), h = ({
   children: o,
   description: t
-}) => typeof o == "function" ? /* @__PURE__ */ e(y, { children: o }) : t ? /* @__PURE__ */ b(D, { flex: 1, direction: "column", className: "min-w-0", children: [
+}) => typeof o == "function" ? /* @__PURE__ */ e(N, { children: o }) : t ? /* @__PURE__ */ b(D, { flex: 1, direction: "column", className: "min-w-0", children: [
   /* @__PURE__ */ e(
     f,
     {
@@ -135,8 +135,8 @@ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /*
         "span",
         {
           className: s("block [&>svg]:block [&>svg]:size-icon-small", {
-            "text-comp-dropdown-menu-text-error": t === "destructive",
-            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": t !== "destructive",
+            "text-comp-dropdown-menu-icon-error-def": t === "destructive",
+            "text-icon-dark-secondary-def group-hover:text-icon-brand-def group-focus-visible:text-comp-dropdown-menu-icon-base-focused": t !== "destructive",
             "text-comp-dropdown-menu-icon-base-active": i
           }),
           children: r
@@ -199,14 +199,14 @@ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /*
         "span",
         {
           className: s({
-            "text-comp-dropdown-menu-text-error": r === "destructive",
-            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive"
+            "text-comp-dropdown-menu-icon-error-def": r === "destructive",
+            "text-icon-dark-secondary-def group-hover:text-icon-brand-def group-focus-visible:text-comp-dropdown-menu-icon-base-focused": r !== "destructive"
           }),
           children: c
         }
       ),
       /* @__PURE__ */ e(h, { description: i, children: t }),
-      /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+      /* @__PURE__ */ e("span", { className: "text-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
     ]
   }
 ), L = ({
@@ -244,15 +244,15 @@ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /*
             "span",
             {
               className: s({
-                "text-comp-dropdown-menu-text-error": n === "destructive",
-                "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive",
+                "text-comp-dropdown-menu-icon-error-def": n === "destructive",
+                "text-icon-dark-secondary-def group-hover:text-icon-brand-def group-focus-visible:text-comp-dropdown-menu-icon-base-focused": n !== "destructive",
                 "text-comp-dropdown-menu-text-base-disabled": d.disabled
               }),
               children: r
             }
           ),
           /* @__PURE__ */ e(h, { description: c, children: t }),
-          /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+          /* @__PURE__ */ e("span", { className: "text-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
         ]
       }
     );

package/dist/components/EdgeButton/EdgeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeButton.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,QAAA,MAAM,kBAAkB;;8EAwBvB,CAAA;AAED;;;;GAIG;AACH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,QAAA,MAAM,UAAU,2FAmFf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"EdgeButton.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,QAAA,MAAM,kBAAkB;;8EAuBvB,CAAA;AAED;;;;GAIG;AACH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,QAAA,MAAM,UAAU,2FAmFf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/EdgeButton/EdgeButton.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as i, Fragment as a } from "react/jsx-runtime";
 import s from "react";
 import { Slot as h, Slottable as l } from "@radix-ui/react-slot";
 import { cva as x } from "class-variance-authority";
-import { sharedButtonVariants as d } from "../Button/buttonVariants.js";
+import { sharedButtonVariants as u } from "../Button/buttonVariants.js";
 import { cn as y } from "../../utils/cn.js";
 import { Typography as j } from "../Typography/Typography.js";
 const _ = x(
@@ -13,15 +13,14 @@ const _ = x(
     "&>svg]:duration-250 transition-colors duration-250 [&>svg]:transition-opacity",
     "[&>svg]:size-icon-medium",
     "disabled:pointer-events-none",
-    ...d.primary
+    ...u.primary
   ],
   {
     variants: {
       disabled: {
         true: [
-          // 'bg-comp-button-fill-primary-disabled text-comp-button-text-text-disabled',
           "pointer-events-none",
-          "[&>svg]:text-comp-button-icon-brand-disabled"
+          "[&>svg]:text-comp-button-primary-text-disabled"
         ]
       }
     },
@@ -31,7 +30,7 @@ const _ = x(
   }
 ), B = s.forwardRef(
   ({
-    onClick: u,
+    onClick: d,
     disabled: p,
     text: m,
     className: c,
@@ -39,8 +38,8 @@ const _ = x(
     icon: o,
     children: t,
     ...f
-  }, b) => {
-    const g = n ? h : "button", r = m ? /* @__PURE__ */ e(
+  }, g) => {
+    const b = n ? h : "button", r = m ? /* @__PURE__ */ e(
       j,
       {
         component: "span",
@@ -68,10 +67,10 @@ const _ = x(
       t
     ] });
     return /* @__PURE__ */ e(
-      g,
+      b,
       {
-        ref: b,
-        onClick: p ? void 0 : u,
+        ref: g,
+        onClick: p ? void 0 : d,
         ...n ? {} : { type: "button", disabled: p },
         className: y(
           "inline-flex items-center justify-center",
@@ -80,7 +79,7 @@ const _ = x(
           "cursor-pointer disabled:pointer-events-none",
           "&>svg]:duration-250 transition-colors duration-250 [&>svg]:transition-opacity",
           "[&>svg]:size-icon-medium",
-          ...d.primary,
+          ...u.primary,
           c
         ),
         ...f,

package/dist/components/EmptyState/EmptyState.js

@@ -1,26 +1,26 @@
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { cn as m } from "../../utils/cn.js";
-import { Typography as c } from "../Typography/Typography.js";
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+import { Typography as o } from "../Typography/Typography.js";
 const d = ({
-  icon: o,
+  icon: r,
   className: i,
   headline: e,
   text: t,
-  children: s,
-  buttonsLayout: l
-}) => /* @__PURE__ */ r(
+  children: a,
+  buttonsLayout: p
+}) => /* @__PURE__ */ m(
   "div",
   {
-    className: m(
+    className: c(
       "flex flex-col items-center gap-comp-empty-state-gap",
-      "[&>svg]:size-comp-empty-state-ico-size [&>svg]:text-gray-500",
+      "[&>svg]:size-comp-empty-state-ico-size [&>svg]:text-comp-empty-state-icon",
       i
     ),
     children: [
-      o,
-      (e || t) && /* @__PURE__ */ r("div", { className: "flex flex-col gap-2xs text-center align-middle", children: [
-        e && /* @__PURE__ */ a(
-          c,
+      r,
+      (e || t) && /* @__PURE__ */ m("div", { className: "flex flex-col gap-2xs text-center align-middle", children: [
+        e && /* @__PURE__ */ s(
+          o,
           {
             component: "p",
             variant: "body",
@@ -30,8 +30,8 @@ const d = ({
             children: e
           }
         ),
-        t && /* @__PURE__ */ a(
-          c,
+        t && /* @__PURE__ */ s(
+          o,
           {
             component: "p",
             variant: "body",
@@ -42,13 +42,13 @@ const d = ({
           }
         )
       ] }),
-      s && /* @__PURE__ */ a(
+      a && /* @__PURE__ */ s(
         "div",
         {
-          className: m("flex gap-sm", {
-            "flex-col": l === "vertical"
+          className: c("flex gap-sm", {
+            "flex-col": p === "vertical"
           }),
-          children: s
+          children: a
         }
       )
     ]

package/dist/components/FileUpload/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA8C9B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,qEAAqE;AACrE,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,IAAI,CAAA;CACX;AAED,oFAAoF;AACpF,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,MAAM,EAAE,KAAK,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wGAAwG;AACxG,KAAK,aAAa,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAsEzD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAiO5C,CAAA"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA8C9B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,qEAAqE;AACrE,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,IAAI,CAAA;CACX;AAED,oFAAoF;AACpF,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,MAAM,EAAE,KAAK,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wGAAwG;AACxG,KAAK,aAAa,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAsEzD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAgO5C,CAAA"}

package/dist/components/FileUpload/FileItem.js

@@ -1,5 +1,5 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import * as p from "react";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import * as f from "react";
 import { cva as _ } from "class-variance-authority";
 import { useMuzaTranslations as B } from "../../translations/TranslationContext.js";
 import { Flex as z } from "../Flex/Flex.js";
@@ -89,12 +89,12 @@ const S = (e, l, i) => {
     onDelete: g,
     onDownload: v,
     onError: T
-  } = e, m = B(), [w, N] = p.useState(!1), k = e.source === "file" ? e.file.name : e.name, b = e.source === "url" ? (e.type ?? "").startsWith("image/") || F.test(e.name) : e.file.type.startsWith("image/"), C = e.source === "url" ? L.includes(e.type ?? "") || E.test(e.name) : L.includes(e.file.type) || E.test(e.file.name), d = e.source === "file" ? e.file : e.url, O = p.useMemo(() => o ? "disabled" : s ? "error" : typeof i == "number" && i > 0 && i < 100 ? "loading" : "default", [o, s, i]), x = p.useMemo(() => {
+  } = e, m = B(), [w, N] = f.useState(!1), k = e.source === "file" ? e.file.name : e.name, b = e.source === "url" ? (e.type ?? "").startsWith("image/") || F.test(e.name) : e.file.type.startsWith("image/"), C = e.source === "url" ? L.includes(e.type ?? "") || E.test(e.name) : L.includes(e.file.type) || E.test(e.file.name), d = e.source === "file" ? e.file : e.url, O = f.useMemo(() => o ? "disabled" : s ? "error" : typeof i == "number" && i > 0 && i < 100 ? "loading" : "default", [o, s, i]), x = f.useMemo(() => {
     if (b)
       return typeof d == "string" ? d : URL.createObjectURL(d);
   }, [b, d]);
-  return p.useEffect(() => N(!1), [d]), /* @__PURE__ */ f(z, { gap: "sm", direction: "column", component: "li", children: [
-    /* @__PURE__ */ f(
+  return f.useEffect(() => N(!1), [d]), /* @__PURE__ */ p(z, { gap: "sm", direction: "column", component: "li", children: [
+    /* @__PURE__ */ p(
       "div",
       {
         className: a(
@@ -139,7 +139,7 @@ const S = (e, l, i) => {
               )
             }
           ),
-          /* @__PURE__ */ f(z, { direction: "column", className: "min-w-0 flex-1 justify-center", children: [
+          /* @__PURE__ */ p(z, { direction: "column", className: "min-w-0 flex-1 justify-center", children: [
             /* @__PURE__ */ t(
               u,
               {
@@ -175,13 +175,12 @@ const S = (e, l, i) => {
                 h,
                 "text-comp-file-upload-icon-def-secondary",
                 "hover:text-comp-file-upload-icon-def-hover",
-                "focus-visible:text-comp-file-upload-icon-def-focused",
                 "disabled:text-comp-file-upload-icon-def-disabled"
               ),
               children: /* @__PURE__ */ t(D, { className: "size-icon-medium" })
             }
           ),
-          l && /* @__PURE__ */ f("div", { className: "flex gap-xl", children: [
+          l && /* @__PURE__ */ p("div", { className: "flex gap-xl", children: [
             /* @__PURE__ */ t(
               "button",
               {
@@ -223,7 +222,7 @@ const S = (e, l, i) => {
                   h,
                   "text-comp-file-upload-icon-error-def",
                   "hover:text-comp-file-upload-icon-error-hover",
-                  "focus-visible:text-comp-file-upload-icon-error-focused",
+                  "focus-visible:text-comp-file-upload-icon-error-focused-pressed",
                   "disabled:text-comp-file-upload-icon-error-disabled"
                 ),
                 children: /* @__PURE__ */ t(R, { className: "size-icon-medium" })

package/dist/components/FileUpload/FileUpload.js

@@ -19,20 +19,20 @@ const be = O(
     "hover:border-comp-file-upload-stroke-dashed-hover hover:bg-comp-file-upload-fill-hover",
     "hover:text-comp-file-upload-text-brand-hover",
     "focus-visible-default focus-visible:border-comp-file-upload-stroke-dashed-focused",
-    "focus-visible:text-comp-file-upload-title-text-focused focus-visible:bg-comp-file-upload-fill-focused"
+    "focus-visible:bg-comp-file-upload-fill-focused focus-visible:text-comp-file-upload-text-brand-focused"
   ],
   {
     variants: {
       error: {
         true: [
-          "border-comp-button-stroke-error-def bg-comp-file-upload-fill-def",
+          "border-comp-file-upload-stroke-error-def bg-comp-file-upload-fill-def",
           "text-comp-file-upload-text-error-def"
         ]
       },
       isDragActive: {
         true: [
           "border-comp-file-upload-stroke-dashed-focused bg-comp-file-upload-fill-focused",
-          "text-comp-file-upload-title-text-focused"
+          "text-comp-file-upload-text-brand-focused"
         ]
       },
       disabled: {

package/dist/components/InputOTP/InputOTP.d.ts

@@ -0,0 +1,95 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * Character set the field accepts. Also selects the mobile keyboard:
+ * `numeric` → number pad, the others → text keyboard.
+ */
+export type InputOTPAllowedChars = 'numeric' | 'alphanumeric' | 'alphabetic';
+export declare const inputOTPCellVariants: (props?: ({
+    size?: "sm" | "lg" | "base" | null | undefined;
+    active?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the InputOTP component.
+ *
+ * Extends the underlying input's attributes except the ones InputOTP manages
+ * itself (`value`/`onChange`/`size`/`type`/`children`).
+ */
+export interface InputOTPProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'onChange' | 'size' | 'type' | 'children' | 'defaultValue'> {
+    /**
+     * Number of OTP characters (cells).
+     * @default 6
+     */
+    length?: number;
+    /** Controlled value. Should never exceed `length` characters. */
+    value?: string;
+    /** Initial value for uncontrolled usage. @default '' */
+    defaultValue?: string;
+    /** Fires with the full string whenever the value changes. */
+    onChange?: (value: string) => void;
+    /** Fires once the value reaches `length` characters. */
+    onComplete?: (value: string) => void;
+    /** Controls cell height and character size. @default 'base' */
+    size?: 'sm' | 'base' | 'lg';
+    /** Applies the error border to all cells and error-styles the hint. @default false */
+    error?: boolean;
+    /** Disables input and applies disabled styling. @default false */
+    disabled?: boolean;
+    /**
+     * Renders each filled cell as an 8×8px dot (DotDivider) instead of the
+     * character, for sensitive codes.
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Which characters the field accepts — this also chooses the mobile keyboard:
+     * - `numeric` — digits only, number pad.
+     * - `alphanumeric` — letters and digits, text keyboard.
+     * - `alphabetic` — letters only, text keyboard.
+     *
+     * Values are case-sensitive; uppercase in `onChange` if you need a canonical
+     * form. For a fully custom rule, use `pattern` instead (it overrides this).
+     * @default 'numeric'
+     */
+    allowedChars?: InputOTPAllowedChars;
+    /**
+     * Advanced escape hatch: a raw regex string restricting allowed characters
+     * (see input-otp). Overrides `allowedChars` when provided. Leave unset and
+     * use `allowedChars` for the common cases.
+     */
+    pattern?: string;
+    /**
+     * Enables the Android WebOTP API for fully-automatic SMS code retrieval, as
+     * a progressive enhancement. iOS Safari and desktop rely on the built-in
+     * `autocomplete="one-time-code"` keyboard suggestion instead (always on).
+     * Requires HTTPS and an origin-bound SMS. See {@link useWebOtpAutofill}.
+     * @default false
+     */
+    enableWebOtp?: boolean;
+    /** Label text rendered above the field. */
+    label?: string;
+    /** Helper or error text rendered below the field. */
+    hint?: string;
+    /** Marks the field as required and shows an asterisk in the label. @default false */
+    required?: boolean;
+    /**
+     * Hides the required asterisk in the label even when `required` is `true`.
+     * @default false
+     */
+    disableRequiredAsterisk?: boolean;
+    /**
+     * Custom content rendered inline next to the label. Takes precedence over
+     * `infoTooltip` when both are provided.
+     */
+    labelExtra?: ReactNode;
+    /**
+     * Tooltip content shown in an info icon next to the label. Ignored when
+     * `labelExtra` is provided.
+     */
+    infoTooltip?: string;
+    /** Additional classes for the cells container. */
+    className?: string;
+}
+export declare const InputOTP: import('react').ForwardRefExoticComponent<InputOTPProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=InputOTP.d.ts.map

package/dist/components/InputOTP/InputOTP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAgBd;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAA;AAuB5E,eAAO,MAAM,oBAAoB;;;;;8EA2ChC,CAAA;AA+CD;;;;;GAKG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,wBAAwB,CAAC,OAAO,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,cAAc,CACrE;IACD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,QAAQ,4GA0HpB,CAAA"}

package/dist/components/InputOTP/InputOTP.js

@@ -0,0 +1,187 @@
+import { jsx as r, Fragment as H, jsxs as V } from "react/jsx-runtime";
+import { forwardRef as W, useId as j, useCallback as M } from "react";
+import { useControllableState as Y } from "@radix-ui/react-use-controllable-state";
+import { cva as w } from "class-variance-authority";
+import { OTPInput as X, REGEXP_ONLY_CHARS as Z, REGEXP_ONLY_DIGITS_AND_CHARS as $, REGEXP_ONLY_DIGITS as U } from "input-otp";
+import { useWebOtpAutofill as B } from "./useWebOtpAutofill.js";
+import { FormField as J } from "../FormField/FormField.js";
+import { cn as g } from "../../utils/cn.js";
+import { DotDivider as K } from "../DotDivider/DotDivider.js";
+import { typographyVariants as Q } from "../Typography/Typography.js";
+const q = {
+  numeric: U,
+  alphanumeric: $,
+  alphabetic: Z
+}, ee = {
+  numeric: "numeric",
+  alphanumeric: "text",
+  alphabetic: "text"
+}, re = {
+  numeric: /[^0-9]/g,
+  alphanumeric: /[^a-zA-Z0-9]/g,
+  alphabetic: /[^a-zA-Z]/g
+}, te = w(
+  [
+    "relative flex shrink-0 items-center justify-center",
+    // Fixed 48px cell width across all sizes, per Figma. `comp-input-h-small`
+    // is the design-system's 48px spacing token (it also drives the small
+    // input height), reused here as the cell's constant width.
+    "w-comp-input-h-small",
+    "border border-comp-input-stroke-def bg-comp-input-fill-def",
+    "rounded-comp-input-radius-pin transition-colors",
+    "text-comp-input-text-primary",
+    // Hover is captured on the whole field via the container `group`.
+    "group-hover:border-comp-input-stroke-hover"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-comp-input-h-small",
+        base: "h-comp-input-h-def",
+        lg: "h-comp-input-h-large"
+      },
+      active: {
+        true: "z-10 border-comp-input-icon-brand-focused group-hover:border-comp-input-icon-brand-focused"
+      },
+      error: {
+        true: "border-comp-input-stroke-error-def group-hover:border-comp-input-stroke-error-def"
+      },
+      disabled: {
+        true: "border-comp-input-stroke-disabled bg-comp-input-fill-disabled group-hover:border-comp-input-stroke-disabled"
+      }
+    },
+    compoundVariants: [
+      // Error styling must win over the focused border colour.
+      {
+        active: !0,
+        error: !0,
+        class: "border-comp-input-stroke-error-def group-hover:border-comp-input-stroke-error-def"
+      }
+    ],
+    defaultVariants: {
+      size: "base"
+    }
+  }
+), oe = g(
+  Q({ size: "lg", weight: "medium", fixY: !0 }),
+  "text-comp-input-text-primary"
+), x = ({
+  slot: e,
+  size: p,
+  error: c,
+  disabled: t,
+  mask: s
+}) => /* @__PURE__ */ V(
+  "div",
+  {
+    className: te({
+      size: p,
+      active: e.isActive && !t,
+      error: c,
+      disabled: t
+    }),
+    children: [
+      e.char !== null && (s ? /* @__PURE__ */ r(K, { className: "size-comp-inputotp-dot-size bg-comp-input-text-primary" }) : /* @__PURE__ */ r("span", { className: oe, children: e.char })),
+      e.hasFakeCaret && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "h-2/3 w-px bg-comp-input-text-primary" }) })
+    ]
+  }
+);
+x.displayName = "InputOTPSlot";
+const ie = W(
+  ({
+    length: e = 6,
+    value: p,
+    defaultValue: c = "",
+    onChange: t,
+    onComplete: s,
+    size: I = "base",
+    error: m,
+    disabled: o,
+    mask: O,
+    allowedChars: i = "numeric",
+    pattern: P,
+    enableWebOtp: N = !1,
+    label: b,
+    hint: f,
+    required: u,
+    disableRequiredAsterisk: _,
+    labelExtra: A,
+    infoTooltip: y,
+    className: T,
+    id: R,
+    inputMode: S,
+    ...k
+  }, E) => {
+    const C = P ?? q[i], L = S ?? ee[i], [D, l] = Y({
+      prop: p,
+      defaultProp: c,
+      onChange: t
+    }), z = j(), n = R ?? z, h = f ? `${n}-hint` : void 0, v = b ? `${n}-label` : void 0, F = M(
+      (d) => {
+        const a = d.replace(re[i], "").slice(0, e);
+        a && l(a);
+      },
+      [i, e, l]
+    );
+    return B({
+      enabled: N && !o,
+      onReceive: F
+    }), /* @__PURE__ */ r(
+      J,
+      {
+        label: b,
+        hint: f,
+        error: m,
+        required: u,
+        disableRequiredAsterisk: _,
+        htmlFor: n,
+        labelId: v,
+        hintId: h,
+        labelExtra: A,
+        infoTooltip: y,
+        children: /* @__PURE__ */ r(
+          X,
+          {
+            ref: E,
+            id: n,
+            maxLength: e,
+            value: D ?? "",
+            onChange: l,
+            onComplete: s,
+            disabled: o,
+            pattern: C,
+            inputMode: L,
+            required: u,
+            "aria-describedby": h,
+            "aria-labelledby": v,
+            "aria-invalid": m,
+            "aria-required": u,
+            pushPasswordManagerStrategy: "none",
+            containerClassName: g(
+              "group flex items-center gap-comp-input-spacing-pin",
+              o && "cursor-not-allowed",
+              T
+            ),
+            render: ({ slots: d }) => /* @__PURE__ */ r(H, { children: d.map((a, G) => /* @__PURE__ */ r(
+              x,
+              {
+                slot: a,
+                size: I,
+                error: m,
+                disabled: o,
+                mask: O
+              },
+              G
+            )) }),
+            ...k
+          }
+        )
+      }
+    );
+  }
+);
+ie.displayName = "InputOTP";
+export {
+  ie as InputOTP,
+  te as inputOTPCellVariants
+};

package/dist/components/InputOTP/InputOTP.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputOTP } from './InputOTP';
+declare const meta: Meta<typeof InputOTP>;
+export default meta;
+type Story = StoryObj<typeof InputOTP>;
+export declare const Default: Story;
+export declare const WithLabelAndHint: Story;
+export declare const SmsAutofill: Story;
+export declare const ConfigurableLength: Story;
+export declare const Masked: Story;
+export declare const Alphanumeric: Story;
+export declare const Disabled: Story;
+/** Consolidated size showcase — enabled for visual regression. */
+export declare const AllSizes: Story;
+/** Consolidated state showcase — enabled for visual regression. */
+export declare const AllStates: Story;
+export declare const Controlled: Story;
+//# sourceMappingURL=InputOTP.stories.d.ts.map

package/dist/components/InputOTP/InputOTP.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/InputOTP.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAmG/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,mEAAmE;AACnE,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAA"}

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

@@ -0,0 +1,3 @@
+export { InputOTP, inputOTPCellVariants, type InputOTPProps, type InputOTPAllowedChars, } from './InputOTP';
+export { useWebOtpAutofill, type UseWebOtpAutofillOptions, } from './useWebOtpAutofill';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InputOTP/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,oBAAoB,EACpB,KAAK,aAAa,EAClB,KAAK,oBAAoB,GAC1B,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,iBAAiB,EACjB,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAA"}