@lssm/lib.design-system 0.0.0-canary-20251120170226

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

@@ -0,0 +1,24 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime86 from "react/jsx-runtime";
+import { DataViewSpec } from "@lssm/lib.contracts/data-views";
+
+//#region src/components/data-view/DataViewList.d.ts
+interface DataViewListProps {
+  spec: DataViewSpec;
+  items: Record<string, unknown>[];
+  className?: string;
+  renderActions?: (item: Record<string, unknown>) => React$1.ReactNode;
+  onSelect?: (item: Record<string, unknown>) => void;
+  emptyState?: React$1.ReactNode;
+}
+declare function DataViewList({
+  spec,
+  items,
+  className,
+  renderActions,
+  onSelect,
+  emptyState
+}: DataViewListProps): react_jsx_runtime86.JSX.Element;
+//#endregion
+export { DataViewList, DataViewListProps };
+//# sourceMappingURL=DataViewList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewList.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,iBAAA;QACT;SACC;EAFQ,SAAA,CAAA,EAAA,MAAA;EACT,aAAA,CAAA,EAAA,CAAA,IAAA,EAGiB,MAHjB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAG6C,OAAA,CAAM,SAHnD;EACC,QAAA,CAAA,EAAA,CAAA,IAAA,EAGW,MAHX,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEgB,UAAA,CAAA,EAEV,OAAA,CAAM,SAFI;;AACL,iBAIJ,YAAA,CAJI;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAWjB,iBAXiB,CAAA,EAWA,mBAAA,CAAA,GAAA,CAAA,OAXA"}

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

