@lssm/lib.design-system 1.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewRenderer.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewRenderer.tsx"],"sourcesContent":[],"mappings":";;;;UAYiB,qBAAA;QACT;EADS,KAAA,CAAA,EAEP,MAFO,CAAA,MAAA,EAAA,OAAqB,CAAA,EAAA;EAC9B,IAAA,CAAA,EAEC,MAFD,CAAA,MAAA,EAAA,OAAA,CAAA,GAAA,IAAA;EACE,SAAA,CAAA,EAAA,MAAA;EACD,aAAA,CAAA,EAAA,CAAA,IAAA,EAEgB,MAFhB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAE4C,OAAA,CAAM,SAFlD;EAEgB,QAAA,CAAA,EAAA,CAAA,IAAA,EACL,MADK,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAA4B,UAAM,CAAA,EAAA,CAAA,IAAA,EAErC,MAFqC,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EACvC,aAAA,CAAA,EAEF,OAAA,CAAM,SAFJ;EACE,UAAA,CAAA,EAEP,OAAA,CAAM,SAFC;EACJ,MAAM,CAAA,EAEb,OAAA,CAAM,SAFO;;AAEb,iBAGK,gBAAA,CAHC;EAAA,IAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EAcd,qBAdc,CAAA,EAcO,mBAAA,CAAA,GAAA,CAAA,OAdP"}

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

@@ -0,0 +1,69 @@
+'use client';
+
+
+import { DataViewList } from "./DataViewList.js";
+import { DataViewTable } from "./DataViewTable.js";
+import { DataViewDetail } from "./DataViewDetail.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewRenderer.tsx
+function DataViewRenderer({ spec, items = [], item = null, className, renderActions, onSelect, onRowClick, headerActions, emptyState, footer }) {
+	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"
+		});
+	}
+}
+
+//#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 '@lssm/lib.contracts/data-views';\nimport { DataViewList } from './DataViewList';\nimport { DataViewTable } from './DataViewTable';\nimport { DataViewDetail } from './DataViewDetail';\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\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}: DataViewRendererProps) {\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"],"mappings":";;;;;;;;;;AAyBA,SAAgB,iBAAiB,EAC/B,MACA,QAAQ,EAAE,EACV,OAAO,MACP,WACA,eACA,UACA,YACA,eACA,YACA,UACwB;AACxB,SAAQ,KAAK,KAAK,MAAlB;EACE,KAAK,OACH,QACE,oBAAC;GACO;GACC;GACI;GACI;GACL;GACE;IACZ;EAEN,KAAK,QACH,QACE,oBAAC;GACO;GACC;GACI;GACC;GACA;GACG;GACP;IACR;EAEN,KAAK,SACH,QACE,oBAAC;GACO;GACA;GACK;GACC;GACG;IACf;EAEN,KAAK,QAAQ;GACX,MAAM,OAAO,KAAK;GAClB,MAAMA,WAA+B;IACnC,MAAM;IACN,QAAQ;IACR,QAAQ,KAAK;IACb,SAAS,KAAK;IACd,SAAS,KAAK;IACd,cAAc,KAAK;IACnB,iBAAiB,KAAK;IACvB;AAKD,UACE,oBAAC;IACC,MANa;KACf,GAAG;KACH,MAAM;KACP;IAIU;IACI;IACI;IACL;IACE;KACZ;;EAGN,QACE,QAAO,oBAAC;GAAe;aAAW;IAAgC"}

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

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
+
+//#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$1.ReactNode;
+  headerActions?: React$1.ReactNode;
+  footer?: React$1.ReactNode;
+}
+declare function DataViewTable({
+  spec,
+  items,
+  className,
+  onRowClick,
+  emptyState,
+  headerActions,
+  footer
+}: DataViewTableProps): react_jsx_runtime23.JSX.Element;
+//#endregion
+export { DataViewTable, DataViewTableProps };
+//# 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;EADS,KAAA,EAER,MAFQ,CAAA,MAAA,EAAkB,OAAA,CAAA,EAAA;EAC3B,SAAA,CAAA,EAAA,MAAA;EACC,UAAA,CAAA,EAAA,CAAA,IAAA,EAEa,MAFb,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEa,UAAA,CAAA,EACP,OAAA,CAAM,SADC;EACP,aAAM,CAAA,EACH,OAAA,CAAM,SADH;EACH,MAAM,CAAA,EACb,OAAA,CAAM,SADO;;AACE,iBAGV,aAAA,CAHU;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,UAAA;EAAA,UAAA;EAAA,aAAA;EAAA;AAAA,CAAA,EAWvB,kBAXuB,CAAA,EAWL,mBAAA,CAAA,GAAA,CAAA,OAXK"}

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

