tembro 3.0.0 → 3.1.5

package/dist/showcase/premium/app-shell/mock.js

@@ -1,38 +0,0 @@
-//#region src/showcase/premium/app-shell/mock.ts
-var e = {
-	code: "import { AppHeader, AppSidebar, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, SidebarNav, Button } from \"tembro\"\n\nconst navItems = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true },\n  { key: \"products\", label: \"Products\", href: \"/products\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\" },\n]\n\nconst metrics = [\n  { key: \"mrr\", label: \"MRR\", value: \"$84k\", description: \"+14% vs last month\", trend: \"up\" },\n  { key: \"sessions\", label: \"Active sessions\", value: \"1,240\", description: \"12% live growth\" },\n  { key: \"issues\", label: \"Open issues\", value: \"23\", description: \"3 priority\", trend: \"down\" },\n]\n\nexport function Example() {\n  return (\n    <AppShell\n      sidebarWidth=\"default\"\n      mainClassName=\"p-4\"\n      sidebar={\n        <AppSidebar\n          header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n          footer={<div className=\"px-3 py-2 text-xs aui-text-muted\">v1.2.0</div>}\n        >\n          <SidebarNav items={navItems} />\n        </AppSidebar>\n      }\n      header={<AppHeader left=\"Admin Console\" right={<Button variant=\"outline\">Open command</Button>} />}\n      aside={<InfoCard title=\"Workspace\" description=\"Metrics, alerts, and quick access cards.\" compact>Aside slot keeps secondary context near main content.</InfoCard>}\n    >\n      <PageContainer size=\"lg\">\n        <PageHeader\n          eyebrow=\"Product dashboard\"\n          title=\"Teams and activity\"\n          description=\"Use shell slots for consistent layout and mobile-safe nav control.\"\n          breadcrumbs={<Breadcrumbs items={[\n            { key: \"home\", label: \"Home\", href: \"/\" },\n            { key: \"dashboard\", label: \"Dashboard\", current: true },\n          ]} />}\n          actions={<Button variant=\"outline\" size=\"sm\">Manage</Button>}\n        />\n        <div className=\"mt-4\">\n          <MetricGrid items={metrics} compact />\n        </div>\n      </PageContainer>\n    </AppShell>\n  )\n}",
-	cliCommand: "npx tembro add app-shell",
-	highlights: [
-		"Shell slots (header, sidebar, aside)",
-		"Static and mobile sidebar behavior",
-		"Breadcrumbs inside page header",
-		"Metric block composition"
-	],
-	relatedBlockSlugs: [
-		"dashboard-starter",
-		"crm-dashboard",
-		"settings-form"
-	],
-	scenarios: [
-		{
-			title: "Dashboard shell",
-			description: "Build an app frame with reusable header, sidebar and aside areas."
-		},
-		{
-			title: "Router-aware layout",
-			description: "Keep navigation and route content separated by region for SPA and SSR pages."
-		},
-		{
-			title: "Mobile fallback",
-			description: "Toggle mobile menu and keep aside optional for narrow screens."
-		}
-	],
-	capabilityNotes: [
-		"Use AppShell when every page shares a stable structure: header, sidebar, main and optional aside.",
-		"Keep sidebar composition explicit so route-level content stays predictable and testable.",
-		"Pass controlled `sidebarCollapsed` and `mobileSidebarOpen` when app state is owned by a global layout manager.",
-		"Avoid overloading the aside region in mobile contexts; hide non-essential context when needed."
-	]
-};
-//#endregion
-export { e as appShellMock };

