@zmzai/theme 0.1.0

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { type ReactNode } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+export interface DialogContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * DialogContent — animated modal content (Radix + framer-motion spring).
+ *
+ * Uses Radix for focus trap / escape / portal, framer-motion for
+ * scale+fade spring animation on open/close.
+ *
+ * @example
+ * <Dialog>
+ *   <DialogTrigger asChild><Button>打开</Button></DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>确认操作</DialogTitle>
+ *       <DialogDescription>此操作不可撤销。</DialogDescription>
+ *     </DialogHeader>
+ *     <p>内容…</p>
+ *     <DialogFooter>
+ *       <DialogClose asChild><Button variant="secondary">取消</Button></DialogClose>
+ *       <DialogClose asChild><Button>确认</Button></DialogClose>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ */
+export function DialogContent({ children, className }: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay asChild>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+        />
+      </DialogPrimitive.Overlay>
+      <DialogPrimitive.Content asChild>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 10 }}
+          transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          className={cn(
+            "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
+            "rounded-xl border border-line bg-bg p-6 shadow-xl",
+            className
+          )}
+        >
+          {children}
+        </motion.div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+export function DialogHeader({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("mb-4 flex flex-col gap-1", className)}>{children}</div>;
+}
+
+export function DialogFooter({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("mt-6 flex justify-end gap-2", className)}>{children}</div>;
+}
+
+export const DialogTitle = DialogPrimitive.Title;
+export const DialogDescription = DialogPrimitive.Description;
+export const DialogClose = DialogPrimitive.Close;

package/src/components/dialog/index.ts

