@zentauri-ui/zentauri-components 1.7.3 → 1.7.5

package/src/design-system/tooltip.ts

@@ -7,43 +7,43 @@ export const zuiTooltipVariants = {
   outline:
     "border bg-[var(--zui-tooltip-outline-bg,#000000)] dark:bg-[var(--zui-tooltip-outline-bg-dark,#ffffff)] text-[color:var(--zui-tooltip-outline-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-outline-fg-dark,#000000)]",
   ghost:
-    "bg-[var(--zui-tooltip-ghost-bg,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-tooltip-ghost-fg,#ffffffe6)]",
+    "bg-[var(--zui-tooltip-ghost-bg,oklch(27.8%_0.033_256.848))] dark:bg-[var(--zui-tooltip-ghost-bg-dark,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-tooltip-ghost-fg,#ffffffe6)] dark:text-[color:var(--zui-tooltip-ghost-fg-dark,#ffffffe6)]",
   glass:
     "border border-[color:var(--zui-tooltip-glass-border,#00000026)] dark:border-[color:var(--zui-tooltip-glass-border-dark,#ffffff26)] bg-[var(--zui-tooltip-glass-bg,#0000001a)] dark:bg-[var(--zui-tooltip-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-tooltip-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tooltip-glass-fg-dark,#ffffff)] backdrop-blur-md",
   emerald:
-    "bg-[var(--zui-tooltip-emerald-bg,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-tooltip-emerald-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-emerald-bg,oklch(43.2%_0.095_166.913))] dark:bg-[var(--zui-tooltip-emerald-bg-dark,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-tooltip-emerald-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-emerald-fg-dark,#ffffff)]",
   indigo:
-    "bg-[var(--zui-tooltip-indigo-bg,oklch(39.8%_0.195_277.366))] text-[color:var(--zui-tooltip-indigo-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-indigo-bg,oklch(39.8%_0.195_277.366))] dark:bg-[var(--zui-tooltip-indigo-bg-dark,oklch(39.8%_0.195_277.366))] text-[color:var(--zui-tooltip-indigo-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-indigo-fg-dark,#ffffff)]",
   purple:
-    "bg-[var(--zui-tooltip-purple-bg,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-purple-fg,#ffffff)]",
-  pink: "bg-[var(--zui-tooltip-pink-bg,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-pink-fg,#ffffff)]",
-  rose: "bg-[var(--zui-tooltip-rose-bg,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-rose-fg,#ffffff)]",
-  sky: "bg-[var(--zui-tooltip-sky-bg,oklch(50%_0.134_242.749))] text-[color:var(--zui-tooltip-sky-fg,#ffffff)]",
-  teal: "bg-[var(--zui-tooltip-teal-bg,oklch(43.7%_0.078_188.216))] text-[color:var(--zui-tooltip-teal-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-purple-bg,oklch(43.8%_0.218_303.724))] dark:bg-[var(--zui-tooltip-purple-bg-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-purple-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-purple-fg-dark,#ffffff)]",
+  pink: "bg-[var(--zui-tooltip-pink-bg,oklch(45.9%_0.187_3.815))] dark:bg-[var(--zui-tooltip-pink-bg-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-pink-fg-dark,#ffffff)]",
+  rose: "bg-[var(--zui-tooltip-rose-bg,oklch(45.5%_0.188_13.697))] dark:bg-[var(--zui-tooltip-rose-bg-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-rose-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-rose-fg-dark,#ffffff)]",
+  sky: "bg-[var(--zui-tooltip-sky-bg,oklch(50%_0.134_242.749))] dark:bg-[var(--zui-tooltip-sky-bg-dark,oklch(50%_0.134_242.749))] text-[color:var(--zui-tooltip-sky-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-sky-fg-dark,#ffffff)]",
+  teal: "bg-[var(--zui-tooltip-teal-bg,oklch(43.7%_0.078_188.216))] dark:bg-[var(--zui-tooltip-teal-bg-dark,oklch(43.7%_0.078_188.216))] text-[color:var(--zui-tooltip-teal-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-teal-fg-dark,#ffffff)]",
   yellow:
-    "bg-[var(--zui-tooltip-yellow-bg,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-tooltip-yellow-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-yellow-bg,oklch(47.6%_0.114_61.907))] dark:bg-[var(--zui-tooltip-yellow-bg-dark,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-tooltip-yellow-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-yellow-fg-dark,#ffffff)]",
   orange:
-    "bg-[var(--zui-tooltip-orange-bg,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-orange-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-orange-bg,oklch(47%_0.157_37.304))] dark:bg-[var(--zui-tooltip-orange-bg-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-orange-fg-dark,#ffffff)]",
   green:
-    "bg-[var(--zui-tooltip-green-bg,oklch(44.8%_0.119_151.328))] text-[color:var(--zui-tooltip-green-fg,#ffffff)]",
+    "bg-[var(--zui-tooltip-green-bg,oklch(44.8%_0.119_151.328))] dark:bg-[var(--zui-tooltip-green-bg-dark,oklch(44.8%_0.119_151.328))] text-[color:var(--zui-tooltip-green-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-green-fg-dark,#ffffff)]",
   "gradient-blue":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-blue-from,oklch(42.4%_0.199_265.638))] to-[var(--zui-tooltip-gradient-blue-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-blue-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-tooltip-gradient-blue-from-dark,oklch(42.4%_0.199_265.638))] to-[var(--zui-tooltip-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-tooltip-gradient-blue-to-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-blue-fg-dark,#ffffff)]",
   "gradient-green":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-green-from,oklch(44.8%_0.119_151.328))] to-[var(--zui-tooltip-gradient-green-to,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-tooltip-gradient-green-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-tooltip-gradient-green-from-dark,oklch(44.8%_0.119_151.328))] to-[var(--zui-tooltip-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-tooltip-gradient-green-to-dark,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-tooltip-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-green-fg-dark,#ffffff)]",
   "gradient-red":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-red-from,oklch(44.4%_0.177_26.899))] to-[var(--zui-tooltip-gradient-red-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-red-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-tooltip-gradient-red-from-dark,oklch(44.4%_0.177_26.899))] to-[var(--zui-tooltip-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-tooltip-gradient-red-to-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-red-fg-dark,#ffffff)]",
   "gradient-yellow":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-yellow-from,oklch(47.6%_0.114_61.907))] to-[var(--zui-tooltip-gradient-yellow-to,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-gradient-yellow-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-tooltip-gradient-yellow-from-dark,oklch(47.6%_0.114_61.907))] to-[var(--zui-tooltip-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-tooltip-gradient-yellow-to-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-yellow-fg-dark,#ffffff)]",
   "gradient-purple":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-purple-from,oklch(43.8%_0.218_303.724))] to-[var(--zui-tooltip-gradient-purple-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-purple-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-tooltip-gradient-purple-from-dark,oklch(43.8%_0.218_303.724))] to-[var(--zui-tooltip-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-tooltip-gradient-purple-to-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-purple-fg-dark,#ffffff)]",
   "gradient-teal":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-teal-from,oklch(43.7%_0.078_188.216))] to-[var(--zui-tooltip-gradient-teal-to,oklch(45%_0.085_224.283))] text-[color:var(--zui-tooltip-gradient-teal-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-tooltip-gradient-teal-from-dark,oklch(43.7%_0.078_188.216))] to-[var(--zui-tooltip-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-tooltip-gradient-teal-to-dark,oklch(45%_0.085_224.283))] text-[color:var(--zui-tooltip-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-teal-fg-dark,#ffffff)]",
   "gradient-indigo":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-indigo-from,oklch(39.8%_0.195_277.366))] to-[var(--zui-tooltip-gradient-indigo-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-indigo-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-tooltip-gradient-indigo-from-dark,oklch(39.8%_0.195_277.366))] to-[var(--zui-tooltip-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-tooltip-gradient-indigo-to-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-indigo-fg-dark,#ffffff)]",
   "gradient-pink":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-tooltip-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-tooltip-gradient-pink-to-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-pink-fg-dark,#ffffff)]",
   "gradient-orange":
-    "bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)]",
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-tooltip-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-tooltip-gradient-orange-to-dark,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-orange-fg-dark,#ffffff)]",
 } as const;
 
 export const zuiTooltipSizes = {

package/src/design-system/typography.ts

@@ -4,36 +4,36 @@ export const zuiTypographyTones = {
   muted:
     "text-[color:var(--zui-typography-muted-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-typography-muted-fg-dark,oklch(70.4%_0.04_256.788))] border-[color:var(--zui-typography-muted-border,#00000026)] dark:border-[color:var(--zui-typography-muted-border-dark,#ffffff26)]",
   primary:
-    "text-[color:var(--zui-typography-primary-fg,oklch(52%_0.105_223.128))] dark:text-[color:var(--zui-typography-primary-fg-dark,oklch(86.5%_0.127_207.078))] border-[color:var(--zui-typography-primary-border,oklch(86.5%_0.127_207.078_/_0.4))]",
+    "text-[color:var(--zui-typography-primary-fg,oklch(52%_0.105_223.128))] dark:text-[color:var(--zui-typography-primary-fg-dark,oklch(86.5%_0.127_207.078))] border-[color:var(--zui-typography-primary-border,oklch(86.5%_0.127_207.078_/_0.4))] dark:border-[color:var(--zui-typography-primary-border-dark,oklch(86.5%_0.127_207.078_/_0.4))]",
   secondary:
     "text-[color:var(--zui-typography-secondary-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-typography-secondary-fg-dark,oklch(86.9%_0.022_252.894))] border-[color:var(--zui-typography-secondary-border,#00000026)] dark:border-[color:var(--zui-typography-secondary-border-dark,#ffffff26)]",
   accent:
-    "text-[color:var(--zui-typography-accent-fg,oklch(49.1%_0.27_292.581))] dark:text-[color:var(--zui-typography-accent-fg-dark,oklch(81.1%_0.111_293.571))] border-[color:var(--zui-typography-accent-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+    "text-[color:var(--zui-typography-accent-fg,oklch(49.1%_0.27_292.581))] dark:text-[color:var(--zui-typography-accent-fg-dark,oklch(81.1%_0.111_293.571))] border-[color:var(--zui-typography-accent-border,oklch(81.1%_0.111_293.571_/_0.4))] dark:border-[color:var(--zui-typography-accent-border-dark,oklch(81.1%_0.111_293.571_/_0.4))]",
   destructive:
-    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))]",
-  info: "text-[color:var(--zui-typography-info-fg,oklch(50%_0.134_242.749))] dark:text-[color:var(--zui-typography-info-fg-dark,oklch(82.8%_0.111_230.318))] border-[color:var(--zui-typography-info-border,oklch(82.8%_0.111_230.318_/_0.4))]",
+    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))] dark:border-[color:var(--zui-typography-destructive-border-dark,oklch(81%_0.117_11.638_/_0.4))]",
+  info: "text-[color:var(--zui-typography-info-fg,oklch(50%_0.134_242.749))] dark:text-[color:var(--zui-typography-info-fg-dark,oklch(82.8%_0.111_230.318))] border-[color:var(--zui-typography-info-border,oklch(82.8%_0.111_230.318_/_0.4))] dark:border-[color:var(--zui-typography-info-border-dark,oklch(82.8%_0.111_230.318_/_0.4))]",
   success:
