motion-ui-skill 2.0.0

package/components/others/progress-ring-card.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type ProgressStage = {
+  label: string;
+  value: number;
+  color?: string;
+};
+
+export type ProgressRingCardProps = Readonly<
+  {
+    title?: string;
+    progress?: number;
+    progressLabel?: string;
+    showPercentage?: boolean;
+    ringStartColor?: string;
+    ringEndColor?: string;
+    stages?: ProgressStage[];
+    animateOnMount?: boolean;
+    onStageClick?: (stage: ProgressStage, index: number) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const RADIUS = 40;
+const STROKE_WIDTH = 6;
+
+// Production-ready Progress Ring component — styled with Tailwind CSS.
+export const ProgressRingCard = forwardRef<
+  HTMLDivElement,
+  ProgressRingCardProps
+>(
+  (
+    {
+      className,
+      title = "Project Progress",
+      progress = 73,
+      progressLabel = "Complete",
+      showPercentage = true,
+      ringStartColor = "#14b8a6",
+      ringEndColor = "#06b6d4",
+      stages = [
+        { label: "Design", value: 100, color: "bg-emerald-500" },
+        { label: "Development", value: 73, color: "bg-teal-500" },
+        { label: "Testing", value: 30, color: "bg-neutral-200" },
+      ],
+      animateOnMount = true,
+      onStageClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const gradientId = useId();
+    const [displayProgress, setDisplayProgress] = useState(
+      animateOnMount ? 0 : progress,
+    );
+    const [activeStage, setActiveStage] = useState<number | null>(null);
+
+    const normalizedProgress = useMemo(
+      () => Math.min(100, Math.max(0, progress)),
+      [progress],
+    );
+
+    const normalizedStages = useMemo(
+      () =>
+        stages.map((stage) => ({
+          ...stage,
+          value: Math.min(100, Math.max(0, stage.value)),
+        })),
+      [stages],
+    );
+
+    const circumference = useMemo(() => 2 * Math.PI * RADIUS, []);
+
+    const offset = useMemo(
+      () => circumference - (displayProgress / 100) * circumference,
+      [circumference, displayProgress],
+    );
+
+    useEffect(() => {
+      if (!animateOnMount) {
+        setDisplayProgress(normalizedProgress);
+        return;
+      }
+
+      const start = performance.now();
+      const duration = 900;
+
+      const frame = (time: number) => {
+        const t = Math.min(1, (time - start) / duration);
+        const eased = 1 - (1 - t) ** 3;
+        setDisplayProgress(Math.round(normalizedProgress * eased));
+        if (t < 1) requestAnimationFrame(frame);
+      };
+
+      const raf = requestAnimationFrame(frame);
+      return () => cancelAnimationFrame(raf);
+    }, [animateOnMount, normalizedProgress]);
+
+    const handleStageClick = (stage: ProgressStage, index: number) => {
+      setActiveStage(index);
+      setDisplayProgress(stage.value);
+      onStageClick?.(stage, index);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="progress-ring-card"
+        className={cn(
+          "w-64 rounded-2xl border border-neutral-100 bg-white p-5 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <p
+          data-slot="progress-ring-card-title"
+          className="mb-4 font-mono text-[10px] tracking-widest text-neutral-400 uppercase"
+        >
+          {title}
+        </p>
+
+        <div
+          data-slot="progress-ring-card-ring"
+          className="relative mx-auto mb-4 h-28 w-28"
+        >
+          <svg
+            role="img"
+            aria-label={`${displayProgress}% ${progressLabel}`}
+            viewBox="0 0 100 100"
+            className="h-full w-full -rotate-90"
+          >
+            <circle
+              cx="50"
+              cy="50"
+              r={RADIUS}
+              fill="none"
+              stroke="#f5f5f5"
+              strokeWidth={STROKE_WIDTH}
+            />
+            <circle
+              cx="50"
+              cy="50"
+              r={RADIUS}
+              fill="none"
+              stroke={`url(#${gradientId})`}
+              strokeWidth={STROKE_WIDTH}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={offset}
+              className="transition-[stroke-dashoffset] duration-700 ease-out"
+            />
+            <defs>
+              <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor={ringStartColor} />
+                <stop offset="100%" stopColor={ringEndColor} />
+              </linearGradient>
+            </defs>
+          </svg>
+
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            {showPercentage && (
+              <span className="text-2xl font-light text-neutral-900">
+                {displayProgress}%
+              </span>
+            )}
+            <span className="font-mono text-[9px] text-neutral-400">
+              {progressLabel}
+            </span>
+          </div>
+        </div>
+
+        <div data-slot="progress-ring-card-breakdown" className="space-y-2">
+          {normalizedStages.map((stage, index) => (
+            <button
+              key={stage.label}
+              type="button"
+              onClick={() => handleStageClick(stage, index)}
+              data-slot="progress-ring-card-stage"
+              className={cn(
+                "flex w-full cursor-pointer items-center gap-2 rounded-lg px-1 py-0.5 text-left transition-colors hover:bg-neutral-50",
+                activeStage === index && "bg-teal-50",
+              )}
+            >
+              <span className="w-16 text-[10px] text-neutral-500">
+                {stage.label}
+              </span>
+              <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100">
+                <div
+                  className={cn(
+                    "h-full rounded-full transition-all duration-500",
+                    stage.color ?? "bg-teal-500",
+                  )}
+                  style={{ width: `${stage.value}%` }}
+                />
+              </div>
+              <span className="w-6 text-right font-mono text-[10px] text-neutral-400">
+                {stage.value}%
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
+ProgressRingCard.displayName = "ProgressRingCard";

package/components/others/stacked-cards-effect.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/cn";
+
+export const StackedCardsEffect = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className = "", ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("group relative h-64 w-56 font-sans", className)}
+    {...props}
+  >
+    <div className="absolute inset-x-4 top-8 bottom-0 -rotate-6 rounded-2xl bg-neutral-200 transition-transform duration-500 group-hover:rotate-[-8deg]" />
+    <div className="absolute inset-x-2 top-4 bottom-0 rotate-3 rounded-2xl border border-neutral-200 bg-neutral-100 transition-transform duration-500 group-hover:rotate-[5deg]" />
+
+    <div className="absolute inset-0 overflow-hidden rounded-2xl border border-neutral-100 bg-white shadow-lg transition-transform duration-500 group-hover:-translate-y-1">
+      <div className="relative h-28 overflow-hidden">
+        <Image
+          src="/background4.webp"
+          alt="Card"
+          fill
+          sizes="288px"
+          className="object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <div className="mb-2 flex items-center gap-2">
+          <div className="relative h-7 w-7 overflow-hidden rounded-full border border-neutral-100">
+            <Image
+              src="/profile-picture.png"
+              alt="User"
+              fill
+              sizes="28px"
+              className="object-cover"
+            />
+          </div>
+          <div>
+            <p className="text-xs font-semibold text-neutral-900">
+              Alex Morgan
+            </p>
+            <p className="text-[10px] text-neutral-400">3 new cards</p>
+          </div>
+        </div>
+        <p className="text-[11px] leading-relaxed text-neutral-500">
+          Your saved design collection with 12 components ready to use.
+        </p>
+        <div className="mt-3 flex gap-1.5">
+          {["UI", "Cards", "Nav"].map((tag) => (
+            <span
+              key={tag}
+              className="rounded-full bg-neutral-100 px-2 py-0.5 text-[9px] font-medium text-neutral-600"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+));
+StackedCardsEffect.displayName = "StackedCardsEffect";

package/components/others/terminal-log-card.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Command } from "lucide-react";
+
+export type TerminalLogLine = {
+  type: "cmd" | "out" | "ok" | "err";
+  text: string;
+};
+
+export type TerminalLogCardProps = Readonly<
+  {
+    title?: string;
+    prompt?: string;
+    lines?: TerminalLogLine[];
+    status?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultLines: TerminalLogLine[] = [
+  { type: "cmd", text: "npx appui add metric-card" },
+  { type: "out", text: "Resolving dependencies..." },
+  { type: "ok", text: "✓ Copied MetricCard.tsx" },
+  { type: "ok", text: "✓ Updated tailwind.config" },
+  { type: "out", text: "Done in 1.8s" },
+];
+
+const lineColors: Record<TerminalLogLine["type"], string> = {
+  cmd: "text-emerald-400",
+  out: "text-neutral-500",
+  ok: "text-sky-400",
+  err: "text-rose-400",
+};
+
+// Production-ready Terminal Log component — styled with Tailwind CSS.
+export const TerminalLogCard = forwardRef<HTMLDivElement, TerminalLogCardProps>(
+  (
+    {
+      className,
+      title = "appui — zsh",
+      prompt = "~",
+      lines = defaultLines,
+      status = "ready",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="terminal-log-card"
+      className={cn(
+        "w-sm overflow-hidden rounded-xl border border-neutral-800 bg-[#0d0d0d] font-mono text-[11px] shadow-2xl shadow-black/40 md:max-w-xs",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="terminal-log-card-header"
+        className="flex items-center gap-2 border-b border-neutral-800 px-3 py-2"
+      >
+        <div className="flex gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
+          <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
+          <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
+        </div>
+        <span className="flex-1 truncate text-center text-[10px] text-neutral-600">
+          {title}
+        </span>
+        <Command size={10} className="text-neutral-700" />
+      </div>
+
+      <div
+        data-slot="terminal-log-card-body"
+        className="space-y-1 px-3 py-3 leading-relaxed"
+      >
+        {lines.map((line) => (
+          <p
+            key={`${line.type}-${line.text}`}
+            data-slot="terminal-log-card-line"
+            className={cn("break-all", lineColors[line.type])}
+          >
+            {line.type === "cmd" && (
+              <span className="text-neutral-600">{prompt} </span>
+            )}
+            {line.text}
+          </p>
+        ))}
+        <p className="text-neutral-600">
+          <span className="text-emerald-500">{prompt}</span>
+          <span className="ml-1 inline-block h-3 w-1.5 animate-pulse bg-emerald-400" />
+        </p>
+      </div>
+
+      <div
+        data-slot="terminal-log-card-footer"
+        className="border-t border-neutral-800/80 px-3 py-1.5 text-[9px] text-neutral-600"
+      >
+        {status}
+      </div>
+    </div>
+  ),
+);
+
+TerminalLogCard.displayName = "TerminalLogCard";

package/components/others/thermal-receipt-card.tsx

@@ -0,0 +1,132 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { QrCode } from "lucide-react";
+
+export type ThermalReceiptItem = Readonly<{
+  name: string;
+  price: string;
+}>;
+
+export type ThermalReceiptCardProps = Readonly<
+  {
+    storeName?: string;
+    storeAddress?: string;
+    orderId?: string;
+    date?: string;
+    items?: ThermalReceiptItem[];
+    subtotal?: string;
+    tax?: string;
+    total?: string;
+    footer?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultItems: readonly ThermalReceiptItem[] = [
+  { name: "AppUI Pro (Monthly)", price: "₹999" },
+  { name: "Component Pack", price: "₹499" },
+  { name: "Priority Support", price: "₹299" },
+];
+
+// Production-ready Thermal Receipt component — styled with Tailwind CSS.
+export const ThermalReceiptCard = forwardRef<
+  HTMLDivElement,
+  ThermalReceiptCardProps
+>(
+  (
+    {
+      className,
+      storeName = "APPUI COMPONENTS",
+      storeAddress = "Park Street, Kolkata 700016",
+      orderId = "#AUI-2847",
+      date = "06 JUN 2026 · 14:32",
+      items = defaultItems,
+      subtotal = "₹1,797",
+      tax = "₹323",
+      total = "₹2,120",
+      footer = "Thank you for building with AppUI",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="thermal-receipt-card"
+      className={cn("w-55 font-mono md:max-w-50", className)}
+      {...props}
+    >
+      <div className="relative bg-[#faf8f2] px-4 py-5 text-neutral-800 shadow-md">
+        <div
+          className="pointer-events-none absolute -top-2 right-0 left-0 h-2"
+          style={{
+            background:
+              "radial-gradient(circle at 8px 0, transparent 6px, #faf8f2 6px)",
+            backgroundSize: "16px 8px",
+          }}
+        />
+
+        <div data-slot="thermal-receipt-card-header" className="text-center">
+          <p className="text-[11px] font-bold tracking-[0.2em]">{storeName}</p>
+          <p className="mt-1 text-[8px] leading-snug text-neutral-500">
+            {storeAddress}
+          </p>
+          <p className="mt-2 text-[8px] text-neutral-400">
+            {orderId} · {date}
+          </p>
+        </div>
+
+        <div
+          data-slot="thermal-receipt-card-divider"
+          className="my-3 border-t border-dashed border-neutral-300"
+        />
+
+        <div data-slot="thermal-receipt-card-items" className="space-y-1.5">
+          {items.map((item) => (
+            <div
+              key={item.name}
+              className="flex justify-between gap-2 text-[9px]"
+            >
+              <span className="min-w-0 truncate">{item.name}</span>
+              <span className="shrink-0">{item.price}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="my-3 border-t border-dashed border-neutral-300" />
+
+        <div className="space-y-0.5 text-[9px]">
+          <div className="flex justify-between text-neutral-500">
+            <span>Subtotal</span>
+            <span>{subtotal}</span>
+          </div>
+          <div className="flex justify-between text-neutral-500">
+            <span>GST 18%</span>
+            <span>{tax}</span>
+          </div>
+          <div className="flex justify-between pt-1 text-[11px] font-bold">
+            <span>TOTAL</span>
+            <span>{total}</span>
+          </div>
+        </div>
+
+        <div className="mt-4 flex flex-col items-center gap-2">
+          <QrCode size={36} className="text-neutral-700" aria-hidden />
+          <p className="text-center text-[7px] leading-snug text-neutral-400">
+            {footer}
+          </p>
+        </div>
+
+        <div
+          className="pointer-events-none absolute right-0 -bottom-2 left-0 h-2"
+          style={{
+            background:
+              "radial-gradient(circle at 8px 8px, transparent 6px, #faf8f2 6px)",
+            backgroundSize: "16px 8px",
+          }}
+        />
+      </div>
+    </div>
+  ),
+);
+
+ThermalReceiptCard.displayName = "ThermalReceiptCard";

package/components/others/weather-snapshot-card.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { CloudRain, Droplets, Sun, Wind } from "lucide-react";
+
+export type WeatherSnapshotCardProps = Readonly<
+  {
+    city?: string;
+    condition?: string;
+    temperature?: number;
+    high?: number;
+    low?: number;
+    humidity?: number;
+    wind?: string;
+    variant?: "clear" | "rain";
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const WeatherSnapshotCard = forwardRef<
+  HTMLDivElement,
+  WeatherSnapshotCardProps
+>(
+  (
+    {
+      className,
+      city = "Kolkata",
+      condition = "Partly cloudy",
+      temperature = 31,
+      high = 34,
+      low = 26,
+      humidity = 72,
+      wind = "12 km/h",
+      variant = "clear",
+      ...props
+    },
+    ref,
+  ) => {
+    const isRain = variant === "rain";
+
+    return (
+      <div
+        ref={ref}
+        data-slot="weather-snapshot-card"
+        data-variant={variant}
+        className={cn(
+          "w-72 overflow-hidden rounded-3xl border font-sans shadow-md",
+          isRain
+            ? "border-sky-200 bg-sky-50 text-sky-950"
+            : "border-amber-100 bg-amber-50 text-amber-950",
+          className,
+        )}
+        {...props}
+      >
+        <div className="p-5">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="text-xs font-medium tracking-wide text-neutral-500 uppercase">
+                {city}
+              </p>
+              <p className="mt-1 text-sm text-neutral-600">{condition}</p>
+            </div>
+
+            <div
+              data-layer="weather-icon"
+              className={cn(
+                "flex size-11 items-center justify-center rounded-2xl",
+                isRain
+                  ? "bg-sky-200/70 text-sky-800"
+                  : "bg-amber-200/80 text-amber-800",
+              )}
+            >
+              {isRain ? (
+                <CloudRain size={22} aria-hidden />
+              ) : (
+                <Sun size={22} aria-hidden />
+              )}
+            </div>
+          </div>
+
+          <p className="mt-4 text-5xl font-light tracking-tight">
+            {temperature}
+            <span className="align-top text-2xl">°</span>
+          </p>
+
+          <p className="mt-1 text-xs text-neutral-500">
+            H {high}° · L {low}°
+          </p>
+        </div>
+
+        <div
+          className={cn(
+            "grid grid-cols-2 gap-px border-t text-xs",
+            isRain
+              ? "border-sky-200 bg-sky-200"
+              : "border-amber-200 bg-amber-200",
+          )}
+        >
+          <div
+            className={cn(
+              "flex items-center gap-2 px-4 py-3",
+              isRain ? "bg-sky-50" : "bg-amber-50",
+            )}
+          >
+            <Droplets size={14} className="text-neutral-500" aria-hidden />
+            <span>{humidity}% humidity</span>
+          </div>
+          <div
+            className={cn(
+              "flex items-center gap-2 px-4 py-3",
+              isRain ? "bg-sky-50" : "bg-amber-50",
+            )}
+          >
+            <Wind size={14} className="text-neutral-500" aria-hidden />
+            <span>{wind}</span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+WeatherSnapshotCard.displayName = "WeatherSnapshotCard";