motion-ui-skill 2.0.0

package/components/buttons/slate-chip-switch.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  forwardRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type SlateChipSwitchProps = Readonly<
+  {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: string;
+  } & Omit<
+    ComponentPropsWithoutRef<"input">,
+    "type" | "checked" | "defaultChecked" | "onChange"
+  >
+>;
+
+const CHIP_FRAME =
+  "relative inline-flex items-center rounded-full p-1 text-xl bg-linear-to-b from-[#eceff3] to-[#d9dee5] shadow-[0_1px_1px_rgba(255,255,255,0.75)]";
+
+const CHIP_TRACK =
+  "relative h-[1.45em] w-[2.85em] rounded-full bg-[#c7ced8] shadow-[inset_0_1px_3px_rgba(0,0,0,0.18)] transition-[background-color,box-shadow] duration-300 ease-out motion-reduce:transition-none peer-checked:bg-sky-500 peer-checked:shadow-[inset_0_1px_3px_rgba(0,0,0,0.12),0_0_0_1px_rgba(14,116,144,0.25)] peer-checked:[&>span]:translate-x-[1.35em]";
+
+const CHIP_THUMB =
+  "absolute left-[0.08em] top-1/2 size-[1.22em] -translate-y-1/2 rounded-full bg-white shadow-[0_2px_5px_rgba(0,0,0,0.22),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none";
+
+export const SlateChipSwitch = forwardRef<
+  HTMLInputElement,
+  SlateChipSwitchProps
+>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      label = "Enable mode",
+      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="slate-chip-switch"
+        data-state={isOn ? "on" : "off"}
+        className={cn(
+          CHIP_FRAME,
+          "has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-sky-400",
+          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="chip-track" className={CHIP_TRACK}>
+          <span data-layer="chip-thumb" className={CHIP_THUMB} />
+        </span>
+      </label>
+    );
+  },
+);
+
+SlateChipSwitch.displayName = "SlateChipSwitch";

