tembro 3.0.0 → 3.1.5

package/dist/src/components/overlay/drawer.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { Dialog as n, DialogClose as r, DialogContent as i, DialogDescription as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../ui/dialog/index.js";
+import "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/overlay/drawer.tsx
+var d = {
+	right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right",
+	left: "left-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left",
+	top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
+	bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom"
+}, f = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-lg",
+	xl: "sm:max-w-2xl",
+	full: "max-w-none sm:max-w-[min(100vw,72rem)]"
+};
+function p({ trigger: t, title: r, description: p, side: m = "right", width: h = "lg", footer: g, headerClassName: _, bodyClassName: v, footerClassName: y, contentClassName: b, showCloseButton: x = !0, children: S, ...C }) {
+	return /* @__PURE__ */ u(n, {
+		...C,
+		children: [t ? /* @__PURE__ */ l(c, { render: t }) : null, /* @__PURE__ */ u(i, {
+			size: "full",
+			showCloseButton: x,
+			"data-side": m,
+			"data-width": h,
+			className: e("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overscroll-contain p-0", d[m], (m === "left" || m === "right") && f[h], b),
+			children: [
+				(r || p) && /* @__PURE__ */ u(o, {
+					className: e("border-b border-border/70 p-6", _),
+					children: [r ? /* @__PURE__ */ l(s, { children: r }) : null, p ? /* @__PURE__ */ l(a, { children: p }) : null]
+				}),
+				/* @__PURE__ */ l("div", {
+					"data-slot": "drawer-body",
+					className: e("min-h-0 flex-1 overflow-y-auto p-6", v),
+					children: S
+				}),
+				g ? /* @__PURE__ */ l("div", {
+					"data-slot": "drawer-footer",
+					className: e("border-t border-border/70 p-5", y),
+					children: g
+				}) : null
+			]
+		})]
+	});
+}
+function m({ children: e = "Close", ...n }) {
+	return /* @__PURE__ */ l(r, {
+		render: /* @__PURE__ */ l(t, {
+			type: "button",
+			variant: "outline",
+			...n
+		}),
+		children: e
+	});
+}
+//#endregion
+export { p as Drawer, m as DrawerCloseButton };

package/dist/src/components/overlay/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert-dialog.cjs"),t=require("./confirm-dialog.cjs"),n=require("./drawer.cjs");exports.AlertDialog=e.AlertDialog,exports.ConfirmDialog=t.ConfirmDialog,exports.Drawer=n.Drawer,exports.DrawerCloseButton=n.DrawerCloseButton;

package/dist/src/components/overlay/index.js

@@ -0,0 +1,4 @@
+import { AlertDialog as e } from "./alert-dialog.js";
+import { ConfirmDialog as t } from "./confirm-dialog.js";
+import { Drawer as n, DrawerCloseButton as r } from "./drawer.js";
+export { e as AlertDialog, t as ConfirmDialog, n as Drawer, r as DrawerCloseButton };

package/dist/src/components/patterns/bulk-action-bar.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({className:e,selectedCount:r,selectedLabel:o=e=>`${e} selected`,actions:s,clearLabel:c=`Clear`,onClear:l,children:u,...d}){return r<=0?null:(0,a.jsxs)(`div`,{"data-slot":`bulk-action-bar`,className:t.cn(`flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between`,e),...d,children:[(0,a.jsx)(`div`,{"data-slot":`bulk-action-bar-count`,className:`text-sm font-medium`,children:o(r)}),(0,a.jsxs)(`div`,{"data-slot":`bulk-action-bar-actions`,className:`flex flex-wrap items-center gap-2`,children:[u,s,l&&(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:l,children:[(0,a.jsx)(i.XIcon,{"data-icon":`inline-start`}),c]})]})]})}exports.BulkActionBar=o;

package/dist/src/components/patterns/bulk-action-bar.js

