@zentauri-ui/zentauri-components 2.3.0 → 2.3.2

package/src/ui/speech-synthesizer/speech-synthesizer-base.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  SpeechSynthesizerBaseProps,
+  SpeechSynthesizerRef,
+  SpeechSynthesizerState,
+} from "./types";
+import {
+  speechSynthesizerBtnActiveClasses,
+  speechSynthesizerBtnVariants,
+  speechSynthesizerControlsClasses,
+  speechSynthesizerProgressBarClasses,
+  speechSynthesizerProgressClasses,
+  speechSynthesizerTextClasses,
+  speechSynthesizerVariants,
+} from "./variants";
+
+function DefaultPlayIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-5">
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
+
+function DefaultPauseIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-5">
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </svg>
+  );
+}
+
+function DefaultStopIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-5">
+      <rect x="6" y="6" width="12" height="12" />
+    </svg>
+  );
+}
+
+export function SpeechSynthesizerBase({
+  appearance,
+  size,
+  text,
+  lang,
+  rate = 1,
+  pitch = 1,
+  volume = 1,
+  autoSpeak = false,
+  onStart,
+  onEnd,
+  onError,
+  onStateChange,
+  renderPlay,
+  renderPause,
+  renderStop,
+  showProgress = false,
+  className,
+  children,
+  ...rest
+}: SpeechSynthesizerBaseProps) {
+  const [state, setState] = useState<SpeechSynthesizerState>("idle");
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+  const stateRef = useRef<SpeechSynthesizerState>("idle");
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const setStateSafe = useCallback(
+    (newState: SpeechSynthesizerState) => {
+      stateRef.current = newState;
+      setState(newState);
+      onStateChange?.(newState);
+    },
+    [onStateChange],
+  );
+
+  const speak = useCallback(() => {
+    if (!text || typeof window === "undefined") return;
+    window.speechSynthesis.cancel();
+
+    const utterance = new SpeechSynthesisUtterance(text);
+    if (lang) utterance.lang = lang;
+    utterance.rate = rate;
+    utterance.pitch = pitch;
+    utterance.volume = volume;
+
+    utterance.onstart = () => {
+      setStateSafe("speaking");
+      onStart?.();
+    };
+    utterance.onend = () => {
+      setStateSafe("idle");
+      onEnd?.();
+    };
+    utterance.onerror = (event) => {
+      setStateSafe("idle");
+      onError?.(event.error);
+    };
+    utterance.onpause = () => setStateSafe("paused");
+    utterance.onresume = () => setStateSafe("speaking");
+
+    utteranceRef.current = utterance;
+    window.speechSynthesis.speak(utterance);
+  }, [text, lang, rate, pitch, volume, onStart, onEnd, onError, setStateSafe]);
+
+  const pause = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.speechSynthesis.pause();
+    }
+  }, []);
+
+  const resume = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.speechSynthesis.resume();
+    }
+  }, []);
+
+  const stop = useCallback(() => {
+    if (typeof window !== "undefined" && window.speechSynthesis) {
+      window.speechSynthesis.cancel();
+    }
+    setStateSafe("idle");
+  }, [setStateSafe]);
+
+  const imperativeHandle: SpeechSynthesizerRef = {
+    speak,
+    pause,
+    resume,
+    stop,
+    get state() {
+      return stateRef.current;
+    },
+  };
+
+  useImperativeHandle((rest as any).ref, () => imperativeHandle, [
+    speak,
+    pause,
+    resume,
+    stop,
+  ]);
+
+  useEffect(() => {
+    if (autoSpeak && text) speak();
+    return () => {
+      if (typeof window !== "undefined" && window.speechSynthesis) {
+        window.speechSynthesis.cancel();
+      }
+    };
+  }, []);
+
+  const isSpeaking = state === "speaking";
+  const isPaused = state === "paused";
+  const showPlay = state === "idle" || state === "paused";
+  const showPause = state === "speaking";
+
+  return (
+    <div
+      ref={localRef}
+      data-slot="speech-synthesizer"
+      className={cn(speechSynthesizerVariants({ size }), className)}
+      {...rest}
+    >
+      {text && (
+        <p
+          data-slot="speech-synthesizer-text"
+          className={speechSynthesizerTextClasses}
+        >
+          {text}
+        </p>
+      )}
+      {showProgress && isSpeaking && (
+        <div
+          data-slot="speech-synthesizer-progress"
+          className={speechSynthesizerProgressClasses}
+        >
+          <div
+            data-slot="speech-synthesizer-progress-bar"
+            className={cn(
+              speechSynthesizerProgressBarClasses,
+              "w-full animate-pulse",
+            )}
+            style={{ width: "100%" }}
+          />
+        </div>
+      )}
+      <div
+        data-slot="speech-synthesizer-controls"
+        className={speechSynthesizerControlsClasses}
+      >
+        {showPlay && (
+          <button
+            type="button"
+            data-slot="speech-synthesizer-play-btn"
+            className={cn(
+              speechSynthesizerBtnVariants({ appearance, size }),
+              isPaused && speechSynthesizerBtnActiveClasses,
+            )}
+            onClick={isPaused ? resume : speak}
+            aria-label={isPaused ? "Resume" : "Play"}
+          >
+            {renderPlay ? (
+              renderPlay({ isSpeaking, isPaused, state })
+            ) : (
+              <DefaultPlayIcon />
+            )}
+          </button>
+        )}
+        {showPause && (
+          <button
+            type="button"
+            data-slot="speech-synthesizer-pause-btn"
+            className={speechSynthesizerBtnVariants({ appearance, size })}
+            onClick={pause}
+            aria-label="Pause"
+          >
+            {renderPause ? (
+              renderPause({ isSpeaking, isPaused, state })
+            ) : (
+              <DefaultPauseIcon />
+            )}
+          </button>
+        )}
+        {(isSpeaking || isPaused) && (
+          <button
+            type="button"
+            data-slot="speech-synthesizer-stop-btn"
+            className={speechSynthesizerBtnVariants({ appearance, size })}
+            onClick={stop}
+            aria-label="Stop"
+          >
+            {renderStop ? (
+              renderStop({ isSpeaking, isPaused, state })
+            ) : (
+              <DefaultStopIcon />
+            )}
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+SpeechSynthesizerBase.displayName = "SpeechSynthesizer";

package/src/ui/speech-synthesizer/speech-synthesizer.test.tsx

@@ -0,0 +1,87 @@
+import { createRef } from "react";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SpeechSynthesizer } from "./speech-synthesizer";
+
+describe("SpeechSynthesizer", () => {
+  it("should set displayName", () => {
+    expect(SpeechSynthesizer.displayName).toBe("SpeechSynthesizer");
+  });
+
+  it("should stamp data-slot on the root container", () => {
+    const { container } = render(<SpeechSynthesizer />);
+    const root = container.querySelector('[data-slot="speech-synthesizer"]');
+    expect(root).toBeTruthy();
+  });
+
+  it("should render a play button when idle", () => {
+    const { container } = render(<SpeechSynthesizer />);
+    const btn = container.querySelector(
+      '[data-slot="speech-synthesizer-play-btn"]',
+    );
+    expect(btn).toBeTruthy();
+  });
+
+  it("should render text when provided", () => {
+    const { container } = render(<SpeechSynthesizer text="Hello world" />);
+    const textEl = container.querySelector(
+      '[data-slot="speech-synthesizer-text"]',
+    );
+    expect(textEl).toBeTruthy();
+    expect(textEl?.textContent).toBe("Hello world");
+  });
+
+  it("should not render text when not provided", () => {
+    const { container } = render(<SpeechSynthesizer />);
+    const textEl = container.querySelector(
+      '[data-slot="speech-synthesizer-text"]',
+    );
+    expect(textEl).toBeFalsy();
+  });
+
+  it("should render children when provided", () => {
+    const { container } = render(
+      <SpeechSynthesizer>
+        <div data-testid="child" />
+      </SpeechSynthesizer>,
+    );
+    expect(container.querySelector('[data-testid="child"]')).toBeTruthy();
+  });
+
+  it("should expose an imperative handle with speak, pause, resume, stop methods", () => {
+    const ref = createRef<{
+      speak: () => void;
+      pause: () => void;
+      resume: () => void;
+      stop: () => void;
+      state: string;
+    }>();
+    render(<SpeechSynthesizer ref={ref as any} />);
+    expect(ref.current).toBeTruthy();
+    expect(typeof ref.current?.speak).toBe("function");
+    expect(typeof ref.current?.pause).toBe("function");
+    expect(typeof ref.current?.resume).toBe("function");
+    expect(typeof ref.current?.stop).toBe("function");
+  });
+
+  it("should set default state to idle", () => {
+    const ref = createRef<{
+      speak: () => void;
+      pause: () => void;
+      resume: () => void;
+      stop: () => void;
+      state: string;
+    }>();
+    render(<SpeechSynthesizer ref={ref as any} />);
+    expect(ref.current?.state).toBe("idle");
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(
+      <SpeechSynthesizer className="custom-class" />,
+    );
+    const root = container.querySelector('[data-slot="speech-synthesizer"]');
+    expect(root?.className).toMatch(/custom-class/);
+  });
+});

package/src/ui/speech-synthesizer/speech-synthesizer.tsx

@@ -0,0 +1 @@
+export { SpeechSynthesizerBase as SpeechSynthesizer } from "./speech-synthesizer-base";

package/src/ui/speech-synthesizer/types.ts

@@ -0,0 +1,57 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, Ref } from "react";
+
+import type {
+  speechSynthesizerBtnVariants,
+  speechSynthesizerVariants,
+} from "./variants";
+
+export type SpeechSynthesizerVariantProps = VariantProps<
+  typeof speechSynthesizerBtnVariants
+>;
+
+export type SpeechSynthesizerState = "idle" | "speaking" | "paused";
+
+export type SpeechSynthesizerBaseProps = VariantProps<
+  typeof speechSynthesizerVariants
+> &
+  VariantProps<typeof speechSynthesizerBtnVariants> &
+  ComponentPropsWithRef<"div"> & {
+    text?: string;
+    lang?: string;
+    rate?: number;
+    pitch?: number;
+    volume?: number;
+    autoSpeak?: boolean;
+    onStart?: () => void;
+    onEnd?: () => void;
+    onError?: (error: string) => void;
+    onStateChange?: (state: SpeechSynthesizerState) => void;
+    renderPlay?: (props: {
+      isSpeaking: boolean;
+      isPaused: boolean;
+      state: SpeechSynthesizerState;
+    }) => React.ReactNode;
+    renderPause?: (props: {
+      isSpeaking: boolean;
+      isPaused: boolean;
+      state: SpeechSynthesizerState;
+    }) => React.ReactNode;
+    renderStop?: (props: {
+      isSpeaking: boolean;
+      isPaused: boolean;
+      state: SpeechSynthesizerState;
+    }) => React.ReactNode;
+    showProgress?: boolean;
+    children?: React.ReactNode;
+  };
+
+export type SpeechSynthesizerProps = SpeechSynthesizerBaseProps;
+
+export type SpeechSynthesizerRef = {
+  speak: () => void;
+  pause: () => void;
+  resume: () => void;
+  stop: () => void;
+  state: SpeechSynthesizerState;
+};

package/src/ui/speech-synthesizer/variants.ts

@@ -0,0 +1,55 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiSpeechSynthesizerAppearances,
+  zuiSpeechSynthesizerBase,
+  zuiSpeechSynthesizerBtnActive,
+  zuiSpeechSynthesizerBtnBase,
+  zuiSpeechSynthesizerBtnSizes,
+  zuiSpeechSynthesizerControlsBase,
+  zuiSpeechSynthesizerProgressBarBase,
+  zuiSpeechSynthesizerProgressBase,
+  zuiSpeechSynthesizerSizes,
+  zuiSpeechSynthesizerTextBase,
+} from "../../design-system/speech-synthesizer";
+
+export const speechSynthesizerVariants = cva(
+  zuiSpeechSynthesizerBase.join(" "),
+  {
+    variants: {
+      size: zuiSpeechSynthesizerSizes,
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+export const speechSynthesizerBtnVariants = cva(
+  zuiSpeechSynthesizerBtnBase.join(" "),
+  {
+    variants: {
+      appearance: zuiSpeechSynthesizerAppearances,
+      size: zuiSpeechSynthesizerBtnSizes,
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+    },
+  },
+);
+
+export const speechSynthesizerTextClasses =
+  zuiSpeechSynthesizerTextBase.join(" ");
+
+export const speechSynthesizerControlsClasses =
+  zuiSpeechSynthesizerControlsBase.join(" ");
+
+export const speechSynthesizerBtnActiveClasses =
+  zuiSpeechSynthesizerBtnActive.join(" ");
+
+export const speechSynthesizerProgressClasses =
+  zuiSpeechSynthesizerProgressBase.join(" ");
+
+export const speechSynthesizerProgressBarClasses =
+  zuiSpeechSynthesizerProgressBarBase.join(" ");

package/dist/chunk-DIAA5VH4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/secret-reveal.ts"],"names":[],"mappings":";AAAO,IAAM,4BAAA,GACX;AAEK,IAAM,wBAAA,GAA2B;AAEjC,IAAM,wBAAA,GAA2B;AAEjC,IAAM,yBAAA,GACX;AAEF,IAAM,iBAAA,GACJ,oLAAA;AAEF,IAAM,yBAAA,GACJ,oLAAA;AAEF,IAAM,yBAAA,GACJ,gMAAA;AAEK,IAAM,0BAAA,GAA6B;AAAA,EACxC,OAAA,EAAS,0YAA0Y,iBAAiB,CAAA,CAAA;AAAA,EACpa,MAAA,EAAQ,6NAA6N,iBAAiB,CAAA,CAAA;AAAA,EACtP,KAAA,EAAO,iNAAiN,yBAAyB,CAAA,CAAA;AAAA,EACjP,OAAA,EAAS,qYAAqY,yBAAyB,CAAA,CAAA;AAAA,EACva,IAAA,EAAM,sTAAsT,iBAAiB,CAAA,CAAA;AAAA,EAC7U,IAAA,EAAM,kTAAkT,iBAAiB,CAAA,CAAA;AAAA,EACzU,KAAA,EAAO,0TAA0T,iBAAiB,CAAA,CAAA;AAAA,EAClV,IAAA,EAAM,oTAAoT,iBAAiB,CAAA,CAAA;AAAA,EAC3U,OAAA,EAAS,0WAA0W,iBAAiB,CAAA,CAAA;AAAA,EACpY,MAAA,EAAQ,sWAAsW,iBAAiB,CAAA,CAAA;AAAA,EAC/X,MAAA,EAAQ,sWAAsW,iBAAiB,CAAA,CAAA;AAAA,EAC/X,IAAA,EAAM,kVAAkV,iBAAiB,CAAA,CAAA;AAAA,EACzW,IAAA,EAAM,sVAAsV,iBAAiB,CAAA,CAAA;AAAA,EAC7W,GAAA,EAAK,kVAAkV,iBAAiB,CAAA,CAAA;AAAA,EACxW,IAAA,EAAM,uVAAuV,iBAAiB,CAAA,CAAA;AAAA,EAC9W,MAAA,EAAQ,iWAAiW,iBAAiB,CAAA,CAAA;AAAA,EAC1X,MAAA,EAAQ,8VAA8V,iBAAiB,CAAA,CAAA;AAAA,EACvX,GAAA,EAAK,4SAA4S,iBAAiB,CAAA,CAAA;AAAA,EAClU,KAAA,EAAO,0TAA0T,iBAAiB,CAAA,CAAA;AAAA,EAClV,IAAA,EAAM,0VAA0V,iBAAiB,CAAA,CAAA;AAAA,EACjX,IAAA,EAAM,oTAAoT,iBAAiB,CAAA,CAAA;AAAA,EAC3U,eAAA,EAAiB,+cAA+c,yBAAyB,CAAA,CAAA;AAAA,EACzf,gBAAA,EAAkB,+cAA+c,yBAAyB,CAAA,CAAA;AAAA,EAC1f,cAAA,EAAgB,+bAA+b,yBAAyB,CAAA,CAAA;AAAA,EACxe,iBAAA,EAAmB,qdAAqd,yBAAyB,CAAA,CAAA;AAAA,EACjgB,iBAAA,EAAmB,mdAAmd,yBAAyB,CAAA,CAAA;AAAA,EAC/f,eAAA,EAAiB,ucAAuc,yBAAyB,CAAA,CAAA;AAAA,EACjf,iBAAA,EAAmB,2dAA2d,yBAAyB,CAAA,CAAA;AAAA,EACvgB,eAAA,EAAiB,qcAAqc,yBAAyB,CAAA,CAAA;AAAA,EAC/e,iBAAA,EAAmB,+cAA+c,yBAAyB,CAAA;AAC7f;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,yBAAA,GAA4B;AAAA,EACvC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,yBAAA,GAA4B;AAAA,EACvC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,0BAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN","file":"chunk-DIAA5VH4.mjs","sourcesContent":["export const zuiSecretRevealContainerBase =\n  \"inline-flex items-center gap-2 rounded-xl border px-3 py-2\";\n\nexport const zuiSecretRevealLabelBase = \"font-medium\";\n\nexport const zuiSecretRevealValueBase = \"font-mono tracking-wider select-all\";\n\nexport const zuiSecretRevealToggleBase =\n  \"inline-flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500\";\n\nconst zuiSecretRevealFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\";\n\nconst zuiSecretRevealInvertedFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-fg,oklch(20.8%_0.042_265.755)))]\";\n\nconst zuiSecretRevealGradientFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-brand-fg,oklch(96.8%_0.007_247.896)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]\";\n\nexport const zuiSecretRevealAppearances = {\n  default: `border-[var(--zui-secret-reveal-default-border,var(--zui-border,oklch(87.5%_0.01_258.338)))] dark:border-[var(--zui-secret-reveal-default-border-dark,var(--zui-border-dark,oklch(27.9%_0.041_260.031)))] bg-[var(--zui-secret-reveal-default-bg,var(--zui-surface,oklch(96.8%_0.003_264.542)))] dark:bg-[var(--zui-secret-reveal-default-bg-dark,var(--zui-surface-dark,oklch(21.6%_0.036_260.031)))] ${zuiSecretRevealFg}`,\n  subtle: `border-transparent bg-[var(--zui-secret-reveal-subtle-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-secret-reveal-subtle-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] ${zuiSecretRevealFg}`,\n  muted: `border-transparent bg-[var(--zui-secret-reveal-muted-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-secret-reveal-muted-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))] ${zuiSecretRevealInvertedFg}`,\n  primary: `border-[var(--zui-secret-reveal-primary-border,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:border-[var(--zui-secret-reveal-primary-border-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))] bg-[var(--zui-secret-reveal-primary-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-secret-reveal-primary-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))] ${zuiSecretRevealInvertedFg}`,\n  blue: `border-[var(--zui-secret-reveal-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[var(--zui-secret-reveal-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-secret-reveal-blue-bg,oklch(93.5%_0.055_262.881))] dark:bg-[var(--zui-secret-reveal-blue-bg-dark,oklch(30.6%_0.126_262.881))] ${zuiSecretRevealFg}`,\n  cyan: `border-[var(--zui-secret-reveal-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[var(--zui-secret-reveal-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-secret-reveal-cyan-bg,oklch(95%_0.025_236.42))] dark:bg-[var(--zui-secret-reveal-cyan-bg-dark,oklch(31.1%_0.085_231.74))] ${zuiSecretRevealFg}`,\n  green: `border-[var(--zui-secret-reveal-green-border,var(--zui-color-green,#16a34a))] dark:border-[var(--zui-secret-reveal-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-secret-reveal-green-bg,oklch(94.2%_0.053_146.17))] dark:bg-[var(--zui-secret-reveal-green-bg-dark,oklch(30.8%_0.085_149.21))] ${zuiSecretRevealFg}`,\n  lime: `border-[var(--zui-secret-reveal-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[var(--zui-secret-reveal-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-secret-reveal-lime-bg,oklch(93.9%_0.077_125.02))] dark:bg-[var(--zui-secret-reveal-lime-bg-dark,oklch(33.1%_0.098_131.68))] ${zuiSecretRevealFg}`,\n  emerald: `border-[var(--zui-secret-reveal-emerald-border,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:border-[var(--zui-secret-reveal-emerald-border-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))] bg-[var(--zui-secret-reveal-emerald-bg,oklch(93.5%_0.062_163.17))] dark:bg-[var(--zui-secret-reveal-emerald-bg-dark,oklch(25.4%_0.065_166.91))] ${zuiSecretRevealFg}`,\n  indigo: `border-[var(--zui-secret-reveal-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[var(--zui-secret-reveal-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-secret-reveal-indigo-bg,oklch(92.8%_0.067_276.37))] dark:bg-[var(--zui-secret-reveal-indigo-bg-dark,oklch(27.5%_0.153_276.97))] ${zuiSecretRevealFg}`,\n  purple: `border-[var(--zui-secret-reveal-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[var(--zui-secret-reveal-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-secret-reveal-purple-bg,oklch(92.4%_0.075_302.32))] dark:bg-[var(--zui-secret-reveal-purple-bg-dark,oklch(27.8%_0.171_302.32))] ${zuiSecretRevealFg}`,\n  pink: `border-[var(--zui-secret-reveal-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[var(--zui-secret-reveal-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-secret-reveal-pink-bg,oklch(93.5%_0.048_3.82))] dark:bg-[var(--zui-secret-reveal-pink-bg-dark,oklch(29.1%_0.134_0.58))] ${zuiSecretRevealFg}`,\n  rose: `border-[var(--zui-secret-reveal-rose-border,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:border-[var(--zui-secret-reveal-rose-border-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))] bg-[var(--zui-secret-reveal-rose-bg,oklch(93.2%_0.065_16.44))] dark:bg-[var(--zui-secret-reveal-rose-bg-dark,oklch(30.2%_0.157_16.94))] ${zuiSecretRevealFg}`,\n  sky: `border-[var(--zui-secret-reveal-sky-border,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:border-[var(--zui-secret-reveal-sky-border-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))] bg-[var(--zui-secret-reveal-sky-bg,oklch(94.5%_0.041_237.32))] dark:bg-[var(--zui-secret-reveal-sky-bg-dark,oklch(29.4%_0.108_242.75))] ${zuiSecretRevealFg}`,\n  teal: `border-[var(--zui-secret-reveal-teal-border,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:border-[var(--zui-secret-reveal-teal-border-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))] bg-[var(--zui-secret-reveal-teal-bg,oklch(94.1%_0.046_182.5))] dark:bg-[var(--zui-secret-reveal-teal-bg-dark,oklch(30.2%_0.075_186.4))] ${zuiSecretRevealFg}`,\n  yellow: `border-[var(--zui-secret-reveal-yellow-border,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:border-[var(--zui-secret-reveal-yellow-border-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))] bg-[var(--zui-secret-reveal-yellow-bg,oklch(94.1%_0.06_86.05))] dark:bg-[var(--zui-secret-reveal-yellow-bg-dark,oklch(31.5%_0.084_61.91))] ${zuiSecretRevealFg}`,\n  orange: `border-[var(--zui-secret-reveal-orange-border,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:border-[var(--zui-secret-reveal-orange-border-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))] bg-[var(--zui-secret-reveal-orange-bg,oklch(93.5%_0.076_47.6))] dark:bg-[var(--zui-secret-reveal-orange-bg-dark,oklch(30.1%_0.129_37.3))] ${zuiSecretRevealFg}`,\n  red: `border-[var(--zui-secret-reveal-red-border,var(--zui-color-red,#dc2626))] dark:border-[var(--zui-secret-reveal-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-secret-reveal-red-bg,oklch(93.9%_0.053_19.85))] dark:bg-[var(--zui-secret-reveal-red-bg-dark,oklch(32.1%_0.111_19.85))] ${zuiSecretRevealFg}`,\n  slate: `border-[var(--zui-secret-reveal-slate-border,var(--zui-color-slate,#475569))] dark:border-[var(--zui-secret-reveal-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-secret-reveal-slate-bg,oklch(92.8%_0.011_262.88))] dark:bg-[var(--zui-secret-reveal-slate-bg-dark,oklch(29.6%_0.036_262.88))] ${zuiSecretRevealFg}`,\n  gray: `border-[var(--zui-secret-reveal-gray-border,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:border-[var(--zui-secret-reveal-gray-border-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))] bg-[var(--zui-secret-reveal-gray-bg,oklch(92.8%_0.007_264.36))] dark:bg-[var(--zui-secret-reveal-gray-bg-dark,oklch(29.4%_0.018_264.36))] ${zuiSecretRevealFg}`,\n  zinc: `border-[var(--zui-secret-reveal-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[var(--zui-secret-reveal-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-secret-reveal-zinc-bg,oklch(92.9%_0.004_262.88))] dark:bg-[var(--zui-secret-reveal-zinc-bg-dark,oklch(29.4%_0.014_262.88))] ${zuiSecretRevealFg}`,\n  \"gradient-blue\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-secret-reveal-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-secret-reveal-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-secret-reveal-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-green\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-secret-reveal-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-secret-reveal-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-secret-reveal-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-red\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-red-from,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:from-[var(--zui-secret-reveal-gradient-red-from-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] to-[var(--zui-secret-reveal-gradient-red-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-secret-reveal-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-yellow\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-yellow-from,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:from-[var(--zui-secret-reveal-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] to-[var(--zui-secret-reveal-gradient-yellow-to,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:to-[var(--zui-secret-reveal-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-purple\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-secret-reveal-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-secret-reveal-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-secret-reveal-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-teal\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-teal-from,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:from-[var(--zui-secret-reveal-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] to-[var(--zui-secret-reveal-gradient-teal-to,var(--zui-color-cyan,oklch(45%_0.085_224.283)))] dark:to-[var(--zui-secret-reveal-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-indigo\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-indigo-from,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:from-[var(--zui-secret-reveal-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] to-[var(--zui-secret-reveal-gradient-indigo-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-secret-reveal-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-pink\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-pink-from,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:from-[var(--zui-secret-reveal-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-secret-reveal-gradient-pink-to,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:to-[var(--zui-secret-reveal-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-orange\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-orange-from,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:from-[var(--zui-secret-reveal-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-secret-reveal-gradient-orange-to,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:to-[var(--zui-secret-reveal-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] ${zuiSecretRevealGradientFg}`,\n} as const;\n\nexport const zuiSecretRevealSizes = {\n  sm: \"gap-1.5 px-2 py-1.5 text-xs\",\n  md: \"gap-2 px-3 py-2 text-sm\",\n  lg: \"gap-2.5 px-4 py-2.5 text-base\",\n} as const;\n\nexport const zuiSecretRevealLabelSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const zuiSecretRevealValueSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const zuiSecretRevealToggleSizes = {\n  sm: \"size-6 [&_svg]:size-3.5\",\n  md: \"size-7 [&_svg]:size-4\",\n  lg: \"size-8 [&_svg]:size-5\",\n} as const;\n"]}

package/dist/chunk-ENKXB2BA.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var chunkYY7G4NV3_js = require('./chunk-YY7G4NV3.js');
-var classVarianceAuthority = require('class-variance-authority');
-
-var buttonVariants = classVarianceAuthority.cva(chunkYY7G4NV3_js.zuiButtonBase, {
-  variants: {
-    appearance: chunkYY7G4NV3_js.zuiButtonAppearances,
-    size: chunkYY7G4NV3_js.zuiButtonSizes
-  },
-  defaultVariants: {
-    appearance: "default",
-    size: "md"
-  }
-});
-
-exports.buttonVariants = buttonVariants;
-//# sourceMappingURL=chunk-ENKXB2BA.js.map
-//# sourceMappingURL=chunk-ENKXB2BA.js.map

package/dist/chunk-H3BJOK22.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/secret-reveal.ts"],"names":[],"mappings":";;;AAAO,IAAM,4BAAA,GACX;AAEK,IAAM,wBAAA,GAA2B;AAEjC,IAAM,wBAAA,GAA2B;AAEjC,IAAM,yBAAA,GACX;AAEF,IAAM,iBAAA,GACJ,oLAAA;AAEF,IAAM,yBAAA,GACJ,oLAAA;AAEF,IAAM,yBAAA,GACJ,gMAAA;AAEK,IAAM,0BAAA,GAA6B;AAAA,EACxC,OAAA,EAAS,0YAA0Y,iBAAiB,CAAA,CAAA;AAAA,EACpa,MAAA,EAAQ,6NAA6N,iBAAiB,CAAA,CAAA;AAAA,EACtP,KAAA,EAAO,iNAAiN,yBAAyB,CAAA,CAAA;AAAA,EACjP,OAAA,EAAS,qYAAqY,yBAAyB,CAAA,CAAA;AAAA,EACva,IAAA,EAAM,sTAAsT,iBAAiB,CAAA,CAAA;AAAA,EAC7U,IAAA,EAAM,kTAAkT,iBAAiB,CAAA,CAAA;AAAA,EACzU,KAAA,EAAO,0TAA0T,iBAAiB,CAAA,CAAA;AAAA,EAClV,IAAA,EAAM,oTAAoT,iBAAiB,CAAA,CAAA;AAAA,EAC3U,OAAA,EAAS,0WAA0W,iBAAiB,CAAA,CAAA;AAAA,EACpY,MAAA,EAAQ,sWAAsW,iBAAiB,CAAA,CAAA;AAAA,EAC/X,MAAA,EAAQ,sWAAsW,iBAAiB,CAAA,CAAA;AAAA,EAC/X,IAAA,EAAM,kVAAkV,iBAAiB,CAAA,CAAA;AAAA,EACzW,IAAA,EAAM,sVAAsV,iBAAiB,CAAA,CAAA;AAAA,EAC7W,GAAA,EAAK,kVAAkV,iBAAiB,CAAA,CAAA;AAAA,EACxW,IAAA,EAAM,uVAAuV,iBAAiB,CAAA,CAAA;AAAA,EAC9W,MAAA,EAAQ,iWAAiW,iBAAiB,CAAA,CAAA;AAAA,EAC1X,MAAA,EAAQ,8VAA8V,iBAAiB,CAAA,CAAA;AAAA,EACvX,GAAA,EAAK,4SAA4S,iBAAiB,CAAA,CAAA;AAAA,EAClU,KAAA,EAAO,0TAA0T,iBAAiB,CAAA,CAAA;AAAA,EAClV,IAAA,EAAM,0VAA0V,iBAAiB,CAAA,CAAA;AAAA,EACjX,IAAA,EAAM,oTAAoT,iBAAiB,CAAA,CAAA;AAAA,EAC3U,eAAA,EAAiB,+cAA+c,yBAAyB,CAAA,CAAA;AAAA,EACzf,gBAAA,EAAkB,+cAA+c,yBAAyB,CAAA,CAAA;AAAA,EAC1f,cAAA,EAAgB,+bAA+b,yBAAyB,CAAA,CAAA;AAAA,EACxe,iBAAA,EAAmB,qdAAqd,yBAAyB,CAAA,CAAA;AAAA,EACjgB,iBAAA,EAAmB,mdAAmd,yBAAyB,CAAA,CAAA;AAAA,EAC/f,eAAA,EAAiB,ucAAuc,yBAAyB,CAAA,CAAA;AAAA,EACjf,iBAAA,EAAmB,2dAA2d,yBAAyB,CAAA,CAAA;AAAA,EACvgB,eAAA,EAAiB,qcAAqc,yBAAyB,CAAA,CAAA;AAAA,EAC/e,iBAAA,EAAmB,+cAA+c,yBAAyB,CAAA;AAC7f;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,yBAAA,GAA4B;AAAA,EACvC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,yBAAA,GAA4B;AAAA,EACvC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,0BAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN","file":"chunk-H3BJOK22.js","sourcesContent":["export const zuiSecretRevealContainerBase =\n  \"inline-flex items-center gap-2 rounded-xl border px-3 py-2\";\n\nexport const zuiSecretRevealLabelBase = \"font-medium\";\n\nexport const zuiSecretRevealValueBase = \"font-mono tracking-wider select-all\";\n\nexport const zuiSecretRevealToggleBase =\n  \"inline-flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500\";\n\nconst zuiSecretRevealFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\";\n\nconst zuiSecretRevealInvertedFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-fg,oklch(20.8%_0.042_265.755)))]\";\n\nconst zuiSecretRevealGradientFg =\n  \"text-[color:var(--zui-secret-reveal-fg,var(--zui-brand-fg,oklch(96.8%_0.007_247.896)))] dark:text-[color:var(--zui-secret-reveal-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]\";\n\nexport const zuiSecretRevealAppearances = {\n  default: `border-[var(--zui-secret-reveal-default-border,var(--zui-border,oklch(87.5%_0.01_258.338)))] dark:border-[var(--zui-secret-reveal-default-border-dark,var(--zui-border-dark,oklch(27.9%_0.041_260.031)))] bg-[var(--zui-secret-reveal-default-bg,var(--zui-surface,oklch(96.8%_0.003_264.542)))] dark:bg-[var(--zui-secret-reveal-default-bg-dark,var(--zui-surface-dark,oklch(21.6%_0.036_260.031)))] ${zuiSecretRevealFg}`,\n  subtle: `border-transparent bg-[var(--zui-secret-reveal-subtle-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-secret-reveal-subtle-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] ${zuiSecretRevealFg}`,\n  muted: `border-transparent bg-[var(--zui-secret-reveal-muted-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-secret-reveal-muted-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))] ${zuiSecretRevealInvertedFg}`,\n  primary: `border-[var(--zui-secret-reveal-primary-border,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:border-[var(--zui-secret-reveal-primary-border-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))] bg-[var(--zui-secret-reveal-primary-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-secret-reveal-primary-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))] ${zuiSecretRevealInvertedFg}`,\n  blue: `border-[var(--zui-secret-reveal-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[var(--zui-secret-reveal-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-secret-reveal-blue-bg,oklch(93.5%_0.055_262.881))] dark:bg-[var(--zui-secret-reveal-blue-bg-dark,oklch(30.6%_0.126_262.881))] ${zuiSecretRevealFg}`,\n  cyan: `border-[var(--zui-secret-reveal-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[var(--zui-secret-reveal-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-secret-reveal-cyan-bg,oklch(95%_0.025_236.42))] dark:bg-[var(--zui-secret-reveal-cyan-bg-dark,oklch(31.1%_0.085_231.74))] ${zuiSecretRevealFg}`,\n  green: `border-[var(--zui-secret-reveal-green-border,var(--zui-color-green,#16a34a))] dark:border-[var(--zui-secret-reveal-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-secret-reveal-green-bg,oklch(94.2%_0.053_146.17))] dark:bg-[var(--zui-secret-reveal-green-bg-dark,oklch(30.8%_0.085_149.21))] ${zuiSecretRevealFg}`,\n  lime: `border-[var(--zui-secret-reveal-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[var(--zui-secret-reveal-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-secret-reveal-lime-bg,oklch(93.9%_0.077_125.02))] dark:bg-[var(--zui-secret-reveal-lime-bg-dark,oklch(33.1%_0.098_131.68))] ${zuiSecretRevealFg}`,\n  emerald: `border-[var(--zui-secret-reveal-emerald-border,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:border-[var(--zui-secret-reveal-emerald-border-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))] bg-[var(--zui-secret-reveal-emerald-bg,oklch(93.5%_0.062_163.17))] dark:bg-[var(--zui-secret-reveal-emerald-bg-dark,oklch(25.4%_0.065_166.91))] ${zuiSecretRevealFg}`,\n  indigo: `border-[var(--zui-secret-reveal-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[var(--zui-secret-reveal-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-secret-reveal-indigo-bg,oklch(92.8%_0.067_276.37))] dark:bg-[var(--zui-secret-reveal-indigo-bg-dark,oklch(27.5%_0.153_276.97))] ${zuiSecretRevealFg}`,\n  purple: `border-[var(--zui-secret-reveal-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[var(--zui-secret-reveal-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-secret-reveal-purple-bg,oklch(92.4%_0.075_302.32))] dark:bg-[var(--zui-secret-reveal-purple-bg-dark,oklch(27.8%_0.171_302.32))] ${zuiSecretRevealFg}`,\n  pink: `border-[var(--zui-secret-reveal-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[var(--zui-secret-reveal-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-secret-reveal-pink-bg,oklch(93.5%_0.048_3.82))] dark:bg-[var(--zui-secret-reveal-pink-bg-dark,oklch(29.1%_0.134_0.58))] ${zuiSecretRevealFg}`,\n  rose: `border-[var(--zui-secret-reveal-rose-border,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:border-[var(--zui-secret-reveal-rose-border-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))] bg-[var(--zui-secret-reveal-rose-bg,oklch(93.2%_0.065_16.44))] dark:bg-[var(--zui-secret-reveal-rose-bg-dark,oklch(30.2%_0.157_16.94))] ${zuiSecretRevealFg}`,\n  sky: `border-[var(--zui-secret-reveal-sky-border,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:border-[var(--zui-secret-reveal-sky-border-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))] bg-[var(--zui-secret-reveal-sky-bg,oklch(94.5%_0.041_237.32))] dark:bg-[var(--zui-secret-reveal-sky-bg-dark,oklch(29.4%_0.108_242.75))] ${zuiSecretRevealFg}`,\n  teal: `border-[var(--zui-secret-reveal-teal-border,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:border-[var(--zui-secret-reveal-teal-border-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))] bg-[var(--zui-secret-reveal-teal-bg,oklch(94.1%_0.046_182.5))] dark:bg-[var(--zui-secret-reveal-teal-bg-dark,oklch(30.2%_0.075_186.4))] ${zuiSecretRevealFg}`,\n  yellow: `border-[var(--zui-secret-reveal-yellow-border,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:border-[var(--zui-secret-reveal-yellow-border-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))] bg-[var(--zui-secret-reveal-yellow-bg,oklch(94.1%_0.06_86.05))] dark:bg-[var(--zui-secret-reveal-yellow-bg-dark,oklch(31.5%_0.084_61.91))] ${zuiSecretRevealFg}`,\n  orange: `border-[var(--zui-secret-reveal-orange-border,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:border-[var(--zui-secret-reveal-orange-border-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))] bg-[var(--zui-secret-reveal-orange-bg,oklch(93.5%_0.076_47.6))] dark:bg-[var(--zui-secret-reveal-orange-bg-dark,oklch(30.1%_0.129_37.3))] ${zuiSecretRevealFg}`,\n  red: `border-[var(--zui-secret-reveal-red-border,var(--zui-color-red,#dc2626))] dark:border-[var(--zui-secret-reveal-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-secret-reveal-red-bg,oklch(93.9%_0.053_19.85))] dark:bg-[var(--zui-secret-reveal-red-bg-dark,oklch(32.1%_0.111_19.85))] ${zuiSecretRevealFg}`,\n  slate: `border-[var(--zui-secret-reveal-slate-border,var(--zui-color-slate,#475569))] dark:border-[var(--zui-secret-reveal-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-secret-reveal-slate-bg,oklch(92.8%_0.011_262.88))] dark:bg-[var(--zui-secret-reveal-slate-bg-dark,oklch(29.6%_0.036_262.88))] ${zuiSecretRevealFg}`,\n  gray: `border-[var(--zui-secret-reveal-gray-border,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:border-[var(--zui-secret-reveal-gray-border-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))] bg-[var(--zui-secret-reveal-gray-bg,oklch(92.8%_0.007_264.36))] dark:bg-[var(--zui-secret-reveal-gray-bg-dark,oklch(29.4%_0.018_264.36))] ${zuiSecretRevealFg}`,\n  zinc: `border-[var(--zui-secret-reveal-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[var(--zui-secret-reveal-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-secret-reveal-zinc-bg,oklch(92.9%_0.004_262.88))] dark:bg-[var(--zui-secret-reveal-zinc-bg-dark,oklch(29.4%_0.014_262.88))] ${zuiSecretRevealFg}`,\n  \"gradient-blue\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-secret-reveal-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-secret-reveal-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-secret-reveal-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-green\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-secret-reveal-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-secret-reveal-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-secret-reveal-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-red\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-red-from,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:from-[var(--zui-secret-reveal-gradient-red-from-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] to-[var(--zui-secret-reveal-gradient-red-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-secret-reveal-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-yellow\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-yellow-from,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:from-[var(--zui-secret-reveal-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] to-[var(--zui-secret-reveal-gradient-yellow-to,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:to-[var(--zui-secret-reveal-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-purple\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-secret-reveal-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-secret-reveal-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-secret-reveal-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-teal\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-teal-from,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:from-[var(--zui-secret-reveal-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] to-[var(--zui-secret-reveal-gradient-teal-to,var(--zui-color-cyan,oklch(45%_0.085_224.283)))] dark:to-[var(--zui-secret-reveal-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-indigo\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-indigo-from,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:from-[var(--zui-secret-reveal-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] to-[var(--zui-secret-reveal-gradient-indigo-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-secret-reveal-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-pink\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-pink-from,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:from-[var(--zui-secret-reveal-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-secret-reveal-gradient-pink-to,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:to-[var(--zui-secret-reveal-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] ${zuiSecretRevealGradientFg}`,\n  \"gradient-orange\": `border-transparent bg-linear-to-r from-[var(--zui-secret-reveal-gradient-orange-from,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:from-[var(--zui-secret-reveal-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-secret-reveal-gradient-orange-to,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:to-[var(--zui-secret-reveal-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] ${zuiSecretRevealGradientFg}`,\n} as const;\n\nexport const zuiSecretRevealSizes = {\n  sm: \"gap-1.5 px-2 py-1.5 text-xs\",\n  md: \"gap-2 px-3 py-2 text-sm\",\n  lg: \"gap-2.5 px-4 py-2.5 text-base\",\n} as const;\n\nexport const zuiSecretRevealLabelSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const zuiSecretRevealValueSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const zuiSecretRevealToggleSizes = {\n  sm: \"size-6 [&_svg]:size-3.5\",\n  md: \"size-7 [&_svg]:size-4\",\n  lg: \"size-8 [&_svg]:size-5\",\n} as const;\n"]}