@zmzai/theme 0.1.0

package/src/components/index.ts

@@ -0,0 +1,71 @@
+// @zmzai/theme — Components barrel (53 components)
+
+// === Basic ===
+export * from "./button";
+export * from "./input";
+export * from "./textarea";
+export * from "./card";
+export * from "./badge";
+export * from "./avatar";
+
+// === Radix-based ===
+export * from "./tooltip";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./select";
+
+// === Interactive Enhancement ===
+export * from "./magnetic-button";
+export * from "./glowing-effect";
+export * from "./text-hover-effect";
+export * from "./hover-border-gradient";
+export * from "./card-spotlight";
+export * from "./moving-border";
+export * from "./stateful-button";
+
+// === Layout & Structure ===
+export * from "./floating-navbar";
+export * from "./aceternity-sidebar";
+export * from "./bento-grid";
+export * from "./expandable-card";
+export * from "./focus-cards";
+export * from "./layout-grid";
+export * from "./animated-tabs";
+
+// === Content Display ===
+export * from "./tracing-beam";
+export * from "./sticky-scroll-reveal";
+export * from "./file-upload";
+export * from "./vanish-input";
+export * from "./link-preview";
+export * from "./animated-tooltip";
+export * from "./tooltip-card";
+export * from "./code-block";
+export * from "./multi-step-loader";
+export * from "./timeline";
+
+// === Text Effects ===
+export * from "./text-generate";
+export * from "./encrypt-text";
+export * from "./typewriter";
+export * from "./flip-words";
+
+// === Card Variants ===
+export * from "./card-hover-effect";
+export * from "./wobble-card";
+export * from "./glare-card";
+export * from "./comet-card";
+export * from "./evervault-card";
+export * from "./card-3d";
+
+// === Utilities ===
+export * from "./terminal";
+export * from "./keyboard";
+export * from "./notch";
+export * from "./sticky-banner";
+export * from "./compare";
+export * from "./infinite-moving-cards";
+export * from "./loader";
+export * from "./skeleton";
+export * from "./empty-state";
+export * from "./carousel";