@@ -0,0 +1,34 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { XIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/patterns/bulk-action-bar.tsx
+function a({ className: a, selectedCount: o, selectedLabel: s = (e) => `${e} selected`, actions: c, clearLabel: l = "Clear", onClear: u, children: d, ...f }) {
+	return o <= 0 ? null : /* @__PURE__ */ i("div", {
+		"data-slot": "bulk-action-bar",
+		className: e("flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between", a),
+		...f,
+		children: [/* @__PURE__ */ r("div", {
+			"data-slot": "bulk-action-bar-count",
+			className: "text-sm font-medium",
+			children: s(o)
+		}), /* @__PURE__ */ i("div", {
+			"data-slot": "bulk-action-bar-actions",
+			className: "flex flex-wrap items-center gap-2",
+			children: [
+				d,
+				c,
+				u && /* @__PURE__ */ i(t, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					onClick: u,
+					children: [/* @__PURE__ */ r(n, { "data-icon": "inline-start" }), l]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { a as BulkActionBar };

package/dist/src/components/patterns/data-view.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../data-table/data-table.cjs"),r=require("./empty-state.cjs"),i=require("./page-toolbar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s({className:e,title:a,description:s,toolbar:c,table:l,count:u,loading:d=!1,error:f,emptyTitle:p=`No results`,emptyDescription:m=`Try adjusting filters or create a new item.`,children:h,...g}){let _=!!(a||s),v=!!c,y=u===void 0?!!(h||l):u>0;return(0,o.jsxs)(`div`,{"data-slot":`data-view`,className:t.cn(`grid min-w-0 gap-4`,e),...g,children:[_&&(0,o.jsxs)(`div`,{"data-slot":`data-view-header`,className:`grid gap-1`,children:[a&&(0,o.jsx)(`h2`,{className:`text-xl font-semibold tracking-tight`,children:a}),s&&(0,o.jsx)(`p`,{className:`text-sm leading-6 text-muted-foreground`,children:s})]}),v&&(0,o.jsx)(i.PageToolbar,{...c}),f?(0,o.jsx)(r.EmptyState,{tone:`error`,title:`Something went wrong`,description:f}):d?(0,o.jsx)(r.EmptyState,{tone:`info`,title:`Loading data`,description:`Please wait while the latest data is prepared.`}):y?(0,o.jsxs)(`div`,{"data-slot":`data-view-content`,className:`min-w-0`,children:[h,l&&(0,o.jsx)(n.DataTable,{...l})]}):(0,o.jsx)(r.EmptyState,{title:p,description:m})]})}exports.DataView=s;

package/dist/src/components/patterns/data-view.js

@@ -0,0 +1,47 @@
+import { cn as e } from "../../lib/utils.js";
+import { DataTable as t } from "../data-table/data-table.js";
+import { EmptyState as n } from "./empty-state.js";
+import { PageToolbar as r } from "./page-toolbar.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/patterns/data-view.tsx
+function o({ className: o, title: s, description: c, toolbar: l, table: u, count: d, loading: f = !1, error: p, emptyTitle: m = "No results", emptyDescription: h = "Try adjusting filters or create a new item.", children: g, ..._ }) {
+	let v = !!(s || c), y = !!l, b = d === void 0 ? !!(g || u) : d > 0;
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "data-view",
+		className: e("grid min-w-0 gap-4", o),
+		..._,
+		children: [
+			v && /* @__PURE__ */ a("div", {
+				"data-slot": "data-view-header",
+				className: "grid gap-1",
+				children: [s && /* @__PURE__ */ i("h2", {
+					className: "text-xl font-semibold tracking-tight",
+					children: s
+				}), c && /* @__PURE__ */ i("p", {
+					className: "text-sm leading-6 text-muted-foreground",
+					children: c
+				})]
+			}),
+			y && /* @__PURE__ */ i(r, { ...l }),
+			p ? /* @__PURE__ */ i(n, {
+				tone: "error",
+				title: "Something went wrong",
+				description: p
+			}) : f ? /* @__PURE__ */ i(n, {
+				tone: "info",
+				title: "Loading data",
+				description: "Please wait while the latest data is prepared."
+			}) : b ? /* @__PURE__ */ a("div", {
+				"data-slot": "data-view-content",
+				className: "min-w-0",
+				children: [g, u && /* @__PURE__ */ i(t, { ...u })]
+			}) : /* @__PURE__ */ i(n, {
+				title: m,
+				description: h
+			})
+		]
+	});
+}
+//#endregion
+export { o as DataView };

package/dist/src/components/patterns/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`resource-page`,`ResourcePage`,`patterns`,`Full resource index page shell for admin dashboards.`),e.component(`resource-detail-page`,`ResourceDetailPage`,`patterns`,`Detail page shell with title, metadata and sections.`)]);exports.patternsShowcaseDemoRegistry=t;

package/dist/src/components/patterns/demo.js

@@ -0,0 +1,5 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/patterns/demo.tsx
+var n = t([e("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."), e("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections.")]);
+//#endregion
+export { n as patternsShowcaseDemoRegistry };

package/dist/src/components/patterns/detail-layout.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({className:e,title:n,description:i,eyebrow:a,actions:o,breadcrumbs:s,summary:c,aside:l,footer:u,headerClassName:d,contentClassName:f,asideClassName:p,children:m,...h}){let g=!!(n||i||a||o),_=!!(m||l);return(0,r.jsxs)(`div`,{"data-slot":`detail-layout`,className:t.cn(`grid min-w-0 gap-4`,e),...h,children:[s&&(0,r.jsx)(`div`,{"data-slot":`detail-layout-breadcrumbs`,children:s}),g&&(0,r.jsxs)(`div`,{"data-slot":`detail-layout-header`,className:t.cn(`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,d),children:[(0,r.jsxs)(`div`,{className:`grid min-w-0 gap-1`,children:[a&&(0,r.jsx)(`div`,{className:`text-xs font-medium uppercase tracking-wide text-muted-foreground`,children:a}),n&&(0,r.jsx)(`h1`,{className:`text-2xl font-semibold tracking-tight`,children:n}),i&&(0,r.jsx)(`p`,{className:`max-w-3xl text-sm leading-6 text-muted-foreground`,children:i})]}),o&&(0,r.jsx)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:o})]}),c&&(0,r.jsx)(`div`,{"data-slot":`detail-layout-summary`,children:c}),_&&(0,r.jsxs)(`div`,{"data-slot":`detail-layout-content`,className:t.cn(`grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]`,f),children:[(0,r.jsx)(`main`,{"data-slot":`detail-layout-main`,className:`min-w-0`,children:m}),l&&(0,r.jsx)(`aside`,{"data-slot":`detail-layout-aside`,className:t.cn(`min-w-0`,p),children:l})]}),u&&(0,r.jsx)(`div`,{"data-slot":`detail-layout-footer`,children:u})]})}exports.DetailLayout=i;

package/dist/src/components/patterns/detail-layout.js

@@ -0,0 +1,65 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/patterns/detail-layout.tsx
+function r({ className: r, title: i, description: a, eyebrow: o, actions: s, breadcrumbs: c, summary: l, aside: u, footer: d, headerClassName: f, contentClassName: p, asideClassName: m, children: h, ...g }) {
+	let _ = !!(i || a || o || s), v = !!(h || u);
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "detail-layout",
+		className: e("grid min-w-0 gap-4", r),
+		...g,
+		children: [
+			c && /* @__PURE__ */ t("div", {
+				"data-slot": "detail-layout-breadcrumbs",
+				children: c
+			}),
+			_ && /* @__PURE__ */ n("div", {
+				"data-slot": "detail-layout-header",
+				className: e("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", f),
+				children: [/* @__PURE__ */ n("div", {
+					className: "grid min-w-0 gap-1",
+					children: [
+						o && /* @__PURE__ */ t("div", {
+							className: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
+							children: o
+						}),
+						i && /* @__PURE__ */ t("h1", {
+							className: "text-2xl font-semibold tracking-tight",
+							children: i
+						}),
+						a && /* @__PURE__ */ t("p", {
+							className: "max-w-3xl text-sm leading-6 text-muted-foreground",
+							children: a
+						})
+					]
+				}), s && /* @__PURE__ */ t("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: s
+				})]
+			}),
+			l && /* @__PURE__ */ t("div", {
+				"data-slot": "detail-layout-summary",
+				children: l
+			}),
+			v && /* @__PURE__ */ n("div", {
+				"data-slot": "detail-layout-content",
+				className: e("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", p),
+				children: [/* @__PURE__ */ t("main", {
+					"data-slot": "detail-layout-main",
+					className: "min-w-0",
+					children: h
+				}), u && /* @__PURE__ */ t("aside", {
+					"data-slot": "detail-layout-aside",
+					className: e("min-w-0", m),
+					children: u
+				})]
+			}),
+			d && /* @__PURE__ */ t("div", {
+				"data-slot": "detail-layout-footer",
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { r as DetailLayout };

package/dist/src/components/patterns/empty-state.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){return e.href?(0,a.jsx)(`a`,{className:n.buttonVariants({variant:e.variant??t}),href:e.href,children:e.label}):(0,a.jsx)(n.Button,{type:`button`,variant:e.variant??t,onClick:e.onClick,children:e.label})}function s(e){return e===`error`?(0,a.jsx)(i.AlertCircleIcon,{"data-icon":`inline-start`}):(0,a.jsx)(i.SearchXIcon,{"data-icon":`inline-start`})}function c({className:e,tone:n=`empty`,title:r,description:i,icon:c,primaryAction:l,secondaryAction:u,compact:d=!1,...f}){return(0,a.jsxs)(`div`,{"data-slot":`empty-state`,"data-tone":n,"data-compact":d||void 0,role:n===`error`?`alert`:`status`,className:t.cn(`flex flex-col items-center justify-center rounded-xl border bg-card text-center text-card-foreground shadow-sm`,d?`gap-3 p-5`:`min-h-64 gap-4 p-8`,e),...f,children:[(0,a.jsx)(`div`,{"data-slot":`empty-state-icon`,className:`flex size-12 items-center justify-center rounded-full border bg-muted text-muted-foreground`,children:c??s(n)}),(r||i)&&(0,a.jsxs)(`div`,{"data-slot":`empty-state-content`,className:`grid max-w-md gap-1`,children:[r&&(0,a.jsx)(`h2`,{className:`text-base font-semibold tracking-tight`,children:r}),i&&(0,a.jsx)(`p`,{className:`text-sm leading-6 text-muted-foreground`,children:i})]}),(l||u)&&(0,a.jsxs)(`div`,{"data-slot":`empty-state-actions`,className:`flex flex-wrap items-center justify-center gap-2`,children:[u?o(u,`outline`):null,l?o(l,`default`):null]})]})}function l(e){return(0,a.jsx)(c,{tone:`error`,...e})}exports.EmptyState=c,exports.ErrorState=l;

package/dist/src/components/patterns/empty-state.js

@@ -0,0 +1,62 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t, buttonVariants as n } from "../ui/button/index.js";
+import "react";
+import { AlertCircleIcon as r, SearchXIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/patterns/empty-state.tsx
+function s(e, r) {
+	return e.href ? /* @__PURE__ */ a("a", {
+		className: n({ variant: e.variant ?? r }),
+		href: e.href,
+		children: e.label
+	}) : /* @__PURE__ */ a(t, {
+		type: "button",
+		variant: e.variant ?? r,
+		onClick: e.onClick,
+		children: e.label
+	});
+}
+function c(e) {
+	return a(e === "error" ? r : i, { "data-icon": "inline-start" });
+}
+function l({ className: t, tone: n = "empty", title: r, description: i, icon: l, primaryAction: u, secondaryAction: d, compact: f = !1, ...p }) {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "empty-state",
+		"data-tone": n,
+		"data-compact": f || void 0,
+		role: n === "error" ? "alert" : "status",
+		className: e("flex flex-col items-center justify-center rounded-xl border bg-card text-center text-card-foreground shadow-sm", f ? "gap-3 p-5" : "min-h-64 gap-4 p-8", t),
+		...p,
+		children: [
+			/* @__PURE__ */ a("div", {
+				"data-slot": "empty-state-icon",
+				className: "flex size-12 items-center justify-center rounded-full border bg-muted text-muted-foreground",
+				children: l ?? c(n)
+			}),
+			(r || i) && /* @__PURE__ */ o("div", {
+				"data-slot": "empty-state-content",
+				className: "grid max-w-md gap-1",
+				children: [r && /* @__PURE__ */ a("h2", {
+					className: "text-base font-semibold tracking-tight",
+					children: r
+				}), i && /* @__PURE__ */ a("p", {
+					className: "text-sm leading-6 text-muted-foreground",
+					children: i
+				})]
+			}),
+			(u || d) && /* @__PURE__ */ o("div", {
+				"data-slot": "empty-state-actions",
+				className: "flex flex-wrap items-center justify-center gap-2",
+				children: [d ? s(d, "outline") : null, u ? s(u, "default") : null]
+			})
+		]
+	});
+}
+function u(e) {
+	return /* @__PURE__ */ a(l, {
+		tone: "error",
+		...e
+	});
+}
+//#endregion
+export { l as EmptyState, u as ErrorState };

package/dist/src/components/patterns/form-builder.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../form/form-input.cjs"),i=require("../form/form-select.cjs"),a=require("../form/form-switch.cjs"),o=require("../form/form-textarea.cjs"),s=require("../form/form-date-range-input.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u={compact:`gap-3`,default:`gap-4`,comfortable:`gap-6`},d={1:`grid-cols-1`,2:`grid-cols-1 md:grid-cols-2`,3:`grid-cols-1 md:grid-cols-2 xl:grid-cols-3`,4:`grid-cols-1 md:grid-cols-2 xl:grid-cols-4`},f={1:`col-span-1`,2:`md:col-span-2`,3:`xl:col-span-3`,4:`xl:col-span-4`,full:`col-span-full`};function p(e){let{id:t,hidden:n,className:r,colSpan:i,props:a}=e;return{base:{id:t,hidden:n,className:r,colSpan:i},props:a}}function m(e){let{base:t,props:n}=p(e);return{...t,type:`input`,props:n}}function h(e){let{base:t,props:n}=p(e);return{...t,type:`textarea`,props:n}}function g(e){let{base:t,props:n}=p(e);return{...t,type:`select`,props:n}}function _(e){let{base:t,props:n}=p(e);return{...t,type:`async-select`,props:n}}function v(e){let{base:t,props:n}=p(e);return{...t,type:`switch`,props:n}}function y(e){let{base:t,props:n}=p(e);return{...t,type:`number`,props:n}}function b(e){let{base:t,props:n}=p(e);return{...t,type:`phone`,props:n}}function x(e){let{base:t,props:n}=p(e);return{...t,type:`date`,props:n}}function S(e){let{base:t,props:n}=p(e);return{...t,type:`date-range`,props:n}}function C(e){let{id:t,hidden:n,className:r,colSpan:i,render:a}=e;return{id:t,hidden:n,className:r,colSpan:i,type:`custom`,render:a}}function w(e){return e}function T(e,t){let n=r.FormInput,u=i.FormSelect;switch(e.type){case`custom`:return e.render(t);case`input`:return c.createElement(n,{control:t.control,disabled:t.disabled,readOnly:t.readOnly,...e.props});case`textarea`:return(0,l.jsx)(o.FormTextarea,{control:t.control,disabled:t.disabled,readOnly:t.readOnly,...e.props});case`select`:return c.createElement(u,{control:t.control,disabled:t.disabled,...e.props});case`async-select`:return c.createElement(u,{control:t.control,disabled:t.disabled,kind:`async`,...e.props});case`switch`:return(0,l.jsx)(a.FormSwitch,{control:t.control,disabled:t.disabled,...e.props});case`number`:return c.createElement(n,{control:t.control,disabled:t.disabled,readOnly:t.readOnly,kind:`number`,...e.props});case`phone`:return c.createElement(n,{control:t.control,disabled:t.disabled,readOnly:t.readOnly,kind:`phone`,...e.props});case`date`:return c.createElement(n,{control:t.control,disabled:t.disabled,readOnly:t.readOnly,kind:`date`,...e.props});case`date-range`:return(0,l.jsx)(s.FormDateRangeInput,{control:t.control,fromInputProps:{disabled:t.disabled,readOnly:t.readOnly},toInputProps:{disabled:t.disabled,readOnly:t.readOnly},...e.props});default:return null}}function E({fields:e,sections:t}){return t?.length?t:[{id:`default`,fields:e??[]}]}function D({className:e,control:r,fields:i,sections:a,layout:o=`grid`,density:s=`default`,columns:p=2,disabled:m,readOnly:h,footer:g,submitLabel:_,resetLabel:v,onResetClick:y,isSubmitting:b,sectionClassName:x,fieldClassName:S,footerClassName:C,...w}){let D=E({fields:i,sections:a}),O=c.useMemo(()=>({control:r,disabled:m,readOnly:h}),[r,m,h]);return(0,l.jsxs)(`form`,{"data-slot":`form-builder`,className:t.cn(`grid`,u[s],e),...w,children:[D.filter(e=>!e.hidden).map(e=>(0,l.jsxs)(`section`,{"data-slot":`form-builder-section`,className:t.cn(`grid gap-4`,e.className,x),children:[(e.title||e.description||e.actions)&&(0,l.jsxs)(`div`,{"data-slot":`form-builder-section-header`,className:`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,l.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e.title&&(0,l.jsx)(`h2`,{className:`text-base font-semibold leading-none tracking-tight`,children:e.title}),e.description&&(0,l.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.description})]}),e.actions&&(0,l.jsx)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:e.actions})]}),(0,l.jsx)(`div`,{"data-slot":`form-builder-fields`,"data-layout":o,className:t.cn(`grid`,u[s],o===`grid`?d[p]:`grid-cols-1`),children:e.fields.filter(e=>!e.hidden).map(e=>(0,l.jsx)(`div`,{"data-slot":`form-builder-field`,className:t.cn(e.colSpan&&f[e.colSpan],e.className,S),children:T(e,O)},e.id))})]},e.id)),(g||_||v)&&(0,l.jsx)(`div`,{"data-slot":`form-builder-footer`,className:t.cn(`flex flex-wrap items-center justify-end gap-2`,C),children:g??(0,l.jsxs)(l.Fragment,{children:[v&&(0,l.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:m||b,onClick:y,children:v}),_&&(0,l.jsx)(n.Button,{type:`submit`,disabled:m||b,children:_})]})})]})}exports.FormBuilder=D,exports.asyncSelectField=_,exports.customField=C,exports.dateField=x,exports.dateRangeField=S,exports.formSection=w,exports.inputField=m,exports.numberField=y,exports.phoneField=b,exports.renderFormBuilderField=T,exports.selectField=g,exports.switchField=v,exports.textareaField=h;

