motion-ui-skill 2.0.0

package/components/widgets/flight-arrival-widget.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { PlaneTakeoff } from "lucide-react";
+
+// Flight arrival countdown card — departure and arrival airports with minutes remaining.
+export type FlightArrivalWidgetProps = Readonly<
+  {
+    // Minutes until arrival — drives the countdown label.
+    arrivalMinutes?: number;
+    // Departure airport details shown on the left.
+    departure?: { time: string; code: string; city: string };
+    // Arrival airport details shown on the right.
+    arrival?: { time: string; code: string; city: string };
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const FlightArrivalWidget = forwardRef<
+  HTMLDivElement,
+  FlightArrivalWidgetProps
+>(
+  (
+    {
+      className,
+      arrivalMinutes = 53,
+      departure = { time: "14:30", code: "LHR", city: "London" },
+      arrival = { time: "16:30", code: "IST", city: "India" },
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="flight-arrival-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-[11px] text-neutral-400">Arrival in</p>
+        <p className="text-2xl font-bold">{arrivalMinutes}min</p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex justify-between text-[10px]">
+          <div>
+            <p className="font-semibold">{departure.time}</p>
+            <p className="text-neutral-400">
+              {departure.code} {departure.city}
+            </p>
+          </div>
+          <div className="text-right">
+            <p className="font-semibold">{arrival.time}</p>
+            <p className="text-neutral-400">
+              {arrival.code} {arrival.city}
+            </p>
+          </div>
+        </div>
+
+        <div className="relative flex items-center">
+          <div className="h-1 flex-1 rounded-full bg-orange-500" />
+          <div className="absolute left-1/2 flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full bg-neutral-800">
+            <PlaneTakeoff size={12} className="text-orange-400" />
+          </div>
+          <div className="h-1 flex-1 rounded-full border border-dashed border-neutral-600 bg-transparent" />
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+FlightArrivalWidget.displayName = "FlightArrivalWidget";

package/components/widgets/focus-breath-widget.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type FocusBreathWidgetProps = Readonly<
+  {
+    // Title shown below the breathing circle.
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Guided breathing widget — circle grows on inhale and shrinks on exhale
+export const FocusBreathWidget = forwardRef<
+  HTMLDivElement,
+  FocusBreathWidgetProps
+>(({ className, label = "Breathe", ...props }, ref) => {
+  // Alternates every 4 seconds between inhale and exhale
+  const [phase, setPhase] = useState<"inhale" | "exhale">("inhale");
+  // Circle scale: larger on inhale, smaller on exhale
+  const [scale, setScale] = useState(0.85);
+
+  // Flip inhale ↔ exhale on a fixed 4s rhythm
+  useEffect(() => {
+    const timer = globalThis.setInterval(() => {
+      setPhase((p) => (p === "inhale" ? "exhale" : "inhale"));
+    }, 4000);
+    return () => globalThis.clearInterval(timer);
+  }, []);
+
+  // Resize the outer ring whenever the phase changes
+  useEffect(() => {
+    setScale(phase === "inhale" ? 1 : 0.75);
+  }, [phase]);
+
+  // Outer ring scales with the breathe cycle; inner circle shows inhale/exhale label
+  return (
+    <div
+      ref={ref}
+      data-slot="focus-breath-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col items-center justify-center overflow-hidden rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className="flex h-24 w-24 items-center justify-center rounded-full bg-neutral-100 transition-transform duration-4000 ease-in-out"
+        style={{ transform: `scale(${scale})` }}
+      >
+        <div className="flex h-16 w-16 items-center justify-center rounded-full border border-neutral-100 bg-white">
+          <span
+            className="text-[10px] font-semibold tracking-widest text-neutral-500 uppercase"
+            aria-live="polite"
+          >
+            {phase}
+          </span>
+        </div>
+      </div>
+      <p className="mt-3 text-xs font-medium text-neutral-600">{label}</p>
+    </div>
+  );
+});
+
+FocusBreathWidget.displayName = "FocusBreathWidget";

package/components/widgets/heart-rate-widget.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Heart } from "lucide-react";
+
+const MASCOT = "#FB7185";
+const ACCENT = "#FDA4AF";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+
+export type HeartRateWidgetProps = Readonly<
+  {
+    bpm?: number;
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Heart rate — DND-style face card with a soft pulse on the dial.
+export const HeartRateWidget = forwardRef<HTMLDivElement, HeartRateWidgetProps>(
+  ({ className, bpm: defaultBpm = 72, label = "BPM", ...props }, ref) => {
+    const [bpm, setBpm] = useState(defaultBpm);
+    const [pulse, setPulse] = useState(false);
+
+    useEffect(() => {
+      const beat = globalThis.setInterval(() => {
+        setPulse((prev) => !prev);
+        setBpm(defaultBpm + Math.floor(Math.random() * 3) - 1);
+      }, 900);
+      return () => globalThis.clearInterval(beat);
+    }, [defaultBpm]);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="heart-rate-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="#1A0509" />
+          <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" />
+          <path
+            d="M76 138 Q88 144 100 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={pulse ? 0.5 : 0.22}
+            className="transition-opacity duration-300 ease-out"
+          />
+        </svg>
+
+        <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+          <Heart 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">
+            {bpm}
+          </p>
+          <p className="mt-1 text-[10px] font-medium tracking-wide text-white/40 uppercase">
+            {label}
+          </p>
+        </div>
+      </div>
+    );
+  },
+);
+
+HeartRateWidget.displayName = "HeartRateWidget";

package/components/widgets/hydration-widget.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  forwardRef,
+  useId,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type HydrationWidgetProps = Readonly<
+  {
+    glasses?: number;
+    goal?: number;
+    label?: string;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Hydration — tall bottle card, tap to fill one more glass.
+export const HydrationWidget = forwardRef<
+  HTMLButtonElement,
+  HydrationWidgetProps
+>(
+  (
+    {
+      className,
+      glasses: defaultGlasses = 5,
+      goal = 8,
+      label = "glasses",
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [glasses, setGlasses] = useState(defaultGlasses);
+    const fill = Math.min(1, glasses / goal);
+    const clipId = useId();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Log a glass of water"
+        data-slot="hydration-widget"
+        onClick={(event) => {
+          setGlasses((prev) => (prev >= goal ? 0 : prev + 1));
+          onClick?.(event);
+        }}
+        className={cn(
+          "flex h-60 w-36 cursor-pointer flex-col items-center rounded-[2rem] border border-neutral-200/80 bg-white px-5 pt-5 pb-6 font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <div className="w-full text-left">
+          <span className="text-3xl leading-none font-light text-neutral-900 tabular-nums">
+            {glasses}
+          </span>
+          <span className="ml-0.5 text-sm text-neutral-400">/{goal}</span>
+          <p className="mt-1 text-xs text-neutral-500">{label}</p>
+        </div>
+
+        <div className="relative mt-5 flex flex-1 items-end justify-center">
+          <svg viewBox="0 0 64 120" className="h-full w-14" aria-hidden>
+            <defs>
+              <clipPath id={clipId}>
+                <rect x="12" y="18" width="40" height="94" rx="18" />
+              </clipPath>
+            </defs>
+
+            <rect
+              x="26"
+              y="6"
+              width="12"
+              height="10"
+              rx="3"
+              fill="none"
+              stroke="#D4D4D4"
+              strokeWidth="1.5"
+            />
+            <rect
+              x="12"
+              y="18"
+              width="40"
+              height="94"
+              rx="18"
+              fill="none"
+              stroke="#D4D4D4"
+              strokeWidth="1.5"
+            />
+
+            <rect
+              x="12"
+              y={18 + 94 * (1 - fill)}
+              width="40"
+              height={94 * fill}
+              fill="#7DD3FC"
+              clipPath={`url(#${clipId})`}
+              className="transition-all duration-300 ease-out"
+            />
+          </svg>
+        </div>
+      </button>
+    );
+  },
+);
+
+HydrationWidget.displayName = "HydrationWidget";

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

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const IOS_RED = "#FF3B30";
+const IOS_LABEL = "#8E8E93";
+
+export type IosCalendarWidgetProps = Readonly<ComponentPropsWithoutRef<"div">>;
+export type IosCalenderWidgetProps = IosCalendarWidgetProps;
+
+// iOS-style calendar tile: weekday on top, day + month at the bottom.
+export const IosCalendarWidget = forwardRef<
+  HTMLDivElement,
+  IosCalendarWidgetProps
+>(({ className, ...props }, ref) => {
+  // Start as null so the first paint matches SSR; date only changes once per minute.
+  const [now, setNow] = useState<Date | null>(null);
+
+  useEffect(() => {
+    const update = () => setNow(new Date());
+    update();
+    const timer = globalThis.setInterval(update, 60_000);
+    return () => globalThis.clearInterval(timer);
+  }, []);
+
+  const weekday = now
+    ? now.toLocaleDateString("en-US", { weekday: "short" }).toUpperCase()
+    : "";
+  const day = now ? now.getDate() : 0;
+  const month = now ? now.toLocaleDateString("en-US", { month: "long" }) : "";
+
+  return (
+    <div
+      ref={ref}
+      data-slot="ios-calendar-widget"
+      className={cn(
+        "flex h-44 w-44 flex-col overflow-hidden rounded-[22px] border border-neutral-100 bg-white px-4 pt-4 pb-3.5 font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      {...props}
+    >
+      {now ? (
+        <div className="flex h-full flex-col opacity-100 transition-opacity duration-500 ease-out starting:opacity-0">
+          <p
+            className="text-[13px] leading-none font-semibold tracking-[-0.02em] transition-colors duration-300"
+            style={{ color: IOS_RED }}
+          >
+            {weekday}
+          </p>
+
+          <div className="mt-auto flex items-baseline gap-1.5">
+            <p
+              key={day}
+              className="text-7xl leading-none font-medium tracking-tighter text-black tabular-nums opacity-100 transition-all duration-500 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] starting:translate-y-1 starting:opacity-0"
+            >
+              {day}
+            </p>
+            <p
+              className="pb-1 text-[17px] leading-none font-normal tracking-[-0.01em]"
+              style={{ color: IOS_LABEL }}
+            >
+              {month}
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex h-full flex-col pt-0.5">
+          <div className="h-3 w-9 rounded bg-neutral-100" aria-hidden />
+          <div className="mt-auto flex items-baseline gap-1.5">
+            <div className="h-12 w-10 rounded bg-neutral-100" aria-hidden />
+            <div className="h-4 w-14 rounded bg-neutral-100" aria-hidden />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+IosCalendarWidget.displayName = "IosCalendarWidget";
+export const IosCalenderWidget = IosCalendarWidget;

package/components/widgets/ios-digital-clock-widget.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+type PointOnPath = Readonly<{
+  x: number;
+  y: number;
+  tx: number;
+  ty: number;
+}>;
+
+// Walks a rounded rectangle path (0–1) and returns a point plus its inward normal.
+function pointOnRoundedRect(
+  t: number,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  radius: number,
+): PointOnPath {
+  const sw = width - 2 * radius;
+  const sh = height - 2 * radius;
+  const arc = (Math.PI / 2) * radius;
+  const perim = 2 * sw + 2 * sh + 4 * arc;
+  let d = (((t % 1) + 1) % 1) * perim;
+
+  if (d <= sw) {
+    return { x: left + radius + d, y: top, tx: 1, ty: 0 };
+  }
+  d -= sw;
+
+  if (d <= arc) {
+    const angle = -Math.PI / 2 + (d / arc) * (Math.PI / 2);
+    const ox = left + width - radius;
+    const oy = top + radius;
+    return {
+      x: ox + radius * Math.cos(angle),
+      y: oy + radius * Math.sin(angle),
+      tx: -Math.sin(angle),
+      ty: Math.cos(angle),
+    };
+  }
+  d -= arc;
+
+  if (d <= sh) {
+    return { x: left + width, y: top + radius + d, tx: 0, ty: 1 };
+  }
+  d -= sh;
+
+  if (d <= arc) {
+    const angle = (d / arc) * (Math.PI / 2);
+    const ox = left + width - radius;
+    const oy = top + height - radius;
+    return {
+      x: ox + radius * Math.cos(angle),
+      y: oy + radius * Math.sin(angle),
+      tx: -Math.sin(angle),
+      ty: Math.cos(angle),
+    };
+  }
+  d -= arc;
+
+  if (d <= sw) {
+    return { x: left + width - radius - d, y: top + height, tx: -1, ty: 0 };
+  }
+  d -= sw;
+
+  if (d <= arc) {
+    const angle = Math.PI / 2 + (d / arc) * (Math.PI / 2);
+    const ox = left + radius;
+    const oy = top + height - radius;
+    return {
+      x: ox + radius * Math.cos(angle),
+      y: oy + radius * Math.sin(angle),
+      tx: -Math.sin(angle),
+      ty: Math.cos(angle),
+    };
+  }
+  d -= arc;
+
+  if (d <= sh) {
+    return { x: left, y: top + height - radius - d, tx: 0, ty: -1 };
+  }
+  d -= sh;
+
+  const angle = Math.PI + (d / arc) * (Math.PI / 2);
+  const ox = left + radius;
+  const oy = top + radius;
+  return {
+    x: ox + radius * Math.cos(angle),
+    y: oy + radius * Math.sin(angle),
+    tx: -Math.sin(angle),
+    ty: Math.cos(angle),
+  };
+}
+
+// 60 tick marks spaced evenly around the squircle border.
+const BORDER_TICKS = Array.from({ length: 60 }, (_, tick) => {
+  const { x, y, tx, ty } = pointOnRoundedRect(tick / 60, 2, 2, 96, 96, 18);
+  const len = 4.2;
+  const f = (n: number) => n.toFixed(2);
+  return {
+    tick,
+    x1: f(x),
+    y1: f(y),
+    x2: f(x - ty * len),
+    y2: f(y + tx * len),
+  };
+});
+
+type SquircleDigitalFaceProps = Readonly<{
+  hours: string;
+  minutes: string;
+}>;
+
+function SquircleDigitalFace({ hours, minutes }: SquircleDigitalFaceProps) {
+  return (
+    <div className="relative h-full w-full">
+      {/* Tick ring sits behind the centered HH:MM readout. */}
+      <svg viewBox="0 0 100 100" className="h-full w-full" aria-hidden>
+        {BORDER_TICKS.map((tick) => (
+          <line
+            key={tick.tick}
+            x1={tick.x1}
+            y1={tick.y1}
+            x2={tick.x2}
+            y2={tick.y2}
+            stroke="#d4d4d4"
+            strokeWidth="1.1"
+            strokeLinecap="round"
+          />
+        ))}
+      </svg>
+
+      <div className="absolute inset-0 flex items-center justify-center">
+        <p className="text-5xl leading-none font-bold tracking-tight text-neutral-900 tabular-nums">
+          {hours}:{minutes}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export type IosDigitalClockWidgetProps = Readonly<
+  ComponentPropsWithoutRef<"div">
+>;
+
+export const IosDigitalClockWidget = forwardRef<
+  HTMLDivElement,
+  IosDigitalClockWidgetProps
+>(({ className, ...props }, ref) => {
+  // Start as null so the first paint matches SSR; then refresh every second on the client.
+  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 ? String(now.getHours()).padStart(2, "0") : "00";
+  const minutes = now ? String(now.getMinutes()).padStart(2, "0") : "00";
+
+  return (
+    <div
+      ref={ref}
+      data-slot="ios-digital-clock-widget"
+      className={cn(
+        "flex h-44 w-44 items-center justify-center overflow-hidden rounded-3xl border border-neutral-100 bg-white p-1 font-sans shadow-lg select-none",
+        className,
+      )}
+      {...props}
+    >
+      {now ? (
+        <SquircleDigitalFace hours={hours} minutes={minutes} />
+      ) : (
+        // Gray bar matches the size of the HH:MM text while time loads.
+        <div className="h-9 w-28 rounded-lg bg-neutral-100" aria-hidden />
+      )}
+    </div>
+  );
+});
+
+IosDigitalClockWidget.displayName = "IosDigitalClockWidget";