aura-glass/dist/esm/components/input/GlassFormTable.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import { GlassButton } from '../button/GlassButton.js';

function GlassFormTable({
  columns,
  rows,
  onChange,
  className,
  "data-testid": dataTestId
}) {
  const safeColumns = columns ?? [];
  const safeRows = rows ?? [];
  const update = (ri, key, v) => {
    const next = safeRows.slice();
    next[ri][key] = v;
    onChange(next);
  };
  const add = () => onChange([...safeRows, {}]);
  const remove = ri => onChange(safeRows.filter((_, i) => i !== ri));
  return jsxs("div", {
    "data-glass-component": true,
    className: cn("glass-overflow-auto glass-radius-xl glass-border glass-border-white-15", className),
    "data-testid": dataTestId,
    role: "region",
    "aria-label": "Editable data table",
    children: [jsxs("table", {
      className: cn("glass-w-full glass-text-sm"),
      role: "table",
      "aria-label": "Form data table",
      children: [jsx("thead", {
        className: cn("glass-surface-white-5"),
        children: jsxs("tr", {
          role: "row",
          children: [safeColumns.map(c => jsx("th", {
            role: "columnheader",
            className: cn("glass-text-left glass-px-3 glass-py-2 glass-text-primary-70"),
            children: c.header
          }, String(c.key))), jsx("th", {
            role: "columnheader",
            className: cn("glass-px-3 glass-py-2"),
            "aria-label": "Actions",
            scope: "col",
            children: jsx("span", {
              className: "glass-sr-only",
              children: "Actions"
            })
          })]
        })
      }), jsx("tbody", {
        children: safeRows.map((r, ri) => jsxs("tr", {
          role: "row",
          className: cn("glass-border-t glass-border-white-10"),
          children: [safeColumns.map(c => jsx("td", {
            role: "gridcell",
            className: cn("glass-px-3 glass-py-2"),
            children: jsx("input", {
              className: cn("glass-bg-transparent glass-border glass-border-white-20 glass-radius-md glass-px-2 glass-py-1 glass-w-full glass-focus glass-touch-target glass-contrast-guard"),
              value: r[c.key] ?? "",
              onChange: e => update(ri, c.key, e.target.value),
              "aria-label": `${c.header} for row ${ri + 1}`
            })
          }, String(c.key))), jsx("td", {
            role: "gridcell",
            className: cn("glass-px-3 glass-py-2 glass-text-right"),
            children: jsx(GlassButton, {
              size: "sm",
              variant: "ghost",
              onClick: e => remove(ri),
              "aria-label": `Remove row ${ri + 1}`,
              children: "Remove"
            })
          })]
        }, ri))
      })]
    }), jsx("div", {
      className: cn("glass-p-2"),
      children: jsx(GlassButton, {
        size: "sm",
        variant: "secondary",
        onClick: add,
        "aria-label": "Add new row",
        children: "Add Row"
      })
    })]
  });
}

export { GlassFormTable, GlassFormTable as default };
//# sourceMappingURL=GlassFormTable.js.map