@zentauri-ui/zentauri-components 2.2.2 → 2.3.1

package/src/hooks/index.ts

@@ -53,6 +53,12 @@ export {
   type UseDocumentTitleParams,
 } from "./useDocumentTitle";
 export { useHover } from "./useHover";
+export {
+  useHash,
+  type HashGeneratorAlgorithm,
+  type UseHashResult,
+  ALGORITHM_LABELS,
+} from "./useHash";
 export {
   useIdleTimeout,
   type UseIdleTimeoutParams,

package/src/hooks/useHash/index.ts

@@ -0,0 +1,6 @@
+export {
+  useHash,
+  type HashGeneratorAlgorithm,
+  type UseHashResult,
+  ALGORITHM_LABELS,
+} from "./useHash";

package/src/hooks/useHash/useHash.test.ts

@@ -0,0 +1,77 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useHash } from "./useHash";
+
+vi.stubGlobal("crypto", {
+  subtle: {
+    digest: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4]).buffer),
+  },
+});
+
+describe("useHash", () => {
+  it("should return empty hash for empty input", () => {
+    const { result } = renderHook(() => useHash(""));
+    expect(result.current.hash).toBe("");
+    expect(result.current.isHashing).toBe(false);
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("should compute hash for non-empty input", async () => {
+    const { result } = renderHook(() => useHash("hello"));
+    await vi.waitFor(() => {
+      expect(result.current.hash).toBe("01020304");
+    });
+    expect(result.current.isHashing).toBe(false);
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("should recompute when algorithm changes", async () => {
+    const { result, rerender } = renderHook(
+      ({ input, algo }: { input: string; algo: "sha256" | "sha512" }) =>
+        useHash(input, algo),
+      { initialProps: { input: "hello", algo: "sha256" } },
+    );
+    await vi.waitFor(() => {
+      expect(result.current.hash).toBe("01020304");
+    });
+    rerender({ input: "hello", algo: "sha512" });
+    expect(result.current.isHashing).toBe(true);
+  });
+
+  it("should recompute when input changes", async () => {
+    const { result, rerender } = renderHook(
+      ({ input }: { input: string }) => useHash(input),
+      { initialProps: { input: "hello" } },
+    );
+    await vi.waitFor(() => {
+      expect(result.current.hash).toBe("01020304");
+    });
+    rerender({ input: "world" });
+    expect(result.current.isHashing).toBe(true);
+  });
+
+  it("should call recompute on demand", async () => {
+    const { result } = renderHook(() => useHash("hello"));
+    await vi.waitFor(() => {
+      expect(result.current.hash).toBe("01020304");
+    });
+    act(() => {
+      result.current.recompute();
+    });
+    expect(result.current.isHashing).toBe(true);
+  });
+
+  it("should clear hash when input becomes empty", async () => {
+    const { result, rerender } = renderHook(
+      ({ input }: { input: string }) => useHash(input),
+      { initialProps: { input: "hello" } },
+    );
+    await vi.waitFor(() => {
+      expect(result.current.hash).toBe("01020304");
+    });
+    rerender({ input: "" });
+    expect(result.current.hash).toBe("");
+    expect(result.current.isHashing).toBe(false);
+  });
+});

package/src/hooks/useHash/useHash.ts

@@ -0,0 +1,89 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type HashGeneratorAlgorithm = "sha1" | "sha256" | "sha384" | "sha512";
+
+export const ALGORITHM_LABELS: Record<HashGeneratorAlgorithm, string> = {
+  sha1: "SHA-1",
+  sha256: "SHA-256",
+  sha384: "SHA-384",
+  sha512: "SHA-512",
+};
+
+async function computeHash(
+  algorithm: HashGeneratorAlgorithm,
+  input: string,
+): Promise<string> {
+  if (typeof crypto === "undefined" || !crypto.subtle) {
+    throw new Error("Web Crypto API is not supported in this environment.");
+  }
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const hashBuffer = await crypto.subtle.digest(
+    algorithm.toUpperCase().replace("SHA", "SHA-") as AlgorithmIdentifier,
+    data,
+  );
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export type UseHashResult = {
+  hash: string;
+  isHashing: boolean;
+  error: Error | undefined;
+  recompute: () => void;
+};
+
+/**
+ * Computes a cryptographic hash of `input` using the Web Crypto API.
+ *
+ * Automatically recomputes whenever `input` or `algorithm` changes.
+ * Returns `{ hash, isHashing, error, recompute }` for rendering.
+ *
+ * @param input - The string to hash.
+ * @param algorithm - Hash algorithm (default `"sha256"`).
+ * @returns `{ hash, isHashing, error, recompute }`
+ */
+export function useHash(
+  input: string,
+  algorithm: HashGeneratorAlgorithm = "sha256",
+): UseHashResult {
+  const [hash, setHash] = useState("");
+  const [isHashing, setIsHashing] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [trigger, setTrigger] = useState(0);
+  const nonceRef = useRef(0);
+
+  useEffect(() => {
+    if (!input) {
+      setHash("");
+      setIsHashing(false);
+      setError(undefined);
+      return;
+    }
+    const nonce = ++nonceRef.current;
+    setIsHashing(true);
+    setError(undefined);
+    computeHash(algorithm, input).then(
+      (result) => {
+        if (nonce === nonceRef.current) {
+          setHash(result);
+          setIsHashing(false);
+        }
+      },
+      (err) => {
+        if (nonce === nonceRef.current) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setIsHashing(false);
+        }
+      },
+    );
+  }, [algorithm, input, trigger]);
+
+  const recompute = useCallback(() => {
+    setTrigger((prev) => prev + 1);
+  }, []);
+
+  return { hash, isHashing, error, recompute };
+}

package/src/ui/hash-generator/hash-generator-base.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { cn } from "../../lib/utils";
+import { useHash } from "../../hooks/useHash";
+
+import type { HashGeneratorBaseProps } from "./types";
+import { ALGORITHM_LABELS } from "./types";
+import {
+  hashGeneratorHeaderVariants,
+  hashGeneratorInputVariants,
+  hashGeneratorLabelVariants,
+  hashGeneratorOutputTextVariants,
+  hashGeneratorOutputVariants,
+  hashGeneratorVariants,
+} from "./variants";
+
+export function HashGeneratorBase({
+  className,
+  appearance,
+  size,
+  algorithm = "sha256",
+  value,
+  onValueChange,
+  readOnly = false,
+  showCopyButton = true,
+  ref,
+  ...rest
+}: HashGeneratorBaseProps) {
+  const [internalValue, setInternalValue] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const inputValue = value ?? internalValue;
+  const handleChange = onValueChange ?? setInternalValue;
+
+  const { hash, error } = useHash(inputValue, algorithm);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+
+  const handleCopy = useCallback(async () => {
+    if (!hash) return;
+    try {
+      await navigator.clipboard.writeText(hash);
+      setCopied(true);
+    } catch {
+      // Clipboard API not available
+    }
+  }, [hash]);
+
+  return (
+    <div
+      ref={ref}
+      data-slot="hash-generator"
+      className={cn(hashGeneratorVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      <div className={hashGeneratorHeaderVariants()}>
+        <span className={hashGeneratorLabelVariants()}>
+          {ALGORITHM_LABELS[algorithm]}
+        </span>
+        {showCopyButton && hash ? (
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="rounded px-2 py-0.5 text-xs font-medium transition-colors text-[color:var(--zui-hash-generator-label-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-hash-generator-label-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))] hover:bg-[var(--zui-hash-generator-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:hover:bg-[var(--zui-hash-generator-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]"
+          >
+            {copied ? "Copied!" : "Copy"}
+          </button>
+        ) : null}
+      </div>
+      <textarea
+        data-slot="hash-generator-input"
+        value={inputValue}
+        onChange={(e) => handleChange(e.target.value)}
+        readOnly={readOnly}
+        placeholder="Enter text to hash..."
+        rows={3}
+        aria-label={`Input text to hash using ${ALGORITHM_LABELS[algorithm]}`}
+        className={cn(hashGeneratorInputVariants(), "resize-y min-h-[5rem]")}
+      />
+      <div className={hashGeneratorOutputVariants()}>
+        <span
+          role="status"
+          data-slot="hash-generator-output"
+          className={cn(
+            hashGeneratorOutputTextVariants(),
+            !hash && !error && "opacity-40",
+          )}
+        >
+          {error ? (
+            <span className="text-red-500">{error.message}</span>
+          ) : (
+            hash || "Hash output"
+          )}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+HashGeneratorBase.displayName = "HashGenerator";

package/src/ui/hash-generator/hash-generator.test.tsx

@@ -0,0 +1,73 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { HashGenerator } from "./hash-generator";
+
+// Mock crypto.subtle.digest for jsdom
+vi.stubGlobal("crypto", {
+  subtle: {
+    digest: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4]).buffer),
+  },
+});
+
+describe("HashGenerator", () => {
+  it("should expose displayName", () => {
+    expect(HashGenerator.displayName).toBe("HashGenerator");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<HashGenerator />);
+    const root = document.querySelector('[data-slot="hash-generator"]');
+    expect(root).toBeTruthy();
+    expect(root?.getAttribute("data-slot")).toBe("hash-generator");
+  });
+
+  it("should render algorithm label", () => {
+    render(<HashGenerator algorithm="sha256" />);
+    expect(screen.getByText("SHA-256")).toBeInTheDocument();
+  });
+
+  it("should render with sha512 algorithm", () => {
+    render(<HashGenerator algorithm="sha512" />);
+    expect(screen.getByText("SHA-512")).toBeInTheDocument();
+  });
+
+  it("should render textarea for input", () => {
+    render(<HashGenerator />);
+    expect(
+      screen.getByPlaceholderText("Enter text to hash..."),
+    ).toBeInTheDocument();
+  });
+
+  it("should display hash output", async () => {
+    render(<HashGenerator />);
+    const textarea = screen.getByPlaceholderText("Enter text to hash...");
+    await userEvent.type(textarea, "hello");
+    const output = document.querySelector(
+      '[data-slot="hash-generator-output"]',
+    );
+    expect(output).toBeTruthy();
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<HashGenerator ref={ref} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("hash-generator");
+  });
+
+  it("should accept controlled value via value prop", () => {
+    render(<HashGenerator value="test text" readOnly />);
+    const textarea = screen.getByPlaceholderText("Enter text to hash...");
+    expect(textarea).toHaveValue("test text");
+  });
+
+  it("should call onValueChange when typing", async () => {
+    const handleChange = vi.fn();
+    render(<HashGenerator onValueChange={handleChange} />);
+    const textarea = screen.getByPlaceholderText("Enter text to hash...");
+    await userEvent.type(textarea, "a");
+    expect(handleChange).toHaveBeenCalledWith("a");
+  });
+});

package/src/ui/hash-generator/hash-generator.tsx

@@ -0,0 +1 @@
+export { HashGeneratorBase as HashGenerator } from "./hash-generator-base";

package/src/ui/hash-generator/index.ts

@@ -0,0 +1,18 @@
+"use client";
+
+export { HashGenerator } from "./hash-generator";
+export type {
+  HashGeneratorAlgorithm,
+  HashGeneratorBaseProps,
+  HashGeneratorProps,
+  HashGeneratorVariantProps,
+} from "./types";
+export { ALGORITHM_LABELS } from "./types";
+export {
+  hashGeneratorHeaderVariants,
+  hashGeneratorInputVariants,
+  hashGeneratorLabelVariants,
+  hashGeneratorOutputTextVariants,
+  hashGeneratorOutputVariants,
+  hashGeneratorVariants,
+} from "./variants";

package/src/ui/hash-generator/types.ts

@@ -0,0 +1,29 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef } from "react";
+
+import type { hashGeneratorVariants } from "./variants";
+
+export type HashGeneratorAlgorithm = "sha1" | "sha256" | "sha384" | "sha512";
+
+export type HashGeneratorVariantProps = VariantProps<
+  typeof hashGeneratorVariants
+>;
+
+export interface HashGeneratorBaseProps extends ComponentPropsWithRef<"div"> {
+  algorithm?: HashGeneratorAlgorithm;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  readOnly?: boolean;
+  showCopyButton?: boolean;
+  appearance?: HashGeneratorVariantProps["appearance"];
+  size?: HashGeneratorVariantProps["size"];
+}
+
+export type HashGeneratorProps = HashGeneratorBaseProps;
+
+export const ALGORITHM_LABELS: Record<HashGeneratorAlgorithm, string> = {
+  sha1: "SHA-1",
+  sha256: "SHA-256",
+  sha384: "SHA-384",
+  sha512: "SHA-512",
+} as const;

package/src/ui/hash-generator/variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiHashGeneratorAppearances,
+  zuiHashGeneratorBase,
+  zuiHashGeneratorHeaderBase,
+  zuiHashGeneratorInputBase,
+  zuiHashGeneratorLabelBase,
+  zuiHashGeneratorOutputBase,
+  zuiHashGeneratorOutputTextBase,
+  zuiHashGeneratorSizes,
+} from "../../design-system/hash-generator";
+
+export const hashGeneratorVariants = cva(zuiHashGeneratorBase, {
+  variants: {
+    appearance: zuiHashGeneratorAppearances,
+    size: zuiHashGeneratorSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const hashGeneratorHeaderVariants = cva(zuiHashGeneratorHeaderBase);
+export const hashGeneratorLabelVariants = cva(zuiHashGeneratorLabelBase);
+export const hashGeneratorInputVariants = cva(zuiHashGeneratorInputBase);
+export const hashGeneratorOutputVariants = cva(zuiHashGeneratorOutputBase);
+export const hashGeneratorOutputTextVariants = cva(
+  zuiHashGeneratorOutputTextBase,
+);

package/src/ui/qr-code/animated/animations.ts

@@ -0,0 +1,51 @@
+import type { Transition, Variants } from "framer-motion";
+
+export type QrCodeAnimation =
+  | "none"
+  | "fade-in"
+  | "zoom-in"
+  | "slide-up"
+  | "rotate-in";
+
+export type QrCodeAnimationPresets = Record<
+  QrCodeAnimation,
+  { transition: Transition; variants: Variants }
+>;
+
+export const qrCodeAnimationPresets: QrCodeAnimationPresets = {
+  none: {
+    transition: { duration: 0 },
+    variants: {
+      initial: { opacity: 1 },
+      animate: { opacity: 1 },
+    },
+  },
+  "fade-in": {
+    transition: { duration: 0.3, ease: "easeOut" },
+    variants: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+    },
+  },
+  "zoom-in": {
+    transition: { type: "spring", stiffness: 300, damping: 24 },
+    variants: {
+      initial: { opacity: 0, scale: 0.85 },
+      animate: { opacity: 1, scale: 1 },
+    },
+  },
+  "slide-up": {
+    transition: { type: "spring", stiffness: 280, damping: 22 },
+    variants: {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+    },
+  },
+  "rotate-in": {
+    transition: { type: "spring", stiffness: 200, damping: 18 },
+    variants: {
+      initial: { opacity: 0, rotate: -90, scale: 0.8 },
+      animate: { opacity: 1, rotate: 0, scale: 1 },
+    },
+  },
+};

package/src/ui/qr-code/animated/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { QrCodeAnimated } from "./qr-code-animated";
+export type { QrCodeAnimation, QrCodeAnimatedProps } from "./types";
+export { qrCodeAnimationPresets } from "./animations";

package/src/ui/qr-code/animated/qr-code-animated.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import QRCode from "qrcode";
+
+import { cn } from "../../../lib/utils";
+import { qrCodeAnimationPresets } from "./animations";
+import type { QrCodeAnimatedProps } from "./types";
+import { QrCodeBase } from "../qr-code-base";
+
+export function QrCodeAnimated({
+  animation = "none",
+  value,
+  canvasSize = 200,
+  level = "M",
+  bgColor = "#ffffff",
+  fgColor = "#000000",
+  margin = 2,
+  caption,
+  className,
+  ...props
+}: QrCodeAnimatedProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || animation === "none") return;
+
+    if (!value) {
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+      return;
+    }
+
+    QRCode.toCanvas(
+      canvas,
+      value,
+      {
+        width: canvasSize,
+        margin,
+        color: {
+          dark: fgColor,
+          light: bgColor,
+        },
+        errorCorrectionLevel: level,
+      },
+      (error) => {
+        if (error) {
+          console.error("QR Code generation error:", error);
+        }
+      },
+    );
+  }, [value, canvasSize, level, bgColor, fgColor, margin, animation]);
+
+  if (animation === "none") {
+    return (
+      <QrCodeBase
+        value={value}
+        canvasSize={canvasSize}
+        level={level}
+        bgColor={bgColor}
+        fgColor={fgColor}
+        margin={margin}
+        caption={caption}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  const preset = qrCodeAnimationPresets[animation];
+
+  return (
+    <motion.div
+      data-slot="qr-code"
+      className={cn(
+        "inline-flex flex-col items-center gap-3 rounded-2xl border p-6 border-[color:var(--zui-qr-code-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-qr-code-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-qr-code-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-qr-code-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+        className,
+      )}
+      variants={preset.variants}
+      initial="initial"
+      animate="animate"
+      transition={preset.transition}
+      {...(props as Record<string, unknown>)}
+    >
+      <div className="overflow-hidden rounded-xl bg-[var(--zui-qr-code-canvas-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-qr-code-canvas-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]">
+        <canvas
+          ref={canvasRef}
+          width={canvasSize}
+          height={canvasSize}
+          data-slot="qr-code-canvas"
+          className="block h-auto max-w-full"
+          aria-label={`QR code for ${value}`}
+        />
+      </div>
+      {caption ? (
+        <span
+          data-slot="qr-code-caption"
+          className="text-xs text-center text-[color:var(--zui-qr-code-caption-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-qr-code-caption-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))] max-w-full truncate px-2"
+        >
+          {caption}
+        </span>
+      ) : null}
+    </motion.div>
+  );
+}
+
+QrCodeAnimated.displayName = "QrCodeAnimated";

package/src/ui/qr-code/animated/types.ts

@@ -0,0 +1,10 @@
+import type { Ref } from "react";
+import type { QrCodeBaseProps } from "../types";
+import type { QrCodeAnimation } from "./animations";
+
+export type { QrCodeAnimation };
+
+export type QrCodeAnimatedProps = QrCodeBaseProps & {
+  animation?: QrCodeAnimation;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/ui/qr-code/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { QrCode } from "./qr-code";
+export type { QrCodeBaseProps, QrCodeLevel, QrCodeProps } from "./types";
+export { QR_CODE_LEVEL_LABELS } from "./types";
+export {
+  qrCodeCanvasWrapperVariants,
+  qrCodeCaptionVariants,
+  qrCodeVariants,
+} from "./variants";