-    "text-[color:var(--zui-typography-success-fg,oklch(50.8%_0.118_165.612))] dark:text-[color:var(--zui-typography-success-fg-dark,oklch(84.5%_0.143_164.978))] border-[color:var(--zui-typography-success-border,oklch(84.5%_0.143_164.978_/_0.4))]",
+    "text-[color:var(--zui-typography-success-fg,oklch(50.8%_0.118_165.612))] dark:text-[color:var(--zui-typography-success-fg-dark,oklch(84.5%_0.143_164.978))] border-[color:var(--zui-typography-success-border,oklch(84.5%_0.143_164.978_/_0.4))] dark:border-[color:var(--zui-typography-success-border-dark,oklch(84.5%_0.143_164.978_/_0.4))]",
   warning:
-    "text-[color:var(--zui-typography-warning-fg,oklch(55.5%_0.163_48.998))] dark:text-[color:var(--zui-typography-warning-fg-dark,oklch(87.9%_0.169_91.605))] border-[color:var(--zui-typography-warning-border,oklch(87.9%_0.169_91.605_/_0.4))]",
+    "text-[color:var(--zui-typography-warning-fg,oklch(55.5%_0.163_48.998))] dark:text-[color:var(--zui-typography-warning-fg-dark,oklch(87.9%_0.169_91.605))] border-[color:var(--zui-typography-warning-border,oklch(87.9%_0.169_91.605_/_0.4))] dark:border-[color:var(--zui-typography-warning-border-dark,oklch(87.9%_0.169_91.605_/_0.4))]",
   error:
