@zentauri-ui/zentauri-components 2.2.1 → 2.3.0

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",
+  },
+});