tembro 1.0.0

package/dist/showcase/families/data-table/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/showcase/families/data-table/types.d.ts

@@ -0,0 +1,23 @@
+export type DataTableDemoRow = {
+    invoice: string;
+    order: string;
+    customer: string;
+    owner: string;
+    channel: string;
+    status: "Paid" | "Review" | "Draft" | "Overdue";
+    stock: number;
+    items: number;
+    amount: string;
+    amountValue: number;
+    trend: "up" | "down" | "steady";
+    updatedAt: string;
+};
+export type DataTableDemoToolbarAction = {
+    label: string;
+    variant: "default" | "outline";
+};
+export type DataTableDemoPreset = {
+    value: "all" | "finance" | "at-risk";
+    label: string;
+    description: string;
+};

package/dist/showcase/families/display/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{label:`Revenue`,value:`$24,780`,note:`+12.8% from last week`},{label:`Customers`,value:`1,429`,note:`84 new this cycle`},{label:`Growth`,value:`+12.8%`,note:`Healthy activation curve`}],t=[`Design system tokens updated`,`Table presets synchronized`,`Release note draft created`];exports.activityItems=t,exports.metricCards=e;

package/dist/showcase/families/display/data.d.ts

@@ -0,0 +1,6 @@
+export declare const metricCards: {
+    label: string;
+    value: string;
+    note: string;
+}[];
+export declare const activityItems: string[];

package/dist/showcase/families/display/data.js

@@ -0,0 +1,24 @@
+//#region src/showcase/families/display/data.ts
+var e = [
+	{
+		label: "Revenue",
+		value: "$24,780",
+		note: "+12.8% from last week"
+	},
+	{
+		label: "Customers",
+		value: "1,429",
+		note: "84 new this cycle"
+	},
+	{
+		label: "Growth",
+		value: "+12.8%",
+		note: "Healthy activation curve"
+	}
+], t = [
+	"Design system tokens updated",
+	"Table presets synchronized",
+	"Release note draft created"
+];
+//#endregion
+export { t as activityItems, e as metricCards };

package/dist/showcase/families/display/index.cjs

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

package/dist/showcase/families/display/index.d.ts

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

package/dist/showcase/families/display/index.js

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

