@swift-rust/ui 0.3.0 → 0.6.0

package/registry/components/carousel.tsx

@@ -0,0 +1,41 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Carousel({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const scroll = (dir: 1 | -1) => {
+    const el = ref.current;
+    if (el) el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: "smooth" });
+  };
+  return (
+    <div className={cn("relative", className)}>
+      <div
+        ref={ref}
+        className="flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {children}
+      </div>
+      <button
+        type="button"
+        aria-label="Previous"
+        onClick={() => scroll(-1)}
+        className="absolute -left-3 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-muted"
+      >
+        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="m15 18-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </button>
+      <button
+        type="button"
+        aria-label="Next"
+        onClick={() => scroll(1)}
+        className="absolute -right-3 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-muted"
+      >
+        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="m9 18 6-6-6-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </button>
+    </div>
+  );
+}
+
+export function CarouselItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("min-w-0 shrink-0 grow-0 basis-full snap-start sm:basis-1/2 lg:basis-1/3", className)} {...props} />;
+}

package/registry/components/chart.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ChartDatum {
+  label: string;
+  value: number;
+}
+
+// A dependency-free SVG bar chart. For richer charts, swap in a charting lib.
+export function BarChart({
+  data,
+  height = 180,
+  className,
+}: {
+  data: ChartDatum[];
+  height?: number;
+  className?: string;
+}) {
+  const max = Math.max(1, ...data.map((d) => d.value));
+  const barW = 100 / (data.length * 1.6);
+  const gap = barW * 0.6;
+  return (
+    <div className={cn("w-full", className)}>
+      <svg viewBox={`0 0 100 ${height / 2}`} preserveAspectRatio="none" className="h-44 w-full overflow-visible">
+        {data.map((d, i) => {
+          const h = (d.value / max) * (height / 2 - 6);
+          const x = i * (barW + gap) + gap;
+          return (
+            <rect
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              x={x}
+              y={height / 2 - h}
+              width={barW}
+              height={h}
+              rx={1}
+              className="fill-primary"
+            />
+          );
+        })}
+      </svg>
+      <div className="mt-2 flex justify-between text-xs text-muted-foreground">
+        {data.map((d, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span key={i} className="flex-1 text-center">{d.label}</span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/registry/components/checkbox.tsx

@@ -1,16 +1,16 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Checkbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   ({ className, ...props }, ref) => (
     <input
       type="checkbox"
       ref={ref}
       className={cn(
-        "h-4 w-4 shrink-0 rounded border border-[var(--ui-border-strong)] bg-[var(--ui-surface)]",
-        "accent-[var(--ui-accent)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-1",
+        "size-4 shrink-0 rounded border border-input bg-background accent-primary",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}

package/registry/components/code-block.tsx

@@ -0,0 +1,118 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface CodeBlockProps {
+  code: string;
+  language?: string;
+  filename?: string;
+  showLineNumbers?: boolean;
+  className?: string;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+const KEYWORDS =
+  /\b(import|export|from|default|function|return|const|let|var|type|interface|extends|implements|new|await|async|if|else|for|while|switch|case|break|class|public|private|readonly|as)\b/g;
+
+// Highlight a single (already-trusted, dev-authored) line. Order matters:
+// numbers run before any markup is injected so digit-bearing class names
+// (e.g. text-sky-400) are never re-matched.
+function highlightSegment(code: string): string {
+  let e = escapeHtml(code);
+  e = e.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="text-amber-400">$1</span>');
+  e = e.replace(KEYWORDS, '<span class="text-fuchsia-400">$1</span>');
+  e = e.replace(/(&lt;\/?)([A-Za-z][\w.]*)/g, '$1<span class="text-sky-400">$2</span>');
+  return e;
+}
+
+function highlightLine(line: string): string {
+  const re = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g;
+  let out = "";
+  let last = 0;
+  let m: RegExpExecArray | null;
+  // biome-ignore lint/suspicious/noAssignInExpressions: scanner loop
+  while ((m = re.exec(line)) !== null) {
+    out += highlightSegment(line.slice(last, m.index));
+    if (m[1]) out += `<span class="text-zinc-500">${escapeHtml(m[1])}</span>`;
+    else out += `<span class="text-emerald-400">${escapeHtml(m[2] ?? "")}</span>`;
+    last = re.lastIndex;
+  }
+  out += highlightSegment(line.slice(last));
+  return out;
+}
+
+export function CodeBlock({
+  code,
+  language,
+  filename,
+  showLineNumbers = true,
+  className,
+}: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+  const lines = code.replace(/\n$/, "").split("\n");
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return (
+    <div className={cn("overflow-hidden rounded-xl border border-border bg-[#0b0b0e] text-zinc-100", className)}>
+      {(filename || language) && (
+        <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
+          <span className="font-mono text-xs text-zinc-400">{filename ?? language}</span>
+          <CopyButton copied={copied} onCopy={copy} />
+        </div>
+      )}
+      <div className="relative">
+        {!filename && !language && (
+          <div className="absolute right-2 top-2 z-10">
+            <CopyButton copied={copied} onCopy={copy} subtle />
+          </div>
+        )}
+        <div className="overflow-x-auto">
+          <pre className="py-3 font-mono text-[0.8rem] leading-relaxed">
+            {lines.map((line, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} className="flex px-4">
+                {showLineNumbers && (
+                  <span className="mr-4 w-6 shrink-0 select-none text-right text-zinc-600">{i + 1}</span>
+                )}
+                {/* biome-ignore lint/security/noDangerouslySetInnerHtml: dev-authored code */}
+                <code className="whitespace-pre" dangerouslySetInnerHTML={{ __html: highlightLine(line) || "&nbsp;" }} />
+              </div>
+            ))}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CopyButton({ copied, onCopy, subtle }: { copied: boolean; onCopy: () => void; subtle?: boolean }) {
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      aria-label="Copy code"
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-zinc-400 transition-colors hover:bg-white/10 hover:text-zinc-100",
+        subtle && "bg-white/5",
+      )}
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      ) : (
+        <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg>
+      )}
+    </button>
+  );
+}

package/registry/components/code.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -6,7 +5,7 @@ export function Code({ className, ...props }: React.HTMLAttributes<HTMLElement>)
   return (
     <code
       className={cn(
-        "rounded border border-[var(--ui-border)] bg-[var(--ui-surface-2)] px-1.5 py-0.5 font-mono text-[0.85em]",
+        "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground",
         className,
       )}
       {...props}
@@ -18,7 +17,7 @@ export function Pre({ className, ...props }: React.HTMLAttributes<HTMLPreElement
   return (
     <pre
       className={cn(
-        "overflow-x-auto rounded-lg border border-[var(--ui-border)] bg-[var(--ui-fg)] p-4 font-mono text-[0.85em] text-[var(--ui-bg)]",
+        "overflow-x-auto rounded-lg border border-border bg-foreground p-4 font-mono text-[0.85em] text-background",
         className,
       )}
       {...props}

package/registry/components/collapsible.tsx

@@ -0,0 +1,60 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const CollapsibleContext = React.createContext<{ open: boolean; toggle: () => void } | null>(null);
+
+export function Collapsible({
+  defaultOpen = false,
+  open: controlled,
+  onOpenChange,
+  className,
+  children,
+}: {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(defaultOpen);
+  const open = controlled ?? internal;
+  const toggle = () => {
+    const next = !open;
+    if (controlled === undefined) setInternal(next);
+    onOpenChange?.(next);
+  };
+  return (
+    <CollapsibleContext.Provider value={{ open, toggle }}>
+      <div className={className}>{children}</div>
+    </CollapsibleContext.Provider>
+  );
+}
+
+export function CollapsibleTrigger({
+  className,
+  children,
+  asChild,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  asChild?: boolean;
+}) {
+  const ctx = React.useContext(CollapsibleContext);
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => ctx?.toggle(),
+    });
+  }
+  return (
+    <button type="button" onClick={() => ctx?.toggle()} aria-expanded={ctx?.open} className={className}>
+      {children}
+    </button>
+  );
+}
+
+export function CollapsibleContent({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx?.open) return null;
+  return <div className={cn("overflow-hidden", className)}>{children}</div>;
+}

package/registry/components/combobox.tsx

@@ -0,0 +1,102 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+export function Combobox({
+  options,
+  value: controlled,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyText = "No results.",
+  className,
+}: {
+  options: ComboboxOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (v: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+}) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = controlled ?? internal;
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value);
+  const filtered = options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+
+  const choose = (v: string) => {
+    if (controlled === undefined) setInternal(v);
+    onValueChange?.(v);
+    setOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <div ref={ref} className={cn("relative inline-block w-full max-w-xs", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50"
+      >
+        <span className={cn("truncate", !selected && "text-muted-foreground")}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <svg viewBox="0 0 24 24" className="size-4 shrink-0 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+          <path d="m6 9 6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && (
+        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md">
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-hidden placeholder:text-muted-foreground"
+          />
+          <div className="max-h-56 overflow-y-auto p-1">
+            {filtered.length === 0 ? (
+              <p className="px-2 py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
+            ) : (
+              filtered.map((o) => (
+                <button
+                  key={o.value}
+                  type="button"
+                  onClick={() => choose(o.value)}
+                  className="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-muted"
+                >
+                  {o.label}
+                  {o.value === value && (
+                    <svg viewBox="0 0 24 24" className="size-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                      <path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/registry/components/command.tsx

@@ -52,18 +52,18 @@ export function Command({
   };
 
   return (
-    <div className={cn("rounded-lg border border-[var(--ui-border)] bg-[var(--ui-surface)] shadow-md", className)}>
+    <div className={cn("rounded-lg border border-border bg-popover shadow-md", className)}>
       <input
         autoFocus
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={onKey}
         placeholder={placeholder}
-        className="w-full border-b border-[var(--ui-border)] bg-transparent px-4 py-3 text-sm outline-none placeholder:text-[var(--ui-fg-subtle)]"
+        className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-hidden placeholder:text-muted-foreground"
       />
       <ul className="max-h-72 overflow-y-auto p-1">
         {filtered.length === 0 ? (
-          <li className="px-3 py-6 text-center text-sm text-[var(--ui-fg-subtle)]">No results</li>
+          <li className="px-3 py-6 text-center text-sm text-muted-foreground">No results</li>
         ) : (
           filtered.map((item, i) => (
             <li
@@ -75,12 +75,12 @@ export function Command({
               }}
               className={cn(
                 "flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm",
-                i === activeIndex && "bg-[var(--ui-accent-soft)] text-[var(--ui-accent)]",
+                i === activeIndex && "bg-muted text-foreground",
               )}
             >
               <span>{item.label}</span>
               {item.shortcut ? (
-                <kbd className="rounded border border-[var(--ui-border)] px-1 font-mono text-[0.6875rem]">
+                <kbd className="rounded border border-border px-1 font-mono text-[0.6875rem]">
                   {item.shortcut}
                 </kbd>
               ) : null}

package/registry/components/context-menu.tsx

@@ -0,0 +1,81 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const ContextMenuContext = React.createContext<{
+  pos: { x: number; y: number } | null;
+  open: (x: number, y: number) => void;
+  close: () => void;
+} | null>(null);
+
+export function ContextMenu({ children }: { children: React.ReactNode }) {
+  const [pos, setPos] = React.useState<{ x: number; y: number } | null>(null);
+  React.useEffect(() => {
+    if (!pos) return;
+    const close = () => setPos(null);
+    document.addEventListener("click", close);
+    document.addEventListener("scroll", close, true);
+    return () => {
+      document.removeEventListener("click", close);
+      document.removeEventListener("scroll", close, true);
+    };
+  }, [pos]);
+  return (
+    <ContextMenuContext.Provider value={{ pos, open: (x, y) => setPos({ x, y }), close: () => setPos(null) }}>
+      {children}
+    </ContextMenuContext.Provider>
+  );
+}
+
+export function ContextMenuTrigger({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(ContextMenuContext);
+  return (
+    <div
+      className={className}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        ctx?.open(e.clientX, e.clientY);
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ContextMenuContent({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(ContextMenuContext);
+  if (!ctx?.pos) return null;
+  return (
+    <div
+      role="menu"
+      className={cn(
+        "fixed z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        className,
+      )}
+      style={{ left: ctx.pos.x, top: ctx.pos.y }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ContextMenuItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="menuitem"
+      className={cn(
+        "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-muted focus:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSeparator() {
+  return <div className="my-1 h-px bg-border" />;
+}
+
+export function ContextMenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)} {...props} />;
+}

package/registry/components/data-table.tsx

@@ -0,0 +1,71 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface DataTableColumn<T> {
+  key: keyof T & string;
+  header: string;
+  sortable?: boolean;
+  render?: (row: T) => React.ReactNode;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, React.ReactNode>>({
+  columns,
+  data,
+  className,
+}: {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  className?: string;
+}) {
+  const [sort, setSort] = React.useState<{ key: string; dir: 1 | -1 } | null>(null);
+
+  const rows = React.useMemo(() => {
+    if (!sort) return data;
+    const sorted = [...data].sort((a, b) => {
+      const av = a[sort.key];
+      const bv = b[sort.key];
+      return String(av).localeCompare(String(bv), undefined, { numeric: true }) * sort.dir;
+    });
+    return sorted;
+  }, [data, sort]);
+
+  const toggleSort = (key: string) =>
+    setSort((s) => (s?.key === key ? { key, dir: s.dir === 1 ? -1 : 1 } : { key, dir: 1 }));
+
+  return (
+    <div className={cn("w-full overflow-auto rounded-lg border border-border", className)}>
+      <table className="w-full caption-bottom text-sm">
+        <thead className="[&_tr]:border-b">
+          <tr>
+            {columns.map((c) => (
+              <th key={c.key} className={cn("h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-muted-foreground", c.className)}>
+                {c.sortable ? (
+                  <button type="button" onClick={() => toggleSort(c.key)} className="inline-flex items-center gap-1 hover:text-foreground">
+                    {c.header}
+                    <span className="text-[0.7rem]">{sort?.key === c.key ? (sort.dir === 1 ? "▲" : "▼") : "↕"}</span>
+                  </button>
+                ) : (
+                  c.header
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="[&_tr:last-child]:border-0">
+          {rows.map((row, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <tr key={i} className="border-b border-border transition-colors hover:bg-muted">
+              {columns.map((c) => (
+                <td key={c.key} className={cn("p-3 align-middle", c.className)}>
+                  {c.render ? c.render(row) : row[c.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/registry/components/date-picker.tsx

@@ -0,0 +1,58 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Calendar } from "@/components/ui/calendar";
+
+export function DatePicker({
+  value: controlled,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  className,
+}: {
+  value?: Date | null;
+  defaultValue?: Date;
+  onChange?: (d: Date) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  const [internal, setInternal] = React.useState<Date | null>(defaultValue ?? null);
+  const value = controlled !== undefined ? controlled : internal;
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+
+  const pick = (d: Date) => {
+    if (controlled === undefined) setInternal(d);
+    onChange?.(d);
+    setOpen(false);
+  };
+
+  return (
+    <div ref={ref} className={cn("relative inline-block", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex h-9 w-56 items-center gap-2 rounded-lg border border-input bg-background px-3 text-left text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50"
+      >
+        <svg viewBox="0 0 24 24" className="size-4 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
+        <span className={cn(!value && "text-muted-foreground")}>
+          {value ? value.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }) : placeholder}
+        </span>
+      </button>
+      {open && (
+        <div className="absolute z-50 mt-2">
+          <Calendar value={value} onChange={pick} />
+        </div>
+      )}
+    </div>
+  );
+}