tembro 3.0.0 → 3.1.5

package/dist/showcase/premium/data-table-parts/mock.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const dataTablePaginationMock: ComponentDemoMock;
-export declare const dataTableToolbarMock: ComponentDemoMock;
-export declare const dataTableRowActionsMock: ComponentDemoMock;
-export declare const dataTableActionsColumnMock: ComponentDemoMock;
-export declare const dataTableSelectColumnMock: ComponentDemoMock;
-export declare const dataTableSavedFiltersMock: ComponentDemoMock;

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

@@ -1,30 +0,0 @@
-//#region src/showcase/premium/data-table-parts/mock.ts
-function e(e, t, n) {
-	return {
-		code: `import { ${t} } from "tembro"\n\nexport function Example() {\n  return <${t} />\n}`,
-		cliCommand: `npx tembro add ${e}`,
-		highlights: [
-			`${t} preview inside a real DataTable shell`,
-			"Interaction-focused route",
-			"Selection and row behavior proof"
-		],
-		scenarios: [
-			{
-				title: "Route-level preview",
-				description: n
-			},
-			{
-				title: "Production context",
-				description: "See the helper in the same shell where it is typically used."
-			},
-			{
-				title: "Behavior proof",
-				description: "Verify how selection, toolbar and actions interact together."
-			}
-		],
-		capabilityNotes: ["These routes are intentionally shown inside a real DataTable context instead of isolated fake markup.", "Use them to understand interaction boundaries before wiring the helper into a product surface."]
-	};
-}
-var t = e("data-table-pagination", "DataTablePagination", "Preview pagination behavior with the real DataTable shell."), n = e("data-table-toolbar", "DataTableToolbar", "Preview search, visibility and table actions inside a live toolbar context."), r = e("data-table-row-actions", "DataTableRowActions", "Preview row-specific actions without breaking row click and selection."), i = e("data-table-actions-column", "createDataTableActionsColumn", "Preview how the reusable actions column helper behaves in a real grid."), a = e("data-table-select-column", "createDataTableSelectColumn", "Preview row selection behavior and bulk state separation."), o = e("data-table-saved-filters", "DataTableSavedFilters", "Preview saved table views and named filter state restoration.");
-//#endregion
-export { i as dataTableActionsColumnMock, t as dataTablePaginationMock, r as dataTableRowActionsMock, o as dataTableSavedFiltersMock, a as dataTableSelectColumnMock, n as dataTableToolbarMock };

