motion-ui-skill 2.0.0

package/components/buttons/dimple-switch.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  forwardRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const DIMPLE_MARK_COUNT = 12;
+
+export type DimpleSwitchProps = Readonly<
+  {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: string;
+  } & Omit<
+    ComponentPropsWithoutRef<"input">,
+    "type" | "checked" | "defaultChecked" | "onChange"
+  >
+>;
+
+const DIMPLE_FRAME =
+  "relative inline-flex items-center justify-center rounded-lg p-0.5 text-2xl bg-linear-to-b from-[#d5d5d5] to-[#e8e8e8] shadow-[0_1px_1px_rgba(255,255,255,0.6)]";
+
+const DIMPLE_TRACK =
+  "relative flex h-[1.5em] w-[3em] items-center rounded-md bg-[#e8e8e8] shadow-[inset_0_0_0.0625em_0.125em_rgba(255,255,255,0.2),inset_0_0_0.0625em_0.125em_rgba(0,0,0,0.4)] transition-[background-color] duration-400 ease-linear motion-reduce:transition-none peer-checked:bg-[#f3b519] peer-checked:[&>span]:left-[1.5625em]";
+
+const DIMPLE_KNOB =
+  "absolute left-[0.0625em] flex h-[1.375em] w-[1.375em] items-center justify-center rounded-[0.3125em] bg-[#e8e8e8] shadow-[inset_0_-0.0625em_0.0625em_0.125em_rgba(0,0,0,0.1),inset_0_-0.125em_0.0625em_rgba(0,0,0,0.2),inset_0_0.1875em_0.0625em_rgba(255,255,255,0.3),0_0.125em_0.125em_rgba(0,0,0,0.5)] transition-[left] duration-400 ease-linear motion-reduce:transition-none";
+
+const DIMPLE_MARK_GRADIENT =
+  "radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4)";
+
+export const DimpleSwitch = forwardRef<HTMLInputElement, DimpleSwitchProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      label = "Enable setting",
+      disabled,
+      id,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isOn = isControlled ? checked : internalChecked;
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      const next = event.target.checked;
+      if (!isControlled) {
+        setInternalChecked(next);
+      }
+      onCheckedChange?.(next);
+    };
+
+    return (
+      <label
+        data-slot="dimple-switch"
+        data-state={isOn ? "on" : "off"}
+        className={cn(
+          DIMPLE_FRAME,
+          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          id={id}
+          type="checkbox"
+          checked={isControlled ? checked : undefined}
+          defaultChecked={isControlled ? undefined : defaultChecked}
+          disabled={disabled}
+          aria-label={label}
+          onChange={handleChange}
+          className="peer absolute inset-0 z-10 h-full w-full cursor-pointer appearance-none opacity-0 ring-0 outline-none focus:ring-0 disabled:cursor-not-allowed"
+          {...props}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="dimple-track"
+          className={DIMPLE_TRACK}
+        >
+          <span data-layer="dimple-knob" className={DIMPLE_KNOB}>
+            <span
+              data-layer="dimple-knob-grid"
+              className="absolute grid grid-cols-3 gap-0.5"
+            >
+              {Array.from({ length: DIMPLE_MARK_COUNT }, (_, index) => (
+                <span
+                  key={index}
+                  data-layer="dimple-knob-mark"
+                  className="size-0.5 rounded-full"
+                  style={{ backgroundImage: DIMPLE_MARK_GRADIENT }}
+                />
+              ))}
+            </span>
+          </span>
+        </span>
+      </label>
+    );
+  },
+);
+
+DimpleSwitch.displayName = "DimpleSwitch";

