@xenide-io/the-old-ui-theme 0.5.5 → 0.6.1

package/src/components/ui/DataTable.tsx

@@ -1,133 +0,0 @@
-"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

@@ -1,96 +0,0 @@
-"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

@@ -1,75 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/Drawer.tsx

@@ -1,71 +0,0 @@
-import type { ReactNode } from "react";
-import { IconClose } from "@/components/icons";
-import { cn } from "@/lib/cn";
-import { Button } from "@/components/ui/Button";
-
-export type DrawerSide = "left" | "right";
-export type DrawerSize = "sm" | "md" | "lg";
-
-export interface DrawerProps {
-  open?: boolean;
-  onClose?: () => void;
-  title?: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  side?: DrawerSide;
-  size?: DrawerSize;
-  className?: string;
-  showCloseButton?: boolean;
-}
-
-const sideMap: Record<DrawerSide, string> = {
-  left: "left-0 border-r",
-  right: "right-0 border-l",
-};
-
-const sizeMap: Record<DrawerSize, string> = {
-  sm: "w-[min(100%,18rem)]",
-  md: "w-[min(100%,22rem)]",
-  lg: "w-[min(100%,30rem)]",
-};
-
-export function Drawer({
-  open = false,
-  onClose,
-  title,
-  children,
-  footer,
-  side = "right",
-  size = "md",
-  className,
-  showCloseButton = true,
-}: DrawerProps) {
-  if (!open) return null;
-
-  return (
-    <>
-      <div className="fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]" role="presentation" onClick={onClose} />
-      <aside
-        className={cn(
-          "fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
-          sideMap[side],
-          sizeMap[size],
-          className
-        )}
-      >
-        {(title || showCloseButton) && (
-          <header className="flex items-center justify-between border-b border-ph-border px-4 py-3">
-            <span className="text-sm font-bold text-ph-ink">{title}</span>
-            {showCloseButton && onClose && (
-              <Button variant="ghost" className="ph-btn-circle" onClick={onClose} aria-label="Close drawer">
-                <IconClose className="h-5 w-5" />
-              </Button>
-            )}
-          </header>
-        )}
-        <div className="flex-1">{children}</div>
-        {footer && <footer className="border-t border-ph-border px-4 py-3">{footer}</footer>}
-      </aside>
-    </>
-  );
-}

package/src/components/ui/HoverCard.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/cn";
-
-interface HoverCardProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function HoverCard({ trigger, children, className }: HoverCardProps) {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <div
-      className="relative inline-block"
-      onMouseEnter={() => setIsVisible(true)}
-      onMouseLeave={() => setIsVisible(false)}
-    >
-      {trigger}
-      <div
-        className={cn(
-          "absolute left-1/2 top-full z-50 mt-2 w-64 -translate-x-1/2 rounded-lg border border-ph-border bg-ph-surface p-4 shadow-ph-md transition-all duration-150",
-          isVisible
-            ? "visible translate-y-0 opacity-100"
-            : "invisible -translate-y-1 opacity-0",
-          className
-        )}
-      >
-        <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-ph-border bg-ph-surface" />
-        <div className="relative">{children}</div>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/Indicator.tsx

@@ -1,61 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export type IndicatorPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
-
-export interface IndicatorProps extends ComponentPropsWithoutRef<"div"> {
-  /** The element to attach the indicator to */
-  children: ReactNode;
-  /** Badge content (number, text, or "!") */
-  badge?: ReactNode;
-  /** Indicator colour */
-  color?: string;
-  /** Position of the indicator dot */
-  position?: IndicatorPosition;
-  /** Show a simple dot instead of a badge */
-  dot?: boolean;
-  /** Offset from corner (default: 2px) */
-  offset?: number;
-}
-
-const positionMap: Record<IndicatorPosition, string> = {
-  "top-right": "-right-[2px] -top-[2px]",
-  "top-left": "-left-[2px] -top-[2px]",
-  "bottom-right": "-right-[2px] -bottom-[2px]",
-  "bottom-left": "-left-[2px] -bottom-[2px]",
-};
-
-export function Indicator({
-  children,
-  badge,
-  color = "bg-ph-brand",
-  position = "top-right",
-  dot = false,
-  className,
-  ...props
-}: IndicatorProps) {
-  return (
-    <div className={cn("relative inline-flex items-center justify-center", className)} {...props}>
-      {dot ? (
-        <span
-          className={cn(
-            "absolute z-10 h-2.5 w-2.5 rounded-full border-2 border-white",
-            color,
-            positionMap[position],
-          )}
-        />
-      ) : badge != null ? (
-        <span
-          className={cn(
-            "absolute z-10 flex min-h-[22px] min-w-[22px] items-center justify-center rounded-full px-1 text-[11px] font-bold text-white",
-            color,
-            positionMap[position],
-          )}
-        >
-          {badge}
-        </span>
-      ) : null}
-      {children}
-    </div>
-  );
-}

package/src/components/ui/InputGroup.tsx

@@ -1,16 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/LoadingBar.tsx

@@ -1,25 +0,0 @@
-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

@@ -1,66 +0,0 @@
-"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";