@zentauri-ui/zentauri-components 2.2.0 → 2.2.2

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/secret-reveal/animated/animations.ts

@@ -0,0 +1,74 @@
+import type { Transition, Variants } from "framer-motion";
+
+export type SecretRevealAnimation =
+  | "none"
+  | "fade"
+  | "slide-up"
+  | "scale"
+  | "flip";
+
+export type SecretRevealAnimationPresets = Record<
+  SecretRevealAnimation,
+  {
+    transition: Transition;
+    variants: Variants;
+  }
+>;
+
+export const secretRevealAnimationPresets: SecretRevealAnimationPresets = {
+  none: {
+    transition: { duration: 0 },
+    variants: {
+      initial: { opacity: 1 },
+      animate: { opacity: 1 },
+      exit: { opacity: 1 },
+    },
+  },
+  fade: {
+    transition: { duration: 0.25, ease: "easeInOut" },
+    variants: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+    },
+  },
+  "slide-up": {
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 25,
+      mass: 0.5,
+    },
+    variants: {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -8 },
+    },
+  },
+  scale: {
+    transition: {
+      type: "spring",
+      stiffness: 400,
+      damping: 20,
+      mass: 0.4,
+    },
+    variants: {
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+    },
+  },
+  flip: {
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 18,
+      mass: 0.6,
+    },
+    variants: {
+      initial: { opacity: 0, rotateX: 90 },
+      animate: { opacity: 1, rotateX: 0 },
+      exit: { opacity: 0, rotateX: -90 },
+    },
+  },
+};

package/src/ui/secret-reveal/animated/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SecretRevealAnimated } from "./secret-reveal-animated";
+export type { SecretRevealAnimation, SecretRevealAnimatedProps } from "./types";
+export { secretRevealAnimationPresets } from "./animations";