package/dist/showcase/premium/data-table-parts/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/input/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-bulk-actions.cjs"),o=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),s=require("../../../components/data-table/data-table.cjs"),c=require("../../../components/data-table/data-table-sortable-header.cjs"),l=require("../../../components/data-table/data-table-view-presets.cjs"),u=require("../../../components/data-table/data-table-saved-filters.cjs"),d=require("../../../components/data-table/data-table-select-column.cjs"),f=require("./data.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=f.buildDataTableDemoRows(6);function g(e){return[d.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Amount`})},i.createDataTableActionsColumn({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 _({slug:e}){let[i,c]=p.useState(``),[d,_]=p.useState(`all`),[v,y]=p.useState({}),[b,x]=p.useState({}),[S,C]=p.useState(`Ready`),[w,T]=p.useState(0),E=p.useMemo(()=>{let e=i.trim().toLowerCase(),t=h;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},[i,d]),D=p.useMemo(()=>E.filter((e,t)=>v[t]),[E,v]),O=p.useMemo(()=>g(C),[]),k={"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(0,m.jsxs)(`div`,{className:`space-y-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:k[e]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[E.length,` rows`]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[D.length,` selected`]})]}),(0,m.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:k[e]}),(0,m.jsx)(`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.`}[e]})]}),e===`data-table-saved-filters`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsx)(u.DataTableSavedFilters,{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=>_(e===`finance`?`finance`:e===`risk`?`at-risk`:`all`),onSaveFilter:e=>C(`Saved filter created: ${e}`),onDeleteFilter:e=>C(`Saved filter deleted: ${e}`),onClearFilters:()=>_(`all`)})}):null,e===`data-table-toolbar`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(l.DataTableViewPresets,{value:d,onValueChange:e=>_(e??`all`),presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.Input,{type:`search`,value:i,onValueChange:c,placeholder:`Search invoice, customer...`})})]})}):null,(0,m.jsx)(s.DataTable,{columns:O,data:E,getRowId:e=>e.invoice,rowSelection:v,onRowSelectionChange:y,columnVisibility:b,onColumnVisibilityChange:x,enableRowSelection:!0,striped:!0,bordered:!0,stickyHeader:!0,toolbarProps:e=>({title:`Invoices`,description:`Premium subroute preview for reusable DataTable parts.`,search:(0,m.jsx)(n.Input,{type:`search`,value:i,onValueChange:c,placeholder:`Search rows...`}),actions:(0,m.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,m.jsx)(o.DataTableColumnVisibilityMenu,{table:e}),(0,m.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>C(`Toolbar export prepared`),children:`Export`})]}),selectionActions:(0,m.jsx)(a.DataTableBulkActions,{rows:e.getSelectedRowModel().rows.map(e=>e.original),actions:[{key:`export`,label:`Export selected`,onSelect:e=>C(`${e.length} rows exported`)}],onClearSelection:()=>y({})})}),pagination:{manual:!0,pageIndex:w,pageSize:5,rowCount:E.length,pageCount:Math.max(Math.ceil(E.length/5),1),pageSizeOptions:[5,10],onPageChange:T,onPageSizeChange:()=>void 0}}),(0,m.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Focused feature`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:k[e]})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction proof`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:S})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Selection`}),(0,m.jsxs)(`p`,{className:`mt-2 aui-text-muted`,children:[D.length,` active rows`]})]})]})]})}exports.DataTablePartShowcase=_;

package/dist/showcase/premium/data-table-parts/showcase.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-import type { ComponentDemoProps } from "../types";
-export type DataTablePartSlug = "data-table-pagination" | "data-table-toolbar" | "data-table-row-actions" | "data-table-actions-column" | "data-table-select-column" | "data-table-saved-filters";
-export declare function DataTablePartShowcase({ slug, }: ComponentDemoProps & {
-    slug: DataTablePartSlug;
-}): React.JSX.Element;

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

@@ -1,256 +0,0 @@
-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/showcase/premium/date-input/index.cjs

@@ -1 +0,0 @@
-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/showcase/premium/date-input/index.d.ts

@@ -1,2 +0,0 @@
-export { DateInputShowcase } from "./showcase";
-export { dateInputMock } from "./mock";

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

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

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

@@ -1,17 +0,0 @@
-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/showcase/premium/date-input/mock.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const dateInputMock: ComponentDemoMock;

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

@@ -1,43 +0,0 @@
-//#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/showcase/premium/date-input/showcase.cjs

@@ -1 +0,0 @@
-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/showcase/premium/date-input/showcase.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoProps } from "../types";
-export declare function DateInputShowcase({ mode }: ComponentDemoProps): import("react").JSX.Element;

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

@@ -1,29 +0,0 @@
-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/showcase/premium/date-range-input/index.cjs

@@ -1 +0,0 @@
-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/showcase/premium/date-range-input/index.d.ts

@@ -1,2 +0,0 @@
-export { DateRangeInputShowcase } from "./showcase";
-export { dateRangeInputMock } from "./mock";

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

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

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

@@ -1,17 +0,0 @@
-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/showcase/premium/date-range-input/mock.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const dateRangeInputMock: ComponentDemoMock;

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

@@ -1,43 +0,0 @@
-//#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/showcase/premium/date-range-input/showcase.cjs

@@ -1 +0,0 @@
-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/showcase/premium/date-range-input/showcase.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoProps } from "../types";
-export declare function DateRangeInputShowcase({ mode }: ComponentDemoProps): import("react").JSX.Element;

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

@@ -1,40 +0,0 @@
-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/showcase/premium/descriptions/index.cjs

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

package/dist/showcase/premium/descriptions/index.d.ts

@@ -1,2 +0,0 @@
-export { descriptionsMock } from "./mock";
-export { DescriptionsShowcase } from "./showcase";

package/dist/showcase/premium/descriptions/index.js

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

package/dist/showcase/premium/descriptions/mock.cjs

@@ -1,16 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Descriptions } from "tembro"
-
-export function Example() {
-  return (
-    <Descriptions
-      title="Project profile"
-      extra={<span className="text-sm text-muted-foreground">Draft</span>}
-      items={[
-        { key: "owner", label: "Owner", value: "Azamat UI Team" },
-        { key: "status", label: "Status", value: "In review" },
-        { key: "release", label: "Release", value: "v0.3.27", span: 2 },
-        { key: "stack", label: "Tech", value: "React + Tailwind" },
-      ]}
-    />
-  )
-}`,cliCommand:`npx tembro add descriptions`,highlights:[`Title and metadata layout in a compact two-axis grid`,`Bordered style with configurable columns`,`Simple API for label and value metadata`],scenarios:[{title:`Overview`,description:`Use for project metadata and entity summary blocks.`},{title:`Admin views`,description:`Keep important fields readable in dense dashboard tables.`}]};exports.descriptionsMock=e;