-    "text-[color:var(--zui-typography-error-fg,oklch(50.5%_0.213_27.518))] dark:text-[color:var(--zui-typography-error-fg-dark,oklch(80.8%_0.114_19.571))] border-[color:var(--zui-typography-error-border,oklch(80.8%_0.114_19.571_/_0.4))]",
+    "text-[color:var(--zui-typography-error-fg,oklch(50.5%_0.213_27.518))] dark:text-[color:var(--zui-typography-error-fg-dark,oklch(80.8%_0.114_19.571))] border-[color:var(--zui-typography-error-border,oklch(80.8%_0.114_19.571_/_0.4))] dark:border-[color:var(--zui-typography-error-border-dark,oklch(80.8%_0.114_19.571_/_0.4))]",
   "gradient-pink-violet":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-pink-violet-from,oklch(59.2%_0.249_0.584))] dark:from-[var(--zui-typography-gradient-pink-violet-from-dark,oklch(71.8%_0.202_349.761))] to-[var(--zui-typography-gradient-pink-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-pink-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-pink-violet-fg,transparent)] border-[color:var(--zui-typography-gradient-pink-violet-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-pink-violet-from,oklch(59.2%_0.249_0.584))] dark:from-[var(--zui-typography-gradient-pink-violet-from-dark,oklch(71.8%_0.202_349.761))] to-[var(--zui-typography-gradient-pink-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-pink-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-pink-violet-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-pink-violet-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-pink-violet-border,oklch(81.1%_0.111_293.571_/_0.4))] dark:border-[color:var(--zui-typography-gradient-pink-violet-border-dark,oklch(81.1%_0.111_293.571_/_0.4))]",
   "gradient-cyan-violet":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-violet-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-violet-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-cyan-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-violet-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-violet-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-violet-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-violet-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-cyan-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-violet-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-violet-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-violet-border,oklch(81.1%_0.111_293.571_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-violet-border-dark,oklch(81.1%_0.111_293.571_/_0.4))]",
   "gradient-cyan-blue":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-blue-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-blue-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-blue-to,oklch(54.6%_0.245_262.881))] dark:to-[var(--zui-typography-gradient-cyan-blue-to-dark,oklch(70.7%_0.165_254.624))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-blue-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-blue-border,oklch(80.9%_0.105_251.813_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-blue-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-blue-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-blue-to,oklch(54.6%_0.245_262.881))] dark:to-[var(--zui-typography-gradient-cyan-blue-to-dark,oklch(70.7%_0.165_254.624))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-blue-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-blue-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-blue-border,oklch(80.9%_0.105_251.813_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-blue-border-dark,oklch(80.9%_0.105_251.813_/_0.4))]",
   "gradient-cyan-green":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-green-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-green-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-green-to,oklch(62.7%_0.194_149.214))] dark:to-[var(--zui-typography-gradient-cyan-green-to-dark,oklch(79.2%_0.209_151.711))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-green-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-green-border,oklch(87.1%_0.15_154.449_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-green-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-green-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-green-to,oklch(62.7%_0.194_149.214))] dark:to-[var(--zui-typography-gradient-cyan-green-to-dark,oklch(79.2%_0.209_151.711))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-green-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-green-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-green-border,oklch(87.1%_0.15_154.449_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-green-border-dark,oklch(87.1%_0.15_154.449_/_0.4))]",
   "gradient-cyan-orange":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-orange-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-orange-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-orange-to,oklch(64.6%_0.222_41.116))] dark:to-[var(--zui-typography-gradient-cyan-orange-to-dark,oklch(75%_0.183_55.934))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-orange-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-orange-border,oklch(83.7%_0.128_66.29_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-orange-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-orange-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-orange-to,oklch(64.6%_0.222_41.116))] dark:to-[var(--zui-typography-gradient-cyan-orange-to-dark,oklch(75%_0.183_55.934))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-orange-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-orange-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-orange-border,oklch(83.7%_0.128_66.29_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-orange-border-dark,oklch(83.7%_0.128_66.29_/_0.4))]",
   "gradient-cyan-red":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-red-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-red-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-red-to,oklch(57.7%_0.245_27.325))] dark:to-[var(--zui-typography-gradient-cyan-red-to-dark,oklch(70.4%_0.191_22.216))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-red-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-red-border,oklch(80.8%_0.114_19.571_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-red-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-red-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-red-to,oklch(57.7%_0.245_27.325))] dark:to-[var(--zui-typography-gradient-cyan-red-to-dark,oklch(70.4%_0.191_22.216))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-red-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-red-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-red-border,oklch(80.8%_0.114_19.571_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-red-border-dark,oklch(80.8%_0.114_19.571_/_0.4))]",
   "gradient-cyan-purple":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-purple-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-purple-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-purple-to,oklch(55.8%_0.288_302.321))] dark:to-[var(--zui-typography-gradient-cyan-purple-to-dark,oklch(71.4%_0.203_305.504))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-purple-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-purple-border,oklch(82.7%_0.119_306.383_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-purple-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-purple-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-purple-to,oklch(55.8%_0.288_302.321))] dark:to-[var(--zui-typography-gradient-cyan-purple-to-dark,oklch(71.4%_0.203_305.504))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-purple-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-purple-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-purple-border,oklch(82.7%_0.119_306.383_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-purple-border-dark,oklch(82.7%_0.119_306.383_/_0.4))]",
   "gradient-cyan-pink":
