motion-ui-skill 2.0.0

package/components/dropdowns/share-menu-dropdown.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  cloneElement,
+  type ComponentPropsWithoutRef,
+  type ReactElement,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Share2, Link, Check } from "lucide-react";
+import { Twitter } from "@/icons/brands/twitter";
+import { Linkedin } from "@/icons/brands/linkedin";
+import { Github } from "@/icons/brands/github";
+import { Discord } from "@/icons/brands/discord";
+
+export type ShareMenuItem = Readonly<{
+  id: string;
+  label?: string;
+  icon?: ReactElement;
+  separator?: boolean;
+}>;
+
+export type ShareMenuDropdownProps = Readonly<
+  {
+    buttonLabel?: string;
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    items?: readonly ShareMenuItem[];
+    onItemClick?: (item: ShareMenuItem) => void;
+    copied?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultItems: readonly ShareMenuItem[] = [
+  { id: "twitter", label: "X", icon: <Twitter /> },
+  { id: "linkedin", label: "LinkedIn", icon: <Linkedin /> },
+  { id: "github", label: "GitHub", icon: <Github /> },
+  { id: "discord", label: "Discord", icon: <Discord /> },
+  { id: "separator-copy", separator: true },
+  { id: "copy-link", label: "Copy link", icon: <Link /> },
+];
+
+const socialItems = (items: readonly ShareMenuItem[]) =>
+  items.filter((item) => !item.separator && item.id !== "copy-link");
+
+const copyItem = (items: readonly ShareMenuItem[]) =>
+  items.find((item) => item.id === "copy-link");
+
+// Share menu — square trigger, horizontal icon rail panel.
+export const ShareMenuDropdown = forwardRef<
+  HTMLDivElement,
+  ShareMenuDropdownProps
+>(
+  (
+    {
+      buttonLabel = "Share",
+      triggerAriaLabel = "Open share menu",
+      menuAriaLabel = "Share options",
+      items = defaultItems,
+      onItemClick,
+      copied = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const menuId = useId();
+
+    const socials = socialItems(items);
+    const copy = copyItem(items);
+
+    useEffect(() => {
+      const closeOnOutside = (event: globalThis.MouseEvent) => {
+        if (!rootRef.current?.contains(event.target as Node)) {
+          setOpen(false);
+        }
+      };
+
+      const closeOnEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setOpen(false);
+      };
+
+      document.addEventListener("mousedown", closeOnOutside);
+      document.addEventListener("keydown", closeOnEscape);
+      return () => {
+        document.removeEventListener("mousedown", closeOnOutside);
+        document.removeEventListener("keydown", closeOnEscape);
+      };
+    }, []);
+
+    const handleItemSelect = (item: ShareMenuItem) => {
+      if (item.id !== "copy-link") {
+        setOpen(false);
+      }
+      onItemClick?.(item);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="share-menu-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div ref={rootRef} className="relative">
+          <button
+            type="button"
+            aria-label={triggerAriaLabel}
+            aria-expanded={open}
+            aria-haspopup="menu"
+            aria-controls={open ? menuId : undefined}
+            onClick={toggleOpen}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                toggleOpen();
+              }
+            }}
+            className={cn(
+              "inline-flex size-10 cursor-pointer items-center justify-center rounded-lg border bg-white transition-colors",
+              open
+                ? "border-neutral-200"
+                : "border-neutral-100 hover:border-neutral-200",
+            )}
+          >
+            <Share2 size={16} strokeWidth={2} className="text-neutral-500" />
+          </button>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="absolute top-[calc(100%+8px)] left-0 z-100 w-56 rounded-xl border border-neutral-100 bg-white p-3 shadow-[0_20px_50px_-12px_rgba(0,0,0,0.05)]"
+            >
+              <p className="mb-2.5 text-[10px] font-medium tracking-wide text-neutral-400 uppercase">
+                {buttonLabel}
+              </p>
+
+              <div className="flex justify-between gap-1">
+                {socials.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    role="menuitem"
+                    aria-label={`Share on ${item.label}`}
+                    onClick={() => handleItemSelect(item)}
+                    className="flex flex-1 cursor-pointer flex-col items-center gap-1.5 rounded-lg py-2 transition-colors hover:bg-neutral-50"
+                  >
+                    <span className="text-neutral-700">
+                      {cloneElement(
+                        item.icon as ReactElement<{ size?: number }>,
+                        { size: 16 },
+                      )}
+                    </span>
+                    <span className="text-[9px] font-medium text-neutral-500">
+                      {item.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
+
+              {copy ? (
+                <button
+                  type="button"
+                  role="menuitem"
+                  aria-label={copied ? "Link copied" : copy.label}
+                  onClick={() => handleItemSelect(copy)}
+                  className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-neutral-100 py-2 text-[11px] font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
+                >
+                  {copied ? (
+                    <Check size={13} strokeWidth={2} />
+                  ) : (
+                    <Link size={13} strokeWidth={2} />
+                  )}
+                  {copied ? "Copied" : copy.label}
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+ShareMenuDropdown.displayName = "ShareMenuDropdown";

package/components/dropdowns/user-menu-dropdown.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  cloneElement,
+  type ComponentPropsWithoutRef,
+  type ReactElement,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { User, Settings, Mail, ChevronDown } from "lucide-react";
+
+/** Single row in the user menu — action, shortcut, or separator. */
+export type UserMenuItem = Readonly<{
+  id?: string;
+  label?: string;
+  icon?: ReactElement;
+  kbd?: string;
+  danger?: boolean;
+  separator?: boolean;
+  onClick?: () => void;
+}>;
+
+export type UserMenuDropdownProps = Readonly<
+  {
+    userName?: string;
+    userEmail?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    items?: readonly UserMenuItem[];
+    onItemClick?: (item: UserMenuItem) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultItems: readonly UserMenuItem[] = [
+  { id: "profile", label: "View Profile", icon: <User />, onClick: () => {} },
+  {
+    id: "settings",
+    label: "Account Settings",
+    icon: <Settings />,
+    kbd: "ctrl + S",
+    onClick: () => {},
+  },
+  {
+    id: "messages",
+    label: "Messages",
+    icon: <Mail />,
+    kbd: "ctrl + M",
+    onClick: () => {},
+  },
+  { id: "separator-sign-out", separator: true },
+  { id: "sign-out", label: "Sign Out", danger: true, onClick: () => {} },
+];
+
+type UserMenuItemRowProps = Readonly<{
+  item: UserMenuItem;
+  onSelect: (item: UserMenuItem) => void;
+}>;
+
+function UserMenuItemRow({ item, onSelect }: UserMenuItemRowProps) {
+  if (item.separator) {
+    return <hr className="mx-1 my-1 h-px border-0 bg-neutral-100" />;
+  }
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      aria-label={item.label}
+      onClick={() => onSelect(item)}
+      className={cn(
+        "group flex w-full cursor-pointer items-center justify-between gap-6 rounded-lg px-2.5 py-2 text-left text-[12px] font-medium transition-colors duration-200",
+        item.danger
+          ? "text-red-500 hover:bg-red-50"
+          : "text-neutral-700 hover:bg-neutral-50",
+      )}
+    >
+      <span className="flex min-w-0 items-center gap-2">
+        {item.icon ? (
+          <span
+            className={cn(
+              "shrink-0 transition-transform duration-300 group-hover:scale-105",
+              item.danger ? "text-red-400" : "text-neutral-400",
+            )}
+          >
+            {cloneElement(
+              item.icon as ReactElement<{
+                size?: number;
+                strokeWidth?: number;
+              }>,
+              { size: 14, strokeWidth: 2 },
+            )}
+          </span>
+        ) : null}
+        <span className="truncate">{item.label}</span>
+      </span>
+
+      {item.kbd ? (
+        <kbd className="shrink-0 font-mono text-[9px] text-neutral-400">
+          {item.kbd}
+        </kbd>
+      ) : null}
+    </button>
+  );
+}
+
+// Self-contained user profile menu with a soft spring open animation.
+export const UserMenuDropdown = forwardRef<
+  HTMLDivElement,
+  UserMenuDropdownProps
+>(
+  (
+    {
+      userName = "Alex Morgan",
+      userEmail = "alex.morgan@example.com",
+      avatarSrc = "/profile-picture.png",
+      avatarAlt = "User",
+      items = defaultItems,
+      onItemClick,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const menuId = useId();
+
+    useEffect(() => {
+      const closeOnOutside = (event: globalThis.MouseEvent) => {
+        if (!rootRef.current?.contains(event.target as Node)) {
+          setOpen(false);
+        }
+      };
+
+      const closeOnEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setOpen(false);
+      };
+
+      document.addEventListener("mousedown", closeOnOutside);
+      document.addEventListener("keydown", closeOnEscape);
+      return () => {
+        document.removeEventListener("mousedown", closeOnOutside);
+        document.removeEventListener("keydown", closeOnEscape);
+      };
+    }, []);
+
+    const handleItemSelect = (item: UserMenuItem) => {
+      setOpen(false);
+      item.onClick?.();
+      onItemClick?.(item);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="user-menu-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div ref={rootRef} className="relative">
+          <button
+            type="button"
+            aria-label={`User menu for ${userName}`}
+            aria-expanded={open}
+            aria-haspopup="menu"
+            aria-controls={open ? menuId : undefined}
+            onClick={toggleOpen}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                toggleOpen();
+              }
+            }}
+            className={cn(
+              "group inline-flex h-12 cursor-pointer items-center gap-3 rounded-full border bg-white pr-4 pl-1.5 transition-all duration-300",
+              open ? "border-neutral-200" : "border-neutral-100",
+            )}
+          >
+            <div className="relative size-9 overflow-hidden rounded-full border-2 border-neutral-100">
+              <Image
+                src={avatarSrc}
+                alt={avatarAlt}
+                fill
+                sizes="36px"
+                className="object-cover"
+              />
+            </div>
+            <div className="min-w-0 text-left">
+              <p className="truncate text-sm leading-none font-medium text-neutral-700">
+                {userName}
+              </p>
+              <p className="mt-0.5 truncate text-[10px] text-neutral-400">
+                {userEmail}
+              </p>
+            </div>
+            <ChevronDown
+              size={14}
+              className={cn(
+                "shrink-0 text-neutral-400 transition-transform duration-300 ease-out",
+                open ? "rotate-180" : "group-hover:translate-y-px",
+              )}
+            />
+          </button>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={`${userName} menu`}
+              className={cn(
+                "absolute top-[calc(100%+10px)] left-1/2 z-100 w-56 -translate-x-1/2",
+                "origin-top rounded-xl border border-neutral-100 bg-white p-1",
+                "shadow-[0_20px_50px_-12px_rgba(0,0,0,0.05)]",
+                "blur-0 translate-y-0 scale-100 opacity-100",
+                "starting:-translate-y-1 starting:scale-[0.96] starting:opacity-0 starting:blur-[3px]",
+                "transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+              )}
+            >
+              {/* Caret — integrated into the panel, not a separate blob */}
+              <span
+                aria-hidden
+                className="absolute -top-1.25 left-1/2 size-2.5 -translate-x-1/2 rotate-45 border border-r-0 border-b-0 border-neutral-100 bg-white"
+              />
+
+              <div className="relative">
+                {items.map((item) => (
+                  <UserMenuItemRow
+                    key={item.id ?? item.label ?? "menu-separator"}
+                    item={item}
+                    onSelect={handleItemSelect}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+UserMenuDropdown.displayName = "UserMenuDropdown";

package/components/dropdowns/workspace-switcher-dropdown.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  cloneElement,
+  type ComponentPropsWithoutRef,
+  type ReactElement,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { ChevronsUpDown, Plus } from "lucide-react";
+import { NextJs } from "@/icons/brands/next-js";
+import { Vercel } from "@/icons/brands/vercel";
+import { Github } from "@/icons/brands/github";
+
+export type WorkspaceItem = Readonly<{
+  id: string;
+  name?: string;
+  icon?: ReactElement;
+  plan?: string;
+  active?: boolean;
+  separator?: boolean;
+}>;
+
+export type WorkspaceSwitcherDropdownProps = Readonly<
+  {
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    createLabel?: string;
+    workspaces?: readonly WorkspaceItem[];
+    onWorkspaceChange?: (workspace: WorkspaceItem) => void;
+    onCreateWorkspace?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultWorkspaces: readonly WorkspaceItem[] = [
+  {
+    id: "appui",
+    name: "App UI",
+    icon: <NextJs />,
+    plan: "Pro",
+    active: true,
+  },
+  {
+    id: "vercel",
+    name: "Vercel Team",
+    icon: <Vercel />,
+    plan: "Free",
+  },
+  {
+    id: "github",
+    name: "Open Source",
+    icon: <Github />,
+    plan: "Team",
+  },
+  { id: "separator-create", separator: true },
+  { id: "create", name: "Create workspace" },
+];
+
+type WorkspaceRowProps = Readonly<{
+  item: WorkspaceItem;
+  onSelect: (item: WorkspaceItem) => void;
+  createLabel: string;
+}>;
+
+function WorkspaceRow({ item, onSelect, createLabel }: WorkspaceRowProps) {
+  if (item.separator) {
+    return <hr className="border-0 border-t border-neutral-100" />;
+  }
+
+  const isCreate = item.id === "create";
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      aria-label={isCreate ? createLabel : item.name}
+      aria-current={item.active ? "true" : undefined}
+      onClick={() => onSelect(item)}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-[12px] font-medium transition-colors",
+        item.active
+          ? "bg-neutral-50 text-neutral-900"
+          : "text-neutral-700 hover:bg-neutral-50",
+      )}
+    >
+      <span className="flex size-6 shrink-0 items-center justify-center text-neutral-500">
+        {isCreate ? (
+          <Plus size={14} strokeWidth={2} />
+        ) : item.icon ? (
+          cloneElement(item.icon as ReactElement<{ size?: number }>, {
+            size: 14,
+          })
+        ) : null}
+      </span>
+      <span className="min-w-0 flex-1 truncate">
+        {isCreate ? createLabel : item.name}
+      </span>
+      {!isCreate && item.plan ? (
+        <span className="shrink-0 text-[10px] text-neutral-400">
+          {item.plan}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+// Org switcher — rectangular bar trigger, inline expand menu (same width).
+export const WorkspaceSwitcherDropdown = forwardRef<
+  HTMLDivElement,
+  WorkspaceSwitcherDropdownProps
+>(
+  (
+    {
+      triggerAriaLabel = "Switch workspace",
+      menuAriaLabel = "Workspace list",
+      createLabel = "Create workspace",
+      workspaces = defaultWorkspaces,
+      onWorkspaceChange,
+      onCreateWorkspace,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const menuId = useId();
+
+    const activeWorkspace =
+      workspaces.find((w) => w.active && !w.separator) ??
+      workspaces.find((w) => !w.separator && w.id !== "create");
+
+    useEffect(() => {
+      const closeOnOutside = (event: globalThis.MouseEvent) => {
+        if (!rootRef.current?.contains(event.target as Node)) {
+          setOpen(false);
+        }
+      };
+
+      const closeOnEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setOpen(false);
+      };
+
+      document.addEventListener("mousedown", closeOnOutside);
+      document.addEventListener("keydown", closeOnEscape);
+      return () => {
+        document.removeEventListener("mousedown", closeOnOutside);
+        document.removeEventListener("keydown", closeOnEscape);
+      };
+    }, []);
+
+    const handleWorkspaceSelect = (item: WorkspaceItem) => {
+      setOpen(false);
+      if (item.id === "create") {
+        onCreateWorkspace?.();
+      } else {
+        onWorkspaceChange?.(item);
+      }
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="workspace-switcher-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div
+          ref={rootRef}
+          className={cn(
+            "w-56 overflow-hidden rounded-lg border border-neutral-200 bg-white",
+            open && "shadow-[0_12px_32px_-12px_rgba(0,0,0,0.1)]",
+          )}
+        >
+          <button
+            type="button"
+            aria-label={`${triggerAriaLabel}: ${activeWorkspace?.name ?? "Workspace"}`}
+            aria-expanded={open}
+            aria-haspopup="menu"
+            aria-controls={open ? menuId : undefined}
+            onClick={toggleOpen}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                toggleOpen();
+              }
+            }}
+            className="flex w-full cursor-pointer items-center gap-2.5 px-3 py-2.5 text-left"
+          >
+            <span className="flex size-7 shrink-0 items-center justify-center rounded-md border border-neutral-100 bg-neutral-50">
+              {activeWorkspace?.icon ? (
+                cloneElement(
+                  activeWorkspace.icon as ReactElement<{ size?: number }>,
+                  { size: 15 },
+                )
+              ) : (
+                <span className="text-[10px] font-semibold text-neutral-500">
+                  {activeWorkspace?.name?.charAt(0) ?? "W"}
+                </span>
+              )}
+            </span>
+
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-[12px] font-medium text-neutral-800">
+                {activeWorkspace?.name ?? "Workspace"}
+              </span>
+              {activeWorkspace?.plan ? (
+                <span className="mt-0.5 block truncate text-[10px] text-neutral-400">
+                  {activeWorkspace.plan} plan
+                </span>
+              ) : null}
+            </span>
+
+            <ChevronsUpDown size={14} className="shrink-0 text-neutral-400" />
+          </button>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="border-t border-neutral-100 py-1"
+            >
+              {workspaces.map((item) => (
+                <WorkspaceRow
+                  key={item.id}
+                  item={item}
+                  createLabel={createLabel}
+                  onSelect={handleWorkspaceSelect}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+WorkspaceSwitcherDropdown.displayName = "WorkspaceSwitcherDropdown";