motion-ui-skill 2.0.0

package/components/calendar/booking-slot-calendar.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+  type SVGProps,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// Inlined — not in lucide; ships with the component so copy-paste stays self-contained.
+export function GoogleCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <path fill="#fff" d="M195.368 60.632H60.632v134.736h134.736z" />
+      <path
+        fill="#ea4335"
+        d="M195.368 256L256 195.368l-30.316-5.172l-30.316 5.172l-5.533 27.73z"
+      />
+      <path
+        fill="#188038"
+        d="M0 195.368v40.421C0 246.956 9.044 256 20.21 256h40.422l6.225-30.316l-6.225-30.316l-33.033-5.172z"
+      />
+      <path
+        fill="#1967d2"
+        d="M256 60.632V20.21C256 9.044 246.956 0 235.79 0h-40.422q-5.532 22.554-5.533 33.196q0 10.641 5.533 27.436q20.115 5.76 30.316 5.76T256 60.631"
+      />
+      <path fill="#fbbc04" d="M256 60.632h-60.632v134.736H256z" />
+      <path fill="#34a853" d="M195.368 195.368H60.632V256h134.736z" />
+      <path
+        fill="#4285f4"
+        d="M195.368 0H20.211C9.044 0 0 9.044 0 20.21v175.158h60.632V60.632h134.736z"
+      />
+      <path
+        fill="#4285f4"
+        d="M88.27 165.154c-5.036-3.402-8.523-8.37-10.426-14.94l11.689-4.816q1.59 6.063 5.558 9.398c2.627 2.223 5.827 3.318 9.566 3.318q5.734 0 9.852-3.487c2.746-2.324 4.127-5.288 4.127-8.875q0-5.508-4.345-8.994c-2.897-2.324-6.535-3.486-10.88-3.486h-6.754v-11.57h6.063q5.608 0 9.448-3.033c2.56-2.02 3.84-4.783 3.84-8.303c0-3.132-1.145-5.625-3.435-7.494c-2.29-1.87-5.188-2.813-8.708-2.813c-3.436 0-6.164.91-8.185 2.745a16.1 16.1 0 0 0-4.413 6.754l-11.57-4.817c1.532-4.345 4.345-8.185 8.471-11.503s9.398-4.985 15.798-4.985c4.733 0 8.994.91 12.767 2.745c3.772 1.836 6.736 4.379 8.875 7.613c2.14 3.25 3.2 6.888 3.2 10.93c0 4.126-.993 7.613-2.98 10.476s-4.43 5.052-7.327 6.585v.69a22.25 22.25 0 0 1 9.398 7.327c2.442 3.284 3.672 7.208 3.672 11.79c0 4.58-1.163 8.673-3.487 12.26c-2.324 3.588-5.54 6.417-9.617 8.472c-4.092 2.055-8.69 3.1-13.793 3.1c-5.912.016-11.369-1.685-16.405-5.087m71.797-58.005l-12.833 9.28l-6.417-9.734l23.023-16.607h8.825v78.333h-12.598z"
+      />
+    </svg>
+  );
+}
+
+const SLOTS = [
+  "9:00 AM",
+  "9:30 AM",
+  "10:00 AM",
+  "10:30 AM",
+  "11:00 AM",
+  "2:00 PM",
+  "2:30 PM",
+  "3:00 PM",
+] as const;
+
+function startOfWeek(date: Date) {
+  const copy = new Date(date);
+  copy.setDate(copy.getDate() - copy.getDay());
+  copy.setHours(0, 0, 0, 0);
+  return copy;
+}
+
+function addDays(date: Date, days: number) {
+  const copy = new Date(date);
+  copy.setDate(copy.getDate() + days);
+  return copy;
+}
+
+function isSameDate(a: Date, b: Date) {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function startOfDay(date: Date) {
+  const copy = new Date(date);
+  copy.setHours(0, 0, 0, 0);
+  return copy;
+}
+
+function isBeforeDay(date: Date, day: Date) {
+  return startOfDay(date).getTime() < startOfDay(day).getTime();
+}
+
+export type BookingSlotCalendarProps = Readonly<
+  {
+    slots?: readonly string[];
+    onBook?: (date: Date, slot: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Booking calendar — Google Calendar-style appointment picker: pick a day,
+// then tap an available time slot.
+export const BookingSlotCalendar = forwardRef<
+  HTMLDivElement,
+  BookingSlotCalendarProps
+>(({ className, slots = SLOTS, onBook, ...props }, ref) => {
+  const today = useMemo(() => startOfDay(new Date()), []);
+  const [weekStart, setWeekStart] = useState(() => startOfWeek(today));
+  const [selectedDay, setSelectedDay] = useState(today);
+  const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
+  const [slideDirection, setSlideDirection] = useState(0);
+
+  const days = useMemo(
+    () => Array.from({ length: 7 }, (_, index) => addDays(weekStart, index)),
+    [weekStart],
+  );
+
+  // Previous week is fully in the past when its last day is before today.
+  const canGoPrev = !isBeforeDay(addDays(weekStart, -1), today);
+
+  const monthLabel = days[3]?.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric",
+  });
+
+  const dayLabel = selectedDay.toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "short",
+    day: "numeric",
+  });
+
+  const pickDay = (date: Date) => {
+    if (isBeforeDay(date, today)) return;
+    setSelectedDay(startOfDay(date));
+    setSelectedSlot(null);
+  };
+
+  const pickSlot = (slot: string) => {
+    if (isBeforeDay(selectedDay, today)) return;
+    setSelectedSlot(slot);
+    onBook?.(selectedDay, slot);
+  };
+
+  const goPrevWeek = () => {
+    if (!canGoPrev) return;
+    setSlideDirection(-1);
+    setWeekStart((prev) => addDays(prev, -7));
+  };
+
+  const goNextWeek = () => {
+    setSlideDirection(1);
+    setWeekStart((prev) => addDays(prev, 7));
+  };
+
+  return (
+    <div
+      ref={ref}
+      data-slot="booking-slot-calendar"
+      className={cn(
+        "w-80 overflow-hidden rounded-2xl border border-neutral-100/80 bg-white font-sans select-none",
+        "shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.05),0_4px_8px_rgba(0,0,0,0.06),0_12px_24px_rgba(0,0,0,0.04)]",
+        className,
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3 border-b border-neutral-100 px-5 py-4">
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg">
+          <GoogleCalendarIcon className="size-7" aria-hidden />
+        </span>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-neutral-900">Book a slot</p>
+          <p className="truncate text-xs text-neutral-500">
+            30 min · Google Meet video call
+          </p>
+        </div>
+      </div>
+
+      <div className="px-5 py-4">
+        {/* Month + week navigation */}
+        <div className="mb-3 flex items-center justify-between">
+          <p className="text-[13px] font-medium text-neutral-900">
+            {monthLabel}
+          </p>
+          <div className="flex items-center">
+            <button
+              type="button"
+              aria-label="Previous week"
+              disabled={!canGoPrev}
+              onClick={goPrevWeek}
+              className={cn(
+                "flex size-8 items-center justify-center rounded-full transition-colors duration-150 outline-none",
+                "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-800",
+                canGoPrev
+                  ? "cursor-pointer text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900"
+                  : "cursor-not-allowed text-neutral-300",
+              )}
+            >
+              <ChevronLeft size={16} strokeWidth={2} aria-hidden />
+            </button>
+            <button
+              type="button"
+              aria-label="Next week"
+              onClick={goNextWeek}
+              className="flex size-8 cursor-pointer items-center justify-center rounded-full text-neutral-500 transition-colors duration-150 outline-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-800"
+            >
+              <ChevronRight size={16} strokeWidth={2} aria-hidden />
+            </button>
+          </div>
+        </div>
+
+        {/* Week strip */}
+        <div
+          key={weekStart.toISOString()}
+          className={cn(
+            "mb-4 grid grid-cols-7 opacity-100 transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] starting:opacity-0",
+            slideDirection >= 0
+              ? "starting:translate-x-2"
+              : "starting:-translate-x-2",
+          )}
+        >
+          {days.map((date) => {
+            const active = isSameDate(date, selectedDay);
+            const isToday = isSameDate(date, today);
+            const past = isBeforeDay(date, today);
+            return (
+              <button
+                key={date.toISOString()}
+                type="button"
+                aria-pressed={active}
+                aria-disabled={past || undefined}
+                disabled={past}
+                onClick={() => pickDay(date)}
+                className={cn(
+                  "group flex flex-col items-center gap-1 outline-none",
+                  past ? "cursor-not-allowed" : "cursor-pointer",
+                )}
+              >
+                <span
+                  className={cn(
+                    "text-[10px] font-medium tracking-wide uppercase",
+                    past ? "text-neutral-300" : "text-neutral-500",
+                  )}
+                >
+                  {date.toLocaleDateString("en-US", { weekday: "narrow" })}
+                </span>
+                <span
+                  className={cn(
+                    "flex size-8 items-center justify-center rounded-full text-xs font-medium tabular-nums",
+                    "transition-colors duration-150",
+                    !past &&
+                      "group-focus-visible:outline-2 group-focus-visible:outline-offset-1 group-focus-visible:outline-neutral-800",
+                    past && "text-neutral-300",
+                    !past &&
+                      active &&
+                      "bg-neutral-800 font-semibold text-white",
+                    !past &&
+                      !active &&
+                      isToday &&
+                      "bg-neutral-100 font-semibold text-neutral-800 group-hover:bg-neutral-200",
+                    !past &&
+                      !active &&
+                      !isToday &&
+                      "text-neutral-700 group-hover:bg-neutral-100",
+                  )}
+                >
+                  {date.getDate()}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Selected day */}
+        <p
+          key={dayLabel}
+          className="mb-2.5 text-xs font-medium text-neutral-500 opacity-100 transition-all duration-300 ease-out starting:opacity-0"
+        >
+          {dayLabel}
+        </p>
+
+        {/* Time slots */}
+        <div
+          key={`${selectedDay.toISOString()}-slots`}
+          className="grid grid-cols-2 gap-2 opacity-100 transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] starting:translate-y-1 starting:opacity-0"
+        >
+          {slots.map((slot) => {
+            const taken = slot === "10:30 AM" || slot === "2:30 PM";
+            const active = selectedSlot === slot;
+
+            return (
+              <button
+                key={slot}
+                type="button"
+                disabled={taken}
+                aria-pressed={active}
+                onClick={() => pickSlot(slot)}
+                className={cn(
+                  "h-9 rounded-lg text-xs font-medium tabular-nums outline-none",
+                  "transition-colors duration-150",
+                  "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-800",
+                  taken &&
+                    "cursor-not-allowed bg-neutral-50 text-neutral-300 line-through",
+                  !taken &&
+                    active &&
+                    "cursor-pointer bg-neutral-800 text-white",
+                  !taken &&
+                    !active &&
+                    "cursor-pointer bg-neutral-50 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900",
+                )}
+              >
+                {slot}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+BookingSlotCalendar.displayName = "BookingSlotCalendar";

package/components/calendar/date-range-picker-card.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"] as const;
+
+type DayCell = Readonly<{ day: number; month: number; year: number }>;
+
+function buildMonthCells(year: number, month: number): Array<DayCell | null> {
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells: Array<DayCell | null> = [];
+
+  for (let index = 0; index < firstDay; index += 1) {
+    cells.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push({ day, month, year });
+  }
+  return cells;
+}
+
+function toKey(cell: DayCell) {
+  return `${cell.year}-${cell.month}-${cell.day}`;
+}
+
+function formatCell(cell: DayCell) {
+  return new Date(cell.year, cell.month, cell.day).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export type DateRangePickerCardProps = Readonly<
+  {
+    defaultYear?: number;
+    defaultMonth?: number;
+    onChange?: (start: Date | null, end: Date | null) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Date range picker — first tap sets start, second tap sets end, range fills between.
+export const DateRangePickerCard = forwardRef<
+  HTMLDivElement,
+  DateRangePickerCardProps
+>(({ className, defaultYear, defaultMonth, onChange, ...props }, ref) => {
+  const today = useMemo(() => new Date(), []);
+  const [viewYear, setViewYear] = useState(defaultYear ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(defaultMonth ?? today.getMonth());
+  const [start, setStart] = useState<DayCell | null>(null);
+  const [end, setEnd] = useState<DayCell | null>(null);
+  const [slideDirection, setSlideDirection] = useState(0);
+
+  const cells = useMemo(
+    () => buildMonthCells(viewYear, viewMonth),
+    [viewYear, viewMonth],
+  );
+
+  const monthLabel = new Date(viewYear, viewMonth, 1).toLocaleDateString(
+    "en-US",
+    { month: "long", year: "numeric" },
+  );
+
+  const shiftMonth = (delta: number) => {
+    setSlideDirection(delta);
+    const next = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(next.getFullYear());
+    setViewMonth(next.getMonth());
+  };
+
+  const selectCell = (cell: DayCell) => {
+    if (!start || (start && end)) {
+      setStart(cell);
+      setEnd(null);
+      onChange?.(new Date(cell.year, cell.month, cell.day), null);
+      return;
+    }
+
+    const startTime = new Date(start.year, start.month, start.day).getTime();
+    const cellTime = new Date(cell.year, cell.month, cell.day).getTime();
+
+    if (cellTime < startTime) {
+      setEnd(start);
+      setStart(cell);
+      onChange?.(
+        new Date(cell.year, cell.month, cell.day),
+        new Date(start.year, start.month, start.day),
+      );
+    } else {
+      setEnd(cell);
+      onChange?.(
+        new Date(start.year, start.month, start.day),
+        new Date(cell.year, cell.month, cell.day),
+      );
+    }
+  };
+
+  const inRange = (cell: DayCell) => {
+    if (!start || !end) return false;
+    const time = new Date(cell.year, cell.month, cell.day).getTime();
+    const a = new Date(start.year, start.month, start.day).getTime();
+    const b = new Date(end.year, end.month, end.day).getTime();
+    const min = Math.min(a, b);
+    const max = Math.max(a, b);
+    return time >= min && time <= max;
+  };
+
+  const rangeLabel =
+    start && end
+      ? `${formatCell(start)} – ${formatCell(end)}`
+      : start
+        ? `${formatCell(start)} – pick end`
+        : "Select a date range";
+
+  return (
+    <div
+      ref={ref}
+      data-slot="date-range-picker-card"
+      className={cn(
+        "w-80 overflow-hidden rounded-2xl border border-neutral-100 bg-white p-4 font-sans shadow-lg shadow-black/5 select-none",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <button
+          type="button"
+          aria-label="Previous month"
+          onClick={() => shiftMonth(-1)}
+          className="flex size-8 cursor-pointer items-center justify-center rounded-lg text-neutral-500 transition-all duration-200 ease-out hover:bg-neutral-100 active:scale-95"
+        >
+          <ChevronLeft size={16} strokeWidth={2} />
+        </button>
+        <p
+          key={monthLabel}
+          className="text-sm font-semibold text-neutral-900 opacity-100 transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] starting:opacity-0"
+        >
+          {monthLabel}
+        </p>
+        <button
+          type="button"
+          aria-label="Next month"
+          onClick={() => shiftMonth(1)}
+          className="flex size-8 cursor-pointer items-center justify-center rounded-lg text-neutral-500 transition-all duration-200 ease-out hover:bg-neutral-100 active:scale-95"
+        >
+          <ChevronRight size={16} strokeWidth={2} />
+        </button>
+      </div>
+
+      <p
+        key={rangeLabel}
+        className="mb-3 text-xs text-neutral-500 opacity-100 transition-all duration-300 ease-out starting:opacity-0"
+      >
+        {rangeLabel}
+      </p>
+
+      <div className="mb-2 grid grid-cols-7 text-center text-[10px] font-medium text-neutral-400">
+        {WEEKDAYS.map((label, index) => (
+          <span key={`${label}-${index}`}>{label}</span>
+        ))}
+      </div>
+
+      <div
+        key={`${viewYear}-${viewMonth}`}
+        className={cn(
+          "grid grid-cols-7 gap-y-1 opacity-100 transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] starting:opacity-0",
+          slideDirection >= 0
+            ? "starting:translate-x-2"
+            : "starting:-translate-x-2",
+        )}
+      >
+        {cells.map((cell, index) => {
+          if (!cell) {
+            return <span key={`empty-${index}`} className="h-9" />;
+          }
+
+          const key = toKey(cell);
+          const isStart = start && toKey(start) === key;
+          const isEnd = end && toKey(end) === key;
+          const isBetween = inRange(cell) && !isStart && !isEnd;
+
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => selectCell(cell)}
+              className={cn(
+                "mx-auto flex h-9 w-9 cursor-pointer items-center justify-center text-sm tabular-nums transition-all duration-200 ease-out active:scale-95",
+                isBetween &&
+                  "w-full rounded-none bg-neutral-100 text-neutral-800",
+                (isStart || isEnd) &&
+                  "scale-100 rounded-full bg-neutral-900 font-semibold text-white",
+                !isBetween &&
+                  !isStart &&
+                  !isEnd &&
+                  "rounded-full text-neutral-700 hover:bg-neutral-100",
+              )}
+            >
+              {cell.day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+DateRangePickerCard.displayName = "DateRangePickerCard";

package/components/calendar/event-countdown-card.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+function getCountdown(target: Date) {
+  const diff = Math.max(0, target.getTime() - Date.now());
+  const totalMinutes = Math.floor(diff / 60_000);
+  const days = Math.floor(totalMinutes / (60 * 24));
+  const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+  const minutes = totalMinutes % 60;
+  return { days, hours, minutes, done: diff <= 0 };
+}
+
+export type EventCountdownCardProps = Readonly<
+  {
+    title?: string;
+    targetDate?: string;
+    onComplete?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Event countdown — live days, hours, and minutes until a target date.
+export const EventCountdownCard = forwardRef<
+  HTMLDivElement,
+  EventCountdownCardProps
+>(
+  (
+    {
+      className,
+      title = "Product launch",
+      targetDate = "2026-12-01T09:00:00",
+      onComplete,
+      ...props
+    },
+    ref,
+  ) => {
+    const target = useMemo(() => new Date(targetDate), [targetDate]);
+    const [countdown, setCountdown] = useState(() => getCountdown(target));
+
+    useEffect(() => {
+      const tick = () => {
+        const next = getCountdown(target);
+        setCountdown(next);
+        if (next.done) onComplete?.();
+      };
+      tick();
+      const timer = globalThis.setInterval(tick, 60_000);
+      return () => globalThis.clearInterval(timer);
+    }, [target, onComplete]);
+
+    const dateLabel = target.toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+    });
+
+    return (
+      <div
+        ref={ref}
+        data-slot="event-countdown-card"
+        className={cn(
+          "w-56 rounded-2xl border border-neutral-100 bg-white p-5 font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <p className="text-[11px] font-medium tracking-wide text-neutral-400 uppercase">
+          Countdown
+        </p>
+        <p className="mt-1 text-sm font-semibold text-neutral-900">{title}</p>
+        <p className="mt-0.5 text-xs text-neutral-500">{dateLabel}</p>
+
+        <div className="mt-5 grid grid-cols-3 gap-2 border-t border-neutral-100 pt-4">
+          {[
+            { value: countdown.days, label: "days" },
+            { value: countdown.hours, label: "hrs" },
+            { value: countdown.minutes, label: "min" },
+          ].map((unit) => (
+            <div key={unit.label} className="text-center">
+              <p
+                key={`${unit.label}-${unit.value}`}
+                className="text-2xl leading-none font-light text-neutral-900 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"
+              >
+                {String(unit.value).padStart(2, "0")}
+              </p>
+              <p className="mt-1 text-[10px] text-neutral-400 uppercase">
+                {unit.label}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
+EventCountdownCard.displayName = "EventCountdownCard";