ruler-components 0.1.1 → 0.1.3

package/components/ui/checkbox.tsx

@@ -1,130 +0,0 @@
-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

@@ -1,60 +0,0 @@
-"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

@@ -1,235 +0,0 @@
-"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

@@ -1,173 +0,0 @@
-"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

@@ -1,78 +0,0 @@
-"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" />;
-}