-    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-pink-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-pink-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-pink-to,oklch(59.2%_0.249_0.584))] dark:to-[var(--zui-typography-gradient-cyan-pink-to-dark,oklch(71.8%_0.202_349.761))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-pink-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-pink-border,oklch(82.3%_0.12_346.018_/_0.4))]",
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-pink-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-pink-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-pink-to,oklch(59.2%_0.249_0.584))] dark:to-[var(--zui-typography-gradient-cyan-pink-to-dark,oklch(71.8%_0.202_349.761))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-pink-fg,transparent)] dark:text-[color:var(--zui-typography-gradient-cyan-pink-fg-dark,transparent)] border-[color:var(--zui-typography-gradient-cyan-pink-border,oklch(82.3%_0.12_346.018_/_0.4))] dark:border-[color:var(--zui-typography-gradient-cyan-pink-border-dark,oklch(82.3%_0.12_346.018_/_0.4))]",
 } as const;
 
 export const zuiHeadingBase = "scroll-m-20";

package/src/ui/alert/animated/alert-animated.tsx

@@ -1,3 +1,4 @@
+"use client"
 import { motion } from "framer-motion";
 import { AlertBase } from "../alert-base";
 import { alertAnimationPresets } from "./animations";

package/src/ui/otp-input/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { OTPInput } from "./otp-input";
+export type {
+  OTPInputAllowedCharacters,
+  OTPInputCellVariantProps,
+  OTPInputProps,
+} from "./types";
+export { otpInputCellVariants } from "./variants";

