@zentauri-ui/zentauri-components 2.1.9 → 2.2.0

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

@@ -0,0 +1,116 @@
+"use client";
+import { TypingIndicatorLabel, typingIndicatorDotVariants, typingIndicatorDotsVariants, typingIndicatorVariants } from '../../chunk-4KOQS4DT.mjs';
+import '../../chunk-EMZC6ICD.mjs';
+import { cn } from '../../chunk-4D54YOL6.mjs';
+import '../../chunk-J5LGTIGS.mjs';
+import { motion } from 'framer-motion';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/ui/typing-indicator/animated/animations.ts
+var typingIndicatorAnimationPresets = {
+  none: {
+    transition: { duration: 0 },
+    variants: {
+      initial: { y: 0 },
+      animate: { y: 0 }
+    }
+  },
+  bounce: {
+    transition: {
+      type: "spring",
+      stiffness: 500,
+      damping: 10,
+      mass: 0.5
+    },
+    variants: {
+      initial: { y: 0 },
+      animate: { y: -6 }
+    }
+  },
+  pulse: {
+    transition: {
+      duration: 0.8,
+      repeat: Infinity,
+      repeatType: "reverse",
+      ease: "easeInOut"
+    },
+    variants: {
+      initial: { scale: 1, opacity: 0.4 },
+      animate: { scale: 1.3, opacity: 1 }
+    }
+  },
+  wave: {
+    transition: {
+      type: "spring",
+      stiffness: 400,
+      damping: 8,
+      mass: 0.4
+    },
+    variants: {
+      initial: { y: 0, scale: 1 },
+      animate: { y: -8, scale: 0.9 }
+    }
+  }
+};
+function TypingIndicatorAnimated({
+  appearance,
+  size,
+  dots = 3,
+  label,
+  labelPosition = "before",
+  animation = "bounce",
+  className,
+  ref,
+  ...rest
+}) {
+  const preset = typingIndicatorAnimationPresets[animation];
+  const dotTransitionOverrides = useMemo(
+    () => Array.from({ length: dots }).map((_, i) => ({
+      delay: i * 0.12,
+      ...animation !== "none" ? { repeat: Infinity, repeatType: "reverse" } : {},
+      ...preset.transition
+    })),
+    [dots, animation, preset.transition]
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "typing-indicator",
+      className: cn(typingIndicatorVariants({ size }), className),
+      ...rest,
+      children: [
+        label && labelPosition === "before" && /* @__PURE__ */ jsx(TypingIndicatorLabel, { size, children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "typing-indicator-dots",
+            className: typingIndicatorDotsVariants({ size }),
+            children: Array.from({ length: dots }).map((_, i) => /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                "data-slot": "typing-indicator-dot",
+                className: cn(
+                  typingIndicatorDotVariants({ appearance, size }),
+                  "animate-none"
+                ),
+                initial: "initial",
+                animate: "animate",
+                variants: preset.variants,
+                transition: dotTransitionOverrides[i]
+              },
+              i
+            ))
+          }
+        ),
+        label && labelPosition === "after" && /* @__PURE__ */ jsx(TypingIndicatorLabel, { size, children: label })
+      ]
+    }
+  );
+}
+TypingIndicatorAnimated.displayName = "TypingIndicatorAnimated";
+
+export { TypingIndicatorAnimated, typingIndicatorAnimationPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/typing-indicator/animated/animations.ts","../../../src/ui/typing-indicator/animated/typing-indicator-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import type { Transition, Variants } from \"framer-motion\";\n\nexport type TypingIndicatorAnimation = \"none\" | \"bounce\" | \"pulse\" | \"wave\";\n\nexport type TypingIndicatorAnimationPresets = Record<\n  TypingIndicatorAnimation,\n  {\n    transition: Transition;\n    variants: Variants;\n  }\n>;\n\nexport const typingIndicatorAnimationPresets: TypingIndicatorAnimationPresets =\n  {\n    none: {\n      transition: { duration: 0 },\n      variants: {\n        initial: { y: 0 },\n        animate: { y: 0 },\n      },\n    },\n    bounce: {\n      transition: {\n        type: \"spring\",\n        stiffness: 500,\n        damping: 10,\n        mass: 0.5,\n      },\n      variants: {\n        initial: { y: 0 },\n        animate: { y: -6 },\n      },\n    },\n    pulse: {\n      transition: {\n        duration: 0.8,\n        repeat: Infinity,\n        repeatType: \"reverse\",\n        ease: \"easeInOut\",\n      },\n      variants: {\n        initial: { scale: 1, opacity: 0.4 },\n        animate: { scale: 1.3, opacity: 1 },\n      },\n    },\n    wave: {\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 8,\n        mass: 0.4,\n      },\n      variants: {\n        initial: { y: 0, scale: 1 },\n        animate: { y: -8, scale: 0.9 },\n      },\n    },\n  };\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport {\n  typingIndicatorDotVariants,\n  typingIndicatorDotsVariants,\n  typingIndicatorVariants,\n} from \"../variants\";\n\nimport { typingIndicatorAnimationPresets } from \"./animations\";\nimport type { TypingIndicatorAnimatedProps } from \"./types\";\nimport { TypingIndicatorLabel } from \"../typing-indicator-base\";\n\nexport function TypingIndicatorAnimated({\n  appearance,\n  size,\n  dots = 3,\n  label,\n  labelPosition = \"before\",\n  animation = \"bounce\",\n  className,\n  ref,\n  ...rest\n}: TypingIndicatorAnimatedProps) {\n  const preset = typingIndicatorAnimationPresets[animation];\n\n  const dotTransitionOverrides = useMemo(\n    () =>\n      Array.from({ length: dots }).map((_, i) => ({\n        delay: i * 0.12,\n        ...(animation !== \"none\"\n          ? { repeat: Infinity, repeatType: \"reverse\" as const }\n          : {}),\n        ...preset.transition,\n      })),\n    [dots, animation, preset.transition],\n  );\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"typing-indicator\"\n      className={cn(typingIndicatorVariants({ size }), className)}\n      {...rest}\n    >\n      {label && labelPosition === \"before\" && (\n        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>\n      )}\n      <span\n        data-slot=\"typing-indicator-dots\"\n        className={typingIndicatorDotsVariants({ size })}\n      >\n        {Array.from({ length: dots }).map((_, i) => (\n          <motion.span\n            key={i}\n            data-slot=\"typing-indicator-dot\"\n            className={cn(\n              typingIndicatorDotVariants({ appearance, size }),\n              \"animate-none\",\n            )}\n            initial=\"initial\"\n            animate=\"animate\"\n            variants={preset.variants}\n            transition={dotTransitionOverrides[i]}\n          />\n        ))}\n      </span>\n      {label && labelPosition === \"after\" && (\n        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>\n      )}\n    </span>\n  );\n}\n\nTypingIndicatorAnimated.displayName = \"TypingIndicatorAnimated\";\n"]}

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

