@zentauri-ui/zentauri-components 2.2.2 → 2.3.0

package/dist/ui/split-button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["jsx"],"mappings":"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","file":"split-button.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}
+{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["jsx"],"mappings":"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","file":"split-button.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "keywords": [
     "react",

package/src/design-system/hash-generator.ts

@@ -0,0 +1,34 @@
+export const zuiHashGeneratorBase = [
+  "rounded-lg border border-[color:var(--zui-hash-generator-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-hash-generator-border-dark,var(--zui-border-dark,#ffffff1a))]",
+  "bg-[var(--zui-hash-generator-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-hash-generator-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+  "text-[color:var(--zui-hash-generator-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-hash-generator-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+] as const;
+
+export const zuiHashGeneratorHeaderBase =
+  "flex items-center justify-between border-b border-[color:var(--zui-hash-generator-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-hash-generator-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-hash-generator-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-hash-generator-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2";
+
+export const zuiHashGeneratorLabelBase =
+  "text-xs font-medium 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)))]";
+
+export const zuiHashGeneratorInputBase = [
+  "w-full bg-transparent px-4 py-3 text-sm outline-none placeholder:text-[color:var(--zui-hash-generator-placeholder,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:placeholder:text-[color:var(--zui-hash-generator-placeholder-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]",
+  "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--zui-hash-generator-ring-focus,var(--zui-focus-ring,#0000004d))] dark:focus-visible:ring-[var(--zui-hash-generator-ring-focus-dark,var(--zui-focus-ring-dark,#ffffff4d))]",
+] as const;
+
+export const zuiHashGeneratorOutputBase = [
+  "relative border-t border-[color:var(--zui-hash-generator-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-hash-generator-border-dark,var(--zui-border-dark,#ffffff1a))]",
+  "bg-[var(--zui-hash-generator-output-bg,oklch(96.8%_0.007_247.896))] dark:bg-[var(--zui-hash-generator-output-bg-dark,oklch(18.5%_0.037_264.653))]",
+] as const;
+
+export const zuiHashGeneratorOutputTextBase =
+  "font-mono text-xs break-all px-4 py-3 text-[color:var(--zui-hash-generator-output-fg,var(--zui-brand-fg,oklch(44.6%_0.043_257.281)))] dark:text-[color:var(--zui-hash-generator-output-fg-dark,var(--zui-brand-fg-dark,oklch(86.9%_0.022_252.894)))]";
+
+export const zuiHashGeneratorSizes = {
+  sm: "",
+  md: "",
+  lg: "",
+} as const;
+
+export const zuiHashGeneratorAppearances = {
+  default: "",
+} as const;

package/src/design-system/index.ts

@@ -8,6 +8,7 @@ export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./code-diff";
+export * from "./hash-generator";
 export * from "./checkbox";
 export * from "./combobox";
 export * from "./command";

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