package/dist/showcase/premium/descriptions/mock.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const descriptionsMock: ComponentDemoMock;

package/dist/showcase/premium/descriptions/mock.js

@@ -1,19 +0,0 @@
-//#region src/showcase/premium/descriptions/mock.ts
-var e = {
-	code: "import { Descriptions } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Descriptions\n      title=\"Project profile\"\n      extra={<span className=\"text-sm text-muted-foreground\">Draft</span>}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat UI Team\" },\n        { key: \"status\", label: \"Status\", value: \"In review\" },\n        { key: \"release\", label: \"Release\", value: \"v0.3.27\", span: 2 },\n        { key: \"stack\", label: \"Tech\", value: \"React + Tailwind\" },\n      ]}\n    />\n  )\n}",
-	cliCommand: "npx tembro add descriptions",
-	highlights: [
-		"Title and metadata layout in a compact two-axis grid",
-		"Bordered style with configurable columns",
-		"Simple API for label and value metadata"
-	],
-	scenarios: [{
-		title: "Overview",
-		description: "Use for project metadata and entity summary blocks."
-	}, {
-		title: "Admin views",
-		description: "Keep important fields readable in dense dashboard tables."
-	}]
-};
-//#endregion
-export { e as descriptionsMock };

package/dist/showcase/premium/descriptions/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/descriptions.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(){let[e,a]=r.useState(3),[o,s]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:e===1?`default`:`outline`,onClick:()=>a(1),children:`1 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===2?`default`:`outline`,onClick:()=>a(2),children:`2 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===3?`default`:`outline`,onClick:()=>a(3),children:`3 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===4?`default`:`outline`,onClick:()=>a(4),children:`4 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:o?`default`:`outline`,onClick:()=>s(e=>!e),children:o?`Bordered`:`Unbordered`})]}),(0,i.jsx)(n.Descriptions,{title:`Project profile`,extra:(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Draft`}),bordered:o,columns:e,items:[{key:`owner`,label:`Owner`,value:`Azamat UI Team`},{key:`status`,label:`Status`,value:`In review`},{key:`release`,label:`Release`,value:`v0.3.27`,span:2},{key:`stack`,label:`Tech`,value:`React + Tailwind`},{key:`source`,label:`Source`,value:`Package-first components`,span:4}]})]})}exports.DescriptionsShowcase=a;

package/dist/showcase/premium/descriptions/showcase.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function DescriptionsShowcase(): React.JSX.Element;