package/dist/showcase/families/display/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { MetricGrid, Timeline, ActivityFeed, Avatar } from "tembro"
+
+export function Example() {
+  return <MetricGrid />
+}`,highlights:[`Metric grids`,`Timelines`,`Activity feeds`,`Status legends`],scenarios:[{title:`KPI dashboards`,description:`Present summary metrics with clear information hierarchy.`},{title:`Audit trails`,description:`Track updates and system events in timeline form.`},{title:`Context cards`,description:`Pair avatar, status and description surfaces together.`}],metrics:[{label:`Exports`,value:`10`},{label:`Display types`,value:`5+`},{label:`Status`,value:`Stable`}]};exports.displayFamilyMock=e;

package/dist/showcase/families/display/mock.d.ts

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

package/dist/showcase/families/display/mock.js

@@ -0,0 +1,40 @@
+//#region src/showcase/families/display/mock.ts
+var e = {
+	code: "import { MetricGrid, Timeline, ActivityFeed, Avatar } from \"tembro\"\n\nexport function Example() {\n  return <MetricGrid />\n}",
+	highlights: [
+		"Metric grids",
+		"Timelines",
+		"Activity feeds",
+		"Status legends"
+	],
+	scenarios: [
+		{
+			title: "KPI dashboards",
+			description: "Present summary metrics with clear information hierarchy."
+		},
+		{
+			title: "Audit trails",
+			description: "Track updates and system events in timeline form."
+		},
+		{
+			title: "Context cards",
+			description: "Pair avatar, status and description surfaces together."
+		}
+	],
+	metrics: [
+		{
+			label: "Exports",
+			value: "10"
+		},
+		{
+			label: "Display types",
+			value: "5+"
+		},
+		{
+			label: "Status",
+			value: "Stable"
+		}
+	]
+};
+//#endregion
+export { e as displayFamilyMock };

package/dist/showcase/families/display/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/display/entity-card.cjs"),r=require("../../../components/display/file-card.cjs"),i=require("../../../components/display/smart-card.cjs"),a=require("./data.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(){let[e,l]=o.useState(`workspace`);return(0,c.jsxs)(`div`,{className:`space-y-4`,children:[(0,c.jsx)(`div`,{className:`grid gap-4 md:grid-cols-3`,children:a.metricCards.map(e=>(0,c.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,c.jsx)(`p`,{className:`aui-text-muted text-sm`,children:e.label}),(0,c.jsx)(`p`,{className:`mt-2 text-3xl font-semibold tracking-tight`,children:e.value}),(0,c.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:e.note})]},e.label))}),(0,c.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,c.jsxs)(`div`,{className:`space-y-4`,children:[(0,c.jsx)(i.SmartCard,{eyebrow:`Workspace surface`,title:`Azamat UI release rail`,description:`Display components should present density, metadata, actions and emphasis without requiring route-specific styling each time.`,meta:`Updated 2 min ago`,status:(0,c.jsx)(t.Badge,{variant:`secondary`,children:`Live`}),content:(0,c.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,c.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,c.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`Surface`}),(0,c.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`InfoCard`})]}),(0,c.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,c.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`State`}),(0,c.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`Selected-safe actions`})]}),(0,c.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,c.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`Use case`}),(0,c.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`Overview, result, summary`})]})]}),actions:(0,c.jsx)(t.Badge,{variant:`outline`,children:`Action-safe`})}),(0,c.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,c.jsx)(n.EntityCard,{title:`Workspace card`,description:`Composable entity block with media, status and actions.`,icon:(0,c.jsx)(s.FolderIcon,{className:`size-4`}),status:(0,c.jsx)(t.Badge,{variant:`outline`,children:`Review`}),meta:`Team: Core`,selected:e===`workspace`,onSelect:()=>l(`workspace`),actions:(0,c.jsx)(t.Badge,{variant:`outline`,children:`Inspect`})}),(0,c.jsx)(r.FileCard,{name:`release-notes.md`,description:`Prepared for changelog and docs page.`,meta:`Updated 5m ago`,selected:e===`file`,onOpen:()=>l(`file`),actions:(0,c.jsx)(t.Badge,{variant:`outline`,children:`Versioned`})})]})]}),(0,c.jsxs)(`div`,{className:`space-y-4`,children:[(0,c.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,c.jsx)(`p`,{className:`font-medium`,children:`Status legend`}),(0,c.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,c.jsx)(t.Badge,{variant:`secondary`,children:`Live`}),(0,c.jsx)(t.Badge,{variant:`outline`,children:`Review`}),(0,c.jsx)(t.Badge,{variant:`destructive`,children:`Blocked`})]})]}),(0,c.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,c.jsx)(`p`,{className:`font-medium`,children:`Activity feed`}),(0,c.jsx)(`div`,{className:`aui-text-muted mt-4 space-y-3 text-sm`,children:a.activityItems.map(e=>(0,c.jsxs)(`div`,{className:`flex items-center gap-3 rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,c.jsx)(s.ActivityIcon,{className:`size-4 shrink-0`}),(0,c.jsx)(`span`,{children:e})]},e))})]}),(0,c.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,c.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Focused surface`}),(0,c.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:e===`workspace`?`Workspace card`:`File card`}),(0,c.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:`Display family now shows actual card surfaces instead of only plain bordered boxes.`}),(0,c.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2`,children:[(0,c.jsx)(t.Badge,{variant:`outline`,children:`InfoCard`}),(0,c.jsx)(t.Badge,{variant:`outline`,children:`EntityCard`}),(0,c.jsx)(t.Badge,{variant:`outline`,children:`FileCard`}),(0,c.jsx)(t.Badge,{variant:`outline`,children:`Badges`})]}),(0,c.jsxs)(`div`,{className:`mt-4 flex items-center gap-2 text-sm text-emerald-600`,children:[(0,c.jsx)(s.CheckCircle2Icon,{className:`size-4`}),(0,c.jsx)(`span`,{children:`Nested actions stay isolated from parent selection.`})]})]})]})]})]})}exports.DisplayFamilyShowcase=l;

