@momentumworld/ui-react 0.17.0

package/src/components/ui/credit-card.tsx

@@ -0,0 +1,214 @@
+import { NfcIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+// The card is laid out once at this design size, then transform-scaled to the
+// requested width — so every variant stays pixel-identical at any size.
+const BASE_WIDTH = 316;
+const BASE_HEIGHT = 190;
+
+type CreditCardType =
+  | "transparent"
+  | "transparent-gradient"
+  | "brand-dark"
+  | "brand-light"
+  | "gray-dark"
+  | "gray-light"
+  | "transparent-strip"
+  | "gray-strip"
+  | "gradient-strip"
+  | "salmon-strip"
+  | "gray-strip-vertical"
+  | "gradient-strip-vertical"
+  | "salmon-strip-vertical";
+
+interface CreditCardVariantStyle {
+  card: string;
+  /** Decorative band rendered behind the content. */
+  strip?: string;
+  /** Light content on a dark or colorful face — switches the network logo. */
+  onDark: boolean;
+}
+
+const GLASS_FACE =
+  "border border-white/30 bg-white/10 text-white backdrop-blur-md";
+const LIGHT_FACE =
+  "bg-[#fffefc] text-[#1c1917] ring-1 ring-[#0c0a09]/10 ring-inset";
+const HORIZONTAL_STRIP = "inset-x-0 top-16 h-9";
+const VERTICAL_STRIP = "inset-y-0 right-12 w-9";
+
+const creditCardVariants: Record<CreditCardType, CreditCardVariantStyle> = {
+  "brand-dark": {
+    card: "bg-gradient-to-br from-[#a8761c] via-[#92600a] to-[#5e3f08] text-[#faf3df]",
+    onDark: true,
+  },
+  "brand-light": {
+    card: "bg-gradient-to-br from-[#ecd9a8] via-[#dcb35e] to-[#c0922e] text-[#41290a]",
+    onDark: false,
+  },
+  "gradient-strip": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(
+      HORIZONTAL_STRIP,
+      "bg-gradient-to-r from-[#d4a84b] via-[#c48a1a] to-[#92600a]",
+    ),
+  },
+  "gradient-strip-vertical": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(
+      VERTICAL_STRIP,
+      "bg-gradient-to-b from-[#d4a84b] via-[#c48a1a] to-[#92600a]",
+    ),
+  },
+  "gray-dark": {
+    card: "bg-gradient-to-br from-[#3b3633] via-[#1c1917] to-[#0c0a09] text-[#faf9f6]",
+    onDark: true,
+  },
+  "gray-light": {
+    card: "bg-gradient-to-br from-[#faf9f6] to-[#e7e5e4] text-[#1c1917] ring-1 ring-[#0c0a09]/10 ring-inset",
+    onDark: false,
+  },
+  "gray-strip": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(HORIZONTAL_STRIP, "bg-[#292524]"),
+  },
+  "gray-strip-vertical": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(VERTICAL_STRIP, "bg-[#292524]"),
+  },
+  "salmon-strip": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(HORIZONTAL_STRIP, "bg-gradient-to-r from-[#e8a18f] to-[#d4644f]"),
+  },
+  "salmon-strip-vertical": {
+    card: LIGHT_FACE,
+    onDark: false,
+    strip: cn(VERTICAL_STRIP, "bg-gradient-to-b from-[#e8a18f] to-[#d4644f]"),
+  },
+  transparent: {
+    card: GLASS_FACE,
+    onDark: true,
+  },
+  "transparent-gradient": {
+    card: "border border-white/25 bg-gradient-to-br from-[#d4a84b]/60 via-white/10 to-white/5 text-white backdrop-blur-md",
+    onDark: true,
+  },
+  "transparent-strip": {
+    card: GLASS_FACE,
+    onDark: true,
+    strip: cn(HORIZONTAL_STRIP, "bg-white/25"),
+  },
+};
+
+/** The card-network mark — two overlapping circles in the kit's palette. */
+function CreditCardLogo({ onDark }: { onDark: boolean }) {
+  return (
+    <span aria-hidden className="flex items-center" data-slot="credit-card-logo">
+      <span
+        className={cn(
+          "size-6 rounded-full",
+          onDark ? "bg-white/60" : "bg-[#d4a84b]",
+        )}
+      />
+      <span
+        className={cn(
+          "-ml-2.5 size-6 rounded-full",
+          onDark ? "bg-white/30" : "bg-[#92600a]/85",
+        )}
+      />
+    </span>
+  );
+}
+
+interface CreditCardProps extends React.ComponentProps<"div"> {
+  type?: CreditCardType;
+  company?: React.ReactNode;
+  cardNumber?: string;
+  cardHolder?: string;
+  cardExpiration?: string;
+  /** Rendered width in px — the height follows the 316 × 190 aspect ratio. */
+  width?: number;
+}
+
+function CreditCard({
+  className,
+  style,
+  type = "brand-dark",
+  company = "Country Club",
+  cardNumber = "1234 5678 9012 3456",
+  cardHolder = "OLIVIA RHYE",
+  cardExpiration = "06/28",
+  width = BASE_WIDTH,
+  ...props
+}: CreditCardProps) {
+  const scale = width / BASE_WIDTH;
+  const variant = creditCardVariants[type];
+
+  return (
+    <div
+      className={cn("relative shrink-0 select-none font-sans", className)}
+      data-slot="credit-card"
+      data-type={type}
+      style={{ height: Math.round(BASE_HEIGHT * scale), width, ...style }}
+      {...props}
+    >
+      <div
+        className={cn(
+          "absolute top-0 left-0 flex origin-top-left flex-col justify-between overflow-hidden rounded-[20px] p-5",
+          variant.card,
+        )}
+        style={{
+          height: BASE_HEIGHT,
+          transform: `scale(${scale})`,
+          width: BASE_WIDTH,
+        }}
+      >
+        {variant.strip ? (
+          <span aria-hidden className={cn("absolute", variant.strip)} />
+        ) : null}
+        <div className="relative flex items-start justify-between">
+          <span
+            className="font-semibold text-base tracking-tight"
+            data-slot="credit-card-company"
+          >
+            {company}
+          </span>
+          <NfcIcon aria-hidden className="size-5 opacity-70" />
+        </div>
+        <div className="relative flex flex-col gap-2.5">
+          <span
+            className="font-medium text-[0.9375rem] tabular-nums tracking-[0.12em]"
+            data-slot="credit-card-number"
+          >
+            {cardNumber}
+          </span>
+          <div className="flex items-end justify-between">
+            <div className="flex items-baseline gap-4">
+              <span
+                className="font-medium text-[0.6875rem] uppercase tracking-[0.14em]"
+                data-slot="credit-card-holder"
+              >
+                {cardHolder}
+              </span>
+              <span
+                className="font-medium text-[0.6875rem] tabular-nums tracking-[0.14em] opacity-80"
+                data-slot="credit-card-expiration"
+              >
+                {cardExpiration}
+              </span>
+            </div>
+            <CreditCardLogo onDark={variant.onDark} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { CreditCard, type CreditCardProps, type CreditCardType };

package/src/components/ui/data-table-paged.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Input } from "./input";
+import { PaginationControls } from "./pagination-controls";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+export interface DataTablePagedColumn {
+  key: string;
+  label?: string;
+}
+
+export interface DataTablePagedProps {
+  /** Columns to render. Pass `label` to override the header text. */
+  columns: DataTablePagedColumn[];
+  /** Row objects; values are rendered with `String(...)` unless a ReactNode. */
+  rows: Record<string, unknown>[];
+  pageSize?: number;
+  /** Show the client-side search box (filters across all columns). */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  /**
+   * Total row count when `rows` is only one page of a larger server-side set —
+   * shown as "n of total" in the footer.
+   */
+  totalCount?: number;
+  className?: string;
+}
+
+function formatCell(value: unknown): React.ReactNode {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (React.isValidElement(value)) return value;
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+/**
+ * Client-side paginated (and optionally searchable) data table. Designed for
+ * result sets a chat agent or API returns: pass plain row objects and column
+ * keys, get a themed table with pagination that never renders huge lists.
+ */
+function DataTablePaged({
+  className,
+  columns,
+  emptyLabel = "No results",
+  pageSize = 10,
+  rows,
+  searchable = true,
+  searchPlaceholder = "Filter results…",
+  totalCount,
+}: DataTablePagedProps) {
+  const [page, setPage] = React.useState(1);
+  const [query, setQuery] = React.useState("");
+
+  const filteredRows = React.useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return rows;
+    return rows.filter((row) =>
+      columns.some((column) =>
+        String(row[column.key] ?? "")
+          .toLowerCase()
+          .includes(trimmed),
+      ),
+    );
+  }, [columns, query, rows]);
+
+  const pageCount = Math.max(1, Math.ceil(filteredRows.length / pageSize));
+  const safePage = Math.min(page, pageCount);
+  const pageRows = filteredRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)} data-slot="data-table-paged">
+      {searchable && rows.length > pageSize && (
+        <div className="relative">
+          <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-2.5 size-4 text-muted-foreground" />
+          <Input
+            className="h-8 pl-8 text-sm"
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setPage(1);
+            }}
+            placeholder={searchPlaceholder}
+            value={query}
+          />
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead className="whitespace-nowrap" key={column.key}>
+                  {column.label ?? column.key.replaceAll("_", " ")}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pageRows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  className="py-6 text-center text-muted-foreground"
+                  colSpan={columns.length}
+                >
+                  {emptyLabel}
+                </TableCell>
+              </TableRow>
+            ) : (
+              pageRows.map((row, rowIndex) => (
+                <TableRow key={`${safePage}-${rowIndex}`}>
+                  {columns.map((column) => (
+                    <TableCell className="max-w-56 truncate" key={column.key}>
+                      {formatCell(row[column.key])}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <span className="text-muted-foreground text-xs">
+          {filteredRows.length}
+          {typeof totalCount === "number" && totalCount > rows.length
+            ? ` of ${totalCount}`
+            : ""}{" "}
+          rows
+        </span>
+        <PaginationControls
+          page={safePage}
+          pageCount={pageCount}
+          renderPageLink={(nextPage) => (
+            // biome-ignore lint/a11y/useValidAnchor: client-side pagination
+            <a
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                setPage(nextPage);
+              }}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export { DataTablePaged };

package/src/components/ui/date-picker.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange, Matcher } from "react-day-picker";
+
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../../lib/utils/css";
+
+/** Build react-day-picker `disabled` matchers from optional min/max bounds. */
+function boundsMatcher(fromDate?: Date, toDate?: Date): Matcher[] | undefined {
+  const out: Matcher[] = [];
+  if (fromDate) out.push({ before: fromDate });
+  if (toDate) out.push({ after: toDate });
+  return out.length ? out : undefined;
+}
+
+interface DatePickerProps {
+  /** The selected date (controlled). */
+  value?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  /** Trigger button `disabled`. */
+  disabled?: boolean;
+  /** Restrict selectable days (passed straight to react-day-picker). */
+  fromDate?: Date;
+  toDate?: Date;
+  /** date-fns format for the trigger label (default "LLL dd, y"). */
+  displayFormat?: string;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A single-date picker: a button that opens a calendar in a popover. The
+ * canonical way to take a date in this system — never a native `<input
+ * type="date">`. Controlled via `value` / `onValueChange`.
+ */
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled,
+  fromDate,
+  toDate,
+  displayFormat = "LLL dd, y",
+  align = "start",
+  className,
+  id,
+  ...props
+}: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            className={cn("w-full justify-start font-normal", !value && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+            aria-label={props["aria-label"]}
+          />
+        }
+      >
+        <CalendarIcon aria-hidden />
+        {value ? format(value, displayFormat) : <span>{placeholder}</span>}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0">
+        <Calendar
+          autoFocus
+          disabled={boundsMatcher(fromDate, toDate)}
+          mode="single"
+          onSelect={(d) => onValueChange?.(d)}
+          selected={value}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DateRangePickerProps {
+  value?: DateRange;
+  onValueChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  fromDate?: Date;
+  toDate?: Date;
+  numberOfMonths?: number;
+  displayFormat?: string;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A date-range picker: pick a start and (optionally) end date. Controlled via
+ * `value` / `onValueChange` with react-day-picker's `{from, to}` shape.
+ */
+function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date range",
+  disabled,
+  fromDate,
+  toDate,
+  numberOfMonths = 2,
+  displayFormat = "LLL dd, y",
+  align = "start",
+  className,
+  id,
+  ...props
+}: DateRangePickerProps) {
+  const label = value?.from
+    ? value.to
+      ? `${format(value.from, displayFormat)} – ${format(value.to, displayFormat)}`
+      : format(value.from, displayFormat)
+    : null;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            className={cn("w-full justify-start font-normal", !label && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+            aria-label={props["aria-label"]}
+          />
+        }
+      >
+        <CalendarIcon aria-hidden />
+        {label ?? <span>{placeholder}</span>}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0">
+        <Calendar
+          autoFocus
+          disabled={boundsMatcher(fromDate, toDate)}
+          mode="range"
+          numberOfMonths={numberOfMonths}
+          onSelect={(r) => onValueChange?.(r)}
+          selected={value}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps };