@contractspec/lib.design-system 1.44.0

package/dist/components/data-view/DataViewRenderer.js

@@ -0,0 +1,148 @@
+'use client';
+
+import { FiltersToolbar } from "../molecules/FiltersToolbar.js";
+import { DataViewList } from "./DataViewList.js";
+import { DataViewTable } from "./DataViewTable.js";
+import { DataViewDetail } from "./DataViewDetail.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@contractspec/lib.ui-kit-web/ui/pagination";
+
+//#region src/components/data-view/DataViewRenderer.tsx
+function DataViewRenderer({ spec, items = [], item = null, className, renderActions, onSelect, onRowClick, headerActions, emptyState, footer, search, onSearchChange, filters, onFilterChange, pagination, onPageChange }) {
+	const viewContent = React.useMemo(() => {
+		switch (spec.view.kind) {
+			case "list": return /* @__PURE__ */ jsx(DataViewList, {
+				spec,
+				items,
+				className,
+				renderActions,
+				onSelect,
+				emptyState
+			});
+			case "table": return /* @__PURE__ */ jsx(DataViewTable, {
+				spec,
+				items,
+				className,
+				onRowClick,
+				emptyState,
+				headerActions,
+				footer
+			});
+			case "detail": return /* @__PURE__ */ jsx(DataViewDetail, {
+				spec,
+				item,
+				className,
+				emptyState,
+				headerActions
+			});
+			case "grid": {
+				const grid = spec.view;
+				const listView = {
+					kind: "list",
+					layout: "card",
+					fields: grid.fields,
+					filters: grid.filters,
+					actions: grid.actions,
+					primaryField: grid.primaryField,
+					secondaryFields: grid.secondaryFields
+				};
+				return /* @__PURE__ */ jsx(DataViewList, {
+					spec: {
+						...spec,
+						view: listView
+					},
+					items,
+					className,
+					renderActions,
+					onSelect,
+					emptyState
+				});
+			}
+			default: return /* @__PURE__ */ jsx("div", {
+				className,
+				children: "Unsupported data view kind"
+			});
+		}
+	}, [
+		spec,
+		items,
+		item,
+		className,
+		renderActions,
+		onSelect,
+		onRowClick,
+		headerActions,
+		emptyState,
+		footer
+	]);
+	if (!(spec.view.kind === "list" || spec.view.kind === "table" || spec.view.kind === "grid")) return /* @__PURE__ */ jsx(Fragment, { children: viewContent });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			(spec.view.filters?.length || onSearchChange) && /* @__PURE__ */ jsx(FiltersToolbar, {
+				searchValue: search,
+				onSearchChange,
+				searchPlaceholder: "Search...",
+				activeChips: filters ? Object.entries(filters).map(([key, value]) => ({
+					key,
+					label: `${key}: ${value}`,
+					onRemove: () => {
+						if (filters) {
+							const { [key]: _, ...rest } = filters;
+							onFilterChange?.(rest);
+						}
+					}
+				})) : [],
+				onClearAll: filters && Object.keys(filters).length > 0 ? () => onFilterChange?.({}) : void 0,
+				right: headerActions
+			}),
+			viewContent,
+			pagination && pagination.total > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "py-4",
+				children: [/* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+					/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+						href: "#",
+						onClick: (e) => {
+							e.preventDefault();
+							if (pagination.page > 1) onPageChange?.(pagination.page - 1);
+						},
+						"aria-disabled": pagination.page <= 1,
+						className: pagination.page <= 1 ? "pointer-events-none opacity-50" : ""
+					}) }),
+					/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+						href: "#",
+						isActive: true,
+						children: pagination.page
+					}) }),
+					/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+						href: "#",
+						onClick: (e) => {
+							e.preventDefault();
+							const totalPages = Math.ceil(pagination.total / pagination.pageSize);
+							if (pagination.page < totalPages) onPageChange?.(pagination.page + 1);
+						},
+						"aria-disabled": pagination.page >= Math.ceil(pagination.total / pagination.pageSize),
+						className: pagination.page >= Math.ceil(pagination.total / pagination.pageSize) ? "pointer-events-none opacity-50" : ""
+					}) })
+				] }) }), /* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground mt-2 text-center text-sm",
+					children: [
+						"Page ",
+						pagination.page,
+						" of",
+						" ",
+						Math.ceil(pagination.total / pagination.pageSize),
+						" (",
+						pagination.total,
+						" items)"
+					]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { DataViewRenderer };
+//# sourceMappingURL=DataViewRenderer.js.map

package/dist/components/data-view/DataViewRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewRenderer.js","names":["listView: DataViewListConfig"],"sources":["../../../src/components/data-view/DataViewRenderer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewGridConfig,\n  DataViewListConfig,\n  DataViewSpec,\n} from '@contractspec/lib.contracts/data-views';\nimport { DataViewList } from './DataViewList';\nimport { DataViewTable } from './DataViewTable';\nimport { DataViewDetail } from './DataViewDetail';\nimport { FiltersToolbar } from '../molecules/FiltersToolbar';\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from '@contractspec/lib.ui-kit-web/ui/pagination';\n\nexport interface DataViewRendererProps {\n  spec: DataViewSpec;\n  items?: Record<string, unknown>[];\n  item?: Record<string, unknown> | null;\n  className?: string;\n  renderActions?: (item: Record<string, unknown>) => React.ReactNode;\n  onSelect?: (item: Record<string, unknown>) => void;\n  onRowClick?: (item: Record<string, unknown>) => void;\n  headerActions?: React.ReactNode;\n  emptyState?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Filters & Search\n  search?: string;\n  onSearchChange?: (value: string) => void;\n  filters?: Record<string, unknown>;\n  onFilterChange?: (filters: Record<string, unknown>) => void;\n\n  // Pagination\n  pagination?: {\n    page: number;\n    pageSize: number;\n    total: number;\n  };\n  onPageChange?: (page: number) => void;\n}\n\nexport function DataViewRenderer({\n  spec,\n  items = [],\n  item = null,\n  className,\n  renderActions,\n  onSelect,\n  onRowClick,\n  headerActions,\n  emptyState,\n  footer,\n  search,\n  onSearchChange,\n  filters,\n  onFilterChange,\n  pagination,\n  onPageChange,\n}: DataViewRendererProps) {\n  const viewContent = React.useMemo(() => {\n    switch (spec.view.kind) {\n      case 'list':\n        return (\n          <DataViewList\n            spec={spec}\n            items={items}\n            className={className}\n            renderActions={renderActions}\n            onSelect={onSelect}\n            emptyState={emptyState}\n          />\n        );\n      case 'table':\n        return (\n          <DataViewTable\n            spec={spec}\n            items={items}\n            className={className}\n            onRowClick={onRowClick}\n            emptyState={emptyState}\n            headerActions={headerActions}\n            footer={footer}\n          />\n        );\n      case 'detail':\n        return (\n          <DataViewDetail\n            spec={spec}\n            item={item}\n            className={className}\n            emptyState={emptyState}\n            headerActions={headerActions}\n          />\n        );\n      case 'grid': {\n        const grid = spec.view as DataViewGridConfig;\n        const listView: DataViewListConfig = {\n          kind: 'list',\n          layout: 'card',\n          fields: grid.fields,\n          filters: grid.filters,\n          actions: grid.actions,\n          primaryField: grid.primaryField,\n          secondaryFields: grid.secondaryFields,\n        };\n        const listSpec = {\n          ...spec,\n          view: listView,\n        } satisfies DataViewSpec;\n        return (\n          <DataViewList\n            spec={listSpec}\n            items={items}\n            className={className}\n            renderActions={renderActions}\n            onSelect={onSelect}\n            emptyState={emptyState}\n          />\n        );\n      }\n      default:\n        return <div className={className}>Unsupported data view kind</div>;\n    }\n  }, [\n    spec,\n    items,\n    item,\n    className,\n    renderActions,\n    onSelect,\n    onRowClick,\n    headerActions,\n    emptyState,\n    footer,\n  ]);\n\n  // Only render toolbar/pagination if it's a collection view\n  const isCollection =\n    spec.view.kind === 'list' ||\n    spec.view.kind === 'table' ||\n    spec.view.kind === 'grid';\n\n  if (!isCollection) {\n    return <>{viewContent}</>;\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {(spec.view.filters?.length || onSearchChange) && (\n        <FiltersToolbar\n          searchValue={search}\n          onSearchChange={onSearchChange}\n          searchPlaceholder=\"Search...\"\n          activeChips={\n            filters\n              ? Object.entries(filters).map(([key, value]) => ({\n                  key,\n                  label: `${key}: ${value}`,\n                  onRemove: () => {\n                    if (filters) {\n                      const { [key]: _, ...rest } = filters;\n                      onFilterChange?.(rest);\n                    }\n                  },\n                }))\n              : []\n          }\n          onClearAll={\n            filters && Object.keys(filters).length > 0\n              ? () => onFilterChange?.({})\n              : undefined\n          }\n          right={headerActions}\n        >\n          {/* Render filter dropdowns here if needed */}\n        </FiltersToolbar>\n      )}\n\n      {viewContent}\n\n      {pagination && pagination.total > 0 && (\n        <div className=\"py-4\">\n          <Pagination>\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  href=\"#\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    if (pagination.page > 1) {\n                      onPageChange?.(pagination.page - 1);\n                    }\n                  }}\n                  aria-disabled={pagination.page <= 1}\n                  className={\n                    pagination.page <= 1 ? 'pointer-events-none opacity-50' : ''\n                  }\n                />\n              </PaginationItem>\n\n              {/* Simplified pagination: show current page */}\n              <PaginationItem>\n                <PaginationLink href=\"#\" isActive>\n                  {pagination.page}\n                </PaginationLink>\n              </PaginationItem>\n\n              <PaginationItem>\n                <PaginationNext\n                  href=\"#\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    const totalPages = Math.ceil(\n                      pagination.total / pagination.pageSize\n                    );\n                    if (pagination.page < totalPages) {\n                      onPageChange?.(pagination.page + 1);\n                    }\n                  }}\n                  aria-disabled={\n                    pagination.page >=\n                    Math.ceil(pagination.total / pagination.pageSize)\n                  }\n                  className={\n                    pagination.page >=\n                    Math.ceil(pagination.total / pagination.pageSize)\n                      ? 'pointer-events-none opacity-50'\n                      : ''\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n          <div className=\"text-muted-foreground mt-2 text-center text-sm\">\n            Page {pagination.page} of{' '}\n            {Math.ceil(pagination.total / pagination.pageSize)} (\n            {pagination.total} items)\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgDA,SAAgB,iBAAiB,EAC/B,MACA,QAAQ,EAAE,EACV,OAAO,MACP,WACA,eACA,UACA,YACA,eACA,YACA,QACA,QACA,gBACA,SACA,gBACA,YACA,gBACwB;CACxB,MAAM,cAAc,MAAM,cAAc;AACtC,UAAQ,KAAK,KAAK,MAAlB;GACE,KAAK,OACH,QACE,oBAAC;IACO;IACC;IACI;IACI;IACL;IACE;KACZ;GAEN,KAAK,QACH,QACE,oBAAC;IACO;IACC;IACI;IACC;IACA;IACG;IACP;KACR;GAEN,KAAK,SACH,QACE,oBAAC;IACO;IACA;IACK;IACC;IACG;KACf;GAEN,KAAK,QAAQ;IACX,MAAM,OAAO,KAAK;IAClB,MAAMA,WAA+B;KACnC,MAAM;KACN,QAAQ;KACR,QAAQ,KAAK;KACb,SAAS,KAAK;KACd,SAAS,KAAK;KACd,cAAc,KAAK;KACnB,iBAAiB,KAAK;KACvB;AAKD,WACE,oBAAC;KACC,MANa;MACf,GAAG;MACH,MAAM;MACP;KAIU;KACI;KACI;KACL;KACE;MACZ;;GAGN,QACE,QAAO,oBAAC;IAAe;cAAW;KAAgC;;IAErE;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAQF,KAAI,EAJF,KAAK,KAAK,SAAS,UACnB,KAAK,KAAK,SAAS,WACnB,KAAK,KAAK,SAAS,QAGnB,QAAO,0CAAG,cAAe;AAG3B,QACE,qBAAC;EAAI,WAAU;;IACX,KAAK,KAAK,SAAS,UAAU,mBAC7B,oBAAC;IACC,aAAa;IACG;IAChB,mBAAkB;IAClB,aACE,UACI,OAAO,QAAQ,QAAQ,CAAC,KAAK,CAAC,KAAK,YAAY;KAC7C;KACA,OAAO,GAAG,IAAI,IAAI;KAClB,gBAAgB;AACd,UAAI,SAAS;OACX,MAAM,GAAG,MAAM,GAAG,GAAG,SAAS;AAC9B,wBAAiB,KAAK;;;KAG3B,EAAE,GACH,EAAE;IAER,YACE,WAAW,OAAO,KAAK,QAAQ,CAAC,SAAS,UAC/B,iBAAiB,EAAE,CAAC,GAC1B;IAEN,OAAO;KAGQ;GAGlB;GAEA,cAAc,WAAW,QAAQ,KAChC,qBAAC;IAAI,WAAU;eACb,oBAAC,wBACC,qBAAC;KACC,oBAAC,4BACC,oBAAC;MACC,MAAK;MACL,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,WAAI,WAAW,OAAO,EACpB,gBAAe,WAAW,OAAO,EAAE;;MAGvC,iBAAe,WAAW,QAAQ;MAClC,WACE,WAAW,QAAQ,IAAI,mCAAmC;OAE5D,GACa;KAGjB,oBAAC,4BACC,oBAAC;MAAe,MAAK;MAAI;gBACtB,WAAW;OACG,GACF;KAEjB,oBAAC,4BACC,oBAAC;MACC,MAAK;MACL,UAAU,MAAM;AACd,SAAE,gBAAgB;OAClB,MAAM,aAAa,KAAK,KACtB,WAAW,QAAQ,WAAW,SAC/B;AACD,WAAI,WAAW,OAAO,WACpB,gBAAe,WAAW,OAAO,EAAE;;MAGvC,iBACE,WAAW,QACX,KAAK,KAAK,WAAW,QAAQ,WAAW,SAAS;MAEnD,WACE,WAAW,QACX,KAAK,KAAK,WAAW,QAAQ,WAAW,SAAS,GAC7C,mCACA;OAEN,GACa;QACC,GACT,EACb,qBAAC;KAAI,WAAU;;MAAiD;MACxD,WAAW;MAAK;MAAI;MACzB,KAAK,KAAK,WAAW,QAAQ,WAAW,SAAS;MAAC;MAClD,WAAW;MAAM;;MACd;KACF;;GAEJ"}

package/dist/components/data-view/DataViewTable.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as react_jsx_runtime106 from "react/jsx-runtime";
+import { DataViewSpec } from "@contractspec/lib.contracts/data-views";
+
+//#region src/components/data-view/DataViewTable.d.ts
+interface DataViewTableProps {
+  spec: DataViewSpec;
+  items: Record<string, unknown>[];
+  className?: string;
+  onRowClick?: (item: Record<string, unknown>) => void;
+  emptyState?: React.ReactNode;
+  headerActions?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+declare function DataViewTable({
+  spec,
+  items,
+  className,
+  onRowClick,
+  emptyState,
+  headerActions,
+  footer
+}: DataViewTableProps): react_jsx_runtime106.JSX.Element;
+//#endregion
+export { DataViewTable };
+//# sourceMappingURL=DataViewTable.d.ts.map

package/dist/components/data-view/DataViewTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewTable.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewTable.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,kBAAA;QACT;SACC;EAFQ,SAAA,CAAA,EAAA,MAAA;EACT,UAAA,CAAA,EAAA,CAAA,IAAA,EAGc,MAHd,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EACC,UAAA,CAAA,EAGM,KAAA,CAAM,SAHZ;EAEa,aAAA,CAAA,EAEJ,KAAA,CAAM,SAFF;EACP,MAAM,CAAA,EAEV,KAAA,CAAM,SAFI;;AAEJ,iBAGD,aAAA,CAHC;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,UAAA;EAAA,UAAA;EAAA,aAAA;EAAA;AAAA,CAAA,EAWd,kBAXc,CAAA,EAWI,oBAAA,CAAA,GAAA,CAAA,OAXJ"}

package/dist/components/data-view/DataViewTable.js

@@ -0,0 +1,93 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { formatValue, getAtPath } from "./utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewTable.tsx
+function DataViewTable({ spec, items, className, onRowClick, emptyState, headerActions, footer }) {
+	if (spec.view.kind !== "table") throw new Error(`DataViewTable received view kind "${spec.view.kind}", expected "table".`);
+	const view = spec.view;
+	const fields = view.fields;
+	const columns = view.columns?.map((column) => ({
+		...column,
+		label: column.label ?? fieldLabel(fields, column.field)
+	})) ?? fields.map((field) => ({
+		field: field.key,
+		label: field.label,
+		align: "left"
+	}));
+	if (!items.length) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-foreground text-base font-semibold",
+				children: spec.meta.title
+			}), headerActions]
+		}), emptyState ?? /* @__PURE__ */ jsx("div", {
+			className: "border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm",
+			children: "No records available."
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-foreground text-base font-semibold",
+					children: spec.meta.title
+				}), headerActions]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border bg-card overflow-x-auto rounded-lg border shadow-sm",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cn("divide-border min-w-full divide-y text-sm", view.density === "compact" ? "text-sm" : "text-base"),
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-muted/50",
+						children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, columnIdx) => /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							className: cn("text-muted-foreground px-4 py-3 text-left font-semibold", alignmentClass(column.align)),
+							children: column.label
+						}, `${column.field}.${columnIdx}`)) })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-border bg-background divide-y",
+						children: items.map((item, rowIdx) => /* @__PURE__ */ jsx("tr", {
+							className: cn(onRowClick && "hover:bg-muted/30 cursor-pointer transition-colors"),
+							onClick: () => onRowClick?.(item),
+							children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+								className: cn("text-foreground px-4 py-3", alignmentClass(column.align)),
+								children: displayValue(item, fields, column.field)
+							}, column.field))
+						}, rowIdx))
+					})]
+				})
+			}),
+			footer
+		]
+	});
+}
+function fieldLabel(fields, key) {
+	return fields.find((field) => field.key === key)?.label ?? key;
+}
+function fieldByKey(fields, key) {
+	return fields.find((field) => field.key === key);
+}
+function displayValue(item, fields, key) {
+	const field = fieldByKey(fields, key);
+	if (!field) return "";
+	return formatValue(getAtPath(item, field.dataPath), field.format);
+}
+function alignmentClass(align) {
+	switch (align) {
+		case "center": return "text-center";
+		case "right": return "text-right";
+		default: return "text-left";
+	}
+}
+
+//#endregion
+export { DataViewTable };
+//# sourceMappingURL=DataViewTable.js.map

