tembro 2.1.13 → 3.1.1

package/dist/src/showcase/premium/data-table-parts/showcase.js

@@ -0,0 +1,256 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Input as t } from "../../../components/ui/input/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { createDataTableActionsColumn as r } from "../../../components/data-table/data-table-actions-column.js";
+import { DataTableBulkActions as i } from "../../../components/data-table/data-table-bulk-actions.js";
+import { DataTableColumnVisibilityMenu as a } from "../../../components/data-table/data-table-column-visibility-menu.js";
+import { DataTable as o } from "../../../components/data-table/data-table.js";
+import { DataTableSortableHeader as s } from "../../../components/data-table/data-table-sortable-header.js";
+import { DataTableViewPresets as c } from "../../../components/data-table/data-table-view-presets.js";
+import { DataTableSavedFilters as l } from "../../../components/data-table/data-table-saved-filters.js";
+import { createDataTableSelectColumn as u } from "../../../components/data-table/data-table-select-column.js";
+import { buildDataTableDemoRows as d, dataTableDemoPresets as f } from "./data.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/showcase/premium/data-table-parts/showcase.tsx
+var g = d(6);
+function _(e) {
+	return [
+		u(),
+		{
+			accessorKey: "invoice",
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
+				column: e,
+				children: "Invoice"
+			})
+		},
+		{
+			accessorKey: "customer",
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
+				column: e,
+				children: "Customer"
+			})
+		},
+		{
+			accessorKey: "status",
+			header: "Status",
+			cell: ({ row: e }) => /* @__PURE__ */ m(n, {
+				variant: e.original.status === "Paid" ? "secondary" : e.original.status === "Review" ? "outline" : "destructive",
+				children: e.original.status
+			})
+		},
+		{
+			accessorKey: "amount",
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
+				column: e,
+				children: "Amount"
+			})
+		},
+		r({ getActions: (t, n) => [{
+			key: "open",
+			label: "Open detail",
+			onSelect: () => e(`${n.invoice} opened from row action`)
+		}, {
+			key: "archive",
+			label: "Archive",
+			destructive: !0,
+			onSelect: () => e(`${n.invoice} sent to archive`)
+		}] })
+	];
+}
+function v({ slug: r }) {
+	let [s, u] = p.useState(""), [d, v] = p.useState("all"), [y, b] = p.useState({}), [x, S] = p.useState({}), [C, w] = p.useState("Ready"), [T, E] = p.useState(0), D = p.useMemo(() => {
+		let e = s.trim().toLowerCase(), t = g;
+		return d === "finance" && (t = t.filter((e) => e.status === "Paid" || e.status === "Review")), d === "at-risk" && (t = t.filter((e) => e.status === "Draft" || e.status === "Overdue")), e ? t.filter((t) => [
+			t.invoice,
+			t.customer,
+			t.owner,
+			t.channel,
+			t.amount
+		].join(" ").toLowerCase().includes(e)) : t;
+	}, [s, d]), O = p.useMemo(() => D.filter((e, t) => y[t]), [D, y]), k = p.useMemo(() => _(w), []), A = {
+		"data-table-pagination": "Pagination route",
+		"data-table-toolbar": "Toolbar route",
+		"data-table-row-actions": "Row actions route",
+		"data-table-actions-column": "Actions column route",
+		"data-table-select-column": "Select column route",
+		"data-table-saved-filters": "Saved filters route"
+	};
+	return /* @__PURE__ */ h("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ m(n, {
+								variant: "outline",
+								children: A[r]
+							}),
+							/* @__PURE__ */ h(n, {
+								variant: "outline",
+								children: [D.length, " rows"]
+							}),
+							/* @__PURE__ */ h(n, {
+								variant: "outline",
+								children: [O.length, " selected"]
+							})
+						]
+					}),
+					/* @__PURE__ */ m("p", {
+						className: "mt-3 text-sm font-medium aui-text-strong",
+						children: A[r]
+					}),
+					/* @__PURE__ */ m("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: {
+							"data-table-pagination": "Pagination should be readable in isolation, but still feel like part of a production table shell.",
+							"data-table-toolbar": "Toolbar route should prove search, visibility and action layout without needing the whole docs page around it.",
+							"data-table-row-actions": "Row action interactions should stay isolated from row click and selection behavior.",
+							"data-table-actions-column": "Actions column should show how the helper sits inside a real DataTable definition.",
+							"data-table-select-column": "Select column route should prove bulk selection and row state separation.",
+							"data-table-saved-filters": "Saved filters should restore named views and stay aligned with other table controls."
+						}[r]
+					})
+				]
+			}),
+			r === "data-table-saved-filters" ? /* @__PURE__ */ m("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+				children: /* @__PURE__ */ m(l, {
+					savedFilters: [
+						{
+							id: "all",
+							name: "All invoices",
+							filters: {}
+						},
+						{
+							id: "finance",
+							name: "Finance review",
+							filters: {}
+						},
+						{
+							id: "risk",
+							name: "At risk",
+							filters: {}
+						}
+					],
+					activeFilterId: d === "all" ? "all" : d === "finance" ? "finance" : "risk",
+					onSelectFilter: (e) => v(e === "finance" ? "finance" : e === "risk" ? "at-risk" : "all"),
+					onSaveFilter: (e) => w(`Saved filter created: ${e}`),
+					onDeleteFilter: (e) => w(`Saved filter deleted: ${e}`),
+					onClearFilters: () => v("all")
+				})
+			}) : null,
+			r === "data-table-toolbar" ? /* @__PURE__ */ m("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+				children: /* @__PURE__ */ h("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ m(c, {
+						value: d,
+						onValueChange: (e) => v(e ?? "all"),
+						presets: f,
+						size: "sm"
+					}), /* @__PURE__ */ m("div", {
+						className: "w-full max-w-[320px]",
+						children: /* @__PURE__ */ m(t, {
+							type: "search",
+							value: s,
+							onValueChange: u,
+							placeholder: "Search invoice, customer..."
+						})
+					})]
+				})
+			}) : null,
+			/* @__PURE__ */ m(o, {
+				columns: k,
+				data: D,
+				getRowId: (e) => e.invoice,
+				rowSelection: y,
+				onRowSelectionChange: b,
+				columnVisibility: x,
+				onColumnVisibilityChange: S,
+				enableRowSelection: !0,
+				striped: !0,
+				bordered: !0,
+				stickyHeader: !0,
+				toolbarProps: (n) => ({
+					title: "Invoices",
+					description: "Premium subroute preview for reusable DataTable parts.",
+					search: /* @__PURE__ */ m(t, {
+						type: "search",
+						value: s,
+						onValueChange: u,
+						placeholder: "Search rows..."
+					}),
+					actions: /* @__PURE__ */ h("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ m(a, { table: n }), /* @__PURE__ */ m(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => w("Toolbar export prepared"),
+							children: "Export"
+						})]
+					}),
+					selectionActions: /* @__PURE__ */ m(i, {
+						rows: n.getSelectedRowModel().rows.map((e) => e.original),
+						actions: [{
+							key: "export",
+							label: "Export selected",
+							onSelect: (e) => w(`${e.length} rows exported`)
+						}],
+						onClearSelection: () => b({})
+					})
+				}),
+				pagination: {
+					manual: !0,
+					pageIndex: T,
+					pageSize: 5,
+					rowCount: D.length,
+					pageCount: Math.max(Math.ceil(D.length / 5), 1),
+					pageSizeOptions: [5, 10],
+					onPageChange: E,
+					onPageSizeChange: () => void 0
+				}
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ m("p", {
+							className: "font-medium aui-text-strong",
+							children: "Focused feature"
+						}), /* @__PURE__ */ m("p", {
+							className: "mt-2 aui-text-muted",
+							children: A[r]
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ m("p", {
+							className: "font-medium aui-text-strong",
+							children: "Interaction proof"
+						}), /* @__PURE__ */ m("p", {
+							className: "mt-2 aui-text-muted",
+							children: C
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ m("p", {
+							className: "font-medium aui-text-strong",
+							children: "Selection"
+						}), /* @__PURE__ */ h("p", {
+							className: "mt-2 aui-text-muted",
+							children: [O.length, " active rows"]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { v as DataTablePartShowcase };

package/dist/src/showcase/premium/date-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.DateInputShowcase=e.DateInputShowcase,exports.dateInputMock=t.dateInputMock;

package/dist/src/showcase/premium/date-input/index.js

@@ -0,0 +1,3 @@
+import { DateInputShowcase as e } from "./showcase.js";
+import { dateInputMock as t } from "./mock.js";
+export { e as DateInputShowcase, t as dateInputMock };

package/dist/src/showcase/premium/date-input/mock.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Input } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState("2026-06-19")
+
+  return (
+    <Input
+      kind="date"
+      value={value}
+      onValueChange={setValue}
+      min="2026-06-01"
+      max="2026-12-31"
+      placeholder="YYYY-MM-DD"
+    />
+  )
+}`,htmlCode:`<label for="date">Date</label><input id="date" type="text" value="2026-06-19" placeholder="YYYY-MM-DD" />`,cliCommand:`npx tembro add input`,highlights:[`ISO-like string format assumptions`,`min/max constraints`,`Controlled editing`,`Clear disabled behavior`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Birth date`,description:`Enforce a valid date window with min/max.`},{title:`Report filter`,description:`Use as single date boundary for dashboards.`},{title:`Default timezone`,description:`Keep string values and normalize at API boundary.`},{title:`Locked fields`,description:`Disable editing during restricted status windows.`}],capabilityNotes:[`Store normalized date string outside the component for stable API integration.`,`Show explicit range with helper text when min/max are enforced.`,`Validate parsed date and format on submit as an app-level safety layer.`,`Align placeholder format with your backend contract (ISO/locale).`]};exports.dateInputMock=e;

package/dist/src/showcase/premium/date-input/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/date-input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <Input\n      kind=\"date\"\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      placeholder=\"YYYY-MM-DD\"\n    />\n  )\n}",
+	htmlCode: "<label for=\"date\">Date</label><input id=\"date\" type=\"text\" value=\"2026-06-19\" placeholder=\"YYYY-MM-DD\" />",
+	cliCommand: "npx tembro add input",
+	highlights: [
+		"ISO-like string format assumptions",
+		"min/max constraints",
+		"Controlled editing",
+		"Clear disabled behavior"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Birth date",
+			description: "Enforce a valid date window with min/max."
+		},
+		{
+			title: "Report filter",
+			description: "Use as single date boundary for dashboards."
+		},
+		{
+			title: "Default timezone",
+			description: "Keep string values and normalize at API boundary."
+		},
+		{
+			title: "Locked fields",
+			description: "Disable editing during restricted status windows."
+		}
+	],
+	capabilityNotes: [
+		"Store normalized date string outside the component for stable API integration.",
+		"Show explicit range with helper text when min/max are enforced.",
+		"Validate parsed date and format on submit as an app-level safety layer.",
+		"Align placeholder format with your backend contract (ISO/locale)."
+	]
+};
+//#endregion
+export { e as dateInputMock };