@@ -0,0 +1,94 @@
+'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-base font-semibold text-foreground",
+				children: spec.meta.title
+			}), headerActions]
+		}), emptyState ?? /* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground",
+			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-base font-semibold text-foreground",
+					children: spec.meta.title
+				}), headerActions]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto rounded-lg border border-border bg-card shadow-sm",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cn("min-w-full divide-y divide-border 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("px-4 py-3 text-left font-semibold text-muted-foreground", alignmentClass(column.align)),
+							children: column.label
+						}, `${column.field}.${columnIdx}`)) })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-y divide-border bg-background",
+						children: items.map((item, rowIdx) => /* @__PURE__ */ jsx("tr", {
+							className: cn(onRowClick && "cursor-pointer hover:bg-muted/30 transition-colors"),
+							onClick: () => onRowClick?.(item),
+							children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+								className: cn("px-4 py-3 text-foreground", 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 '@lssm/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-base font-semibold text-foreground\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground\">\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-base font-semibold text-foreground\">\n          {spec.meta.title}\n        </h3>\n        {headerActions}\n      </div>\n      <div className=\"overflow-x-auto rounded-lg border border-border bg-card shadow-sm\">\n        <table\n          className={cn(\n            'min-w-full divide-y divide-border 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                    'px-4 py-3 text-left font-semibold text-muted-foreground',\n                    alignmentClass(column.align)\n                  )}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-border bg-background\">\n            {items.map((item, rowIdx) => (\n              <tr\n                key={rowIdx}\n                className={cn(\n                  onRowClick &&\n                    'cursor-pointer hover:bg-muted/30 transition-colors'\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((column) => (\n                  <td\n                    key={column.field}\n                    className={cn(\n                      'px-4 py-3 text-foreground',\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\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.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/data-view/utils.d.ts
+declare function getAtPath(source: Record<string, unknown> | undefined, path: string): unknown;
+declare function formatValue(value: unknown, format?: string): string;
+//#endregion
+export { formatValue, getAtPath };
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/components/data-view/utils.ts"],"sourcesContent":[],"mappings":";iBAEgB,SAAA,SACN;AADM,iBAuBA,WAAA,CAtBA,KAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,MAAA,CAAA,EAAA,MAAA"}

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

@@ -0,0 +1,44 @@
+'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\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/FormCardLayout.d.ts

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime107 from "react/jsx-runtime";
+
+//#region src/components/forms/FormCardLayout.d.ts
+interface FormCardLayoutProps {
+  title?: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  actions?: React$1.ReactNode;
+  children: React$1.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+declare function FormCardLayout({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName
+}: FormCardLayoutProps): react_jsx_runtime107.JSX.Element;
+//#endregion
+export { FormCardLayout, FormCardLayoutProps };
+//# 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,OAAA,CAAM;gBACA,OAAA,CAAM;EAFL,OAAA,CAAA,EAGL,OAAA,CAAM,SAHkB;EAC1B,QAAM,EAGJ,OAAA,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,29 @@
+import { cn, init_utils } from "../../ui-kit-web/dist/ui/utils.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui-kit-web/dist/ui/card.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/forms/FormCardLayout.tsx
+init_utils();
+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 '@lssm/lib.ui-kit-web/ui/card';\nimport { cn } from '@lssm/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":";;;;;;YAOmD;AAWnD,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$1 from "react";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+
+//#region src/components/forms/FormDialog.d.ts
+interface FormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  children: React$1.ReactNode;
+  footer?: React$1.ReactNode;
+  maxWidth?: string;
+}
+declare function FormDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  maxWidth
+}: FormDialogProps): react_jsx_runtime14.JSX.Element;
+//#endregion
+export { FormDialog, FormDialogProps };
+//# 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,OAAA,CAAM,SAHiB;EAGvB,WAAM,CAAA,EACC,OAAA,CAAM,SADP;EACC,QAAM,EACV,OAAA,CAAM,SADI;EACV,MAAM,CAAA,EACP,OAAA,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,26 @@
+'use client';
+
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui-kit-web/dist/ui/dialog.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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 '@lssm/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$1 from "react";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+
+//#region src/components/forms/FormLayout.d.ts
+declare function FormSection({
+  children,
+  className
+}: {
+  children: React$1.ReactNode;
+  className?: string;
+}): react_jsx_runtime18.JSX.Element;
+declare function FormRow({
+  children,
+  className
+}: {
+  children: React$1.ReactNode;
+  className?: string;
+}): react_jsx_runtime18.JSX.Element;
+declare function FormGrid({
+  children,
+  cols,
+  className
+}: {
+  children: React$1.ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+  className?: string;
+}): react_jsx_runtime18.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,OAAA,CAAM;;AAJlB,CAAA,CAAA,EAMC,mBAAA,CAAA,GAAA,CAAA,OAN0B;AACzB,iBASc,OAAA,CATd;EAAA,QAAA;EAAA;CAAA,EAAA;EACA,QAAA,EAYU,OAAA,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,OAAA,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,31 @@
+'use client';
+
+
+import { cn, init_utils } from "../../ui-kit-web/dist/ui/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/forms/FormLayout.tsx
+init_utils();
+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 '@lssm/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":";;;;;;;;YAGmD;AAEnD,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$1 from "react";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/components/forms/FormOneByOneLayout.d.ts
+interface OneByOneFieldDef {
+  key: string;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  input: React$1.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_runtime21.JSX.Element | null;
+//#endregion
+export { FormOneByOneLayout, FormOneByOneLayoutProps, OneByOneFieldDef };
+//# 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,OAAA,CAAM;EAFE,WAAA,CAAA,EAGD,OAAA,CAAM,SAHW;EAExB,KAAM,EAEN,OAAA,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,mBAAA,CAAA,GAAA,CAAA,OAAA,GADxB,IAAA"}

package/dist/components/forms/FormOneByOneLayout.js

@@ -0,0 +1,58 @@
+import { cn, init_utils } from "../../ui-kit-web/dist/ui/utils.js";
+import { Button } from "../atoms/Button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/forms/FormOneByOneLayout.tsx
+init_utils();
+function FormOneByOneLayout({ fields, initialKey, onComplete, className }) {
+	const indexByKey = React$1.useMemo(() => Object.fromEntries(fields.map((f, i) => [f.key, i])), [fields]);
+	const [idx, setIdx] = React$1.useState(() => {
+		if (initialKey && initialKey in indexByKey) return indexByKey[initialKey] || 0;
+		return 0;
+	});
+	const atLast = idx === fields.length - 1;
+	const field = fields[idx];
+	if (!field) return null;
+	const next = async () => {
+		if (field.validate && !field.validate()) return;
+		if (atLast) await onComplete?.();
+		else setIdx((i) => Math.min(i + 1, fields.length - 1));
+	};
+	const prev = () => setIdx((i) => Math.max(0, i - 1));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-h-[320px] flex-col items-stretch justify-between", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "text-lg font-medium",
+					children: field.title
+				}),
+				field.description && /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground text-base",
+					children: field.description
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "pt-2",
+					children: field.input
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-6 flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onPress: prev,
+				disabled: idx === 0,
+				children: "Back"
+			}), /* @__PURE__ */ jsx(Button, {
+				onPress: next,
+				children: atLast ? "Done" : "Continue"
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { FormOneByOneLayout };
+//# sourceMappingURL=FormOneByOneLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormOneByOneLayout.js","names":["React"],"sources":["../../../src/components/forms/FormOneByOneLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '../atoms/Button';\nimport { cn } from '@lssm/lib.ui-kit-web/ui/utils';\n\nexport interface OneByOneFieldDef {\n  key: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  input: React.ReactNode;\n  validate?: () => boolean; // called before advancing\n}\n\nexport interface FormOneByOneLayoutProps {\n  fields: OneByOneFieldDef[];\n  initialKey?: string;\n  onComplete?: () => void | Promise<void>;\n  className?: string;\n}\n\nexport function FormOneByOneLayout({\n  fields,\n  initialKey,\n  onComplete,\n  className,\n}: FormOneByOneLayoutProps) {\n  const indexByKey = React.useMemo(\n    () => Object.fromEntries(fields.map((f, i) => [f.key, i])),\n    [fields]\n  );\n  const [idx, setIdx] = React.useState<number>(() => {\n    if (initialKey && initialKey in indexByKey) {\n      return indexByKey[initialKey] || 0;\n    }\n    return 0;\n  });\n  const atLast = idx === fields.length - 1;\n  const field = fields[idx];\n\n  if (!field) {\n    return null;\n  }\n\n  const next = async () => {\n    if (field.validate && !field.validate()) return;\n    if (atLast) {\n      await onComplete?.();\n    } else {\n      setIdx((i) => Math.min(i + 1, fields.length - 1));\n    }\n  };\n  const prev = () => setIdx((i) => Math.max(0, i - 1));\n\n  return (\n    <div\n      className={cn(\n        'flex min-h-[320px] flex-col items-stretch justify-between',\n        className\n      )}\n    >\n      <div className=\"space-y-2\">\n        <div className=\"text-lg font-medium\">{field.title}</div>\n        {field.description && (\n          <div className=\"text-muted-foreground text-base\">\n            {field.description}\n          </div>\n        )}\n        <div className=\"pt-2\">{field.input}</div>\n      </div>\n      <div className=\"mt-6 flex items-center justify-between\">\n        <Button variant=\"ghost\" onPress={prev} disabled={idx === 0}>\n          Back\n        </Button>\n        <Button onPress={next}>{atLast ? 'Done' : 'Continue'}</Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;YAEmD;AAiBnD,SAAgB,mBAAmB,EACjC,QACA,YACA,YACA,aAC0B;CAC1B,MAAM,aAAaA,QAAM,cACjB,OAAO,YAAY,OAAO,KAAK,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAC1D,CAAC,OAAO,CACT;CACD,MAAM,CAAC,KAAK,UAAUA,QAAM,eAAuB;AACjD,MAAI,cAAc,cAAc,WAC9B,QAAO,WAAW,eAAe;AAEnC,SAAO;GACP;CACF,MAAM,SAAS,QAAQ,OAAO,SAAS;CACvC,MAAM,QAAQ,OAAO;AAErB,KAAI,CAAC,MACH,QAAO;CAGT,MAAM,OAAO,YAAY;AACvB,MAAI,MAAM,YAAY,CAAC,MAAM,UAAU,CAAE;AACzC,MAAI,OACF,OAAM,cAAc;MAEpB,SAAQ,MAAM,KAAK,IAAI,IAAI,GAAG,OAAO,SAAS,EAAE,CAAC;;CAGrD,MAAM,aAAa,QAAQ,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;AAEpD,QACE,qBAAC;EACC,WAAW,GACT,6DACA,UACD;aAED,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eAAuB,MAAM;MAAY;IACvD,MAAM,eACL,oBAAC;KAAI,WAAU;eACZ,MAAM;MACH;IAER,oBAAC;KAAI,WAAU;eAAQ,MAAM;MAAY;;IACrC,EACN,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAO,SAAQ;IAAQ,SAAS;IAAM,UAAU,QAAQ;cAAG;KAEnD,EACT,oBAAC;IAAO,SAAS;cAAO,SAAS,SAAS;KAAoB;IAC1D;GACF"}

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

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime64 from "react/jsx-runtime";
+
+//#region src/components/forms/FormStepsLayout.d.ts
+interface StepDef {
+  key: string;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  content: React$1.ReactNode;
+}
+interface FormStepsLayoutProps {
+  steps: StepDef[];
+  initialStepKey?: string;
+  onFinish?: () => void | Promise<void>;
+  canNext?: (stepKey: string) => boolean;
+  className?: string;
+}
+declare function FormStepsLayout({
+  steps,
+  initialStepKey,
+  onFinish,
+  canNext,
+  className
+}: FormStepsLayoutProps): react_jsx_runtime64.JSX.Element | null;
+//#endregion
+export { FormStepsLayout, FormStepsLayoutProps, StepDef };
+//# sourceMappingURL=FormStepsLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormStepsLayout.d.ts","names":[],"sources":["../../../src/components/forms/FormStepsLayout.tsx"],"sourcesContent":[],"mappings":";;;;UAKiB,OAAA;;SAER,OAAA,CAAM;EAFE,WAAO,CAAA,EAGR,OAAA,CAAM,SAHE;EAEf,OAAM,EAEJ,OAAA,CAAM,SAFF;;AAEJ,UAGM,oBAAA,CAHA;EAAS,KAAA,EAIjB,OAJiB,EAAA;EAGT,cAAA,CAAA,EAAA,MAAoB;EAQrB,QAAA,CAAA,EAAA,GAAA,GAAA,IAAe,GALL,OAKK,CAAA,IAAA,CAAA;EAC7B,OAAA,CAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAAA,OAAA;EACA,SAAA,CAAA,EAAA,MAAA;;AAEA,iBAJc,eAAA,CAId;EAAA,KAAA;EAAA,cAAA;EAAA,QAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAEC,oBAFD,CAAA,EAEqB,mBAAA,CAAA,GAAA,CAAA,OAAA,GAFrB,IAAA"}