@godxjp/ui 5.0.2 → 6.0.0

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

@@ -0,0 +1,194 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+type CardSize = "default" | "compact";
+/** Semantic 3px left-edge accent stripe. */
+type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
+/** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
+type CardVariant = "default" | "muted" | "outline" | "featured";
+/** Padding density — base 16px · tight 12px · cozy 20px. */
+type CardDensity = "tight" | "cozy";
+
+const cardVariants = cva("group/card border", {
+  variants: {
+    size: {
+      default: "",
+      compact: "",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants> & {
+    size?: CardSize;
+    accent?: CardAccent;
+    variant?: CardVariant;
+    density?: CardDensity;
+  };
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, size = "default", accent, variant, density, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ size }), className)}
+      data-slot="card"
+      data-size={size === "compact" ? "compact" : undefined}
+      data-accent={accent}
+      data-variant={variant && variant !== "default" ? variant : undefined}
+      data-density={density}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+/** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
+export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const CardCover = React.forwardRef<HTMLDivElement, CardCoverProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="card-cover" className={cn("ui-card-cover", className)} {...props} />
+  ),
+);
+CardCover.displayName = "CardCover";
+
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Muted background + border-bottom — section band (mirror footer `separated`). */
+  banded?: boolean;
+};
+
+export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, banded, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      data-banded={banded ? "" : undefined}
+      className={cn(banded && "ui-card-header--banded", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
+  <h3 ref={ref} data-slot="card-title" className={className} {...props}>
+    {children}
+  </h3>
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} data-slot="card-description" className={className} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Edge-to-edge body (tables, tabs list). Horizontal padding removed. */
+  flush?: boolean;
+  /** No gap after header — pair with tabs / flush toolbar. */
+  tight?: boolean;
+  /** No header above — top padding matches card shell. */
+  solo?: boolean;
+};
+
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, flush, tight, solo, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-content"
+      data-flush={flush ? "" : undefined}
+      data-tight={tight ? "" : undefined}
+      data-solo={solo ? "" : undefined}
+      className={className}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Top border + symmetric action band — form Save/Cancel, table summary. */
+  separated?: boolean;
+  /** Full-bleed footer (Ant Design `actions` bar). */
+  flush?: boolean;
+};
+
+export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, separated, flush, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-footer"
+      data-separated={separated ? "" : undefined}
+      data-flush={flush ? "" : undefined}
+      className={className}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export type CardStatProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    hint?: React.ReactNode;
+    /** Optional compact trend text beside the value. Avoid badge-like deltas. */
+    delta?: React.ReactNode;
+    /** KPI layout: stacked = design default, inline = label left / value right. */
+    layout?: "stacked" | "inline";
+    /** Align the metric group. */
+    align?: "start" | "end";
+  };
+
+/** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
+export function CardStat({
+  label,
+  value,
+  hint,
+  delta,
+  layout = "stacked",
+  align = "start",
+  className,
+  size = "compact",
+  ...props
+}: CardStatProps) {
+  return (
+    <Card
+      size={size ?? "compact"}
+      className={className}
+      data-stat-card=""
+      data-stat-layout={layout}
+      data-stat-align={align}
+      {...props}
+    >
+      <div data-slot="card-stat-body">
+        <div data-slot="card-stat-label">{label}</div>
+        {hint && layout === "inline" ? <div data-slot="card-stat-hint">{hint}</div> : null}
+      </div>
+      <div>
+        <div data-slot="card-stat-value-row">
+          <span data-slot="card-stat-value">{value}</span>
+          {delta ? <span data-slot="card-stat-delta">{delta}</span> : null}
+        </div>
+        {hint && layout !== "inline" ? <div data-slot="card-stat-hint">{hint}</div> : null}
+      </div>
+    </Card>
+  );
+}
+
+/** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
+export const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="card-action" className={className} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";

package/src/components/data-display/code-badge.tsx

@@ -0,0 +1,28 @@
+import type { ComponentType, SVGProps } from "react";
+import { Hash, ShoppingBag, Truck } from "lucide-react";
+
+export type CodeBadgeKind = "internal" | "seller" | "yamato";
+
+export type CodeBadgeProps = {
+  kind: CodeBadgeKind;
+  value: string;
+};
+
+const codeBadgeConfig = {
+  internal: { label: "INT", icon: Hash },
+  seller: { label: "SLR", icon: ShoppingBag },
+  yamato: { label: "YMT", icon: Truck },
+} satisfies Record<CodeBadgeKind, { label: string; icon: ComponentType<SVGProps<SVGSVGElement>> }>;
+
+export function CodeBadge({ kind, value }: CodeBadgeProps) {
+  const config = codeBadgeConfig[kind] ?? codeBadgeConfig.internal;
+  const Icon = config.icon;
+
+  return (
+    <span className="ui-code-badge" data-kind={kind}>
+      <span className="ui-code-badge-label">{config.label}</span>
+      <Icon aria-hidden="true" />
+      <span className="ui-code-badge-value">{value}</span>
+    </span>
+  );
+}

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

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+export const Collapsible = CollapsiblePrimitive.Root;
+export const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+export const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

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

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