@vkzstudio/muza-ui 1.2.0 → 1.4.0

package/dist/components/Icons/CustomIcons.js

@@ -68,7 +68,7 @@ const d = r(
   ) })
 );
 d.displayName = "Cutlery";
-const V = r(
+const n = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -77,8 +77,8 @@ const V = r(
     }
   ) })
 );
-V.displayName = "MuzaIcon";
-const n = r(
+n.displayName = "MuzaIcon";
+const V = r(
   (L, l) => /* @__PURE__ */ i(e, { ref: l, ...L, children: [
     /* @__PURE__ */ C(
       "path",
@@ -96,7 +96,7 @@ const n = r(
     )
   ] })
 );
-n.displayName = "ArrowsSorting";
+V.displayName = "ArrowsSorting";
 const a = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
@@ -128,22 +128,22 @@ const M = r(
   ) })
 );
 M.displayName = "LayoutHorizontal";
-const Z = r((L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
+const p = r((L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
   "path",
   {
     d: "M12 0.5C18.3511 0.500263 23.5 5.64889 23.5 12C23.4997 18.3509 18.3509 23.4997 12 23.5C5.64889 23.5 0.500263 18.3511 0.5 12C0.500001 5.64872 5.64872 0.500001 12 0.5ZM12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.50026 17.7988 6.20117 22.5 12 22.5C17.7986 22.4997 22.4997 17.7986 22.5 12C22.5 6.20117 17.7988 1.50026 12 1.5ZM12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5ZM15.0977 10.0312C13.6248 10.0312 12.5508 11.1544 12.5508 12.707C12.551 14.2593 13.6245 15.3816 15.1064 15.3818C16.2942 15.3818 17.3112 14.5908 17.5107 13.5068L16.5225 13.3799C16.3514 14.0146 15.7906 14.4736 15.1064 14.4736C14.2421 14.4734 13.5868 13.7319 13.5771 12.707C13.5771 11.6819 14.2515 10.9397 15.1064 10.9395C15.7716 10.9395 16.3616 11.3985 16.5137 12.043L17.502 11.916C17.3309 10.8224 16.3234 10.0313 15.0977 10.0312ZM6.96484 15.1865H8.10547V11.9453L10.7754 15.1865H12.21L9.12207 11.5352L12.125 8.27344H10.6992L8.10547 11.1445V8.27344H6.96484V15.1865ZM14.5654 9.64062H15.6104L16.7227 8H15.8477L15.0879 9.11328L14.3281 8H13.4629L14.5654 9.64062Z",
     fill: "currentColor"
   }
 ) }));
-Z.displayName = "CZK";
-const p = r((L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
+p.displayName = "CZK";
+const Z = r((L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
   "path",
   {
     d: "M12 0.5C18.3513 0.5 23.5 5.64873 23.5 12C23.5 18.3513 18.3513 23.5 12 23.5C5.64873 23.5 0.5 18.3513 0.5 12C0.500001 5.64873 5.64873 0.500001 12 0.5ZM12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5ZM12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5ZM12.3301 8.2002C10.5401 8.2002 9.15977 9.30996 8.75977 10.96H7.59961V11.6504H8.65039C8.6404 11.7603 8.62988 11.8704 8.62988 11.9902C8.6299 12.0901 8.63965 12.1901 8.63965 12.29H7.59961V12.9795H8.75C9.13999 14.6494 10.5299 15.7802 12.3398 15.7803C13.9898 15.7803 15.4202 14.7198 15.7402 13.2598L14.5996 13.0703C14.3294 14.0401 13.3795 14.7402 12.3496 14.7402C11.2198 14.7401 10.3302 14.0394 9.99023 12.9795H12.5996V12.29H9.84961C9.83962 12.1901 9.83984 12.0901 9.83984 11.9902C9.83984 11.8704 9.83965 11.7602 9.84961 11.6504H12.6104V10.96H10C10.35 9.92008 11.2198 9.25015 12.3496 9.25C13.4095 9.25 14.3497 9.96986 14.5898 10.9697L15.7402 10.8301C15.4202 9.3101 13.99 8.20023 12.3301 8.2002Z",
     fill: "currentColor"
   }
 ) }));
-p.displayName = "EUR";
+Z.displayName = "EUR";
 const h = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, viewBox: "0 0 20 20", children: /* @__PURE__ */ C(
     "path",
@@ -329,7 +329,7 @@ const E = r(
   ) })
 );
 E.displayName = "TextH1";
-const F = r(
+const k = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -338,8 +338,8 @@ const F = r(
     }
   ) })
 );
-F.displayName = "TextH2";
-const R = r(
+k.displayName = "TextH2";
+const v = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -348,8 +348,8 @@ const R = r(
     }
   ) })
 );
