@payglocal_ui/flux-ui 0.1.0

package/src/data-table.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "./utils";
+import { TableRowSkeleton } from "./skeleton";
+import { EmptyState } from "./empty-state";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+export type DataTableDensity = "default" | "comfortable" | "compact";
+export type DataTableHeaderStyle = "surface" | "minimal";
+export type DataTableFooterSummary = "range" | "count";
+
+/** Builds the visible page numbers including ellipsis markers */
+function getPageRange(current: number, total: number): (number | "…")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: (number | "…")[] = [1];
+  if (current > 3) pages.push("…");
+  const lo = Math.max(2, current - 1);
+  const hi = Math.min(total - 1, current + 1);
+  for (let p = lo; p <= hi; p++) pages.push(p);
+  if (current < total - 2) pages.push("…");
+  pages.push(total);
+  return pages;
+}
+
+export type Column<T> = {
+  key: string;
+  header: ReactNode;
+  /** Table column width, e.g. `48px`, `18%`, `minmax(12rem,1fr)` (fixed layout) */
+  width?: string;
+  minWidth?: number;
+  maxWidth?: number;
+  align?: "left" | "right" | "center";
+  /** Allow cell text to wrap instead of truncating. */
+  wrap?: boolean;
+  /** Extra classes on `<th>` / `<td>` (e.g. wider horizontal padding per column) */
+  cellClassName?: string;
+  render: (row: T, index: number) => ReactNode;
+};
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  isLoading?: boolean;
+  skeletonRows?: number;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  pageSize?: number;
+  /** Controlled page number (1-indexed). Enables server-side pagination. */
+  page?: number;
+  /** Called when the user changes page in controlled mode. */
+  onPageChange?: (page: number) => void;
+  /** Total row count for server-side pagination (overrides data.length for page calculations). */
+  totalRows?: number;
+  className?: string;
+  rowKey: (row: T) => string;
+  /** Optional hover CTA shown on the right of every row */
+  rowCta?: {
+    label: string;
+    onClick?: (row: T) => void;
+  };
+  /** Row / cell vertical rhythm and horizontal gutters */
+  density?: DataTableDensity;
+  /** `auto` lets columns breathe; `fixed` uses `colgroup` hints */
+  tableLayout?: "auto" | "fixed";
+  theadClassName?: string;
+  headerStyle?: DataTableHeaderStyle;
+  /** Footer: paginated range vs simple `n items` */
+  footerSummary?: DataTableFooterSummary;
+  /** Noun after the count when `footerSummary="count"` (default singular / plural `item` / `items`). */
+  footerCountLabels?: { singular: string; plural: string };
+  /** With `density="compact"`, use tighter cell gutters (`pl-1.5 pr-2.5` vs `px-3`). Footer keeps normal horizontal padding. */
+  snug?: boolean;
+}
+
+export function DataTable<T>({
+  columns,
+  data,
+  isLoading = false,
+  skeletonRows = 6,
+  emptyTitle = "No data yet",
+  emptyDescription,
+  pageSize = 10,
+  page: controlledPage,
+  onPageChange,
+  totalRows,
+  className,
+  rowKey,
+  rowCta,
+  density = "default",
+  tableLayout = "fixed",
+  theadClassName,
+  headerStyle = "surface",
+  footerSummary = "range",
+  footerCountLabels = { singular: "item", plural: "items" },
+  snug = false,
+}: DataTableProps<T>) {
+  const isControlled = controlledPage !== undefined;
+  const [internalPage, setInternalPage] = useState(1);
+  const page = isControlled ? controlledPage : internalPage;
+  const setPage = isControlled
+    ? (p: number) => onPageChange?.(p)
+    : (p: number) => setInternalPage(p);
+
+  const total = totalRows ?? data.length;
+  const totalPages = Math.ceil(total / pageSize);
+  const paginated = isControlled ? data : data.slice((page - 1) * pageSize, page * pageSize);
+
+  const comfortable = density === "comfortable";
+  const compact = density === "compact";
+  const compactCellPad = compact
+    ? snug
+      ? "pl-1.5 pr-2.5 py-2.5"
+      : "px-3 py-2.5"
+    : "px-4 py-3.5";
+  const cellPad = comfortable ? "px-5 py-4" : compactCellPad;
+  const headPad = comfortable ? "px-5 py-4" : compactCellPad;
+  /** Footer is outside the grid; do not reuse snug cell `pl-0`-style gutters here. */
+  const footerPad = comfortable
+    ? "px-5 py-4"
+    : compact
+      ? "px-4 py-2.5"
+      : "px-4 py-3.5";
+  const headText = comfortable
+    ? "text-[12px] font-medium text-muted-foreground tracking-normal"
+    : compact
+      ? "text-[11px] font-semibold text-muted-foreground"
+      : "text-[11px] font-semibold text-foreground/75 dark:text-foreground/85";
+  const rowCtaColWidth = compact ? 108 : 130;
+
+  return (
+    <div
+      className={cn(
+        "bg-card text-card-foreground rounded-xl overflow-hidden border border-border",
+        className
+      )}
+    >
+      {/* scrollbar space always reserved; thumb subtle on hover */}
+      <div
+        className={cn(
+          "overflow-x-auto",
+          "[&::-webkit-scrollbar]:h-[4px] [&::-webkit-scrollbar-track]:bg-transparent",
+          "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent",
+          "hover:[&::-webkit-scrollbar-thumb]:bg-border dark:hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/35"
+        )}
+        style={{ scrollbarWidth: "thin", scrollbarColor: "var(--border) transparent" }}
+      >
+        <table
+          className={cn(tableLayout === "auto" && "min-w-[920px]")}
+          style={{ tableLayout, width: "100%" }}
+        >
+          {tableLayout === "fixed" && (
+            <colgroup>
+              {columns.map((col) => (
+                <col
+                  key={col.key}
+                  style={{
+                    width: col.width ?? (col.minWidth != null ? `${col.minWidth}px` : undefined),
+                    minWidth: col.minWidth,
+                    maxWidth: col.maxWidth,
+                  }}
+                />
+              ))}
+              {rowCta ? <col style={{ width: rowCtaColWidth }} /> : null}
+            </colgroup>
+          )}
+
+          <thead
+            className={cn(
+              headerStyle === "surface" && "bg-muted/35",
+              headerStyle === "minimal" && "bg-transparent",
+              theadClassName
+            )}
+          >
+            <tr
+              className={cn(
+                "border-b",
+                headerStyle === "surface" ? "border-border" : "border-border/70"
+              )}
+            >
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={cn(
+                    headPad,
+                    headText,
+                    "whitespace-nowrap align-middle",
+                    col.align === "right"
+                      ? "text-right"
+                      : col.align === "center"
+                        ? "text-center"
+                        : "text-left",
+                    col.cellClassName
+                  )}
+                >
+                  {col.header}
+                </th>
+              ))}
+              {rowCta ? <th className={cn(headPad, "w-[1%]")} aria-hidden /> : null}
+            </tr>
+          </thead>
+
+          <tbody>
+            {isLoading ? (
+              Array.from({ length: skeletonRows }).map((_, i) => (
+                <TableRowSkeleton
+                  key={i}
+                  cols={columns.length + (rowCta ? 1 : 0)}
+                  density={density}
+                  snug={snug}
+                />
+              ))
+            ) : paginated.length === 0 ? (
+              <tr>
+                <td colSpan={columns.length + (rowCta ? 1 : 0)}>
+                  <EmptyState title={emptyTitle} description={emptyDescription} />
+                </td>
+              </tr>
+            ) : (
+              paginated.map((row, i) => (
+                <tr
+                  key={rowKey(row)}
+                  className={cn(
+                    "group transition-colors duration-150 border-b border-border/60 last:border-b-0",
+                    comfortable && "min-h-[56px]",
+                    compact && "min-h-[44px]",
+                    "hover:bg-muted/40 dark:hover:bg-muted/25",
+                    rowCta &&
+                      "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
+                  )}
+                >
+                  {columns.map((col) => (
+                    <td
+                      key={col.key}
+                      className={cn(
+                        cellPad,
+                        "align-middle",
+                        comfortable
+                          ? cn(
+                              "text-[13px] leading-snug",
+                              !col.wrap && "whitespace-nowrap"
+                            )
+                          : compact
+                            ? cn(
+                                "text-[13px] leading-tight",
+                                !col.wrap && "whitespace-nowrap",
+                                "overflow-hidden"
+                              )
+                            : "whitespace-nowrap overflow-hidden",
+                        col.align === "right"
+                          ? "text-right"
+                          : col.align === "center"
+                            ? "text-center"
+                            : "text-left",
+                        col.cellClassName
+                      )}
+                    >
+                      {col.render(row, i)}
+                    </td>
+                  ))}
+
+                  {rowCta ? (
+                    <td
+                      className={cn(
+                        cellPad,
+                        "text-left align-middle whitespace-nowrap",
+                        comfortable
+                          ? "pl-2 pr-5"
+                          : compact
+                            ? snug
+                              ? "pl-1.5 pr-2"
+                              : "pl-1.5 pr-3"
+                            : "pl-3 pr-4"
+                      )}
+                    >
+                      <button
+                        type="button"
+                        onClick={() => rowCta.onClick?.(row)}
+                        className={cn(
+                          "opacity-0 group-hover:opacity-100 transition-opacity duration-150 inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
+                          compact
+                            ? "px-2.5 py-1 text-[11px]"
+                            : "px-3 py-1.5 text-[12px]"
+                        )}
+                      >
+                        {rowCta.label}
+                      </button>
+                    </td>
+                  ) : null}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {!isLoading && paginated.length > 0 && (
+        <div
+          className={cn(
+            "flex items-center gap-4 flex-wrap border-t border-border",
+            footerPad,
+            footerSummary === "count" && totalPages <= 1
+              ? "justify-start"
+              : "justify-between"
+          )}
+        >
+          {footerSummary === "count" ? (
+            <span className="text-[12px] text-muted-foreground tabular-nums">
+              <span className="font-medium text-foreground">{total}</span>{" "}
+              {total === 1
+                ? footerCountLabels.singular
+                : footerCountLabels.plural}
+            </span>
+          ) : (
+            <span className="text-[12px] text-muted-foreground tabular-nums">
+              Showing{" "}
+              <span className="text-foreground font-medium">
+                {Math.min((page - 1) * pageSize + 1, total)}–
+                {Math.min(page * pageSize, total)}
+              </span>{" "}
+              of{" "}
+              <span className="text-foreground font-medium">
+                {total.toLocaleString()}
+              </span>{" "}
+              {total !== 1 ? "results" : "result"}
+            </span>
+          )}
+
+          {(footerSummary === "range" || footerSummary === "count") &&
+            totalPages > 1 && (
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setPage(Math.max(1, page - 1))}
+                disabled={page === 1}
+                className="w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              >
+                <ChevronLeft className="w-3.5 h-3.5" />
+              </button>
+
+              {getPageRange(page, totalPages).map((p, idx) =>
+                p === "…" ? (
+                  <span
+                    key={`ellipsis-${idx}`}
+                    className="w-7 h-7 flex items-center justify-center text-[12px] text-muted-foreground select-none"
+                  >
+                    …
+                  </span>
+                ) : (
+                  <button
+                    key={p}
+                    onClick={() => setPage(p as number)}
+                    className={cn(
+                      "w-7 h-7 rounded-md text-[12px] font-medium transition-colors tabular-nums flex items-center justify-center",
+                      page === p
+                        ? "bg-primary text-primary-foreground shadow-sm"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    )}
+                  >
+                    {p}
+                  </button>
+                )
+              )}
+
+              <button
+                onClick={() => setPage(Math.min(totalPages, page + 1))}
+                disabled={page === totalPages}
+                className="w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              >
+                <ChevronRight className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/date-picker.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { ChevronLeft, ChevronRight, ChevronDown, CalendarDays } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "./utils";
+
+/* ─── Constants ─────────────────────────────────────────────────────────── */
+const MONTHS = ["January","February","March","April","May","June",
+                "July","August","September","October","November","December"];
+const DAYS   = ["Su","Mo","Tu","We","Th","Fr","Sa"];
+const PRIMARY = "#0061E3";
+const PANEL_W = 296;
+
+/* ─── Helpers ────────────────────────────────────────────────────────────── */
+function daysInMonth(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+function firstDayOf(y: number, m: number)  { return new Date(y, m, 1).getDay(); }
+
+function parseYMD(s: string) {
+  if (!s) return null;
+  const [y, m, d] = s.split("-").map(Number);
+  if (!y || !m || !d) return null;
+  return { y, m: m - 1, d };
+}
+function toYMD(y: number, m: number, d: number) {
+  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+function displayDate(ymd: string) {
+  const p = parseYMD(ymd);
+  if (!p) return "";
+  return `${String(p.d).padStart(2, "0")} ${MONTHS[p.m].slice(0, 3)} ${p.y}`;
+}
+
+/* ─── Props ─────────────────────────────────────────────────────────────── */
+interface DatePickerProps {
+  value:        string;
+  onChange:     (v: string) => void;
+  placeholder?: string;
+  className?:   string;
+  min?:         string;
+  label?:       string;
+}
+
+/* ─── DatePicker ─────────────────────────────────────────────────────────── */
+export function DatePicker({ value, onChange, placeholder = "Select date", className, min, label }: DatePickerProps) {
+  const today   = new Date();
+  const parsed  = parseYMD(value);
+
+  const [open,      setOpen]      = useState(false);
+  const [panelPos,  setPanelPos]  = useState({ top: 0, left: 0 });
+  const [viewYear,  setViewYear]  = useState(parsed?.y  ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(parsed?.m  ?? today.getMonth());
+  const [yearMenu,  setYearMenu]  = useState(false);
+  const [monthMenu, setMonthMenu] = useState(false);
+  const [mounted,   setMounted]   = useState(false);
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef   = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  /* Sync view when value changes */
+  useEffect(() => {
+    if (parsed) { setViewYear(parsed.y); setViewMonth(parsed.m); }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  /* Compute fixed position from trigger rect */
+  function openPanel() {
+    if (!triggerRef.current) return;
+    const trigger = triggerRef.current;
+    const vw     = window.innerWidth;
+    const vh     = window.innerHeight;
+    const PANEL_H = 340; // approx height
+
+    // Scroll trigger into view so panel can appear next to it (avoids panel far from input in scrollable forms)
+    trigger.scrollIntoView({ block: "center", behavior: "auto" });
+
+    requestAnimationFrame(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+
+      // Horizontal: align left edge, clamp so it doesn't go off screen
+      let left = rect.left;
+      if (left + PANEL_W > vw - 8) left = vw - PANEL_W - 8;
+
+      // Vertical: prefer below trigger; if not enough room open above
+      let top = rect.bottom + 6;
+      if (top + PANEL_H > vh - 8) top = rect.top - PANEL_H - 6;
+
+      setPanelPos({ top, left });
+      setOpen(true);
+    });
+  }
+
+  /* Close on outside click */
+  useEffect(() => {
+    if (!open) return;
+    function handler(e: MouseEvent) {
+      const inTrigger = triggerRef.current?.contains(e.target as Node);
+      const inPanel   = panelRef.current?.contains(e.target as Node);
+      if (!inTrigger && !inPanel) {
+        setOpen(false); setYearMenu(false); setMonthMenu(false);
+      }
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  /* Navigation */
+  function prevMonth() {
+    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); }
+    else setViewMonth(m => m - 1);
+  }
+  function nextMonth() {
+    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); }
+    else setViewMonth(m => m + 1);
+  }
+
+  /* Day grid */
+  const totalDays = daysInMonth(viewYear, viewMonth);
+  const firstDay  = firstDayOf(viewYear, viewMonth);
+  const prevTotal = daysInMonth(viewYear, viewMonth === 0 ? 11 : viewMonth - 1);
+  const minParsed = parseYMD(min ?? "");
+
+  function isDisabled(y: number, m: number, d: number) {
+    if (!minParsed) return false;
+    return new Date(y, m, d) < new Date(minParsed.y, minParsed.m, minParsed.d);
+  }
+
+  type Cell = { d: number; m: number; y: number; current: boolean };
+  const cells: Cell[] = [];
+  for (let i = 0; i < firstDay; i++) {
+    const d = prevTotal - firstDay + 1 + i;
+    const m = viewMonth === 0 ? 11 : viewMonth - 1;
+    const y = viewMonth === 0 ? viewYear - 1 : viewYear;
+    cells.push({ d, m, y, current: false });
+  }
+  for (let d = 1; d <= totalDays; d++) cells.push({ d, m: viewMonth, y: viewYear, current: true });
+  const remaining = 42 - cells.length;
+  for (let d = 1; d <= remaining; d++) {
+    const m = viewMonth === 11 ? 0 : viewMonth + 1;
+    const y = viewMonth === 11 ? viewYear + 1 : viewYear;
+    cells.push({ d, m, y, current: false });
+  }
+
+  const years = Array.from({ length: 15 }, (_, i) => today.getFullYear() - 2 + i);
+
+  function selectDay(cell: Cell) {
+    if (!cell.current) { setViewYear(cell.y); setViewMonth(cell.m); }
+    if (cell.current && isDisabled(cell.y, cell.m, cell.d)) return;
+    onChange(toYMD(cell.y, cell.m, cell.d));
+    setOpen(false);
+  }
+
+  const isToday    = (c: Cell) => c.d === today.getDate() && c.m === today.getMonth() && c.y === today.getFullYear();
+  const isSelected = (c: Cell) => !!parsed && c.d === parsed.d && c.m === parsed.m && c.y === parsed.y;
+
+  /* ── Calendar panel (portalled) ── */
+  const panel = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={panelRef}
+          initial={{ opacity: 0, scale: 0.97, y: -6 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.97, y: -6 }}
+          transition={{ duration: 0.16, ease: [0.16, 1, 0.3, 1] }}
+          className="isolate rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg select-none dark:shadow-black/40"
+          style={{
+            position:        "fixed",
+            top:             panelPos.top,
+            left:            panelPos.left,
+            width:           PANEL_W,
+            zIndex:          20000,
+            backgroundColor: "var(--popover)",
+            boxShadow:       "0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07)",
+          }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 pt-4 pb-3">
+            <button onClick={prevMonth}
+              className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors">
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+
+            <div className="flex items-center gap-1">
+              {/* Month */}
+              <div className="relative">
+                <button onClick={() => { setMonthMenu(o => !o); setYearMenu(false); }}
+                  className="flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-gray-900 hover:bg-gray-100 transition-colors">
+                  {MONTHS[viewMonth].slice(0, 3)}
+                  <ChevronDown className="w-3 h-3 text-gray-400" />
+                </button>
+                <AnimatePresence>
+                  {monthMenu && (
+                    <motion.div
+                      initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }}
+                      transition={{ duration: 0.12 }}
+                      className="absolute top-full left-0 z-[10000] mt-1 max-h-[220px] min-w-[130px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg"
+                    >
+                      {MONTHS.map((mn, mi) => (
+                        <button key={mn} onClick={() => { setViewMonth(mi); setMonthMenu(false); }}
+                          className="w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted"
+                          style={{ fontWeight: mi === viewMonth ? 600 : 400, color: mi === viewMonth ? PRIMARY : undefined }}
+                        >
+                          {mn}
+                        </button>
+                      ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              {/* Year */}
+              <div className="relative">
+                <button onClick={() => { setYearMenu(o => !o); setMonthMenu(false); }}
+                  className="flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-gray-900 hover:bg-gray-100 transition-colors">
+                  {viewYear}
+                  <ChevronDown className="w-3 h-3 text-gray-400" />
+                </button>
+                <AnimatePresence>
+                  {yearMenu && (
+                    <motion.div
+                      initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }}
+                      transition={{ duration: 0.12 }}
+                      className="absolute top-full left-0 z-[10000] mt-1 max-h-[200px] min-w-[90px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg"
+                    >
+                      {years.map(yr => (
+                        <button key={yr} onClick={() => { setViewYear(yr); setYearMenu(false); }}
+                          className="w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted"
+                          style={{ fontWeight: yr === viewYear ? 600 : 400, color: yr === viewYear ? PRIMARY : undefined }}
+                        >
+                          {yr}
+                        </button>
+                      ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+
+            <button onClick={nextMonth}
+              className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors">
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* Day headers — explicit grid: Tailwind grid-cols-7 can be dropped from CSS output for portalled nodes */}
+          <div
+            className="px-3 pb-1"
+            style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" }}
+          >
+            {DAYS.map((d) => (
+              <div key={d} className="py-1 text-center text-[11.5px] font-semibold text-muted-foreground">
+                {d}
+              </div>
+            ))}
+          </div>
+
+          {/* Day grid */}
+          <div
+            className="gap-y-0.5 px-3 pb-4"
+            style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" }}
+          >
+            {cells.map((cell, i) => {
+              const selected = isSelected(cell);
+              const tod      = isToday(cell);
+              const disabled = cell.current && isDisabled(cell.y, cell.m, cell.d);
+              return (
+                <button key={i} onClick={() => selectDay(cell)} disabled={disabled}
+                  className={cn(
+                    "h-9 w-9 mx-auto rounded-full text-[13px] font-medium flex items-center justify-center transition-all",
+                    selected  && "text-white font-semibold",
+                    !selected && tod      && "font-semibold",
+                    !selected && !tod && cell.current  && !disabled && "text-gray-800 hover:bg-gray-100",
+                    !selected && !cell.current && "text-gray-300 hover:bg-gray-50",
+                    disabled  && "opacity-30 cursor-not-allowed",
+                  )}
+                  style={selected ? { background: PRIMARY } : tod ? { background: `${PRIMARY}18`, color: PRIMARY } : {}}>
+                  {cell.d}
+                </button>
+              );
+            })}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  return (
+    <div className={cn("relative", className)}>
+      {label && <p className="mb-2 text-sm font-medium text-foreground">{label}</p>}
+
+      {/* Trigger */}
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => open ? setOpen(false) : openPanel()}
+        className={cn(
+          "flex h-12 min-h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-5 text-left text-[15px] shadow-sm transition-colors",
+          open ? "border-ring ring-2 ring-ring/20" : "hover:border-muted-foreground/45",
+        )}
+      >
+        <CalendarDays className="size-[1.125rem] shrink-0 text-muted-foreground" />
+        <span className={cn("flex-1", value ? "text-foreground" : "text-muted-foreground")}>
+          {value ? displayDate(value) : placeholder}
+        </span>
+        <ChevronDown className={cn("size-[1.125rem] shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+      </button>
+
+      {/* Portal */}
+      {mounted && createPortal(panel, document.body)}
+    </div>
+  );
+}