package/dist/showcase/premium/app-shell/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/badge/index.cjs"),r=require("../../../components/layout/app-sidebar.cjs"),i=require("../../../components/layout/breadcrumbs.cjs"),a=require("../../../components/layout/page-container.cjs"),o=require("../../../components/layout/sidebar-nav.cjs"),s=require("../../../components/display/metric-grid.cjs"),c=require("../../../components/display/smart-card.cjs"),l=require("../../../components/layout/app-header.cjs"),u=require("../../../components/layout/page-header.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=[{key:`overview`,label:`Overview`,href:`#overview`},{key:`products`,label:`Products`,href:`#products`},{key:`billing`,label:`Billing`,href:`#billing`},{key:`settings`,label:`Settings`,href:`#settings`}],m=[{key:`mrr`,label:`MRR`,value:`$64k`,description:`11% vs last week`,tone:`success`},{key:`users`,label:`Users`,value:`1,020`,description:`3% churn risk`,tone:`warning`},{key:`tasks`,label:`Tasks`,value:`58`,description:`5 in progress`,tone:`info`},{key:`response`,label:`Latency`,value:`1.2s`,description:`P95 API response`,tone:`default`}];function h({mode:e}){let[h,g]=d.useState(`overview`),[_,v]=d.useState(!1),y=p.map(e=>({...e,active:e.key===h,onSelect:()=>g(e.key)})),b=p.find(e=>e.key===h)?.label??`Overview`;return(0,f.jsxs)(`div`,{className:`space-y-5`,children:[(0,f.jsx)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,f.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between`,children:[(0,f.jsxs)(`div`,{className:`max-w-xl`,children:[(0,f.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Application frame`}),(0,f.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Reusable shell preview`}),(0,f.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Header, sidebar, main content and aside should feel like one predictable route frame.`})]}),(0,f.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Header`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Sidebar`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Aside`})]})]})}),e===`playground`?(0,f.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,f.jsx)(t.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>v(e=>!e),children:_?`Expand sidebar`:`Collapse sidebar`})}):null,(0,f.jsxs)(`div`,{className:`overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,f.jsx)(l.AppHeader,{className:`border-b border-[color:var(--aui-divider)] px-4 py-3`,left:`Product shell`,right:(0,f.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Profile`})}),(0,f.jsxs)(`div`,{className:`grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]`,children:[(0,f.jsx)(r.AppSidebar,{responsive:!0,mobileTitle:`Workspace navigation`,mobileDescription:`Open the shell menu first, then move through app routes without squeezing the main content.`,header:(0,f.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`AZA Studio`}),footer:(0,f.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Shell footer`}),className:_?`lg:w-[92px]`:``,collapsed:_,children:(0,f.jsx)(o.SidebarNav,{items:y})}),(0,f.jsx)(`div`,{className:`min-w-0 border-x border-[color:var(--aui-divider)] p-4`,children:(0,f.jsxs)(a.PageContainer,{size:`lg`,children:[(0,f.jsx)(u.PageHeader,{eyebrow:`Workspace`,title:b,description:`Use shared shell primitives to keep regions stable across routes.`,breadcrumbs:(0,f.jsx)(i.Breadcrumbs,{items:[{key:`home`,label:`Home`,href:`/`},{key:`components`,label:`Components`,href:`/components`},{key:`active`,label:b,current:!0}]}),actions:(0,f.jsx)(t.Button,{size:`sm`,children:`Manage`})}),(0,f.jsx)(`div`,{className:`mt-4`,children:(0,f.jsx)(s.MetricGrid,{items:m,columns:2,compact:!0})})]})}),(0,f.jsx)(`aside`,{className:`hidden p-4 lg:block`,children:(0,f.jsx)(c.SmartCard,{title:`Quick actions`,description:`Support content can live in the aside.`,compact:!0})})]})]})]})}exports.AppShellShowcase=h;

package/dist/showcase/premium/app-shell/showcase.d.ts

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

package/dist/showcase/premium/app-shell/showcase.js