package/dist/src/showcase/premium/date-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`2026-06-19`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`date`,value:i,onValueChange:e=>a(e),min:`2026-06-01`,max:`2026-12-31`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Value: `,i||`—`]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateInputShowcase=r;

package/dist/src/showcase/premium/date-input/showcase.js

@@ -0,0 +1,29 @@
+import { Input as e } from "../../../components/ui/input/index.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/date-input/showcase.tsx
+function i({ mode: i }) {
+	let [a, o] = t("2026-06-19");
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ n(e, {
+				kind: "date",
+				value: a,
+				onValueChange: (e) => o(e),
+				min: "2026-06-01",
+				max: "2026-12-31"
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-subtle text-sm",
+				children: ["Value: ", a || "—"]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Mode: ", i]
+			})
+		]
+	});
+}
+//#endregion
+export { i as DateInputShowcase };

package/dist/src/showcase/premium/date-picker/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.DatePickerShowcase=e.DatePickerShowcase,exports.datePickerMock=t.datePickerMock;

package/dist/src/showcase/premium/date-picker/index.js

@@ -0,0 +1,3 @@
+import { DatePickerShowcase as e } from "./showcase.js";
+import { datePickerMock as t } from "./mock.js";
+export { e as DatePickerShowcase, t as datePickerMock };

package/dist/src/showcase/premium/date-picker/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { DatePicker } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState("2026-06-19")
+
+  return (
+    <DatePicker
+      value={value}
+      onValueChange={setValue}
+      min="2026-06-01"
+      max="2026-12-31"
+      disabledDates={["2026-06-21"]}
+    />
+  )
+}`,htmlCode:`<label for="date-picker">Date</label><input id="date-picker" type="text" value="2026-06-19" />`,cliCommand:`npx tembro add date-picker`,highlights:[`Popover selection`,`Range guard rails`,`disabledDates support`,`Min and max windows`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`settings-form`],scenarios:[{title:`Booking date`,description:`Select a single day from constrained calendar options.`},{title:`Campaign date`,description:`Pick start date for campaign planning.`},{title:`Holiday exclusions`,description:`Block specific dates by disabledDates list.`},{title:`Read-only windows`,description:`Disable picker when record is locked.`}],capabilityNotes:[`Use a locale- and timezone-aware normalization layer in the app, not inside UI callback.`,`Keep disabledDates in the same format as your data source.`,`Persist as canonical string while rendering localized view.`,`Validate with server side checks for closed periods and blackout dates.`]};exports.datePickerMock=e;