package/dist/components/data-view/DataViewTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewTable.js","names":[],"sources":["../../../src/components/data-view/DataViewTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewTableConfig,\n  DataViewField,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewTableProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  onRowClick?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nexport function DataViewTable({\n  spec,\n  items,\n  className,\n  onRowClick,\n  emptyState,\n  headerActions,\n  footer,\n}: DataViewTableProps) {\n  if (spec.view.kind !== 'table') {\n    throw new Error(\n      `DataViewTable received view kind \"${spec.view.kind}\", expected \"table\".`\n    );\n  }\n\n  const view = spec.view as DataViewTableConfig;\n  const fields = view.fields;\n  const columns =\n    view.columns?.map((column) => ({\n      ...column,\n      label: column.label ?? fieldLabel(fields, column.field),\n    })) ??\n    fields.map((field) => ({\n      field: field.key,\n      label: field.label,\n      align: 'left' as const,\n    }));\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-foreground text-base font-semibold\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-foreground text-base font-semibold\">\n          {spec.meta.title}\n        </h3>\n        {headerActions}\n      </div>\n      <div className=\"border-border bg-card overflow-x-auto rounded-lg border shadow-sm\">\n        <table\n          className={cn(\n            'divide-border min-w-full divide-y text-sm',\n            view.density === 'compact' ? 'text-sm' : 'text-base'\n          )}\n        >\n          <thead className=\"bg-muted/50\">\n            <tr>\n              {columns.map((column, columnIdx) => (\n                <th\n                  key={`${column.field}.${columnIdx}`}\n                  scope=\"col\"\n                  className={cn(\n                    'text-muted-foreground px-4 py-3 text-left font-semibold',\n                    alignmentClass(column.align)\n                  )}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"divide-border bg-background divide-y\">\n            {items.map((item, rowIdx) => (\n              <tr\n                key={rowIdx}\n                className={cn(\n                  onRowClick &&\n                    'hover:bg-muted/30 cursor-pointer transition-colors'\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((column) => (\n                  <td\n                    key={column.field}\n                    className={cn(\n                      'text-foreground px-4 py-3',\n                      alignmentClass(column.align)\n                    )}\n                  >\n                    {displayValue(item, fields, column.field)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {footer}\n    </div>\n  );\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n\nfunction displayValue(\n  item: Record<string, unknown>,\n  fields: DataViewField[],\n  key: string\n) {\n  const field = fieldByKey(fields, key);\n  if (!field) return '';\n  const value = getAtPath(item, field.dataPath);\n  return formatValue(value, field.format);\n}\n\nfunction alignmentClass(\n  align: 'left' | 'center' | 'right' | undefined\n): string | undefined {\n  switch (align) {\n    case 'center':\n      return 'text-center';\n    case 'right':\n      return 'text-right';\n    default:\n      return 'text-left';\n  }\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAC5B,MACA,OACA,WACA,YACA,YACA,eACA,UACqB;AACrB,KAAI,KAAK,KAAK,SAAS,QACrB,OAAM,IAAI,MACR,qCAAqC,KAAK,KAAK,KAAK,sBACrD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,UACJ,KAAK,SAAS,KAAK,YAAY;EAC7B,GAAG;EACH,OAAO,OAAO,SAAS,WAAW,QAAQ,OAAO,MAAM;EACxD,EAAE,IACH,OAAO,KAAK,WAAW;EACrB,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO;EACR,EAAE;AAEL,KAAI,CAAC,MAAM,OACT,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;;GACzD,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eACX,KAAK,KAAK;MACR,EACJ;KACG;GACN,oBAAC;IAAI,WAAU;cACb,qBAAC;KACC,WAAW,GACT,6CACA,KAAK,YAAY,YAAY,YAAY,YAC1C;gBAED,oBAAC;MAAM,WAAU;gBACf,oBAAC,kBACE,QAAQ,KAAK,QAAQ,cACpB,oBAAC;OAEC,OAAM;OACN,WAAW,GACT,2DACA,eAAe,OAAO,MAAM,CAC7B;iBAEA,OAAO;SAPH,GAAG,OAAO,MAAM,GAAG,YAQrB,CACL,GACC;OACC,EACR,oBAAC;MAAM,WAAU;gBACd,MAAM,KAAK,MAAM,WAChB,oBAAC;OAEC,WAAW,GACT,cACE,qDACH;OACD,eAAe,aAAa,KAAK;iBAEhC,QAAQ,KAAK,WACZ,oBAAC;QAEC,WAAW,GACT,6BACA,eAAe,OAAO,MAAM,CAC7B;kBAEA,aAAa,MAAM,QAAQ,OAAO,MAAM;UANpC,OAAO,MAOT,CACL;SAjBG,OAkBF,CACL;OACI;MACF;KACJ;GACL;;GACG;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI;;AAGlD,SAAS,aACP,MACA,QACA,KACA;CACA,MAAM,QAAQ,WAAW,QAAQ,IAAI;AACrC,KAAI,CAAC,MAAO,QAAO;AAEnB,QAAO,YADO,UAAU,MAAM,MAAM,SAAS,EACnB,MAAM,OAAO;;AAGzC,SAAS,eACP,OACoB;AACpB,SAAQ,OAAR;EACE,KAAK,SACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO"}