package/dist/showcase/families/display/showcase.d.ts

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

package/dist/showcase/families/display/showcase.js

@@ -0,0 +1,201 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { EntityCard as t } from "../../../components/display/entity-card.js";
+import { FileCard as n } from "../../../components/display/file-card.js";
+import { SmartCard as r } from "../../../components/display/smart-card.js";
+import { activityItems as i, metricCards as a } from "./data.js";
+import * as o from "react";
+import { ActivityIcon as s, CheckCircle2Icon as c, FolderIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/showcase/families/display/showcase.tsx
+function f() {
+	let [f, p] = o.useState("workspace");
+	return /* @__PURE__ */ d("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ u("div", {
+			className: "grid gap-4 md:grid-cols-3",
+			children: a.map((e) => /* @__PURE__ */ d("div", {
+				className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+				children: [
+					/* @__PURE__ */ u("p", {
+						className: "aui-text-muted text-sm",
+						children: e.label
+					}),
+					/* @__PURE__ */ u("p", {
+						className: "mt-2 text-3xl font-semibold tracking-tight",
+						children: e.value
+					}),
+					/* @__PURE__ */ u("p", {
+						className: "aui-text-subtle mt-2 text-sm",
+						children: e.note
+					})
+				]
+			}, e.label))
+		}), /* @__PURE__ */ d("div", {
+			className: "grid gap-4 xl:grid-cols-[1.1fr_0.9fr]",
+			children: [/* @__PURE__ */ d("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ u(r, {
+					eyebrow: "Workspace surface",
+					title: "Azamat UI release rail",
+					description: "Display components should present density, metadata, actions and emphasis without requiring route-specific styling each time.",
+					meta: "Updated 2 min ago",
+					status: /* @__PURE__ */ u(e, {
+						variant: "secondary",
+						children: "Live"
+					}),
+					content: /* @__PURE__ */ d("div", {
+						className: "grid gap-3 md:grid-cols-3",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+								children: [/* @__PURE__ */ u("p", {
+									className: "aui-text-muted text-xs uppercase tracking-[0.18em]",
+									children: "Surface"
+								}), /* @__PURE__ */ u("p", {
+									className: "aui-text-strong mt-2 text-sm font-medium",
+									children: "InfoCard"
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+								children: [/* @__PURE__ */ u("p", {
+									className: "aui-text-muted text-xs uppercase tracking-[0.18em]",
+									children: "State"
+								}), /* @__PURE__ */ u("p", {
+									className: "aui-text-strong mt-2 text-sm font-medium",
+									children: "Selected-safe actions"
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+								children: [/* @__PURE__ */ u("p", {
+									className: "aui-text-muted text-xs uppercase tracking-[0.18em]",
+									children: "Use case"
+								}), /* @__PURE__ */ u("p", {
+									className: "aui-text-strong mt-2 text-sm font-medium",
+									children: "Overview, result, summary"
+								})]
+							})
+						]
+					}),
+					actions: /* @__PURE__ */ u(e, {
+						variant: "outline",
+						children: "Action-safe"
+					})
+				}), /* @__PURE__ */ d("div", {
+					className: "grid gap-4 md:grid-cols-2",
+					children: [/* @__PURE__ */ u(t, {
+						title: "Workspace card",
+						description: "Composable entity block with media, status and actions.",
+						icon: /* @__PURE__ */ u(l, { className: "size-4" }),
+						status: /* @__PURE__ */ u(e, {
+							variant: "outline",
+							children: "Review"
+						}),
+						meta: "Team: Core",
+						selected: f === "workspace",
+						onSelect: () => p("workspace"),
+						actions: /* @__PURE__ */ u(e, {
+							variant: "outline",
+							children: "Inspect"
+						})
+					}), /* @__PURE__ */ u(n, {
+						name: "release-notes.md",
+						description: "Prepared for changelog and docs page.",
+						meta: "Updated 5m ago",
+						selected: f === "file",
+						onOpen: () => p("file"),
+						actions: /* @__PURE__ */ u(e, {
+							variant: "outline",
+							children: "Versioned"
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ d("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [/* @__PURE__ */ u("p", {
+							className: "font-medium",
+							children: "Status legend"
+						}), /* @__PURE__ */ d("div", {
+							className: "mt-4 flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ u(e, {
+									variant: "secondary",
+									children: "Live"
+								}),
+								/* @__PURE__ */ u(e, {
+									variant: "outline",
+									children: "Review"
+								}),
+								/* @__PURE__ */ u(e, {
+									variant: "destructive",
+									children: "Blocked"
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [/* @__PURE__ */ u("p", {
+							className: "font-medium",
+							children: "Activity feed"
+						}), /* @__PURE__ */ u("div", {
+							className: "aui-text-muted mt-4 space-y-3 text-sm",
+							children: i.map((e) => /* @__PURE__ */ d("div", {
+								className: "flex items-center gap-3 rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+								children: [/* @__PURE__ */ u(s, { className: "size-4 shrink-0" }), /* @__PURE__ */ u("span", { children: e })]
+							}, e))
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [
+							/* @__PURE__ */ u("p", {
+								className: "aui-text-muted text-sm",
+								children: "Focused surface"
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "aui-text-strong mt-2 text-lg font-semibold",
+								children: f === "workspace" ? "Workspace card" : "File card"
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "aui-text-subtle mt-2 text-sm",
+								children: "Display family now shows actual card surfaces instead of only plain bordered boxes."
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "mt-3 flex flex-wrap gap-2",
+								children: [
+									/* @__PURE__ */ u(e, {
+										variant: "outline",
+										children: "InfoCard"
+									}),
+									/* @__PURE__ */ u(e, {
+										variant: "outline",
+										children: "EntityCard"
+									}),
+									/* @__PURE__ */ u(e, {
+										variant: "outline",
+										children: "FileCard"
+									}),
+									/* @__PURE__ */ u(e, {
+										variant: "outline",
+										children: "Badges"
+									})
+								]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "mt-4 flex items-center gap-2 text-sm text-emerald-600",
+								children: [/* @__PURE__ */ u(c, { className: "size-4" }), /* @__PURE__ */ u("span", { children: "Nested actions stay isolated from parent selection." })]
+							})
+						]
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { f as DisplayFamilyShowcase };

package/dist/showcase/families/filters/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{value:`all-pipeline`,label:`All pipeline`,description:`Full team deal flow`},{value:`at-risk`,label:`At risk`,description:`Overdue and stalled records`},{value:`owner-azamat`,label:`Owner: Azamat`,description:`Personal operating view`}],t=[{key:`status`,label:`Status`,value:`Active`,tone:`default`},{key:`segment`,label:`Segment`,value:`Enterprise`,tone:`info`},{key:`period`,label:`Period`,value:`This month`,tone:`muted`},{key:`owner`,label:`Owner`,value:`Assigned`,tone:`success`}],n=[{value:`active`,label:`Active`,description:`Healthy operating records`},{value:`review`,label:`Review`,description:`Needs manual follow-up`},{value:`overdue`,label:`Overdue`,description:`Past expected date`}];exports.defaultFilterChips=t,exports.savedViews=e,exports.statusOptions=n;

package/dist/showcase/families/filters/data.d.ts

@@ -0,0 +1,31 @@
+export declare const savedViews: {
+    value: string;
+    label: string;
+    description: string;
+}[];
+export declare const defaultFilterChips: ({
+    key: string;
+    label: string;
+    value: string;
+    tone: "default";
+} | {
+    key: string;
+    label: string;
+    value: string;
+    tone: "info";
+} | {
+    key: string;
+    label: string;
+    value: string;
+    tone: "muted";
+} | {
+    key: string;
+    label: string;
+    value: string;
+    tone: "success";
+})[];
+export declare const statusOptions: {
+    value: string;
+    label: string;
+    description: string;
+}[];

package/dist/showcase/families/filters/data.js

@@ -0,0 +1,61 @@
+//#region src/showcase/families/filters/data.ts
+var e = [
+	{
+		value: "all-pipeline",
+		label: "All pipeline",
+		description: "Full team deal flow"
+	},
+	{
+		value: "at-risk",
+		label: "At risk",
+		description: "Overdue and stalled records"
+	},
+	{
+		value: "owner-azamat",
+		label: "Owner: Azamat",
+		description: "Personal operating view"
+	}
+], t = [
+	{
+		key: "status",
+		label: "Status",
+		value: "Active",
+		tone: "default"
+	},
+	{
+		key: "segment",
+		label: "Segment",
+		value: "Enterprise",
+		tone: "info"
+	},
+	{
+		key: "period",
+		label: "Period",
+		value: "This month",
+		tone: "muted"
+	},
+	{
+		key: "owner",
+		label: "Owner",
+		value: "Assigned",
+		tone: "success"
+	}
+], n = [
+	{
+		value: "active",
+		label: "Active",
+		description: "Healthy operating records"
+	},
+	{
+		value: "review",
+		label: "Review",
+		description: "Needs manual follow-up"
+	},
+	{
+		value: "overdue",
+		label: "Overdue",
+		description: "Past expected date"
+	}
+];
+//#endregion
+export { t as defaultFilterChips, e as savedViews, n as statusOptions };

package/dist/showcase/families/filters/index.cjs

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

package/dist/showcase/families/filters/index.d.ts

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

package/dist/showcase/families/filters/index.js

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

package/dist/showcase/families/filters/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { FilterBar, FilterChips } from "tembro"
+
+export function Example() {
+  return <FilterBar />
+}`,highlights:[`Filter bars`,`Applied chips`,`Search + filter coupling`,`Dashboard refinement`],scenarios:[{title:`Analytics toolbar`,description:`Combine search, chips and status filters in one row.`},{title:`Lead boards`,description:`Switch quickly between open, review and won states.`},{title:`Saved segments`,description:`Represent active narrowing rules with persistent chips.`}],metrics:[{label:`Exports`,value:`2`},{label:`Modes`,value:`Bar + chips`},{label:`Status`,value:`Stable`}]};exports.filtersFamilyMock=e;

package/dist/showcase/families/filters/mock.d.ts

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

package/dist/showcase/families/filters/mock.js

@@ -0,0 +1,40 @@
+//#region src/showcase/families/filters/mock.ts
+var e = {
+	code: "import { FilterBar, FilterChips } from \"tembro\"\n\nexport function Example() {\n  return <FilterBar />\n}",
+	highlights: [
+		"Filter bars",
+		"Applied chips",
+		"Search + filter coupling",
+		"Dashboard refinement"
+	],
+	scenarios: [
+		{
+			title: "Analytics toolbar",
+			description: "Combine search, chips and status filters in one row."
+		},
+		{
+			title: "Lead boards",
+			description: "Switch quickly between open, review and won states."
+		},
+		{
+			title: "Saved segments",
+			description: "Represent active narrowing rules with persistent chips."
+		}
+	],
+	metrics: [
+		{
+			label: "Exports",
+			value: "2"
+		},
+		{
+			label: "Modes",
+			value: "Bar + chips"
+		},
+		{
+			label: "Status",
+			value: "Stable"
+		}
+	]
+};
+//#endregion
+export { e as filtersFamilyMock };

package/dist/showcase/families/filters/showcase.cjs

@@ -0,0 +1 @@
+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/filters/filter-chips.cjs"),a=require("../../../components/filters/saved-filter-select.cjs"),o=require("../../../components/inputs/simple-select.cjs"),s=require("./data.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({state:e,setState:u}){let[d,f]=c.useState(`all-pipeline`),[p,m]=c.useState(`active`),[h,g]=c.useState(s.defaultFilterChips);return(0,l.jsxs)(`div`,{className:`space-y-4`,children:[(0,l.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,l.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between`,children:[(0,l.jsxs)(`div`,{className:`space-y-3`,children:[(0,l.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,l.jsx)(r.Badge,{variant:`outline`,children:`SavedFilterSelect`}),(0,l.jsx)(r.Badge,{variant:`outline`,children:`FilterChips`}),(0,l.jsx)(r.Badge,{variant:`outline`,children:`SimpleSelect`})]}),(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Filter composition flow`}),(0,l.jsx)(`p`,{className:`aui-text-muted mt-1 text-sm leading-6`,children:`Search, saved view switch, field-level filter and removable active chips should read like one coherent toolbar rather than separate widgets.`})]})]}),(0,l.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,l.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>u({search:``}),children:`Clear query`}),(0,l.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>{f(`all-pipeline`),m(`active`),g(s.defaultFilterChips),u({search:``,notes:`Filters reset to default operating view.`})},children:`Reset`}),(0,l.jsx)(t.Button,{size:`sm`,onClick:()=>u({notes:`Current filter composition prepared for save flow.`}),children:`Save view`})]})]}),(0,l.jsxs)(`div`,{className:`mt-4 grid gap-3 xl:grid-cols-[1.2fr_0.8fr_0.8fr]`,children:[(0,l.jsx)(n.Input,{value:e.search,onChange:e=>u({search:e.target.value}),placeholder:`Search records...`,className:`w-full`}),(0,l.jsx)(a.SavedFilterSelect,{value:d,onValueChange:e=>{f(e),u({notes:`${s.savedViews.find(t=>t.value===e)?.label??`View cleared`} applied to the table toolbar.`})},filters:s.savedViews,onSave:e=>u({notes:`Saved filter view requested: ${e}`}),onDelete:e=>u({notes:`${s.savedViews.find(t=>t.value===e)?.label??e} requested for deletion.`})}),(0,l.jsx)(o.SimpleSelect,{value:p,onValueChange:e=>{m(e),u({notes:`${s.statusOptions.find(t=>t.value===e)?.label??`Status cleared`} filter applied.`})},options:s.statusOptions,placeholder:`Select status`,clearable:!0,searchable:!0})]}),(0,l.jsx)(`div`,{className:`mt-4 rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,l.jsx)(i.FilterChips,{chips:h,onRemove:e=>{g(t=>t.filter(t=>t.key!==e)),u({notes:`${e} filter removed from the active toolbar state.`})},onClear:()=>{g([]),u({notes:`All active filter chips cleared.`})}})})]}),(0,l.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[1.1fr_0.9fr]`,children:[(0,l.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,l.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,l.jsx)(r.Badge,{variant:`outline`,children:`Step 1: query`}),(0,l.jsx)(r.Badge,{variant:`outline`,children:`Step 2: saved view`}),(0,l.jsx)(r.Badge,{variant:`outline`,children:`Step 3: active chips`})]}),(0,l.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Search narrows result scope`}),(0,l.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Top-level search stays lightweight and pairs with field filters instead of replacing them.`})]}),(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Saved view restores intent`}),(0,l.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Named views bring back common operating states without manually rebuilding every chip.`})]}),(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Chips expose active state`}),(0,l.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Each chip can be removed independently, and clear-all stays available for quick resets.`})]})]})]}),(0,l.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:(0,l.jsxs)(`div`,{className:`grid gap-3`,children:[(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Current query`}),(0,l.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:e.search||`All records`})]}),(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Saved view`}),(0,l.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:s.savedViews.find(e=>e.value===d)?.label??`None`})]}),(0,l.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,l.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Active chips`}),(0,l.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:h.length})]})]})})]})]})}exports.FiltersFamilyShowcase=u;

package/dist/showcase/families/filters/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { FamilyDemoProps } from "../types";
+export declare function FiltersFamilyShowcase({ state, setState }: FamilyDemoProps): React.JSX.Element;