package/dist/src/showcase/premium/date-picker/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/date-picker/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { DatePicker } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DatePicker\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\"]}\n    />\n  )\n}",
+	htmlCode: "<label for=\"date-picker\">Date</label><input id=\"date-picker\" type=\"text\" value=\"2026-06-19\" />",
+	cliCommand: "npx tembro add date-picker",
+	highlights: [
+		"Popover selection",
+		"Range guard rails",
+		"disabledDates support",
+		"Min and max windows"
+	],
+	relatedBlockSlugs: [
+		"crm-dashboard",
+		"users-table",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Booking date",
+			description: "Select a single day from constrained calendar options."
+		},
+		{
+			title: "Campaign date",
+			description: "Pick start date for campaign planning."
+		},
+		{
+			title: "Holiday exclusions",
+			description: "Block specific dates by disabledDates list."
+		},
+		{
+			title: "Read-only windows",
+			description: "Disable picker when record is locked."
+		}
+	],
+	capabilityNotes: [
+		"Use a locale- and timezone-aware normalization layer in the app, not inside UI callback.",
+		"Keep disabledDates in the same format as your data source.",
+		"Persist as canonical string while rendering localized view.",
+		"Validate with server side checks for closed periods and blackout dates."
+	]
+};
+//#endregion
+export { e as datePickerMock };