package/src/ui/otp-input/otp-input.test.tsx

@@ -0,0 +1,99 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { OTPInput } from "./otp-input";
+
+describe("OTPInput", () => {
+  it("should expose displayName", () => {
+    expect(OTPInput.displayName).toBe("OTPInput");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<OTPInput label="Verification code" />);
+    expect(document.querySelector('[data-slot="otp-input"]')).toBeTruthy();
+    expect(
+      document.querySelectorAll('[data-slot="otp-input-cell"]'),
+    ).toHaveLength(6);
+  });
+
+  it("should type numeric values across cells", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<OTPInput label="Code" onValueChange={onValueChange} />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "123");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
+    expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("3");
+    expect(onValueChange).toHaveBeenLastCalledWith("123");
+  });
+
+  it("should ignore non-numeric characters by default", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput label="Code" />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "a1b2");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
+  });
+
+  it("should support alphanumeric values", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput allowedCharacters="alphanumeric" label="Invite code" />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "A7Z");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("A");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("7");
+    expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("Z");
+  });
+
+  it("should fill cells from paste and call onComplete", async () => {
+    const user = userEvent.setup();
+    const onComplete = vi.fn();
+    render(<OTPInput label="Code" onComplete={onComplete} />);
+
+    await user.click(screen.getByLabelText("Digit 1 of 6"));
+    await user.paste("12-34 56");
+
+    expect(screen.getByLabelText("Digit 6 of 6")).toHaveValue("6");
+    expect(onComplete).toHaveBeenLastCalledWith("123456");
+  });
+
+  it("should clear the previous cell when backspacing from an empty cell", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput defaultValue="12" label="Code" />);
+
+    await user.click(screen.getByLabelText("Digit 3 of 6"));
+    await user.keyboard("{Backspace}");
+
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("");
+  });
+
+  it("should support controlled state", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<OTPInput label="Code" value="98" onValueChange={onValueChange} />);
+
+    await user.type(screen.getByLabelText("Digit 3 of 6"), "7");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("9");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("8");
+    expect(onValueChange).toHaveBeenLastCalledWith("987");
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<OTPInput ref={ref} label="Code" />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("otp-input");
+  });
+
+  it("should render a hidden input when name is provided", () => {
+    render(<OTPInput defaultValue="123456" label="Code" name="otp" />);
+    expect(document.querySelector('input[name="otp"]')).toHaveValue("123456");
+  });
+});

