@zentauri-ui/zentauri-components 2.3.0 → 2.3.2

package/src/design-system/speech-recognition.ts

@@ -0,0 +1,82 @@
+export const zuiSpeechRecognitionAppearances = {
+  default:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-default-btn-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-default-btn-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  subtle:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-subtle-btn-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-subtle-btn-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
+  muted:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-muted-btn-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-muted-btn-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
+  primary:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-primary-btn-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-primary-btn-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+  blue: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-blue-btn-bg,var(--zui-color-blue,#2563eb))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-blue-btn-bg-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-cyan-btn-bg,var(--zui-color-cyan,#0891b2))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-cyan-btn-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-green-btn-bg,var(--zui-color-green,#16a34a))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-green-btn-bg-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-lime-btn-bg,var(--zui-color-lime,#65a30d))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-lime-btn-bg-dark,var(--zui-color-lime-dark,#a3e635))]",
+  emerald:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-emerald-btn-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-emerald-btn-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]",
+  indigo:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-indigo-btn-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-indigo-btn-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
+  purple:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-purple-btn-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-purple-btn-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
+  pink: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-pink-btn-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-pink-btn-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
+  rose: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-rose-btn-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-rose-btn-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]",
+  sky: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-sky-btn-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-sky-btn-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]",
+  teal: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-teal-btn-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-teal-btn-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]",
+  yellow:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-yellow-btn-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-yellow-btn-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]",
+  orange:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-orange-btn-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-orange-btn-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]",
+  red: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-red-btn-bg,var(--zui-color-red,#dc2626))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-red-btn-bg-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate:
+    "[--zui-recognition-btn-bg:var(--zui-speech-recognition-slate-btn-bg,var(--zui-color-slate,#475569))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-slate-btn-bg-dark,var(--zui-color-slate-dark,#64748b))]",
+  gray: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-gray-btn-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-gray-btn-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]",
+  zinc: "[--zui-recognition-btn-bg:var(--zui-speech-recognition-zinc-btn-bg,var(--zui-color-zinc,#52525b))] dark:[--zui-recognition-btn-bg:var(--zui-speech-recognition-zinc-btn-bg-dark,var(--zui-color-zinc-dark,#71717a))]",
+} as const;
+
+export const zuiSpeechRecognitionBase = [
+  "inline-flex flex-col gap-2",
+  "rounded-[var(--zui-speech-recognition-radius,var(--zui-radius,0.75rem))]",
+  "bg-[var(--zui-speech-recognition-bg,var(--zui-surface,#ffffff))] dark:bg-[var(--zui-speech-recognition-bg-dark,var(--zui-surface-dark,#0f172a))]",
+  "border border-[var(--zui-speech-recognition-border,var(--zui-border,#e2e8f0))] dark:border-[var(--zui-speech-recognition-border-dark,var(--zui-border-dark,#1e293b))]",
+  "p-4",
+] as const;
+
+export const zuiSpeechRecognitionStatusBase = [
+  "text-[color:var(--zui-speech-recognition-status-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:text-[color:var(--zui-speech-recognition-status-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
+  "text-xs",
+  "transition-opacity",
+] as const;
+
+export const zuiSpeechRecognitionTranscriptBase = [
+  "text-[color:var(--zui-speech-recognition-transcript-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-speech-recognition-transcript-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+  "text-sm",
+  "min-h-[1.25rem]",
+  "leading-relaxed",
+] as const;
+
+export const zuiSpeechRecognitionSizes = {
+  sm: "gap-1.5 p-3",
+  md: "gap-2 p-4",
+  lg: "gap-3 p-5",
+} as const;
+
+export const zuiSpeechRecognitionBtnBase = [
+  "inline-flex items-center justify-center rounded-full",
+  "size-10",
+  "transition-all duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "bg-[var(--zui-recognition-btn-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-recognition-btn-bg,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  "text-[color:var(--zui-speech-recognition-btn-fg,var(--zui-bg,#ffffff))] dark:text-[color:var(--zui-speech-recognition-btn-fg-dark,var(--zui-bg-dark,#0f172a))]",
+] as const;
+
+export const zuiSpeechRecognitionBtnSizes = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+} as const;
+
+export const zuiSpeechRecognitionBtnActive = [
+  "ring-2 ring-[var(--zui-speech-recognition-active-ring,var(--zui-status-error,#dc2626))] dark:ring-[var(--zui-speech-recognition-active-ring-dark,var(--zui-status-error-dark,#ef4444))]",
+  "ring-offset-2",
+  "animate-pulse",
+] as const;

package/src/design-system/speech-synthesizer.ts

@@ -0,0 +1,90 @@
+export const zuiSpeechSynthesizerAppearances = {
+  default:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-default-btn-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-default-btn-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  subtle:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-subtle-btn-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-subtle-btn-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
+  muted:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-muted-btn-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-muted-btn-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
+  primary:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-primary-btn-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-primary-btn-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+  blue: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-blue-btn-bg,var(--zui-color-blue,#2563eb))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-blue-btn-bg-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-cyan-btn-bg,var(--zui-color-cyan,#0891b2))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-cyan-btn-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-green-btn-bg,var(--zui-color-green,#16a34a))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-green-btn-bg-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-lime-btn-bg,var(--zui-color-lime,#65a30d))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-lime-btn-bg-dark,var(--zui-color-lime-dark,#a3e635))]",
+  emerald:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-emerald-btn-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-emerald-btn-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]",
+  indigo:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-indigo-btn-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-indigo-btn-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
+  purple:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-purple-btn-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-purple-btn-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
+  pink: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-pink-btn-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-pink-btn-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
+  rose: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-rose-btn-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-rose-btn-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]",
+  sky: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-sky-btn-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-sky-btn-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]",
+  teal: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-teal-btn-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-teal-btn-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]",
+  yellow:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-yellow-btn-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-yellow-btn-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]",
+  orange:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-orange-btn-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-orange-btn-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]",
+  red: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-red-btn-bg,var(--zui-color-red,#dc2626))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-red-btn-bg-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate:
+    "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-slate-btn-bg,var(--zui-color-slate,#475569))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-slate-btn-bg-dark,var(--zui-color-slate-dark,#64748b))]",
+  gray: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-gray-btn-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-gray-btn-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]",
+  zinc: "[--zui-synth-btn-bg:var(--zui-speech-synthesizer-zinc-btn-bg,var(--zui-color-zinc,#52525b))] dark:[--zui-synth-btn-bg:var(--zui-speech-synthesizer-zinc-btn-bg-dark,var(--zui-color-zinc-dark,#71717a))]",
+} as const;
+
+export const zuiSpeechSynthesizerBase = [
+  "inline-flex flex-col gap-3",
+  "rounded-[var(--zui-speech-synthesizer-radius,var(--zui-radius,0.75rem))]",
+  "bg-[var(--zui-speech-synthesizer-bg,var(--zui-surface,#ffffff))] dark:bg-[var(--zui-speech-synthesizer-bg-dark,var(--zui-surface-dark,#0f172a))]",
+  "border border-[var(--zui-speech-synthesizer-border,var(--zui-border,#e2e8f0))] dark:border-[var(--zui-speech-synthesizer-border-dark,var(--zui-border-dark,#1e293b))]",
+  "p-4",
+] as const;
+
+export const zuiSpeechSynthesizerSizes = {
+  sm: "gap-2 p-3",
+  md: "gap-3 p-4",
+  lg: "gap-4 p-5",
+} as const;
+
+export const zuiSpeechSynthesizerBtnBase = [
+  "inline-flex items-center justify-center rounded-full",
+  "size-10",
+  "transition-all duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "bg-[var(--zui-synth-btn-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-synth-btn-bg,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  "text-[color:var(--zui-speech-synthesizer-btn-fg,var(--zui-bg,#ffffff))] dark:text-[color:var(--zui-speech-synthesizer-btn-fg-dark,var(--zui-bg-dark,#0f172a))]",
+] as const;
+
+export const zuiSpeechSynthesizerBtnSizes = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+} as const;
+
+export const zuiSpeechSynthesizerBtnActive = [
+  "ring-2 ring-[var(--zui-speech-synthesizer-active-ring,var(--zui-color-green,#16a34a))] dark:ring-[var(--zui-speech-synthesizer-active-ring-dark,var(--zui-color-green-dark,#22c55e))]",
+  "ring-offset-2",
+  "animate-pulse",
+] as const;
+
+export const zuiSpeechSynthesizerTextBase = [
+  "text-[color:var(--zui-speech-synthesizer-text-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-speech-synthesizer-text-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+  "text-sm",
+  "leading-relaxed",
+] as const;
+
+export const zuiSpeechSynthesizerControlsBase = [
+  "inline-flex items-center gap-2",
+] as const;
+
+export const zuiSpeechSynthesizerProgressBase = [
+  "relative w-full h-1 overflow-hidden rounded-full",
+  "bg-[var(--zui-speech-synthesizer-track-bg,var(--zui-surface-muted,#0000001a))] dark:bg-[var(--zui-speech-synthesizer-track-bg-dark,var(--zui-surface-muted-dark,#ffffff1a))]",
+] as const;
+
+export const zuiSpeechSynthesizerProgressBarBase = [
+  "h-full rounded-full",
+  "bg-[var(--zui-synth-btn-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-synth-btn-bg,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
+  "transition-all duration-300",
+] as const;

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";

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

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import QRCode from "qrcode";
+
+import { cn } from "../../lib/utils";
+
+import type { QrCodeBaseProps } from "./types";
+import {
+  qrCodeCanvasWrapperVariants,
+  qrCodeCaptionVariants,
+  qrCodeVariants,
+} from "./variants";
+
+/**
+ * QrCodeBase renders a QR code onto a `<canvas>` element using the `qrcode`
+ * npm package. It is the static (non-animated) implementation of the public
+ * `QrCode` component.
+ *
+ * --- Props ---
+ *
+ * - `value` — The string to encode. When empty/falsy the canvas is cleared.
+ * - `canvasSize` — Pixel dimensions of the canvas (default: 200). Both width
+ *   and height are set to this value, producing a square QR code.
+ * - `level` — Error correction level (`"L"` | `"M"` | `"Q"` | `"H"`). Higher
+ *   levels survive more visual damage but hold less data.
+ * - `bgColor` / `fgColor` — Background and foreground colours passed to the
+ *   underlying `QRCode.toCanvas` options.
+ * - `margin` — Quiet-zone width in QR modules (default: 2). Passed directly
+ *   to the `qrcode` library.
+ * - `caption` — Optional label rendered below the QR code.
+ * - `ref` — React 19 ref forwarded to the root `<div>` element.
+ * - `className` / `...rest` — Spread onto the root `<div>` for layout or
+ *   style overrides.
+ *
+ * --- Rendering lifecycle ---
+ *
+ * A `useEffect` watches `[value, canvasSize, level, bgColor, fgColor, margin]`.
+ * On every change it:
+ *   1. Grabs the canvas element from the ref.
+ *   2. If `value` is empty, clears the canvas with `ctx.clearRect` so a stale
+ *      QR code doesn't persist.
+ *   3. Otherwise calls `QRCode.toCanvas()` which draws the QR pattern
+ *       asynchronously (via callback) onto the canvas element.
+ *
+ * The outer `<div>` uses design-system variants (`qrCodeVariants`) for
+ * consistent theming and carries `data-slot="qr-code"` for scoped styling and
+ * testing.
+ *
+ * --- Accessibility ---
+ *
+ * The `<canvas>` has an `aria-label` describing it as a "QR code for {value}".
+ * Screen readers will announce the purpose, though the raw value is exposed
+ * (consider truncating for secrets).
+ */
+export function QrCodeBase({
+  value,
+  canvasSize = 200,
+  level = "M",
+  bgColor = "#ffffff",
+  fgColor = "#000000",
+  margin = 2,
+  caption,
+  className,
+  ref,
+  ...rest
+}: QrCodeBaseProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  /**
+   * Draw the QR pattern whenever input props change.
+   *
+   * The conditional `if (!value)` branch handles the "clear" case: when the
+   * user deletes the input text, we clear the canvas so a stale QR code isn't
+   * displayed. Without this the old QR pattern persists because
+   * `QRCode.toCanvas` is never called (it returns early for empty values).
+   */
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) 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]);
+
+  /**
+   * The root element is a `<div>` (not the `<canvas>`) so consumers can apply
+   * layout classes, the caption sits outside the canvas, and the component
+   * plays well with flex/grid containers.
+   *
+   * Nested structure:
+   *   <div data-slot="qr-code">          ← root (ref, className, ...rest)
+   *     <div>                            ← canvas wrapper (theme rounding/overflow)
+   *       <canvas data-slot="qr-code-canvas" />
+   *     </div>
+   *     {caption && <span data-slot="qr-code-caption" />}
+   *   </div>
+   */
+  return (
+    <div
+      ref={ref}
+      data-slot="qr-code"
+      className={cn(qrCodeVariants(), className)}
+      {...rest}
+    >
+      <div className={qrCodeCanvasWrapperVariants()}>
+        <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={qrCodeCaptionVariants()}>
+          {caption}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+QrCodeBase.displayName = "QrCode";

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

@@ -0,0 +1,58 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { QrCode } from "./qr-code";
+
+vi.mock("qrcode", () => ({
+  default: {
+    toCanvas: vi.fn(
+      (
+        _canvas: HTMLCanvasElement,
+        _value: string,
+        _opts: unknown,
+        cb?: (err?: Error) => void,
+      ) => {
+        cb?.();
+      },
+    ),
+  },
+}));
+
+describe("QrCode", () => {
+  it("should expose displayName", () => {
+    expect(QrCode.displayName).toBe("QrCode");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<QrCode value="https://example.com" />);
+    const root = document.querySelector('[data-slot="qr-code"]');
+    expect(root).toBeTruthy();
+    expect(root?.getAttribute("data-slot")).toBe("qr-code");
+  });
+
+  it("should render canvas element", () => {
+    render(<QrCode value="https://example.com" />);
+    const canvas = document.querySelector('[data-slot="qr-code-canvas"]');
+    expect(canvas).toBeTruthy();
+  });
+
+  it("should render with caption", () => {
+    render(<QrCode value="test" caption="Scan me" />);
+    expect(screen.getByText("Scan me")).toBeInTheDocument();
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<QrCode value="test" ref={ref} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("qr-code");
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(
+      <QrCode value="test" className="custom-class" />,
+    );
+    const root = container.querySelector('[data-slot="qr-code"]');
+    expect(root?.className).toMatch(/custom-class/);
+  });
+});

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

