@zmzai/theme 0.1.0

package/src/components/animated-tooltip/AnimatedTooltip.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  useRef,
+  useState,
+  type ReactNode,
+  type MouseEvent,
+} from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  AnimatePresence,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface AnimatedTooltipProps {
+  /** Tooltip body content */
+  content: ReactNode;
+  /** The trigger element */
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * AnimatedTooltip — a custom tooltip that slides in following the cursor.
+ *
+ * Unlike the Radix-based tooltip, this is built purely with framer-motion:
+ * on hover, a small card slides in from the side with spring physics and
+ * tracks the mouse X position. Based on Aceternity's Animated Tooltip,
+ * adapted to the zmzai monochrome palette.
+ *
+ * @example
+ * <AnimatedTooltip content="复制到剪贴板">
+ *   <button>复制</button>
+ * </AnimatedTooltip>
+ */
+export function AnimatedTooltip({
+  content,
+  children,
+  className,
+}: AnimatedTooltipProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  const springConfig = { stiffness: 200, damping: 22 };
+  const x = useSpring(mouseX, springConfig);
+  const y = useSpring(mouseY, springConfig);
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+      className={cn("relative inline-flex", className)}
+    >
+      {children}
+
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8, x: -10 }}
+            animate={{ opacity: 1, scale: 1, x: 0 }}
+            exit={{ opacity: 0, scale: 0.8, x: -10 }}
+            transition={{ type: "spring", stiffness: 350, damping: 24 }}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              x,
+              // position above the cursor, centered horizontally
+              translateY: "-120%",
+              translateX: "-50%",
+            }}
+            className="pointer-events-none z-50 whitespace-nowrap rounded-lg border border-line bg-bg px-3 py-1.5 text-xs font-medium text-ink shadow-md"
+          >
+            {content}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/animated-tooltip/index.ts

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

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState, type HTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image source URL */
+  src?: string;
+  /** Alt text / fallback initials */
+  alt?: string;
+  /** Size in px (default 32) */
+  size?: number;
+  /** Shape (default circle) */
+  shape?: "circle" | "square";
+}
+
+/**
+ * Avatar — user/agent avatar with image + initials fallback.
+ *
+ * If `src` fails to load, shows initials from `alt` on a neutral background.
+ *
+ * @example
+ * <Avatar src="/me.png" alt="牧之" size={32} />
+ * <Avatar alt="AI" size={28} shape="square" />
+ */
+export function Avatar({
+  src,
+  alt = "",
+  size = 32,
+  shape = "circle",
+  className,
+  ...props
+}: AvatarProps) {
+  const [error, setError] = useState(false);
+  const initials = alt.slice(0, 2).toUpperCase();
+
+  return (
+    <div
+      className={cn(
+        "flex flex-shrink-0 items-center justify-center overflow-hidden bg-surface-2 text-ink-2 font-semibold",
+        shape === "circle" ? "rounded-full" : "rounded-lg",
+        className
+      )}
+      style={{ width: size, height: size, fontSize: size * 0.38 }}
+      {...props}
+    >
+      {src && !error ? (
+        <img
+          src={src}
+          alt={alt}
+          className="h-full w-full object-cover"
+          onError={() => setError(true)}
+        />
+      ) : (
+        <span>{initials}</span>
+      )}
+    </div>
+  );
+}

package/src/components/avatar/index.ts

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

package/src/components/badge/Badge.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { type HTMLAttributes } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full font-medium text-xs whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        solid: "bg-ink text-white",
+        outline: "border border-line text-ink-2",
+        success: "border border-success/30 bg-success/10 text-success",
+        warning: "border border-warning/30 bg-warning/10 text-warning",
+        danger: "border border-danger/30 bg-danger/10 text-danger",
+        accent: "border border-accent/30 bg-accent/10 text-accent",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-[10px]",
+        md: "px-2.5 py-0.5 text-xs",
+      },
+    },
+    defaultVariants: { variant: "outline", size: "md" },
+  }
+);
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: "solid" | "outline" | "success" | "warning" | "danger" | "accent";
+  size?: "sm" | "md";
+}
+
+/**
+ * Badge — small status/label indicator.
+ *
+ * @example
+ * <Badge variant="solid">活跃</Badge>
+ * <Badge variant="success">● 完成</Badge>
+ * <Badge variant="accent">需要审批</Badge>
+ */
+export function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant, size }), className)} {...props} />
+  );
+}

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from "./Badge";
+export type { BadgeProps } from "./Badge";