@@ -1,208 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { AppSidebar as n } from "../../../components/layout/app-sidebar.js";
-import { Breadcrumbs as r } from "../../../components/layout/breadcrumbs.js";
-import { PageContainer as i } from "../../../components/layout/page-container.js";
-import { SidebarNav as a } from "../../../components/layout/sidebar-nav.js";
-import { MetricGrid as o } from "../../../components/display/metric-grid.js";
-import { SmartCard as s } from "../../../components/display/smart-card.js";
-import { AppHeader as c } from "../../../components/layout/app-header.js";
-import { PageHeader as l } from "../../../components/layout/page-header.js";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/showcase/premium/app-shell/showcase.tsx
-var p = [
-	{
-		key: "overview",
-		label: "Overview",
-		href: "#overview"
-	},
-	{
-		key: "products",
-		label: "Products",
-		href: "#products"
-	},
-	{
-		key: "billing",
-		label: "Billing",
-		href: "#billing"
-	},
-	{
-		key: "settings",
-		label: "Settings",
-		href: "#settings"
-	}
-], m = [
-	{
-		key: "mrr",
-		label: "MRR",
-		value: "$64k",
-		description: "11% vs last week",
-		tone: "success"
-	},
-	{
-		key: "users",
-		label: "Users",
-		value: "1,020",
-		description: "3% churn risk",
-		tone: "warning"
-	},
-	{
-		key: "tasks",
-		label: "Tasks",
-		value: "58",
-		description: "5 in progress",
-		tone: "info"
-	},
-	{
-		key: "response",
-		label: "Latency",
-		value: "1.2s",
-		description: "P95 API response",
-		tone: "default"
-	}
-];
-function h({ mode: h }) {
-	let [g, _] = u.useState("overview"), [v, y] = u.useState(!1), b = p.map((e) => ({
-		...e,
-		active: e.key === g,
-		onSelect: () => _(e.key)
-	})), x = p.find((e) => e.key === g)?.label ?? "Overview";
-	return /* @__PURE__ */ f("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ d("div", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
-				children: /* @__PURE__ */ f("div", {
-					className: "flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between",
-					children: [/* @__PURE__ */ f("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ d("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Application frame"
-							}),
-							/* @__PURE__ */ d("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Reusable shell preview"
-							}),
-							/* @__PURE__ */ d("p", {
-								className: "mt-3 text-sm leading-6 aui-text-muted",
-								children: "Header, sidebar, main content and aside should feel like one predictable route frame."
-							})
-						]
-					}), /* @__PURE__ */ f("div", {
-						className: "flex flex-wrap gap-2",
-						children: [
-							/* @__PURE__ */ d(t, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Header"
-							}),
-							/* @__PURE__ */ d(t, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Sidebar"
-							}),
-							/* @__PURE__ */ d(t, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Aside"
-							})
-						]
-					})]
-				})
-			}),
-			h === "playground" ? /* @__PURE__ */ d("div", {
-				className: "flex flex-wrap gap-3",
-				children: /* @__PURE__ */ d(e, {
-					size: "sm",
-					variant: v ? "outline" : "default",
-					onClick: () => y((e) => !e),
-					children: v ? "Expand sidebar" : "Collapse sidebar"
-				})
-			}) : null,
-			/* @__PURE__ */ f("div", {
-				className: "overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
-				children: [/* @__PURE__ */ d(c, {
-					className: "border-b border-[color:var(--aui-divider)] px-4 py-3",
-					left: "Product shell",
-					right: /* @__PURE__ */ d(e, {
-						size: "sm",
-						variant: "outline",
-						children: "Profile"
-					})
-				}), /* @__PURE__ */ f("div", {
-					className: "grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]",
-					children: [
-						/* @__PURE__ */ d(n, {
-							responsive: !0,
-							mobileTitle: "Workspace navigation",
-							mobileDescription: "Open the shell menu first, then move through app routes without squeezing the main content.",
-							header: /* @__PURE__ */ d("div", {
-								className: "px-3 py-2 text-sm font-semibold",
-								children: "AZA Studio"
-							}),
-							footer: /* @__PURE__ */ d("div", {
-								className: "aui-text-muted px-3 py-2 text-xs",
-								children: "Shell footer"
-							}),
-							className: v ? "lg:w-[92px]" : "",
-							collapsed: v,
-							children: /* @__PURE__ */ d(a, { items: b })
-						}),
-						/* @__PURE__ */ d("div", {
-							className: "min-w-0 border-x border-[color:var(--aui-divider)] p-4",
-							children: /* @__PURE__ */ f(i, {
-								size: "lg",
-								children: [/* @__PURE__ */ d(l, {
-									eyebrow: "Workspace",
-									title: x,
-									description: "Use shared shell primitives to keep regions stable across routes.",
-									breadcrumbs: /* @__PURE__ */ d(r, { items: [
-										{
-											key: "home",
-											label: "Home",
-											href: "/"
-										},
-										{
-											key: "components",
-											label: "Components",
-											href: "/components"
-										},
-										{
-											key: "active",
-											label: x,
-											current: !0
-										}
-									] }),
-									actions: /* @__PURE__ */ d(e, {
-										size: "sm",
-										children: "Manage"
-									})
-								}), /* @__PURE__ */ d("div", {
-									className: "mt-4",
-									children: /* @__PURE__ */ d(o, {
-										items: m,
-										columns: 2,
-										compact: !0
-									})
-								})]
-							})
-						}),
-						/* @__PURE__ */ d("aside", {
-							className: "hidden p-4 lg:block",
-							children: /* @__PURE__ */ d(s, {
-								title: "Quick actions",
-								description: "Support content can live in the aside.",
-								compact: !0
-							})
-						})
-					]
-				})]
-			})
-		]
-	});
-}
-//#endregion
-export { h as AppShellShowcase };

package/dist/showcase/premium/clearable-input/index.cjs

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

package/dist/showcase/premium/clearable-input/index.d.ts

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

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

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

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

