@zentauri-ui/zentauri-components 2.1.9 → 2.2.1

package/dist/ui/typing-indicator/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/typing-indicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,MAAM,2BAA2B,GAAG,YAAY,CACpD,OAAO,0BAA0B,CAClC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE5C,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,GAChE,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC"}

package/dist/ui/typing-indicator/typing-indicator-base.d.ts

@@ -0,0 +1,13 @@
+import type { TypingIndicatorBaseProps } from "./types";
+export declare function TypingIndicatorBase({ appearance, size, dots, label, labelPosition, className, ref, ...rest }: TypingIndicatorBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TypingIndicatorBase {
+    var displayName: string;
+}
+export declare function TypingIndicatorLabel({ size, children, }: {
+    size?: TypingIndicatorBaseProps["size"];
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace TypingIndicatorLabel {
+    var displayName: string;
+}
+//# sourceMappingURL=typing-indicator-base.d.ts.map

package/dist/ui/typing-indicator/typing-indicator-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator-base.d.ts","sourceRoot":"","sources":["../../../src/ui/typing-indicator/typing-indicator-base.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AASxD,wBAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,IAAI,EACJ,IAAQ,EACR,KAAK,EACL,aAAwB,EACxB,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,2CA+B1B;yBAxCe,mBAAmB;;;AA4CnC,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CASA;yBAfe,oBAAoB"}

package/dist/ui/typing-indicator/typing-indicator.d.ts

@@ -0,0 +1,2 @@
+export { TypingIndicatorBase as TypingIndicator } from "./typing-indicator-base";
+//# sourceMappingURL=typing-indicator.d.ts.map

package/dist/ui/typing-indicator/typing-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.d.ts","sourceRoot":"","sources":["../../../src/ui/typing-indicator/typing-indicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/ui/typing-indicator/variants.d.ts

@@ -0,0 +1,16 @@
+import { zuiTypingIndicatorDotDelays } from "../../design-system/typing-indicator";
+export { zuiTypingIndicatorDotDelays as typingIndicatorDotDelays };
+export declare const typingIndicatorVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const typingIndicatorDotsVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const typingIndicatorDotVariants: (props?: ({
+    appearance?: "default" | "muted" | "sky" | "emerald" | "rose" | "slate" | "gray" | "indigo" | "cyan" | "blue" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-purple" | "zinc" | "subtle" | "primary" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const typingIndicatorLabelVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/typing-indicator/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/typing-indicator/variants.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,2BAA2B,EAM5B,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EAAE,2BAA2B,IAAI,wBAAwB,EAAE,CAAC;AAEnE,eAAO,MAAM,uBAAuB;;8EAOlC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;8EAKtC,CAAC;AAEH,eAAO,MAAM,0BAA0B;;;8EASrC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;8EAKvC,CAAC"}

package/dist/ui/typing-indicator.js

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var chunkDXNIAFBG_js = require('../chunk-DXNIAFBG.js');
+require('../chunk-HNPGWFVY.js');
+require('../chunk-ZS5756ZC.js');
+require('../chunk-PZ5AY32C.js');
+
+
+
+Object.defineProperty(exports, "TypingIndicator", {
+  enumerable: true,
+  get: function () { return chunkDXNIAFBG_js.TypingIndicatorBase; }
+});
+Object.defineProperty(exports, "typingIndicatorDotVariants", {
+  enumerable: true,
+  get: function () { return chunkDXNIAFBG_js.typingIndicatorDotVariants; }
+});
+Object.defineProperty(exports, "typingIndicatorDotsVariants", {
+  enumerable: true,
+  get: function () { return chunkDXNIAFBG_js.typingIndicatorDotsVariants; }
+});
+Object.defineProperty(exports, "typingIndicatorLabelVariants", {
+  enumerable: true,
+  get: function () { return chunkDXNIAFBG_js.typingIndicatorLabelVariants; }
+});
+Object.defineProperty(exports, "typingIndicatorVariants", {
+  enumerable: true,
+  get: function () { return chunkDXNIAFBG_js.typingIndicatorVariants; }
+});
+//# sourceMappingURL=typing-indicator.js.map
+//# sourceMappingURL=typing-indicator.js.map

package/dist/ui/typing-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"typing-indicator.js"}

package/dist/ui/typing-indicator.mjs

@@ -0,0 +1,7 @@
+"use client";
+export { TypingIndicatorBase as TypingIndicator, typingIndicatorDotVariants, typingIndicatorDotsVariants, typingIndicatorLabelVariants, typingIndicatorVariants } from '../chunk-4KOQS4DT.mjs';
+import '../chunk-EMZC6ICD.mjs';
+import '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
+//# sourceMappingURL=typing-indicator.mjs.map
+//# sourceMappingURL=typing-indicator.mjs.map

package/dist/ui/typing-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"typing-indicator.mjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "2.1.9",
+  "version": "2.2.1",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "keywords": [
     "react",

package/src/design-system/index.ts

@@ -26,6 +26,7 @@ export * from "./marquee";
 export * from "./modal";
 export * from "./otp-input";
 export * from "./pagination";
+export * from "./password-strength-meter";
 export * from "./popover";
 export * from "./progress";
 export * from "./rating";
@@ -42,6 +43,7 @@ export * from "./timeline";
 export * from "./toast";
 export * from "./tokens";
 export * from "./toggle";
+export * from "./typing-indicator";
 export * from "./tooltip";
 export * from "./tree-view";
 export * from "./typography";

package/src/design-system/password-strength-meter.ts

@@ -0,0 +1,115 @@
+export const zuiPasswordStrengthMeterBase =
+  "w-full text-[color:var(--zui-password-strength-meter-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-password-strength-meter-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]";
+
+export const zuiPasswordStrengthMeterAppearances = {
+  default:
+    "[--psm-fill:var(--zui-password-strength-meter-default-fill,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-default-fill-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  secondary:
+    "[--psm-fill:var(--zui-password-strength-meter-secondary-fill,var(--zui-fg,oklch(44.6%_0.043_257.281)))] dark:[--psm-fill:var(--zui-password-strength-meter-secondary-fill-dark,var(--zui-fg-dark,oklch(86.9%_0.022_252.894)))]",
+  destructive:
+    "[--psm-fill:var(--zui-password-strength-meter-destructive-fill,var(--zui-status-error,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-destructive-fill-dark,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428)))]",
+  emerald:
+    "[--psm-fill:var(--zui-password-strength-meter-emerald-fill,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:[--psm-fill:var(--zui-password-strength-meter-emerald-fill-dark,var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223)))]",
+  indigo:
+    "[--psm-fill:var(--zui-password-strength-meter-indigo-fill,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:[--psm-fill:var(--zui-password-strength-meter-indigo-fill-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]",
+  purple:
+    "[--psm-fill:var(--zui-password-strength-meter-purple-fill,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:[--psm-fill:var(--zui-password-strength-meter-purple-fill-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]",
+  pink: "[--psm-fill:var(--zui-password-strength-meter-pink-fill,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:[--psm-fill:var(--zui-password-strength-meter-pink-fill-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]",
+  rose: "[--psm-fill:var(--zui-password-strength-meter-rose-fill,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-rose-fill-dark,var(--zui-color-rose-dark,oklch(71.2%_0.194_13.428)))]",
+  sky: "[--psm-fill:var(--zui-password-strength-meter-sky-fill,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:[--psm-fill:var(--zui-password-strength-meter-sky-fill-dark,var(--zui-color-sky-dark,oklch(74.6%_0.16_232.661)))]",
+  teal: "[--psm-fill:var(--zui-password-strength-meter-teal-fill,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:[--psm-fill:var(--zui-password-strength-meter-teal-fill-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]",
+  yellow:
+    "[--psm-fill:var(--zui-password-strength-meter-yellow-fill,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:[--psm-fill:var(--zui-password-strength-meter-yellow-fill-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]",
+  orange:
+    "[--psm-fill:var(--zui-password-strength-meter-orange-fill,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:[--psm-fill:var(--zui-password-strength-meter-orange-fill-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]",
+  outline:
+    "[--psm-fill:var(--zui-password-strength-meter-outline-fill,var(--zui-fg,oklch(52%_0.105_223.128)))] dark:[--psm-fill:var(--zui-password-strength-meter-outline-fill-dark,var(--zui-fg-dark,oklch(86.5%_0.127_207.078)))]",
+  ghost:
+    "[--psm-fill:var(--zui-password-strength-meter-ghost-fill,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:[--psm-fill:var(--zui-password-strength-meter-ghost-fill-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  glass:
+    "[--psm-fill:var(--zui-password-strength-meter-glass-fill,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-glass-fill-dark,var(--zui-fg-dark,#ffffff))]",
+  "gradient-blue":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill,var(--zui-color-blue,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill-dark,var(--zui-color-blue-dark,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))]",
+  "gradient-green":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill,var(--zui-color-green,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill-dark,var(--zui-color-green-dark,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))]",
+  "gradient-red":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill,var(--zui-color-red,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill-dark,var(--zui-color-red-dark,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))]",
+  "gradient-yellow":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill,var(--zui-color-yellow,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill-dark,var(--zui-color-yellow-dark,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))]",
+  "gradient-purple":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill,var(--zui-color-purple,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill-dark,var(--zui-color-purple-dark,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))]",
+  "gradient-teal":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill,var(--zui-color-teal,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill-dark,var(--zui-color-teal-dark,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))]",
+  "gradient-indigo":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill,var(--zui-color-indigo,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill-dark,var(--zui-color-indigo-dark,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))]",
+  "gradient-pink":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill,var(--zui-color-pink,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill-dark,var(--zui-color-pink-dark,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))]",
+  "gradient-orange":
+    "[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill,var(--zui-color-orange,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill-dark,var(--zui-color-orange-dark,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))]",
+  blue: "[--psm-fill:var(--zui-password-strength-meter-blue-fill,var(--zui-color-blue,#2563eb))] dark:[--psm-fill:var(--zui-password-strength-meter-blue-fill-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "[--psm-fill:var(--zui-password-strength-meter-cyan-fill,var(--zui-color-cyan,#0891b2))] dark:[--psm-fill:var(--zui-password-strength-meter-cyan-fill-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green:
+    "[--psm-fill:var(--zui-password-strength-meter-green-fill,var(--zui-color-green,#16a34a))] dark:[--psm-fill:var(--zui-password-strength-meter-green-fill-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "[--psm-fill:var(--zui-password-strength-meter-lime-fill,var(--zui-color-lime,#65a30d))] dark:[--psm-fill:var(--zui-password-strength-meter-lime-fill-dark,var(--zui-color-lime-dark,#a3e635))]",
+  mint: "[--psm-fill:var(--zui-password-strength-meter-mint-fill,var(--zui-color-mint,#10b981))] dark:[--psm-fill:var(--zui-password-strength-meter-mint-fill-dark,var(--zui-color-mint-dark,#6ee7b7))]",
+  ocean:
+    "[--psm-fill:var(--zui-password-strength-meter-ocean-fill,var(--zui-color-ocean,#0284c7))] dark:[--psm-fill:var(--zui-password-strength-meter-ocean-fill-dark,var(--zui-color-ocean-dark,#38bdf8))]",
+  sapphire:
+    "[--psm-fill:var(--zui-password-strength-meter-sapphire-fill,var(--zui-color-sapphire,#1d4ed8))] dark:[--psm-fill:var(--zui-password-strength-meter-sapphire-fill-dark,var(--zui-color-sapphire-dark,#60a5fa))]",
+  lavender:
+    "[--psm-fill:var(--zui-password-strength-meter-lavender-fill,var(--zui-color-lavender,#8b5cf6))] dark:[--psm-fill:var(--zui-password-strength-meter-lavender-fill-dark,var(--zui-color-lavender-dark,#a78bfa))]",
+  ruby: "[--psm-fill:var(--zui-password-strength-meter-ruby-fill,var(--zui-color-ruby,#be123c))] dark:[--psm-fill:var(--zui-password-strength-meter-ruby-fill-dark,var(--zui-color-ruby-dark,#fb7185))]",
+  red: "[--psm-fill:var(--zui-password-strength-meter-red-fill,var(--zui-color-red,#dc2626))] dark:[--psm-fill:var(--zui-password-strength-meter-red-fill-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate:
+    "[--psm-fill:var(--zui-password-strength-meter-slate-fill,var(--zui-color-slate,#475569))] dark:[--psm-fill:var(--zui-password-strength-meter-slate-fill-dark,var(--zui-color-slate-dark,#64748b))]",
+  zinc: "[--psm-fill:var(--zui-password-strength-meter-zinc-fill,var(--zui-color-zinc,#52525b))] dark:[--psm-fill:var(--zui-password-strength-meter-zinc-fill-dark,var(--zui-color-zinc-dark,#71717a))]",
+  stone:
+    "[--psm-fill:var(--zui-password-strength-meter-stone-fill,var(--zui-color-stone,#57534e))] dark:[--psm-fill:var(--zui-password-strength-meter-stone-fill-dark,var(--zui-color-stone-dark,#78716c))]",
+  royal:
+    "[--psm-fill:var(--zui-password-strength-meter-royal-fill,var(--zui-color-royal,#4338ca))] dark:[--psm-fill:var(--zui-password-strength-meter-royal-fill-dark,var(--zui-color-royal-dark,#818cf8))]",
+  electric:
+    "[--psm-fill:var(--zui-password-strength-meter-electric-fill,var(--zui-color-electric,#0ea5e9))] dark:[--psm-fill:var(--zui-password-strength-meter-electric-fill-dark,var(--zui-color-electric-dark,#38bdf8))]",
+  forest:
+    "[--psm-fill:var(--zui-password-strength-meter-forest-fill,var(--zui-color-forest,#166534))] dark:[--psm-fill:var(--zui-password-strength-meter-forest-fill-dark,var(--zui-color-forest-dark,#4ade80))]",
+  sunset:
+    "[--psm-fill:var(--zui-password-strength-meter-sunset-fill,var(--zui-color-sunset,#ea580c))] dark:[--psm-fill:var(--zui-password-strength-meter-sunset-fill-dark,var(--zui-color-sunset-dark,#fb923c))]",
+  magenta:
+    "[--psm-fill:var(--zui-password-strength-meter-magenta-fill,var(--zui-color-magenta,#c026d3))] dark:[--psm-fill:var(--zui-password-strength-meter-magenta-fill-dark,var(--zui-color-magenta-dark,#e879f9))]",
+  crimson:
+    "[--psm-fill:var(--zui-password-strength-meter-crimson-fill,var(--zui-color-crimson,#b91c1c))] dark:[--psm-fill:var(--zui-password-strength-meter-crimson-fill-dark,var(--zui-color-crimson-dark,#f87171))]",
+  aqua: "[--psm-fill:var(--zui-password-strength-meter-aqua-fill,var(--zui-color-aqua,#0f766e))] dark:[--psm-fill:var(--zui-password-strength-meter-aqua-fill-dark,var(--zui-color-aqua-dark,#2dd4bf))]",
+  plum: "[--psm-fill:var(--zui-password-strength-meter-plum-fill,var(--zui-color-plum,#7e22ce))] dark:[--psm-fill:var(--zui-password-strength-meter-plum-fill-dark,var(--zui-color-plum-dark,#c084fc))]",
+} as const;
+
+export const zuiPasswordStrengthMeterSizes = {
+  xs: "text-[0.65rem]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg",
+} as const;
+
+export const zuiPasswordStrengthMeterShapes = {
+  flat: "rounded-none",
+  rounded: "rounded-md",
+  pill: "rounded-full",
+} as const;
+
+export const zuiPasswordStrengthMeterTrackBase =
+  "relative w-full overflow-hidden bg-[var(--zui-password-strength-meter-track-bg,var(--zui-surface-muted,#0000001a))] dark:bg-[var(--zui-password-strength-meter-track-bg-dark,var(--zui-surface-muted-dark,#ffffff1a))]";
+
+export const zuiPasswordStrengthMeterTrackSizes = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-3",
+  xl: "h-4",
+} as const;
+
+export const zuiPasswordStrengthMeterBarBase =
+  "h-full w-full origin-left rounded-[inherit]";
+
+export const zuiPasswordStrengthMeterBarSegmented = {
+  true: "[background:var(--zui-password-strength-meter-bar-bg-segmented,linear-gradient(90deg,var(--zui-status-error,oklch(45.5%_0.188_13.697))_0 calc(100%/5),var(--zui-color-orange,oklch(47%_0.157_37.304))_0 calc(200%/5),var(--zui-color-yellow,oklch(47.6%_0.114_61.907))_0 calc(300%/5),var(--zui-color-emerald,oklch(43.2%_0.095_166.913))_0 calc(400%/5),var(--zui-color-indigo,oklch(39.8%_0.195_277.366))_0))] dark:[background:var(--zui-password-strength-meter-bar-bg-segmented-dark,linear-gradient(90deg,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428))_0 calc(100%/5),var(--zui-color-orange-dark,oklch(75%_0.183_55.934))_0 calc(200%/5),var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936))_0 calc(300%/5),var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223))_0 calc(400%/5),var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935))_0))]",
+  false: "[background:var(--psm-fill)]",
+} as const;

package/src/design-system/typing-indicator.ts

@@ -0,0 +1,74 @@
+export const zuiTypingIndicatorAppearances = {
+  default:
+    "bg-[var(--zui-typing-indicator-default-dot-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-default-dot-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  subtle:
+    "bg-[var(--zui-typing-indicator-subtle-dot-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-typing-indicator-subtle-dot-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
+  muted:
+    "bg-[var(--zui-typing-indicator-muted-dot-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-typing-indicator-muted-dot-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
+  primary:
+    "bg-[var(--zui-typing-indicator-primary-dot-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-primary-dot-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+  blue: "bg-[var(--zui-typing-indicator-blue-dot-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-typing-indicator-blue-dot-bg-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "bg-[var(--zui-typing-indicator-cyan-dot-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-typing-indicator-cyan-dot-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green:
+    "bg-[var(--zui-typing-indicator-green-dot-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-typing-indicator-green-dot-bg-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "bg-[var(--zui-typing-indicator-lime-dot-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-typing-indicator-lime-dot-bg-dark,var(--zui-color-lime-dark,#a3e635))]",
+  emerald:
+    "bg-[var(--zui-typing-indicator-emerald-dot-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:bg-[var(--zui-typing-indicator-emerald-dot-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]",
+  indigo:
+    "bg-[var(--zui-typing-indicator-indigo-dot-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:bg-[var(--zui-typing-indicator-indigo-dot-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
+  purple:
+    "bg-[var(--zui-typing-indicator-purple-dot-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:bg-[var(--zui-typing-indicator-purple-dot-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
+  pink: "bg-[var(--zui-typing-indicator-pink-dot-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:bg-[var(--zui-typing-indicator-pink-dot-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
+  rose: "bg-[var(--zui-typing-indicator-rose-dot-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:bg-[var(--zui-typing-indicator-rose-dot-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]",
+  sky: "bg-[var(--zui-typing-indicator-sky-dot-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:bg-[var(--zui-typing-indicator-sky-dot-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]",
+  teal: "bg-[var(--zui-typing-indicator-teal-dot-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:bg-[var(--zui-typing-indicator-teal-dot-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]",
+  yellow:
+    "bg-[var(--zui-typing-indicator-yellow-dot-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:bg-[var(--zui-typing-indicator-yellow-dot-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]",
+  orange:
+    "bg-[var(--zui-typing-indicator-orange-dot-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:bg-[var(--zui-typing-indicator-orange-dot-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]",
+  red: "bg-[var(--zui-typing-indicator-red-dot-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-typing-indicator-red-dot-bg-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate:
+    "bg-[var(--zui-typing-indicator-slate-dot-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-typing-indicator-slate-dot-bg-dark,var(--zui-color-slate-dark,#64748b))]",
+  gray: "bg-[var(--zui-typing-indicator-gray-dot-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:bg-[var(--zui-typing-indicator-gray-dot-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]",
+  zinc: "bg-[var(--zui-typing-indicator-zinc-dot-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-typing-indicator-zinc-dot-bg-dark,var(--zui-color-zinc-dark,#71717a))]",
+  "gradient-blue":
+    "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-typing-indicator-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-typing-indicator-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-typing-indicator-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
+  "gradient-green":
+    "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-typing-indicator-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-typing-indicator-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-typing-indicator-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))]",
+  "gradient-purple":
+    "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-typing-indicator-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-typing-indicator-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-typing-indicator-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
+} as const;
+
+export const zuiTypingIndicatorDotsBase = "inline-flex items-center";
+
+export const zuiTypingIndicatorDotBase =
+  "rounded-full animate-bounce [animation-duration:1.4s]";
+
+export const zuiTypingIndicatorDotDelays = [
+  "[animation-delay:0s]",
+  "[animation-delay:0.16s]",
+  "[animation-delay:0.32s]",
+] as const;
+
+export const zuiTypingIndicatorSizes = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2",
+} as const;
+
+export const zuiTypingIndicatorDotSizes = {
+  sm: "size-1.5",
+  md: "size-2",
+  lg: "size-2.5",
+} as const;
+
+export const zuiTypingIndicatorLabelBase =
+  "text-[color:var(--zui-typing-indicator-label-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.287)))] dark:text-[color:var(--zui-typing-indicator-label-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]";
+
+export const zuiTypingIndicatorLabelSizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+export const zuiTypingIndicatorContainerBase = "inline-flex items-center gap-2";

package/src/ui/password-strength-meter/animated/animations.ts

@@ -0,0 +1,10 @@
+import { PasswordStrengthMeterAnimationPresets } from "./types";
+
+export const passwordStrengthMeterAnimationPresets: PasswordStrengthMeterAnimationPresets =
+  {
+    none: {},
+    shimmer: {
+      animate: { backgroundPosition: ["0% 0%", "100% 0%"] },
+      transition: { repeat: Infinity, duration: 1.2, ease: "linear" },
+    },
+  };

package/src/ui/password-strength-meter/animated/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+export {
+  PasswordStrengthMeterAnimated,
+  PasswordStrengthMeterBarAnimated,
+} from "./password-strength-meter-animated";
+export type {
+  PasswordStrengthMeterAnimatedProps,
+  PasswordStrengthMeterAnimation,
+  PasswordStrengthMeterAnimationPresets,
+  PasswordStrengthMeterPresetMotionProps,
+  PasswordStrengthMeterVariantProps,
+} from "./types";
+export { passwordStrengthMeterAnimationPresets } from "./animations";

package/src/ui/password-strength-meter/animated/password-strength-meter-animated.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useId, useMemo } from "react";
+import { motion } from "framer-motion";
+
+import { cn, clamp } from "../../../lib/utils";
+
+import { passwordStrengthMeterAnimationPresets } from "./animations";
+import type { PasswordStrengthMeterAnimatedProps } from "./types";
+import type {
+  PasswordStrengthMeterCtx,
+  PasswordStrengthMeterSectionProps,
+} from "../types";
+import {
+  passwordStrengthMeterBarVariants,
+  passwordStrengthMeterTrackVariants,
+  passwordStrengthMeterVariants,
+} from "../variants";
+import {
+  getStrengthColor,
+  getStrengthLabel,
+  PasswordStrengthMeterContext,
+  usePasswordStrengthMeterContext,
+} from "../password-strength-meter-base";
+
+export function PasswordStrengthMeterAnimated({
+  className,
+  appearance = "default",
+  size = "md",
+  shape = "rounded",
+  animated = false,
+  segmented = false,
+  value = 0,
+  min = 0,
+  max = 100,
+  label,
+  scoreLabel,
+  showScoreLabel = true,
+  children,
+  ref,
+  animation = "none",
+  ...rest
+}: PasswordStrengthMeterAnimatedProps) {
+  const clamped = clamp(value, min, max);
+  const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;
+  const labelSlotId = `${useId()}-password-strength-meter-label`;
+  const hasInlineLabelProp = Boolean(label?.trim().length);
+
+  const labelingProps = useMemo(() => {
+    if (hasInlineLabelProp) {
+      return { "aria-label": label?.trim() ?? "Password strength" };
+    }
+    return { "aria-label": "Password strength" };
+  }, [hasInlineLabelProp, label]);
+
+  const ctx = useMemo<PasswordStrengthMeterCtx>(
+    () => ({
+      value: clamped,
+      min,
+      max,
+      size: size ?? "md",
+      shape: shape ?? "rounded",
+      animated: Boolean(animated),
+      segmented: Boolean(segmented),
+      appearance: appearance ?? "default",
+      labelSlotId,
+    }),
+    [
+      animated,
+      appearance,
+      clamped,
+      labelSlotId,
+      max,
+      min,
+      shape,
+      size,
+      segmented,
+    ],
+  );
+
+  const motionProps = passwordStrengthMeterAnimationPresets[animation];
+
+  return (
+    <PasswordStrengthMeterContext.Provider value={ctx}>
+      <motion.div
+        ref={ref}
+        data-slot="password-strength-meter"
+        role="meter"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={clamped}
+        aria-valuetext={getStrengthLabel(percent)}
+        {...labelingProps}
+        className={cn(
+          passwordStrengthMeterVariants({ appearance, size, shape }),
+          className,
+        )}
+        initial={animation === "none" ? false : undefined}
+        {...motionProps}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            {(label || showScoreLabel) && (
+              <div className="flex items-center justify-between mb-1.5">
+                {label && (
+                  <span
+                    id={labelSlotId}
+                    data-slot="password-strength-meter-label"
+                    className="text-xs font-medium"
+                  >
+                    {label}
+                  </span>
+                )}
+                {showScoreLabel && (
+                  <span
+                    data-slot="password-strength-meter-score-label"
+                    className={cn(
+                      "text-xs font-semibold",
+                      getStrengthColor(percent),
+                    )}
+                  >
+                    {scoreLabel ?? getStrengthLabel(percent)}
+                  </span>
+                )}
+              </div>
+            )}
+            <PasswordStrengthMeterBarAnimated
+              style={{ transform: `scaleX(${percent / 100})` }}
+            />
+          </>
+        )}
+      </motion.div>
+    </PasswordStrengthMeterContext.Provider>
+  );
+}
+
+PasswordStrengthMeterAnimated.displayName = "PasswordStrengthMeterAnimated";
+
+export function PasswordStrengthMeterBarAnimated({
+  className,
+  style,
+  ref,
+  ...rest
+}: PasswordStrengthMeterSectionProps & {
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const { size, shape, animated, segmented } = usePasswordStrengthMeterContext(
+    "PasswordStrengthMeterBar",
+  );
+
+  return (
+    <div
+      data-slot="password-strength-meter-track"
+      className={cn(
+        passwordStrengthMeterTrackVariants({ size, shape }),
+        "text-current",
+      )}
+    >
+      <motion.div
+        ref={ref}
+        data-slot="password-strength-meter-bar"
+        className={cn(
+          passwordStrengthMeterBarVariants({ segmented }),
+          className,
+        )}
+        style={{
+          transformOrigin: "left center",
+          ...style,
+        }}
+        animate={
+          animated ? { x: ["-30%", "0%"], opacity: [0.85, 1] } : undefined
+        }
+        transition={
+          animated
+            ? { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
+            : undefined
+        }
+        {...rest}
+      />
+    </div>
+  );
+}
+
+PasswordStrengthMeterBarAnimated.displayName = "PasswordStrengthMeterBar";

package/src/ui/password-strength-meter/animated/types.ts

@@ -0,0 +1,35 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+import type { ReactNode } from "react";
+import type { passwordStrengthMeterVariants } from "../variants";
+
+export type PasswordStrengthMeterVariantProps = VariantProps<
+  typeof passwordStrengthMeterVariants
+>;
+
+export type PasswordStrengthMeterAnimation = "none" | "shimmer";
+
+export type PasswordStrengthMeterPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "transition" | "animate"
+>;
+
+export type PasswordStrengthMeterAnimationPresets = Record<
+  PasswordStrengthMeterAnimation,
+  PasswordStrengthMeterPresetMotionProps
+>;
+
+export type PasswordStrengthMeterAnimatedProps =
+  PasswordStrengthMeterVariantProps &
+    Omit<HTMLMotionProps<"div">, "children"> & {
+      value: number;
+      min?: number;
+      max?: number;
+      label?: string;
+      scoreLabel?: string;
+      showScoreLabel?: boolean;
+      animated?: boolean;
+      segmented?: boolean;
+      children?: ReactNode;
+      animation?: PasswordStrengthMeterAnimation;
+    };

package/src/ui/password-strength-meter/index.ts

@@ -0,0 +1,18 @@
+"use client";
+
+export { PasswordStrengthMeter } from "./password-strength-meter";
+export {
+  PasswordStrengthMeterBar,
+  PasswordStrengthMeterBase,
+} from "./password-strength-meter-base";
+export type {
+  PasswordStrengthMeterProps,
+  PasswordStrengthMeterSectionProps,
+  PasswordStrengthMeterCtx,
+  PasswordStrengthMeterVariantProps,
+} from "./types";
+export {
+  passwordStrengthMeterVariants,
+  passwordStrengthMeterTrackVariants,
+  passwordStrengthMeterBarVariants,
+} from "./variants";