@pglevy/sailwind 0.4.0 → 0.5.0

package/dist/components/ReadOnlyGrid/GridColumn.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { SAILAlign, SAILGridColumnWidth } from '../../types/sail';
+/**
+ * Props for the GridColumn component.
+ * GridColumn is a configuration-only component — it renders nothing.
+ * ReadOnlyGrid reads these props from its children to define column behavior.
+ */
+export interface GridColumnProps {
+    /** Text to display as the column header */
+    label?: string;
+    /** Field name used for sorting when this column header is clicked */
+    sortField?: string;
+    /**
+     * Display value for each cell. Can be:
+     * - A string field name to look up on each row object
+     * - A function (row: any, index: number) => React.ReactNode
+     */
+    value?: string | ((row: any, index: number) => React.ReactNode);
+    /** Alignment for header and cell content */
+    align?: SAILAlign;
+    /** Column width */
+    width?: SAILGridColumnWidth;
+    /** Background color for cells — hex color or semantic name */
+    backgroundColor?: string | ((row: any) => string);
+    /** Whether this column is visible. Defaults to true. */
+    showWhen?: boolean;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+}
+/**
+ * GridColumn is a declarative, configuration-only component.
+ * It renders nothing — ReadOnlyGrid reads its props to determine column behavior.
+ */
+export declare const GridColumn: React.FC<GridColumnProps>;
+//# sourceMappingURL=GridColumn.d.ts.map

package/dist/components/ReadOnlyGrid/GridColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumn.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/GridColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAChE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;IAClD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAc,CAAC"}

package/dist/components/ReadOnlyGrid/GridColumn.js

@@ -0,0 +1,5 @@
+import "react";
+const l = () => null;
+export {
+  l as GridColumn
+};

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { SAILLabelPosition, SAILMarginSize, SAILGridHeight, SortInfo } from '../../types/sail';
+export interface ReadOnlyGridProps {
+    /** Text to display as the grid label */
+    label?: string;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Supplemental text about this grid */
+    instructions?: string;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Text to display when no data is available */
+    emptyGridMessage?: string;
+    /** The data array to display */
+    data?: Record<string, any>[];
+    /** GridColumn children defining the columns */
+    children?: React.ReactNode;
+    /** Maximum rows per page. Default: 10 */
+    pageSize?: number;
+    /** Initial sort configurations */
+    initialSorts?: SortInfo[];
+    /** Whether rows are selectable */
+    selectable?: boolean;
+    /** Selection visual style */
+    selectionStyle?: "CHECKBOX" | "ROW_HIGHLIGHT";
+    /** Currently selected row identifiers */
+    selectionValue?: (string | number)[];
+    /** Callback when selection changes */
+    selectionSaveInto?: (selectedIds: (string | number)[]) => void;
+    /** Validation messages to display below the grid */
+    validations?: string[];
+    /** Whether the component is displayed */
+    showWhen?: boolean;
+    /** Cell spacing */
+    spacing?: "STANDARD" | "DENSE";
+    /** Grid height */
+    height?: SAILGridHeight;
+    /** Border style */
+    borderStyle?: "STANDARD" | "LIGHT";
+    /** Whether to shade alternate rows */
+    shadeAlternateRows?: boolean;
+    /** Index of column to use as row header for accessibility */
+    rowHeader?: number;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Space above component */
+    marginAbove?: SAILMarginSize;
+    /** Space below component */
+    marginBelow?: SAILMarginSize;
+}
+export declare const ReadOnlyGrid: React.FC<ReadOnlyGridProps>;
+//# sourceMappingURL=ReadOnlyGrid.d.ts.map

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyGrid.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/ReadOnlyGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IAC9C,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACrC,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,kBAAkB;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACnC,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;AAuGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2WpD,CAAC"}

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.js