-R.displayName = "TextH3";
-const k = r(
+v.displayName = "TextH3";
+const F = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -358,8 +358,8 @@ const k = r(
     }
   ) })
 );
-k.displayName = "EditorBold";
-const v = r(
+F.displayName = "EditorBold";
+const R = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -368,7 +368,7 @@ const v = r(
     }
   ) })
 );
-v.displayName = "EditorItalic";
+R.displayName = "EditorItalic";
 const g = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
@@ -439,7 +439,7 @@ const T = r(
   ) })
 );
 T.displayName = "CurlyBrace";
-const D = r(
+const b = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -450,8 +450,8 @@ const D = r(
     }
   ) })
 );
-D.displayName = "CurlyBrace2";
-const b = r(
+b.displayName = "CurlyBrace2";
+const D = r(
   (L, l) => /* @__PURE__ */ C(e, { ref: l, ...L, children: /* @__PURE__ */ C(
     "path",
     {
@@ -462,7 +462,7 @@ const b = r(
     }
   ) })
 );
-b.displayName = "DoubleArrowRight";
+D.displayName = "DoubleArrowRight";
 const P = r(
   (L, l) => /* @__PURE__ */ i(e, { ref: l, ...L, children: [
     /* @__PURE__ */ C(
@@ -734,11 +734,30 @@ const J = r(
   ) })
 );
 J.displayName = "XTwitter";
+const Q = r(
+  (L, l) => /* @__PURE__ */ i(e, { ref: l, ...L, children: [
+    /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M10.0757 20.7512L10.6715 20.4768L10.6715 20.4768C11.3259 20.1755 11.6532 20.0248 12 20.0248V2C11.0531 2 10.4198 3.13612 9.15317 5.40837L9.15316 5.40838L8.82547 5.99623L8.82546 5.99624C8.46552 6.64194 8.28555 6.96479 8.00494 7.17781C7.72433 7.39083 7.37485 7.4699 6.67589 7.62805L6.03954 7.77203C3.57986 8.32856 2.35002 8.60682 2.05742 9.54773C1.76482 10.4886 2.60325 11.4691 4.2801 13.4299L4.71392 13.9372L4.71392 13.9372C5.19043 14.4944 5.42868 14.773 5.53586 15.1177C5.64305 15.4624 5.60703 15.8341 5.53498 16.5776L5.4694 17.2544C5.21588 19.8706 5.08912 21.1787 5.85515 21.7602C6.62117 22.3417 7.77267 21.8115 10.0757 20.7512L10.0757 20.7512Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M13.9243 20.7512L13.3285 20.4768L13.3285 20.4768C12.6741 20.1755 12.3468 20.0248 12 20.0248V2C12.9469 2 13.5802 3.13612 14.8468 5.40837L14.8468 5.40838L15.1745 5.99623L15.1745 5.99624C15.5345 6.64194 15.7144 6.96479 15.9951 7.17781C16.2757 7.39083 16.6251 7.4699 17.3241 7.62805L17.9605 7.77203C20.4201 8.32856 21.65 8.60682 21.9426 9.54773C22.2352 10.4886 21.3968 11.4691 19.7199 13.4299L19.2861 13.9372L19.2861 13.9372C18.8096 14.4944 18.5713 14.773 18.4641 15.1177C18.357 15.4624 18.393 15.8341 18.465 16.5776L18.5306 17.2544C18.7841 19.8706 18.9109 21.1787 18.1449 21.7602C17.3788 22.3417 16.2273 21.8115 13.9243 20.7512L13.9243 20.7512Z",
+        fill: "var(--half-star-background, var(--color-comp-rating-star-empty))"
+      }
+    )
+  ] })
+);
+Q.displayName = "HalfStar";
 export {
-  n as ArrowsSorting,
+  V as ArrowsSorting,
   t as Barcode,
   B as BulletList,
-  Z as CZK,
+  p as CZK,
   s as CheckMinus,
   h as Checked,
   K as Coins,
@@ -747,12 +766,12 @@ export {
   j as Coins3,
   S as Colour,
   T as CurlyBrace,
-  D as CurlyBrace2,
+  b as CurlyBrace2,
   d as Cutlery,
-  b as DoubleArrowRight,
-  p as EUR,
-  k as EditorBold,
-  v as EditorItalic,
+  D as DoubleArrowRight,
+  Z as EUR,
+  F as EditorBold,
+  R as EditorItalic,
   g as EditorStrikethrough,
   G as EmptyCircle,
   P as ExternalLink,
@@ -762,12 +781,13 @@ export {
   f as FlagCz,
   y as FlagEn,
   m as FlagSk,
+  Q as HalfStar,
   M as LayoutHorizontal,
   c as LayoutVertical,
   Y as Linkedin,
   u as MagnifyingGlass,
   O as MenuDotsVertical,
-  V as MuzaIcon,
+  n as MuzaIcon,
   x as NumberList,
   I as Plus,
   w as RemoveTextFormat,
@@ -776,8 +796,8 @@ export {
   A as Scan,
   _ as Spinner,
   E as TextH1,
-  F as TextH2,
-  R as TextH3,
+  k as TextH2,
+  v as TextH3,
   z as XClose,
   J as XTwitter,
   U as Youtube

package/dist/components/Icons/LogosAndBadges.stories.d.ts

@@ -4,5 +4,6 @@ export default meta;
 type Story = StoryObj;
 export declare const Logos: Story;
 export declare const LogosLight: Story;
-export declare const Badges: Story;
+export declare const StoreBadges: Story;
+export declare const PaymentBadges: Story;
 //# sourceMappingURL=LogosAndBadges.stories.d.ts.map

package/dist/components/Icons/LogosAndBadges.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogosAndBadges.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/LogosAndBadges.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI,EAAE,IAeX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAyBrB,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAyBpB,CAAA"}
+{"version":3,"file":"LogosAndBadges.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/LogosAndBadges.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI,EAAE,IAeX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAuCrB,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA"}

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

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

@@ -0,0 +1,33 @@
+export interface UseWebOtpAutofillOptions {
+    /**
+     * Enables the WebOTP listener. Keep it `false` until the OTP screen is
+     * actually shown so the browser prompt appears at the right moment.
+     */
+    enabled: boolean;
+    /**
+     * Called with the code parsed from the incoming SMS. Receives the raw string
+     * exactly as the browser extracted it; the caller is responsible for
+     * truncating/validating it against the expected length.
+     */
+    onReceive: (code: string) => void;
+}
+/**
+ * Progressive-enhancement hook for automatic SMS OTP retrieval via the
+ * [WebOTP API](https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API).
+ *
+ * When enabled on a supporting browser (Android Chrome), it asks the browser
+ * to surface the one-time code from an incoming, origin-bound SMS and hands it
+ * to `onReceive`. On unsupported browsers (notably iOS Safari and desktop) it
+ * is a no-op — there the native `autocomplete="one-time-code"` keyboard
+ * suggestion handled by the input element covers autofill instead.
+ *
+ * The listener is aborted automatically on unmount or when `enabled` becomes
+ * `false`, satisfying the API's single-in-flight-request constraint.
+ *
+ * Requirements for the automatic Android flow to trigger:
+ * - Page served over HTTPS (or `localhost`).
+ * - The SMS body ends with an origin-bound line, e.g. `@example.com #123456`.
+ * - Called after a user gesture that reveals the OTP field.
+ */
+export declare const useWebOtpAutofill: ({ enabled, onReceive, }: UseWebOtpAutofillOptions) => void;
+//# sourceMappingURL=useWebOtpAutofill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWebOtpAutofill.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/useWebOtpAutofill.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAAI,yBAG/B,wBAAwB,KAAG,IAkC7B,CAAA"}

package/dist/components/InputOTP/useWebOtpAutofill.js

@@ -0,0 +1,25 @@
+import { useRef as u, useEffect as f } from "react";
+const c = ({
+  enabled: o,
+  onReceive: t
+}) => {
+  const n = u(t);
+  f(() => {
+    n.current = t;
+  }, [t]), f(() => {
+    if (!o || typeof window > "u" || !("OTPCredential" in window)) return;
+    const e = new AbortController();
+    return navigator.credentials.get({
+      // `otp` is not yet part of the standard lib.dom CredentialRequestOptions.
+      otp: { transport: ["sms"] },
+      signal: e.signal
+    }).then((r) => {
+      const s = r == null ? void 0 : r.code;
+      s && n.current(s);
+    }).catch(() => {
+    }), () => e.abort();
+  }, [o]);
+};
+export {
+  c as useWebOtpAutofill
+};

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

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAWpD;;;;;;;;;GASG;AAQH,eAAO,MAAM,+BAA+B;;8EAuB3C,CAAA;AAED,eAAO,MAAM,+BAA+B;;8EAiB3C,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAC/C,YAAY,CAAC,OAAO,+BAA+B,CAAC,CAAC,SAAS,CAAC,CAChE,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;IACvC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAA;CAClC;AAED,QAAA,MAAM,gBAAgB,GAAI,kGASvB,qBAAqB,4CAqEvB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAWpD;;;;;;;;;GASG;AAQH,eAAO,MAAM,+BAA+B;;8EAuB3C,CAAA;AAED,eAAO,MAAM,+BAA+B;;8EAiB3C,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAC/C,YAAY,CAAC,OAAO,+BAA+B,CAAC,CAAC,SAAS,CAAC,CAChE,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;IACvC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAA;CAClC;AAED,QAAA,MAAM,gBAAgB,GAAI,kGASvB,qBAAqB,4CA8EvB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}