package/dist/src/showcase/premium/date-picker/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/calendar/date-picker.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`2026-06-19`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DatePicker,{value:i,onValueChange:a,min:`2026-06-01`,max:`2026-12-31`,disabledDates:[`2026-06-21`]}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Selected: `,i||`—`]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DatePickerShowcase=r;

package/dist/src/showcase/premium/date-picker/showcase.js

@@ -0,0 +1,29 @@
+import { DatePicker as e } from "../../../components/calendar/date-picker.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/date-picker/showcase.tsx
+function i({ mode: i }) {
+	let [a, o] = t("2026-06-19");
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ n(e, {
+				value: a,
+				onValueChange: o,
+				min: "2026-06-01",
+				max: "2026-12-31",
+				disabledDates: ["2026-06-21"]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-subtle text-sm",
+				children: ["Selected: ", a || "—"]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Mode: ", i]
+			})
+		]
+	});
+}
+//#endregion
+export { i as DatePickerShowcase };

package/dist/src/showcase/premium/date-range-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.DateRangeInputShowcase=e.DateRangeInputShowcase,exports.dateRangeInputMock=t.dateRangeInputMock;

package/dist/src/showcase/premium/date-range-input/index.js

@@ -0,0 +1,3 @@
+import { DateRangeInputShowcase as e } from "./showcase.js";
+import { dateRangeInputMock as t } from "./mock.js";
+export { e as DateRangeInputShowcase, t as dateRangeInputMock };

package/dist/src/showcase/premium/date-range-input/mock.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Input } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-30" })
+
+  return (
+    <Input
+      kind="date-range"
+      value={value}
+      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
+      fromInputProps={{ min: "2026-06-01" }}
+      toInputProps={{ max: "2026-12-31" }}
+      required
+    />
+  )
+}`,htmlCode:`<label for="date-range">Date range</label><input id="date-range" type="text" value="2026-06-01 to 2026-06-30" />`,cliCommand:`npx tembro add input`,highlights:[`from/to object contract`,`range behavior`,`min/max boundaries`,`single source of truth formatting`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Billing period`,description:`Keep report windows with explicit start/end boundaries.`},{title:`Dashboard filters`,description:`Use range to fetch metrics for a period.`},{title:`Date lock`,description:`Enforce required bounds while user is in restricted flow.`},{title:`Export window`,description:`Share range object to backend for date-interval export.`}],capabilityNotes:[`Treat partial ranges as invalid until both ends are present.`,`Validate from <= to at app layer to avoid inverted ranges.`,`Normalize all range values to canonical storage format.`,`Show user hint text for format and required bounds.`]};exports.dateRangeInputMock=e;

package/dist/src/showcase/premium/date-range-input/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/date-range-input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-30\" })\n\n  return (\n    <Input\n      kind=\"date-range\"\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      fromInputProps={{ min: \"2026-06-01\" }}\n      toInputProps={{ max: \"2026-12-31\" }}\n      required\n    />\n  )\n}",
+	htmlCode: "<label for=\"date-range\">Date range</label><input id=\"date-range\" type=\"text\" value=\"2026-06-01 to 2026-06-30\" />",
+	cliCommand: "npx tembro add input",
+	highlights: [
+		"from/to object contract",
+		"range behavior",
+		"min/max boundaries",
+		"single source of truth formatting"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"users-table"
+	],
+	scenarios: [
+		{
+			title: "Billing period",
+			description: "Keep report windows with explicit start/end boundaries."
+		},
+		{
+			title: "Dashboard filters",
+			description: "Use range to fetch metrics for a period."
+		},
+		{
+			title: "Date lock",
+			description: "Enforce required bounds while user is in restricted flow."
+		},
+		{
+			title: "Export window",
+			description: "Share range object to backend for date-interval export."
+		}
+	],
+	capabilityNotes: [
+		"Treat partial ranges as invalid until both ends are present.",
+		"Validate from <= to at app layer to avoid inverted ranges.",
+		"Normalize all range values to canonical storage format.",
+		"Show user hint text for format and required bounds."
+	]
+};
+//#endregion
+export { e as dateRangeInputMock };

package/dist/src/showcase/premium/date-range-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-30`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`date-range`,value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),fromInputProps:{min:`2026-06-01`},toInputProps:{max:`2026-12-31`}}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangeInputShowcase=r;