package/src/components/bento-grid/BentoGrid.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export type BentoSpan = "1x1" | "2x1" | "1x2" | "2x2";
+
+export interface BentoGridItem {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+  /** Custom className to override/extend the card styling */
+  className?: string;
+  /** Grid span control. Default "1x1". Format: "cols x rows" */
+  span?: BentoSpan;
+}
+
+export interface BentoGridProps {
+  items: BentoGridItem[];
+  className?: string;
+}
+
+/** Map span tokens to Tailwind grid-column / grid-row utilities */
+const spanClassMap: Record<BentoSpan, string> = {
+  "1x1": "col-span-1 row-span-1",
+  "2x1": "col-span-2 row-span-1",
+  "1x2": "col-span-1 row-span-2",
+  "2x2": "col-span-2 row-span-2",
+};
+
+/**
+ * BentoGrid — asymmetric grid layout (like Apple's bento).
+ *
+ * CSS grid with 2 columns + auto-rows. Each item's `span` controls its
+ * footprint. Items lift on hover via framer-motion.
+ *
+ * @example
+ * <BentoGrid items={[
+ *   { title: "性能", description: "极速响应", span: "2x1" },
+ *   { title: "安全", description: "端到端加密", span: "1x1" },
+ * ]} />
+ */
+export function BentoGrid({ items, className }: BentoGridProps) {
+  return (
+    <div
+      className={cn(
+        "grid auto-rows-[minmax(140px,1fr)] grid-cols-1 gap-3 sm:grid-cols-2",
+        className
+      )}
+    >
+      {items.map((item, index) => (
+        <BentoCard key={index} item={item} />
+      ))}
+    </div>
+  );
+}
+
+function BentoCard({ item }: { item: BentoGridItem }) {
+  const span = item.span ?? "1x1";
+
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+      className={cn(
+        "group flex flex-col justify-between rounded-xl border border-line bg-bg p-5 shadow-sm transition-colors hover:border-line-strong",
+        spanClassMap[span],
+        item.className
+      )}
+    >
+      {item.icon && (
+        <div className="mb-3 flex h-8 w-8 items-center justify-center text-ink">
+          {item.icon}
+        </div>
+      )}
+      <div className="mt-auto">
+        <h3 className="text-base font-semibold text-ink">{item.title}</h3>
+        <p className="mt-1 text-sm leading-relaxed text-ink-2">
+          {item.description}
+        </p>
+      </div>
+    </motion.div>
+  );
+}

package/src/components/bento-grid/index.ts

@@ -0,0 +1,2 @@
+export { BentoGrid } from "./BentoGrid";
+export type { BentoGridProps, BentoGridItem, BentoSpan } from "./BentoGrid";

package/src/components/button/Button.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { cn } from "../../utils/cn";
+import { buttonVariants, type ButtonVariant, type ButtonSize } from "./button.styles";
+
+export interface ButtonProps
+  extends Omit<HTMLMotionProps<"button">, "ref" | "children"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * Button — primary interactive element.
+ *
+ * - Uses framer-motion for hover/active micro-interactions
+ * - Pill radius on all variants
+ * - `loading` prop shows a spinner and disables
+ *
+ * @example
+ * <Button variant="primary" size="md">发送</Button>
+ * <Button variant="secondary" loading>保存中…</Button>
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, children, disabled, ...props }, ref) => {
+    return (
+      <motion.button
+        ref={ref}
+        whileHover={disabled || loading ? undefined : { scale: 1.03 }}
+        whileTap={disabled || loading ? undefined : { scale: 0.98 }}
+        transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+        className={cn(buttonVariants({ variant, size }), className)}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="h-4 w-4 animate-spin"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="3"
+            />
+            <path
+              className="opacity-90"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+        )}
+        {children}
+      </motion.button>
+    );
+  }
+);
+
+Button.displayName = "Button";

package/src/components/button/button.styles.ts