@@ -0,0 +1,2 @@
+// qr-code.tsx — default static entry (no framer-motion)
+export { QrCodeBase as QrCode } from "./qr-code-base";

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

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+export type QrCodeLevel = "L" | "M" | "Q" | "H";
+
+export interface QrCodeBaseProps extends ComponentPropsWithRef<"div"> {
+  value: string;
+  canvasSize?: number;
+  level?: QrCodeLevel;
+  bgColor?: string;
+  fgColor?: string;
+  margin?: number;
+  caption?: ReactNode;
+}
+
+export type QrCodeProps = QrCodeBaseProps;
+
+export const QR_CODE_LEVEL_LABELS: Record<QrCodeLevel, string> = {
+  L: "Low (7%)",
+  M: "Medium (15%)",
+  Q: "Quartile (25%)",
+  H: "High (30%)",
+} as const;

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

@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiQrCodeBase,
+  zuiQrCodeCanvasWrapper,
+  zuiQrCodeCaptionBase,
+} from "../../design-system/qr-code";
+
+export const qrCodeVariants = cva(zuiQrCodeBase);
+export const qrCodeCanvasWrapperVariants = cva(zuiQrCodeCanvasWrapper);
+export const qrCodeCaptionVariants = cva(zuiQrCodeCaptionBase);

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

@@ -0,0 +1,17 @@
+"use client";
+
+export { QrScanner } from "./qr-scanner";
+export type {
+  QrScannerBaseProps,
+  QrScannerProps,
+  QrScannerRef,
+  QrScannerVariantProps,
+} from "./types";
+export {
+  qrScannerFallbackVariants,
+  qrScannerOverlayVariants,
+  qrScannerStatusVariants,
+  qrScannerVariants,
+  qrScannerVideoVariants,
+  qrScannerViewfinderVariants,
+} from "./variants";