first

2026-09-08 07:21:34 -04:00
commit a4b224da8e
169 changed files with 27483 additions and 0 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface Option<T = string> {
+  value: T;
+  label: React.ReactNode;
+  description?: string;
+}
+
+export function Dropdown<T extends string>({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  className,
+  label,
+  size = "md",
+  tone = "secondary",
+  icon,
+  empty = "No options",
+}: {
+  options: Option<T>[];
+  value?: T;
+  onChange: (v: T) => void;
+  placeholder?: string;
+  className?: string;
+  label?: string;
+  size?: "sm" | "md";
+  tone?: "secondary" | "ghost";
+  icon?: React.ReactNode;
+  empty?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function h(e: MouseEvent) {
+      if (!ref.current) return;
+      if (!ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+
+  const current = options.find((o) => o.value === value);
+  const btnClass = cn(
+    "inline-flex items-center gap-2 border rounded-lg transition-colors",
+    size === "sm" ? "text-xs px-2.5 py-1.5" : "text-sm px-3 py-2",
+    tone === "secondary"
+      ? "bg-white border-slate-200 text-slate-700 hover:bg-slate-50"
+      : "bg-transparent border-transparent text-slate-700 hover:bg-slate-100",
+  );
+
+  return (
+    <div className={cn("relative inline-block text-left", className)} ref={ref}>
+      {label && <div className="text-[11px] uppercase tracking-wide text-slate-500 mb-1">{label}</div>}
+      <button
+        type="button"
+        className={btnClass}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {icon && <span className="text-slate-500">{icon}</span>}
+        <span className={cn("truncate", !current && "text-slate-400")}>
+          {current?.label ?? placeholder}
+        </span>
+        <ChevronDown className={cn("w-4 h-4 text-slate-400 transition-transform", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <div className="absolute z-30 mt-1 right-0 min-w-[240px] rounded-xl bg-white border border-slate-200 shadow-soft overflow-hidden animate-fade-in">
+          {options.length === 0 ? (
+            <div className="px-4 py-6 text-sm text-slate-500 text-center">{empty}</div>
+          ) : (
+            <ul className="max-h-80 overflow-auto py-1">
+              {options.map((o) => (
+                <li key={String(o.value)}>
+                  <button
+                    type="button"
+                    className={cn(
+                      "w-full text-left px-3 py-2 text-sm transition-colors",
+                      value === o.value
+                        ? "bg-brand-50 text-brand-700 font-medium"
+                        : "text-slate-700 hover:bg-slate-50",
+                    )}
+                    onClick={() => {
+                      onChange(o.value);
+                      setOpen(false);
+                    }}
+                  >
+                    <div className="truncate">{o.label}</div>
+                    {o.description && (
+                      <div className="text-xs text-slate-500 mt-0.5 truncate">{o.description}</div>
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}