motion-ui-skill 2.0.0

package/components/widgets/analog-clock-widget.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+// roman = XII labels, minimal = ticks only, numeric = 12/3/6/9 labels.
+export type AnalogClockFaceVariant = "roman" | "minimal" | "numeric";
+
+const CLOCK_TICKS = Array.from({ length: 12 }, (_, hour) => {
+  const angle = (hour * 30 * Math.PI) / 180;
+  const inner = hour % 3 === 0 ? 38 : 40;
+  const outer = 44;
+  const f = (n: number) => n.toFixed(2);
+  return {
+    hour,
+    major: hour % 3 === 0,
+    x1: f(50 + inner * Math.sin(angle)),
+    y1: f(50 - inner * Math.cos(angle)),
+    x2: f(50 + outer * Math.sin(angle)),
+    y2: f(50 - outer * Math.cos(angle)),
+  };
+});
+
+const ROMAN_LABELS = [
+  { deg: 0, label: "XII", x: "50.00", y: "18.00" },
+  { deg: 90, label: "III", x: "82.00", y: "50.00" },
+  { deg: 180, label: "VI", x: "50.00", y: "82.00" },
+  { deg: 270, label: "IX", x: "18.00", y: "50.00" },
+] as const;
+
+const NUMERIC_LABELS = [
+  { deg: 0, label: "12", x: "50.00", y: "18.00" },
+  { deg: 90, label: "3", x: "82.00", y: "50.00" },
+  { deg: 180, label: "6", x: "50.00", y: "82.00" },
+  { deg: 270, label: "9", x: "18.00", y: "50.00" },
+] as const;
+
+type AnalogClockFaceProps = Readonly<{
+  hours: number;
+  minutes: number;
+  seconds: number;
+  variant: AnalogClockFaceVariant;
+}>;
+
+function AnalogClockFace({
+  hours,
+  minutes,
+  seconds,
+  variant,
+}: AnalogClockFaceProps) {
+  const hourDeg = hours * 30 + minutes * 0.5;
+  const minuteDeg = minutes * 6 + seconds * 0.1;
+  const secondDeg = seconds * 6;
+  const labels = variant === "roman" ? ROMAN_LABELS : NUMERIC_LABELS;
+
+  return (
+    <svg viewBox="0 0 100 100" className="h-full w-full" aria-hidden>
+      <circle
+        cx="50"
+        cy="50"
+        r="46"
+        fill="none"
+        stroke="#f0f0f0"
+        strokeWidth="1"
+      />
+
+      {CLOCK_TICKS.map((tick) => (
+        <line
+          key={tick.hour}
+          x1={tick.x1}
+          y1={tick.y1}
+          x2={tick.x2}
+          y2={tick.y2}
+          stroke="#d4d4d4"
+          strokeWidth={tick.major ? 1.5 : 1}
+          strokeLinecap="round"
+        />
+      ))}
+
+      {variant !== "minimal" &&
+        labels.map(({ deg, label, x, y }) => (
+          <text
+            key={deg}
+            x={x}
+            y={y}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            className="fill-neutral-500 text-[6px] font-medium"
+          >
+            {label}
+          </text>
+        ))}
+
+      <line
+        x1="50"
+        y1="50"
+        x2="50"
+        y2="28"
+        stroke="#171717"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        transform={`rotate(${hourDeg} 50 50)`}
+      />
+      <line
+        x1="50"
+        y1="50"
+        x2="50"
+        y2="22"
+        stroke="#404040"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        transform={`rotate(${minuteDeg} 50 50)`}
+      />
+      <line
+        x1="50"
+        y1="50"
+        x2="50"
+        y2="20"
+        stroke="#ef4444"
+        strokeWidth="1"
+        strokeLinecap="round"
+        transform={`rotate(${secondDeg} 50 50)`}
+      />
+      <circle cx="50" cy="50" r="2" fill="#171717" />
+    </svg>
+  );
+}
+
+export type AnalogClockWidgetProps = Readonly<
+  {
+    // Face style — roman numerals, plain ticks, or numeric hour labels.
+    variant?: AnalogClockFaceVariant;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Compact iOS-style analog clock — live hands with three dial variants.
+export const AnalogClockWidget = forwardRef<
+  HTMLDivElement,
+  AnalogClockWidgetProps
+>(({ className, variant = "minimal", ...props }, ref) => {
+  const [now, setNow] = useState<Date | null>(null);
+
+  useEffect(() => {
+    const update = () => setNow(new Date());
+    update();
+    const timer = globalThis.setInterval(update, 1000);
+    return () => globalThis.clearInterval(timer);
+  }, []);
+
+  const hours = now ? now.getHours() % 12 : 0;
+  const minutes = now ? now.getMinutes() : 0;
+  const seconds = now ? now.getSeconds() : 0;
+
+  const digital = now
+    ? now.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true,
+      })
+    : "--:--";
+
+  return (
+    <div
+      ref={ref}
+      data-slot="analog-clock-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col items-center justify-between 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">
+        Clock
+      </p>
+
+      <div className="relative h-24 w-24">
+        <div className="absolute inset-0 rounded-full border border-neutral-100" />
+        {now && (
+          <div className="absolute inset-1.5">
+            <AnalogClockFace
+              hours={hours}
+              minutes={minutes}
+              seconds={seconds}
+              variant={variant}
+            />
+          </div>
+        )}
+      </div>
+
+      <p className="font-mono text-[9px] font-light text-neutral-900 tabular-nums">
+        {digital}
+      </p>
+    </div>
+  );
+});
+
+AnalogClockWidget.displayName = "AnalogClockWidget";

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

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Pause, Play } from "lucide-react";
+
+const BAR_COUNT = 12;
+const BAR_IDS = Array.from({ length: BAR_COUNT }, (_, bar) => bar);
+
+export type AudioRecorderWidgetProps = Readonly<
+  {
+    title?: string;
+    date?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Audio Recorder component — styled with Tailwind CSS.
+export const AudioRecorderWidget = forwardRef<
+  HTMLDivElement,
+  AudioRecorderWidgetProps
+>(({ className, title = "New Audio", date = "12.8.24", ...props }, ref) => {
+  const [recording, setRecording] = useState(true);
+  const [bars, setBars] = useState<number[]>(() => BAR_IDS.map(() => 30));
+
+  useEffect(() => {
+    if (!recording) return;
+    const timer = globalThis.setInterval(() => {
+      setBars(BAR_IDS.map(() => 20 + Math.random() * 60));
+    }, 120);
+    return () => globalThis.clearInterval(timer);
+  }, [recording]);
+
+  return (
+    <div
+      ref={ref}
+      data-slot="audio-recorder-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col justify-between rounded-3xl bg-neutral-900 p-4 font-sans text-white shadow-lg",
+        className,
+      )}
+      {...props}
+    >
+      <div>
+        <p className="text-sm font-semibold">{title}</p>
+        <p className="text-[11px] text-neutral-400">{date}</p>
+      </div>
+
+      <div className="flex h-10 items-end justify-center gap-0.5">
+        {BAR_IDS.map((bar) => (
+          <span
+            key={bar}
+            className="w-1.5 rounded-full bg-red-500 transition-all duration-100"
+            style={{ height: `${bars[bar]}%` }}
+          />
+        ))}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className="font-mono text-xs text-neutral-300">01:12:25</span>
+        <button
+          type="button"
+          onClick={() => setRecording(!recording)}
+          aria-label={recording ? "Pause recording" : "Resume recording"}
+          aria-pressed={recording}
+          className={cn(
+            "flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-transform hover:scale-105 active:scale-95",
+            recording ? "bg-red-500" : "bg-neutral-700",
+          )}
+        >
+          {recording ? (
+            <Pause size={14} fill="white" />
+          ) : (
+            <Play size={14} fill="white" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+AudioRecorderWidget.displayName = "AudioRecorderWidget";

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

@@ -0,0 +1,152 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { BatteryMedium } from "lucide-react";
+
+const MASCOT_GOOD = "#A3E635";
+const MASCOT_LOW = "#FB923C";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+const ARC_LENGTH = 2 * Math.PI * DIAL.r * 0.68;
+
+type BatteryMascotProps = Readonly<{
+  isLow: boolean;
+}>;
+
+// Lime buddy when healthy — droopy eyes when battery is low
+function BatteryMascot({ isLow }: BatteryMascotProps) {
+  const fill = isLow ? MASCOT_LOW : MASCOT_GOOD;
+
+  return (
+    <g aria-hidden>
+      <circle cx="88" cy="142" r="58" fill={fill} />
+      {isLow ? (
+        <>
+          <path
+            d="M64 120 Q68 126 72 120"
+            stroke="white"
+            strokeWidth="2"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M104 120 Q108 126 112 120"
+            stroke="white"
+            strokeWidth="2"
+            fill="none"
+            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" />
+        </>
+      )}
+      <path
+        d="M76 138 Q88 146 100 138"
+        stroke="white"
+        strokeWidth="2.2"
+        fill="none"
+        strokeLinecap="round"
+      />
+    </g>
+  );
+}
+
+type BatteryRingProps = Readonly<{
+  percent: number;
+  isLow: boolean;
+}>;
+
+function BatteryRing({ percent, isLow }: BatteryRingProps) {
+  const clamped = Math.min(100, Math.max(0, percent));
+  const progress = (clamped / 100) * ARC_LENGTH;
+  const stroke = isLow ? "#FB923C" : "#A3E635";
+
+  return (
+    <g aria-hidden>
+      <circle
+        cx={DIAL.cx}
+        cy={DIAL.cy}
+        r={DIAL.r}
+        fill="none"
+        stroke="white"
+        strokeWidth="1.5"
+        opacity="0.2"
+      />
+      <circle
+        cx={DIAL.cx}
+        cy={DIAL.cy}
+        r={DIAL.r}
+        fill="none"
+        stroke={stroke}
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray={`${progress} ${2 * Math.PI * DIAL.r}`}
+        transform={`rotate(135 ${DIAL.cx} ${DIAL.cy})`}
+        opacity="0.85"
+      />
+    </g>
+  );
+}
+
+// percent — charge level shown on the dial
+export type BatteryFaceWidgetProps = Readonly<
+  {
+    percent?: number;
+    hoursLeft?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const BatteryFaceWidget = forwardRef<
+  HTMLDivElement,
+  BatteryFaceWidgetProps
+>(({ className, percent = 97, hoursLeft = "~5h left", ...props }, ref) => {
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+  const isLow = clampedPercent <= 20;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="battery-face-widget"
+      className={cn(
+        "relative h-44 w-44 max-w-full 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" />
+        <BatteryMascot isLow={isLow} />
+        <BatteryRing percent={clampedPercent} isLow={isLow} />
+      </svg>
+
+      <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+        <BatteryMedium size={18} color={isLow ? MASCOT_LOW : MASCOT_GOOD} />
+      </span>
+
+      <div className="absolute inset-x-0 top-[30%] z-10 text-center">
+        <p
+          className={cn(
+            "text-xl leading-none font-semibold tabular-nums",
+            isLow ? "text-orange-300" : "text-white",
+          )}
+        >
+          {clampedPercent}
+          <span className="text-xs font-medium text-white/45">%</span>
+        </p>
+        <p className="mt-1 text-[9px] font-medium text-white/45">{hoursLeft}</p>
+      </div>
+    </div>
+  );
+});
+
+BatteryFaceWidget.displayName = "BatteryFaceWidget";

package/components/widgets/blob-profile.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { Check } from "lucide-react";
+
+// Blob-shaped profile card with verified badge — swap name, handle, and image via props.
+export type BlobProfileCardProps = Readonly<
+  {
+    // Display name on the profile card.
+    name?: string;
+    // Social handle shown below the name.
+    handle?: string;
+    // Profile image URL.
+    image?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const BlobProfileCard = forwardRef<HTMLDivElement, BlobProfileCardProps>(
+  (
+    {
+      className,
+      name = "Alex Morgan",
+      handle = "@alex.dev",
+      image = "/background1.webp",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="blob-profile-card"
+      className={cn(
+        "flex h-44 w-44 flex-col items-center justify-center rounded-3xl border border-neutral-100 bg-white p-4 font-sans shadow-lg",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className="relative mb-3 h-24 w-24 overflow-hidden"
+        style={{
+          borderRadius: "60% 40% 55% 45% / 55% 45% 55% 45%",
+        }}
+      >
+        <Image
+          src={image}
+          alt={name}
+          fill
+          className="object-cover"
+          sizes="96px"
+        />
+      </div>
+      <p className="flex items-center gap-1 text-sm font-bold text-neutral-900">
+        {name}
+        <Check size={12} className="text-[#D9F26D]" aria-hidden />
+      </p>
+      <p className="text-[11px] text-neutral-500">{handle}</p>
+    </div>
+  ),
+);
+
+BlobProfileCard.displayName = "BlobProfileCard";

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

@@ -0,0 +1,125 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Bluetooth } from "lucide-react";
+
+const MASCOT = "#14B8A6";
+const ACCENT = "#22D3EE";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+
+type BluetoothMascotProps = Readonly<{
+  on: boolean;
+}>;
+
+function BluetoothMascot({ on }: BluetoothMascotProps) {
+  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" />
+      {on ? (
+        <path
+          d="M76 138 Q88 146 100 138"
+          stroke="white"
+          strokeWidth="2.2"
+          fill="none"
+          strokeLinecap="round"
+        />
+      ) : (
+        <line
+          x1="76"
+          y1="139"
+          x2="100"
+          y2="139"
+          stroke="white"
+          strokeWidth="2.2"
+          strokeLinecap="round"
+        />
+      )}
+    </g>
+  );
+}
+
+// Bluetooth toggle face widget — tap the mascot dial to turn Bluetooth on or off.
+export type BluetoothFaceWidgetProps = Readonly<
+  {
+    deviceName?: string;
+    defaultOn?: boolean;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+export const BluetoothFaceWidget = forwardRef<
+  HTMLButtonElement,
+  BluetoothFaceWidgetProps
+>(
+  (
+    {
+      className,
+      deviceName = "Bluetooth",
+      defaultOn = true,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [on, setOn] = useState(defaultOn);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={on}
+        aria-label={on ? `Turn ${deviceName} off` : `Turn ${deviceName} on`}
+        data-slot="bluetooth-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" />
+          <BluetoothMascot 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>
+          <Bluetooth size={14} color={on ? ACCENT : "#FFFFFF66"} />
+        </span>
+
+        <div className="absolute inset-x-0 top-[32%] z-10 px-3 text-center">
+          <p
+            className={cn(
+              "text-base leading-none font-semibold",
+              on ? "text-white" : "text-white/40",
+            )}
+          >
+            {on ? "On" : "Off"}
+          </p>
+        </div>
+      </button>
+    );
+  },
+);
+
+BluetoothFaceWidget.displayName = "BluetoothFaceWidget";