package/dist/src/components/patterns/form-builder.js

@@ -0,0 +1,263 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { FormInput as n } from "../form/form-input.js";
+import { FormSelect as r } from "../form/form-select.js";
+import { FormSwitch as i } from "../form/form-switch.js";
+import { FormTextarea as a } from "../form/form-textarea.js";
+import { FormDateRangeInput as o } from "../form/form-date-range-input.js";
+import * as s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/patterns/form-builder.tsx
+var d = {
+	compact: "gap-3",
+	default: "gap-4",
+	comfortable: "gap-6"
+}, f = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 md:grid-cols-2",
+	3: "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
+	4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"
+}, p = {
+	1: "col-span-1",
+	2: "md:col-span-2",
+	3: "xl:col-span-3",
+	4: "xl:col-span-4",
+	full: "col-span-full"
+};
+function m(e) {
+	let { id: t, hidden: n, className: r, colSpan: i, props: a } = e;
+	return {
+		base: {
+			id: t,
+			hidden: n,
+			className: r,
+			colSpan: i
+		},
+		props: a
+	};
+}
+function h(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "input",
+		props: n
+	};
+}
+function g(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "textarea",
+		props: n
+	};
+}
+function _(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "select",
+		props: n
+	};
+}
+function v(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "async-select",
+		props: n
+	};
+}
+function y(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "switch",
+		props: n
+	};
+}
+function b(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "number",
+		props: n
+	};
+}
+function x(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "phone",
+		props: n
+	};
+}
+function S(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "date",
+		props: n
+	};
+}
+function C(e) {
+	let { base: t, props: n } = m(e);
+	return {
+		...t,
+		type: "date-range",
+		props: n
+	};
+}
+function w(e) {
+	let { id: t, hidden: n, className: r, colSpan: i, render: a } = e;
+	return {
+		id: t,
+		hidden: n,
+		className: r,
+		colSpan: i,
+		type: "custom",
+		render: a
+	};
+}
+function T(e) {
+	return e;
+}
+function E(e, t) {
+	let c = n, u = r;
+	switch (e.type) {
+		case "custom": return e.render(t);
+		case "input": return s.createElement(c, {
+			control: t.control,
+			disabled: t.disabled,
+			readOnly: t.readOnly,
+			...e.props
+		});
+		case "textarea": return /* @__PURE__ */ l(a, {
+			control: t.control,
+			disabled: t.disabled,
+			readOnly: t.readOnly,
+			...e.props
+		});
+		case "select": return s.createElement(u, {
+			control: t.control,
+			disabled: t.disabled,
+			...e.props
+		});
+		case "async-select": return s.createElement(u, {
+			control: t.control,
+			disabled: t.disabled,
+			kind: "async",
+			...e.props
+		});
+		case "switch": return /* @__PURE__ */ l(i, {
+			control: t.control,
+			disabled: t.disabled,
+			...e.props
+		});
+		case "number": return s.createElement(c, {
+			control: t.control,
+			disabled: t.disabled,
+			readOnly: t.readOnly,
+			kind: "number",
+			...e.props
+		});
+		case "phone": return s.createElement(c, {
+			control: t.control,
+			disabled: t.disabled,
+			readOnly: t.readOnly,
+			kind: "phone",
+			...e.props
+		});
+		case "date": return s.createElement(c, {
+			control: t.control,
+			disabled: t.disabled,
+			readOnly: t.readOnly,
+			kind: "date",
+			...e.props
+		});
+		case "date-range": return /* @__PURE__ */ l(o, {
+			control: t.control,
+			fromInputProps: {
+				disabled: t.disabled,
+				readOnly: t.readOnly
+			},
+			toInputProps: {
+				disabled: t.disabled,
+				readOnly: t.readOnly
+			},
+			...e.props
+		});
+		default: return null;
+	}
+}
+function D({ fields: e, sections: t }) {
+	return t?.length ? t : [{
+		id: "default",
+		fields: e ?? []
+	}];
+}
+function O({ className: n, control: r, fields: i, sections: a, layout: o = "grid", density: m = "default", columns: h = 2, disabled: g, readOnly: _, footer: v, submitLabel: y, resetLabel: b, onResetClick: x, isSubmitting: S, sectionClassName: C, fieldClassName: w, footerClassName: T, ...O }) {
+	let k = D({
+		fields: i,
+		sections: a
+	}), A = s.useMemo(() => ({
+		control: r,
+		disabled: g,
+		readOnly: _
+	}), [
+		r,
+		g,
+		_
+	]);
+	return /* @__PURE__ */ u("form", {
+		"data-slot": "form-builder",
+		className: e("grid", d[m], n),
+		...O,
+		children: [k.filter((e) => !e.hidden).map((t) => /* @__PURE__ */ u("section", {
+			"data-slot": "form-builder-section",
+			className: e("grid gap-4", t.className, C),
+			children: [(t.title || t.description || t.actions) && /* @__PURE__ */ u("div", {
+				"data-slot": "form-builder-section-header",
+				className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ u("div", {
+					className: "min-w-0 space-y-1",
+					children: [t.title && /* @__PURE__ */ l("h2", {
+						className: "text-base font-semibold leading-none tracking-tight",
+						children: t.title
+					}), t.description && /* @__PURE__ */ l("p", {
+						className: "text-sm text-muted-foreground",
+						children: t.description
+					})]
+				}), t.actions && /* @__PURE__ */ l("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: t.actions
+				})]
+			}), /* @__PURE__ */ l("div", {
+				"data-slot": "form-builder-fields",
+				"data-layout": o,
+				className: e("grid", d[m], o === "grid" ? f[h] : "grid-cols-1"),
+				children: t.fields.filter((e) => !e.hidden).map((t) => /* @__PURE__ */ l("div", {
+					"data-slot": "form-builder-field",
+					className: e(t.colSpan && p[t.colSpan], t.className, w),
+					children: E(t, A)
+				}, t.id))
+			})]
+		}, t.id)), (v || y || b) && /* @__PURE__ */ l("div", {
+			"data-slot": "form-builder-footer",
+			className: e("flex flex-wrap items-center justify-end gap-2", T),
+			children: v ?? /* @__PURE__ */ u(c, { children: [b && /* @__PURE__ */ l(t, {
+				type: "button",
+				variant: "outline",
+				disabled: g || S,
+				onClick: x,
+				children: b
+			}), y && /* @__PURE__ */ l(t, {
+				type: "submit",
+				disabled: g || S,
+				children: y
+			})] })
+		})]
+	});
+}
+//#endregion
+export { O as FormBuilder, v as asyncSelectField, w as customField, S as dateField, C as dateRangeField, T as formSection, h as inputField, b as numberField, x as phoneField, E as renderFormBuilderField, _ as selectField, y as switchField, g as textareaField };

