motion-ui-skill 2.0.0

package/components/buttons/add-to-cart-button.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Check, Loader2, ShoppingBag } from "lucide-react";
+
+type Phase = "idle" | "loading" | "added";
+
+export type AddToCartButtonProps = Readonly<
+  {
+    label?: string;
+    loadingLabel?: string;
+    addedLabel?: string;
+    loadingMs?: number;
+    resetMs?: number;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Icons stack in one fixed slot and fade with the same rhythm as the labels.
+const ICON_LAYER =
+  "absolute inset-0 grid place-items-center transition-opacity ease-out motion-reduce:transition-none";
+
+// Labels stack in one grid cell; outgoing fades out, incoming fades in after.
+const LABEL_LAYER =
+  "col-start-1 row-start-1 text-center transition-opacity ease-out motion-reduce:transition-none";
+
+// Add-to-cart — raised dark key that sinks while adding, then settles into a
+// green added state; icon morphs bag → spinner → check in place.
+export const AddToCartButton = forwardRef<
+  HTMLButtonElement,
+  AddToCartButtonProps
+>(
+  (
+    {
+      className,
+      label = "Add to cart",
+      loadingLabel = "Adding...",
+      addedLabel = "Added to cart",
+      loadingMs = 1200,
+      resetMs = 1600,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<Phase>("idle");
+    const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+    useEffect(() => {
+      const timeoutIds = timers;
+      return () => {
+        timeoutIds.current.forEach((id) => globalThis.clearTimeout(id));
+      };
+    }, []);
+
+    const idle = phase === "idle";
+    const loading = phase === "loading";
+    const added = phase === "added";
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!idle) return;
+      setPhase("loading");
+      timers.current.push(
+        globalThis.setTimeout(() => setPhase("added"), loadingMs),
+        globalThis.setTimeout(() => setPhase("idle"), loadingMs + resetMs),
+      );
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="add-to-cart-button"
+        data-phase={phase}
+        aria-busy={loading || undefined}
+        aria-disabled={!idle || undefined}
+        onClick={handleClick}
+        className={cn(
+          "inline-flex h-12 min-w-44 items-center justify-center gap-2 rounded-xl px-5 font-sans text-sm font-semibold outline-none select-none",
+          "transition-[background-color,box-shadow,color] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          // Raised dark key: soft blurred top sheen, deep lift + bottom recess.
+          idle &&
+            "cursor-pointer bg-neutral-800 text-white shadow-[0_1px_1px_rgba(0,0,0,0.35),0_3px_6px_rgba(0,0,0,0.28),0_8px_16px_rgba(0,0,0,0.22),inset_0_1px_2px_rgba(255,255,255,0.14),inset_0_-3px_6px_rgba(0,0,0,0.55)]",
+          idle &&
+            "hover:bg-neutral-700 active:bg-neutral-900 active:shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_2px_6px_rgba(0,0,0,0.55),inset_0_-1px_1px_rgba(255,255,255,0.06)]",
+          // Adding: stays sunken while it works.
+          loading &&
+            "cursor-default bg-neutral-900 text-neutral-300 shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_2px_6px_rgba(0,0,0,0.55),inset_0_-1px_1px_rgba(255,255,255,0.06)]",
+          // Added: pops back up as a solid emerald key.
+          added &&
+            "cursor-default bg-emerald-600 text-white shadow-[0_1px_1px_rgba(0,0,0,0.2),0_3px_6px_rgba(0,0,0,0.18),0_8px_16px_rgba(0,0,0,0.14),inset_0_1px_2px_rgba(255,255,255,0.2),inset_0_-3px_6px_rgba(0,0,0,0.35)]",
+          className,
+        )}
+        {...props}
+      >
+        <span className="sr-only" aria-live="polite">
+          {loading ? loadingLabel : added ? addedLabel : ""}
+        </span>
+
+        {/* Fixed icon slot keeps the icon and label aligned in every phase. */}
+        <span className="relative size-4 shrink-0">
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              idle
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            <ShoppingBag size={15} strokeWidth={2} />
+          </span>
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              loading
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            <Loader2
+              size={15}
+              strokeWidth={2.5}
+              className="animate-spin motion-reduce:animate-none"
+            />
+          </span>
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              added
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            <Check size={16} strokeWidth={2.5} />
+          </span>
+        </span>
+
+        <span className="grid">
+          <span
+            aria-hidden={!idle}
+            className={cn(
+              LABEL_LAYER,
+              idle
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {label}
+          </span>
+          <span
+            aria-hidden={!loading}
+            className={cn(
+              LABEL_LAYER,
+              loading
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {loadingLabel}
+          </span>
+          <span
+            aria-hidden={!added}
+            className={cn(
+              LABEL_LAYER,
+              added
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {addedLabel}
+          </span>
+        </span>
+      </button>
+    );
+  },
+);
+
+AddToCartButton.displayName = "AddToCartButton";

package/components/buttons/bookmark-save-button.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Bookmark } from "lucide-react";
+
+export type BookmarkSaveButtonProps = Readonly<
+  {
+    label?: string;
+    savedLabel?: string;
+    defaultSaved?: boolean;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Labels stack in one grid cell; outgoing fades out, incoming fades in after.
+const LABEL_LAYER =
+  "col-start-1 row-start-1 text-left transition-opacity ease-out motion-reduce:transition-none";
+
+// Bookmark save — raised key; the icon fills amber and the label fades over.
+export const BookmarkSaveButton = forwardRef<
+  HTMLButtonElement,
+  BookmarkSaveButtonProps
+>(
+  (
+    {
+      className,
+      label = "Save",
+      savedLabel = "Saved",
+      defaultSaved = false,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [saved, setSaved] = useState(defaultSaved);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={saved}
+        data-slot="bookmark-save-button"
+        onClick={(event) => {
+          setSaved((prev) => !prev);
+          onClick?.(event);
+        }}
+        className={cn(
+          "inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg px-3.5 font-sans text-sm font-medium outline-none select-none",
+          "transition-[background-color,box-shadow,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          // Soft blurred top highlight (not a hard white rim) + lift shadows.
+          "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.1),0_2px_4px_rgba(0,0,0,0.08),inset_0_1px_2px_rgba(255,255,255,0.4),inset_0_-2px_4px_rgba(0,0,0,0.08)]",
+          // Pressing sinks the key with the balanced inset recipe.
+          "active:shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.04),inset_0_-1px_2px_rgba(0,0,0,0.05)]",
+          saved
+            ? "bg-amber-50 text-amber-700 active:bg-amber-100"
+            : "bg-neutral-50 text-neutral-700 hover:text-neutral-900 active:bg-neutral-100",
+          className,
+        )}
+        {...props}
+      >
+        <Bookmark
+          size={16}
+          strokeWidth={2}
+          aria-hidden
+          className={cn(
+            "shrink-0 transition-[fill,color,transform,filter] duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none",
+            "filter-[drop-shadow(0_1px_1px_rgba(0,0,0,0.22))_drop-shadow(0_2px_3px_rgba(0,0,0,0.12))]",
+            saved
+              ? "scale-110 fill-amber-500 text-amber-500 filter-[drop-shadow(0_1px_1px_rgba(245,158,11,0.35))_drop-shadow(0_2px_4px_rgba(245,158,11,0.2))]"
+              : "scale-100 fill-transparent text-neutral-500",
+          )}
+        />
+
+        <span className="grid">
+          <span
+            aria-hidden={saved}
+            className={cn(
+              LABEL_LAYER,
+              saved
+                ? "opacity-0 duration-200"
+                : "opacity-100 delay-200 duration-300",
+            )}
+          >
+            {label}
+          </span>
+          <span
+            aria-hidden={!saved}
+            className={cn(
+              LABEL_LAYER,
+              saved
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {savedLabel}
+          </span>
+        </span>
+      </button>
+    );
+  },
+);
+
+BookmarkSaveButton.displayName = "BookmarkSaveButton";

package/components/buttons/cinder-latch-button.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type CinderLatchButtonProps = Readonly<
+  {
+    children?: ReactNode;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const CINDER_SHELL =
+  "linear-gradient(180deg, #3a3a3a 0%, #1d1d1d 48%, #101010 100%)";
+const CINDER_EMBER =
+  "radial-gradient(circle 70px at 50% 115%, rgba(251,146,60,0.55), rgba(225,29,72,0.22), transparent 72%)";
+const CINDER_FACE =
+  "linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 28%, rgba(0,0,0,0.2) 100%)";
+
+export const CinderLatchButton = forwardRef<
+  HTMLButtonElement,
+  CinderLatchButtonProps
+>(
+  (
+    { children = "Unlock", className, type = "button", disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="cinder-latch-button"
+        className={cn(
+          "relative isolate overflow-hidden rounded-[18px] border-0 px-6 py-3.5 text-[1.05rem] ring-0 outline-none",
+          "font-sans font-medium tracking-tight text-neutral-100",
+          "shadow-[0_1px_0_rgba(255,255,255,0.14),0_12px_28px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.12)]",
+          "transition-[transform,box-shadow,filter] duration-200 ease-out",
+          "hover:brightness-110 active:translate-y-px active:brightness-95",
+          "motion-reduce:transition-none motion-reduce:hover:brightness-100 motion-reduce:active:translate-y-0",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-300",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        style={{ background: CINDER_SHELL }}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          data-layer="cinder-ember"
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-[70%]"
+          style={{ background: CINDER_EMBER }}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="cinder-groove"
+          className="pointer-events-none absolute inset-x-4 top-1/2 h-px -translate-y-1/2 bg-white/10"
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="cinder-face-sheen"
+          className="pointer-events-none absolute inset-0"
+          style={{ background: CINDER_FACE }}
+        />
+
+        <span data-layer="cinder-label" className="relative z-1">
+          {children}
+        </span>
+      </button>
+    );
+  },
+);
+
+CinderLatchButton.displayName = "CinderLatchButton";

package/components/buttons/copy-button.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Check, Copy } from "lucide-react";
+
+export type CopyButtonProps = Readonly<
+  {
+    value?: string;
+    label?: string;
+    copiedLabel?: string;
+    resetMs?: number;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Icons stack in one fixed slot and fade with the same rhythm as the labels.
+const ICON_LAYER =
+  "absolute inset-0 grid place-items-center transition-opacity ease-out motion-reduce:transition-none";
+
+// Labels stack in one grid cell; outgoing fades out, incoming fades in after.
+const LABEL_LAYER =
+  "col-start-1 row-start-1 text-left transition-opacity ease-out motion-reduce:transition-none";
+
+// Soft cast shadow under the glyph — 3D lift, no hard outline rim.
+const ICON_SHADOW =
+  "filter-[drop-shadow(0_1px_1px_rgba(0,0,0,0.22))_drop-shadow(0_2px_3px_rgba(0,0,0,0.12))]";
+const ICON_SHADOW_COPIED =
+  "filter-[drop-shadow(0_1px_1px_rgba(4,120,87,0.3))_drop-shadow(0_2px_3px_rgba(4,120,87,0.15))]";
+
+// Copy — writes to clipboard and fades the icon and label to a confirmation.
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      className,
+      value = "npm i @appui/components",
+      label = "Copy",
+      copiedLabel = "Copied",
+      resetMs = 1600,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null) {
+          globalThis.clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+
+    const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      try {
+        await navigator.clipboard.writeText(value);
+      } catch {
+        // Clipboard may be unavailable; still show the confirmation state.
+      }
+      setCopied(true);
+      if (timerRef.current !== null) globalThis.clearTimeout(timerRef.current);
+      timerRef.current = globalThis.setTimeout(() => setCopied(false), resetMs);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="copy-button"
+        data-copied={copied}
+        onClick={handleClick}
+        className={cn(
+          "inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg bg-neutral-50 px-3.5 font-sans text-sm font-medium outline-none select-none",
+          "transition-[background-color,box-shadow,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          // Raised keycap: hairline outline, downward shadows, bottom shade.
+          "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.12),0_2px_3px_rgba(0,0,0,0.12),inset_0_-2px_3px_rgba(0,0,0,0.08)]",
+          // Pressing sinks the key with the balanced inset recipe.
+          "active:bg-neutral-100 active:shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(0,0,0,0.06),inset_0_2px_3px_rgba(0,0,0,0.03),inset_0_-2px_3px_rgba(0,0,0,0.05)]",
+          copied
+            ? "text-emerald-700"
+            : "text-neutral-700 hover:text-neutral-900",
+          className,
+        )}
+        {...props}
+      >
+        {/* Bare icon in a fixed slot — no chip background. */}
+        <span className="relative size-4 shrink-0">
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              copied
+                ? "opacity-0 duration-200"
+                : "opacity-100 delay-200 duration-300",
+            )}
+          >
+            <Copy size={12} strokeWidth={2} className={ICON_SHADOW} />
+          </span>
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              copied
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            <Check size={14} strokeWidth={2.5} className={ICON_SHADOW_COPIED} />
+          </span>
+        </span>
+
+        <span className="grid [text-shadow:0_1px_0_rgba(255,255,255,0.8)]">
+          <span
+            aria-hidden={copied}
+            className={cn(
+              LABEL_LAYER,
+              copied
+                ? "opacity-0 duration-200"
+                : "opacity-100 delay-200 duration-300",
+            )}
+          >
+            {label}
+          </span>
+          <span
+            aria-hidden={!copied}
+            className={cn(
+              LABEL_LAYER,
+              copied
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {copiedLabel}
+          </span>
+        </span>
+
+        <span className="sr-only" aria-live="polite">
+          {copied ? copiedLabel : ""}
+        </span>
+      </button>
+    );
+  },
+);
+
+CopyButton.displayName = "CopyButton";

package/components/buttons/depth-outline-button.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type DepthOutlineButtonSize = "sm" | "md" | "lg";
+
+export type DepthOutlineButtonProps = Readonly<
+  {
+    children: ReactNode;
+    size?: DepthOutlineButtonSize;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SIZE: Record<DepthOutlineButtonSize, string> = {
+  sm: "h-9 gap-1.5 rounded-lg px-3.5 text-xs tracking-wide",
+  md: "h-10 gap-2 rounded-xl px-4 text-sm tracking-wide",
+  lg: "h-12 gap-2 rounded-xl px-5 text-sm tracking-wide",
+};
+
+// Resting: dual-edge (hairline + float) with a soft top lip — not a flat border.
+const REST =
+  "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.04),0_4px_10px_rgba(0,0,0,0.05),0_12px_28px_rgba(0,0,0,0.05),inset_0_1px_1px_rgba(255,255,255,0.75),inset_0_-1px_2px_rgba(0,0,0,0.04)]";
+
+const HOVER =
+  "hover:bg-neutral-50 hover:text-neutral-950 hover:shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.05),0_8px_16px_rgba(0,0,0,0.07),0_20px_40px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(255,255,255,0.8),inset_0_-1px_2px_rgba(0,0,0,0.05)]";
+
+const PRESSED =
+  "active:bg-neutral-100 active:shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04),inset_0_2px_4px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]";
+
+// DepthOutlineButton — premium outlined CTA with layered float depth; pass any children.
+export const DepthOutlineButton = forwardRef<
+  HTMLButtonElement,
+  DepthOutlineButtonProps
+>(
+  (
+    { className, children, size = "md", type = "button", disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="depth-outline-button"
+        data-size={size}
+        className={cn(
+          "inline-flex cursor-pointer items-center justify-center bg-white font-sans font-semibold text-neutral-800 outline-none select-none",
+          "transition-[background-color,box-shadow,color,transform] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "active:translate-y-px motion-reduce:active:translate-y-0",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40",
+          REST,
+          HOVER,
+          PRESSED,
+          SIZE[size],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+DepthOutlineButton.displayName = "DepthOutlineButton";