package/components/buttons/download-button.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ArrowDownToLine, Check, Loader2 } from "lucide-react";
+
+type Phase = "idle" | "downloading" | "done";
+
+export type DownloadButtonProps = Readonly<
+  {
+    label?: string;
+    downloadingLabel?: string;
+    doneLabel?: string;
+    downloadMs?: number;
+    resetMs?: number;
+    onDownload?: () => void;
+  } & Omit<ComponentPropsWithoutRef<"button">, "onDownload">
+>;
+
+// Icons stack in one fixed slot and crossfade, so nothing shifts.
+const ICON_LAYER =
+  "absolute inset-0 grid place-items-center transition-opacity duration-300 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";
+
+// Download — raised key sinks while downloading, then settles into a green
+// done state; icon morphs arrow → spinner → check in place.
+export const DownloadButton = forwardRef<
+  HTMLButtonElement,
+  DownloadButtonProps
+>(
+  (
+    {
+      className,
+      label = "Download File",
+      downloadingLabel = "Downloading...",
+      doneLabel = "Downloaded",
+      downloadMs = 1400,
+      resetMs = 1800,
+      onDownload,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<Phase>("idle");
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null)
+          globalThis.clearTimeout(timerRef.current);
+      };
+    }, []);
+
+    const schedule = (fn: () => void, ms: number) => {
+      if (timerRef.current !== null) globalThis.clearTimeout(timerRef.current);
+      timerRef.current = globalThis.setTimeout(fn, ms);
+    };
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (phase !== "idle") return;
+
+      setPhase("downloading");
+      onDownload?.();
+
+      schedule(() => {
+        setPhase("done");
+        schedule(() => setPhase("idle"), resetMs);
+      }, downloadMs);
+    };
+
+    const idle = phase === "idle";
+    const downloading = phase === "downloading";
+    const done = phase === "done";
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="download-button"
+        data-phase={phase}
+        aria-busy={downloading || undefined}
+        onClick={handleClick}
+        className={cn(
+          "inline-flex h-10 items-center gap-2 rounded-lg px-4 font-sans text-sm font-medium 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",
+          // Soft 3D key; sinks in while pressed or downloading.
+          "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)]",
+          downloading &&
+            "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)]",
+          idle &&
+            "cursor-pointer bg-neutral-50 text-neutral-700 hover:text-neutral-900 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_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)]",
+          downloading && "cursor-default bg-neutral-100 text-neutral-500",
+          // Done: emerald 3D key — soft sheen + deep lift (no hard white rim).
+          done &&
+            "cursor-default bg-emerald-600 text-white shadow-[0_1px_1px_rgba(0,0,0,0.25),0_3px_6px_rgba(0,0,0,0.2),0_6px_12px_rgba(0,0,0,0.15),inset_0_1px_2px_rgba(255,255,255,0.22),inset_0_-3px_6px_rgba(0,0,0,0.35)]",
+          className,
+        )}
+        {...props}
+      >
+        <span className="sr-only" aria-live="polite">
+          {downloading ? downloadingLabel : done ? doneLabel : ""}
+        </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" : "opacity-0")}
+          >
+            <ArrowDownToLine size={15} strokeWidth={2} />
+          </span>
+          <span
+            aria-hidden
+            className={cn(
+              ICON_LAYER,
+              downloading ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <Loader2
+              size={15}
+              strokeWidth={2}
+              className="animate-spin motion-reduce:animate-none"
+            />
+          </span>
+          <span
+            aria-hidden
+            className={cn(ICON_LAYER, done ? "opacity-100" : "opacity-0")}
+          >
+            <Check size={15} 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={!downloading}
+            className={cn(
+              LABEL_LAYER,
+              downloading
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {downloadingLabel}
+          </span>
+          <span
+            aria-hidden={!done}
+            className={cn(
+              LABEL_LAYER,
+              done
+                ? "opacity-100 delay-200 duration-300"
+                : "opacity-0 duration-200",
+            )}
+          >
+            {doneLabel}
+          </span>
+        </span>
+      </button>
+    );
+  },
+);
+
+DownloadButton.displayName = "DownloadButton";

package/components/buttons/follow-button.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { UserCheck, UserPlus } from "lucide-react";
+
+export type FollowButtonProps = Readonly<
+  {
+    label?: string;
+    followingLabel?: string;
+    defaultFollowing?: boolean;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Both labels stack in the same grid cell so the button width never jumps.
+// The outgoing label fades out first; the incoming one fades in after a
+// short delay, so the swap reads as fade-out, then fade-in.
+const LABEL_LAYER =
+  "col-start-1 row-start-1 flex items-center justify-center gap-2 transition-opacity ease-out motion-reduce:transition-none";
+
+// Follow toggle — raised dark key becomes a quiet light "Following" key.
+export const FollowButton = forwardRef<HTMLButtonElement, FollowButtonProps>(
+  (
+    {
+      className,
+      label = "Follow",
+      followingLabel = "Following",
+      defaultFollowing = false,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [following, setFollowing] = useState(defaultFollowing);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={following}
+        data-slot="follow-button"
+        onClick={(event) => {
+          setFollowing((prev) => !prev);
+          onClick?.(event);
+        }}
+        className={cn(
+          "grid h-10 cursor-pointer place-items-stretch rounded-full px-4 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",
+          following
+            ? cn(
+                // Light raised keycap — soft blurred highlight, not a hard rim.
+                "bg-neutral-50 text-neutral-600",
+                "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)]",
+                "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_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)]",
+              )
+            : cn(
+                // Dark 3D key: soft top sheen + deep lift + bottom recess.
+                "bg-neutral-900 text-white hover:bg-neutral-800",
+                "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)]",
+                "active:bg-neutral-950 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)]",
+              ),
+          className,
+        )}
+        {...props}
+      >
+        <span
+          aria-hidden={following}
+          className={cn(
+            LABEL_LAYER,
+            following
+              ? "opacity-0 duration-200"
+              : "opacity-100 delay-200 duration-300",
+          )}
+        >
+          <UserPlus size={15} strokeWidth={2} aria-hidden />
+          {label}
+        </span>
+
+        <span
+          aria-hidden={!following}
+          className={cn(
+            LABEL_LAYER,
+            following
+              ? "opacity-100 delay-200 duration-300"
+              : "opacity-0 duration-200",
+          )}
+        >
+          <UserCheck size={15} strokeWidth={2} aria-hidden />
+          {followingLabel}
+        </span>
+      </button>
+    );
+  },
+);
+
+FollowButton.displayName = "FollowButton";

package/components/buttons/hold-to-delete-button.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Check, Trash2 } from "lucide-react";
+
+export type HoldToDeleteButtonProps = Readonly<
+  {
+    label?: string;
+    doneLabel?: string;
+    holdMs?: number;
+    onHoldComplete?: () => void;
+  } & Omit<ComponentPropsWithoutRef<"button">, "onHoldComplete">
+>;
+
+// Snap the requested hold time to a duration Tailwind can compile statically.
+const HOLD_STEPS = [
+  { ms: 500, className: "duration-500" },
+  { ms: 700, className: "duration-700" },
+  { ms: 1000, className: "duration-1000" },
+  { ms: 1100, className: "duration-[1100ms]" },
+  { ms: 1500, className: "duration-[1500ms]" },
+  { ms: 2000, className: "duration-[2000ms]" },
+] as const;
+
+function nearestHoldStep(holdMs: number) {
+  return HOLD_STEPS.reduce((best, step) =>
+    Math.abs(step.ms - holdMs) < Math.abs(best.ms - holdMs) ? step : best,
+  );
+}
+
+// Hold-to-delete — press and hold; the key sinks in while a rose fill wipes
+// across. Release early and it eases back; hold to the end to delete.
+export const HoldToDeleteButton = forwardRef<
+  HTMLButtonElement,
+  HoldToDeleteButtonProps
+>(
+  (
+    {
+      className,
+      label = "Hold to delete",
+      doneLabel = "Deleted",
+      holdMs = 1100,
+      onHoldComplete,
+      ...props
+    },
+    ref,
+  ) => {
+    const [holding, setHolding] = useState(false);
+    const [done, setDone] = useState(false);
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const step = nearestHoldStep(holdMs);
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null)
+          globalThis.clearTimeout(timerRef.current);
+      };
+    }, []);
+
+    const start = () => {
+      if (done || timerRef.current !== null) return;
+      setHolding(true);
+      timerRef.current = globalThis.setTimeout(() => {
+        timerRef.current = null;
+        setHolding(false);
+        setDone(true);
+        onHoldComplete?.();
+      }, step.ms);
+    };
+
+    const cancel = () => {
+      if (timerRef.current !== null) {
+        globalThis.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setHolding(false);
+    };
+
+    const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+      if (event.repeat) return;
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        start();
+      }
+    };
+
+    const handleKeyUp = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+      if (event.key === " " || event.key === "Enter") cancel();
+    };
+
+    // The rose fill slides in while its content slides the opposite way at the
+    // same speed, so the white label looks clipped by the moving red edge.
+    const wipeMotion = cn(
+      "transition-transform motion-reduce:transition-none motion-reduce:transform-none",
+      holding || done
+        ? cn("ease-linear", step.className)
+        : "duration-300 ease-out",
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="hold-to-delete-button"
+        data-holding={holding || undefined}
+        data-done={done || undefined}
+        aria-label={done ? doneLabel : label}
+        onPointerDown={start}
+        onPointerUp={cancel}
+        onPointerLeave={cancel}
+        onPointerCancel={cancel}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onContextMenu={(event) => event.preventDefault()}
+        disabled={done}
+        className={cn(
+          "relative flex h-12 w-56 touch-none items-center justify-center overflow-hidden rounded-xl bg-neutral-50 font-sans text-sm font-medium outline-none select-none",
+          "transition-shadow 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-rose-600",
+          // Outer keycap shadows only — the inset bevels live on an overlay so
+          // they stay visible above the red fill.
+          "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)]",
+          (holding || done) &&
+            "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.06)]",
+          !done && "cursor-pointer",
+          className,
+        )}
+        {...props}
+      >
+        {/* Idle label — crisp, no engraving so the rose text stays readable. */}
+        <span className="flex items-center justify-center gap-2 text-rose-600">
+          <Trash2 size={15} strokeWidth={2} aria-hidden />
+          {label}
+        </span>
+
+        {/* Solid rose fill wiping left to right, clipping in the white label. */}
+        <span
+          aria-hidden
+          className={cn(
+            // overflow-hidden clips the counter-translated label so it is only
+            // revealed by the fill's moving edge.
+            "absolute inset-0 overflow-hidden bg-rose-600",
+            wipeMotion,
+            holding || done ? "translate-x-0" : "-translate-x-full",
+          )}
+        >
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center gap-2 text-white",
+              wipeMotion,
+              holding || done ? "translate-x-0" : "translate-x-full",
+              "transition-[transform,opacity]",
+              // Once deleted, the hold label slowly fades out first...
+              done ? "opacity-0 duration-300 ease-out" : "opacity-100",
+            )}
+          >
+            <Trash2 size={15} strokeWidth={2} aria-hidden />
+            {label}
+          </span>
+
+          {/* ...then the done label fades in after it. */}
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center gap-2 text-white",
+              "transition-opacity duration-500 ease-out motion-reduce:transition-none",
+              done ? "opacity-100 delay-300" : "opacity-0",
+            )}
+          >
+            <Check size={15} strokeWidth={2.5} aria-hidden />
+            {doneLabel}
+          </span>
+        </span>
+
+        {/* Bevel overlay above the fill so the key stays 3D while turning red:
+            faint white bevel on top, sunken shading top and bottom. */}
+        <span
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute inset-0 rounded-[inherit]",
+            "transition-shadow duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+            holding || done
+              ? "shadow-[inset_0_1px_0_rgba(255,255,255,0.25),inset_0_2px_4px_rgba(0,0,0,0.25),inset_0_-2px_3px_rgba(0,0,0,0.2)]"
+              : "shadow-[inset_0_-2px_3px_rgba(0,0,0,0.08)]",
+          )}
+        />
+
+        <span className="sr-only" aria-live="polite">
+          {done ? doneLabel : ""}
+        </span>
+      </button>
+    );
+  },
+);
+
+HoldToDeleteButton.displayName = "HoldToDeleteButton";

