motion-ui-skill 2.0.0

package/components/widgets/ride-pickup-widget.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { Car } from "lucide-react";
+
+// Ride-hailing pickup card — ETA, vehicle info, and driver photo.
+export type RidePickupWidgetProps = Readonly<
+  {
+    eta?: string;
+    message?: string;
+    vehicle?: string;
+    image?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Ride Pickup component — styled with Tailwind CSS.
+export const RidePickupWidget = forwardRef<
+  HTMLDivElement,
+  RidePickupWidgetProps
+>(
+  (
+    {
+      className,
+      eta = "2 min",
+      message = "Meet at the pickup point",
+      vehicle = "Mercedes-Benz S00121",
+      image = "/car.png",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="ride-pickup-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between px-4 pt-4">
+        <span className="text-xs font-bold tracking-wide text-neutral-900">
+          Uber
+        </span>
+        <span className="text-[10px] font-bold text-green-500">{eta}</span>
+      </div>
+
+      <div className="relative mx-auto my-2 h-20 w-32">
+        <Image
+          src={image}
+          alt={vehicle}
+          fill
+          className="object-contain"
+          sizes="128px"
+        />
+      </div>
+
+      <div className="mt-auto rounded-b-3xl bg-neutral-50 px-4 py-3">
+        <p className="text-[11px] font-semibold text-neutral-900">{message}</p>
+        <p className="flex items-center gap-1 text-[10px] text-neutral-500">
+          <Car size={10} />
+          {vehicle}
+        </p>
+      </div>
+    </div>
+  ),
+);
+
+RidePickupWidget.displayName = "RidePickupWidget";

package/components/widgets/sleep-score-widget.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Moon } from "lucide-react";
+
+const MASCOT = "#38BDF8";
+const ACCENT = "#7DD3FC";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+
+export type SleepScoreWidgetProps = Readonly<
+  {
+    score?: number;
+    quality?: string;
+    duration?: string;
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Sleep score — DND-style face card with closed eyes and a calm dial.
+export const SleepScoreWidget = forwardRef<
+  HTMLDivElement,
+  SleepScoreWidgetProps
+>(
+  (
+    {
+      className,
+      score = 87,
+      quality = "Good",
+      duration = "7h 24m",
+      label = "Sleep",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="sleep-score-widget"
+        className={cn(
+          "relative h-44 w-44 overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <svg
+          viewBox="0 0 176 176"
+          className="absolute inset-0 h-full w-full"
+          aria-hidden
+        >
+          <rect width="176" height="176" fill="#020617" />
+          <circle cx="88" cy="142" r="58" fill={MASCOT} />
+          <path
+            d="M64 122 Q68 118 72 122"
+            stroke="white"
+            strokeWidth="2.2"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M104 122 Q108 118 112 122"
+            stroke="white"
+            strokeWidth="2.2"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M78 138 Q88 143 98 138"
+            stroke="white"
+            strokeWidth="2.2"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <circle
+            cx={DIAL.cx}
+            cy={DIAL.cy}
+            r={DIAL.r}
+            fill="none"
+            stroke={ACCENT}
+            strokeWidth="1.5"
+            opacity="0.28"
+          />
+        </svg>
+
+        <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+          <Moon size={14} color={ACCENT} fill={ACCENT} />
+        </span>
+
+        <div className="absolute inset-x-0 top-[32%] z-10 px-3 text-center">
+          <p className="text-base leading-none font-semibold text-white tabular-nums">
+            {score}
+          </p>
+          <p className="mt-1 text-[10px] font-medium tracking-wide text-white/40 uppercase">
+            {quality} {label}
+          </p>
+        </div>
+
+        <p className="absolute inset-x-0 bottom-3.5 z-10 text-center text-[10px] text-white/30 tabular-nums">
+          {duration}
+        </p>
+      </div>
+    );
+  },
+);
+
+SleepScoreWidget.displayName = "SleepScoreWidget";

package/components/widgets/step-count-widget.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type StepCountWidgetProps = Readonly<
+  {
+    steps?: number;
+    goal?: number;
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Daily steps — editorial stat card, typography-led.
+export const StepCountWidget = forwardRef<HTMLDivElement, StepCountWidgetProps>(
+  (
+    { className, steps = 8432, goal = 10_000, label = "steps today", ...props },
+    ref,
+  ) => {
+    const progress = Math.min(100, Math.round((steps / goal) * 100));
+
+    return (
+      <div
+        ref={ref}
+        data-slot="step-count-widget"
+        className={cn(
+          "w-64 rounded-3xl border border-neutral-200/80 bg-white p-6 font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <p className="text-[11px] text-neutral-400">Today</p>
+
+        <p className="mt-4 text-5xl leading-none font-light tracking-tight text-neutral-900 tabular-nums">
+          {steps.toLocaleString()}
+        </p>
+        <p className="mt-2 text-sm text-neutral-500">{label}</p>
+
+        <div className="mt-8 flex items-center justify-between border-t border-neutral-100 pt-4">
+          <span className="text-xs text-neutral-400">
+            Goal {goal.toLocaleString()}
+          </span>
+          <span className="text-xs font-medium text-neutral-700 tabular-nums">
+            {progress}%
+          </span>
+        </div>
+      </div>
+    );
+  },
+);
+
+StepCountWidget.displayName = "StepCountWidget";

package/components/widgets/stopwatch-widget.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Play, Pause, Repeat } from "lucide-react";
+
+// Stopwatch widget — start, pause, lap, and reset with centisecond precision.
+// Splits elapsed milliseconds into MM:SS and centiseconds for the display
+function formatStopwatch(ms: number) {
+  const mins = Math.floor(ms / 60_000);
+  const secs = Math.floor((ms % 60_000) / 1000);
+  const centis = Math.floor((ms % 1000) / 10);
+  return {
+    main: `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`,
+    centis: String(centis).padStart(2, "0"),
+  };
+}
+
+type StopSquareProps = Readonly<{
+  size?: number;
+}>;
+
+// Small square icon used on the stop button
+function StopSquare({ size = 8 }: StopSquareProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 8 8" fill="none" aria-hidden>
+      <rect width="8" height="8" rx="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+export type StopwatchWidgetProps = Readonly<ComponentPropsWithoutRef<"div">>;
+
+export const StopwatchWidget = forwardRef<HTMLDivElement, StopwatchWidgetProps>(
+  ({ className, ...props }, ref) => {
+    const [elapsed, setElapsed] = useState(0);
+    const [running, setRunning] = useState(false);
+    // startRef = timestamp when the current run began; baseRef = ms already counted before pause
+    const startRef = useRef<number | null>(null);
+    const baseRef = useRef(0);
+
+    // requestAnimationFrame loop keeps the centisecond readout smooth while running
+    useEffect(() => {
+      if (!running) return;
+
+      startRef.current = performance.now();
+
+      const tick = () => {
+        setElapsed(
+          baseRef.current + (performance.now() - (startRef.current ?? 0)),
+        );
+        frame = globalThis.requestAnimationFrame(tick);
+      };
+
+      let frame = globalThis.requestAnimationFrame(tick);
+      return () => globalThis.cancelAnimationFrame(frame);
+    }, [running]);
+
+    const handlePlay = () => {
+      baseRef.current = elapsed;
+      setRunning(true);
+    };
+
+    const handlePause = () => {
+      if (running && startRef.current !== null) {
+        baseRef.current += performance.now() - startRef.current;
+        setElapsed(baseRef.current);
+      }
+      setRunning(false);
+    };
+
+    // Reset clears elapsed time and stops the timer
+    const clearTimer = () => {
+      baseRef.current = 0;
+      startRef.current = null;
+      setElapsed(0);
+      setRunning(false);
+    };
+
+    const { main, centis } = formatStopwatch(elapsed);
+    const canReset = elapsed > 0 && !running;
+    const canStop = running;
+
+    // Green status dot (top-right), MM:SS.centis readout, reset · play/pause · stop controls
+    return (
+      <div
+        ref={ref}
+        data-slot="minimal-stopwatch-widget"
+        className={cn(
+          "relative flex h-44 w-44 max-w-full flex-col items-center justify-between overflow-hidden rounded-3xl border border-neutral-100 bg-white px-4 py-5 font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            "absolute top-4 right-4 h-2 w-2 rounded-full transition-colors duration-300",
+            running
+              ? "bg-[#34C759]/55 ring-1 ring-[#34C759]/20"
+              : "bg-[#34C759]/18 ring-1 ring-[#34C759]/10",
+          )}
+        />
+
+        <div className="flex flex-1 flex-col items-center justify-center">
+          <p className="flex items-baseline leading-none tabular-nums">
+            <span className="text-[32px] font-extralight tracking-[-0.04em] text-neutral-900">
+              {main}
+            </span>
+            <span className="ml-px text-[15px] font-light text-neutral-400">
+              .{centis}
+            </span>
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2 rounded-full bg-neutral-50 px-2 py-1.5 ring-1 ring-neutral-100">
+          <button
+            type="button"
+            aria-label="Reset stopwatch"
+            onClick={clearTimer}
+            disabled={!canReset}
+            className={cn(
+              "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-white text-neutral-500 ring-1 ring-neutral-200/80 transition-all active:scale-95 disabled:cursor-default disabled:opacity-30",
+            )}
+          >
+            <Repeat size={11} color="currentColor" />
+          </button>
+
+          {running ? (
+            <button
+              type="button"
+              aria-label="Pause stopwatch"
+              onClick={handlePause}
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#FF9500] text-white shadow-[0_2px_8px_rgba(255,149,0,0.28)] transition-transform active:scale-95"
+            >
+              <Pause size={14} color="#FFFFFF" fill="#FFFFFF" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              aria-label="Start stopwatch"
+              onClick={handlePlay}
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#34C759] text-white shadow-[0_2px_8px_rgba(52,199,89,0.28)] transition-transform active:scale-95"
+            >
+              <Play size={14} color="#FFFFFF" fill="#FFFFFF" />
+            </button>
+          )}
+
+          <button
+            type="button"
+            aria-label="Stop stopwatch"
+            onClick={clearTimer}
+            disabled={!canStop}
+            className={cn(
+              "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full transition-all active:scale-95 disabled:cursor-default disabled:opacity-30",
+              canStop
+                ? "bg-[#FF3B30] text-white shadow-[0_2px_8px_rgba(255,59,48,0.25)]"
+                : "bg-white text-neutral-300 ring-1 ring-neutral-200/80",
+            )}
+          >
+            <StopSquare size={8} />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+StopwatchWidget.displayName = "StopwatchWidget";

package/components/widgets/torch-face-widget.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Flashlight } from "lucide-react";
+
+// Flashlight face widget — tap the mascot dial to toggle the torch on or off.
+const MASCOT = "#FACC15";
+const ACCENT = "#FDE047";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+
+type TorchMascotProps = Readonly<{
+  on: boolean;
+}>;
+
+function TorchMascot({ on }: TorchMascotProps) {
+  return (
+    <g aria-hidden>
+      <circle cx="88" cy="142" r="58" fill={MASCOT} />
+      {on ? (
+        <>
+          <line
+            x1="64"
+            y1="121"
+            x2="72"
+            y2="123"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+          <line
+            x1="112"
+            y1="121"
+            x2="104"
+            y2="123"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+        </>
+      ) : (
+        <>
+          <circle cx="68" cy="122" r="5" fill="white" />
+          <circle cx="108" cy="122" r="5" fill="white" />
+          <circle cx="69" cy="123" r="2.2" fill="#1C1C1E" />
+          <circle cx="109" cy="123" r="2.2" fill="#1C1C1E" />
+        </>
+      )}
+      {on ? (
+        <ellipse cx="88" cy="139" rx="6" ry="4.5" fill="white" />
+      ) : (
+        <path
+          d="M76 138 Q88 146 100 138"
+          stroke="white"
+          strokeWidth="2.2"
+          fill="none"
+          strokeLinecap="round"
+        />
+      )}
+    </g>
+  );
+}
+
+export type TorchFaceWidgetProps = Readonly<
+  {
+    defaultOn?: boolean;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+export const TorchFaceWidget = forwardRef<
+  HTMLButtonElement,
+  TorchFaceWidgetProps
+>(({ className, defaultOn = false, onClick, ...props }, ref) => {
+  const [on, setOn] = useState(defaultOn);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={on}
+      aria-label={on ? "Turn torch off" : "Turn torch on"}
+      data-slot="torch-face-widget"
+      onClick={(event) => {
+        setOn((prev) => !prev);
+        onClick?.(event);
+      }}
+      className={cn(
+        "relative h-44 w-44 max-w-full cursor-pointer overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 176 176"
+        className="absolute inset-0 h-full w-full"
+        aria-hidden
+      >
+        <rect width="176" height="176" fill="#000" />
+        <TorchMascot on={on} />
+        <circle
+          cx={DIAL.cx}
+          cy={DIAL.cy}
+          r={DIAL.r}
+          fill="none"
+          stroke={on ? ACCENT : "white"}
+          strokeWidth="1.5"
+          opacity={on ? 0.45 : 0.25}
+        />
+      </svg>
+
+      <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+        <Flashlight size={14} color={on ? ACCENT : "#FFFFFF66"} />
+      </span>
+
+      <p
+        className={cn(
+          "absolute inset-x-0 top-[34%] z-10 text-center text-base leading-none font-semibold",
+          on ? "text-white" : "text-white/40",
+        )}
+      >
+        {on ? "On" : "Off"}
+      </p>
+    </button>
+  );
+});
+
+TorchFaceWidget.displayName = "TorchFaceWidget";

package/components/widgets/voice-assistant-widget.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Mic } from "lucide-react";
+
+const WAVEFORM_BAR_COUNT = 16;
+
+// Fixed bar ids (0–15) so list keys stay stable while heights animate.
+const WAVEFORM_BAR_IDS = Array.from(
+  { length: WAVEFORM_BAR_COUNT },
+  (_, bar) => bar,
+);
+
+const IDLE_BAR_HEIGHT = 12;
+const RESTING_BAR_HEIGHT = 20;
+
+export type VoiceAssistantWidgetProps = Readonly<
+  {
+    // Shown below the mic button while listening is active.
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const VoiceAssistantWidget = forwardRef<
+  HTMLDivElement,
+  VoiceAssistantWidgetProps
+>(({ className, label = "Listening…", ...props }, ref) => {
+  const [active, setActive] = useState(false);
+  const [levels, setLevels] = useState<number[]>(() =>
+    WAVEFORM_BAR_IDS.map(() => RESTING_BAR_HEIGHT),
+  );
+
+  // Simulate live mic levels while active; settle to short bars when idle.
+  useEffect(() => {
+    if (!active) {
+      setLevels(WAVEFORM_BAR_IDS.map(() => IDLE_BAR_HEIGHT));
+      return;
+    }
+
+    const timer = globalThis.setInterval(() => {
+      setLevels(WAVEFORM_BAR_IDS.map(() => 15 + Math.random() * 55));
+    }, 100);
+
+    return () => globalThis.clearInterval(timer);
+  }, [active]);
+
+  return (
+    <div
+      ref={ref}
+      data-slot="voice-assistant-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col items-center justify-between overflow-hidden rounded-3xl border border-neutral-100 bg-white p-4 font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      {...props}
+    >
+      <p className="text-[10px] font-semibold tracking-widest text-neutral-400 uppercase">
+        Voice AI
+      </p>
+
+      {/* Equalizer bars — height animates to mimic incoming audio. */}
+      <div className="flex h-10 items-end justify-center gap-0.5">
+        {WAVEFORM_BAR_IDS.map((bar) => (
+          <span
+            key={bar}
+            className={cn(
+              "w-1 rounded-full transition-all duration-100",
+              active ? "bg-neutral-900" : "bg-neutral-200",
+            )}
+            style={{ height: `${levels[bar]}%` }}
+          />
+        ))}
+      </div>
+
+      {/* Tap toggles listening; red = active, dark = idle. */}
+      <button
+        type="button"
+        onClick={() => setActive(!active)}
+        aria-label={active ? "Stop listening" : "Start listening"}
+        aria-pressed={active}
+        className={cn(
+          "flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-colors active:scale-95",
+          active ? "bg-red-500 text-white" : "bg-neutral-900 text-white",
+        )}
+      >
+        <Mic size={18} />
+      </button>
+
+      <p className="text-[11px] font-normal text-neutral-600">
+        {active ? label : "Tap to speak"}
+      </p>
+    </div>
+  );
+});
+
+VoiceAssistantWidget.displayName = "VoiceAssistantWidget";