package/dist/src/components/patterns/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-builder.cjs"),t=require("./resource-page.cjs"),n=require("./resource-detail-page.cjs"),r=require("./empty-state.cjs"),i=require("./page-toolbar.cjs"),a=require("./bulk-action-bar.cjs"),o=require("./detail-layout.cjs"),s=require("./settings-page.cjs"),c=require("./data-view.cjs");exports.BulkActionBar=a.BulkActionBar,exports.DataView=c.DataView,exports.DetailLayout=o.DetailLayout,exports.EmptyState=r.EmptyState,exports.ErrorState=r.ErrorState,exports.FormBuilder=e.FormBuilder,exports.PageToolbar=i.PageToolbar,exports.ResourceDetailPage=n.ResourceDetailPage,exports.ResourcePage=t.ResourcePage,exports.ResourcePageSection=t.ResourcePageSection,exports.SettingsPage=s.SettingsPage,exports.asyncSelectField=e.asyncSelectField,exports.customField=e.customField,exports.dateField=e.dateField,exports.dateRangeField=e.dateRangeField,exports.formSection=e.formSection,exports.inputField=e.inputField,exports.numberField=e.numberField,exports.phoneField=e.phoneField,exports.renderFormBuilderField=e.renderFormBuilderField,exports.selectField=e.selectField,exports.switchField=e.switchField,exports.textareaField=e.textareaField;

