@zentauri-ui/zentauri-components 2.1.9 → 2.2.1

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

@@ -0,0 +1,202 @@
+"use client";
+
+import { createContext, useContext, useMemo, useId } from "react";
+
+import { cn, clamp } from "../../lib/utils";
+
+import type {
+  PasswordStrengthMeterProps,
+  PasswordStrengthMeterSectionProps,
+  PasswordStrengthMeterCtx,
+} from "./types";
+import {
+  passwordStrengthMeterBarVariants,
+  passwordStrengthMeterTrackVariants,
+  passwordStrengthMeterVariants,
+} from "./variants";
+
+export const PasswordStrengthMeterContext =
+  createContext<PasswordStrengthMeterCtx | null>(null);
+
+export function usePasswordStrengthMeterContext(
+  component: string,
+): PasswordStrengthMeterCtx {
+  const ctx = useContext(PasswordStrengthMeterContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <PasswordStrengthMeter>`);
+  }
+  return ctx;
+}
+
+export function getStrengthLabel(percent: number): string {
+  if (percent <= 20) return "Weak";
+  if (percent <= 40) return "Fair";
+  if (percent <= 60) return "Good";
+  if (percent <= 80) return "Strong";
+  return "Very strong";
+}
+
+export function getStrengthColor(percent: number): string {
+  if (percent <= 20)
+    return "text-[var(--zui-status-error,#dc2626)] dark:text-[var(--zui-status-error-dark,#ef4444)]";
+  if (percent <= 40)
+    return "text-[var(--zui-color-orange,#ea580c)] dark:text-[var(--zui-color-orange-dark,#fb923c)]";
+  if (percent <= 60)
+    return "text-[var(--zui-color-yellow,#ca8a04)] dark:text-[var(--zui-color-yellow-dark,#facc15)]";
+  if (percent <= 80)
+    return "text-[var(--zui-color-emerald,#16a34a)] dark:text-[var(--zui-color-emerald-dark,#22c55e)]";
+  return "text-[var(--zui-color-indigo,#4338ca)] dark:text-[var(--zui-color-indigo-dark,#818cf8)]";
+}
+
+export function PasswordStrengthMeterBase(props: PasswordStrengthMeterProps) {
+  const {
+    className,
+    appearance = "default",
+    size = "md",
+    shape = "rounded",
+    animated = false,
+    segmented = false,
+    value = 0,
+    min = 0,
+    max = 100,
+    label,
+    scoreLabel,
+    showScoreLabel = true,
+    children,
+    ref,
+    as: Wrapper = "div",
+    ...rest
+  } = props;
+  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(
+    () => ({
+      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,
+    ],
+  );
+
+  return (
+    <PasswordStrengthMeterContext.Provider value={ctx}>
+      <Wrapper
+        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,
+        )}
+        {...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>
+            )}
+            <PasswordStrengthMeterBar
+              style={{ transform: `scaleX(${percent / 100})` }}
+            />
+          </>
+        )}
+      </Wrapper>
+    </PasswordStrengthMeterContext.Provider>
+  );
+}
+
+PasswordStrengthMeterBase.displayName = "PasswordStrengthMeter";
+
+export function PasswordStrengthMeterBar({
+  className,
+  style,
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}: PasswordStrengthMeterSectionProps & {
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const { size, shape, animated, segmented } = usePasswordStrengthMeterContext(
+    "PasswordStrengthMeterBar",
+  );
+
+  return (
+    <Wrapper
+      data-slot="password-strength-meter-track"
+      className={cn(
+        passwordStrengthMeterTrackVariants({ size, shape }),
+        "text-current",
+      )}
+    >
+      <div
+        ref={ref}
+        data-slot="password-strength-meter-bar"
+        className={cn(
+          passwordStrengthMeterBarVariants({ segmented }),
+          animated ? "animate-pulse" : undefined,
+          className,
+        )}
+        style={{
+          transformOrigin: "left center",
+          ...style,
+        }}
+        {...rest}
+      />
+    </Wrapper>
+  );
+}
+
+PasswordStrengthMeterBar.displayName = "PasswordStrengthMeterBar";

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

@@ -0,0 +1,103 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { PasswordStrengthMeter } from "./password-strength-meter";
+import { PasswordStrengthMeterBar } from "./password-strength-meter-base";
+
+describe("PasswordStrengthMeter", () => {
+  it("should expose displayName on compound parts", () => {
+    expect(PasswordStrengthMeter.displayName).toBe("PasswordStrengthMeter");
+    expect(PasswordStrengthMeterBar.displayName).toBe(
+      "PasswordStrengthMeterBar",
+    );
+  });
+
+  it("should stamp data-slot on the root and default bar track", () => {
+    render(<PasswordStrengthMeter value={40} />);
+    expect(
+      document.querySelector('[data-slot="password-strength-meter"]'),
+    ).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="password-strength-meter-track"]'),
+    ).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="password-strength-meter-bar"]'),
+    ).toBeTruthy();
+  });
+
+  it("should expose meter semantics with clamped value", () => {
+    render(<PasswordStrengthMeter value={120} min={0} max={100} />);
+    const meter = screen.getByRole("meter");
+    expect(meter.getAttribute("aria-valuemin")).toBe("0");
+    expect(meter.getAttribute("aria-valuemax")).toBe("100");
+    expect(meter.getAttribute("aria-valuenow")).toBe("100");
+  });
+
+  it("should clamp below the minimum", () => {
+    render(<PasswordStrengthMeter value={-5} min={0} max={100} />);
+    expect(screen.getByRole("meter").getAttribute("aria-valuenow")).toBe("0");
+  });
+
+  it("should render strength label based on value", () => {
+    render(<PasswordStrengthMeter value={10} showScoreLabel />);
+    expect(
+      document.querySelector(
+        '[data-slot="password-strength-meter-score-label"]',
+      ),
+    ).toHaveTextContent("Weak");
+  });
+
+  it("should render 'Very strong' for high values", () => {
+    render(<PasswordStrengthMeter value={95} showScoreLabel />);
+    expect(
+      document.querySelector(
+        '[data-slot="password-strength-meter-score-label"]',
+      ),
+    ).toHaveTextContent("Very strong");
+  });
+
+  it("should not show score label when showScoreLabel is false", () => {
+    render(<PasswordStrengthMeter value={50} showScoreLabel={false} />);
+    expect(
+      document.querySelector(
+        '[data-slot="password-strength-meter-score-label"]',
+      ),
+    ).toBeNull();
+  });
+
+  it("should render custom label", () => {
+    render(<PasswordStrengthMeter value={50} label="Password" />);
+    expect(
+      document.querySelector('[data-slot="password-strength-meter-label"]'),
+    ).toHaveTextContent("Password");
+  });
+
+  it("should render custom scoreLabel", () => {
+    render(<PasswordStrengthMeter value={50} scoreLabel="Medium" />);
+    expect(
+      document.querySelector(
+        '[data-slot="password-strength-meter-score-label"]',
+      ),
+    ).toHaveTextContent("Medium");
+  });
+
+  it("should apply appearance classes from the variant recipe", () => {
+    render(<PasswordStrengthMeter value={50} appearance="emerald" />);
+    const root = document.querySelector(
+      '[data-slot="password-strength-meter"]',
+    ) as HTMLElement;
+    expect(root.className).toMatch(/--psm-fill/);
+  });
+
+  describe("ref forwarding", () => {
+    it("should forward ref to the root", () => {
+      const ref = createRef<HTMLDivElement>();
+      render(<PasswordStrengthMeter ref={ref} value={5} />);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current?.getAttribute("data-slot")).toBe(
+        "password-strength-meter",
+      );
+    });
+  });
+});

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

@@ -0,0 +1,8 @@
+import { PasswordStrengthMeterBase } from "./password-strength-meter-base";
+import type { PasswordStrengthMeterProps } from "./types";
+
+export const PasswordStrengthMeter = (props: PasswordStrengthMeterProps) => {
+  return <PasswordStrengthMeterBase {...props} />;
+};
+
+PasswordStrengthMeter.displayName = "PasswordStrengthMeter";

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

@@ -0,0 +1,40 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
+import type { passwordStrengthMeterVariants } from "./variants";
+
+export type PasswordStrengthMeterVariantProps = VariantProps<
+  typeof passwordStrengthMeterVariants
+>;
+
+export type PasswordStrengthMeterProps = PasswordStrengthMeterVariantProps &
+  (Omit<ComponentPropsWithRef<"div">, "children"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    scoreLabel?: string;
+    showScoreLabel?: boolean;
+    animated?: boolean;
+    segmented?: boolean;
+    children?: ReactNode;
+    as?: ElementType;
+  });
+
+export type PasswordStrengthMeterSectionProps = {
+  className?: string;
+  children?: ReactNode;
+  as?: ElementType;
+};
+
+export type PasswordStrengthMeterCtx = {
+  value: number;
+  min: number;
+  max: number;
+  size: NonNullable<PasswordStrengthMeterProps["size"]>;
+  shape: NonNullable<PasswordStrengthMeterProps["shape"]>;
+  animated: boolean;
+  segmented: boolean;
+  appearance: NonNullable<PasswordStrengthMeterProps["appearance"]>;
+  labelSlotId: string;
+};

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

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiPasswordStrengthMeterAppearances,
+  zuiPasswordStrengthMeterBarBase,
+  zuiPasswordStrengthMeterBarSegmented,
+  zuiPasswordStrengthMeterBase,
+  zuiPasswordStrengthMeterShapes,
+  zuiPasswordStrengthMeterSizes,
+  zuiPasswordStrengthMeterTrackBase,
+  zuiPasswordStrengthMeterTrackSizes,
+} from "../../design-system/password-strength-meter";
+
+export const passwordStrengthMeterVariants = cva(zuiPasswordStrengthMeterBase, {
+  variants: {
+    appearance: zuiPasswordStrengthMeterAppearances,
+    size: zuiPasswordStrengthMeterSizes,
+    shape: zuiPasswordStrengthMeterShapes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    shape: "rounded",
+  },
+});
+
+export const passwordStrengthMeterTrackVariants = cva(
+  zuiPasswordStrengthMeterTrackBase,
+  {
+    variants: {
+      size: zuiPasswordStrengthMeterTrackSizes,
+      shape: zuiPasswordStrengthMeterShapes,
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "rounded",
+    },
+  },
+);
+
+export const passwordStrengthMeterBarVariants = cva(
+  zuiPasswordStrengthMeterBarBase,
+  {
+    variants: {
+      segmented: zuiPasswordStrengthMeterBarSegmented,
+    },
+    defaultVariants: { segmented: false },
+  },
+);

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