package/dist/src/showcase/premium/date-range-input/showcase.js

@@ -0,0 +1,40 @@
+import { Input as e } from "../../../components/ui/input/index.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/date-range-input/showcase.tsx
+function i({ mode: i }) {
+	let [a, o] = t({
+		from: "2026-06-01",
+		to: "2026-06-30"
+	});
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ n(e, {
+				kind: "date-range",
+				value: a,
+				onValueChange: (e) => o({
+					from: e.from ?? "",
+					to: e.to ?? ""
+				}),
+				fromInputProps: { min: "2026-06-01" },
+				toInputProps: { max: "2026-12-31" }
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-subtle text-sm",
+				children: [
+					"Range: ",
+					a.from,
+					" → ",
+					a.to
+				]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Mode: ", i]
+			})
+		]
+	});
+}
+//#endregion
+export { i as DateRangeInputShowcase };

package/dist/src/showcase/premium/date-range-picker/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.DateRangePickerShowcase=e.DateRangePickerShowcase,exports.dateRangePickerMock=t.dateRangePickerMock;

package/dist/src/showcase/premium/date-range-picker/index.js

@@ -0,0 +1,3 @@
+import { DateRangePickerShowcase as e } from "./showcase.js";
+import { dateRangePickerMock as t } from "./mock.js";
+export { e as DateRangePickerShowcase, t as dateRangePickerMock };