package/dist/src/components/patterns/index.js

@@ -0,0 +1,10 @@
+import { FormBuilder as e, asyncSelectField as t, customField as n, dateField as r, dateRangeField as i, formSection as a, inputField as o, numberField as s, phoneField as c, renderFormBuilderField as l, selectField as u, switchField as d, textareaField as f } from "./form-builder.js";
+import { ResourcePage as p, ResourcePageSection as m } from "./resource-page.js";
+import { ResourceDetailPage as h } from "./resource-detail-page.js";
+import { EmptyState as g, ErrorState as _ } from "./empty-state.js";
+import { PageToolbar as v } from "./page-toolbar.js";
+import { BulkActionBar as y } from "./bulk-action-bar.js";
+import { DetailLayout as b } from "./detail-layout.js";
+import { SettingsPage as x } from "./settings-page.js";
+import { DataView as S } from "./data-view.js";
+export { y as BulkActionBar, S as DataView, b as DetailLayout, g as EmptyState, _ as ErrorState, e as FormBuilder, v as PageToolbar, h as ResourceDetailPage, p as ResourcePage, m as ResourcePageSection, x as SettingsPage, t as asyncSelectField, n as customField, r as dateField, i as dateRangeField, a as formSection, o as inputField, s as numberField, c as phoneField, l as renderFormBuilderField, u as selectField, d as switchField, f as textareaField };

