@godxjp/ui 6.0.0 → 6.0.1

package/src/components/data-display/data-table.tsx

@@ -1,476 +0,0 @@
-// DataTable — compound component for admin lists.
-//
-// Encapsulates: sticky header, density toggle, per-row click navigation, bulk
-// selection, empty/loading states, cursor pagination. Use this everywhere
-// instead of raw <Table> markup.
-//
-// Compound API (drop these as children of <DataTable>):
-//   <DataTable.Toolbar>     — left-aligned status / right-aligned controls
-//   <DataTable.SelectAll>   — header checkbox bound to selection state
-//   <DataTable.BulkActions> — only rendered when count > 0; sits in the toolbar
-//   <DataTable.DensityToggle> — compact ↔ comfortable
-//   <DataTable.Content>     — the actual table body (auto-included when omitted)
-//   <DataTable.Pagination>  — cursor pagination footer
-import * as React from "react";
-import { ArrowDown, ArrowUp, ChevronsUpDown, Layers, Layers2, MoreHorizontal } from "lucide-react";
-
-import { useTranslation } from "../../i18n/use-translation";
-import { Inline } from "../layout/inline";
-import { Button } from "../general/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../data-display/table";
-import { cn } from "../../lib/utils";
-import { densityClass } from "../../lib/variants";
-import {
-  controlIconSmClass,
-  tableCellPaddingClass,
-  tableRowHeightClass,
-} from "../../lib/control-styles";
-import type { ColumnDefProp, TableDensityProp, SortStateProp } from "../../props/vocabulary";
-
-export type Density = TableDensityProp;
-export type ColumnDef<T> = ColumnDefProp<T>;
-
-interface DataTableContextValue<T = unknown> {
-  data: T[];
-  columns: ColumnDef<T>[];
-  density: Density;
-  setDensity: (d: Density) => void;
-  selected: Set<string>;
-  toggleSelect: (id: string) => void;
-  toggleSelectAll: () => void;
-  allSelected: boolean;
-  someSelected: boolean;
-  selectable: boolean;
-  getRowId: (row: T) => string;
-  onRowClick?: (row: T) => void;
-  sort?: SortStateProp;
-  onSortChange?: (sort: SortStateProp | undefined) => void;
-}
-
-const DataTableContext = React.createContext<DataTableContextValue | null>(null);
-
-function useDataTableContext<T>() {
-  const ctx = React.useContext(DataTableContext);
-  if (!ctx) throw new Error("DataTable subcomponents must be used inside <DataTable>");
-  return ctx as unknown as DataTableContextValue<T>;
-}
-
-function useOptionalDataTableContext<T>() {
-  return React.useContext(DataTableContext) as unknown as DataTableContextValue<T> | null;
-}
-
-interface DataTableProps<T> {
-  data: T[];
-  columns: ColumnDef<T>[];
-  /** Required when `selectable` is true. Default: assume row.id (typed as any). */
-  getRowId?: (row: T) => string;
-  selectable?: boolean;
-  selected?: Set<string>;
-  onSelectChange?: (next: Set<string>) => void;
-  onRowClick?: (row: T) => void;
-  density?: Density;
-  onDensityChange?: (d: Density) => void;
-  sort?: SortStateProp;
-  onSortChange?: (sort: SortStateProp | undefined) => void;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const noopGetRowId = <T,>(row: T): string => {
-  const id = (row as { id?: unknown }).id;
-  if (typeof id === "string") return id;
-  if (typeof id === "number") return String(id);
-  return "";
-};
-
-export function DataTable<T>({
-  data,
-  columns,
-  getRowId = noopGetRowId,
-  selectable = false,
-  selected: controlledSelected,
-  onSelectChange,
-  onRowClick,
-  density: controlledDensity,
-  onDensityChange,
-  sort,
-  onSortChange,
-  className,
-  children,
-}: DataTableProps<T>) {
-  const [internalDensity, setInternalDensity] = React.useState<Density>("compact");
-  const density = controlledDensity ?? internalDensity;
-  const setDensity = (d: Density) => {
-    setInternalDensity(d);
-    onDensityChange?.(d);
-  };
-
-  const [internalSelected, setInternalSelected] = React.useState<Set<string>>(new Set());
-  const selected = controlledSelected ?? internalSelected;
-  const setSelected = (next: Set<string>) => {
-    setInternalSelected(next);
-    onSelectChange?.(next);
-  };
-
-  const toggleSelect = (id: string) => {
-    const next = new Set(selected);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    setSelected(next);
-  };
-  const allSelected = data.length > 0 && data.every((r) => selected.has(getRowId(r)));
-  const someSelected = !allSelected && data.some((r) => selected.has(getRowId(r)));
-  const toggleSelectAll = () => {
-    if (allSelected) setSelected(new Set());
-    else setSelected(new Set(data.map(getRowId)));
-  };
-
-  const ctx: DataTableContextValue<T> = {
-    data,
-    columns,
-    density,
-    setDensity,
-    selected,
-    toggleSelect,
-    toggleSelectAll,
-    allSelected,
-    someSelected,
-    selectable,
-    getRowId,
-    onRowClick,
-    sort,
-    onSortChange,
-  };
-
-  // Determine if children include a Content slot — if not, render default.
-  const hasContent = React.Children.toArray(children).some(
-    (c) =>
-      React.isValidElement(c) &&
-      (c.type as { displayName?: string }).displayName === "DataTable.Content",
-  );
-
-  return (
-    <DataTableContext.Provider value={ctx as DataTableContextValue}>
-      <div
-        className={cn(
-          "ui-data-table-root",
-          densityClass[density === "compact" ? "compact" : "comfortable"],
-          className,
-        )}
-      >
-        {children}
-        {!hasContent && <DataTable.Content />}
-      </div>
-    </DataTableContext.Provider>
-  );
-}
-
-// ── Toolbar ────────────────────────────────────────────────────────────
-
-DataTable.Toolbar = function DataTableToolbar({
-  children,
-  className,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("ui-data-table-toolbar", className)}>{children}</div>;
-};
-(DataTable.Toolbar as React.FC).displayName = "DataTable.Toolbar";
-
-// ── SelectAll header checkbox ──────────────────────────────────────────
-
-DataTable.SelectAll = function DataTableSelectAll() {
-  const { allSelected, someSelected, toggleSelectAll, selectable } = useDataTableContext();
-  const { t } = useTranslation();
-  if (!selectable) return null;
-  return (
-    <input
-      type="checkbox"
-      checked={allSelected}
-      ref={(el) => {
-        if (el) el.indeterminate = someSelected;
-      }}
-      onChange={toggleSelectAll}
-      aria-label={t("dataTable.selectAll")}
-    />
-  );
-};
-(DataTable.SelectAll as React.FC).displayName = "DataTable.SelectAll";
-
-// ── BulkActions — visible when selection > 0 ───────────────────────────
-
-interface BulkActionsProps {
-  count?: number;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-DataTable.BulkActions = function DataTableBulkActions({
-  count,
-  children,
-  className,
-}: BulkActionsProps) {
-  const ctx = useOptionalDataTableContext();
-  const { t } = useTranslation();
-  const c = count ?? ctx?.selected.size ?? 0;
-  if (c === 0) return null;
-  return (
-    <div
-      role="region"
-      aria-label={t("dataTable.bulkActions")}
-      className={cn("ui-data-table-bulk", className)}
-    >
-      <span className="text-muted-foreground">
-        <strong className="text-foreground">{t("common.selectedCount", { count: c })}</strong>
-      </span>
-      <div className="ui-data-table-bulk-actions">{children}</div>
-    </div>
-  );
-};
-(DataTable.BulkActions as React.FC).displayName = "DataTable.BulkActions";
-
-// ── Density toggle ────────────────────────────────────────────────────
-
-DataTable.DensityToggle = function DataTableDensityToggle() {
-  const { density, setDensity } = useDataTableContext();
-  const { t } = useTranslation();
-  const next: Density = density === "compact" ? "comfortable" : "compact";
-  const Icon = density === "compact" ? Layers : Layers2;
-  const nextLabel =
-    next === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable");
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={() => {
-        setDensity(next);
-      }}
-      aria-label={t("dataTable.densitySwitch", { density: nextLabel })}
-    >
-      <Inline gap="xs">
-        <Icon className="size-4" aria-hidden="true" />
-        {density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")}
-      </Inline>
-    </Button>
-  );
-};
-(DataTable.DensityToggle as React.FC).displayName = "DataTable.DensityToggle";
-
-// ── Content (the actual table) ─────────────────────────────────────────
-
-DataTable.Content = function DataTableContent() {
-  const {
-    data,
-    columns,
-    density: _density,
-    selectable,
-    selected,
-    toggleSelect,
-    getRowId,
-    onRowClick,
-    sort,
-    onSortChange,
-  } = useDataTableContext();
-  const { t } = useTranslation();
-
-  const rowPadding = tableRowHeightClass;
-  const cellPadding = tableCellPaddingClass;
-
-  const onHeaderClick = (col: ColumnDef<unknown>) => {
-    if (!col.sortable || !onSortChange) return;
-    if (sort?.key !== col.key) {
-      onSortChange({ key: col.key, direction: "asc" });
-    } else if (sort.direction === "asc") {
-      onSortChange({ key: col.key, direction: "desc" });
-    } else {
-      onSortChange(undefined);
-    }
-  };
-
-  return (
-    <div className="ui-data-table-scroll">
-      <div className="ui-data-table-surface min-w-[640px] sm:min-w-0">
-        <Table>
-          <TableHeader className="bg-secondary sticky top-0 z-10">
-            <TableRow>
-              {selectable && (
-                <TableHead className="w-10">
-                  <DataTable.SelectAll />
-                </TableHead>
-              )}
-              {columns.map((col) => (
-                <TableHead
-                  key={col.key}
-                  className={cn(
-                    col.width,
-                    col.align === "right" && "text-right",
-                    col.align === "center" && "text-center",
-                    col.sortable && onSortChange && "cursor-pointer select-none",
-                  )}
-                  onClick={() => {
-                    onHeaderClick(col);
-                  }}
-                >
-                  <span className="ui-data-table-sort-label">
-                    {col.header}
-                    {col.sortable &&
-                      onSortChange &&
-                      (sort?.key === col.key ? (
-                        sort.direction === "asc" ? (
-                          <ArrowUp className="size-3" aria-hidden="true" />
-                        ) : (
-                          <ArrowDown className="size-3" aria-hidden="true" />
-                        )
-                      ) : (
-                        <ChevronsUpDown
-                          className="text-muted-foreground size-3"
-                          aria-hidden="true"
-                        />
-                      ))}
-                  </span>
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {data.map((row) => {
-              const id = getRowId(row);
-              const isSelected = selected.has(id);
-              return (
-                <TableRow
-                  key={id}
-                  data-state={isSelected ? "selected" : undefined}
-                  onClick={(e) => {
-                    // Don't trigger row click if user clicked on an interactive child.
-                    const target = e.target as HTMLElement;
-                    if (target.closest("button, a, input, select, textarea, [role=menuitem]"))
-                      return;
-                    onRowClick?.(row);
-                  }}
-                  className={cn(
-                    rowPadding,
-                    onRowClick && "hover:bg-muted/50 cursor-pointer",
-                    isSelected && "bg-muted/30",
-                  )}
-                >
-                  {selectable && (
-                    <TableCell className={cellPadding}>
-                      <input
-                        type="checkbox"
-                        checked={isSelected}
-                        onChange={() => {
-                          toggleSelect(id);
-                        }}
-                        aria-label={t("dataTable.selectRow", { id })}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                        }}
-                      />
-                    </TableCell>
-                  )}
-                  {columns.map((col) => (
-                    <TableCell
-                      key={col.key}
-                      className={cn(
-                        cellPadding,
-                        col.width,
-                        col.align === "right" && "text-right",
-                        col.align === "center" && "text-center",
-                      )}
-                    >
-                      {col.render
-                        ? col.render(row)
-                        : (() => {
-                            const v = (row as Record<string, unknown>)[col.key];
-                            if (v == null) return "—";
-                            if (typeof v === "string" || typeof v === "number") return String(v);
-                            return "—";
-                          })()}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  );
-};
-(DataTable.Content as React.FC).displayName = "DataTable.Content";
-
-// ── Pagination ─────────────────────────────────────────────────────────
-
-interface PaginationProps {
-  cursor?: string;
-  hasMore: boolean;
-  onChange: (cursor: string | undefined) => void;
-  className?: string;
-}
-
-DataTable.Pagination = function DataTablePagination({
-  cursor,
-  hasMore,
-  onChange,
-  className,
-}: PaginationProps) {
-  const { t } = useTranslation();
-  return (
-    <div className={cn("ui-data-table-pagination", className)}>
-      <Button
-        variant="outline"
-        size="sm"
-        disabled={!cursor}
-        onClick={() => {
-          onChange(undefined);
-        }}
-      >
-        {t("common.first")}
-      </Button>
-      <Button
-        variant="outline"
-        size="sm"
-        disabled={!hasMore}
-        onClick={() => {
-          onChange(cursor);
-        }}
-      >
-        {t("common.next")}
-      </Button>
-    </div>
-  );
-};
-(DataTable.Pagination as React.FC).displayName = "DataTable.Pagination";
-
-// ── More-actions dropdown trigger (kebab) ──────────────────────────────
-
-interface RowActionsProps {
-  ariaLabel?: string;
-  children: React.ReactNode;
-}
-
-/** Kebab menu trigger for per-row actions. Wrap children in a DropdownMenu in
- * the consumer — this is just the trigger button shape. */
-DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }: RowActionsProps) {
-  const { t } = useTranslation();
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      aria-label={ariaLabel ?? t("dataTable.rowActions")}
-      className={controlIconSmClass}
-    >
-      <MoreHorizontal className="size-4" aria-hidden="true" />
-      {children}
-    </Button>
-  );
-};
-(DataTable.RowActions as React.FC).displayName = "DataTable.RowActions";

package/src/components/data-display/empty-state.tsx

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/utils";
-import type { EmptyStateProp } from "../../props/components/data-display.prop";
-
-export type {
-  EmptyStateProp,
-  EmptyStateProp as EmptyStateProps,
-} from "../../props/components/data-display.prop";
-
-export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProp) {
-  return (
-    <div data-slot="empty-state" className={cn("ui-empty-state", className)}>
-      {Icon && (
-        <div className="ui-empty-state-icon">
-          <Icon className="text-muted-foreground size-6" aria-hidden="true" />
-        </div>
-      )}
-      <h3 className="ui-empty-state-title">{title}</h3>
-      {description && <p className="ui-empty-state-description">{description}</p>}
-      {action && <div>{action}</div>}
-    </div>
-  );
-}

package/src/components/data-display/index.ts

@@ -1,41 +0,0 @@
-export { Badge } from "./badge";
-export type { BadgeProps } from "./badge";
-export {
-  Card,
-  CardContent,
-  CardCover,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  CardAction,
-  CardStat,
-} from "./card";
-export type { CardStatProps } from "./card";
-export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
-export { KeyValueGrid } from "./key-value-grid";
-export { StatusBadge } from "./status-badge";
-export { DataTable } from "./data-table";
-export type { ColumnDef, Density as TableDensity } from "./data-table";
-export { EmptyState } from "./empty-state";
-export { CodeBadge } from "./code-badge";
-export type { CodeBadgeKind, CodeBadgeProps } from "./code-badge";
-export { ProgressMeter } from "./progress-meter";
-export type { ProgressMeterProps, ProgressMeterTone } from "./progress-meter";
-export { TreeList } from "./tree-list";
-export type { TreeListItem, TreeListProps } from "./tree-list";
-export { Timeline } from "./timeline";
-export type { TimelineItem, TimelineProps } from "./timeline";
-export { ScanPanel } from "./scan-panel";
-export type { ScanPanelProps } from "./scan-panel";
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "./popover";
-export { ScrollArea, ScrollBar } from "./scroll-area";
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";

package/src/components/data-display/key-value-grid.tsx

@@ -1,46 +0,0 @@
-// KeyValueGrid — for detail-page metadata. Replaces hand-rolled <dl><dt><dd> layouts.
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-interface KeyValueGridProps {
-  columns?: 1 | 2 | 3;
-  className?: string;
-  children: React.ReactNode;
-}
-
-export function KeyValueGrid({ columns = 2, className, children }: KeyValueGridProps) {
-  const colsClass =
-    columns === 1
-      ? "grid-cols-1"
-      : columns === 3
-        ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
-        : "grid-cols-1 sm:grid-cols-2";
-  return <dl className={cn("grid gap-x-6 gap-y-3", colsClass, className)}>{children}</dl>;
-}
-
-interface KeyValueGridItemProps {
-  label: React.ReactNode;
-  /** Use mono spacing for IDs, paths, JSON. */
-  mono?: boolean;
-  /** Span full row(s) when value is long. */
-  span?: 2 | 3;
-  className?: string;
-  children: React.ReactNode;
-}
-
-KeyValueGrid.Item = function KeyValueGridItem({
-  label,
-  mono,
-  span,
-  className,
-  children,
-}: KeyValueGridItemProps) {
-  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
-  return (
-    <div className={cn(spanClass, className)}>
-      <dt className="text-muted-foreground text-xs">{label}</dt>
-      <dd className={cn("text-sm break-all", mono && "font-mono")}>{children}</dd>
-    </div>
-  );
-};

package/src/components/data-display/popover.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from "../../lib/utils";
-
-export function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-export function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-export function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-export const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      data-slot="popover-content"
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    data-slot="popover-header"
-    className={cn("flex flex-col gap-1 text-sm", className)}
-    {...props}
-  />
-);
-
-export const PopoverTitle = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div data-slot="popover-title" className={cn("font-medium", className)} {...props} />
-);
-
-export const PopoverDescription = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) => (
-  <p
-    data-slot="popover-description"
-    className={cn("text-muted-foreground", className)}
-    {...props}
-  />
-);

package/src/components/data-display/progress-meter.tsx

@@ -1,20 +0,0 @@
-export type ProgressMeterTone = "success" | "warning";
-
-export type ProgressMeterProps = {
-  value: number;
-  label?: string;
-  tone?: ProgressMeterTone;
-};
-
-export function ProgressMeter({ value, label, tone = "success" }: ProgressMeterProps) {
-  const boundedValue = Math.max(0, Math.min(100, value));
-
-  return (
-    <div className="ui-progress-meter" data-tone={tone}>
-      <div className="ui-progress-track">
-        <div className="ui-progress-bar" style={{ width: `${boundedValue}%` }} />
-      </div>
-      {label ? <div className="ui-progress-label">{label}</div> : null}
-    </div>
-  );
-}

package/src/components/data-display/scan-panel.tsx

@@ -1,16 +0,0 @@
-import { ScanLine } from "lucide-react";
-
-export type ScanPanelProps = {
-  title: string;
-  description?: string;
-};
-
-export function ScanPanel({ title, description }: ScanPanelProps) {
-  return (
-    <div className="ui-scan-panel">
-      <ScanLine aria-hidden="true" />
-      <div className="ui-scan-title">{title}</div>
-      {description ? <div className="ui-scan-description">{description}</div> : null}
-    </div>
-  );
-}