@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Button variant styles.
+ *
+ * Design:
+ * - All variants use pill radius (rounded-full)
+ * - primary: black fill, white text, hover scale + shadow
+ * - secondary: transparent, border, hover fill
+ * - ghost: no border, subtle hover bg
+ */
+export const buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full font-semibold transition-colors transition-transform disabled:pointer-events-none disabled:opacity-40 select-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-ink text-white hover:shadow-md active:scale-[0.98]",
+        secondary:
+          "border border-line text-ink hover:border-ink hover:bg-surface-2",
+        ghost:
+          "text-ink-2 hover:bg-surface-2 hover:text-ink",
+        danger:
+          "bg-danger text-white hover:shadow-md active:scale-[0.98]",
+      },
+      size: {
+        sm: "h-8 px-4 text-xs",
+        md: "h-10 px-6 text-sm",
+        lg: "h-12 px-8 text-base",
+        icon: "h-10 w-10 p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";

package/src/components/button/index.ts

@@ -0,0 +1,4 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";
+export { buttonVariants } from "./button.styles";
+export type { ButtonVariant, ButtonSize } from "./button.styles";

package/src/components/card/Card.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { cn } from "../../utils/cn";
+import { cardVariants, type CardVariant, type CardPadding } from "./card.styles";
+
+export interface CardProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+  variant?: CardVariant;
+  padding?: CardPadding;
+  /** Enable framer-motion hover lift (for interactive cards) */
+  animatedHover?: boolean;
+}
+
+/**
+ * Card — surface container.
+ *
+ * - `default`: static white card with light border
+ * - `interactive`: hover border darkens + shadow + lift (via framer-motion if animatedHover)
+ * - `surface`: slightly grey background for nested panels
+ *
+ * @example
+ * <Card padding="lg">内容</Card>
+ * <Card variant="interactive" animatedHover>可点击卡片</Card>
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, animatedHover, children, ...props }, ref) => {
+    const shouldAnimate = variant === "interactive" && animatedHover;
+
+    const MotionDiv = motion.div;
+
+    return (
+      <MotionDiv
+        ref={ref}
+        whileHover={
+          shouldAnimate
+            ? { y: -2, transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] } }
+            : undefined
+        }
+        className={cn(cardVariants({ variant, padding }), className)}
+        {...props}
+      >
+        {children}
+      </MotionDiv>
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+/**
+ * Card.Header — top section of a card (often with title + actions).
+ */
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-between border-b border-line px-4 py-3", className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+/**
+ * Card.Body — main content area.
+ */
+export const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("px-4 py-3", className)} {...props} />
+  )
+);
+CardBody.displayName = "CardBody";
+
+/**
+ * Card.Footer — bottom section.
+ */
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-2 border-t border-line px-4 py-3", className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = "CardFooter";

package/src/components/card/card.styles.ts

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Card variant styles.
+ *
+ * Design:
+ * - default: white bg, light border, no hover
+ * - interactive: hover lifts up + shadow + border darkens
+ */
+export const cardVariants = cva(
+  "bg-bg border rounded-xl transition-colors transition-transform duration-200",
+  {
+    variants: {
+      variant: {
+        default: "border-line",
+        interactive:
+          "border-line hover:border-ink hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] cursor-pointer",
+        surface: "bg-surface border-line",
+      },
+      padding: {
+        none: "",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "md",
+    },
+  }
+);
+
+export type CardVariant = "default" | "interactive" | "surface";
+export type CardPadding = "none" | "sm" | "md" | "lg";

package/src/components/card/index.ts

@@ -0,0 +1,4 @@
+export { Card, CardHeader, CardBody, CardFooter } from "./Card";
+export type { CardProps } from "./Card";
+export { cardVariants } from "./card.styles";
+export type { CardVariant, CardPadding } from "./card.styles";

package/src/components/card-3d/Card3D.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useRef, type ReactNode, type MouseEvent } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface Card3DProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const MAX_TILT = 10; // deg
+
+/**
+ * Card3D — a card that tilts in 3D space following the cursor, with
+ * depth-shifted content and a slight lift on hover.
+ *
+ * The container sets CSS `perspective`; on mouse move the cursor's
+ * normalized position maps to `rotateX`/`rotateY` (max ±10°) smoothed via
+ * `useSpring`. Children are wrapped in a layer translated along Z for a
+ * parallax pop, and the whole card scales up slightly on hover.
+ *
+ * @example
+ * <Card3D className="p-8">
+ *   <h3>立体卡片</h3>
+ * </Card3D>
+ */
+export function Card3D({ children, className }: Card3DProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const mx = useMotionValue(0);
+  const my = useMotionValue(0);
+
+  const rotateX = useSpring(
+    useTransform(my, [-0.5, 0.5], [MAX_TILT, -MAX_TILT]),
+    { stiffness: 150, damping: 18 }
+  );
+  const rotateY = useSpring(
+    useTransform(mx, [-0.5, 0.5], [-MAX_TILT, MAX_TILT]),
+    { stiffness: 150, damping: 18 }
+  );
+
+  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    mx.set((e.clientX - rect.left) / rect.width - 0.5);
+    my.set((e.clientY - rect.top) / rect.height - 0.5);
+  }
+
+  function handleMouseLeave() {
+    mx.set(0);
+    my.set(0);
+  }
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{ perspective: 1000 }}
+      className={cn("relative", className)}
+    >
+      <motion.div
+        style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
+        whileHover={{ scale: 1.03 }}
+        transition={{ type: "spring", stiffness: 200, damping: 20 }}
+        className="relative rounded-xl border border-line bg-surface"
+      >
+        {/* Depth-shifted content layer */}
+        <div
+          className="relative z-10 p-8"
+          style={{ transform: "translateZ(50px)" }}
+        >
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/components/card-3d/index.ts

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