@zentauri-ui/zentauri-components 2.2.0 → 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 },
+  },
+);