motion-ui-skill 2.0.0

package/components/dropdowns/filter-sort-dropdown.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { ChevronDown } from "lucide-react";
+
+export type FilterSortOption = Readonly<{
+  id: string;
+  label: string;
+}>;
+
+export type FilterSortDropdownProps = Readonly<
+  {
+    label?: string;
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    value?: string;
+    options?: readonly FilterSortOption[];
+    onValueChange?: (option: FilterSortOption) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultOptions: readonly FilterSortOption[] = [
+  { id: "newest", label: "Newest first" },
+  { id: "oldest", label: "Oldest first" },
+  { id: "popular", label: "Most popular" },
+  { id: "az", label: "A → Z" },
+  { id: "za", label: "Z → A" },
+];
+
+type FilterSortOptionRowProps = Readonly<{
+  option: FilterSortOption;
+  selected: boolean;
+  onSelect: (option: FilterSortOption) => void;
+}>;
+
+function FilterSortOptionRow({
+  option,
+  selected,
+  onSelect,
+}: FilterSortOptionRowProps) {
+  return (
+    <button
+      type="button"
+      role="menuitemradio"
+      aria-checked={selected}
+      aria-label={option.label}
+      onClick={() => onSelect(option)}
+      className={cn(
+        "flex w-full cursor-pointer items-center border-l-2 px-3 py-2 text-left text-[12px] font-medium transition-colors",
+        selected
+          ? "border-neutral-800 bg-neutral-50 text-neutral-900"
+          : "border-transparent text-neutral-600 hover:border-neutral-200 hover:bg-neutral-50",
+      )}
+    >
+      {option.label}
+    </button>
+  );
+}
+
+// Native select style — menu width matches trigger exactly.
+export const FilterSortDropdown = forwardRef<
+  HTMLDivElement,
+  FilterSortDropdownProps
+>(
+  (
+    {
+      label = "Sort",
+      triggerAriaLabel = "Sort options",
+      menuAriaLabel = "Sort menu",
+      value = "newest",
+      options = defaultOptions,
+      onValueChange,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const menuId = useId();
+
+    const selectedOption =
+      options.find((option) => option.id === value) ?? options[0];
+
+    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 handleOptionSelect = (option: FilterSortOption) => {
+      setOpen(false);
+      onValueChange?.(option);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="filter-sort-dropdown"
+        className={cn("relative inline-block w-52 font-sans", className)}
+        {...props}
+      >
+        <div ref={rootRef} className="relative">
+          <button
+            type="button"
+            aria-label={`${triggerAriaLabel}: ${selectedOption?.label ?? value}`}
+            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(
+              "flex w-full cursor-pointer items-center justify-between rounded-lg border bg-white px-3 py-2.5 text-left transition-colors",
+              open
+                ? "border-neutral-300"
+                : "border-neutral-200 hover:border-neutral-300",
+            )}
+          >
+            <span className="min-w-0">
+              <span className="block text-[10px] text-neutral-400">
+                {label}
+              </span>
+              <span className="mt-0.5 block truncate text-[12px] font-medium text-neutral-800">
+                {selectedOption?.label}
+              </span>
+            </span>
+            <ChevronDown
+              size={14}
+              className={cn(
+                "shrink-0 text-neutral-400 transition-transform",
+                open && "rotate-180",
+              )}
+            />
+          </button>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="absolute top-[calc(100%+4px)] right-0 left-0 z-100 overflow-hidden rounded-lg border border-neutral-200 bg-white py-1 shadow-[0_8px_24px_-8px_rgba(0,0,0,0.1)]"
+            >
+              {options.map((option) => (
+                <FilterSortOptionRow
+                  key={option.id}
+                  option={option}
+                  selected={option.id === value}
+                  onSelect={handleOptionSelect}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+FilterSortDropdown.displayName = "FilterSortDropdown";

package/components/dropdowns/kebab-actions-dropdown.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { MoreVertical, Pencil, Link, Archive, Trash } from "lucide-react";
+
+type IconComponent = ComponentType<
+  Readonly<{ size?: number; className?: string }>
+>;
+
+export type KebabMenuItem = Readonly<{
+  id: string;
+  label?: string;
+  icon?: IconComponent;
+  danger?: boolean;
+  separator?: boolean;
+}>;
+
+export type KebabActionsDropdownProps = Readonly<
+  {
+    rowTitle?: string;
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    items?: readonly KebabMenuItem[];
+    onItemClick?: (item: KebabMenuItem) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultItems: readonly KebabMenuItem[] = [
+  { id: "edit", label: "Edit", icon: Pencil },
+  { id: "copy-link", label: "Copy link", icon: Link },
+  { id: "archive", label: "Archive", icon: Archive },
+  { id: "separator-delete", separator: true },
+  { id: "delete", label: "Delete", icon: Trash, danger: true },
+];
+
+type KebabMenuItemRowProps = Readonly<{
+  item: KebabMenuItem;
+  onSelect: (item: KebabMenuItem) => void;
+}>;
+
+function KebabMenuItemRow({ item, onSelect }: KebabMenuItemRowProps) {
+  if (item.separator) {
+    return <hr className="border-0 border-t border-neutral-100" />;
+  }
+
+  const Icon = item.icon;
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      aria-label={item.label}
+      onClick={() => onSelect(item)}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-[12px] font-medium transition-colors",
+        item.danger
+          ? "text-red-500 hover:bg-red-50"
+          : "text-neutral-700 hover:bg-neutral-50",
+      )}
+    >
+      {Icon ? (
+        <Icon
+          size={12}
+          className={item.danger ? "text-red-400" : "text-neutral-400"}
+        />
+      ) : null}
+      {item.label}
+    </button>
+  );
+}
+
+// Inline expand row — menu opens inside the same card, widths always match.
+export const KebabActionsDropdown = forwardRef<
+  HTMLDivElement,
+  KebabActionsDropdownProps
+>(
+  (
+    {
+      rowTitle = "Quarterly report",
+      triggerAriaLabel = "More actions",
+      menuAriaLabel = "Actions menu",
+      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: KebabMenuItem) => {
+      setOpen(false);
+      onItemClick?.(item);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="kebab-actions-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div
+          ref={rootRef}
+          className={cn(
+            "w-56 overflow-hidden rounded-xl border border-neutral-100 bg-white",
+            open && "shadow-[0_20px_50px_-12px_rgba(0,0,0,0.05)]",
+          )}
+        >
+          <div className="flex items-center gap-2 py-2 pr-2 pl-3">
+            <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-neutral-700">
+              {rowTitle}
+            </span>
+
+            <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-7 shrink-0 cursor-pointer items-center justify-center rounded-lg transition-colors",
+                open
+                  ? "bg-neutral-100 text-neutral-700"
+                  : "text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600",
+              )}
+            >
+              <MoreVertical size={15} strokeWidth={2} />
+            </button>
+          </div>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="border-t border-neutral-100 py-1"
+            >
+              {items.map((item) => (
+                <KebabMenuItemRow
+                  key={item.id}
+                  item={item}
+                  onSelect={handleItemSelect}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+KebabActionsDropdown.displayName = "KebabActionsDropdown";

package/components/dropdowns/notification-dropdown.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Bell } from "lucide-react";
+
+export type NotificationItem = Readonly<{
+  id: string;
+  title: string;
+  body: string;
+  time: string;
+  unread?: boolean;
+}>;
+
+export type NotificationDropdownProps = Readonly<
+  {
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    headerTitle?: string;
+    markAllLabel?: string;
+    emptyLabel?: string;
+    notifications?: readonly NotificationItem[];
+    onNotificationClick?: (item: NotificationItem) => void;
+    onMarkAllRead?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultNotifications: readonly NotificationItem[] = [
+  {
+    id: "comment",
+    title: "New comment",
+    body: "Sarah replied on your post",
+    time: "2m",
+    unread: true,
+  },
+  {
+    id: "deploy",
+    title: "Deploy succeeded",
+    body: "Production build finished",
+    time: "1h",
+    unread: true,
+  },
+  {
+    id: "invite",
+    title: "Invite accepted",
+    body: "Alex joined your workspace",
+    time: "1d",
+    unread: false,
+  },
+];
+
+type NotificationRowProps = Readonly<{
+  item: NotificationItem;
+  onSelect: (item: NotificationItem) => void;
+}>;
+
+function NotificationRow({ item, onSelect }: NotificationRowProps) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      aria-label={`${item.title}. ${item.body}`}
+      onClick={() => onSelect(item)}
+      className={cn(
+        "flex w-full cursor-pointer items-start justify-between gap-3 rounded-lg border px-2.5 py-2 text-left transition-colors",
+        item.unread
+          ? "border-neutral-200 bg-white hover:border-neutral-300"
+          : "border-transparent bg-transparent hover:bg-white",
+      )}
+    >
+      <span className="min-w-0">
+        <span className="block truncate text-[12px] font-medium text-neutral-800">
+          {item.title}
+        </span>
+        <span className="mt-0.5 block truncate text-[10px] text-neutral-400">
+          {item.body}
+        </span>
+      </span>
+      <span className="shrink-0 font-mono text-[9px] text-neutral-400">
+        {item.time}
+      </span>
+    </button>
+  );
+}
+
+// Notification panel — square trigger, inset gray tray with card rows.
+export const NotificationDropdown = forwardRef<
+  HTMLDivElement,
+  NotificationDropdownProps
+>(
+  (
+    {
+      triggerAriaLabel = "Notifications",
+      menuAriaLabel = "Notification list",
+      headerTitle = "Inbox",
+      markAllLabel = "Clear",
+      emptyLabel = "Nothing new",
+      notifications = defaultNotifications,
+      onNotificationClick,
+      onMarkAllRead,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const menuId = useId();
+
+    const unreadCount = notifications.filter((n) => n.unread).length;
+
+    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 handleNotificationSelect = (item: NotificationItem) => {
+      setOpen(false);
+      onNotificationClick?.(item);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="notification-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div ref={rootRef} className="relative">
+          <button
+            type="button"
+            aria-label={
+              unreadCount > 0
+                ? `${triggerAriaLabel}, ${unreadCount} unread`
+                : 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(
+              "relative 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",
+            )}
+          >
+            <Bell size={16} strokeWidth={2} className="text-neutral-500" />
+            {unreadCount > 0 ? (
+              <span
+                aria-hidden
+                className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-neutral-800 text-[8px] font-bold text-white"
+              >
+                {unreadCount > 9 ? "9+" : unreadCount}
+              </span>
+            ) : null}
+          </button>
+
+          {open ? (
+            <div
+              id={menuId}
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="absolute top-[calc(100%+8px)] right-0 z-100 w-60 rounded-xl bg-neutral-50 p-2 md:w-64"
+            >
+              <div className="mb-2 flex items-center justify-between px-1">
+                <p className="text-[11px] font-semibold text-neutral-700">
+                  {headerTitle}
+                </p>
+                {unreadCount > 0 ? (
+                  <button
+                    type="button"
+                    onClick={() => onMarkAllRead?.()}
+                    className="cursor-pointer text-[10px] font-medium text-neutral-400 hover:text-neutral-600"
+                  >
+                    {markAllLabel}
+                  </button>
+                ) : null}
+              </div>
+
+              <div className="flex max-h-52 flex-col gap-1 overflow-y-auto">
+                {notifications.length > 0 ? (
+                  notifications.map((item) => (
+                    <NotificationRow
+                      key={item.id}
+                      item={item}
+                      onSelect={handleNotificationSelect}
+                    />
+                  ))
+                ) : (
+                  <p className="py-6 text-center text-[11px] text-neutral-400">
+                    {emptyLabel}
+                  </p>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+NotificationDropdown.displayName = "NotificationDropdown";