@@ -0,0 +1,4 @@
+export { TypingIndicator } from "./typing-indicator";
+export type { TypingIndicatorBaseProps, TypingIndicatorDots, TypingIndicatorProps, TypingIndicatorVariantProps, } from "./types";
+export { typingIndicatorDotVariants, typingIndicatorDotsVariants, typingIndicatorLabelVariants, typingIndicatorVariants, } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/typing-indicator/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EACV,wBAAwB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,0BAA0B,EAC1B,2BAA2B,EAC3B,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { typingIndicatorDotVariants } from "./variants";
+export type TypingIndicatorVariantProps = VariantProps<typeof typingIndicatorDotVariants>;
+export type TypingIndicatorDots = 3 | 4 | 5;
+export type TypingIndicatorBaseProps = TypingIndicatorVariantProps & ComponentPropsWithRef<"span"> & {
+    dots?: TypingIndicatorDots;
+    label?: ReactNode;
+    labelPosition?: "before" | "after";
+    children?: ReactNode;
+};
+export type TypingIndicatorProps = TypingIndicatorBaseProps;
+//# sourceMappingURL=types.d.ts.map

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.0",
   "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

@@ -42,6 +42,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/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/typing-indicator/animated/animations.ts

@@ -0,0 +1,58 @@
+import type { Transition, Variants } from "framer-motion";
+
+export type TypingIndicatorAnimation = "none" | "bounce" | "pulse" | "wave";
+
+export type TypingIndicatorAnimationPresets = Record<
+  TypingIndicatorAnimation,
+  {
+    transition: Transition;
+    variants: Variants;
+  }
+>;
+
+export const typingIndicatorAnimationPresets: TypingIndicatorAnimationPresets =
+  {
+    none: {
+      transition: { duration: 0 },
+      variants: {
+        initial: { y: 0 },
+        animate: { y: 0 },
+      },
+    },
+    bounce: {
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 10,
+        mass: 0.5,
+      },
+      variants: {
+        initial: { y: 0 },
+        animate: { y: -6 },
+      },
+    },
+    pulse: {
+      transition: {
+        duration: 0.8,
+        repeat: Infinity,
+        repeatType: "reverse",
+        ease: "easeInOut",
+      },
+      variants: {
+        initial: { scale: 1, opacity: 0.4 },
+        animate: { scale: 1.3, opacity: 1 },
+      },
+    },
+    wave: {
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 8,
+        mass: 0.4,
+      },
+      variants: {
+        initial: { y: 0, scale: 1 },
+        animate: { y: -8, scale: 0.9 },
+      },
+    },
+  };

package/src/ui/typing-indicator/animated/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+export { TypingIndicatorAnimated } from "./typing-indicator-animated";
+export type {
+  TypingIndicatorAnimation,
+  TypingIndicatorAnimatedProps,
+} from "./types";
+export { typingIndicatorAnimationPresets } from "./animations";

package/src/ui/typing-indicator/animated/types.ts

@@ -0,0 +1,11 @@
+import type { Ref } from "react";
+
+import type { TypingIndicatorBaseProps } from "../types";
+import type { TypingIndicatorAnimation } from "./animations";
+
+export type { TypingIndicatorAnimation };
+
+export type TypingIndicatorAnimatedProps = TypingIndicatorBaseProps & {
+  animation?: TypingIndicatorAnimation;
+  ref?: Ref<HTMLSpanElement>;
+};

