@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/src/components/ui/DataTable.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState, useMemo, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DataTableColumn<T> {
+  key: string;
+  label: string;
+  render?: (item: T) => ReactNode;
+  sortable?: boolean;
+  className?: string;
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  pageSize?: number;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, any>>({
+  columns,
+  data,
+  pageSize = 10,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  className,
+}: DataTableProps<T>) {
+  const [search, setSearch] = useState("");
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [page, setPage] = useState(0);
+
+  const filtered = useMemo(() => {
+    let items = data;
+    if (search) {
+      const q = search.toLowerCase();
+      items = items.filter((item) =>
+        Object.values(item).some((v) => String(v).toLowerCase().includes(q))
+      );
+    }
+    if (sortKey) {
+      items = [...items].sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+        return sortDir === "asc" ? cmp : -cmp;
+      });
+    }
+    return items;
+  }, [data, search, sortKey, sortDir]);
+
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const paged = filtered.slice(page * pageSize, (page + 1) * pageSize);
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+
+  return (
+    <div className={cn("ph-data-table", className)}>
+      {searchable && (
+        <div className="ph-data-table__toolbar">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            placeholder={searchPlaceholder}
+            className="ph-input ph-input-sm"
+          />
+        </div>
+      )}
+      <div className="ph-table-wrap">
+        <table className="ph-table">
+          <thead>
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={cn(col.sortable && "cursor-pointer select-none", col.className)}
+                  onClick={() => col.sortable && handleSort(col.key)}
+                >
+                  {col.label}
+                  {sortKey === col.key && (
+                    <span className="ml-1 inline-block">{sortDir === "asc" ? "\u2191" : "\u2193"}</span>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {paged.map((item, i) => (
+              <tr key={i}>
+                {columns.map((col) => (
+                  <td key={col.key} className={col.className}>
+                    {col.render ? col.render(item) : item[col.key]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {paged.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="text-center text-ph-mutedtext py-8">No results</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {totalPages > 1 && (
+        <div className="ph-data-table__pagination">
+          <button disabled={page === 0} onClick={() => setPage((p) => p - 1)} className="ph-data-table__page-btn">
+            Previous
+          </button>
+          <span className="text-xs text-ph-mutedtext">
+            Page {page + 1} of {totalPages}
+          </span>
+          <button disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)} className="ph-data-table__page-btn">
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+DataTable.displayName = "DataTable";

package/src/components/ui/DatePicker.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useMemo, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+const DAYS = ["Su","Mo","Tu","We","Th","Fr","Sa"];
+
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+  value?: Date;
+  onChange?: (date: Date) => void;
+}
+
+export function DatePicker({ value, onChange, className, ...props }: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(value ?? new Date());
+  const selected = value;
+
+  const days = useMemo(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const first = new Date(year, month, 1).getDay();
+    const last = new Date(year, month + 1, 0).getDate();
+    const prevLast = new Date(year, month, 0).getDate();
+    const cells: { day: number; month: "prev" | "current" | "next" }[] = [];
+    for (let i = first - 1; i >= 0; i--) cells.push({ day: prevLast - i, month: "prev" });
+    for (let d = 1; d <= last; d++) cells.push({ day: d, month: "current" });
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) cells.push({ day: d, month: "next" });
+    return cells;
+  }, [viewDate]);
+
+  const isSelected = (d: number, m: "prev" | "current" | "next") => {
+    if (!selected || m !== "current") return false;
+    const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+    return date.toDateString() === selected.toDateString();
+  };
+
+  const selectDay = (d: number, m: string) => {
+    const month = m === "prev" ? viewDate.getMonth() - 1 : m === "next" ? viewDate.getMonth() + 1 : viewDate.getMonth();
+    const year = month < 0 ? viewDate.getFullYear() - 1 : month > 11 ? viewDate.getFullYear() + 1 : viewDate.getFullYear();
+    const adjustedMonth = ((month % 12) + 12) % 12;
+    const date = new Date(year, adjustedMonth, d);
+    onChange?.(date);
+    setOpen(false);
+  };
+
+  const nav = (delta: number) => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + delta, 1));
+
+  return (
+    <div className={cn("ph-datepicker relative", className)}>
+      <input
+        type="text"
+        readOnly
+        value={selected ? `${MONTHS[selected.getMonth()]} ${selected.getDate()}, ${selected.getFullYear()}` : ""}
+        onFocus={() => setOpen(true)}
+        placeholder="Pick a date"
+        className="ph-input w-full cursor-pointer"
+        {...props}
+      />
+      {open && (
+        <div className="ph-datepicker__dropdown">
+          <div className="ph-datepicker__nav">
+            <button type="button" onClick={() => nav(-1)} className="ph-datepicker__nav-btn" aria-label="Previous month">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M7 3L4 6l3 3"/></svg>
+            </button>
+            <span className="ph-datepicker__nav-label">{MONTHS[viewDate.getMonth()]} {viewDate.getFullYear()}</span>
+            <button type="button" onClick={() => nav(1)} className="ph-datepicker__nav-btn" aria-label="Next month">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 3l3 3-3 3"/></svg>
+            </button>
+          </div>
+          <div className="ph-datepicker__grid">
+            {DAYS.map((d) => <div key={d} className="ph-datepicker__day-header">{d}</div>)}
+            {days.map((d, i) => (
+              <button
+                key={i}
+                type="button"
+                disabled={d.month !== "current"}
+                onClick={() => selectDay(d.day, d.month)}
+                className={cn(
+                  "ph-datepicker__day",
+                  d.month !== "current" && "ph-datepicker__day--other",
+                  isSelected(d.day, d.month) && "ph-datepicker__day--selected"
+                )}
+              >
+                {d.day}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+DatePicker.displayName = "DatePicker";

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,75 @@
+import { useState, type ReactNode } from "react";
+import { Modal, type ModalProps } from "@/components/ui/Modal";
+import { Button, type ButtonProps } from "@/components/ui/Button";
+
+export interface DialogProps extends Omit<ModalProps, "onClose"> {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onConfirm?: () => void | Promise<void>;
+  confirmText?: string;
+  cancelText?: string;
+  confirmProps?: Partial<ButtonProps>;
+  cancelProps?: Partial<ButtonProps>;
+  children?: ReactNode;
+}
+
+export function Dialog({
+  isOpen: openProp,
+  onClose,
+  onConfirm,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  confirmProps,
+  cancelProps,
+  children,
+  title,
+  ...modalProps
+}: DialogProps) {
+  const [loading, setLoading] = useState(false);
+  const isOpen = openProp ?? true;
+
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+    onClose?.();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={title}
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" {...cancelProps} onClick={onClose}>
+            {cancelText}
+          </Button>
+          {onConfirm && (
+            <Button
+              variant="primary"
+              loading={loading}
+              {...confirmProps}
+              onClick={handleConfirm}
+            >
+              {confirmText}
+            </Button>
+          )}
+        </div>
+      }
+      {...modalProps}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+Dialog.displayName = "Dialog";
+
+export function confirmDialog(props: DialogProps) {
+  return <Dialog {...props} />;
+}

package/src/components/ui/Divider.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  vertical?: boolean;
+  dashed?: boolean;
+  thick?: boolean;
+  label?: string;
+}
+
+export function Divider({
+  vertical = false,
+  dashed = false,
+  thick = false,
+  label,
+  className,
+  ...props
+}: DividerProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={vertical ? "vertical" : "horizontal"}
+      className={cn(
+        "ph-divider",
+        vertical && "ph-divider--vertical",
+        thick && "ph-divider--thick",
+        dashed && "ph-divider--dashed",
+        !!label && "ph-divider--with-label",
+        !className && (vertical ? "mx-2 self-stretch" : "my-2"),
+        className
+      )}
+      {...props}
+    >
+      {label && <span className="ph-divider__label">{label}</span>}
+    </div>
+  );
+}
+
+Divider.displayName = "Divider";

package/src/components/ui/Dot.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DotProps extends HTMLAttributes<HTMLSpanElement> {
+  color?: "green" | "yellow" | "red" | "blue" | "gray";
+  size?: "sm" | "md";
+}
+
+const colorMap = {
+  green: "bg-ph-success",
+  yellow: "bg-ph-warning",
+  red: "bg-ph-danger",
+  blue: "bg-ph-info",
+  gray: "bg-ph-mutedtext",
+};
+
+export function Dot({ color = "gray", size = "md", className, ...props }: DotProps) {
+  return (
+    <span
+      className={cn(
+        "ph-dot inline-block shrink-0 rounded-full",
+        size === "sm" ? "h-1.5 w-1.5" : "h-2.5 w-2.5",
+        colorMap[color],
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+Dot.displayName = "Dot";

package/src/components/ui/InputGroup.tsx

@@ -0,0 +1,16 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function InputGroup({ children, className, ...props }: InputGroupProps) {
+  return (
+    <div className={cn("ph-input-group", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+InputGroup.displayName = "InputGroup";

package/src/components/ui/Lettermark.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LettermarkProps extends HTMLAttributes<HTMLDivElement> {
+  name?: string | number | null;
+  index?: number;
+  rounded?: boolean;
+  outlined?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+export const Lettermark = forwardRef<HTMLDivElement, LettermarkProps>(function Lettermark({
+  name,
+  index,
+  outlined = false,
+  rounded = false,
+  size = "md",
+  className,
+  ...props
+}, ref) {
+  const letter = name
+    ? typeof name === "number"
+      ? String(Math.floor(name))
+      : String.fromCodePoint(name.codePointAt(0)!).toLocaleUpperCase()
+    : "?";
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-lettermark",
+        `ph-lettermark--${size}`,
+        typeof index === "number" && `ph-lettermark--v-${(index % 8) + 1}`,
+        outlined && "ph-lettermark--outlined",
+        rounded && "ph-lettermark--rounded",
+        letter === "?" && "ph-lettermark--unknown",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {letter}
+    </div>
+  );
+});
+
+Lettermark.displayName = "Lettermark";

package/src/components/ui/Link.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({
+  className,
+  disabled = false,
+  children,
+  ...props
+}, ref) {
+  return (
+    <a
+      ref={ref}
+      className={cn(
+        "ph-link",
+        disabled && "ph-link--disabled pointer-events-none opacity-50",
+        className
+      )}
+      tabIndex={disabled ? -1 : undefined}
+      aria-disabled={disabled || undefined}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});
+
+Link.displayName = "Link";

package/src/components/ui/LoadingBar.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LoadingBarProps extends HTMLAttributes<HTMLDivElement> {
+  active?: boolean;
+}
+
+export function LoadingBar({ active = true, className, ...props }: LoadingBarProps) {
+  return (
+    <div
+      className={cn(
+        "ph-loading-bar",
+        active && "ph-loading-bar--active",
+        className
+      )}
+      role="progressbar"
+      aria-label="Loading"
+      {...props}
+    >
+      <div className="ph-loading-bar__fill" />
+    </div>
+  );
+}
+
+LoadingBar.displayName = "LoadingBar";

package/src/components/ui/Menubar.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface MenubarItem {
+  label: string;
+  items?: { label: string; onClick?: () => void; disabled?: boolean; separator?: boolean }[];
+}
+
+export interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+  items: MenubarItem[];
+}
+
+export function Menubar({ items, className, ...props }: MenubarProps) {
+  const [openIndex, setOpenIndex] = useState(-1);
+  const barRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (openIndex < 0) return;
+    const handle = (e: MouseEvent) => {
+      if (barRef.current && !barRef.current.contains(e.target as Node)) {
+        setOpenIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [openIndex]);
+
+  return (
+    <div ref={barRef} className={cn("ph-menubar", className)} {...props}>
+      {items.map((item, i) => (
+        <div key={i} className="ph-menubar__item">
+          <button
+            type="button"
+            onClick={() => setOpenIndex(openIndex === i ? -1 : i)}
+            className={cn("ph-menubar__trigger", openIndex === i && "ph-menubar__trigger--open")}
+          >
+            {item.label}
+          </button>
+          {openIndex === i && item.items && (
+            <div className="ph-menubar__dropdown">
+              {item.items.map((sub, j) =>
+                sub.separator ? (
+                  <div key={j} className="ph-menubar__separator" />
+                ) : (
+                  <button
+                    key={j}
+                    type="button"
+                    disabled={sub.disabled}
+                    onClick={() => { sub.onClick?.(); setOpenIndex(-1); }}
+                    className="ph-menubar__sub-item"
+                  >
+                    {sub.label}
+                  </button>
+                )
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+Menubar.displayName = "Menubar";

package/src/components/ui/Metric.tsx

@@ -0,0 +1,34 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
+  value: string | number;
+  label: string;
+  badge?: ReactNode;
+  trend?: ReactNode;
+  icon?: ReactNode;
+}
+
+export function Metric({
+  value,
+  label,
+  badge,
+  trend,
+  icon,
+  className,
+  ...props
+}: MetricProps) {
+  return (
+    <div className={cn("ph-metric", className)} {...props}>
+      <div className="ph-metric__header">
+        {icon && <span className="ph-metric__icon">{icon}</span>}
+        <span className="ph-metric__label">{label}</span>
+        {badge && <span className="ph-metric__badge">{badge}</span>}
+      </div>
+      <div className="ph-metric__value">{value}</div>
+      {trend && <div className="ph-metric__trend">{trend}</div>}
+    </div>
+  );
+}
+
+Metric.displayName = "Metric";

package/src/components/ui/NumberField.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+}
+
+export function NumberField({
+  value: controlledValue,
+  onChange,
+  min,
+  max,
+  step = 1,
+  label,
+  className,
+  disabled,
+  defaultValue,
+  ...inputProps
+}: NumberFieldProps) {
+  const [internal, setInternal] = useState(controlledValue ?? 0);
+  const value = controlledValue ?? internal;
+
+  const set = (v: number) => {
+    const clamped = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v));
+    setInternal(clamped);
+    onChange?.(clamped);
+  };
+
+  return (
+    <div className={cn("ph-number-field", className)}>
+      {label && <label className="ph-label">{label}</label>}
+      <div className="ph-number-field__control">
+        <button
+          type="button"
+          disabled={disabled || (min !== undefined && value <= min)}
+          onClick={() => set(value - step)}
+          className="ph-number-field__btn"
+          aria-label="Decrease"
+        >
+          <svg width="12" height="2" viewBox="0 0 12 2" fill="currentColor"><rect y="0" width="12" height="2" rx="1" /></svg>
+        </button>
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => set(Number(e.target.value))}
+          disabled={disabled}
+          min={min}
+          max={max}
+          step={step}
+          className="ph-number-field__input"
+          {...inputProps}
+        />
+        <button
+          type="button"
+          disabled={disabled || (max !== undefined && value >= max)}
+          onClick={() => set(value + step)}
+          className="ph-number-field__btn"
+          aria-label="Increase"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M6 2v8M2 6h8" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+NumberField.displayName = "NumberField";