@@ -0,0 +1,10 @@
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "./Dialog";

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { type ReactNode } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+export function DropdownMenuContent({
+  children,
+  className,
+  align = "start",
+  sideOffset = 4,
+}: {
+  children: ReactNode;
+  className?: string;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[10rem] overflow-hidden rounded-lg border border-line bg-bg p-1 shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+export function DropdownMenuItem({
+  children,
+  className,
+  onSelect,
+  destructive,
+}: {
+  children: ReactNode;
+  className?: string;
+  onSelect?: () => void;
+  destructive?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      onSelect={onSelect}
+      className={cn(
+        "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-colors",
+        "focus:bg-surface-2 focus:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        destructive ? "text-danger focus:bg-danger/10" : "text-ink-2",
+        className
+      )}
+    >
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+export function DropdownMenuSeparator({ className }: { className?: string }) {
+  return <div className={cn("my-1 h-px bg-line", className)} />;
+}
+
+export function DropdownMenuLabel({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={cn("px-2.5 py-1.5 text-xs font-semibold text-ink-3", className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,8 @@
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "./DropdownMenu";

package/src/components/empty-state/EmptyState.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface EmptyStateProps {
+  /** Optional icon/illustration node (default: a muted dot grid) */
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  /** Optional call-to-action node (button, link, etc.) */
+  action?: ReactNode;
+  className?: string;
+}
+
+const defaultIcon = (
+  <svg
+    viewBox="0 0 64 64"
+    fill="none"
+    className="h-12 w-12 text-ink-3"
+    aria-hidden
+  >
+    <circle cx="32" cy="32" r="28" stroke="currentColor" strokeWidth="2" />
+    <path
+      d="M22 34c2.5 3 5.5 4.5 10 4.5S39.5 37 42 34"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <circle cx="24" cy="26" r="2" fill="currentColor" />
+    <circle cx="40" cy="26" r="2" fill="currentColor" />
+  </svg>
+);
+
+/**
+ * EmptyState — a designed, centered empty placeholder.
+ *
+ * Icon + title + description + optional CTA, with generous padding and
+ * muted colors. Fades/slides in on mount via framer-motion.
+ *
+ * @example
+ * <EmptyState
+ *   title="暂无数据"
+ *   description="创建第一条记录后将会显示在这里"
+ *   action={<Button>新建</Button>}
+ * />
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+      className={cn(
+        "flex w-full flex-col items-center justify-center px-6 py-16 text-center",
+        className
+      )}
+    >
+      <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-2">
+        {icon ?? defaultIcon}
+      </div>
+      <h3 className="text-base font-semibold text-ink">{title}</h3>
+      {description && (
+        <p className="mt-2 max-w-sm text-sm leading-relaxed text-ink-2">
+          {description}
+        </p>
+      )}
+      {action && <div className="mt-6">{action}</div>}
+    </motion.div>
+  );
+}

package/src/components/empty-state/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps } from "./EmptyState";

package/src/components/encrypt-text/EncryptText.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type HTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface EncryptTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The final decrypted text */
+  text: string;
+  /** Total decrypt duration in seconds */
+  duration?: number;
+  /** When to trigger the effect */
+  trigger?: "mount" | "hover";
+}
+
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
+
+function randomChar(): string {
+  return CHARS[Math.floor(Math.random() * CHARS.length)];
+}
+
+/**
+ * EncryptText — text that starts scrambled and "decrypts" to the real text.
+ *
+ * Uses requestAnimationFrame to cycle random characters, then settles each
+ * character to its real value progressively over `duration`.
+ *
+ * - `trigger="mount"` (default): decrypts on mount
+ * - `trigger="hover"`: waits until hovered, then decrypts
+ *
+ * @example
+ * <EncryptText text="ACCESS_GRANTED" duration={2} />
+ * <EncryptText text="Hover me" trigger="hover" />
+ */
+export function EncryptText({
+  text,
+  duration = 2,
+  trigger = "mount",
+  className,
+  ...props
+}: EncryptTextProps) {
+  const [display, setDisplay] = useState(
+    trigger === "mount" ? text : text
+  );
+  const [active, setActive] = useState(trigger === "mount");
+  const rafRef = useRef<number | null>(null);
+
+  const run = useCallback(() => {
+    const totalChars = text.length;
+    const startTime = performance.now();
+    const totalMs = duration * 1000;
+
+    const tick = (now: number) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / totalMs, 1);
+      const revealedCount = Math.floor(progress * totalChars);
+
+      let out = "";
+      for (let i = 0; i < totalChars; i++) {
+        const ch = text[i];
+        if (ch === " ") {
+          out += " ";
+        } else if (i < revealedCount) {
+          out += ch;
+        } else {
+          out += randomChar();
+        }
+      }
+      setDisplay(out);
+
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(tick);
+      } else {
+        setDisplay(text);
+        rafRef.current = null;
+      }
+    };
+
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(tick);
+  }, [text, duration]);
+
+  useEffect(() => {
+    if (active) run();
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [active, run]);
+
+  const handleMouseEnter = () => {
+    if (trigger === "hover" && !active) setActive(true);
+  };
+
+  return (
+    <span
+      className={cn("font-mono", trigger === "hover" && "cursor-pointer", className)}
+      onMouseEnter={handleMouseEnter}
+      {...props}
+    >
+      {display}
+    </span>
+  );
+}

package/src/components/encrypt-text/index.ts

@@ -0,0 +1,2 @@
+export { EncryptText } from "./EncryptText";
+export type { EncryptTextProps } from "./EncryptText";

package/src/components/evervault-card/EvervaultCard.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface EvervaultCardProps {
+  children: ReactNode;
+  className?: string;
+  /** Text shown scrambled as random chars until hovered (default "ENCRYPTED") */
+  encryptedText?: string;
+}
+
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*";
+
+/**
+ * EvervaultCard — a dark "encrypted" card whose label shows random chars
+ * that resolve into the real text on hover.
+ *
+ * On mount the label scrambles through random characters. When hovered, the
+ * scramble resolves character-by-character into `encryptedText` (kept even
+ * when not hovered, so the label is meaningful — the scramble is the
+ * effect). Children are revealed/focused on hover.
+ *
+ * @example
+ * <EvervaultCard encryptedText="DECRYPTED">
+ *   <div className="text-white">隐藏内容</div>
+ * </EvervaultCard>
+ */
+export function EvervaultCard({
+  children,
+  className,
+  encryptedText = "ENCRYPTED",
+}: EvervaultCardProps) {
+  const [hovered, setHovered] = useState(false);
+  const [display, setDisplay] = useState(() => scramble(encryptedText.length));
+  const frame = useRef<number | null>(null);
+
+  useEffect(() => {
+    function tick(progress: number) {
+      const revealed = Math.floor(progress * encryptedText.length);
+      const next = encryptedText
+        .split("")
+        .map((ch, i) => {
+          if (ch === " ") return " ";
+          return i < revealed ? ch : randomChar();
+        })
+        .join("");
+      setDisplay(next);
+    }
+
+    if (hovered) {
+      // Resolve: animate reveal from 0 → 1 over ~600ms
+      cancelAnimationFrame(frame.current ?? 0);
+      const start = performance.now();
+      const duration = 600;
+      const step = (now: number) => {
+        const p = Math.min((now - start) / duration, 1);
+        tick(p);
+        if (p < 1) frame.current = requestAnimationFrame(step);
+      };
+      frame.current = requestAnimationFrame(step);
+    } else {
+      // Scramble: keep cycling random chars
+      cancelAnimationFrame(frame.current ?? 0);
+      const interval = setInterval(() => {
+        setDisplay(scramble(encryptedText.length));
+      }, 60);
+      return () => clearInterval(interval);
+    }
+
+    return () => {
+      if (frame.current) cancelAnimationFrame(frame.current);
+    };
+  }, [hovered, encryptedText]);
+
+  return (
+    <motion.div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      whileHover={{ scale: 1.01 }}
+      transition={{ duration: 0.2 }}
+      className={cn(
+        "group relative flex flex-col items-center gap-6 overflow-hidden rounded-xl border border-dark-line bg-dark-bg p-8",
+        className
+      )}
+    >
+      {/* The encrypted / resolving label */}
+      <div className="font-mono text-sm tracking-widest text-dark-ink/70 select-none">
+        {display}
+      </div>
+
+      {/* Children — fade up on hover */}
+      <motion.div
+        className="relative z-10 w-full"
+        initial={false}
+        animate={{ opacity: hovered ? 1 : 0.4, y: hovered ? 0 : 6 }}
+        transition={{ duration: 0.3 }}
+      >
+        {children}
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function randomChar(): string {
+  return CHARS[Math.floor(Math.random() * CHARS.length)];
+}
+
+function scramble(length: number): string {
+  let out = "";
+  for (let i = 0; i < length; i++) out += randomChar();
+  return out;
+}

package/src/components/evervault-card/index.ts

@@ -0,0 +1,2 @@
+export { EvervaultCard } from "./EvervaultCard";
+export type { EvervaultCardProps } from "./EvervaultCard";

package/src/components/expandable-card/ExpandableCard.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface ExpandableCardProps {
+  title: string;
+  /** Collapsed content (always visible) */
+  children?: ReactNode;
+  /** Content revealed when expanded */
+  expandedContent?: ReactNode;
+  defaultExpanded?: boolean;
+  className?: string;
+}
+
+/**
+ * ExpandableCard — card that expands on click to reveal more content.
+ *
+ * Uses framer-motion `AnimatePresence` with a height "auto" animation so the
+ * card smoothly grows. A chevron icon rotates to indicate state.
+ *
+ * @example
+ * <ExpandableCard title="详情" expandedContent={<p>更多内容…</p>}>
+ *   摘要文字
+ * </ExpandableCard>
+ */
+export function ExpandableCard({
+  title,
+  children,
+  expandedContent,
+  defaultExpanded = false,
+  className,
+}: ExpandableCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-line bg-bg transition-colors hover:border-line-strong",
+        className
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
+      >
+        <span className="text-sm font-semibold text-ink">{title}</span>
+        <motion.svg
+          animate={{ rotate: expanded ? 180 : 0 }}
+          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          className="h-4 w-4 flex-shrink-0 text-ink-2"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </motion.svg>
+      </button>
+
+      {/* Collapsed (always-visible) content */}
+      {children && (
+        <div className="px-4 pb-3 text-sm leading-relaxed text-ink-2">
+          {children}
+        </div>
+      )}
+
+      {/* Expanded content with height auto animation */}
+      <AnimatePresence initial={false}>
+        {expanded && expandedContent && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            className="overflow-hidden"
+          >
+            <div className="border-t border-line px-4 py-3 text-sm leading-relaxed text-ink-2">
+              {expandedContent}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/expandable-card/index.ts

@@ -0,0 +1,2 @@
+export { ExpandableCard } from "./ExpandableCard";
+export type { ExpandableCardProps } from "./ExpandableCard";