@vantageos/mosaic 0.3.0-alpha.1 → 0.3.1

package/dist/react/display.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useState, useEffect } from 'react';
 
 // src/components/display/EmptyState.logic.ts
 var ACTION_VARIANT_CLASSES = {
@@ -23,6 +23,7 @@ function validateEmptyStateProps(raw) {
 
 // src/i18n/strings.ts
 var EN = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
   "ProgressBar.aria.label": "Progress",
   "ProgressBar.error.invalidProps": "ProgressBar: invalid props",
   "ConfirmDialog.button.confirm": "Confirm",
@@ -50,9 +51,71 @@ var EN = {
   "VirtualList.empty.message": "No items to display",
   "VirtualList.error.invalidProps": "VirtualList: invalid props",
   "Skeleton.aria.label": "Loading",
-  "Skeleton.error.invalidProps": "Skeleton: invalid props"
+  "Skeleton.error.invalidProps": "Skeleton: invalid props",
+  // ─── Forms — useMosaicForm ─────────────────────────────────────────────────
+  "useMosaicForm.error.invalidProps": "useMosaicForm: invalid options",
+  // ─── Forms — FormProvider ──────────────────────────────────────────────────
+  "FormProvider.error.invalidProps": "FormProvider: invalid props",
+  // ─── Forms — FormField ────────────────────────────────────────────────────
+  "FormField.error.invalidProps": "FormField: invalid props",
+  // ─── Forms — ErrorDisplay ─────────────────────────────────────────────────
+  "ErrorDisplay.error.required": "This field is required",
+  "ErrorDisplay.error.min": "Value is below the minimum",
+  "ErrorDisplay.error.max": "Value exceeds the maximum",
+  "ErrorDisplay.error.minLength": "Input is too short",
+  "ErrorDisplay.error.maxLength": "Input is too long",
+  "ErrorDisplay.error.pattern": "Invalid format",
+  "ErrorDisplay.error.email": "Enter a valid email address",
+  "ErrorDisplay.error.url": "Enter a valid URL",
+  "ErrorDisplay.error.generic": "Invalid value",
+  // ─── Forms — SubmitButton ─────────────────────────────────────────────────
+  "SubmitButton.aria.submit": "Submit form",
+  "SubmitButton.state.loading": "Submitting\u2026",
+  "SubmitButton.error.invalidProps": "SubmitButton: invalid props",
+  // ─── Forms — Input ────────────────────────────────────────────────────────
+  "Input.aria.label": "Input field",
+  "Input.error.required": "This field is required",
+  "Input.error.invalid": "Invalid value",
+  "Input.error.tooLong": "Input is too long",
+  "Input.error.tooShort": "Input is too short",
+  "Input.error.invalidProps": "Input: invalid props",
+  // ─── Forms — Textarea ─────────────────────────────────────────────────────
+  "Textarea.aria.label": "Text area",
+  "Textarea.error.required": "This field is required",
+  "Textarea.error.tooLong": "Text is too long",
+  "Textarea.counter.remaining": "characters remaining",
+  "Textarea.error.invalidProps": "Textarea: invalid props",
+  // ─── Forms — FieldArray ───────────────────────────────────────────────────
+  "FieldArray.aria.list": "List of items",
+  "FieldArray.aria.addItem": "Add item",
+  "FieldArray.aria.removeItem": "Remove item",
+  "FieldArray.error.invalidProps": "FieldArray: invalid props",
+  // ─── Forms — Checkbox ─────────────────────────────────────────────────────
+  "Checkbox.aria.label": "Checkbox",
+  "Checkbox.error.required": "This field must be checked",
+  "Checkbox.error.invalidProps": "Checkbox: invalid props",
+  // ─── Forms — MultiSelect ──────────────────────────────────────────────────
+  "MultiSelect.aria.label": "Multi-select field",
+  "MultiSelect.aria.removeChip": "Remove",
+  "MultiSelect.error.required": "Select at least one option",
+  "MultiSelect.error.maxItems": "Maximum number of selections reached",
+  "MultiSelect.placeholder": "Select options\u2026",
+  "MultiSelect.search.placeholder": "Search\u2026",
+  "MultiSelect.empty": "No options available",
+  "MultiSelect.error.invalidProps": "MultiSelect: invalid props",
+  // ─── Forms — RadioGroup ───────────────────────────────────────────────────
+  "RadioGroup.aria.label": "Radio group",
+  "RadioGroup.error.required": "Select one option",
+  "RadioGroup.error.invalidProps": "RadioGroup: invalid props",
+  // ─── Forms — Select ───────────────────────────────────────────────────────
+  "Select.placeholder": "Select an option\u2026",
+  "Select.search.placeholder": "Search\u2026",
+  "Select.empty": "No options available",
+  "Select.error.required": "Select an option",
+  "Select.error.invalidProps": "Select: invalid props"
 };
 var FR = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
   "ProgressBar.aria.label": "Progression",
   "ProgressBar.error.invalidProps": "ProgressBar : propri\xE9t\xE9s invalides",
   "ConfirmDialog.button.confirm": "Confirmer",
@@ -80,7 +143,68 @@ var FR = {
   "VirtualList.empty.message": "Aucun \xE9l\xE9ment \xE0 afficher",
   "VirtualList.error.invalidProps": "VirtualList : propri\xE9t\xE9s invalides",
   "Skeleton.aria.label": "Chargement",
-  "Skeleton.error.invalidProps": "Skeleton : propri\xE9t\xE9s invalides"
+  "Skeleton.error.invalidProps": "Skeleton : propri\xE9t\xE9s invalides",
+  // ─── Forms — useMosaicForm ─────────────────────────────────────────────────
+  "useMosaicForm.error.invalidProps": "useMosaicForm : options invalides",
+  // ─── Forms — FormProvider ──────────────────────────────────────────────────
+  "FormProvider.error.invalidProps": "FormProvider : propri\xE9t\xE9s invalides",
+  // ─── Forms — FormField ────────────────────────────────────────────────────
+  "FormField.error.invalidProps": "FormField : propri\xE9t\xE9s invalides",
+  // ─── Forms — ErrorDisplay ─────────────────────────────────────────────────
+  "ErrorDisplay.error.required": "Ce champ est obligatoire",
+  "ErrorDisplay.error.min": "La valeur est inf\xE9rieure au minimum",
+  "ErrorDisplay.error.max": "La valeur d\xE9passe le maximum",
+  "ErrorDisplay.error.minLength": "La saisie est trop courte",
+  "ErrorDisplay.error.maxLength": "La saisie est trop longue",
+  "ErrorDisplay.error.pattern": "Format invalide",
+  "ErrorDisplay.error.email": "Saisissez une adresse e-mail valide",
+  "ErrorDisplay.error.url": "Saisissez une URL valide",
+  "ErrorDisplay.error.generic": "Valeur invalide",
+  // ─── Forms — SubmitButton ─────────────────────────────────────────────────
+  "SubmitButton.aria.submit": "Soumettre le formulaire",
+  "SubmitButton.state.loading": "Envoi en cours\u2026",
+  "SubmitButton.error.invalidProps": "SubmitButton : propri\xE9t\xE9s invalides",
+  // ─── Forms — Input ────────────────────────────────────────────────────────
+  "Input.aria.label": "Champ de saisie",
+  "Input.error.required": "Ce champ est obligatoire",
+  "Input.error.invalid": "Valeur invalide",
+  "Input.error.tooLong": "La saisie est trop longue",
+  "Input.error.tooShort": "La saisie est trop courte",
+  "Input.error.invalidProps": "Input : propri\xE9t\xE9s invalides",
+  // ─── Forms — Textarea ─────────────────────────────────────────────────────
+  "Textarea.aria.label": "Zone de texte",
+  "Textarea.error.required": "Ce champ est obligatoire",
+  "Textarea.error.tooLong": "Le texte est trop long",
+  "Textarea.counter.remaining": "caract\xE8res restants",
+  "Textarea.error.invalidProps": "Textarea : propri\xE9t\xE9s invalides",
+  // ─── Forms — FieldArray ───────────────────────────────────────────────────
+  "FieldArray.aria.list": "Liste d'\xE9l\xE9ments",
+  "FieldArray.aria.addItem": "Ajouter un \xE9l\xE9ment",
+  "FieldArray.aria.removeItem": "Supprimer l'\xE9l\xE9ment",
+  "FieldArray.error.invalidProps": "FieldArray : propri\xE9t\xE9s invalides",
+  // ─── Forms — Checkbox ─────────────────────────────────────────────────────
+  "Checkbox.aria.label": "Case \xE0 cocher",
+  "Checkbox.error.required": "Ce champ doit \xEAtre coch\xE9",
+  "Checkbox.error.invalidProps": "Checkbox : propri\xE9t\xE9s invalides",
+  // ─── Forms — MultiSelect ──────────────────────────────────────────────────
+  "MultiSelect.aria.label": "Champ de s\xE9lection multiple",
+  "MultiSelect.aria.removeChip": "Retirer",
+  "MultiSelect.error.required": "S\xE9lectionnez au moins une option",
+  "MultiSelect.error.maxItems": "Nombre maximum de s\xE9lections atteint",
+  "MultiSelect.placeholder": "S\xE9lectionner des options\u2026",
+  "MultiSelect.search.placeholder": "Rechercher\u2026",
+  "MultiSelect.empty": "Aucune option disponible",
+  "MultiSelect.error.invalidProps": "MultiSelect : propri\xE9t\xE9s invalides",
+  // ─── Forms — RadioGroup ───────────────────────────────────────────────────
+  "RadioGroup.aria.label": "Groupe de boutons radio",
+  "RadioGroup.error.required": "S\xE9lectionnez une option",
+  "RadioGroup.error.invalidProps": "RadioGroup : propri\xE9t\xE9s invalides",
+  // ─── Forms — Select ───────────────────────────────────────────────────────
+  "Select.placeholder": "S\xE9lectionner une option\u2026",
+  "Select.search.placeholder": "Rechercher\u2026",
+  "Select.empty": "Aucune option disponible",
+  "Select.error.required": "S\xE9lectionnez une option",
+  "Select.error.invalidProps": "Select : propri\xE9t\xE9s invalides"
 };
 var TABLE = {
   en: EN,
@@ -359,7 +483,292 @@ function VirtualListInner({
     }
   );
 }
+var StatusBadgePropsSchema = z.object({
+  status: z.string(),
+  variant: z.enum(["success", "warning", "danger", "info", "neutral"]).default("neutral"),
+  label: z.string().optional(),
+  locale: z.enum(["en", "fr"])
+});
+function validateProps(raw) {
+  return StatusBadgePropsSchema.parse(raw);
+}
+var variantClasses = {
+  success: "bg-green-100 text-green-800 ring-1 ring-green-300",
+  warning: "bg-amber-100 text-amber-800 ring-1 ring-amber-300",
+  danger: "bg-red-100 text-red-800 ring-1 ring-red-300",
+  info: "bg-blue-100 text-blue-800 ring-1 ring-blue-300",
+  neutral: "bg-slate-100 text-slate-800 ring-1 ring-slate-300"
+};
+function StatusBadgeInner({ status, variant, label, locale }) {
+  const ariaLabel = label ?? status;
+  return /* @__PURE__ */ jsx(
+    "output",
+    {
+      "aria-label": ariaLabel,
+      lang: locale,
+      className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${variantClasses[variant]}`,
+      children: label ?? status
+    }
+  );
+}
+function StatusBadge(raw) {
+  try {
+    const props = validateProps(raw);
+    return /* @__PURE__ */ jsx(StatusBadgeInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("span", { role: "alert", children: t("StatusBadge.error.invalidProps", locale) });
+  }
+}
+var ColumnDefSchema = z.object({
+  key: z.string().min(1),
+  header: z.string().min(1)
+  // render is a runtime function — excluded from Zod, typed separately
+});
+var TableViewPropsSchema = z.object({
+  columns: z.array(ColumnDefSchema).min(1, "TableView requires at least one column"),
+  virtualizeThreshold: z.number().int().positive().default(100),
+  ariaLabel: z.string().min(1),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateTableViewProps(raw) {
+  return TableViewPropsSchema.parse(raw);
+}
+var OVERSCAN = 5;
+function TableView(props) {
+  let validatedThreshold = 100;
+  try {
+    const validated = validateTableViewProps({
+      columns: props.columns.map(({ key, header }) => ({ key, header })),
+      virtualizeThreshold: props.virtualizeThreshold,
+      ariaLabel: props.ariaLabel,
+      locale: props.locale
+    });
+    validatedThreshold = validated.virtualizeThreshold;
+  } catch {
+    const locale = props.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", locale) });
+  }
+  const isVirtual = props.rows.length > validatedThreshold;
+  const resolvedLocale = props.locale === "fr" ? "fr" : "en";
+  if (isVirtual) {
+    return /* @__PURE__ */ jsx(
+      VirtualTable,
+      {
+        rows: props.rows,
+        columns: props.columns,
+        ariaLabel: props.ariaLabel,
+        locale: resolvedLocale,
+        onRowClick: props.onRowClick
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StaticTable,
+    {
+      rows: props.rows,
+      columns: props.columns,
+      ariaLabel: props.ariaLabel,
+      locale: resolvedLocale,
+      onRowClick: props.onRowClick
+    }
+  );
+}
+function StreamingTableView(props) {
+  let validatedThreshold = 100;
+  try {
+    const validated = validateTableViewProps({
+      columns: props.columns.map(({ key, header }) => ({ key, header })),
+      virtualizeThreshold: props.virtualizeThreshold,
+      ariaLabel: props.ariaLabel,
+      locale: props.locale
+    });
+    validatedThreshold = validated.virtualizeThreshold;
+  } catch {
+    const locale = props.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", locale) });
+  }
+  return /* @__PURE__ */ jsx(
+    StreamingTableViewInner,
+    {
+      ...props,
+      virtualizeThreshold: validatedThreshold,
+      onRowClick: props.onRowClick
+    }
+  );
+}
+function StreamingTableViewInner({
+  columns,
+  rows$,
+  virtualizeThreshold = 100,
+  ariaLabel,
+  locale,
+  onRowClick
+}) {
+  const resolvedLocale = locale === "fr" ? "fr" : "en";
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    setRows([]);
+    const sub = rows$.subscribe((chunk) => {
+      setRows((prev) => [...prev, ...chunk]);
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [rows$]);
+  const isVirtual = rows.length > virtualizeThreshold;
+  if (isVirtual) {
+    return /* @__PURE__ */ jsx(
+      VirtualTable,
+      {
+        rows,
+        columns,
+        ariaLabel,
+        locale: resolvedLocale,
+        onRowClick
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StaticTable,
+    {
+      rows,
+      columns,
+      ariaLabel,
+      locale: resolvedLocale,
+      onRowClick
+    }
+  );
+}
+function renderCell(col, row) {
+  if (col.render) {
+    return col.render(row);
+  }
+  return String(row[col.key] ?? "");
+}
+function StaticTable({
+  rows,
+  columns,
+  ariaLabel,
+  locale,
+  onRowClick
+}) {
+  const emptyMsg = t("TableView.empty.message", locale);
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      "aria-label": ariaLabel,
+      "aria-rowcount": rows.length,
+      style: { width: "100%", borderCollapse: "collapse" },
+      children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, "aria-label": emptyMsg, children: emptyMsg }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            "aria-rowindex": rowIndex + 2,
+            ...onRowClick ? {
+              role: "button",
+              tabIndex: 0,
+              style: { cursor: "pointer" },
+              onClick: () => onRowClick(row, rowIndex),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onRowClick(row, rowIndex);
+                }
+              }
+            } : {},
+            children: columns.map((col) => /* @__PURE__ */ jsx("td", { children: renderCell(col, row) }, col.key))
+          },
+          row.id != null ? String(row.id) : `row-${rowIndex}`
+        )) })
+      ]
+    }
+  );
+}
+function VirtualTable({
+  rows,
+  columns,
+  ariaLabel,
+  // locale reserved for future virtual-mode empty/pagination strings
+  locale: _locale,
+  onRowClick
+}) {
+  const scrollRef = useRef(null);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    /* v8 ignore next 1 */
+    getScrollElement: () => scrollRef.current,
+    estimateSize: useCallback(() => 40, []),
+    overscan: OVERSCAN
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-virtual": "true",
+      ref: scrollRef,
+      tabIndex: 0,
+      role: "region",
+      "aria-label": ariaLabel,
+      style: { height: 400, overflow: "auto", position: "relative" },
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          "aria-label": ariaLabel,
+          "aria-rowcount": rows.length,
+          style: { width: "100%", borderCollapse: "collapse" },
+          children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ jsx(
+              "tbody",
+              {
+                style: {
+                  height: `${totalSize}px`,
+                  position: "relative",
+                  display: "block"
+                },
+                children: virtualItems.map((virtualRow) => {
+                  const row = rows[virtualRow.index] ?? {};
+                  return /* @__PURE__ */ jsx(
+                    "tr",
+                    {
+                      "aria-rowindex": virtualRow.index + 2,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`,
+                        display: "flex",
+                        ...onRowClick ? { cursor: "pointer" } : {}
+                      },
+                      ...onRowClick ? {
+                        role: "button",
+                        tabIndex: 0,
+                        onClick: () => onRowClick(row, virtualRow.index),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            onRowClick(row, virtualRow.index);
+                          }
+                        }
+                      } : {},
+                      children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { flex: 1 }, children: renderCell(col, row) }, col.key))
+                    },
+                    row.id != null ? String(row.id) : `vrow-${virtualRow.index}`
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
-export { EmptyState, EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, VirtualList, VirtualListPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateVirtualListProps };
+export { EmptyState, EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, StatusBadge, StatusBadgePropsSchema, StreamingTableView, TableView, TableViewPropsSchema, VirtualList, VirtualListPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateProps as validateStatusBadgeProps, validateTableViewProps, validateVirtualListProps };
 //# sourceMappingURL=display.js.map
 //# sourceMappingURL=display.js.map