package/components/buttons/slide-to-confirm-button.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import {
+  forwardRef,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ArrowRight, Check } from "lucide-react";
+
+const PAD = 4;
+const KNOB = 48;
+
+export type SlideToConfirmButtonProps = Readonly<
+  {
+    label?: string;
+    confirmedLabel?: string;
+    onConfirm?: () => void;
+  } & Omit<ComponentPropsWithoutRef<"div">, "onConfirm">
+>;
+
+// Slide-to-confirm — drag the knob across the track to commit an action.
+export const SlideToConfirmButton = forwardRef<
+  HTMLDivElement,
+  SlideToConfirmButtonProps
+>(
+  (
+    {
+      className,
+      label = "Slide to confirm",
+      confirmedLabel = "Confirmed",
+      onConfirm,
+      ...props
+    },
+    ref,
+  ) => {
+    const trackRef = useRef<HTMLDivElement>(null);
+    const draggingRef = useRef(false);
+    const [x, setX] = useState(0);
+    const [confirmed, setConfirmed] = useState(false);
+
+    const maxX = () => {
+      const track = trackRef.current;
+      if (!track) return 0;
+      return track.offsetWidth - KNOB - PAD * 2;
+    };
+
+    const handleDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+      if (confirmed) return;
+      draggingRef.current = true;
+      event.currentTarget.setPointerCapture(event.pointerId);
+    };
+
+    const handleMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
+      if (!draggingRef.current || confirmed) return;
+      const track = trackRef.current;
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      const next = Math.min(
+        Math.max(event.clientX - rect.left - PAD - KNOB / 2, 0),
+        maxX(),
+      );
+      setX(next);
+    };
+
+    const handleUp = () => {
+      if (!draggingRef.current) return;
+      draggingRef.current = false;
+      if (x >= maxX() - 4) {
+        setX(maxX());
+        setConfirmed(true);
+        onConfirm?.();
+      } else {
+        setX(0);
+      }
+    };
+
+    const progress = maxX() > 0 ? x / maxX() : 0;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="slide-to-confirm-button"
+        className="font-sans select-none"
+        {...props}
+      >
+        <div
+          ref={trackRef}
+          className={cn(
+            // transform-gpu + isolate promote the track to its own compositor
+            // layer so the knob's moving shadow can't leave stale ghost pixels.
+            "relative isolate h-14 w-72 transform-gpu overflow-hidden rounded-full p-1 transition-[background-color,box-shadow] duration-300",
+            "shadow-[inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.05),inset_0_-2px_3px_rgba(0,0,0,0.06),0_1px_0_rgba(255,255,255,0.9)]",
+            confirmed
+              ? "bg-emerald-600 shadow-[inset_0_1px_3px_rgba(0,0,0,0.2),inset_0_-2px_3px_rgba(0,0,0,0.12),0_1px_0_rgba(255,255,255,0.9)]"
+              : "bg-neutral-100",
+            className,
+          )}
+        >
+          <span
+            aria-hidden
+            className={cn(
+              "absolute inset-0 flex items-center justify-center text-sm font-medium transition-colors duration-200",
+              confirmed
+                ? "text-white [text-shadow:0_1px_1px_rgba(0,0,0,0.25)]"
+                : "text-neutral-500 [text-shadow:0_1px_0_rgba(255,255,255,0.8)]",
+            )}
+            style={{ opacity: confirmed ? 1 : 1 - progress * 1.4 }}
+          >
+            {confirmed ? confirmedLabel : label}
+          </span>
+
+          <button
+            type="button"
+            aria-label={label}
+            disabled={confirmed}
+            onPointerDown={handleDown}
+            onPointerMove={handleMove}
+            onPointerUp={handleUp}
+            onPointerCancel={handleUp}
+            className={cn(
+              // will-change keeps the knob on its own compositor layer so the
+              // moving box-shadow doesn't leave stale ghost pixels on the track.
+              "absolute top-1 left-1 flex size-12 touch-none items-center justify-center rounded-full bg-neutral-50 text-neutral-700 will-change-transform",
+              // Keycap material like the quantity stepper, but with a tight,
+              // downward-only shadow so the knob sits in the groove instead of
+              // floating in a soft halo.
+              "shadow-[0_1px_1px_rgba(0,0,0,0.12),0_2px_3px_rgba(0,0,0,0.12),inset_0_1.5px_0_rgba(255,255,255,1),inset_0_-2px_3px_rgba(0,0,0,0.1)]",
+              confirmed
+                ? "cursor-default"
+                : "cursor-grab active:cursor-grabbing active:bg-neutral-100 active:shadow-[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)]",
+              draggingRef.current
+                ? "transition-[box-shadow,background-color] duration-200 ease-out"
+                : "transition-[transform,box-shadow,background-color] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
+            )}
+            style={{ transform: `translate3d(${x}px, 0, 0)` }}
+          >
+            {confirmed ? (
+              <Check
+                size={18}
+                strokeWidth={2.5}
+                aria-hidden
+                className="text-emerald-600 filter-[drop-shadow(0_1px_0_rgba(255,255,255,0.9))_drop-shadow(0_-1px_0.5px_rgba(0,0,0,0.12))]"
+              />
+            ) : (
+              <ArrowRight
+                size={18}
+                strokeWidth={2.5}
+                aria-hidden
+                className="filter-[drop-shadow(0_1px_0_rgba(255,255,255,0.9))_drop-shadow(0_-1px_0.5px_rgba(0,0,0,0.12))]"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+SlideToConfirmButton.displayName = "SlideToConfirmButton";

package/components/buttons/soft-pill-button.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type SoftPillButtonVariant = "light" | "dark";
+export type SoftPillButtonSize = "sm" | "md" | "lg";
+
+export type SoftPillButtonProps = Readonly<
+  {
+    children: ReactNode;
+    variant?: SoftPillButtonVariant;
+    size?: SoftPillButtonSize;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SIZE: Record<SoftPillButtonSize, string> = {
+  sm: "h-9 gap-1.5 rounded-full px-4 text-xs",
+  md: "h-10 gap-2 rounded-full px-5 text-sm",
+  lg: "h-12 gap-2 rounded-full px-6 text-sm",
+};
+
+const VARIANT: Record<SoftPillButtonVariant, string> = {
+  light: cn(
+    "bg-white text-neutral-800",
+    "shadow-[0_2px_4px_rgba(0,0,0,0.06),0_8px_20px_rgba(0,0,0,0.08)]",
+    "hover:bg-neutral-50 hover:text-neutral-900",
+    "active:bg-neutral-100 active:shadow-[0_1px_2px_rgba(0,0,0,0.06),0_3px_8px_rgba(0,0,0,0.06)]",
+  ),
+  dark: cn(
+    "bg-neutral-800 text-white",
+    "shadow-[0_2px_4px_rgba(0,0,0,0.2),0_8px_20px_rgba(0,0,0,0.25)]",
+    "hover:bg-neutral-700",
+    "active:bg-neutral-900 active:shadow-[0_1px_2px_rgba(0,0,0,0.2),0_3px_8px_rgba(0,0,0,0.2)]",
+  ),
+};
+
+// SoftPillButton — floating rounded pill; pass any children.
+export const SoftPillButton = forwardRef<
+  HTMLButtonElement,
+  SoftPillButtonProps
+>(
+  (
+    {
+      className,
+      children,
+      variant = "light",
+      size = "md",
+      type = "button",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="soft-pill-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,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",
+          SIZE[size],
+          VARIANT[variant],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+SoftPillButton.displayName = "SoftPillButton";

package/components/buttons/soft-ui-button.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type SoftUiButtonSize = "sm" | "md" | "lg";
+
+export type SoftUiButtonProps = Readonly<
+  {
+    children: ReactNode;
+    size?: SoftUiButtonSize;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SIZE: Record<SoftUiButtonSize, string> = {
+  sm: "h-9 gap-1.5 rounded-xl px-3.5 text-xs",
+  md: "h-10 gap-2 rounded-xl px-4 text-sm",
+  lg: "h-12 gap-2 rounded-2xl px-5 text-sm",
+};
+
+// Soft UI / neumorphic — even light + dark shadows, no hard bevel rim.
+// SoftUiButton — universal soft-UI button; pass any children.
+export const SoftUiButton = forwardRef<HTMLButtonElement, SoftUiButtonProps>(
+  (
+    { className, children, size = "md", type = "button", disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="soft-ui-button"
+        data-size={size}
+        className={cn(
+          "inline-flex cursor-pointer items-center justify-center bg-neutral-100 font-sans font-semibold text-neutral-800 outline-none select-none",
+          "shadow-[6px_6px_14px_rgba(0,0,0,0.08),-6px_-6px_14px_rgba(255,255,255,0.9)]",
+          "transition-[box-shadow,background-color,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "hover:text-neutral-900",
+          "active:shadow-[inset_4px_4px_10px_rgba(0,0,0,0.08),inset_-4px_-4px_10px_rgba(255,255,255,0.85)]",
+          "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],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+SoftUiButton.displayName = "SoftUiButton";

package/components/buttons/three-d-button.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type ThreeDButtonVariant = "solid" | "soft" | "muted";
+export type ThreeDButtonSize = "sm" | "md" | "lg" | "icon";
+
+export type ThreeDButtonProps = Readonly<
+  {
+    children: ReactNode;
+    variant?: ThreeDButtonVariant;
+    size?: ThreeDButtonSize;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SIZE: Record<ThreeDButtonSize, string> = {
+  sm: "h-9 gap-1.5 rounded-lg px-3 text-xs",
+  md: "h-10 gap-2 rounded-lg px-4 text-sm",
+  lg: "h-12 gap-2 rounded-xl px-5 text-sm",
+  icon: "size-10 rounded-lg p-0",
+};
+
+// Soft diffused top light + bottom shade — no hard white rim.
+const BEVEL_LIGHT =
+  "shadow-[0_1px_1px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.1),0_6px_12px_rgba(0,0,0,0.08),inset_0_1px_2px_rgba(255,255,255,0.35),inset_0_-2px_4px_rgba(0,0,0,0.08)]";
+const PRESSED_LIGHT =
+  "active:shadow-[0_1px_1px_rgba(0,0,0,0.05),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)]";
+
+// Dark key: soft top sheen (blurred, not a sharp bar) + deep lift + bottom recess.
+const BEVEL_DARK =
+  "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)]";
+const PRESSED_DARK =
+  "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)]";
+
+const VARIANT: Record<ThreeDButtonVariant, string> = {
+  solid: cn(
+    "bg-neutral-800 text-white hover:bg-neutral-700 active:bg-neutral-900",
+    BEVEL_DARK,
+    PRESSED_DARK,
+  ),
+  soft: cn(
+    "bg-neutral-50 text-neutral-800 hover:text-neutral-900 active:bg-neutral-100",
+    BEVEL_LIGHT,
+    PRESSED_LIGHT,
+  ),
+  muted: cn(
+    "bg-neutral-100 text-neutral-700 hover:bg-neutral-200/80 hover:text-neutral-900 active:bg-neutral-200",
+    BEVEL_LIGHT,
+    PRESSED_LIGHT,
+  ),
+};
+
+// Universal 3D button — pass any children (label, icon + label, icon only).
+export const ThreeDButton = forwardRef<HTMLButtonElement, ThreeDButtonProps>(
+  (
+    {
+      className,
+      children,
+      variant = "solid",
+      size = "md",
+      type = "button",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="3d-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],
+          size === "icon" && "shrink-0",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+ThreeDButton.displayName = "ThreeDButton";

package/components/buttons/three-d-icon-button.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type ThreeDIconButtonProps = Readonly<
+  {
+    children: ReactNode;
+    label: string;
+    variant?: "solid" | "soft" | "muted";
+  } & Omit<ComponentPropsWithoutRef<"button">, "children" | "aria-label">
+>;
+
+const BEVEL_LIGHT =
+  "shadow-[0_1px_1px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.1),0_6px_12px_rgba(0,0,0,0.08),inset_0_1px_2px_rgba(255,255,255,0.35),inset_0_-2px_4px_rgba(0,0,0,0.08)]";
+const PRESSED_LIGHT =
+  "active:shadow-[0_1px_1px_rgba(0,0,0,0.05),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)]";
+
+const BEVEL_DARK =
+  "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)]";
+const PRESSED_DARK =
+  "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)]";
+
+const VARIANT = {
+  solid: cn(
+    "bg-neutral-800 text-white hover:bg-neutral-700 active:bg-neutral-900",
+    BEVEL_DARK,
+    PRESSED_DARK,
+  ),
+  soft: cn(
+    "bg-neutral-50 text-neutral-700 hover:text-neutral-900 active:bg-neutral-100",
+    BEVEL_LIGHT,
+    PRESSED_LIGHT,
+  ),
+  muted: cn(
+    "bg-neutral-100 text-neutral-600 hover:text-neutral-900 active:bg-neutral-200",
+    BEVEL_LIGHT,
+    PRESSED_LIGHT,
+  ),
+} as const;
+
+// Square 3D icon button — pass any lucide (or custom) icon as children.
+export const ThreeDIconButton = forwardRef<
+  HTMLButtonElement,
+  ThreeDIconButtonProps
+>(
+  (
+    {
+      className,
+      children,
+      label,
+      variant = "soft",
+      type = "button",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        aria-label={label}
+        data-slot="3d-icon-button"
+        data-variant={variant}
+        className={cn(
+          "inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg 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",
+          VARIANT[variant],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+ThreeDIconButton.displayName = "ThreeDIconButton";