package/src/ui/secret-reveal/animated/secret-reveal-animated.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useCallback, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { secretRevealAnimationPresets } from "./animations";
+import type { SecretRevealAnimatedProps } from "./types";
+import {
+  secretRevealLabelVariants,
+  secretRevealToggleVariants,
+  secretRevealValueVariants,
+  secretRevealVariants,
+} from "../variants";
+
+export function SecretRevealAnimated({
+  appearance,
+  size,
+  value,
+  children,
+  label,
+  labelPosition = "top",
+  initiallyRevealed = false,
+  onVisibilityChange,
+  animation = "fade",
+  muteChar = "•",
+  className,
+  ref,
+  ...rest
+}: SecretRevealAnimatedProps) {
+  const [revealed, setRevealed] = useState(initiallyRevealed);
+
+  const toggle = useCallback(() => {
+    const next = !revealed;
+    setRevealed(next);
+    onVisibilityChange?.(next);
+  }, [onVisibilityChange, revealed]);
+
+  const preset = secretRevealAnimationPresets[animation];
+  const displayText = value ?? (typeof children === "string" ? children : "");
+
+  return (
+    <div
+      ref={ref}
+      data-slot="secret-reveal"
+      className={cn(secretRevealVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {label && labelPosition === "top" && (
+        <span
+          data-slot="secret-reveal-label"
+          className={secretRevealLabelVariants({ size })}
+        >
+          {label}
+        </span>
+      )}
+      <span className="flex items-center gap-2 flex-1 min-w-0">
+        {label && labelPosition === "side" && (
+          <span
+            data-slot="secret-reveal-label"
+            className={secretRevealLabelVariants({ size })}
+          >
+            {label}
+          </span>
+        )}
+        <span
+          data-slot="secret-reveal-value"
+          className={cn(secretRevealValueVariants({ size }), "flex-1 truncate")}
+        >
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={revealed ? "revealed" : "hidden"}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={preset.variants}
+              transition={preset.transition}
+              className="inline-block"
+            >
+              {revealed
+                ? (value ?? children)
+                : muteChar.repeat(displayText.length || 8)}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+        <button
+          type="button"
+          data-slot="secret-reveal-toggle"
+          className={secretRevealToggleVariants({ size, appearance })}
+          onClick={toggle}
+          aria-label={revealed ? "Hide secret" : "Reveal secret"}
+        >
+          {revealed ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+              <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          )}
+        </button>
+      </span>
+    </div>
+  );
+}
+
+SecretRevealAnimated.displayName = "SecretRevealAnimated";

package/src/ui/secret-reveal/animated/types.ts

@@ -0,0 +1,11 @@
+import type { Ref } from "react";
+
+import type { SecretRevealBaseProps } from "../types";
+import type { SecretRevealAnimation } from "./animations";
+
+export type { SecretRevealAnimation };
+
+export type SecretRevealAnimatedProps = SecretRevealBaseProps & {
+  animation?: SecretRevealAnimation;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/ui/secret-reveal/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+export { SecretReveal } from "./secret-reveal";
+export type {
+  SecretRevealBaseProps,
+  SecretRevealProps,
+  SecretRevealVariantProps,
+} from "./types";
+export {
+  secretRevealLabelVariants,
+  secretRevealToggleVariants,
+  secretRevealValueVariants,
+  secretRevealVariants,
+} from "./variants";

package/src/ui/secret-reveal/secret-reveal-base.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { SecretRevealBaseProps } from "./types";
+import {
+  secretRevealLabelVariants,
+  secretRevealToggleVariants,
+  secretRevealValueVariants,
+  secretRevealVariants,
+} from "./variants";
+
+export function SecretRevealBase({
+  appearance,
+  size,
+  value,
+  children,
+  label,
+  labelPosition = "top",
+  initiallyRevealed = false,
+  onVisibilityChange,
+  muteChar = "•",
+  className,
+  ref,
+  ...rest
+}: SecretRevealBaseProps) {
+  const [revealed, setRevealed] = useState(initiallyRevealed);
+
+  const toggle = useCallback(() => {
+    const next = !revealed;
+    setRevealed(next);
+    onVisibilityChange?.(next);
+  }, [onVisibilityChange, revealed]);
+
+  const displayText = value ?? (typeof children === "string" ? children : "");
+
+  return (
+    <div
+      ref={ref}
+      data-slot="secret-reveal"
+      className={cn(secretRevealVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {label && labelPosition === "top" && (
+        <span
+          data-slot="secret-reveal-label"
+          className={secretRevealLabelVariants({ size })}
+        >
+          {label}
+        </span>
+      )}
+      <span className="flex items-center gap-2 flex-1 min-w-0">
+        {label && labelPosition === "side" && (
+          <span
+            data-slot="secret-reveal-label"
+            className={secretRevealLabelVariants({ size })}
+          >
+            {label}
+          </span>
+        )}
+        <span
+          data-slot="secret-reveal-value"
+          className={cn(secretRevealValueVariants({ size }), "flex-1 truncate")}
+        >
+          {revealed
+            ? (value ?? children)
+            : muteChar.repeat(displayText.length || 8)}
+        </span>
+        <button
+          type="button"
+          data-slot="secret-reveal-toggle"
+          className={secretRevealToggleVariants({ size, appearance })}
+          onClick={toggle}
+          aria-label={revealed ? "Hide secret" : "Reveal secret"}
+        >
+          {revealed ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+              <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          )}
+        </button>
+      </span>
+    </div>
+  );
+}
+
+SecretRevealBase.displayName = "SecretReveal";

package/src/ui/secret-reveal/secret-reveal.test.tsx

@@ -0,0 +1,75 @@
+import { createRef } from "react";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SecretReveal } from "./secret-reveal";
+
+describe("SecretReveal", () => {
+  it("should set displayName", () => {
+    expect(SecretReveal.displayName).toBe("SecretReveal");
+  });
+
+  it("should stamp data-slot on the root container", () => {
+    const { container } = render(<SecretReveal value="sk-test" />);
+    const root = container.querySelector('[data-slot="secret-reveal"]');
+    expect(root).toBeTruthy();
+  });
+
+  it("should render masked value by default", () => {
+    const { container } = render(<SecretReveal value="sk-test" />);
+    const valueEl = container.querySelector(
+      '[data-slot="secret-reveal-value"]',
+    );
+    expect(valueEl?.textContent).toBe("•••••••");
+  });
+
+  it("should render a label", () => {
+    const { container } = render(
+      <SecretReveal value="sk-test" label="API Key" />,
+    );
+    const label = container.querySelector('[data-slot="secret-reveal-label"]');
+    expect(label).toBeTruthy();
+    expect(label?.textContent).toBe("API Key");
+  });
+
+  it("should render a toggle button", () => {
+    const { container } = render(<SecretReveal value="sk-test" />);
+    const toggle = container.querySelector(
+      '[data-slot="secret-reveal-toggle"]',
+    );
+    expect(toggle).toBeTruthy();
+  });
+
+  it("should render initial revealed state", () => {
+    const { container } = render(
+      <SecretReveal value="sk-test" initiallyRevealed />,
+    );
+    const valueEl = container.querySelector(
+      '[data-slot="secret-reveal-value"]',
+    );
+    expect(valueEl?.textContent).toBe("sk-test");
+  });
+
+  it("should render with children instead of value", () => {
+    const { container } = render(<SecretReveal>my-secret-key</SecretReveal>);
+    const valueEl = container.querySelector(
+      '[data-slot="secret-reveal-value"]',
+    );
+    expect(valueEl?.textContent).toBe("•••••••••••••");
+  });
+
+  it("should forward refs to the root element", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<SecretReveal value="test" ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current?.getAttribute("data-slot")).toBe("secret-reveal");
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(
+      <SecretReveal value="test" className="custom-class" />,
+    );
+    const root = container.querySelector('[data-slot="secret-reveal"]');
+    expect(root?.className).toMatch(/custom-class/);
+  });
+});