package/dist/components/data-view/utils.js

@@ -0,0 +1,43 @@
+'use client';
+
+//#region src/components/data-view/utils.ts
+function getAtPath(source, path) {
+	if (!source) return void 0;
+	if (!path) return source;
+	const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+	let current = source;
+	for (const segment of segments) {
+		if (current == null || typeof current !== "object" && !Array.isArray(current)) return void 0;
+		current = current[segment];
+	}
+	return current;
+}
+function formatValue(value, format) {
+	if (value == null) return "";
+	switch (format) {
+		case "boolean": return value ? "Yes" : "No";
+		case "currency": return typeof value === "number" ? new Intl.NumberFormat(void 0, {
+			style: "currency",
+			currency: "USD"
+		}).format(value) : String(value);
+		case "percentage": return typeof value === "number" ? `${(value * 100).toFixed(1)}%` : String(value);
+		case "date": return formatDate(value, { dateStyle: "medium" });
+		case "dateTime": return formatDate(value, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		});
+		default: return String(value);
+	}
+}
+function formatDate(value, options) {
+	if (value instanceof Date) return new Intl.DateTimeFormat(void 0, options).format(value);
+	if (typeof value === "string" || typeof value === "number") {
+		const date = new Date(value);
+		if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat(void 0, options).format(date);
+	}
+	return String(value ?? "");
+}
+
+//#endregion
+export { formatValue, getAtPath };
+//# sourceMappingURL=utils.js.map

