ruler-components 0.1.0

package/components/ui/checkbox.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const checkboxControlVariants = cva(
+  [
+    "pointer-events-none relative flex shrink-0 items-center justify-center rounded-[3px] border-2 bg-white transition-all duration-200",
+    "border-zinc-500 group-hover:border-zinc-700",
+    "peer-checked:border-zinc-900 peer-checked:bg-zinc-900",
+    "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-zinc-900/30 peer-focus-visible:ring-offset-2",
+    "peer-disabled:border-zinc-300 peer-disabled:bg-zinc-100",
+    "peer-disabled:peer-checked:border-zinc-300 peer-disabled:peer-checked:bg-zinc-300",
+    "dark:border-zinc-500 dark:bg-zinc-900 dark:group-hover:border-zinc-400",
+    "dark:peer-checked:border-zinc-100 dark:peer-checked:bg-zinc-100",
+    "dark:peer-disabled:border-zinc-700 dark:peer-disabled:bg-zinc-800",
+    "dark:peer-disabled:peer-checked:border-zinc-600 dark:peer-disabled:peer-checked:bg-zinc-600",
+    "peer-checked:[&_svg]:scale-100 peer-checked:[&_svg]:opacity-100",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 [&_svg]:h-2.5 [&_svg]:w-2.5",
+        md: "h-[18px] w-[18px] [&_svg]:h-3 [&_svg]:w-3",
+        lg: "h-5 w-5 [&_svg]:h-3.5 [&_svg]:w-3.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+const checkboxWrapperVariants = cva("group flex w-full transition-colors duration-150", {
+  variants: {
+    variant: {
+      inline: "gap-3",
+      card: [
+        "gap-3 rounded-lg border border-zinc-200 bg-white px-3.5 py-3",
+        "hover:border-zinc-300 hover:bg-zinc-50/80",
+        "has-[:checked]:border-zinc-900",
+        "dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50",
+        "dark:has-[:checked]:border-zinc-500",
+      ],
+    },
+  },
+  defaultVariants: { variant: "inline" },
+});
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
+    VariantProps<typeof checkboxControlVariants> {
+  label?: string;
+  description?: string;
+  variant?: "inline" | "card";
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      size,
+      variant = "inline",
+      label,
+      description,
+      disabled,
+      id,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const resolvedVariant = variant === "card" || description ? "card" : "inline";
+    const alignStart = resolvedVariant === "card" || Boolean(description);
+
+    return (
+      <label
+        htmlFor={inputId}
+        className={cn(
+          checkboxWrapperVariants({ variant: resolvedVariant }),
+          alignStart ? "items-start" : "items-center",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className,
+        )}
+      >
+        <span
+          className={cn(
+            "relative flex shrink-0 items-center justify-center p-2.5 -m-2.5",
+            alignStart ? "mt-0.5" : undefined,
+          )}
+        >
+          <input
+            ref={ref}
+            id={inputId}
+            type="checkbox"
+            disabled={disabled}
+            className="peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+            {...props}
+          />
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-0 rounded-full bg-zinc-900/0 transition-colors duration-200 group-hover:bg-zinc-900/[0.08] group-active:bg-zinc-900/[0.12] peer-disabled:group-hover:bg-transparent dark:group-hover:bg-white/[0.08] dark:group-active:bg-white/[0.12]"
+          />
+          <span className={checkboxControlVariants({ size })}>
+            <Check
+              className="text-white opacity-0 transition-all duration-200 dark:text-zinc-900"
+              strokeWidth={3}
+            />
+          </span>
+        </span>
+        {(label || description) && (
+          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+            {label && (
+              <span className="text-sm leading-snug text-zinc-800 dark:text-zinc-100">
+                {label}
+              </span>
+            )}
+            {description && (
+              <span className="text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+                {description}
+              </span>
+            )}
+          </span>
+        )}
+      </label>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox, checkboxControlVariants };

package/components/ui/code-block.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+export function CodeBlock({
+  code,
+  filename,
+  className,
+}: {
+  code: string;
+  filename?: string;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const copyButton = (
+    <button
+      type="button"
+      onClick={onCopy}
+      aria-label="Copy code"
+      className="flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-white/10 hover:text-zinc-200"
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-white" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+
+  return (
+    <div
+      className={cn(
+        "group relative overflow-x-auto rounded-xl bg-zinc-900 ring-1 ring-white/10",
+        className,
+      )}
+    >
+      {filename ? (
+        <div className="flex items-center justify-between border-b border-white/10 px-4 py-2.5">
+          <span className="font-mono text-xs text-zinc-500">{filename}</span>
+          {copyButton}
+        </div>
+      ) : null}
+      <pre className={cn("max-w-full overflow-x-auto px-4 py-3.5 text-[13px] leading-relaxed text-zinc-100", !filename && "pr-12")}>
+        <code className="font-mono">{code}</code>
+      </pre>
+      {filename ? null : (
+        <div className="absolute right-3 top-3">{copyButton}</div>
+      )}
+    </div>
+  );
+}

package/components/ui/data-table.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Filter, Search, X } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Pagination } from "./pagination";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+import { Dropdown, DropdownContent, DropdownDivider, DropdownItem, DropdownLabel, DropdownTrigger } from "./dropdown";
+
+export interface DataTableColumn<T> {
+  key: string;
+  header: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+  filterOptions?: string[];
+  accessor?: (row: T) => string | number;
+  render?: (row: T) => React.ReactNode;
+  className?: string;
+}
+
+export interface DataTableProps<T> {
+  data: T[];
+  columns: DataTableColumn<T>[];
+  searchPlaceholder?: string;
+  pageSize?: number;
+  className?: string;
+}
+
+type SortDirection = "asc" | "desc" | null;
+
+export function DataTable<T extends object>({
+  data,
+  columns,
+  searchPlaceholder = "Search...",
+  pageSize = 5,
+  className,
+}: DataTableProps<T>) {
+  const [search, setSearch] = useState("");
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>(null);
+  const [activeFilters, setActiveFilters] = useState<Record<string, string>>({});
+  const [page, setPage] = useState(1);
+
+  const getValue = (row: T, col: DataTableColumn<T>) =>
+    col.accessor ? col.accessor(row) : ((row as Record<string, unknown>)[col.key] as string | number);
+
+  const filterableColumns = columns.filter((c) => c.filterOptions?.length);
+  const activeFilterCount = Object.values(activeFilters).filter(Boolean).length;
+
+  const filtered = useMemo(() => {
+    let rows = data;
+
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      rows = rows.filter((row) => columns.some((col) => String(getValue(row, col) ?? "").toLowerCase().includes(q)));
+    }
+
+    Object.entries(activeFilters).forEach(([key, value]) => {
+      if (!value) return;
+      const col = columns.find((c) => c.key === key);
+      if (!col) return;
+      rows = rows.filter((row) => String(getValue(row, col)) === value);
+    });
+
+    return rows;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, search, activeFilters]);
+
+  const sorted = useMemo(() => {
+    if (!sortKey || !sortDir) return filtered;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col) return filtered;
+    return [...filtered].sort((a, b) => {
+      const av = getValue(a, col);
+      const bv = getValue(b, col);
+      if (typeof av === "number" && typeof bv === "number") return sortDir === "asc" ? av - bv : bv - av;
+      return sortDir === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filtered, sortKey, sortDir]);
+
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const paged = sorted.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  const handleSort = (col: DataTableColumn<T>) => {
+    if (!col.sortable) return;
+    if (sortKey !== col.key) {
+      setSortKey(col.key);
+      setSortDir("asc");
+    } else if (sortDir === "asc") {
+      setSortDir("desc");
+    } else {
+      setSortKey(null);
+      setSortDir(null);
+    }
+    setPage(1);
+  };
+
+  const clearAll = () => {
+    setSearch("");
+    setActiveFilters({});
+    setPage(1);
+  };
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-xs">
+          <Search size={15} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+          <Input
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder={searchPlaceholder}
+            className="pl-9"
+          />
+        </div>
+
+        {(filterableColumns.length > 0 || activeFilterCount > 0) && (
+          <div className="flex flex-wrap items-center gap-2">
+            {filterableColumns.map((col) => (
+              <Dropdown key={col.key}>
+                <DropdownTrigger>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className={cn(activeFilters[col.key] && "border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-white")}
+                  >
+                    <Filter size={13} />
+                    {activeFilters[col.key] || col.header}
+                  </Button>
+                </DropdownTrigger>
+                <DropdownContent align="right">
+                  <DropdownLabel>Filter by {col.header}</DropdownLabel>
+                  <DropdownItem label="All" selected={!activeFilters[col.key]} onClick={() => setActiveFilters((f) => ({ ...f, [col.key]: "" }))} />
+                  <DropdownDivider />
+                  {col.filterOptions!.map((opt) => (
+                    <DropdownItem
+                      key={opt}
+                      label={opt}
+                      selected={activeFilters[col.key] === opt}
+                      onClick={() => {
+                        setActiveFilters((f) => ({ ...f, [col.key]: opt }));
+                        setPage(1);
+                      }}
+                    />
+                  ))}
+                </DropdownContent>
+              </Dropdown>
+            ))}
+
+            {(activeFilterCount > 0 || search) && (
+              <Button variant="ghost" size="sm" onClick={clearAll}>
+                <X size={13} />
+                Clear
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  onClick={() => handleSort(col)}
+                  className={cn(
+                    col.align === "right" && "text-right",
+                    col.align === "center" && "text-center",
+                    col.sortable && "cursor-pointer select-none hover:text-zinc-700 dark:hover:text-zinc-200",
+                    col.className,
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "inline-flex items-center gap-1",
+                      col.align === "right" && "flex-row-reverse",
+                      col.align === "center" && "justify-center",
+                    )}
+                  >
+                    {col.header}
+                    {col.sortable &&
+                      (sortKey === col.key ? (
+                        sortDir === "asc" ? (
+                          <ArrowUp size={12} />
+                        ) : (
+                          <ArrowDown size={12} />
+                        )
+                      ) : (
+                        <ArrowUpDown size={12} className="opacity-30" />
+                      ))}
+                  </span>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paged.length === 0 ? (
+              <TableRow className="hover:bg-transparent">
+                <TableCell colSpan={columns.length} className="py-10 text-center text-zinc-400">
+                  No results found.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paged.map((row, i) => (
+                <TableRow key={i}>
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className={cn(col.align === "right" && "text-right", col.align === "center" && "text-center", col.className)}>
+                      {col.render ? col.render(row) : String(getValue(row, col) ?? "")}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col-reverse items-center justify-between gap-3 pt-4 sm:flex-row">
+        <p className="text-xs text-zinc-500 dark:text-zinc-400">
+          {sorted.length === 0 ? "0 results" : `Showing ${(currentPage - 1) * pageSize + 1}–${Math.min(currentPage * pageSize, sorted.length)} of ${sorted.length}`}
+        </p>
+        <Pagination page={currentPage} totalPages={totalPages} onPageChange={setPage} />
+      </div>
+    </div>
+  );
+}

package/components/ui/dialog.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { User, Plus } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+type DialogContextType = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const DialogContext = createContext<DialogContextType | null>(null);
+
+export function Dialog({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) {
+  const [isOpenState, setIsOpenState] = useState(false);
+  const isOpen = open !== undefined ? open : isOpenState;
+  const setIsOpen = onOpenChange || setIsOpenState;
+
+  useEffect(() => {
+    if (isOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "unset";
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  return (
+    <DialogContext.Provider value={{ isOpen, setIsOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export function DialogTrigger({ children }: { children: React.ReactElement<any> }) {
+  const { setIsOpen } = useContext(DialogContext)!;
+
+  return React.cloneElement(children, {
+    onClick: (e: React.MouseEvent) => {
+      if (children.props?.onClick) children.props.onClick(e);
+      setIsOpen(true);
+    },
+  });
+}
+
+export function DialogContent({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  const { isOpen, setIsOpen } = useContext(DialogContext)!;
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setVisible(false);
+      return;
+    }
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, setIsOpen]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div
+        className={cn(
+          "fixed inset-0 bg-zinc-900/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out dark:bg-black/65",
+          visible ? "opacity-100" : "opacity-0",
+        )}
+        onClick={() => setIsOpen(false)}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        onClick={(e) => e.stopPropagation()}
+        className={cn(
+          "relative z-10 w-full max-w-md rounded-2xl border border-zinc-200/90 bg-white p-6 text-zinc-900",
+          "shadow-[0_20px_60px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.04)]",
+          "dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+          "dark:shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_0_1px_rgba(255,255,255,0.06)]",
+          "transition-[opacity,transform] duration-200 ease-out",
+          visible ? "translate-y-0 scale-100 opacity-100" : "translate-y-1 scale-[0.97] opacity-0",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export function DialogHeader({ title, description }: { title?: string; description?: string }) {
+  return (
+    <div className="mb-5">
+      {title && <h2 className="text-[17px] font-semibold leading-snug tracking-tight text-zinc-900 dark:text-white">{title}</h2>}
+      {description && <p className="mt-2 text-[14px] leading-relaxed text-zinc-500 dark:text-zinc-400">{description}</p>}
+    </div>
+  );
+}
+
+export function DialogFooter({ children }: { children: React.ReactNode }) {
+  return <div className="mt-6 flex items-center justify-end gap-1">{children}</div>;
+}
+
+export function DialogAction({ label, onClick, variant = "primary" }: { label: string; onClick?: () => void; variant?: "primary" | "destructive" }) {
+  const { setIsOpen } = useContext(DialogContext)!;
+
+  const handleClick = () => {
+    if (onClick) onClick();
+    setIsOpen(false);
+  };
+
+  const colorClass =
+    variant === "destructive"
+      ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10"
+      : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800";
+
+  return (
+    <button
+      onClick={handleClick}
+      className={cn(
+        "rounded-lg px-3.5 py-2 text-[13px] font-semibold tracking-tight outline-none transition-colors duration-150",
+        "focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:focus-visible:ring-white/20",
+        colorClass,
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+export function DialogItem({
+  label,
+  icon,
+  onClick,
+  variant = "account",
+}: {
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  variant?: "account" | "action";
+}) {
+  const { setIsOpen } = useContext(DialogContext)!;
+
+  const handleClick = () => {
+    if (onClick) onClick();
+    setIsOpen(false);
+  };
+
+  const iconBg = variant === "account" ? "bg-[#0070BA]/10 dark:bg-[#0070BA]/20" : "bg-zinc-100 dark:bg-zinc-800";
+  const iconColor = variant === "account" ? "text-[#0070BA] dark:text-[#4DA3E0]" : "text-zinc-500 dark:text-zinc-400";
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left outline-none transition-colors duration-150 hover:bg-zinc-50 dark:hover:bg-zinc-900/60"
+    >
+      <div className={cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-full", iconBg, iconColor)}>
+        {icon || (variant === "account" ? <User size={18} /> : <Plus size={18} />)}
+      </div>
+      <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{label}</span>
+    </button>
+  );
+}

package/components/ui/dropdown.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { Check, ChevronDown, Search, User, Settings, LogOut, Filter, ArrowUpDown, Calendar, ChevronRight, X } from "lucide-react";
+
+// --- Base Components ---
+export function Dropdown({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+
+  return (
+    <div className="relative inline-block text-left" ref={containerRef}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, { isOpen, setIsOpen });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+export function DropdownTrigger({ children, isOpen, setIsOpen }: any) {
+  return React.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    className: `${children.props.className} ${isOpen ? "ring-2 ring-zinc-200 dark:ring-zinc-800" : ""}`
+  });
+}
+
+export function DropdownContent({ children, isOpen, className = "", align = "left" }: any) {
+  if (!isOpen) return null;
+  const alignClass = align === "right" ? "right-0" : "left-0";
+  return (
+    <div role="menu" className={`absolute ${alignClass} z-50 mt-2 w-56 origin-top-right rounded-lg border border-zinc-200 bg-white p-1 shadow-xl outline-none dark:border-zinc-800 dark:bg-zinc-950 ${className} animate-in fade-in zoom-in-95 duration-200`}>
+      {children}
+    </div>
+  );
+}
+
+export function DropdownItem({ label, icon: Icon, selected, onClick, className = "", variant = "default" }: any) {
+  const baseClass = "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors outline-none cursor-pointer";
+  const variantClass = variant === "destructive" ? "text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900";
+
+  return (
+    <button type="button" role="menuitem" className={`${baseClass} ${variantClass} ${className}`} onClick={onClick}>
+      {Icon && <Icon size={16} className="opacity-70" />}
+      <span className="flex-1">{label}</span>
+      {selected && <Check size={14} className="text-zinc-900 dark:text-white" />}
+    </button>
+  );
+}
+
+export function DropdownLabel({ children }: { children: React.ReactNode }) {
+  return <div className="px-3 py-2 text-[11px] font-bold uppercase tracking-wider text-zinc-400">{children}</div>;
+}
+
+export function DropdownDivider() {
+  return <div role="separator" className="my-1 h-px bg-zinc-100 dark:bg-zinc-800" />;
+}