package/dist/src/showcase/premium/date-range-picker/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { DateRangePicker } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-07" })
+
+  return (
+    <DateRangePicker
+      value={value}
+      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
+      min="2026-06-01"
+      max="2026-12-31"
+      disabledDates={["2026-06-21", "2026-06-22"]}
+    />
+  )
+}`,htmlCode:`<label for="date-range-picker">Date range</label><input id="date-range-picker" type="text" value="2026-06-01 to 2026-06-07" />`,cliCommand:`npx tembro add date-range-picker`,highlights:[`Range popover behavior`,`disabledDates support`,`from/to object format`,`min/max constraints`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`pricing-section`],scenarios:[{title:`Reporting window`,description:`Select a period for period-based reports.`},{title:`Campaign sprint`,description:`Keep campaign launch and end dates linked as a single value.`},{title:`Blocked windows`,description:`Exclude blackout dates with disabledDates list.`},{title:`Read-only mode`,description:`Disable pickers for locked records and history editing.`}],capabilityNotes:["Validate that `from` is before `to` before submit.",`Use partial range guards and avoid fetching until both bounds are selected.`,`Normalize to server timezone to avoid midnight and boundary drift.`,`Store disabled periods in one source and share with all date controls.`]};exports.dateRangePickerMock=e;

package/dist/src/showcase/premium/date-range-picker/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/date-range-picker/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { DateRangePicker } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-07\" })\n\n  return (\n    <DateRangePicker\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\", \"2026-06-22\"]}\n    />\n  )\n}",
+	htmlCode: "<label for=\"date-range-picker\">Date range</label><input id=\"date-range-picker\" type=\"text\" value=\"2026-06-01 to 2026-06-07\" />",
+	cliCommand: "npx tembro add date-range-picker",
+	highlights: [
+		"Range popover behavior",
+		"disabledDates support",
+		"from/to object format",
+		"min/max constraints"
+	],
+	relatedBlockSlugs: [
+		"crm-dashboard",
+		"users-table",
+		"pricing-section"
+	],
+	scenarios: [
+		{
+			title: "Reporting window",
+			description: "Select a period for period-based reports."
+		},
+		{
+			title: "Campaign sprint",
+			description: "Keep campaign launch and end dates linked as a single value."
+		},
+		{
+			title: "Blocked windows",
+			description: "Exclude blackout dates with disabledDates list."
+		},
+		{
+			title: "Read-only mode",
+			description: "Disable pickers for locked records and history editing."
+		}
+	],
+	capabilityNotes: [
+		"Validate that `from` is before `to` before submit.",
+		"Use partial range guards and avoid fetching until both bounds are selected.",
+		"Normalize to server timezone to avoid midnight and boundary drift.",
+		"Store disabled periods in one source and share with all date controls."
+	]
+};
+//#endregion
+export { e as dateRangePickerMock };