@@ -0,0 +1,68 @@
+'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/DataViewList.tsx
+function DataViewList({ spec, items, className, renderActions, onSelect, emptyState }) {
+	if (spec.view.kind !== "list") throw new Error(`DataViewList received view kind "${spec.view.kind}", expected "list".`);
+	const view = spec.view;
+	const fields = view.fields;
+	const primaryField = view.primaryField ?? fields.find((field) => field.key === view.primaryField)?.key ?? fields[0]?.key;
+	if (!items.length) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: 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__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: items.map((item, idx) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("flex w-full flex-col gap-2 rounded-lg border border-muted bg-card p-4 text-left shadow-sm transition hover:border-primary/40 hover:shadow-md focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", view.layout === "compact" && "md:flex-row md:items-center md:gap-4"),
+			onClick: () => onSelect?.(item),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col gap-1",
+				children: [primaryField ? /* @__PURE__ */ jsx("span", {
+					className: "text-base font-medium text-foreground",
+					children: displayValue(item, fields, primaryField)
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground",
+					children: secondaryFieldKeys(view, primaryField).map((fieldKey) => /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-foreground/80",
+							children: fieldLabel(fields, fieldKey)
+						}), /* @__PURE__ */ jsx("span", { children: displayValue(item, fields, fieldKey) })]
+					}, fieldKey))
+				})]
+			}), renderActions ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: renderActions(item)
+			}) : null]
+		}, idx))
+	});
+}
+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 secondaryFieldKeys(view, primaryField) {
+	if (view.secondaryFields?.length) return view.secondaryFields;
+	return view.fields.map((field) => field.key).filter((key) => key !== primaryField);
+}
+
+//#endregion
+export { DataViewList };
+//# sourceMappingURL=DataViewList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewList.js","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewListConfig,\n  DataViewField,\n} from '@lssm/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewListProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  renderActions?: (item: Record<string, unknown>) => React.ReactNode;\n  onSelect?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n}\n\nexport function DataViewList({\n  spec,\n  items,\n  className,\n  renderActions,\n  onSelect,\n  emptyState,\n}: DataViewListProps) {\n  if (spec.view.kind !== 'list') {\n    throw new Error(\n      `DataViewList received view kind \"${spec.view.kind}\", expected \"list\".`\n    );\n  }\n  const view = spec.view as DataViewListConfig;\n  const fields = view.fields;\n  const primaryField =\n    view.primaryField ??\n    fields.find((field) => field.key === view.primaryField)?.key ??\n    fields[0]?.key;\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\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      {items.map((item, idx) => (\n        <button\n          type=\"button\"\n          key={idx}\n          className={cn(\n            'flex w-full flex-col gap-2 rounded-lg border border-muted bg-card p-4 text-left shadow-sm transition hover:border-primary/40 hover:shadow-md focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',\n            view.layout === 'compact' && 'md:flex-row md:items-center md:gap-4'\n          )}\n          onClick={() => onSelect?.(item)}\n        >\n          <div className=\"flex flex-1 flex-col gap-1\">\n            {primaryField ? (\n              <span className=\"text-base font-medium text-foreground\">\n                {displayValue(item, fields, primaryField)}\n              </span>\n            ) : null}\n            <div className=\"flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground\">\n              {secondaryFieldKeys(view, primaryField).map((fieldKey) => (\n                <span key={fieldKey} className=\"flex items-center gap-1.5\">\n                  <span className=\"font-medium text-foreground/80\">\n                    {fieldLabel(fields, fieldKey)}\n                  </span>\n                  <span>{displayValue(item, fields, fieldKey)}</span>\n                </span>\n              ))}\n            </div>\n          </div>\n          {renderActions ? (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              {renderActions(item)}\n            </div>\n          ) : null}\n        </button>\n      ))}\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 secondaryFieldKeys(view: DataViewListConfig, primaryField?: string) {\n  if (view.secondaryFields?.length) return view.secondaryFields;\n  return view.fields\n    .map((field) => field.key)\n    .filter((key) => key !== primaryField);\n}\n\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,aAAa,EAC3B,MACA,OACA,WACA,eACA,UACA,cACoB;AACpB,KAAI,KAAK,KAAK,SAAS,OACrB,OAAM,IAAI,MACR,oCAAoC,KAAK,KAAK,KAAK,qBACpD;CAEH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,eACJ,KAAK,gBACL,OAAO,MAAM,UAAU,MAAM,QAAQ,KAAK,aAAa,EAAE,OACzD,OAAO,IAAI;AAEb,KAAI,CAAC,MAAM,OACT,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,MAAM,KAAK,MAAM,QAChB,qBAAC;GACC,MAAK;GAEL,WAAW,GACT,2PACA,KAAK,WAAW,aAAa,uCAC9B;GACD,eAAe,WAAW,KAAK;cAE/B,qBAAC;IAAI,WAAU;eACZ,eACC,oBAAC;KAAK,WAAU;eACb,aAAa,MAAM,QAAQ,aAAa;MACpC,GACL,MACJ,oBAAC;KAAI,WAAU;eACZ,mBAAmB,MAAM,aAAa,CAAC,KAAK,aAC3C,qBAAC;MAAoB,WAAU;iBAC7B,oBAAC;OAAK,WAAU;iBACb,WAAW,QAAQ,SAAS;QACxB,EACP,oBAAC,oBAAM,aAAa,MAAM,QAAQ,SAAS,GAAQ;QAJ1C,SAKJ,CACP;MACE;KACF,EACL,gBACC,oBAAC;IAAI,WAAU;cACZ,cAAc,KAAK;KAChB,GACJ;KA5BC,IA6BE,CACT;GACE;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAc;AACzD,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,mBAAmB,MAA0B,cAAuB;AAC3E,KAAI,KAAK,iBAAiB,OAAQ,QAAO,KAAK;AAC9C,QAAO,KAAK,OACT,KAAK,UAAU,MAAM,IAAI,CACzB,QAAQ,QAAQ,QAAQ,aAAa"}

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