package/dist/components/data-view/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["current: unknown"],"sources":["../../../src/components/data-view/utils.ts"],"sourcesContent":["'use client';\n\nexport function getAtPath(\n  source: Record<string, unknown> | undefined,\n  path: string\n): unknown {\n  if (!source) return undefined;\n  if (!path) return source;\n  const segments = path\n    .replace(/\\[(\\d+)\\]/g, '.$1')\n    .split('.')\n    .filter(Boolean);\n\n  let current: unknown = source;\n  for (const segment of segments) {\n    if (\n      current == null ||\n      (typeof current !== 'object' && !Array.isArray(current))\n    )\n      return undefined;\n    current = (current as Record<string, unknown>)[segment];\n  }\n  return current;\n}\n\nexport function formatValue(value: unknown, format?: string): string {\n  if (value == null) return '';\n  switch (format) {\n    case 'boolean':\n      return value ? 'Yes' : 'No';\n    case 'currency':\n      return typeof value === 'number'\n        ? new Intl.NumberFormat(undefined, {\n            style: 'currency',\n            currency: 'USD',\n          }).format(value)\n        : String(value);\n    case 'percentage':\n      return typeof value === 'number'\n        ? `${(value * 100).toFixed(1)}%`\n        : String(value);\n    case 'date':\n      return formatDate(value, {\n        dateStyle: 'medium',\n      });\n    case 'dateTime':\n      return formatDate(value, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      });\n    default:\n      return String(value);\n  }\n}\n\nfunction formatDate(\n  value: unknown,\n  options: Intl.DateTimeFormatOptions\n): string {\n  if (value instanceof Date) {\n    return new Intl.DateTimeFormat(undefined, options).format(value);\n  }\n  if (typeof value === 'string' || typeof value === 'number') {\n    const date = new Date(value);\n    if (!Number.isNaN(date.getTime())) {\n      return new Intl.DateTimeFormat(undefined, options).format(date);\n    }\n  }\n  return String(value ?? '');\n}\n"],"mappings":";;;AAEA,SAAgB,UACd,QACA,MACS;AACT,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;CAClB,MAAM,WAAW,KACd,QAAQ,cAAc,MAAM,CAC5B,MAAM,IAAI,CACV,OAAO,QAAQ;CAElB,IAAIA,UAAmB;AACvB,MAAK,MAAM,WAAW,UAAU;AAC9B,MACE,WAAW,QACV,OAAO,YAAY,YAAY,CAAC,MAAM,QAAQ,QAAQ,CAEvD,QAAO;AACT,YAAW,QAAoC;;AAEjD,QAAO;;AAGT,SAAgB,YAAY,OAAgB,QAAyB;AACnE,KAAI,SAAS,KAAM,QAAO;AAC1B,SAAQ,QAAR;EACE,KAAK,UACH,QAAO,QAAQ,QAAQ;EACzB,KAAK,WACH,QAAO,OAAO,UAAU,WACpB,IAAI,KAAK,aAAa,QAAW;GAC/B,OAAO;GACP,UAAU;GACX,CAAC,CAAC,OAAO,MAAM,GAChB,OAAO,MAAM;EACnB,KAAK,aACH,QAAO,OAAO,UAAU,WACpB,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC,KAC5B,OAAO,MAAM;EACnB,KAAK,OACH,QAAO,WAAW,OAAO,EACvB,WAAW,UACZ,CAAC;EACJ,KAAK,WACH,QAAO,WAAW,OAAO;GACvB,WAAW;GACX,WAAW;GACZ,CAAC;EACJ,QACE,QAAO,OAAO,MAAM;;;AAI1B,SAAS,WACP,OACA,SACQ;AACR,KAAI,iBAAiB,KACnB,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,MAAM;AAElE,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,MAAM,OAAO,IAAI,KAAK,MAAM;AAC5B,MAAI,CAAC,OAAO,MAAM,KAAK,SAAS,CAAC,CAC/B,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,KAAK;;AAGnE,QAAO,OAAO,SAAS,GAAG"}