package/components/buttons/inset-button.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type InsetButtonVariant = "light" | "dark";
+export type InsetButtonSize = "sm" | "md" | "lg";
+
+export type InsetButtonProps = Readonly<
+  {
+    children: ReactNode;
+    variant?: InsetButtonVariant;
+    size?: InsetButtonSize;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SIZE: Record<InsetButtonSize, string> = {
+  sm: "h-9 gap-1.5 rounded-lg px-3.5 text-xs",
+  md: "h-10 gap-2 rounded-lg px-4 text-sm",
+  lg: "h-12 gap-2 rounded-xl px-5 text-sm",
+};
+
+const VARIANT: Record<InsetButtonVariant, string> = {
+  light: cn(
+    "bg-neutral-100 text-neutral-700",
+    "shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),inset_0_-1px_1px_rgba(255,255,255,0.7)]",
+    "hover:bg-neutral-200/70 hover:text-neutral-900",
+    "active:shadow-[inset_0_3px_6px_rgba(0,0,0,0.14),inset_0_-1px_1px_rgba(255,255,255,0.5)]",
+  ),
+  dark: cn(
+    "bg-neutral-800 text-neutral-100",
+    "shadow-[inset_0_2px_5px_rgba(0,0,0,0.55),inset_0_-1px_1px_rgba(255,255,255,0.08)]",
+    "hover:bg-neutral-700 hover:text-white",
+    "active:shadow-[inset_0_3px_8px_rgba(0,0,0,0.65),inset_0_-1px_1px_rgba(255,255,255,0.06)]",
+  ),
+};
+
+// InsetButton — recessed / pressed-in look; pass any children.
+export const InsetButton = forwardRef<HTMLButtonElement, InsetButtonProps>(
+  (
+    {
+      className,
+      children,
+      variant = "light",
+      size = "md",
+      type = "button",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="inset-button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          "inline-flex cursor-pointer items-center justify-center font-sans font-semibold 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",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40",
+          SIZE[size],
+          VARIANT[variant],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+InsetButton.displayName = "InsetButton";