package/src/ui/otp-input/otp-input.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import {
+  type ClipboardEvent,
+  type KeyboardEvent,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  zuiOtpCellsBase,
+  zuiOtpErrorBase,
+  zuiOtpHintBase,
+  zuiOtpLabelBase,
+  zuiOtpRootBase,
+  zuiOtpSeparatorBase,
+} from "../../design-system/otp-input";
+import { cn } from "../../lib/utils";
+
+import type { OTPInputAllowedCharacters, OTPInputProps } from "./types";
+import { otpInputCellVariants } from "./variants";
+
+function clampLength(length: number): number {
+  return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;
+}
+
+function sanitizeValue(
+  value: string,
+  allowedCharacters: OTPInputAllowedCharacters,
+  maxLength: number,
+): string {
+  const pattern = allowedCharacters === "numeric" ? /[0-9]/g : /[a-zA-Z0-9]/g;
+  return (value.match(pattern) ?? []).join("").slice(0, maxLength);
+}
+
+function valueToCells(value: string, length: number): string[] {
+  return Array.from({ length }, (_, index) => {
+    const c = value[index] ?? "\x00";
+    return c === "\x00" ? "" : c;
+  });
+}
+
+function cellsToInternal(cells: string[], length: number): string {
+  return Array.from({ length }, (_, i) => cells[i] || "\x00").join("");
+}
+
+export function OTPInput(props: OTPInputProps) {
+  const {
+    allowedCharacters = "numeric",
+    appearance,
+    autoFocus,
+    cellClassName,
+    className,
+    defaultValue = "",
+    disabled,
+    errorMessage,
+    hint,
+    id,
+    label,
+    length = 6,
+    mask,
+    name,
+    onComplete,
+    onValueChange,
+    ref,
+    separatorEvery,
+    size,
+    value,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const resolvedLength = clampLength(length);
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(() => {
+    const clean = sanitizeValue(
+      defaultValue,
+      allowedCharacters,
+      resolvedLength,
+    );
+    return clean.padEnd(resolvedLength, "\x00");
+  });
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const cells = useMemo(
+    () =>
+      isControlled
+        ? valueToCells(
+            sanitizeValue(
+              value ?? "",
+              allowedCharacters,
+              resolvedLength,
+            ).padEnd(resolvedLength, "\x00"),
+            resolvedLength,
+          )
+        : Array.from({ length: resolvedLength }, (_, index) => {
+            const c = uncontrolledValue[index] ?? "\x00";
+            return c === "\x00" ? "" : sanitizeValue(c, allowedCharacters, 1);
+          }),
+    [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value],
+  );
+  const sanitizedValue = cells.filter(Boolean).join("");
+  const labelId = `${rootId}-label`;
+  const hintId = `${rootId}-hint`;
+  const errorId = `${rootId}-error`;
+  const describedBy = [
+    hint !== undefined ? hintId : undefined,
+    errorMessage !== undefined ? errorId : undefined,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const commitValue = useCallback(
+    (nextCells: string[]) => {
+      if (!isControlled) {
+        setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));
+      }
+      const next = nextCells.filter(Boolean).join("").slice(0, resolvedLength);
+      onValueChange?.(next);
+      if (next.length === resolvedLength) {
+        onComplete?.(next);
+      }
+    },
+    [isControlled, onComplete, onValueChange, resolvedLength],
+  );
+
+  const focusCell = useCallback(
+    (index: number) => {
+      const target =
+        inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];
+      target?.focus();
+      target?.select();
+    },
+    [resolvedLength],
+  );
+
+  const updateAtIndex = useCallback(
+    (index: number, nextChars: string, isPaste = false) => {
+      let chars: string | undefined = sanitizeValue(
+        nextChars,
+        allowedCharacters,
+        resolvedLength,
+      );
+
+      // Detect single-char overwrite: browser gives "existingChar + typedChar"
+      if (
+        !isPaste &&
+        chars &&
+        chars.length === 2 &&
+        chars[0] === (cells[index] ?? "")
+      ) {
+        chars = chars[1];
+      }
+
+      if (!chars?.length || (!isPaste && chars === cells[index])) {
+        return;
+      }
+
+      const nextCells = [...cells];
+
+      chars.split("").forEach((char, offset) => {
+        const targetIndex = index + offset;
+        if (targetIndex < resolvedLength) {
+          nextCells[targetIndex] = char;
+        }
+      });
+
+      commitValue(nextCells);
+      focusCell(
+        Math.min(index + Math.max(chars.length, 1), resolvedLength - 1),
+      );
+    },
+    [allowedCharacters, cells, commitValue, focusCell, resolvedLength],
+  );
+
+  const clearAtIndex = useCallback(
+    (index: number) => {
+      const nextCells = [...cells];
+      nextCells[index] = "";
+      commitValue(nextCells);
+    },
+    [cells, commitValue],
+  );
+
+  const handlePaste = useCallback(
+    (event: ClipboardEvent<HTMLInputElement>, index: number) => {
+      event.preventDefault();
+      updateAtIndex(index, event.clipboardData.getData("text"), true);
+    },
+    [updateAtIndex],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>, index: number) => {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (cells[index]) {
+          clearAtIndex(index);
+          return;
+        }
+        clearAtIndex(Math.max(index - 1, 0));
+        focusCell(index - 1);
+        return;
+      }
+
+      if (event.key === "Delete") {
+        event.preventDefault();
+        clearAtIndex(index);
+        return;
+      }
+
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusCell(index - 1);
+        return;
+      }
+
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusCell(index + 1);
+        return;
+      }
+
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusCell(0);
+        return;
+      }
+
+      if (event.key === "End") {
+        event.preventDefault();
+        focusCell(resolvedLength - 1);
+      }
+    },
+    [cells, clearAtIndex, focusCell, resolvedLength],
+  );
+
+  return (
+    <div
+      ref={ref}
+      id={rootId}
+      role="group"
+      aria-labelledby={label !== undefined ? labelId : undefined}
+      aria-describedby={describedBy || undefined}
+      aria-invalid={errorMessage !== undefined ? true : undefined}
+      className={cn(zuiOtpRootBase, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-slot="otp-input"
+      {...rest}
+    >
+      {label !== undefined && (
+        <p id={labelId} className={zuiOtpLabelBase}>
+          {label}
+        </p>
+      )}
+      {hint !== undefined && (
+        <p id={hintId} className={zuiOtpHintBase}>
+          {hint}
+        </p>
+      )}
+      <div className={zuiOtpCellsBase} data-slot="otp-input-cells">
+        {cells.map((char, index) => (
+          <span
+            key={`${rootId}-${index}`}
+            className="contents"
+            data-slot="otp-input-cell-wrapper"
+          >
+            <input
+              ref={(node) => {
+                inputRefs.current[index] = node;
+              }}
+              aria-label={`Digit ${index + 1} of ${resolvedLength}`}
+              autoComplete={index === 0 ? "one-time-code" : "off"}
+              autoFocus={autoFocus && index === 0}
+              className={cn(
+                otpInputCellVariants({ appearance, size }),
+                cellClassName,
+              )}
+              data-slot="otp-input-cell"
+              disabled={disabled}
+              inputMode={allowedCharacters === "numeric" ? "numeric" : "text"}
+              maxLength={resolvedLength}
+              onChange={(event) =>
+                updateAtIndex(index, event.currentTarget.value, false)
+              }
+              onFocus={(event) => event.currentTarget.select()}
+              onKeyDown={(event) => handleKeyDown(event, index)}
+              onPaste={(event) => handlePaste(event, index)}
+              pattern={
+                allowedCharacters === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*"
+              }
+              type={mask ? "password" : "text"}
+              value={char}
+            />
+            {separatorEvery &&
+              separatorEvery > 0 &&
+              index < resolvedLength - 1 &&
+              (index + 1) % separatorEvery === 0 && (
+                <span
+                  aria-hidden="true"
+                  className={zuiOtpSeparatorBase}
+                  data-slot="otp-input-separator"
+                />
+              )}
+          </span>
+        ))}
+      </div>
+      {name !== undefined && (
+        <input
+          type="hidden"
+          name={name}
+          value={sanitizedValue}
+          disabled={disabled}
+        />
+      )}
+      {errorMessage !== undefined && (
+        <p id={errorId} className={zuiOtpErrorBase}>
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
+
+OTPInput.displayName = "OTPInput";

package/src/ui/otp-input/types.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { otpInputCellVariants } from "./variants";
+
+export type OTPInputAllowedCharacters = "numeric" | "alphanumeric";
+
+export type OTPInputCellVariantProps = VariantProps<
+  typeof otpInputCellVariants
+>;
+
+export type OTPInputProps = OTPInputCellVariantProps &
+  Omit<
+    ComponentPropsWithRef<"div">,
+    "defaultValue" | "dir" | "onChange" | "children"
+  > & {
+    allowedCharacters?: OTPInputAllowedCharacters;
+    autoFocus?: boolean;
+    cellClassName?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    errorMessage?: ReactNode;
+    hint?: ReactNode;
+    label?: ReactNode;
+    length?: number;
+    mask?: boolean;
+    name?: string;
+    onComplete?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    separatorEvery?: number;
+    value?: string;
+  };

package/src/ui/otp-input/variants.ts

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiOtpAppearances,
+  zuiOtpCellBase,
+  zuiOtpSizes,
+} from "../../design-system/otp-input";
+
+export const otpInputCellVariants = cva(zuiOtpCellBase, {
+  variants: {
+    appearance: zuiOtpAppearances,
+    size: zuiOtpSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});

package/src/ui/scroll-area/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { ScrollArea } from "./scroll-area";
+export type { ScrollAreaProps, ScrollAreaVariantProps } from "./types";
+export { scrollAreaVariants } from "./variants";