@@ -0,0 +1,277 @@
+import { jsx as t, jsxs as h, Fragment as we } from "react/jsx-runtime";
+import o from "react";
+import { ChevronsLeft as Re, ChevronLeft as $e, ChevronRight as ve, ChevronsRight as Ee, MoveUp as Le, MoveDown as Se } from "lucide-react";
+import { FieldWrapper as Ae } from "../shared/FieldWrapper.js";
+import { GridColumn as Oe } from "./GridColumn.js";
+function Te(n) {
+  const i = [];
+  return o.Children.forEach(n, (l) => {
+    o.isValidElement(l) && l.type === Oe && i.push(l.props);
+  }), i;
+}
+function Me(n, i, l) {
+  if (n == null)
+    return null;
+  if (typeof n == "string")
+    return i[n] ?? null;
+  if (typeof n == "function")
+    try {
+      return n(i, l);
+    } catch (S) {
+      return console.warn("GridColumn value accessor threw an error:", S), null;
+    }
+  return null;
+}
+function He(n, i) {
+  if (!n) return {};
+  const l = typeof n == "function" ? n(i) : n;
+  return !l || l === "NONE" ? {} : I[l] !== void 0 ? I[l] ? { className: I[l] } : {} : l.startsWith("#") ? { style: { backgroundColor: l } } : {};
+}
+const Ue = {
+  SHORT: "max-h-40",
+  SHORT_PLUS: "max-h-52",
+  MEDIUM: "max-h-64",
+  MEDIUM_PLUS: "max-h-80",
+  TALL: "max-h-96",
+  TALL_PLUS: "max-h-[28rem]",
+  EXTRA_TALL: "max-h-[36rem]",
+  AUTO: ""
+}, se = {
+  AUTO: "",
+  ICON: "w-10",
+  ICON_PLUS: "w-14",
+  NARROW: "w-24",
+  NARROW_PLUS: "w-32",
+  MEDIUM: "w-40",
+  MEDIUM_PLUS: "w-48",
+  WIDE: "w-64",
+  "1X": "flex-1",
+  "2X": "flex-[2]",
+  "3X": "flex-[3]",
+  "4X": "flex-[4]",
+  "5X": "flex-[5]",
+  "6X": "flex-[6]",
+  "7X": "flex-[7]",
+  "8X": "flex-[8]",
+  "9X": "flex-[9]",
+  "10X": "flex-[10]"
+}, ne = {
+  START: "text-left",
+  CENTER: "text-center",
+  END: "text-right"
+}, I = {
+  NONE: "",
+  ACCENT: "bg-blue-50",
+  SUCCESS: "bg-green-50",
+  INFO: "bg-sky-50",
+  WARN: "bg-yellow-50",
+  ERROR: "bg-red-50"
+}, We = ({
+  label: n,
+  labelPosition: i,
+  instructions: l,
+  helpTooltip: S,
+  emptyGridMessage: le = "No items available",
+  data: X,
+  children: ae,
+  pageSize: D = 10,
+  initialSorts: x,
+  selectable: d,
+  selectionStyle: m = "CHECKBOX",
+  selectionValue: g = [],
+  selectionSaveInto: b,
+  validations: A,
+  showWhen: oe = !0,
+  borderStyle: ie = "LIGHT",
+  shadeAlternateRows: de = !1,
+  spacing: ce = "STANDARD",
+  height: k = "AUTO",
+  accessibilityText: F,
+  marginAbove: ue,
+  marginBelow: he
+}) => {
+  const ge = o.useId(), O = D > 0 ? D : 10, C = Array.isArray(X) ? X : [], [T, f] = o.useState(1), [p, W] = o.useState(null), [c, M] = o.useState(!0);
+  o.useEffect(() => {
+    x && x.length > 0 && (W(x[0].field), M(x[0].ascending));
+  }, []), o.useEffect(() => {
+    f(1);
+  }, [C.length]);
+  const pe = (e) => {
+    p === e ? M((r) => !r) : (W(e), M(!0)), f(1);
+  }, H = o.useMemo(
+    () => C.map((e, r) => ({ ...e, __originalIndex: r })),
+    [C]
+  ), y = o.useMemo(() => p ? [...H].sort((e, r) => {
+    const s = e[p], a = r[p];
+    return s == null && a == null ? 0 : s == null ? c ? -1 : 1 : a == null ? c ? 1 : -1 : typeof s == "string" && typeof a == "string" ? c ? s.localeCompare(a) : a.localeCompare(s) : s < a ? c ? -1 : 1 : s > a ? c ? 1 : -1 : 0;
+  }) : H, [H, p, c]);
+  if (!oe)
+    return null;
+  const N = Te(ae).filter((e) => e.showWhen !== !1), w = ie === "STANDARD", fe = w ? "border border-gray-300" : "", me = w ? "border-b border-gray-300" : "border-b border-gray-200", be = w ? "border-b border-gray-300" : "border-b border-gray-200", u = w ? "border-r border-gray-300" : "", R = ce === "DENSE" ? "px-2 py-1" : "px-3 py-2", G = Ue[k] || "", z = k !== "AUTO" && G !== "", U = Math.ceil(y.length / O), $ = (T - 1) * O, B = Math.min($ + O, y.length), j = T > 1, K = T < U, q = y.slice($, B), J = (e) => e.id !== void 0 ? e.id : e.__originalIndex, Q = (e) => {
+    if (!b) return;
+    const s = g.includes(e) ? g.filter((a) => a !== e) : [...g, e];
+    b(s);
+  }, v = d ? q.map((e) => J(e)) : [], Y = d && v.length > 0 && v.every((e) => g.includes(e)), xe = () => {
+    if (b)
+      if (Y)
+        b(g.filter((e) => !v.includes(e)));
+      else {
+        const e = [...g];
+        v.forEach((r) => {
+          e.includes(r) || e.push(r);
+        }), b(e);
+      }
+  }, Ce = A && A.length > 0 ? /* @__PURE__ */ t("div", { children: A.map((e, r) => /* @__PURE__ */ t("p", { className: "text-red-600 text-sm mt-1", children: e }, r)) }) : void 0, Z = (e) => e.width && se[e.width] ? se[e.width] : "", V = (e) => e.align && ne[e.align] ? ne[e.align] : "text-left", ee = () => /* @__PURE__ */ h(
+    "table",
+    {
+      className: `w-full border-collapse ${fe}`,
+      "aria-label": F,
+      children: [
+        /* @__PURE__ */ t("thead", { className: z ? "sticky top-0 bg-white z-10" : void 0, children: /* @__PURE__ */ h("tr", { className: me, children: [
+          d && m === "CHECKBOX" && /* @__PURE__ */ t("th", { className: `${R} w-10${u ? ` ${u}` : ""}`, children: /* @__PURE__ */ t(
+            "input",
+            {
+              type: "checkbox",
+              checked: Y,
+              onChange: xe,
+              "aria-label": "Select all rows"
+            }
+          ) }),
+          N.map((e, r) => {
+            const s = Z(e), a = V(e), E = !(r === N.length - 1) && u ? ` ${u}` : "";
+            return /* @__PURE__ */ t(
+              "th",
+              {
+                className: `${R} ${a} text-sm font-semibold text-base${s ? ` ${s}` : ""}${E}`,
+                "aria-sort": p === e.sortField ? c ? "ascending" : "descending" : void 0,
+                children: e.sortField ? /* @__PURE__ */ h(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => pe(e.sortField),
+                    className: "flex items-center gap-1 hover:text-gray-900 cursor-pointer",
+                    children: [
+                      e.label ?? "",
+                      p === e.sortField && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: c ? /* @__PURE__ */ t(Le, { size: 14 }) : /* @__PURE__ */ t(Se, { size: 14 }) })
+                    ]
+                  }
+                ) : e.label ?? ""
+              },
+              r
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ t("tbody", { children: q.map((e, r) => {
+          const s = J(e), a = d && g.includes(s), _ = d && m === "ROW_HIGHLIGHT" && a, E = de && r % 2 === 0 && !_ ? "bg-gray-50" : "";
+          return /* @__PURE__ */ h(
+            "tr",
+            {
+              className: `${be}${d && m === "ROW_HIGHLIGHT" ? " cursor-pointer" : ""}${_ ? " bg-blue-50" : ""}${E ? ` ${E}` : ""}`,
+              onClick: d && m === "ROW_HIGHLIGHT" ? () => Q(s) : void 0,
+              children: [
+                d && m === "CHECKBOX" && /* @__PURE__ */ t("td", { className: `${R} w-10${u ? ` ${u}` : ""}`, children: /* @__PURE__ */ t(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: a || !1,
+                    onChange: () => Q(s),
+                    "aria-label": `Select row ${r + 1}`
+                  }
+                ) }),
+                N.map((L, te) => {
+                  const re = Z(L), ye = V(L), P = He(L.backgroundColor, e), Ne = !(te === N.length - 1) && u ? ` ${u}` : "";
+                  return /* @__PURE__ */ t(
+                    "td",
+                    {
+                      className: `${R} ${ye} text-sm text-gray-900${re ? ` ${re}` : ""}${P.className ? ` ${P.className}` : ""}${Ne}`,
+                      style: P.style,
+                      children: Me(L.value, e, $ + r)
+                    },
+                    te
+                  );
+                })
+              ]
+            },
+            r
+          );
+        }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(
+    Ae,
+    {
+      label: n,
+      labelPosition: i,
+      instructions: l,
+      helpTooltip: S,
+      accessibilityText: F,
+      inputId: ge,
+      marginAbove: ue,
+      marginBelow: he,
+      footer: Ce,
+      children: C.length === 0 ? /* @__PURE__ */ t("div", { className: "text-gray-500 py-4 text-center", children: le }) : /* @__PURE__ */ h(we, { children: [
+        z ? /* @__PURE__ */ t("div", { className: `${G} overflow-y-auto`, children: ee() }) : ee(),
+        U > 1 && /* @__PURE__ */ h("div", { className: "flex items-center justify-end gap-2 px-3 py-2 text-sm text-gray-700", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f(1),
+              disabled: !j,
+              "aria-label": "First page",
+              title: "First page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(Re, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f((e) => e - 1),
+              disabled: !j,
+              "aria-label": "Previous page",
+              title: "Previous page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t($e, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ h("span", { children: [
+            /* @__PURE__ */ h("span", { className: "font-bold", children: [
+              $ + 1,
+              " – ",
+              B
+            ] }),
+            " ",
+            "of ",
+            y.length
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f((e) => e + 1),
+              disabled: !K,
+              "aria-label": "Next page",
+              title: "Next page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(ve, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f(U),
+              disabled: !K,
+              "aria-label": "Last page",
+              title: "Last page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(Ee, { size: 18 })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  We as ReadOnlyGrid
+};

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: React.FC<import('./ReadOnlyGrid').ReadOnlyGridProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 1. Default — Basic grid with employee data */
+export declare const Default: Story;
+/** 2. EmptyState — Empty data with custom message */
+export declare const EmptyState: Story;
+/** 3. WithPaging — Full dataset with pageSize=5 showing paging controls */
+export declare const WithPaging: Story;
+/** 4. WithSorting — Sortable columns with initial sort on salary descending */
+export declare const WithSorting: Story;
+/** 5. WithCheckboxSelection — Selectable grid with checkbox style */
+export declare const WithCheckboxSelection: Story;
+/** 6. WithRowHighlightSelection — ROW_HIGHLIGHT selection style */
+export declare const WithRowHighlightSelection: Story;
+/** 7. StyledGrid — borderStyle, shadeAlternateRows, dense spacing */
+export declare const StyledGrid: Story;
+/** 8. FixedHeight — MEDIUM height to show scrolling behavior */
+export declare const FixedHeight: Story;
+/** 9. WithLabelAndValidations — label, instructions, validations, helpTooltip */
+export declare const WithLabelAndValidations: Story;
+/** 10. ColumnWidthsAndAlignment — Various column widths and alignments */
+export declare const ColumnWidthsAndAlignment: Story;
+/** 11. FunctionAccessor — Using function value accessors for computed columns */
+export declare const FunctionAccessor: Story;
+//# sourceMappingURL=ReadOnlyGrid.stories.d.ts.map

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/ReadOnlyGrid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAmB3D,QAAA,MAAM,IAAI;;;;;;;CAK2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,UAAU,EAAE,KASxB,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,qBAAqB,EAAE,KAgBnC,CAAA;AAED,mEAAmE;AACnE,eAAO,MAAM,yBAAyB,EAAE,KAiBvC,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,EAAE,KAcrC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,EAAE,KAStC,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,KAwB9B,CAAA"}

package/dist/components/ReadOnlyGrid/index.d.ts

@@ -0,0 +1,5 @@
+export { ReadOnlyGrid } from './ReadOnlyGrid';
+export type { ReadOnlyGridProps } from './ReadOnlyGrid';
+export { GridColumn } from './GridColumn';
+export type { GridColumnProps } from './GridColumn';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ReadOnlyGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/index.d.ts

@@ -20,4 +20,5 @@ export * from './Image';
 export * from './Dialog';
 export * from './ApplicationHeader';
 export * from './SideNavAdmin';
+export * from './ReadOnlyGrid';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AAGxB,cAAc,OAAO,CAAA;AAGrB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,WAAW,CAAA;AAGzB,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAG3B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAG3B,cAAc,YAAY,CAAA;AAG1B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA;AAGxB,cAAc,qBAAqB,CAAA;AAGnC,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AAGxB,cAAc,OAAO,CAAA;AAGrB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,WAAW,CAAA;AAGzB,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAG3B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAG3B,cAAc,YAAY,CAAA;AAG1B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA;AAGxB,cAAc,qBAAqB,CAAA;AAGnC,cAAc,gBAAgB,CAAA;AAG9B,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,60 +1,64 @@
-import { FieldLabel as r } from "./components/shared/FieldLabel.js";
+import { FieldLabel as e } from "./components/shared/FieldLabel.js";
 import { FieldWrapper as p } from "./components/shared/FieldWrapper.js";
-import { CollapsibleSection as m } from "./components/shared/CollapsibleSection.js";
+import { CollapsibleSection as i } from "./components/shared/CollapsibleSection.js";
 import { TagField as l } from "./components/Tag/TagField.js";
-import { TagItem as d } from "./components/Tag/TagItem.js";
+import { TagItem as f } from "./components/Tag/TagItem.js";
 import { ButtonWidget as F } from "./components/Button/ButtonWidget.js";
 import { ButtonArrayLayout as g } from "./components/Button/ButtonArrayLayout.js";
-import { CardLayout as T } from "./components/Card/CardLayout.js";
-import { HeadingField as u } from "./components/Heading/HeadingField.js";
-import { MessageBanner as S } from "./components/MessageBanner/MessageBanner.js";
-import { MilestoneField as y } from "./components/Milestone/MilestoneField.js";
-import { ProgressBar as I } from "./components/ProgressBar/ProgressBar.js";
-import { RichTextDisplayField as w } from "./components/RichText/RichTextDisplayField.js";
-import { TextItem as C } from "./components/RichText/TextItem.js";
+import { CardLayout as u } from "./components/Card/CardLayout.js";
+import { HeadingField as c } from "./components/Heading/HeadingField.js";
+import { MessageBanner as B } from "./components/MessageBanner/MessageBanner.js";
+import { MilestoneField as b } from "./components/Milestone/MilestoneField.js";
+import { ProgressBar as D } from "./components/ProgressBar/ProgressBar.js";
+import { RichTextDisplayField as h } from "./components/RichText/RichTextDisplayField.js";
+import { TextItem as A } from "./components/RichText/TextItem.js";
 import { Icon as M } from "./components/RichText/Icon.js";
-import { StampField as R } from "./components/Stamp/StampField.js";
-import { TextField as k } from "./components/TextField/TextField.js";
-import { CheckboxField as N } from "./components/Checkbox/CheckboxField.js";
-import { RadioButtonField as j } from "./components/RadioButton/RadioButtonField.js";
-import { DropdownField as z } from "./components/Dropdown/DropdownField.js";
-import { MultipleDropdownField as G } from "./components/Dropdown/MultipleDropdownField.js";
-import { SwitchField as K } from "./components/Switch/SwitchField.js";
+import { StampField as G } from "./components/Stamp/StampField.js";
+import { TextField as W } from "./components/TextField/TextField.js";
+import { CheckboxField as v } from "./components/Checkbox/CheckboxField.js";
+import { RadioButtonField as O } from "./components/RadioButton/RadioButtonField.js";
+import { DropdownField as j } from "./components/Dropdown/DropdownField.js";
+import { MultipleDropdownField as z } from "./components/Dropdown/MultipleDropdownField.js";
+import { SwitchField as J } from "./components/Switch/SwitchField.js";
 import { ToggleField as Q } from "./components/Toggle/ToggleField.js";
 import { SliderField as V } from "./components/Slider/SliderField.js";
 import { TabsField as Y } from "./components/Tabs/TabsField.js";
 import { ImageField as _ } from "./components/Image/ImageField.js";
 import { DialogField as oo } from "./components/Dialog/DialogField.js";
-import { ApplicationHeader as ro } from "./components/ApplicationHeader/ApplicationHeader.js";
+import { ApplicationHeader as eo } from "./components/ApplicationHeader/ApplicationHeader.js";
 import { SideNavAdmin as po } from "./components/SideNavAdmin/SideNavAdmin.js";
+import { ReadOnlyGrid as io } from "./components/ReadOnlyGrid/ReadOnlyGrid.js";
+import { GridColumn as lo } from "./components/ReadOnlyGrid/GridColumn.js";
 export {
-  ro as ApplicationHeader,
+  eo as ApplicationHeader,
   g as ButtonArrayLayout,
   F as ButtonWidget,
-  T as CardLayout,
-  N as CheckboxField,
-  m as CollapsibleSection,
+  u as CardLayout,
+  v as CheckboxField,
+  i as CollapsibleSection,
   oo as DialogField,
-  z as DropdownField,
-  r as FieldLabel,
+  j as DropdownField,
+  e as FieldLabel,
   p as FieldWrapper,
-  u as HeadingField,
+  lo as GridColumn,
+  c as HeadingField,
   M as Icon,
   _ as ImageField,
-  S as MessageBanner,
-  y as MilestoneField,
-  G as MultipleDropdownField,
-  I as ProgressBar,
-  j as RadioButtonField,
-  w as RichTextDisplayField,
+  B as MessageBanner,
+  b as MilestoneField,
+  z as MultipleDropdownField,
+  D as ProgressBar,
+  O as RadioButtonField,
+  io as ReadOnlyGrid,
+  h as RichTextDisplayField,
   po as SideNavAdmin,
   V as SliderField,
-  R as StampField,
-  K as SwitchField,
+  G as StampField,
+  J as SwitchField,
   Y as TabsField,
   l as TagField,
-  d as TagItem,
-  k as TextField,
-  C as TextItem,
+  f as TagItem,
+  W as TextField,
+  A as TextItem,
   Q as ToggleField
 };

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/dist/types/sail.d.ts

@@ -34,4 +34,19 @@ export type SAILLabelPosition = "ABOVE" | "ADJACENT" | "COLLAPSED" | "JUSTIFIED"
  * Semantic color values matching SAIL's color constants
  */
 export type SAILSemanticColor = "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | "STANDARD";
+/**
+ * Sort configuration for grid columns
+ */
+export interface SortInfo {
+    field: string;
+    ascending: boolean;
+}
+/**
+ * Grid height values matching SAIL's height parameter for grids
+ */
+export type SAILGridHeight = "SHORT" | "SHORT_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "TALL" | "TALL_PLUS" | "EXTRA_TALL" | "AUTO";
+/**
+ * Grid column width values matching SAIL's width parameter for grid columns
+ */
+export type SAILGridColumnWidth = "AUTO" | "ICON" | "ICON_PLUS" | "NARROW" | "NARROW_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "WIDE" | "1X" | "2X" | "3X" | "4X" | "5X" | "6X" | "7X" | "8X" | "9X" | "10X";
 //# sourceMappingURL=sail.d.ts.map

package/dist/types/sail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA;AAE7F;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,OAAO,GAAG,YAAY,GACtB,QAAQ,GAAG,aAAa,GACxB,MAAM,GAAG,WAAW,GACpB,YAAY,GAAG,MAAM,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GAAG,MAAM,GAAG,WAAW,GAC7B,QAAQ,GAAG,aAAa,GACxB,QAAQ,GAAG,aAAa,GACxB,MAAM,GACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pglevy/sailwind",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Appian SAIL components for React - Pre-release version under active development",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,8 @@
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
-    "release": "npm run build:lib && npm publish --access public"
+    "release": "npm run build:lib && npm publish --access public",
+    "test": "vitest --run"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -76,6 +77,9 @@
     "@storybook/addon-themes": "^10.2.8",
     "@storybook/react-vite": "^10.2.8",
     "@tailwindcss/postcss": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.3",
@@ -83,7 +87,9 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "fast-check": "^4.5.3",
     "globals": "^16.4.0",
+    "jsdom": "^28.1.0",
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
@@ -93,6 +99,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
     "vite": "^7.1.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   }
 }