@@ -0,0 +1,48 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime87 from "react/jsx-runtime";
+import { DataViewSpec } from "@lssm/lib.contracts/data-views";
+
+//#region src/components/data-view/DataViewRenderer.d.ts
+interface DataViewRendererProps {
+  spec: DataViewSpec;
+  items?: Record<string, unknown>[];
+  item?: Record<string, unknown> | null;
+  className?: string;
+  renderActions?: (item: Record<string, unknown>) => React$1.ReactNode;
+  onSelect?: (item: Record<string, unknown>) => void;
+  onRowClick?: (item: Record<string, unknown>) => void;
+  headerActions?: React$1.ReactNode;
+  emptyState?: React$1.ReactNode;
+  footer?: React$1.ReactNode;
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  filters?: Record<string, any>;
+  onFilterChange?: (filters: Record<string, any>) => void;
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+  };
+  onPageChange?: (page: number) => void;
+}
+declare function DataViewRenderer({
+  spec,
+  items,
+  item,
+  className,
+  renderActions,
+  onSelect,
+  onRowClick,
+  headerActions,
+  emptyState,
+  footer,
+  search,
+  onSearchChange,
+  filters,
+  onFilterChange,
+  pagination,
+  onPageChange
+}: DataViewRendererProps): react_jsx_runtime87.JSX.Element;
+//#endregion
+export { DataViewRenderer, DataViewRendererProps };
+//# sourceMappingURL=DataViewRenderer.d.ts.map

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":";;;;;UAsBiB,qBAAA;QACT;UACE;EAFO,IAAA,CAAA,EAGR,MAHQ,CAAA,MAAA,EAAA,OAAqB,CAAA,GAAA,IAAA;EAC9B,SAAA,CAAA,EAAA,MAAA;EACE,aAAA,CAAA,EAAA,CAAA,IAAA,EAGe,MAHf,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAG2C,OAAA,CAAM,SAHjD;EACD,QAAA,CAAA,EAAA,CAAA,IAAA,EAGW,MAHX,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEgB,UAAA,CAAA,EAAA,CAAA,IAAA,EAEH,MAFG,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAA4B,aAAM,CAAA,EAGzC,OAAA,CAAM,SAHmC;EACvC,UAAA,CAAA,EAGL,OAAA,CAAM,SAHD;EACE,MAAA,CAAA,EAGX,OAAA,CAAM,SAHK;EACJ,MAAM,CAAA,EAAA,MAAA;EACT,cAAM,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACV,OAAM,CAAA,EAKL,MALK,CAAA,MAAA,EAAA,GAAA,CAAA;EAKL,cAAA,CAAA,EAAA,CAAA,OAAA,EACiB,MADjB,CAAA,MAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA;EACiB,UAAA,CAAA,EAAA;IAAM,IAAA,EAAA,MAAA;IAWnB,QAAA,EAAA,MAAgB;IAC9B,KAAA,EAAA,MAAA;EACA,CAAA;EACA,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;AAEA,iBALc,gBAAA,CAKd;EAAA,IAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,cAAA;EAAA,OAAA;EAAA,cAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EAYC,qBAZD,CAAA,EAYsB,mBAAA,CAAA,GAAA,CAAA,OAZtB"}

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$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@lssm/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$1.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: () => {
+						const newFilters = { ...filters };
+						delete newFilters[key];
+						onFilterChange?.(newFilters);
+					}
+				})) : [],
+				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":["React","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';\nimport { FiltersToolbar } from '../molecules/FiltersToolbar';\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationEllipsis,\n} from '@lssm/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, any>;\n  onFilterChange?: (filters: Record<string, any>) => 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                    const newFilters = { ...filters };\n                    delete newFilters[key];\n                    onFilterChange?.(newFilters);\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":";;;;;;;;;;;;AAiDA,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,cAAcA,QAAM,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,MAAMC,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;MACd,MAAM,aAAa,EAAE,GAAG,SAAS;AACjC,aAAO,WAAW;AAClB,uBAAiB,WAAW;;KAE/B,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$1 from "react";
+import * as react_jsx_runtime88 from "react/jsx-runtime";
+import { DataViewSpec } from "@lssm/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$1.ReactNode;
+  headerActions?: React$1.ReactNode;
+  footer?: React$1.ReactNode;
+}
+declare function DataViewTable({
+  spec,
+  items,
+  className,
+  onRowClick,
+  emptyState,
+  headerActions,
+  footer
+}: DataViewTableProps): react_jsx_runtime88.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;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,OAAA,CAAM,SAHZ;EAEa,aAAA,CAAA,EAEJ,OAAA,CAAM,SAFF;EACP,MAAM,CAAA,EAEV,OAAA,CAAM,SAFI;;AAEV,iBAGK,aAAA,CAHC;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,UAAA;EAAA,UAAA;EAAA,aAAA;EAAA;AAAA,CAAA,EAWd,kBAXc,CAAA,EAWI,mBAAA,CAAA,GAAA,CAAA,OAXJ"}

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_runtime89 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_runtime89.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,mBAAA,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 "@lssm/lib.ui-kit-web/ui/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@lssm/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 '@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":";;;;;;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$1 from "react";
+import * as react_jsx_runtime90 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_runtime90.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"}