package/src/components/infinite-moving-cards/InfiniteMovingCards.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface InfiniteMovingCardsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Cards to render in the marquee */
+  items: ReactNode[];
+  /** Scroll speed */
+  speed?: "slow" | "normal" | "fast";
+  /** Pause the animation on hover */
+  pauseOnHover?: boolean;
+  /** Scroll direction */
+  direction?: "left" | "right";
+}
+
+const speedMap: Record<NonNullable<InfiniteMovingCardsProps["speed"]>, string> = {
+  slow: "80s",
+  normal: "40s",
+  fast: "20s",
+};
+
+/**
+ * InfiniteMovingCards — a horizontal marquee that loops forever.
+ *
+ * Renders `items` twice back-to-back inside a CSS keyframe animation so the
+ * loop is seamless. Pure CSS (no JS frame loop). The keyframes are injected
+ * once via a scoped style tag to keep the component self-contained.
+ *
+ * @example
+ * <InfiniteMovingCards items={logos} speed="slow" direction="left" />
+ */
+export function InfiniteMovingCards({
+  items,
+  speed = "normal",
+  pauseOnHover = true,
+  direction = "left",
+  className,
+  ...props
+}: InfiniteMovingCardsProps) {
+  const duration = speedMap[speed];
+
+  const trackStyle: CSSProperties = {
+    animationDuration: duration,
+    animationDirection: direction === "right" ? "reverse" : "normal",
+    animationPlayState: "running",
+  };
+
+  return (
+    <>
+      <style>{`
+        @keyframes zmzai-marquee {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+        .zmzai-marquee-track {
+          animation: zmzai-marquee var(--marquee-duration, 40s) linear infinite;
+        }
+      `}</style>
+
+      <div
+        className={cn(
+          "group relative flex overflow-hidden",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "zmzai-marquee-track flex w-max shrink-0 flex-nowrap items-stretch gap-4",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          )}
+          style={{ ...trackStyle, ["--marquee-duration" as string]: duration }}
+        >
+          {[...items, ...items].map((item, i) => (
+            <div key={i} className="shrink-0">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/infinite-moving-cards/index.ts

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

package/src/components/input/Input.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+import { inputVariants, type InputVariant, type InputSize } from "./input.styles";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  variant?: InputVariant;
+  size?: InputSize;
+}
+
+/**
+ * Input — text input field.
+ *
+ * - `default`: light border, focus turns border to ink
+ * - `brutal`: 2px ink border + hard offset shadow, focus shifts (neobrutalism)
+ *
+ * @example
+ * <Input placeholder="搜索…" />
+ * <Input variant="brutal" placeholder="描述任务…" />
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, type = "text", ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(inputVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = "Input";

package/src/components/input/index.ts

@@ -0,0 +1,4 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input";
+export { inputVariants } from "./input.styles";
+export type { InputVariant, InputSize } from "./input.styles";

package/src/components/input/input.styles.ts

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Input variant styles.
+ *
+ * Design:
+ * - default: light border, focus turns border to ink
+ * - brutal: 2px ink border + hard offset shadow (neobrutalism), focus shifts
+ */
+export const inputVariants = cva(
+  "w-full bg-bg font-sans text-ink placeholder:text-ink-3 outline-none transition-all",
+  {
+    variants: {
+      variant: {
+        default:
+          "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
+        brutal:
+          "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
+      },
+      size: {
+        sm: "text-xs py-2 px-3",
+        md: "text-sm py-2.5 px-4",
+        lg: "text-base py-3 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+export type InputVariant = "default" | "brutal";
+export type InputSize = "sm" | "md" | "lg";

package/src/components/keyboard/Keyboard.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface KeyboardProps extends HTMLAttributes<HTMLElement> {
+  /** Key label(s), e.g. ⌘K */
+  children?: ReactNode;
+}
+
+/**
+ * Keyboard — a single keycap pill (e.g. ⌘K).
+ *
+ * NOT a full keyboard layout — renders one key with a border, mono font,
+ * and a subtle shadow for a physical-key look.
+ *
+ * @example
+ * <Keyboard>⌘K</Keyboard>
+ * <Keyboard className="px-3">Shift</Keyboard>
+ */
+export const Keyboard = forwardRef<HTMLElement, KeyboardProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref as React.Ref<HTMLElement>}
+        className={cn(
+          "inline-flex select-none items-center justify-center whitespace-nowrap rounded-md border border-line bg-surface px-1.5 py-0.5 font-mono text-xs font-medium text-ink-2 shadow-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </kbd>
+    );
+  }
+);
+
+Keyboard.displayName = "Keyboard";

package/src/components/keyboard/index.ts

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

package/src/components/layout-grid/LayoutGrid.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface LayoutGridItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  icon?: ReactNode;
+}
+
+export interface LayoutGridProps {
+  items: LayoutGridItem[];
+  className?: string;
+}
+
+/**
+ * LayoutGrid — grid where clicking an item animates it to fullscreen.
+ *
+ * Uses framer-motion `layoutId` so the clicked card smoothly morphs into a
+ * fullscreen overlay. Clicking the overlay (or close button) collapses it back.
+ *
+ * @example
+ * <LayoutGrid items={[
+ *   { id: "1", title: "项目 A", content: <p>详情…</p> },
+ *   { id: "2", title: "项目 B", content: <p>详情…</p> },
+ * ]} />
+ */
+export function LayoutGrid({ items, className }: LayoutGridProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const activeItem = items.find((item) => item.id === activeId) ?? null;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+          className
+        )}
+      >
+        {items.map((item) => (
+          <motion.button
+            type="button"
+            key={item.id}
+            layoutId={`layout-card-${item.id}`}
+            onClick={() => setActiveId(item.id)}
+            whileHover={{ y: -4 }}
+            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            className={cn(
+              "flex min-h-[160px] flex-col rounded-xl border border-line bg-bg p-5 text-left shadow-sm transition-colors hover:border-line-strong"
+            )}
+          >
+            {item.icon && (
+              <div className="mb-3 flex h-8 w-8 items-center justify-center text-ink">
+                {item.icon}
+              </div>
+            )}
+            <h3 className="mt-auto text-base font-semibold text-ink">
+              {item.title}
+            </h3>
+          </motion.button>
+        ))}
+      </div>
+
+      {/* Fullscreen overlay */}
+      <AnimatePresence>
+        {activeItem && (
+          <motion.div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-8"
+            initial={{ backgroundColor: "rgba(0,0,0,0)" }}
+            animate={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+            exit={{ backgroundColor: "rgba(0,0,0,0)" }}
+            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            onClick={() => setActiveId(null)}
+          >
+            <motion.div
+              layoutId={`layout-card-${activeItem.id}`}
+              onClick={(e) => e.stopPropagation()}
+              className="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-line bg-bg p-6 shadow-2xl"
+            >
+              {/* Close button */}
+              <button
+                type="button"
+                onClick={() => setActiveId(null)}
+                aria-label="关闭"
+                className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-ink-2 transition-colors hover:bg-surface-2 hover:text-ink"
+              >
+                <svg
+                  className="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+
+              {activeItem.icon && (
+                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-surface-2 text-ink">
+                  {activeItem.icon}
+                </div>
+              )}
+              <h2 className="mb-4 pr-10 text-xl font-bold text-ink">
+                {activeItem.title}
+              </h2>
+              <div className="text-sm leading-relaxed text-ink-2">
+                {activeItem.content}
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { LayoutGrid } from "./LayoutGrid";
+export type { LayoutGridProps, LayoutGridItem } from "./LayoutGrid";

package/src/components/link-preview/LinkPreview.tsx

@@ -0,0 +1,121 @@
+"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 LinkPreviewProps {
+  /** The trigger element — typically an <a> or text */
+  children: ReactNode;
+  url: string;
+  title: string;
+  description: string;
+  /** Optional preview image URL */
+  image?: string;
+  className?: string;
+}
+
+/**
+ * LinkPreview — hover a link to reveal a floating preview card.
+ *
+ * On hover, a card (image + title + description) fades/scales in and
+ * follows the cursor horizontally. Based on Aceternity's Link Preview,
+ * adapted to the zmzai monochrome palette.
+ *
+ * @example
+ * <LinkPreview
+ *   url="https://example.com"
+ *   title="示例标题"
+ *   description="一段描述文字"
+ *   image="/og.png"
+ * >
+ *   <a href="https://example.com">悬停查看</a>
+ * </LinkPreview>
+ */
+export function LinkPreview({
+  children,
+  url,
+  title,
+  description,
+  image,
+  className,
+}: LinkPreviewProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+
+  // raw mouse position (relative to viewport)
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  // spring-smoothed for the card
+  const springX = useSpring(mouseX, { stiffness: 200, damping: 25 });
+  const springY = useSpring(mouseY, { stiffness: 200, damping: 25 });
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
+    mouseX.set(e.clientX);
+    mouseY.set(e.clientY);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+      className={cn("relative inline-block", className)}
+    >
+      {children}
+
+      {/* Floating preview card — portal-free, fixed to viewport */}
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.92, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.92, y: 8 }}
+            transition={{ type: "spring", stiffness: 260, damping: 24 }}
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              // offset so the card sits above the cursor; translate to center
+              x: springX,
+              y: springY,
+              // shift card up & left so it doesn't sit under the cursor
+              translateX: "-50%",
+              translateY: "-130%",
+            }}
+            className="pointer-events-none z-50 w-72 origin-bottom overflow-hidden rounded-xl border border-line bg-bg shadow-lg"
+          >
+            {image && (
+              <div className="aspect-video w-full overflow-hidden bg-surface">
+                <img
+                  src={image}
+                  alt={title}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            )}
+            <div className="space-y-1.5 p-4">
+              <h4 className="text-sm font-semibold text-ink">{title}</h4>
+              <p className="line-clamp-2 text-xs text-ink-2">
+                {description}
+              </p>
+              <p className="truncate text-[11px] text-ink-3">{url}</p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/link-preview/index.ts

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

package/src/components/loader/Loader.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { type HTMLAttributes } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export type LoaderVariant = "spinner" | "dots" | "bars" | "ring" | "pulse";
+
+export interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Spinner style */
+  variant?: LoaderVariant;
+  /** Size in pixels (default 24) */
+  size?: number;
+}
+
+const easeOut = [0.16, 1, 0.3, 1] as const;
+
+/**
+ * Loader — minimal loading indicators.
+ *
+ * Variants:
+ * - `spinner`: rotating arc
+ * - `dots`: three bouncing dots
+ * - `bars`: four equalizing bars
+ * - `ring`: pulsing ring
+ * - `pulse`: single pulsing dot
+ *
+ * Default size 24px, monochrome `text-ink`.
+ *
+ * @example
+ * <Loader variant="dots" size={28} />
+ */
+export function Loader({
+  variant = "spinner",
+  size = 24,
+  className,
+  style,
+  ...props
+}: LoaderProps) {
+  const wrapperStyle = { width: size, height: size, ...style };
+
+  return (
+    <div
+      className={cn("inline-flex items-center justify-center text-ink", className)}
+      style={wrapperStyle}
+      role="status"
+      aria-label="loading"
+      {...props}
+    >
+      {variant === "spinner" && (
+        <motion.svg
+          className="h-full w-full"
+          viewBox="0 0 24 24"
+          fill="none"
+          animate={{ rotate: 360 }}
+          transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="9"
+            stroke="currentColor"
+            strokeWidth="3"
+          />
+          <path
+            className="opacity-90"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
+        </motion.svg>
+      )}
+
+      {variant === "dots" && (
+        <div className="flex h-full w-full items-center justify-center gap-[15%]">
+          {[0, 1, 2].map((i) => (
+            <motion.span
+              key={i}
+              className="block rounded-full bg-current"
+              style={{ width: "22%", height: "22%" }}
+              animate={{ y: [0, -size * 0.2, 0], opacity: [0.4, 1, 0.4] }}
+              transition={{
+                duration: 0.9,
+                repeat: Infinity,
+                ease: easeOut,
+                delay: i * 0.15,
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {variant === "bars" && (
+        <div className="flex h-full w-full items-end justify-center gap-[15%]">
+          {[0, 1, 2, 3].map((i) => (
+            <motion.span
+              key={i}
+              className="block w-[15%] rounded-sm bg-current"
+              animate={{ height: ["30%", "100%", "30%"] }}
+              transition={{
+                duration: 1,
+                repeat: Infinity,
+                ease: easeOut,
+                delay: i * 0.12,
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {variant === "ring" && (
+        <motion.div
+          className="h-full w-full rounded-full border-[3px] border-current"
+          style={{ borderTopColor: "transparent" }}
+          animate={{ rotate: 360 }}
+          transition={{ duration: 0.9, repeat: Infinity, ease: "linear" }}
+        />
+      )}
+
+      {variant === "pulse" && (
+        <motion.span
+          className="block rounded-full bg-current"
+          style={{ width: "100%", height: "100%" }}
+          animate={{ scale: [0.4, 1, 0.4], opacity: [0.3, 1, 0.3] }}
+          transition={{ duration: 1.2, repeat: Infinity, ease: easeOut }}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/loader/index.ts

@@ -0,0 +1,2 @@
+export { Loader } from "./Loader";
+export type { LoaderProps, LoaderVariant } from "./Loader";