package/dist/src/components/patterns/page-toolbar.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({className:e,search:n,filters:i,viewOptions:a,actions:o,summary:s,sticky:c=!1,children:l,...u}){let d=!!(n||i||l),f=!!(s||a||o);return!d&&!f?null:(0,r.jsx)(`div`,{"data-slot":`page-toolbar`,"data-sticky":c||void 0,className:t.cn(`flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm`,c&&`sticky top-0 z-10`,e),...u,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between`,children:[d&&(0,r.jsxs)(`div`,{"data-slot":`page-toolbar-primary`,className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[n&&(0,r.jsx)(`div`,{className:`min-w-0 flex-1`,children:n}),i,l]}),f&&(0,r.jsxs)(`div`,{"data-slot":`page-toolbar-secondary`,className:`flex shrink-0 flex-wrap items-center gap-2`,children:[s&&(0,r.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:s}),a,o]})]})})}exports.PageToolbar=i;

package/dist/src/components/patterns/page-toolbar.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/patterns/page-toolbar.tsx
+function r({ className: r, search: i, filters: a, viewOptions: o, actions: s, summary: c, sticky: l = !1, children: u, ...d }) {
+	let f = !!(i || a || u), p = !!(c || o || s);
+	return !f && !p ? null : /* @__PURE__ */ t("div", {
+		"data-slot": "page-toolbar",
+		"data-sticky": l || void 0,
+		className: e("flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm", l && "sticky top-0 z-10", r),
+		...d,
+		children: /* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
+			children: [f && /* @__PURE__ */ n("div", {
+				"data-slot": "page-toolbar-primary",
+				className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
+				children: [
+					i && /* @__PURE__ */ t("div", {
+						className: "min-w-0 flex-1",
+						children: i
+					}),
+					a,
+					u
+				]
+			}), p && /* @__PURE__ */ n("div", {
+				"data-slot": "page-toolbar-secondary",
+				className: "flex shrink-0 flex-wrap items-center gap-2",
+				children: [
+					c && /* @__PURE__ */ t("div", {
+						className: "text-sm text-muted-foreground",
+						children: c
+					}),
+					o,
+					s
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { r as PageToolbar };

package/dist/src/components/patterns/public.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-builder.cjs"),t=require("./resource-page.cjs"),n=require("./resource-detail-page.cjs"),r=require("./empty-state.cjs"),i=require("./page-toolbar.cjs"),a=require("./bulk-action-bar.cjs"),o=require("./detail-layout.cjs"),s=require("./settings-page.cjs"),c=require("./data-view.cjs");exports.BulkActionBar=a.BulkActionBar,exports.DataView=c.DataView,exports.DetailLayout=o.DetailLayout,exports.EmptyState=r.EmptyState,exports.ErrorState=r.ErrorState,exports.FormBuilder=e.FormBuilder,exports.PageToolbar=i.PageToolbar,exports.ResourceDetailPage=n.ResourceDetailPage,exports.ResourcePage=t.ResourcePage,exports.ResourcePageSection=t.ResourcePageSection,exports.SettingsPage=s.SettingsPage,exports.asyncSelectField=e.asyncSelectField,exports.customField=e.customField,exports.dateField=e.dateField,exports.dateRangeField=e.dateRangeField,exports.formSection=e.formSection,exports.inputField=e.inputField,exports.numberField=e.numberField,exports.phoneField=e.phoneField,exports.renderFormBuilderField=e.renderFormBuilderField,exports.selectField=e.selectField,exports.switchField=e.switchField,exports.textareaField=e.textareaField;