package/src/ui/secret-reveal/secret-reveal.tsx

@@ -0,0 +1,2 @@
+// secret-reveal.tsx — default static entry (no framer-motion)
+export { SecretRevealBase as SecretReveal } from "./secret-reveal-base";

package/src/ui/secret-reveal/types.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { secretRevealVariants } from "./variants";
+
+export type SecretRevealVariantProps = VariantProps<
+  typeof secretRevealVariants
+>;
+
+export type SecretRevealBaseProps = SecretRevealVariantProps &
+  ComponentPropsWithRef<"div"> & {
+    value?: string;
+    children?: ReactNode;
+    label?: ReactNode;
+    labelPosition?: "top" | "side";
+    initiallyRevealed?: boolean;
+    onVisibilityChange?: (revealed: boolean) => void;
+    muteChar?: string;
+  };
+
+export type SecretRevealProps = SecretRevealBaseProps;

package/src/ui/secret-reveal/variants.ts

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiSecretRevealAppearances,
+  zuiSecretRevealContainerBase,
+  zuiSecretRevealLabelBase,
+  zuiSecretRevealLabelSizes,
+  zuiSecretRevealSizes,
+  zuiSecretRevealToggleBase,
+  zuiSecretRevealToggleSizes,
+  zuiSecretRevealValueBase,
+  zuiSecretRevealValueSizes,
+} from "../../design-system/secret-reveal";
+
+export const secretRevealVariants = cva(zuiSecretRevealContainerBase, {
+  variants: {
+    appearance: zuiSecretRevealAppearances,
+    size: zuiSecretRevealSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const secretRevealLabelVariants = cva(zuiSecretRevealLabelBase, {
+  variants: {
+    size: zuiSecretRevealLabelSizes,
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const secretRevealValueVariants = cva(zuiSecretRevealValueBase, {
+  variants: {
+    size: zuiSecretRevealValueSizes,
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const secretRevealToggleVariants = cva(zuiSecretRevealToggleBase, {
+  variants: {
+    size: zuiSecretRevealToggleSizes,
+    appearance: zuiSecretRevealAppearances,
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
+  },
+});