@adamosuiteservices/ui 2.19.0 → 2.19.2

package/dist/timeline.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./jsx-runtime-BB_1_6y_.cjs"),a=require("./index-DoxiiusW.cjs"),R=require("./index-DCsgSkBj.cjs"),T=require("react");function E(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return e.default=t,Object.freeze(e)}const s=E(T),d=s.createContext({orientation:"vertical",scrollable:!1}),l=s.createContext({status:"pending"}),v=s.createContext(!1);function C({className:t,orientation:e="vertical",responsive:i=!0,children:r,...o}){const m=R.useMediaQuery("(max-width: 639px)"),c=e==="horizontal"&&i&&m?"vertical":e,u=e==="horizontal"&&!i,p=s.Children.toArray(r),f=n.jsxRuntimeExports.jsx("ol",{"data-slot":"timeline","data-orientation":c,className:a.cn("adm:flex",c==="vertical"?"adm:flex-col":"adm:flex-row adm:items-start",t),...o,children:p.map((x,j)=>{if(!s.isValidElement(x))return x;const b=p[j-1],h=s.isValidElement(b)?b.props.status??"pending":"pending";return n.jsxRuntimeExports.jsx(v.Provider,{value:h==="complete",children:x},j)})});return n.jsxRuntimeExports.jsx(d.Provider,{value:{orientation:c,scrollable:u},children:u?n.jsxRuntimeExports.jsx("div",{className:"adm:w-full adm:overflow-x-auto",children:f}):f})}function y({className:t,status:e="pending",...i}){const{orientation:r,scrollable:o}=s.useContext(d);return n.jsxRuntimeExports.jsx(l.Provider,{value:{status:e},children:n.jsxRuntimeExports.jsx("li",{"data-slot":"timeline-item","data-status":e,className:a.cn("adm:group adm:relative",r==="vertical"?"adm:flex adm:gap-4":a.cn("adm:flex adm:flex-1 adm:flex-col adm:items-center",o&&"adm:min-w-28"),t),...i})})}function g(){const{status:t}=s.useContext(l),e=t==="complete",i=t==="active";return n.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-dot",className:a.cn("adm:relative adm:flex adm:size-5 adm:shrink-0 adm:items-center","adm:justify-center","adm:rounded-full adm:border","adm:transition-[color,box-shadow,background-color,border-color]",e&&"adm:border-primary adm:bg-primary",i&&"adm:border-primary adm:bg-background",!i&&!e&&"adm:border-border adm:bg-background"),children:[i&&n.jsxRuntimeExports.jsx("span",{className:"adm:size-2 adm:rounded-full adm:bg-primary"}),e&&n.jsxRuntimeExports.jsx("svg",{viewBox:"0 0 12 12",className:"adm:size-3",fill:"none","aria-hidden":!0,children:n.jsxRuntimeExports.jsx("path",{d:"M2 6l3 3 5-5",stroke:"white",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]})}function N({className:t,...e}){const{orientation:i}=s.useContext(d),{status:r}=s.useContext(l),o=s.useContext(v),m=r==="complete";return i==="vertical"?n.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-indicator",className:a.cn("adm:flex adm:shrink-0 adm:flex-col adm:items-center",t),...e,children:[n.jsxRuntimeExports.jsx(g,{}),n.jsxRuntimeExports.jsx("div",{className:a.cn("adm:mt-1 adm:min-h-4 adm:w-0.5 adm:flex-1","adm:group-last:hidden",m?"adm:bg-primary":"adm:bg-border")})]}):n.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-indicator",className:a.cn("adm:flex adm:w-full adm:items-center",t),...e,children:[n.jsxRuntimeExports.jsx("div",{className:a.cn("adm:h-0.5 adm:flex-1","adm:group-first:invisible",o?"adm:bg-primary":"adm:bg-border")}),n.jsxRuntimeExports.jsx(g,{}),n.jsxRuntimeExports.jsx("div",{className:a.cn("adm:h-0.5 adm:flex-1","adm:group-last:hidden",m?"adm:bg-primary":"adm:bg-border")})]})}function w({className:t,...e}){const{orientation:i}=s.useContext(d),{status:r}=s.useContext(l);return n.jsxRuntimeExports.jsx("div",{"data-slot":"timeline-content",className:a.cn("adm:flex adm:flex-col adm:gap-3",i==="vertical"?`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./jsx-runtime-BB_1_6y_.cjs"),a=require("./index-DoxiiusW.cjs"),R=require("./index-DCsgSkBj.cjs"),E=require("react");function T(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const s=T(E),d=s.createContext({orientation:"vertical",scrollable:!1}),l=s.createContext({status:"pending"}),v=s.createContext(!1);function C({className:t,orientation:e="vertical",responsive:n=!0,children:r,...m}){const o=R.useMediaQuery("(max-width: 639px)"),c=e==="horizontal"&&n&&o?"vertical":e,u=e==="horizontal"&&!n,p=s.Children.toArray(r),f=i.jsxRuntimeExports.jsx("ol",{"data-slot":"timeline","data-orientation":c,className:a.cn("adm:flex",c==="vertical"?"adm:flex-col":"adm:flex-row adm:items-start",t),...m,children:p.map((x,j)=>{if(!s.isValidElement(x))return x;const b=p[j-1],h=s.isValidElement(b)?b.props.status??"pending":"pending";return i.jsxRuntimeExports.jsx(v.Provider,{value:h==="complete",children:x},j)})});return i.jsxRuntimeExports.jsx(d.Provider,{value:{orientation:c,scrollable:u},children:u?i.jsxRuntimeExports.jsx("div",{className:"adm:w-full adm:overflow-x-auto",children:f}):f})}function y({className:t,status:e="pending",...n}){const{orientation:r,scrollable:m}=s.useContext(d);return i.jsxRuntimeExports.jsx(l.Provider,{value:{status:e},children:i.jsxRuntimeExports.jsx("li",{"data-slot":"timeline-item","data-status":e,className:a.cn("adm:group adm:relative",r==="vertical"?"adm:flex adm:gap-4":a.cn("adm:flex adm:flex-1 adm:flex-col adm:items-center",m&&"adm:min-w-28"),t),...n})})}function g(){const{status:t}=s.useContext(l),e=t==="complete",n=t==="active";return i.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-dot",className:a.cn("adm:relative adm:flex adm:size-5 adm:shrink-0 adm:items-center","adm:justify-center","adm:rounded-full adm:border","adm:transition-[color,box-shadow,background-color,border-color]",e&&"adm:border-primary adm:bg-primary",n&&"adm:border-primary adm:bg-background",!n&&!e&&"adm:border-border adm:bg-background"),children:[n&&i.jsxRuntimeExports.jsx("span",{className:"adm:size-2 adm:rounded-full adm:bg-primary"}),e&&i.jsxRuntimeExports.jsx("svg",{viewBox:"0 0 12 12",className:"adm:size-3",fill:"none","aria-hidden":!0,children:i.jsxRuntimeExports.jsx("path",{d:"M2 6l3 3 5-5",stroke:"white",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]})}function N({className:t,...e}){const{orientation:n}=s.useContext(d),{status:r}=s.useContext(l),m=s.useContext(v),o=r==="complete";return n==="vertical"?i.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-indicator",className:a.cn("adm:flex adm:shrink-0 adm:flex-col adm:items-center",t),...e,children:[i.jsxRuntimeExports.jsx(g,{}),i.jsxRuntimeExports.jsx("div",{className:a.cn("adm:my-1 adm:min-h-4 adm:w-px adm:flex-1","adm:group-last:hidden",o?"adm:bg-primary":"adm:bg-border")})]}):i.jsxRuntimeExports.jsxs("div",{"data-slot":"timeline-indicator",className:a.cn("adm:flex adm:w-full adm:items-center",t),...e,children:[i.jsxRuntimeExports.jsx("div",{className:a.cn("adm:h-px adm:flex-1","adm:group-first:invisible",m?"adm:bg-primary":"adm:bg-border")}),i.jsxRuntimeExports.jsx("div",{className:"adm:mx-1",children:i.jsxRuntimeExports.jsx(g,{})}),i.jsxRuntimeExports.jsx("div",{className:a.cn("adm:h-px adm:flex-1","adm:group-last:hidden",o?"adm:bg-primary":"adm:bg-border")})]})}function w({className:t,...e}){const{orientation:n}=s.useContext(d),{status:r}=s.useContext(l);return i.jsxRuntimeExports.jsx("div",{"data-slot":"timeline-content",className:a.cn("adm:flex adm:flex-col adm:gap-3",n==="vertical"?`
             adm:min-w-0 adm:flex-1 adm:pb-4
             adm:group-last:pb-0
-          `:"adm:items-center adm:pt-3",r==="pending"?"adm:text-disabled-foreground":"adm:text-foreground",t),...e})}function k({className:t,...e}){return n.jsxRuntimeExports.jsx("p",{"data-slot":"timeline-title",className:a.cn("adm:text-sm adm:leading-5 adm:font-semibold",t),...e})}function O({className:t,...e}){return n.jsxRuntimeExports.jsx("p",{"data-slot":"timeline-description",className:a.cn("adm:text-sm adm:leading-5 adm:font-normal",t),...e})}function z({className:t,...e}){return n.jsxRuntimeExports.jsx("time",{"data-slot":"timeline-time",className:a.cn("adm:text-xs adm:leading-4",t),...e})}exports.Timeline=C;exports.TimelineContent=w;exports.TimelineDescription=O;exports.TimelineIndicator=N;exports.TimelineItem=y;exports.TimelineTime=z;exports.TimelineTitle=k;
+          `:"adm:items-center adm:pt-3",r==="pending"?"adm:text-disabled-foreground":"adm:text-foreground",t),...e})}function k({className:t,...e}){return i.jsxRuntimeExports.jsx("p",{"data-slot":"timeline-title",className:a.cn("adm:text-sm adm:leading-5 adm:font-semibold",t),...e})}function O({className:t,...e}){return i.jsxRuntimeExports.jsx("p",{"data-slot":"timeline-description",className:a.cn("adm:text-sm adm:leading-5 adm:font-normal",t),...e})}function z({className:t,...e}){return i.jsxRuntimeExports.jsx("time",{"data-slot":"timeline-time",className:a.cn("adm:text-xs adm:leading-4",t),...e})}exports.Timeline=C;exports.TimelineContent=w;exports.TimelineDescription=O;exports.TimelineIndicator=N;exports.TimelineItem=y;exports.TimelineTime=z;exports.TimelineTitle=k;

