motion-ui-skill 2.0.0

package/components/widgets/ios-earbuds-widget.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+// Inline SVG — left and right bud groups with gradient fills for a subtle 3D look
+function AirPodsPair() {
+  return (
+    <svg viewBox="0 0 120 80" className="h-19 w-27" aria-hidden>
+      <defs>
+        <linearGradient id="earbuds-body" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#FFFFFF" />
+          <stop offset="100%" stopColor="#E8E8ED" />
+        </linearGradient>
+        <linearGradient id="earbuds-stem" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor="#F5F5F7" />
+          <stop offset="100%" stopColor="#D1D1D6" />
+        </linearGradient>
+      </defs>
+
+      <g transform="translate(14 4)">
+        <path
+          d="M28 6 C38 6 44 14 44 24 C44 34 38 40 28 40 C18 40 12 34 12 24 C12 14 18 6 28 6 Z"
+          fill="url(#earbuds-body)"
+          stroke="#D1D1D6"
+          strokeWidth="0.75"
+        />
+        <ellipse cx="28" cy="24" rx="8" ry="10" fill="#E5E5EA" opacity="0.45" />
+        <rect
+          x="24"
+          y="38"
+          width="8"
+          height="26"
+          rx="4"
+          fill="url(#earbuds-stem)"
+          stroke="#C7C7CC"
+          strokeWidth="0.5"
+        />
+        <rect x="25" y="58" width="6" height="4" rx="2" fill="#AEAEB2" />
+      </g>
+
+      <g transform="translate(58 4)">
+        <path
+          d="M28 6 C38 6 44 14 44 24 C44 34 38 40 28 40 C18 40 12 34 12 24 C12 14 18 6 28 6 Z"
+          fill="url(#earbuds-body)"
+          stroke="#D1D1D6"
+          strokeWidth="0.75"
+        />
+        <ellipse cx="28" cy="24" rx="8" ry="10" fill="#E5E5EA" opacity="0.45" />
+        <rect
+          x="24"
+          y="38"
+          width="8"
+          height="26"
+          rx="4"
+          fill="url(#earbuds-stem)"
+          stroke="#C7C7CC"
+          strokeWidth="0.5"
+        />
+        <rect x="25" y="58" width="6" height="4" rx="2" fill="#AEAEB2" />
+      </g>
+    </svg>
+  );
+}
+
+// name — device label shown at the bottom; connected — drives the status dot and subtitle
+export type IosEarbudsWidgetProps = Readonly<
+  {
+    // Device label shown at the bottom of the card.
+    name?: string;
+    // When true, shows a connected state with a green status dot.
+    connected?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// iOS-style earbuds card: header, AirPods illustration, device name + connection state
+export const IosEarbudsWidget = forwardRef<
+  HTMLDivElement,
+  IosEarbudsWidgetProps
+>(({ className, name = "AirPods Pro", connected = true, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="minimal-earbuds-widget"
+    className={cn(
+      "flex h-44 w-44 max-w-full flex-col overflow-hidden rounded-3xl border border-neutral-100 bg-white p-4 font-sans shadow-lg shadow-black/5 select-none",
+      className,
+    )}
+    {...props}
+  >
+    <div className="flex items-center justify-between gap-2">
+      <p className="text-[10px] font-semibold tracking-widest text-neutral-400 uppercase">
+        Audio
+      </p>
+      <span
+        aria-hidden
+        className={cn(
+          "h-2 w-2 shrink-0 rounded-full",
+          connected ? "bg-green-500" : "bg-neutral-300",
+        )}
+      />
+      <span className="sr-only">
+        {connected ? "Connected" : "Disconnected"}
+      </span>
+    </div>
+
+    <div className="flex flex-1 items-center justify-center">
+      <AirPodsPair />
+    </div>
+
+    <div className="text-center">
+      <p className="text-[12px] font-semibold text-neutral-900">{name}</p>
+      <p className="mt-0.5 text-[10px] font-medium text-neutral-400">
+        {connected ? "Connected" : "Tap to connect"}
+      </p>
+    </div>
+  </div>
+));
+
+IosEarbudsWidget.displayName = "IosEarbudsWidget";

package/components/widgets/ios-map-location-widget.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+type MapBackgroundProps = Readonly<{
+  className?: string;
+}>;
+
+// Simplified map tiles — water, parks, and roads
+function MapBackground({ className }: MapBackgroundProps) {
+  return (
+    <svg
+      viewBox="0 0 176 176"
+      className={cn("h-full w-full", className)}
+      preserveAspectRatio="xMidYMid slice"
+      aria-hidden
+    >
+      <rect width="176" height="176" fill="#FAFAFA" />
+
+      <path
+        d="M176 120 C130 108 95 130 55 118 C30 110 10 115 0 108 L0 176 L176 176 Z"
+        fill="#E8F2FA"
+      />
+      <path
+        d="M176 0 L100 0 C88 48 78 96 68 144 L62 176 L176 176 Z"
+        fill="#F0F5EE"
+      />
+
+      <path
+        d="M-10 52 C48 38 96 62 150 46 C168 40 178 44 186 38"
+        stroke="#FFFFFF"
+        strokeWidth="14"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M-10 98 C42 84 88 108 138 92 C162 84 174 90 186 82"
+        stroke="#FFFFFF"
+        strokeWidth="12"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M54 -10 C48 42 44 94 40 146 C38 164 36 176 34 186"
+        stroke="#FFFFFF"
+        strokeWidth="11"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M118 -10 C122 50 126 98 130 146 C132 164 134 176 136 186"
+        stroke="#FFFFFF"
+        strokeWidth="10"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M16 -10 C28 56 40 108 52 160 C58 172 62 180 66 186"
+        stroke="#FFFFFF"
+        strokeWidth="8"
+        fill="none"
+        strokeLinecap="round"
+        opacity="0.95"
+      />
+    </svg>
+  );
+}
+
+type MapPinMarkerProps = Readonly<{
+  city: string;
+}>;
+
+// Centered iOS-blue pin with the city name below it
+function MapPinMarker({ city }: MapPinMarkerProps) {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex flex-col items-center">
+        <svg
+          width="24"
+          height="32"
+          viewBox="0 0 28 36"
+          aria-hidden
+          className="drop-shadow-[0_1px_4px_rgba(0,0,0,0.12)]"
+        >
+          <path
+            d="M14 36C14 36 26 20.5 26 12C26 5.4 20.6 0 14 0S2 5.4 2 12C2 20.5 14 36 14 36Z"
+            fill="#007AFF"
+          />
+          <circle cx="14" cy="12" r="4.5" fill="white" />
+        </svg>
+        <p className="mt-1 text-[11px] leading-none font-semibold text-neutral-800 text-shadow-sm">
+          {city}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// city — label shown under the map pin (defaults to "Kolkata")
+export type IosMapLocationWidgetProps = Readonly<
+  {
+    city?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// iOS Maps-style location card — light map background with a centered teardrop pin
+export const IosMapLocationWidget = forwardRef<
+  HTMLDivElement,
+  IosMapLocationWidgetProps
+>(({ className, city = "Kolkata", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="ios-map-location-widget"
+      className={cn(
+        "relative h-44 w-44 max-w-full overflow-hidden rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      style={{
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif',
+      }}
+      {...props}
+    >
+      <MapBackground />
+      <MapPinMarker city={city} />
+    </div>
+  );
+});
+
+IosMapLocationWidget.displayName = "IosMapLocationWidget";

package/components/widgets/minimal-agenda-widget.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Check } from "lucide-react";
+
+// Minimal daily agenda — tap rows to toggle done state with strikethrough animation.
+type AgendaItem = Readonly<{
+  time: string;
+  title: string;
+  done: boolean;
+}>;
+
+const DEFAULT_ITEMS: AgendaItem[] = [
+  { time: "09:00", title: "Design review", done: true },
+  { time: "11:30", title: "Client sync", done: false },
+  { time: "14:00", title: "Ship components", done: false },
+];
+
+type AgendaTitleProps = Readonly<{
+  done: boolean;
+  children: string;
+}>;
+
+// Strikethrough hugs text width only — fixed line-height keeps every slash aligned.
+function AgendaTitle({ done, children }: AgendaTitleProps) {
+  return (
+    <span className="min-w-0 flex-1">
+      <span className="relative inline-block max-w-full">
+        <span
+          className={cn(
+            "block max-w-full truncate text-xs leading-4 font-medium transition-colors duration-300 ease-out",
+            done ? "text-neutral-400" : "text-neutral-900",
+          )}
+        >
+          {children}
+        </span>
+        <span
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute top-2 left-0 h-px bg-neutral-400/80",
+            "transition-[width] duration-500 ease-in-out",
+            done ? "w-full" : "w-0",
+          )}
+        />
+      </span>
+    </span>
+  );
+}
+
+export type MinimalAgendaWidgetProps = Readonly<
+  ComponentPropsWithoutRef<"div">
+>;
+
+export const MinimalAgendaWidget = forwardRef<
+  HTMLDivElement,
+  MinimalAgendaWidgetProps
+>(({ className, ...props }, ref) => {
+  const [items, setItems] = useState<AgendaItem[]>(DEFAULT_ITEMS);
+
+  const toggleItem = (title: string) => {
+    setItems((prev) =>
+      prev.map((item) =>
+        item.title === title ? { ...item, done: !item.done } : item,
+      ),
+    );
+  };
+
+  return (
+    <div
+      ref={ref}
+      data-slot="minimal-agenda-widget"
+      className={cn(
+        "w-64 rounded-3xl border border-neutral-100 bg-white p-4 font-sans shadow-lg shadow-black/5",
+        className,
+      )}
+      {...props}
+    >
+      <p className="mb-3 text-[10px] font-semibold tracking-widest text-neutral-400 uppercase">
+        Today
+      </p>
+
+      <ul className="space-y-2.5">
+        {items.map((item) => (
+          <li key={item.title}>
+            <button
+              type="button"
+              aria-pressed={item.done}
+              aria-label={`${item.title} at ${item.time}`}
+              onClick={() => toggleItem(item.title)}
+              className="flex w-full cursor-pointer items-center gap-3 px-1 py-0.5 text-left"
+            >
+              <span
+                className={cn(
+                  "w-10 shrink-0 text-[11px] font-medium tabular-nums transition-colors duration-300 ease-out",
+                  item.done ? "text-neutral-300" : "text-neutral-400",
+                )}
+              >
+                {item.time}
+              </span>
+
+              <AgendaTitle done={item.done}>{item.title}</AgendaTitle>
+
+              <span className="flex h-3 w-3 shrink-0 items-center justify-center">
+                <Check
+                  size={12}
+                  aria-hidden
+                  className={cn(
+                    "text-emerald-500 transition-opacity duration-300 ease-out",
+                    item.done ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+});
+
+MinimalAgendaWidget.displayName = "MinimalAgendaWidget";

package/components/widgets/pomodoro-widget.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Pause, Play } from "lucide-react";
+
+const DIAL = { cx: 88, cy: 88, r: 56 } as const;
+const CIRC = 2 * Math.PI * DIAL.r;
+const TOMATO = "#E85D4C";
+
+function formatTime(totalSeconds: number) {
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return {
+    mins: String(mins).padStart(2, "0"),
+    secs: String(secs).padStart(2, "0"),
+  };
+}
+
+export type PomodoroWidgetProps = Readonly<
+  {
+    minutes?: number;
+    label?: string;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Pomodoro — dark timer card with a thin ring, tap to start or pause.
+export const PomodoroWidget = forwardRef<
+  HTMLButtonElement,
+  PomodoroWidgetProps
+>(({ className, minutes = 25, label = "Focus", onClick, ...props }, ref) => {
+  const totalSeconds = minutes * 60;
+  const [remaining, setRemaining] = useState(totalSeconds);
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    if (!running || remaining <= 0) return;
+    const timer = globalThis.setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          setRunning(false);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => globalThis.clearInterval(timer);
+  }, [running, remaining]);
+
+  const progress = remaining / totalSeconds;
+  const dashOffset = CIRC * (1 - progress);
+  const { mins, secs } = formatTime(remaining);
+  const isDone = remaining <= 0;
+
+  const handleToggle = () => {
+    if (isDone) {
+      setRemaining(totalSeconds);
+      setRunning(true);
+      return;
+    }
+    setRunning((prev) => !prev);
+  };
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={running}
+      aria-label={
+        running ? "Pause timer" : isDone ? "Restart timer" : "Start timer"
+      }
+      data-slot="pomodoro-widget"
+      onClick={(event) => {
+        handleToggle();
+        onClick?.(event);
+      }}
+      className={cn(
+        "relative h-44 w-44 max-w-full cursor-pointer overflow-hidden rounded-[1.75rem] bg-[#0C0C0C] font-sans shadow-lg shadow-black/5 transition-transform select-none active:scale-[0.98]",
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 176 176"
+        className="absolute inset-0 size-full"
+        aria-hidden
+      >
+        <rect width="176" height="176" fill="#0C0C0C" />
+        <circle
+          cx={DIAL.cx}
+          cy={DIAL.cy}
+          r={DIAL.r}
+          fill="none"
+          stroke="rgba(255,255,255,0.07)"
+          strokeWidth="1.5"
+        />
+        <circle
+          cx={DIAL.cx}
+          cy={DIAL.cy}
+          r={DIAL.r}
+          fill="none"
+          stroke={running ? TOMATO : "rgba(255,255,255,0.32)"}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeDasharray={CIRC}
+          strokeDashoffset={dashOffset}
+          transform={`rotate(-90 ${DIAL.cx} ${DIAL.cy})`}
+          className="transition-[stroke,stroke-dashoffset] duration-1000 ease-linear"
+        />
+      </svg>
+
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
+        <p className="flex items-baseline font-mono text-[1.75rem] leading-none font-light tracking-[-0.03em] tabular-nums">
+          <span className="text-white">{mins}</span>
+          <span className="mx-px text-white/30">:</span>
+          <span className={cn(running ? "text-white/90" : "text-white/55")}>
+            {secs}
+          </span>
+        </p>
+        <p
+          className={cn(
+            "mt-2 text-[10px] font-medium tracking-[0.14em] uppercase",
+            running ? "text-[#E85D4C]/80" : "text-white/30",
+          )}
+        >
+          {isDone ? "Done" : running ? "Running" : label}
+        </p>
+      </div>
+
+      <span
+        className="absolute right-3.5 bottom-3.5 z-10 flex size-7 items-center justify-center rounded-full bg-white/[0.07] text-white/70"
+        aria-hidden
+      >
+        {running ? (
+          <Pause size={11} strokeWidth={2.5} fill="currentColor" />
+        ) : (
+          <Play
+            size={11}
+            strokeWidth={2.5}
+            className="ml-0.5"
+            fill="currentColor"
+          />
+        )}
+      </span>
+    </button>
+  );
+});
+
+PomodoroWidget.displayName = "PomodoroWidget";

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

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Pause, Play } from "lucide-react";
+
+const ACCENT = "#FF453A";
+const MASCOT = "#6CA8FF";
+
+// Formats elapsed milliseconds as MM:SS for the dial readout
+function formatTime(ms: number) {
+  const s = Math.floor(ms / 1000);
+  return `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
+}
+
+type RecordMascotProps = Readonly<{
+  recording: boolean;
+}>;
+
+// Blue mascot at the bottom — mouth opens into an O while recording
+function RecordMascot({ recording }: RecordMascotProps) {
+  return (
+    <g aria-hidden>
+      <circle cx="88" cy="142" r="58" fill={MASCOT} />
+      <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" />
+      {recording ? (
+        <ellipse cx="88" cy="139" rx="5" ry="4" fill="white" />
+      ) : (
+        <path
+          d="M76 138 Q88 146 100 138"
+          stroke="white"
+          strokeWidth="2.2"
+          fill="none"
+          strokeLinecap="round"
+        />
+      )}
+    </g>
+  );
+}
+
+export type RecorderFaceWidgetProps = Readonly<
+  ComponentPropsWithoutRef<"button">
+>;
+
+// Recorder widget — black dial, mascot face, play/pause icon, live timer
+export const RecorderFaceWidget = forwardRef<
+  HTMLButtonElement,
+  RecorderFaceWidgetProps
+>(({ className, onClick, ...props }, ref) => {
+  const [recording, setRecording] = useState(false);
+  const [elapsed, setElapsed] = useState(0);
+  // startRef = when the current run began; baseRef = ms already counted before pause
+  const startRef = useRef(0);
+  const baseRef = useRef(0);
+
+  // requestAnimationFrame loop keeps the timer smooth while recording
+  useEffect(() => {
+    if (recording) {
+      startRef.current = performance.now();
+      let frame = 0;
+      const tick = () => {
+        setElapsed(baseRef.current + performance.now() - startRef.current);
+        frame = globalThis.requestAnimationFrame(tick);
+      };
+      frame = globalThis.requestAnimationFrame(tick);
+      return () => globalThis.cancelAnimationFrame(frame);
+    }
+  }, [recording]);
+
+  const toggle = (e: MouseEvent<HTMLButtonElement>) => {
+    if (recording) {
+      baseRef.current += performance.now() - startRef.current;
+      setElapsed(baseRef.current);
+      setRecording(false);
+    } else {
+      baseRef.current = 0;
+      setElapsed(0);
+      setRecording(true);
+    }
+    onClick?.(e);
+  };
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={toggle}
+      aria-pressed={recording}
+      aria-label={recording ? "Pause recording" : "Start recording"}
+      data-slot="minimal-record-button"
+      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" />
+        <RecordMascot recording={recording} />
+        <circle
+          cx="88"
+          cy="84"
+          r="56"
+          fill="none"
+          stroke="white"
+          strokeWidth="1.5"
+          opacity="0.35"
+        />
+      </svg>
+
+      <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+        {recording ? (
+          <Pause size={14} color={ACCENT} fill={ACCENT} />
+        ) : (
+          <Play size={14} color="white" fill="white" />
+        )}
+      </span>
+
+      <p
+        className={cn(
+          "relative z-10 flex h-full items-center justify-center pb-10 text-[26px] leading-none font-extralight tracking-[-0.04em] tabular-nums",
+          recording ? "text-white" : "text-white/40",
+        )}
+      >
+        {formatTime(elapsed)}
+      </p>
+    </button>
+  );
+});
+
+RecorderFaceWidget.displayName = "RecorderFaceWidget";