package/dist/components/forms/ActionForm.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as react_jsx_runtime104 from "react/jsx-runtime";
+
+//#region src/components/forms/ActionForm.d.ts
+interface ActionFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'action'> {
+  action: (formData: FormData) => void | Promise<void>;
+  children: React.ReactNode;
+}
+declare function ActionForm({
+  action,
+  children,
+  className,
+  ...rest
+}: ActionFormProps): react_jsx_runtime104.JSX.Element;
+//#endregion
+export { ActionForm };
+//# sourceMappingURL=ActionForm.d.ts.map

package/dist/components/forms/ActionForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionForm.d.ts","names":[],"sources":["../../../src/components/forms/ActionForm.tsx"],"sourcesContent":[],"mappings":";;;;UAKiB,eAAA,SAAwB,KACvC,KAAA,CAAM,mBAAmB;qBAGN,oBAAoB;YAC7B,KAAA,CAAM;AALlB;AAC2B,iBAOX,UAAA,CAPW;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAYxB,eAZwB,CAAA,EAYT,oBAAA,CAAA,GAAA,CAAA,OAZS"}

package/dist/components/forms/ActionForm.js

@@ -0,0 +1,19 @@
+'use client';
+
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+
+//#region src/components/forms/ActionForm.tsx
+function ActionForm({ action, children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("form", {
+		action,
+		className: cn("space-y-3", className),
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { ActionForm };
+//# sourceMappingURL=ActionForm.js.map

package/dist/components/forms/ActionForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionForm.js","names":[],"sources":["../../../src/components/forms/ActionForm.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\n\nexport interface ActionFormProps extends Omit<\n  React.FormHTMLAttributes<HTMLFormElement>,\n  'action'\n> {\n  action: (formData: FormData) => void | Promise<void>;\n  children: React.ReactNode;\n}\n\nexport function ActionForm({\n  action,\n  children,\n  className,\n  ...rest\n}: ActionFormProps) {\n  return (\n    <form action={action} className={cn('space-y-3', className)} {...rest}>\n      {children}\n    </form>\n  );\n}\n\nexport default ActionForm;\n"],"mappings":";;;;;;;AAaA,SAAgB,WAAW,EACzB,QACA,UACA,WACA,GAAG,QACe;AAClB,QACE,oBAAC;EAAa;EAAQ,WAAW,GAAG,aAAa,UAAU;EAAE,GAAI;EAC9D;GACI"}

package/dist/components/forms/FormCardLayout.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as react_jsx_runtime101 from "react/jsx-runtime";
+
+//#region src/components/forms/FormCardLayout.d.ts
+interface FormCardLayoutProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+declare function FormCardLayout({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName
+}: FormCardLayoutProps): react_jsx_runtime101.JSX.Element;
+//#endregion
+export { FormCardLayout };
+//# sourceMappingURL=FormCardLayout.d.ts.map

package/dist/components/forms/FormCardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCardLayout.d.ts","names":[],"sources":["../../../src/components/forms/FormCardLayout.tsx"],"sourcesContent":[],"mappings":";;;;UASiB,mBAAA;UACP,KAAA,CAAM;gBACA,KAAA,CAAM;EAFL,OAAA,CAAA,EAGL,KAAA,CAAM,SAHkB;EAC1B,QAAM,EAGJ,KAAA,CAAM,SAHF;EACA,SAAM,CAAA,EAAA,MAAA;EACV,gBAAM,CAAA,EAAA,MAAA;;AACS,iBAKX,cAAA,CALW;EAAA,KAAA;EAAA,WAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAYxB,mBAZwB,CAAA,EAYL,oBAAA,CAAA,GAAA,CAAA,OAZK"}

package/dist/components/forms/FormCardLayout.js

@@ -0,0 +1,28 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@contractspec/lib.ui-kit-web/ui/card";
+
+//#region src/components/forms/FormCardLayout.tsx
+function FormCardLayout({ title, description, actions, children, className, contentClassName }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("border-none shadow-2xs", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [title && /* @__PURE__ */ jsx(CardTitle, { children: title }), description && /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground text-base",
+			children: description
+		})] }), /* @__PURE__ */ jsxs(CardContent, {
+			className: cn("p-4 md:p-5", contentClassName),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 flex justify-end gap-2",
+				children: actions
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { FormCardLayout };
+//# sourceMappingURL=FormCardLayout.js.map

package/dist/components/forms/FormCardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCardLayout.js","names":[],"sources":["../../../src/components/forms/FormCardLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\n\nexport interface FormCardLayoutProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  contentClassName?: string;\n}\n\nexport function FormCardLayout({\n  title,\n  description,\n  actions,\n  children,\n  className,\n  contentClassName,\n}: FormCardLayoutProps) {\n  return (\n    <Card className={cn('border-none shadow-2xs', className)}>\n      {(title || description) && (\n        <CardHeader>\n          {title && <CardTitle>{title}</CardTitle>}\n          {description && (\n            <div className=\"text-muted-foreground text-base\">{description}</div>\n          )}\n        </CardHeader>\n      )}\n      <CardContent className={cn('p-4 md:p-5', contentClassName)}>\n        <div className=\"space-y-4\">{children}</div>\n        {actions && (\n          <div className=\"mt-4 flex justify-end gap-2\">{actions}</div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,eAAe,EAC7B,OACA,aACA,SACA,UACA,WACA,oBACsB;AACtB,QACE,qBAAC;EAAK,WAAW,GAAG,0BAA0B,UAAU;cACpD,SAAS,gBACT,qBAAC,yBACE,SAAS,oBAAC,uBAAW,QAAkB,EACvC,eACC,oBAAC;GAAI,WAAU;aAAmC;IAAkB,IAE3D,EAEf,qBAAC;GAAY,WAAW,GAAG,cAAc,iBAAiB;cACxD,oBAAC;IAAI,WAAU;IAAa;KAAe,EAC1C,WACC,oBAAC;IAAI,WAAU;cAA+B;KAAc;IAElD;GACT"}

package/dist/components/forms/FormDialog.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as react_jsx_runtime96 from "react/jsx-runtime";
+
+//#region src/components/forms/FormDialog.d.ts
+interface FormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  maxWidth?: string;
+}
+declare function FormDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  maxWidth
+}: FormDialogProps): react_jsx_runtime96.JSX.Element;
+//#endregion
+export { FormDialog };
+//# sourceMappingURL=FormDialog.d.ts.map

package/dist/components/forms/FormDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDialog.d.ts","names":[],"sources":["../../../src/components/forms/FormDialog.tsx"],"sourcesContent":[],"mappings":";;;;UAYiB,eAAA;;;EAAA,KAAA,EAGR,KAAA,CAAM,SAHiB;EAGvB,WAAM,CAAA,EACC,KAAA,CAAM,SADP;EACC,QAAM,EACV,KAAA,CAAM,SADI;EACV,MAAM,CAAA,EACP,KAAA,CAAM,SADC;EACP,QAAM,CAAA,EAAA,MAAA;;AAID,iBAAA,UAAA,CAAU;EAAA,IAAA;EAAA,YAAA;EAAA,KAAA;EAAA,WAAA;EAAA,QAAA;EAAA,MAAA;EAAA;AAAA,CAAA,EAQvB,eARuB,CAAA,EAQR,mBAAA,CAAA,GAAA,CAAA,OARQ"}

package/dist/components/forms/FormDialog.js

@@ -0,0 +1,25 @@
+'use client';
+
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@contractspec/lib.ui-kit-web/ui/dialog";
+
+//#region src/components/forms/FormDialog.tsx
+function FormDialog({ open, onOpenChange, title, description, children, footer, maxWidth = "sm:max-w-[480px]" }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: maxWidth,
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				children,
+				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+export { FormDialog };
+//# sourceMappingURL=FormDialog.js.map

package/dist/components/forms/FormDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDialog.js","names":[],"sources":["../../../src/components/forms/FormDialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@contractspec/lib.ui-kit-web/ui/dialog';\n\nexport interface FormDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  children: React.ReactNode; // form body\n  footer?: React.ReactNode; // actions\n  maxWidth?: string; // e.g., 'sm:max-w-[480px]'\n}\n\nexport function FormDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  maxWidth = 'sm:max-w-[480px]',\n}: FormDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className={maxWidth}>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        {children}\n        {footer && <DialogFooter>{footer}</DialogFooter>}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACzB,MACA,cACA,OACA,aACA,UACA,QACA,WAAW,sBACO;AAClB,QACE,oBAAC;EAAa;EAAoB;YAChC,qBAAC;GAAc,WAAW;;IACxB,qBAAC,2BACC,oBAAC,yBAAa,QAAoB,EACjC,eAAe,oBAAC,+BAAmB,cAAgC,IACvD;IACd;IACA,UAAU,oBAAC,0BAAc,SAAsB;;IAClC;GACT"}

package/dist/components/forms/FormLayout.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as react_jsx_runtime98 from "react/jsx-runtime";
+
+//#region src/components/forms/FormLayout.d.ts
+declare function FormSection({
+  children,
+  className
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): react_jsx_runtime98.JSX.Element;
+declare function FormRow({
+  children,
+  className
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): react_jsx_runtime98.JSX.Element;
+declare function FormGrid({
+  children,
+  cols,
+  className
+}: {
+  children: React.ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+  className?: string;
+}): react_jsx_runtime98.JSX.Element;
+//#endregion
+export { FormGrid, FormRow, FormSection };
+//# sourceMappingURL=FormLayout.d.ts.map

package/dist/components/forms/FormLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.d.ts","names":[],"sources":["../../../src/components/forms/FormLayout.tsx"],"sourcesContent":[],"mappings":";;;;iBAKgB,WAAA;;;AAAhB;YAIY,KAAA,CAAM;;AAJlB,CAAA,CAAA,EAMC,mBAAA,CAAA,GAAA,CAAA,OAN0B;AACzB,iBASc,OAAA,CATd;EAAA,QAAA;EAAA;CAAA,EAAA;EACA,QAAA,EAYU,KAAA,CAAM,SAZhB;EAEU,SAAM,CAAA,EAAA,MAAA;CAEjB,CAAA,EAUA,mBAAA,CAAA,GAAA,CAAA,OAVA;AAAA,iBAkBe,QAAA,CAlBf;EAAA,QAAA;EAAA,IAAA;EAAA;CAAA,EAAA;EAIe,QAAA,EAmBJ,KAAA,CAAM,SAnBK;EACrB,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA;EACA,SAAA,CAAA,EAAA,MAAA;CAEU,CAAA,EAkBX,mBAAA,CAAA,GAAA,CAAA,OAlBiB"}

package/dist/components/forms/FormLayout.js

@@ -0,0 +1,29 @@
+'use client';
+
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+
+//#region src/components/forms/FormLayout.tsx
+function FormSection({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-4", className),
+		children
+	});
+}
+function FormRow({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-1 gap-4 md:grid-cols-2", className),
+		children
+	});
+}
+function FormGrid({ children, cols = 2, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", cols === 1 ? "grid-cols-1" : cols === 2 ? "grid-cols-2" : cols === 3 ? "grid-cols-3" : "grid-cols-4", className),
+		children
+	});
+}
+
+//#endregion
+export { FormGrid, FormRow, FormSection };
+//# sourceMappingURL=FormLayout.js.map

package/dist/components/forms/FormLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.js","names":[],"sources":["../../../src/components/forms/FormLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\n\nexport function FormSection({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return <div className={cn('space-y-4', className)}>{children}</div>;\n}\n\nexport function FormRow({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid grid-cols-1 gap-4 md:grid-cols-2', className)}>\n      {children}\n    </div>\n  );\n}\n\nexport function FormGrid({\n  children,\n  cols = 2,\n  className,\n}: {\n  children: React.ReactNode;\n  cols?: 1 | 2 | 3 | 4;\n  className?: string;\n}) {\n  const preset =\n    cols === 1\n      ? 'grid-cols-1'\n      : cols === 2\n        ? 'grid-cols-2'\n        : cols === 3\n          ? 'grid-cols-3'\n          : 'grid-cols-4';\n  return <div className={cn('grid gap-4', preset, className)}>{children}</div>;\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,YAAY,EAC1B,UACA,aAIC;AACD,QAAO,oBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;EAAG;GAAe;;AAGrE,SAAgB,QAAQ,EACtB,UACA,aAIC;AACD,QACE,oBAAC;EAAI,WAAW,GAAG,yCAAyC,UAAU;EACnE;GACG;;AAIV,SAAgB,SAAS,EACvB,UACA,OAAO,GACP,aAKC;AASD,QAAO,oBAAC;EAAI,WAAW,GAAG,cAPxB,SAAS,IACL,gBACA,SAAS,IACP,gBACA,SAAS,IACP,gBACA,eACsC,UAAU;EAAG;GAAe"}

package/dist/components/forms/FormOneByOneLayout.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as react_jsx_runtime103 from "react/jsx-runtime";
+
+//#region src/components/forms/FormOneByOneLayout.d.ts
+interface OneByOneFieldDef {
+  key: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  input: React.ReactNode;
+  validate?: () => boolean;
+}
+interface FormOneByOneLayoutProps {
+  fields: OneByOneFieldDef[];
+  initialKey?: string;
+  onComplete?: () => void | Promise<void>;
+  className?: string;
+}
+declare function FormOneByOneLayout({
+  fields,
+  initialKey,
+  onComplete,
+  className
+}: FormOneByOneLayoutProps): react_jsx_runtime103.JSX.Element | null;
+//#endregion
+export { FormOneByOneLayout };
+//# sourceMappingURL=FormOneByOneLayout.d.ts.map

package/dist/components/forms/FormOneByOneLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormOneByOneLayout.d.ts","names":[],"sources":["../../../src/components/forms/FormOneByOneLayout.tsx"],"sourcesContent":[],"mappings":";;;;UAIiB,gBAAA;;SAER,KAAA,CAAM;EAFE,WAAA,CAAA,EAGD,KAAA,CAAM,SAHW;EAExB,KAAM,EAEN,KAAA,CAAM,SAFA;EACC,QAAM,CAAA,EAAA,GAAA,GAAA,OAAA;;AACE,UAIP,uBAAA,CAJO;EAIP,MAAA,EACP,gBADO,EAAuB;EAOxB,UAAA,CAAA,EAAA,MAAA;EACd,UAAA,CAAA,EAAA,GAAA,GAAA,IAAA,GAL0B,OAK1B,CAAA,IAAA,CAAA;EACA,SAAA,CAAA,EAAA,MAAA;;AAEA,iBAJc,kBAAA,CAId;EAAA,MAAA;EAAA,UAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EACC,uBADD,CAAA,EACwB,oBAAA,CAAA,GAAA,CAAA,OAAA,GADxB,IAAA"}