package/dist/timeline.js

@@ -1,11 +1,11 @@
 "use client";
-import { j as t } from "./jsx-runtime-BzflLqGi.js";
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
 import { c as i } from "./index-CRiPKpXj.js";
 import { u as C } from "./index-BBT2EGq8.js";
 import * as n from "react";
-const s = n.createContext({ orientation: "vertical", scrollable: !1 }), l = n.createContext({ status: "pending" }), h = n.createContext(!1);
-function y({ className: a, orientation: e = "vertical", responsive: d = !0, children: m, ...r }) {
-  const o = C("(max-width: 639px)"), c = e === "horizontal" && d && o ? "vertical" : e, u = e === "horizontal" && !d, f = n.Children.toArray(m), p = /* @__PURE__ */ t.jsx(
+const o = n.createContext({ orientation: "vertical", scrollable: !1 }), l = n.createContext({ status: "pending" }), h = n.createContext(!1);
+function w({ className: a, orientation: t = "vertical", responsive: d = !0, children: m, ...r }) {
+  const s = C("(max-width: 639px)"), c = t === "horizontal" && d && s ? "vertical" : t, u = t === "horizontal" && !d, p = n.Children.toArray(m), f = /* @__PURE__ */ e.jsx(
     "ol",
     {
       "data-slot": "timeline",
@@ -16,22 +16,22 @@ function y({ className: a, orientation: e = "vertical", responsive: d = !0, chil
         a
       ),
       ...r,
-      children: f.map((x, b) => {
+      children: p.map((x, b) => {
         if (!n.isValidElement(x)) return x;
-        const v = f[b - 1], j = n.isValidElement(v) ? v.props.status ?? "pending" : "pending";
-        return /* @__PURE__ */ t.jsx(h.Provider, { value: j === "complete", children: x }, b);
+        const v = p[b - 1], j = n.isValidElement(v) ? v.props.status ?? "pending" : "pending";
+        return /* @__PURE__ */ e.jsx(h.Provider, { value: j === "complete", children: x }, b);
       })
     }
   );
-  return /* @__PURE__ */ t.jsx(s.Provider, { value: { orientation: c, scrollable: u }, children: u ? /* @__PURE__ */ t.jsx("div", { className: "adm:w-full adm:overflow-x-auto", children: p }) : p });
+  return /* @__PURE__ */ e.jsx(o.Provider, { value: { orientation: c, scrollable: u }, children: u ? /* @__PURE__ */ e.jsx("div", { className: "adm:w-full adm:overflow-x-auto", children: f }) : f });
 }
-function k({ className: a, status: e = "pending", ...d }) {
-  const { orientation: m, scrollable: r } = n.useContext(s);
-  return /* @__PURE__ */ t.jsx(l.Provider, { value: { status: e }, children: /* @__PURE__ */ t.jsx(
+function k({ className: a, status: t = "pending", ...d }) {
+  const { orientation: m, scrollable: r } = n.useContext(o);
+  return /* @__PURE__ */ e.jsx(l.Provider, { value: { status: t }, children: /* @__PURE__ */ e.jsx(
     "li",
     {
       "data-slot": "timeline-item",
-      "data-status": e,
+      "data-status": t,
       className: i(
         "adm:group adm:relative",
         m === "vertical" ? "adm:flex adm:gap-4" : i(
@@ -45,8 +45,8 @@ function k({ className: a, status: e = "pending", ...d }) {
   ) });
 }
 function g() {
-  const { status: a } = n.useContext(l), e = a === "complete", d = a === "active";
-  return /* @__PURE__ */ t.jsxs(
+  const { status: a } = n.useContext(l), t = a === "complete", d = a === "active";
+  return /* @__PURE__ */ e.jsxs(
     "div",
     {
       "data-slot": "timeline-dot",
@@ -55,13 +55,13 @@ function g() {
         "adm:justify-center",
         "adm:rounded-full adm:border",
         "adm:transition-[color,box-shadow,background-color,border-color]",
-        e && "adm:border-primary adm:bg-primary",
+        t && "adm:border-primary adm:bg-primary",
         d && "adm:border-primary adm:bg-background",
-        !d && !e && "adm:border-border adm:bg-background"
+        !d && !t && "adm:border-border adm:bg-background"
       ),
       children: [
-        d && /* @__PURE__ */ t.jsx("span", { className: "adm:size-2 adm:rounded-full adm:bg-primary" }),
-        e && /* @__PURE__ */ t.jsx("svg", { viewBox: "0 0 12 12", className: "adm:size-3", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ t.jsx(
+        d && /* @__PURE__ */ e.jsx("span", { className: "adm:size-2 adm:rounded-full adm:bg-primary" }),
+        t && /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 12 12", className: "adm:size-3", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e.jsx(
           "path",
           {
             d: "M2 6l3 3 5-5",
@@ -75,53 +75,53 @@ function g() {
     }
   );
 }
-function z({ className: a, ...e }) {
-  const { orientation: d } = n.useContext(s), { status: m } = n.useContext(l), r = n.useContext(h), o = m === "complete";
-  return d === "vertical" ? /* @__PURE__ */ t.jsxs(
+function z({ className: a, ...t }) {
+  const { orientation: d } = n.useContext(o), { status: m } = n.useContext(l), r = n.useContext(h), s = m === "complete";
+  return d === "vertical" ? /* @__PURE__ */ e.jsxs(
     "div",
     {
       "data-slot": "timeline-indicator",
       className: i("adm:flex adm:shrink-0 adm:flex-col adm:items-center", a),
-      ...e,
+      ...t,
       children: [
-        /* @__PURE__ */ t.jsx(g, {}),
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ e.jsx(g, {}),
+        /* @__PURE__ */ e.jsx(
           "div",
           {
             className: i(
-              "adm:mt-1 adm:min-h-4 adm:w-0.5 adm:flex-1",
+              "adm:my-1 adm:min-h-4 adm:w-px adm:flex-1",
               "adm:group-last:hidden",
-              o ? "adm:bg-primary" : "adm:bg-border"
+              s ? "adm:bg-primary" : "adm:bg-border"
             )
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ t.jsxs(
+  ) : /* @__PURE__ */ e.jsxs(
     "div",
     {
       "data-slot": "timeline-indicator",
       className: i("adm:flex adm:w-full adm:items-center", a),
-      ...e,
+      ...t,
       children: [
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ e.jsx(
           "div",
           {
             className: i(
-              "adm:h-0.5 adm:flex-1",
+              "adm:h-px adm:flex-1",
               "adm:group-first:invisible",
               r ? "adm:bg-primary" : "adm:bg-border"
             )
           }
         ),
-        /* @__PURE__ */ t.jsx(g, {}),
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ e.jsx("div", { className: "adm:mx-1", children: /* @__PURE__ */ e.jsx(g, {}) }),
+        /* @__PURE__ */ e.jsx(
           "div",
           {
             className: i(
-              "adm:h-0.5 adm:flex-1",
+              "adm:h-px adm:flex-1",
               "adm:group-last:hidden",
-              o ? "adm:bg-primary" : "adm:bg-border"
+              s ? "adm:bg-primary" : "adm:bg-border"
             )
           }
         )
@@ -129,9 +129,9 @@ function z({ className: a, ...e }) {
     }
   );
 }
-function A({ className: a, ...e }) {
-  const { orientation: d } = n.useContext(s), { status: m } = n.useContext(l);
-  return /* @__PURE__ */ t.jsx(
+function A({ className: a, ...t }) {
+  const { orientation: d } = n.useContext(o), { status: m } = n.useContext(l);
+  return /* @__PURE__ */ e.jsx(
     "div",
     {
       "data-slot": "timeline-content",
@@ -144,42 +144,42 @@ function A({ className: a, ...e }) {
         m === "pending" ? "adm:text-disabled-foreground" : "adm:text-foreground",
         a
       ),
-      ...e
+      ...t
     }
   );
 }
-function E({ className: a, ...e }) {
-  return /* @__PURE__ */ t.jsx(
+function E({ className: a, ...t }) {
+  return /* @__PURE__ */ e.jsx(
     "p",
     {
       "data-slot": "timeline-title",
       className: i("adm:text-sm adm:leading-5 adm:font-semibold", a),
-      ...e
+      ...t
     }
   );
 }
-function I({ className: a, ...e }) {
-  return /* @__PURE__ */ t.jsx(
+function I({ className: a, ...t }) {
+  return /* @__PURE__ */ e.jsx(
     "p",
     {
       "data-slot": "timeline-description",
       className: i("adm:text-sm adm:leading-5 adm:font-normal", a),
-      ...e
+      ...t
     }
   );
 }
-function M({ className: a, ...e }) {
-  return /* @__PURE__ */ t.jsx(
+function M({ className: a, ...t }) {
+  return /* @__PURE__ */ e.jsx(
     "time",
     {
       "data-slot": "timeline-time",
       className: i("adm:text-xs adm:leading-4", a),
-      ...e
+      ...t
     }
   );
 }
 export {
-  y as Timeline,
+  w as Timeline,
   A as TimelineContent,
   I as TimelineDescription,
   z as TimelineIndicator,

package/docs/components/ui/input-group.md

@@ -478,7 +478,7 @@ Addons focus the input when clicking on the addon (not on buttons).
 
 ## Implementation notes
 
-- **Container**: InputGroup is the wrapper with border, shadow, focus ring
+- **Container**: InputGroup is the wrapper with border, focus ring
 - **Input/Textarea**: No border, no shadow, no focus ring (applied to group)
 - **Auto-height**: Group has `has-[>textarea]:h-auto` for textareas
 - **Alignment**: CVA with 4 positions (inline-start, inline-end, block-start, block-end)

package/docs/components/ui/input-otp.md

@@ -0,0 +1,254 @@
+# Input OTP component
+
+Accessible one-time password (OTP) input. Built on top of the `input-otp` library with support for separators, custom patterns, validation, and disabled state.
+
+## Description
+
+The `InputOTP` component provides a set of individual input slots for entering one-time passwords or verification codes. Each slot accepts a single character and advances focus automatically.
+
+## Import
+
+```typescript
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@adamosuiteservices/ui/input-otp";
+```
+
+**Components**: 4 (`InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator`)
+
+## Basic usage
+
+```tsx
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## With separator
+
+```tsx
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## With label and description
+
+```tsx
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="otp">One-time password</FieldLabel>
+    <InputOTP maxLength={6} id="otp">
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+    <FieldDescription>
+      Enter the 6-digit code sent to your email.
+    </FieldDescription>
+  </Field>
+</FieldGroup>
+```
+
+## Controlled
+
+```tsx
+const [value, setValue] = useState("");
+
+<InputOTP maxLength={6} value={value} onChange={setValue}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>;
+```
+
+## Digits only
+
+```tsx
+import { REGEXP_ONLY_DIGITS } from "input-otp";
+
+<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>;
+```
+
+## Letters only
+
+```tsx
+import { REGEXP_ONLY_CHARS } from "input-otp";
+
+<InputOTP maxLength={6} pattern={REGEXP_ONLY_CHARS}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>;
+```
+
+## States
+
+### Disabled
+
+```tsx
+<InputOTP maxLength={6} disabled>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Invalid
+
+Apply `aria-invalid` to each `InputOTPSlot` to show validation error styles:
+
+```tsx
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="invalid-otp">Verification code</FieldLabel>
+    <InputOTP maxLength={6} id="invalid-otp">
+      <InputOTPGroup>
+        <InputOTPSlot index={0} aria-invalid />
+        <InputOTPSlot index={1} aria-invalid />
+        <InputOTPSlot index={2} aria-invalid />
+        <InputOTPSlot index={3} aria-invalid />
+        <InputOTPSlot index={4} aria-invalid />
+        <InputOTPSlot index={5} aria-invalid />
+      </InputOTPGroup>
+    </InputOTP>
+    <FieldError>Invalid code. Please try again.</FieldError>
+  </Field>
+</FieldGroup>
+```
+
+## Props
+
+### InputOTP
+
+| Prop                 | Type                      | Default | Description                             |
+| -------------------- | ------------------------- | ------- | --------------------------------------- |
+| `maxLength`          | `number`                  | -       | Total number of OTP slots (required)    |
+| `value`              | `string`                  | -       | Controlled value                        |
+| `onChange`           | `(value: string) => void` | -       | Callback when value changes             |
+| `pattern`            | `string \| RegExp`        | -       | Regex pattern to restrict allowed input |
+| `disabled`           | `boolean`                 | `false` | Disables all slots                      |
+| `containerClassName` | `string`                  | -       | Additional classes for the container    |
+| `className`          | `string`                  | -       | Additional classes for the hidden input |
+
+### InputOTPGroup
+
+| Prop        | Type     | Default | Description            |
+| ----------- | -------- | ------- | ---------------------- |
+| `className` | `string` | -       | Additional CSS classes |
+
+### InputOTPSlot
+
+| Prop           | Type      | Default | Description                    |
+| -------------- | --------- | ------- | ------------------------------ |
+| `index`        | `number`  | -       | Slot position index (required) |
+| `aria-invalid` | `boolean` | `false` | Marks slot as invalid          |
+| `className`    | `string`  | -       | Additional CSS classes         |
+
+### InputOTPSeparator
+
+Renders a visual separator (dash icon) between groups. Accepts all native `<div>` props.
+
+## Slot styles
+
+### Default
+
+- **Size**: `h-10 w-14` (40×56px)
+- **Border**: `border border-input rounded-md`
+- **Background**: `bg-background`
+- **Font**: `text-sm text-input-foreground`
+- **Placeholder**: `-` dash shown in `text-foreground-secondary` when empty
+- **Spacing between slots**: `gap-4` (16px) via `InputOTPGroup`
+- **Transitions**: `transition-[color,box-shadow]`
+
+### Active (focused slot)
+
+- `data-[active=true]:border-primary-300`
+- `data-[active=true]:ring-4 data-[active=true]:ring-primary/10`
+
+### Invalid
+
+- `aria-invalid:border-destructive`
+- `data-[active=true]:aria-invalid:border-destructive`
+- `data-[active=true]:aria-invalid:ring-destructive/10`
+
+### Disabled
+
+- `has-disabled:opacity-50` applied to the container
+
+## Accessibility
+
+- ✅ **Keyboard**: Focus advances automatically between slots on input
+- ✅ **ARIA**: Use `aria-invalid` on each slot for error states
+- ✅ **Label**: Associate an `id` on `InputOTP` and use `<FieldLabel htmlFor="...">`
+- ✅ **Role**: `InputOTPSeparator` has `role="separator"`
+- ✅ **Description**: Use `aria-describedby` or `<FieldDescription>` for help messages
+- ⚠️ **Error messages**: Associate with `<FieldError>` and `aria-describedby` for screen readers
+
+## Implementation notes
+
+- **Built on `input-otp`**: Wraps the `OTPInput` and `OTPInputContext` primitives
+- **Hidden input**: The actual `<input>` element is hidden; visible slots are `<div>` elements driven by context
+- **Fake caret**: An animated blinking caret is rendered inside the active slot via `hasFakeCaret`
+- **Pattern support**: Pass `REGEXP_ONLY_DIGITS` or `REGEXP_ONLY_CHARS` from `input-otp` for restricted input
+- **Composition**: Slots are always zero-indexed. When using a separator, slot indices continue sequentially across groups (0–2 in first group, 3–5 in second)
+
+## References
+
+- input-otp library: <https://github.com/guilhermerodz/input-otp>
+- shadcn/ui documentation: <https://ui.shadcn.com/docs/components/input-otp>

package/docs/components/ui/input.md

@@ -306,7 +306,6 @@ const maxLength = 100;
 - **Border**: `border`, `border-input`, `rounded-md`
 - **Padding**: `px-3` (no vertical padding, height defines the height)
 - **Font**: `text-sm`
-- **Shadow**: `shadow-xs`
 - **Background**: `bg-background`
 - **Hover**: `hover:bg-muted`
 - **Transitions**: `transition-[color,box-shadow]`
@@ -330,7 +329,6 @@ const maxLength = 100;
 - **Validation**: Uses native attributes (`required`, `pattern`, `min`, `max`) + `aria-invalid`
 - **File input**: Special styles for "Choose file" button
 - **Focus ring**: `ring-4` with `ring-primary/10` for visibility without being invasive
-- **Shadow**: Subtle `shadow-xs` for depth
 - **Font size**: `text-sm` on all screen sizes
 - **Background**: Solid `bg-background`, `hover:bg-muted`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",