@@ -1,16 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("workspace token")
-
-  return (
-    <Input
-      value={value}
-      onValueChange={setValue}
-      placeholder="Filter or paste value..."
-      clearable
-      clearOnEscape
-    />
-  )
-}`,cliCommand:`npx tembro add input`,highlights:[`Inline clear action`,`Escape-to-clear support`,`Focus restore after clearing`,`Small but high-frequency utility input`],scenarios:[{title:`Filter reset`,description:`Let users clear a short filter without hunting for an extra reset button.`},{title:`Token paste`,description:`Remove a pasted value quickly and stay focused in the same field.`},{title:`Toolbar utility`,description:`Use in dense admin bars where compact cleanup matters.`}],capabilityNotes:["Prefer `Input clearable` for short-lived values like filters and quick entry.",`Escape clear is useful only when the input is frequently changed.`,`Keep the field visually quiet so the clear action feels secondary.`]};exports.clearableInputMock=e;

package/dist/showcase/premium/clearable-input/mock.d.ts

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

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

@@ -1,32 +0,0 @@
-//#region src/showcase/premium/clearable-input/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"workspace token\")\n\n  return (\n    <Input\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Filter or paste value...\"\n      clearable\n      clearOnEscape\n    />\n  )\n}",
-	cliCommand: "npx tembro add input",
-	highlights: [
-		"Inline clear action",
-		"Escape-to-clear support",
-		"Focus restore after clearing",
-		"Small but high-frequency utility input"
-	],
-	scenarios: [
-		{
-			title: "Filter reset",
-			description: "Let users clear a short filter without hunting for an extra reset button."
-		},
-		{
-			title: "Token paste",
-			description: "Remove a pasted value quickly and stay focused in the same field."
-		},
-		{
-			title: "Toolbar utility",
-			description: "Use in dense admin bars where compact cleanup matters."
-		}
-	],
-	capabilityNotes: [
-		"Prefer `Input clearable` for short-lived values like filters and quick entry.",
-		"Escape clear is useful only when the input is frequently changed.",
-		"Keep the field visually quiet so the clear action feels secondary."
-	]
-};
-//#endregion
-export { e as clearableInputMock };

package/dist/showcase/premium/clearable-input/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(`workspace token`);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Utility input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ClearableInput should remove friction from repetitive short entry`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Escape clear`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Focus restore`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.Input,{value:o,onValueChange:s,placeholder:`Filter or paste value...`,clearable:!0,clearOnEscape:!0,trailingAction:(0,i.jsx)(`span`,{className:`text-xs aui-text-muted`,children:`Live filter`}),replaceTrailingWhenClear:!1})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current value`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o||`Empty`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"`Escape` bosib ham clear bo‘lishini sinab ko‘ring."})}):null]})}exports.ClearableInputShowcase=o;

package/dist/showcase/premium/clearable-input/showcase.d.ts

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

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

@@ -1,94 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/clearable-input/showcase.tsx
-var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function o({ mode: o }) {
-	let [s, c] = n.useState("workspace token");
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ r("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ i("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ r("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Utility input"
-							}),
-							/* @__PURE__ */ r("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "ClearableInput should remove friction from repetitive short entry"
-							}),
-							/* @__PURE__ */ r("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is."
-							})
-						]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ r(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Escape clear"
-						}), /* @__PURE__ */ r(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Focus restore"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r(e, {
-					value: s,
-					onValueChange: c,
-					placeholder: "Filter or paste value...",
-					clearable: !0,
-					clearOnEscape: !0,
-					trailingAction: /* @__PURE__ */ r("span", {
-						className: "text-xs aui-text-muted",
-						children: "Live filter"
-					}),
-					replaceTrailingWhenClear: !1
-				})
-			}),
-			/* @__PURE__ */ i("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ i("section", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Current value"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: s || "Empty"
-					})]
-				}), /* @__PURE__ */ i("section", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Usage note"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-sm leading-6 aui-text-muted",
-						children: "Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text."
-					})]
-				})]
-			}),
-			o === "playground" ? /* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r("p", {
-					className: "text-sm aui-text-muted",
-					children: "`Escape` bosib ham clear bo‘lishini sinab ko‘ring."
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { o as ClearableInputShowcase };

package/dist/showcase/premium/combobox/index.cjs

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Button, Select } from "tembro"
-
-const teammateOptions = [
-  { value: "azamat", label: "Azamat", description: "Design system owner" },
-  { value: "nodira", label: "Nodira", description: "Operations lead" },
-  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
-]
-
-export function Example() {
-  const [value, setValue] = useState("azamat")
-
-  return (
-    <div className="space-y-3">
-      <Select
-        value={value}
-        onValueChange={(nextValue) => setValue(nextValue ?? "azamat")}
-        options={teammateOptions}
-        placeholder="Assign owner"
-        searchPlaceholder="Search teammate..."
-        searchable
-      />
-      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
-        Current owner: <strong>{value}</strong>
-      </div>
-      <Button variant="outline" onClick={() => setValue("nodira")}>Pick Nodira</Button>
-    </div>
-  )
-}`,htmlCode:`<button data-slot="combobox-trigger">Open combobox</button>`,cliCommand:`npx tembro add select`,highlights:[`Search-led selection`,`Controlled value`,`Description rows`,`Fast reassignment flow`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Owner assignment`,description:`Use combobox when the list is local but still benefits from search.`},{title:`Dense admin forms`,description:`Keep reassignment fast without opening a full modal.`},{title:`Command-like search`,description:`Useful when discoverability matters more than plain select semantics.`}],capabilityNotes:[`Use Combobox when users need type-to-find behavior on a local option set.`,`Keep option labels and descriptions short to avoid noisy dropdown rows.`,`Prefer controlled value in admin workflows so state stays explicit.`,`If options come from the server, move to AsyncSelect instead of overloading Combobox.`]};exports.comboboxMock=e;

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

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

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

@@ -1,39 +0,0 @@
-//#region src/showcase/premium/combobox/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Button, Select } from \"tembro\"\n\nconst teammateOptions = [\n  { value: \"azamat\", label: \"Azamat\", description: \"Design system owner\" },\n  { value: \"nodira\", label: \"Nodira\", description: \"Operations lead\" },\n  { value: \"sardor\", label: \"Sardor\", description: \"Frontend engineer\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"azamat\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Select\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"azamat\")}\n        options={teammateOptions}\n        placeholder=\"Assign owner\"\n        searchPlaceholder=\"Search teammate...\"\n        searchable\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Current owner: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"nodira\")}>Pick Nodira</Button>\n    </div>\n  )\n}",
-	htmlCode: "<button data-slot=\"combobox-trigger\">Open combobox</button>",
-	cliCommand: "npx tembro add select",
-	highlights: [
-		"Search-led selection",
-		"Controlled value",
-		"Description rows",
-		"Fast reassignment flow"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"users-table",
-		"crm-dashboard"
-	],
-	scenarios: [
-		{
-			title: "Owner assignment",
-			description: "Use combobox when the list is local but still benefits from search."
-		},
-		{
-			title: "Dense admin forms",
-			description: "Keep reassignment fast without opening a full modal."
-		},
-		{
-			title: "Command-like search",
-			description: "Useful when discoverability matters more than plain select semantics."
-		}
-	],
-	capabilityNotes: [
-		"Use Combobox when users need type-to-find behavior on a local option set.",
-		"Keep option labels and descriptions short to avoid noisy dropdown rows.",
-		"Prefer controlled value in admin workflows so state stays explicit.",
-		"If options come from the server, move to AsyncSelect instead of overloading Combobox."
-	]
-};
-//#endregion
-export { e as comboboxMock };

package/dist/showcase/premium/combobox/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/badge/index.cjs"),r=require("../../../components/ui/select/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[{value:`azamat`,label:`Azamat`,description:`Design system owner`},{value:`nodira`,label:`Nodira`,description:`Operations lead`},{value:`sardor`,label:`Sardor`,description:`Frontend engineer`},{value:`kamola`,label:`Kamola`,description:`Product manager`}];function c({state:e,setState:c}){let l=s.some(t=>t.value===e.selectValue)?e.selectValue:`azamat`,u=s.find(e=>e.value===l)??s[0],[d,f]=i.useState(``);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search selection`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Combobox is the keyboard-first local member`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Searchable`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Local options`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign component owner`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.Select,{value:l,options:s.map(e=>({...e})),onValueChange:e=>c({selectValue:e??`azamat`}),placeholder:`Choose teammate`,searchPlaceholder:`Search teammate...`,searchable:!0,clearable:!0,showSelectedDescription:!0,onSearchChange:f})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:u.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:u.description}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead.`})]})]})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current owner: `,u.label]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions below to verify that the value stays controlled outside the dropdown itself.`}),(0,a.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Search query: `,d||`empty`]})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:`nodira`}),children:`Pick Nodira`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:`azamat`}),children:`Reset`})]})]})})]})}exports.ComboboxShowcase=c;

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

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