motion-ui-skill 2.0.0

package/components/notifications/apple-notification-banner.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { X } from "lucide-react";
+
+const EXIT_MS = 260;
+
+export type AppleNotificationBannerProps = Readonly<
+  {
+    title?: string;
+    sender?: string;
+    message?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    showTriggerLabel?: string;
+    onDismiss?: () => void;
+    onShow?: () => void;
+  } & ComponentPropsWithoutRef<"output">
+>;
+
+// iOS-style notification — slide + fade via Tailwind v4 starting: and data-phase utilities.
+export const AppleNotificationBanner = forwardRef<
+  HTMLOutputElement,
+  AppleNotificationBannerProps
+>(
+  (
+    {
+      className,
+      title = "Messages",
+      sender = "Sarah",
+      message = "Hey! Are we still on for the design review today?",
+      time = "now",
+      avatarSrc = "/woman.png",
+      avatarAlt = "App",
+      showTriggerLabel = "Show notification",
+      onDismiss,
+      onShow,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
+
+    useEffect(() => {
+      if (phase !== "closing") return;
+      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
+      return () => globalThis.clearTimeout(timer);
+    }, [phase]);
+
+    const handleDismiss = () => {
+      if (phase !== "open") return;
+      setPhase("closing");
+      onDismiss?.();
+    };
+
+    const handleShow = () => {
+      setPhase("open");
+      onShow?.();
+    };
+
+    if (phase === "closed") {
+      return (
+        <button
+          type="button"
+          data-slot="apple-notification-banner-trigger"
+          onClick={handleShow}
+          className={cn(
+            "cursor-pointer rounded-xl bg-[#f2f2f7] px-4 py-2 text-xs font-medium text-neutral-700",
+            "opacity-100 starting:opacity-0",
+            "transition-opacity duration-280 ease-out hover:bg-[#e8e8ed]",
+            className,
+          )}
+        >
+          {showTriggerLabel}
+        </button>
+      );
+    }
+
+    return (
+      <output
+        ref={ref}
+        data-slot="apple-notification-banner"
+        data-phase={phase}
+        className={cn(
+          "relative block w-80 overflow-hidden rounded-[1.25rem] border border-white/70 bg-white/90 p-0 font-sans",
+          "shadow-[0_8px_32px_-4px_rgba(0,0,0,0.10)] backdrop-blur-xl",
+          "translate-y-0 opacity-100 starting:-translate-y-2.5 starting:opacity-0",
+          "transition-all duration-340 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
+          "data-[phase=closing]:-translate-y-2 data-[phase=closing]:opacity-0",
+          "data-[phase=closing]:duration-260 data-[phase=closing]:ease-[cubic-bezier(0.4,0,0.6,1)]",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          data-slot="apple-notification-banner-dismiss"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification"
+          className="absolute top-2 right-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full text-neutral-400 transition-colors duration-150 hover:bg-black/5 hover:text-neutral-600"
+        >
+          <X size={10} />
+        </button>
+
+        {/* Icon + text grid — matches iOS banner spacing */}
+        <div className="grid grid-cols-[2.375rem_minmax(0,1fr)] items-start gap-x-3 gap-y-1 px-3.5 py-3 pr-9">
+          <div
+            data-slot="apple-notification-banner-avatar"
+            className="relative row-span-2 mt-0.5 size-9.5 shrink-0 overflow-hidden rounded-[0.625rem] shadow-sm ring-1 ring-black/2"
+          >
+            <Image
+              src={avatarSrc}
+              alt={avatarAlt}
+              fill
+              sizes="38px"
+              className="object-cover"
+            />
+          </div>
+
+          <div
+            data-slot="apple-notification-banner-header"
+            className="col-start-2 flex min-w-0 items-center justify-between gap-2"
+          >
+            <p className="truncate text-[13px] leading-tight font-semibold text-neutral-900">
+              {title}
+            </p>
+            <span className="shrink-0 text-[11px] leading-none tracking-tight text-neutral-400 capitalize">
+              {time}
+            </span>
+          </div>
+
+          <p
+            data-slot="apple-notification-banner-content"
+            className="col-start-2 line-clamp-2 text-[13px] leading-[1.38] text-neutral-700"
+          >
+            <span className="font-semibold text-neutral-900">{sender}</span>
+            <span className="text-neutral-500">: </span>
+            {message}
+          </p>
+        </div>
+      </output>
+    );
+  },
+);
+
+AppleNotificationBanner.displayName = "AppleNotificationBanner";

package/components/notifications/calendar-reminder-notification-banner.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Calendar, X } from "lucide-react";
+
+const EXIT_MS = 260;
+
+export type CalendarReminderNotificationBannerProps = Readonly<
+  {
+    appName?: string;
+    event?: string;
+    when?: string;
+    time?: string;
+    showTriggerLabel?: string;
+    onDismiss?: () => void;
+    onShow?: () => void;
+  } & ComponentPropsWithoutRef<"output">
+>;
+
+// Calendar reminder — iOS grid, red app tile, event starting soon.
+export const CalendarReminderNotificationBanner = forwardRef<
+  HTMLOutputElement,
+  CalendarReminderNotificationBannerProps
+>(
+  (
+    {
+      className,
+      appName = "Calendar",
+      event = "Design review",
+      when = "in 15 minutes",
+      time = "now",
+      showTriggerLabel = "Show calendar reminder",
+      onDismiss,
+      onShow,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
+
+    useEffect(() => {
+      if (phase !== "closing") return;
+      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
+      return () => globalThis.clearTimeout(timer);
+    }, [phase]);
+
+    const handleDismiss = () => {
+      if (phase !== "open") return;
+      setPhase("closing");
+      onDismiss?.();
+    };
+
+    const handleShow = () => {
+      setPhase("open");
+      onShow?.();
+    };
+
+    if (phase === "closed") {
+      return (
+        <button
+          type="button"
+          onClick={handleShow}
+          className={cn(
+            "cursor-pointer rounded-xl bg-[#f2f2f7] px-4 py-2 text-xs font-medium text-neutral-700",
+            "opacity-100 starting:opacity-0",
+            "transition-opacity duration-280 ease-out hover:bg-[#e8e8ed]",
+            className,
+          )}
+        >
+          {showTriggerLabel}
+        </button>
+      );
+    }
+
+    return (
+      <output
+        ref={ref}
+        data-slot="calendar-reminder-notification-banner"
+        data-phase={phase}
+        className={cn(
+          "relative block w-80 overflow-hidden rounded-[1.25rem] border border-white/70 bg-white/90 p-0 font-sans",
+          "shadow-[0_8px_32px_-4px_rgba(0,0,0,0.10)] backdrop-blur-xl",
+          "translate-y-0 opacity-100 starting:-translate-y-2.5 starting:opacity-0",
+          "transition-all duration-340 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
+          "data-[phase=closing]:-translate-y-2 data-[phase=closing]:opacity-0",
+          "data-[phase=closing]:duration-260 data-[phase=closing]:ease-[cubic-bezier(0.4,0,0.6,1)]",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification"
+          className="absolute top-2 right-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full text-neutral-400 transition-colors duration-150 hover:bg-black/5 hover:text-neutral-600"
+        >
+          <X size={10} />
+        </button>
+
+        <div className="grid grid-cols-[2.375rem_minmax(0,1fr)] items-start gap-x-3 gap-y-1 px-3.5 py-3 pr-9">
+          <div className="row-span-2 mt-0.5 flex size-9.5 shrink-0 items-center justify-center rounded-[0.625rem] bg-red-500 shadow-sm ring-1 ring-black/2">
+            <Calendar
+              size={18}
+              strokeWidth={2}
+              className="text-white"
+              aria-hidden
+            />
+          </div>
+
+          <div className="col-start-2 flex min-w-0 items-center justify-between gap-2">
+            <p className="truncate text-[13px] leading-tight font-semibold text-neutral-900">
+              {appName}
+            </p>
+            <span className="shrink-0 text-[11px] leading-none tracking-tight text-neutral-400 capitalize">
+              {time}
+            </span>
+          </div>
+
+          <p className="col-start-2 line-clamp-2 text-[13px] leading-[1.38] text-neutral-700">
+            <span className="font-semibold text-neutral-900">{event}</span>
+            <span className="text-neutral-500"> starts </span>
+            {when}
+          </p>
+        </div>
+      </output>
+    );
+  },
+);
+
+CalendarReminderNotificationBanner.displayName =
+  "CalendarReminderNotificationBanner";

package/components/notifications/chat-bubble-notification-banner.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { X } from "lucide-react";
+
+const EXIT_MS = 260;
+
+export type ChatBubbleNotificationBannerProps = Readonly<
+  {
+    sender?: string;
+    message?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    showTriggerLabel?: string;
+    onDismiss?: () => void;
+    onShow?: () => void;
+  } & ComponentPropsWithoutRef<"output">
+>;
+
+// Chat bubble alert — sender label above a rounded message bubble.
+export const ChatBubbleNotificationBanner = forwardRef<
+  HTMLOutputElement,
+  ChatBubbleNotificationBannerProps
+>(
+  (
+    {
+      className,
+      sender = "Maya",
+      message = "Running 5 min late — start without me if you need to",
+      time = "just now",
+      avatarSrc = "/woman.png",
+      avatarAlt = "Maya",
+      showTriggerLabel = "Show chat alert",
+      onDismiss,
+      onShow,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
+
+    useEffect(() => {
+      if (phase !== "closing") return;
+      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
+      return () => globalThis.clearTimeout(timer);
+    }, [phase]);
+
+    const handleDismiss = () => {
+      if (phase !== "open") return;
+      setPhase("closing");
+      onDismiss?.();
+    };
+
+    const handleShow = () => {
+      setPhase("open");
+      onShow?.();
+    };
+
+    if (phase === "closed") {
+      return (
+        <button
+          type="button"
+          onClick={handleShow}
+          className={cn(
+            "cursor-pointer rounded-full bg-neutral-100 px-4 py-2 text-xs font-medium text-neutral-700",
+            "opacity-100 transition-opacity duration-200 hover:bg-neutral-200 starting:opacity-0",
+            className,
+          )}
+        >
+          {showTriggerLabel}
+        </button>
+      );
+    }
+
+    return (
+      <output
+        ref={ref}
+        data-slot="chat-bubble-notification-banner"
+        data-phase={phase}
+        className={cn(
+          "relative block w-72 font-sans",
+          "translate-y-0 opacity-100 starting:translate-y-2 starting:opacity-0",
+          "transition-all duration-300 ease-out",
+          "data-[phase=closing]:translate-y-1.5 data-[phase=closing]:opacity-0",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss"
+          className="absolute -top-1 -right-1 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full bg-white text-neutral-400 shadow-sm transition-colors hover:text-neutral-600"
+        >
+          <X size={10} strokeWidth={2} />
+        </button>
+
+        <div className="flex items-end gap-2">
+          <div className="relative size-7 shrink-0 overflow-hidden rounded-full bg-neutral-200">
+            <Image
+              src={avatarSrc}
+              alt={avatarAlt}
+              fill
+              sizes="508px"
+              className="object-cover"
+            />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <p className="mb-1 px-1 text-[11px] font-medium text-neutral-600">
+              {sender}
+            </p>
+            <p className="rounded-2xl rounded-bl-md bg-neutral-100 px-3.5 py-2.5 text-[12px] leading-relaxed text-neutral-800">
+              {message}
+            </p>
+            <p className="mt-1 px-1 text-right text-[10px] text-neutral-400">
+              {time}
+            </p>
+          </div>
+        </div>
+      </output>
+    );
+  },
+);
+
+ChatBubbleNotificationBanner.displayName = "ChatBubbleNotificationBanner";

package/components/notifications/delivery-notification-banner.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Package, X } from "lucide-react";
+
+const EXIT_MS = 260;
+
+export type DeliveryNotificationBannerProps = Readonly<
+  {
+    status?: string;
+    eta?: string;
+    orderId?: string;
+    showTriggerLabel?: string;
+    onDismiss?: () => void;
+    onShow?: () => void;
+  } & ComponentPropsWithoutRef<"output">
+>;
+
+// Delivery update — compact row, package icon, status + ETA.
+export const DeliveryNotificationBanner = forwardRef<
+  HTMLOutputElement,
+  DeliveryNotificationBannerProps
+>(
+  (
+    {
+      className,
+      status = "Out for delivery",
+      eta = "Arriving today by 6:15 PM",
+      orderId = "#4821",
+      showTriggerLabel = "Show delivery update",
+      onDismiss,
+      onShow,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
+
+    useEffect(() => {
+      if (phase !== "closing") return;
+      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
+      return () => globalThis.clearTimeout(timer);
+    }, [phase]);
+
+    const handleDismiss = () => {
+      if (phase !== "open") return;
+      setPhase("closing");
+      onDismiss?.();
+    };
+
+    const handleShow = () => {
+      setPhase("open");
+      onShow?.();
+    };
+
+    if (phase === "closed") {
+      return (
+        <button
+          type="button"
+          onClick={handleShow}
+          className={cn(
+            "cursor-pointer rounded-xl bg-[#f2f2f7] px-4 py-2 text-xs font-medium text-neutral-700",
+            "opacity-100 starting:opacity-0",
+            "transition-opacity duration-280 ease-out hover:bg-[#e8e8ed]",
+            className,
+          )}
+        >
+          {showTriggerLabel}
+        </button>
+      );
+    }
+
+    return (
+      <output
+        ref={ref}
+        data-slot="delivery-notification-banner"
+        data-phase={phase}
+        className={cn(
+          "relative flex w-80 items-start gap-3 rounded-[1.25rem] border border-white/70 bg-white/90 px-3.5 py-3 pr-9 font-sans backdrop-blur-xl",
+          "shadow-[0_8px_32px_-4px_rgba(0,0,0,0.10)]",
+          "translate-y-0 opacity-100 starting:-translate-y-2.5 starting:opacity-0",
+          "transition-all duration-340 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
+          "data-[phase=closing]:-translate-y-2 data-[phase=closing]:opacity-0",
+          "data-[phase=closing]:duration-260 data-[phase=closing]:ease-[cubic-bezier(0.4,0,0.6,1)]",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification"
+          className="absolute top-2 right-2 flex size-6 cursor-pointer items-center justify-center rounded-full text-neutral-400 transition-colors duration-150 hover:bg-black/5 hover:text-neutral-600"
+        >
+          <X size={10} />
+        </button>
+
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-sky-50">
+          <Package
+            size={18}
+            strokeWidth={2}
+            className="text-sky-600"
+            aria-hidden
+          />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <p className="text-[13px] font-semibold text-neutral-900">{status}</p>
+          <p className="mt-0.5 text-[12px] leading-snug text-neutral-600">
+            {eta}
+          </p>
+          <p className="mt-1 text-[11px] text-neutral-400">Order {orderId}</p>
+        </div>
+      </output>
+    );
+  },
+);
+
+DeliveryNotificationBanner.displayName = "DeliveryNotificationBanner";

package/components/notifications/deploy-notification-banner.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { X } from "lucide-react";
+
+const EXIT_MS = 260;
+
+export type DeployNotificationBannerProps = Readonly<
+  {
+    appName?: string;
+    project?: string;
+    branch?: string;
+    duration?: string;
+    showTriggerLabel?: string;
+    onDismiss?: () => void;
+    onShow?: () => void;
+  } & ComponentPropsWithoutRef<"output">
+>;
+
+// Deploy alert — iOS grid, dark app tile, short status copy.
+export const DeployNotificationBanner = forwardRef<
+  HTMLOutputElement,
+  DeployNotificationBannerProps
+>(
+  (
+    {
+      className,
+      appName = "Vercel",
+      project = "app-ui",
+      branch = "main",
+      duration = "42s",
+      showTriggerLabel = "Show deploy alert",
+      onDismiss,
+      onShow,
+      ...props
+    },
+    ref,
+  ) => {
+    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
+
+    useEffect(() => {
+      if (phase !== "closing") return;
+      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
+      return () => globalThis.clearTimeout(timer);
+    }, [phase]);
+
+    const handleDismiss = () => {
+      if (phase !== "open") return;
+      setPhase("closing");
+      onDismiss?.();
+    };
+
+    const handleShow = () => {
+      setPhase("open");
+      onShow?.();
+    };
+
+    if (phase === "closed") {
+      return (
+        <button
+          type="button"
+          onClick={handleShow}
+          className={cn(
+            "cursor-pointer rounded-xl bg-[#f2f2f7] px-4 py-2 text-xs font-medium text-neutral-700",
+            "opacity-100 starting:opacity-0",
+            "transition-opacity duration-280 ease-out hover:bg-[#e8e8ed]",
+            className,
+          )}
+        >
+          {showTriggerLabel}
+        </button>
+      );
+    }
+
+    return (
+      <output
+        ref={ref}
+        data-slot="deploy-notification-banner"
+        data-phase={phase}
+        className={cn(
+          "relative block w-80 overflow-hidden rounded-[1.25rem] border border-white/70 bg-white/90 p-0 font-sans",
+          "shadow-[0_8px_32px_-4px_rgba(0,0,0,0.10)] backdrop-blur-xl",
+          "translate-y-0 opacity-100 starting:-translate-y-2.5 starting:opacity-0",
+          "transition-all duration-340 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
+          "data-[phase=closing]:-translate-y-2 data-[phase=closing]:opacity-0",
+          "data-[phase=closing]:duration-260 data-[phase=closing]:ease-[cubic-bezier(0.4,0,0.6,1)]",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification"
+          className="absolute top-2 right-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full text-neutral-400 transition-colors duration-150 hover:bg-black/5 hover:text-neutral-600"
+        >
+          <X size={10} />
+        </button>
+
+        <div className="grid grid-cols-[2.375rem_minmax(0,1fr)] items-start gap-x-3 gap-y-1 px-3.5 py-3 pr-9">
+          <div className="row-span-2 mt-0.5 flex size-9.5 shrink-0 items-center justify-center rounded-[0.625rem] bg-neutral-900 shadow-sm ring-1 ring-black/2">
+            <svg
+              aria-hidden
+              viewBox="0 0 76 65"
+              className="size-4 text-white"
+              fill="currentColor"
+            >
+              <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+            </svg>
+          </div>
+
+          <div className="col-start-2 flex min-w-0 items-center justify-between gap-2">
+            <p className="truncate text-[13px] leading-tight font-semibold text-neutral-900">
+              {appName}
+            </p>
+            <span className="shrink-0 text-[11px] leading-none tracking-tight text-neutral-400">
+              {duration}
+            </span>
+          </div>
+
+          <p className="col-start-2 line-clamp-2 text-[13px] leading-[1.38] text-neutral-700">
+            <span className="font-semibold text-neutral-900">{project}</span>
+            <span className="text-neutral-500"> is live on </span>
+            <span className="font-medium text-neutral-800">production</span>
+            <span className="text-neutral-400"> ({branch})</span>
+          </p>
+        </div>
+      </output>
+    );
+  },
+);
+
+DeployNotificationBanner.displayName = "DeployNotificationBanner";