package/src/ui/typing-indicator/animated/typing-indicator-animated.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useMemo } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import {
+  typingIndicatorDotVariants,
+  typingIndicatorDotsVariants,
+  typingIndicatorVariants,
+} from "../variants";
+
+import { typingIndicatorAnimationPresets } from "./animations";
+import type { TypingIndicatorAnimatedProps } from "./types";
+import { TypingIndicatorLabel } from "../typing-indicator-base";
+
+export function TypingIndicatorAnimated({
+  appearance,
+  size,
+  dots = 3,
+  label,
+  labelPosition = "before",
+  animation = "bounce",
+  className,
+  ref,
+  ...rest
+}: TypingIndicatorAnimatedProps) {
+  const preset = typingIndicatorAnimationPresets[animation];
+
+  const dotTransitionOverrides = useMemo(
+    () =>
+      Array.from({ length: dots }).map((_, i) => ({
+        delay: i * 0.12,
+        ...(animation !== "none"
+          ? { repeat: Infinity, repeatType: "reverse" as const }
+          : {}),
+        ...preset.transition,
+      })),
+    [dots, animation, preset.transition],
+  );
+
+  return (
+    <span
+      ref={ref}
+      data-slot="typing-indicator"
+      className={cn(typingIndicatorVariants({ size }), className)}
+      {...rest}
+    >
+      {label && labelPosition === "before" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+      <span
+        data-slot="typing-indicator-dots"
+        className={typingIndicatorDotsVariants({ size })}
+      >
+        {Array.from({ length: dots }).map((_, i) => (
+          <motion.span
+            key={i}
+            data-slot="typing-indicator-dot"
+            className={cn(
+              typingIndicatorDotVariants({ appearance, size }),
+              "animate-none",
+            )}
+            initial="initial"
+            animate="animate"
+            variants={preset.variants}
+            transition={dotTransitionOverrides[i]}
+          />
+        ))}
+      </span>
+      {label && labelPosition === "after" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+    </span>
+  );
+}
+
+TypingIndicatorAnimated.displayName = "TypingIndicatorAnimated";

package/src/ui/typing-indicator/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { TypingIndicator } from "./typing-indicator";
+export type {
+  TypingIndicatorBaseProps,
+  TypingIndicatorDots,
+  TypingIndicatorProps,
+  TypingIndicatorVariantProps,
+} from "./types";
+export {
+  typingIndicatorDotVariants,
+  typingIndicatorDotsVariants,
+  typingIndicatorLabelVariants,
+  typingIndicatorVariants,
+} from "./variants";

package/src/ui/typing-indicator/types.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { typingIndicatorDotVariants } from "./variants";
+
+export type TypingIndicatorVariantProps = VariantProps<
+  typeof typingIndicatorDotVariants
+>;
+
+export type TypingIndicatorDots = 3 | 4 | 5;
+
+export type TypingIndicatorBaseProps = TypingIndicatorVariantProps &
+  ComponentPropsWithRef<"span"> & {
+    dots?: TypingIndicatorDots;
+    label?: ReactNode;
+    labelPosition?: "before" | "after";
+    children?: ReactNode;
+  };
+
+export type TypingIndicatorProps = TypingIndicatorBaseProps;

package/src/ui/typing-indicator/typing-indicator-base.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+
+import type { TypingIndicatorBaseProps } from "./types";
+import {
+  typingIndicatorDotDelays,
+  typingIndicatorDotVariants,
+  typingIndicatorDotsVariants,
+  typingIndicatorLabelVariants,
+  typingIndicatorVariants,
+} from "./variants";
+
+export function TypingIndicatorBase({
+  appearance,
+  size,
+  dots = 3,
+  label,
+  labelPosition = "before",
+  className,
+  ref,
+  ...rest
+}: TypingIndicatorBaseProps) {
+  return (
+    <span
+      ref={ref}
+      data-slot="typing-indicator"
+      className={cn(typingIndicatorVariants({ size }), className)}
+      {...rest}
+    >
+      {label && labelPosition === "before" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+      <span
+        data-slot="typing-indicator-dots"
+        className={typingIndicatorDotsVariants({ size })}
+      >
+        {Array.from({ length: dots }).map((_, i) => (
+          <span
+            key={i}
+            data-slot="typing-indicator-dot"
+            className={cn(
+              typingIndicatorDotVariants({ appearance, size }),
+              typingIndicatorDotDelays[i % typingIndicatorDotDelays.length],
+            )}
+          />
+        ))}
+      </span>
+      {label && labelPosition === "after" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+    </span>
+  );
+}
+
+TypingIndicatorBase.displayName = "TypingIndicator";
+
+export function TypingIndicatorLabel({
+  size,
+  children,
+}: {
+  size?: TypingIndicatorBaseProps["size"];
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      data-slot="typing-indicator-label"
+      className={typingIndicatorLabelVariants({ size })}
+    >
+      {children}
+    </span>
+  );
+}
+
+TypingIndicatorLabel.displayName = "TypingIndicatorLabel";