tembro 2.0.4 → 2.0.6

package/dist/showcase/premium/carousel/showcase.js

@@ -6,66 +6,114 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 var o = [
 	{
 		title: "Onboarding",
-		text: "Guide quickly from first login."
+		text: "Guide quickly from first login.",
+		tone: "Launch"
 	},
 	{
 		title: "Components",
-		text: "Review ready-made dashboard patterns."
+		text: "Review ready-made dashboard patterns.",
+		tone: "Library"
 	},
 	{
 		title: "Release",
-		text: "Publish, test, and iterate faster."
+		text: "Publish, test, and iterate faster.",
+		tone: "Ship"
 	}
 ];
 function s() {
-	let [s, c] = r.useState(!0), [l, u] = r.useState(!0), [d, f] = r.useState(0);
+	let [s, c] = r.useState(!0), [l, u] = r.useState(!0), [d, f] = r.useState(!1), [p, m] = r.useState(0), [h, g] = r.useState(!1);
 	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
-		children: [/* @__PURE__ */ a("div", {
-			className: "flex flex-wrap gap-3",
-			children: [/* @__PURE__ */ a(e, {
-				size: "sm",
-				variant: s ? "default" : "outline",
-				onClick: () => c((e) => !e),
-				children: [s ? "Hide" : "Show", " arrows"]
-			}), /* @__PURE__ */ a(e, {
-				size: "sm",
-				variant: l ? "default" : "outline",
-				onClick: () => u((e) => !e),
-				children: [l ? "Hide" : "Show", " dots"]
-			})]
-		}), /* @__PURE__ */ i(t, {
-			index: d,
-			loop: !0,
-			showArrows: s,
-			showDots: l,
-			onIndexChange: (e) => f(e),
-			previousLabel: "Previous slide",
-			nextLabel: "Next slide",
-			children: o.map((e, t) => /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i("div", {
-				className: "rounded-xl border border-border bg-card p-8",
-				children: /* @__PURE__ */ i("div", {
-					className: "flex items-start justify-between gap-3",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					/* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: s ? "default" : "outline",
+						onClick: () => c((e) => !e),
+						children: [s ? "Hide" : "Show", " arrows"]
+					}),
+					/* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: l ? "default" : "outline",
+						onClick: () => u((e) => !e),
+						children: [l ? "Hide" : "Show", " dots"]
+					}),
+					/* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: d ? "default" : "outline",
+						onClick: () => f((e) => !e),
+						children: [d ? "Stop" : "Start", " autoplay"]
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: o.map((t, n) => /* @__PURE__ */ a(e, {
+					type: "button",
+					variant: p === n ? "default" : "outline",
+					className: "justify-start",
+					onClick: () => m(n),
+					children: [
+						n + 1,
+						". ",
+						t.title
+					]
+				}, t.title))
+			}),
+			/* @__PURE__ */ i(t, {
+				index: p,
+				loop: !0,
+				showArrows: s,
+				showDots: l,
+				autoplay: d,
+				autoplayInterval: 2200,
+				showPlaybackControl: !0,
+				onIndexChange: (e) => m(e),
+				onAutoplayChange: g,
+				previousLabel: "Previous slide",
+				nextLabel: "Next slide",
+				children: o.map((e, t) => /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i("div", {
+					className: "min-h-56 rounded-xl border border-border bg-card p-8",
 					children: /* @__PURE__ */ a("div", {
-						className: "grid gap-2",
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground",
-								children: `Slide ${t + 1}`
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "text-lg font-semibold text-foreground",
-								children: e.title
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "text-sm text-muted-foreground",
-								children: e.text
-							})
-						]
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ a("div", {
+							className: "grid gap-2",
+							children: [
+								/* @__PURE__ */ i("p", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.24em] text-primary",
+									children: e.tone
+								}),
+								/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground",
+									children: `Slide ${t + 1}`
+								}),
+								/* @__PURE__ */ i("h3", {
+									className: "text-lg font-semibold text-foreground",
+									children: e.title
+								}),
+								/* @__PURE__ */ i("p", {
+									className: "text-sm text-muted-foreground",
+									children: e.text
+								})
+							]
+						}), /* @__PURE__ */ a("div", {
+							className: "rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground",
+							children: [
+								t + 1,
+								"/",
+								o.length
+							]
+						})]
 					})
-				})
-			}) }, e.title))
-		})]
+				}) }, e.title))
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "text-sm text-muted-foreground",
+				children: ["Playback: ", h || d ? "active" : "paused"]
+			})
+		]
 	});
 }
 //#endregion

package/dist/showcase/premium/checkbox/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/checkbox/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");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({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`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:`Binary lists`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Checkboxes should read like a checklist`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Default checked`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Disabled`})]})]}),(0,i.jsx)(`div`,{className:`mt-6 grid gap-3`,children:r.checkboxDemoItems.map((e,n)=>(0,i.jsxs)(`label`,{htmlFor:e.id,className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{id:e.id,checked:n===0?o.checked:e.checked,disabled:e.disabled,onCheckedChange:n===0?e=>s({checked:!!e}):void 0,defaultChecked:n>0?e.checked:void 0}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:e.label}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.description})]})]},e.label))})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Release checklist is `,o.checked?`enabled`:`disabled`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Toggle the first row or use these actions to verify controlled checkbox behavior.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({checked:!0}),children:`Enable`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({checked:!1}),children:`Disable`})]})]})})]})}exports.CheckboxShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/checkbox/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");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({state:o,setState:s}){let c=o.checked?`checked`:o.textValue===`mixed`?`mixed`:`unchecked`;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`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:`Binary lists`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Checkboxes should read like a checklist`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Default checked`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Disabled`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,allowIndeterminate:!0,checked:c===`mixed`?`indeterminate`:c===`checked`,onCheckedStateChange:e=>{s(e===`indeterminate`?{checked:!1,textValue:`mixed`}:e?{checked:!0,textValue:`checked`}:{checked:!1,textValue:`unchecked`})}}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Approval state`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:"Use `indeterminate` when not all child tasks are complete."})]})]}),(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,checked:`indeterminate`}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Indeterminate`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Useful for parent rows and bulk selection summaries.`})]})]}),(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,checked:!0,disabled:!0}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Disabled selected`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Shows permission-locked completion without becoming clickable.`})]})]})]}),(0,i.jsx)(`div`,{className:`mt-3 grid gap-3`,children:r.checkboxDemoItems.map((e,n)=>(0,i.jsxs)(`label`,{htmlFor:e.id,className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{id:e.id,checked:n===0?o.checked:e.checked,disabled:e.disabled,invalid:n===0&&c===`unchecked`,onCheckedChange:n===0?e=>s({checked:!!e}):void 0,defaultChecked:n>0?e.checked:void 0}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:e.label}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.description})]})]},e.label))})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Release checklist is `,c]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Toggle the first row or use these actions to verify controlled tri-state checkbox behavior.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({checked:!0}),children:`Enable`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({checked:!1}),children:`Disable`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>s({checked:!1,textValue:`mixed`}),children:`Set mixed`})]})]})})]})}exports.CheckboxShowcase=o;

package/dist/showcase/premium/checkbox/showcase.js

@@ -6,68 +6,131 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/checkbox/showcase.tsx
 var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
 function s({ state: s, setState: c }) {
+	let l = s.checked ? "checked" : s.textValue === "mixed" ? "mixed" : "unchecked";
 	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
 		children: [/* @__PURE__ */ a("section", {
 			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-			children: [/* @__PURE__ */ a("div", {
-				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-				children: [/* @__PURE__ */ a("div", {
-					className: "max-w-xl",
-					children: [
-						/* @__PURE__ */ i("p", {
-							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-							children: "Binary lists"
-						}),
-						/* @__PURE__ */ i("h3", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: "Checkboxes should read like a checklist"
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-							children: "The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles."
-						})
-					]
-				}), /* @__PURE__ */ a("div", {
-					className: "flex flex-wrap gap-2",
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Binary lists"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Checkboxes should read like a checklist"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Controlled"
+							}),
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Default checked"
+							}),
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Disabled"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "mt-6 grid gap-3 md:grid-cols-3",
 					children: [
-						/* @__PURE__ */ i(n, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Controlled"
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								allowIndeterminate: !0,
+								checked: l === "mixed" ? "indeterminate" : l === "checked",
+								onCheckedStateChange: (e) => {
+									c(e === "indeterminate" ? {
+										checked: !1,
+										textValue: "mixed"
+									} : e ? {
+										checked: !0,
+										textValue: "checked"
+									} : {
+										checked: !1,
+										textValue: "unchecked"
+									});
+								}
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Approval state"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Use `indeterminate` when not all child tasks are complete."
+							})] })]
 						}),
-						/* @__PURE__ */ i(n, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Default checked"
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								checked: "indeterminate"
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Indeterminate"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Useful for parent rows and bulk selection summaries."
+							})] })]
 						}),
-						/* @__PURE__ */ i(n, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Disabled"
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								checked: !0,
+								disabled: !0
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Disabled selected"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Shows permission-locked completion without becoming clickable."
+							})] })]
 						})
 					]
-				})]
-			}), /* @__PURE__ */ i("div", {
-				className: "mt-6 grid gap-3",
-				children: r.map((e, n) => /* @__PURE__ */ a("label", {
-					htmlFor: e.id,
-					className: `${o} flex items-start gap-3`,
-					children: [/* @__PURE__ */ i(t, {
-						id: e.id,
-						checked: n === 0 ? s.checked : e.checked,
-						disabled: e.disabled,
-						onCheckedChange: n === 0 ? (e) => c({ checked: !!e }) : void 0,
-						defaultChecked: n > 0 ? e.checked : void 0
-					}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-strong",
-						children: e.label
-					}), /* @__PURE__ */ i("p", {
-						className: "mt-1 text-sm aui-text-muted",
-						children: e.description
-					})] })]
-				}, e.label))
-			})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "mt-3 grid gap-3",
+					children: r.map((e, n) => /* @__PURE__ */ a("label", {
+						htmlFor: e.id,
+						className: `${o} flex items-start gap-3`,
+						children: [/* @__PURE__ */ i(t, {
+							id: e.id,
+							checked: n === 0 ? s.checked : e.checked,
+							disabled: e.disabled,
+							invalid: n === 0 && l === "unchecked",
+							onCheckedChange: n === 0 ? (e) => c({ checked: !!e }) : void 0,
+							defaultChecked: n > 0 ? e.checked : void 0
+						}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-strong",
+							children: e.label
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-1 text-sm aui-text-muted",
+							children: e.description
+						})] })]
+					}, e.label))
+				})
+			]
 		}), /* @__PURE__ */ i("section", {
 			className: o,
 			children: /* @__PURE__ */ a("div", {
@@ -79,26 +142,39 @@ function s({ state: s, setState: c }) {
 					}),
 					/* @__PURE__ */ a("h4", {
 						className: "mt-2 text-lg font-semibold aui-text-strong",
-						children: ["Release checklist is ", s.checked ? "enabled" : "disabled"]
+						children: ["Release checklist is ", l]
 					}),
 					/* @__PURE__ */ i("p", {
 						className: "mt-2 text-sm leading-6 aui-text-muted",
-						children: "Toggle the first row or use these actions to verify controlled checkbox behavior."
+						children: "Toggle the first row or use these actions to verify controlled tri-state checkbox behavior."
 					})
 				] }), /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ i(e, {
-						type: "button",
-						size: "sm",
-						onClick: () => c({ checked: !0 }),
-						children: "Enable"
-					}), /* @__PURE__ */ i(e, {
-						type: "button",
-						size: "sm",
-						variant: "secondary",
-						onClick: () => c({ checked: !1 }),
-						children: "Disable"
-					})]
+					children: [
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							onClick: () => c({ checked: !0 }),
+							children: "Enable"
+						}),
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							variant: "secondary",
+							onClick: () => c({ checked: !1 }),
+							children: "Disable"
+						}),
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							onClick: () => c({
+								checked: !1,
+								textValue: "mixed"
+							}),
+							children: "Set mixed"
+						})
+					]
 				})]
 			})
 		})]

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

@@ -1,15 +1,16 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { ClearableInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = React.useState("workspace token")
 
   return (
-    <ClearableInput
+    <Input
       value={value}
       onValueChange={setValue}
       placeholder="Filter or paste value..."
+      clearable
       clearOnEscape
     />
   )
-}`,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:[`Clearable input is strongest 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;
+}`,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.js

@@ -1,6 +1,7 @@
 //#region src/showcase/premium/clearable-input/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { ClearableInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"workspace token\")\n\n  return (\n    <ClearableInput\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Filter or paste value...\"\n      clearOnEscape\n    />\n  )\n}",
+	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",
@@ -22,7 +23,7 @@ var e = {
 		}
 	],
 	capabilityNotes: [
-		"Clearable input is strongest for short-lived values like filters and quick entry.",
+		"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."
 	]

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/clearable-input.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.ClearableInput,{value:o,onValueChange:s,placeholder:`Filter or paste value...`,clearOnEscape:!0})}),(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;
+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.js

@@ -1,4 +1,4 @@
-import { ClearableInput as e } from "../../../components/inputs/clearable-input.js";
+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";
@@ -49,7 +49,13 @@ function o({ mode: o }) {
 					value: s,
 					onValueChange: c,
 					placeholder: "Filter or paste value...",
-					clearOnEscape: !0
+					clearable: !0,
+					clearOnEscape: !0,
+					trailingAction: /* @__PURE__ */ r("span", {
+						className: "text-xs aui-text-muted",
+						children: "Live filter"
+					}),
+					replaceTrailingWhenClear: !1
 				})
 			}),
 			/* @__PURE__ */ i("div", {

package/dist/showcase/premium/collapse/showcase.cjs

@@ -1 +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/badge/index.cjs"),r=require("../../../components/ui/collapse/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=[{key:`permissions`,title:`Permissions`,description:`Who can publish, archive, and rename library surfaces.`,content:`Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.`},{key:`release`,title:`Release notes`,description:`What changed in the current package cycle.`,content:`This release opened more public docs coverage for interactive form and overlay surfaces.`},{key:`handoff`,title:`Handoff checklist`,description:`What must be checked before a public release.`,content:`Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.`}];function c(){let[e,c]=i.useState(!1),[l,u]=i.useState(`permissions`),d=Array.isArray(l)?l.join(`, `)||`none`:l||`none`;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:`Progressive disclosure`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Collapse should reduce page noise first`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single item`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Grouped items`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled state`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsxs)(r.Collapse,{open:e,onOpenChange:c,children:[(0,a.jsx)(r.CollapseTrigger,{children:`Publish access rules`}),(0,a.jsx)(r.CollapseContent,{children:`Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state.`})]})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.CollapseGroup,{items:s.map(e=>({...e})),type:`single`,value:l,onValueChange:u})})]})]})]}),(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:[`Single item: `,e?`open`:`closed`,` | Group: `,d]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions to verify controlled open state without relying only on the disclosure click target.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c(!0),children:`Open single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c(!1),children:`Close single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>u(`release`),children:`Open release`})]})]})})]})}exports.CollapseShowcase=c;
+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/collapse/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=[{key:`permissions`,title:`Permissions`,badge:(0,a.jsx)(n.Badge,{variant:`secondary`,children:`Core`}),description:`Who can publish, archive, and rename library surfaces.`,content:`Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.`},{key:`release`,title:`Release notes`,description:`What changed in the current package cycle.`,meta:`July`,content:`This release opened more public docs coverage for interactive form and overlay surfaces.`},{key:`handoff`,title:`Handoff checklist`,description:`What must be checked before a public release.`,disabled:!0,disabledReason:`Unlock after release branch is cut.`,content:`Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.`}];function c(){let[e,c]=i.useState(!1),[l,u]=i.useState(`permissions`),d=Array.isArray(l)?l.join(`, `)||`none`:l||`none`;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:`Progressive disclosure`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Collapse should reduce page noise first`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single item`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Grouped items`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled state`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsxs)(r.Collapse,{open:e,onOpenChange:c,children:[(0,a.jsx)(r.CollapseTrigger,{children:`Publish access rules`}),(0,a.jsx)(r.CollapseContent,{children:`Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state.`})]})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.CollapseGroup,{items:s.map(e=>({...e})),type:`single`,value:l,onValueChange:u})})]})]})]}),(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:[`Single item: `,e?`open`:`closed`,` | Group: `,d]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions to verify controlled open state without relying only on the disclosure click target.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c(!0),children:`Open single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c(!1),children:`Close single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>u(`release`),children:`Open release`})]})]})})]})}exports.CollapseShowcase=c;

package/dist/showcase/premium/collapse/showcase.js

@@ -8,6 +8,10 @@ var l = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 	{
 		key: "permissions",
 		title: "Permissions",
+		badge: /* @__PURE__ */ s(t, {
+			variant: "secondary",
+			children: "Core"
+		}),
 		description: "Who can publish, archive, and rename library surfaces.",
 		content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape."
 	},
@@ -15,12 +19,15 @@ var l = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 		key: "release",
 		title: "Release notes",
 		description: "What changed in the current package cycle.",
+		meta: "July",
 		content: "This release opened more public docs coverage for interactive form and overlay surfaces."
 	},
 	{
 		key: "handoff",
 		title: "Handoff checklist",
 		description: "What must be checked before a public release.",
+		disabled: !0,
+		disabledReason: "Unlock after release branch is cut.",
 		content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity."
 	}
 ];

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/combobox.cjs");let r=require("react/jsx-runtime");var i=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,a=[{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 o({state:o,setState:s}){let c=a.some(e=>e.value===o.selectValue)?o.selectValue:`azamat`,l=a.find(e=>e.value===c)??a[0];return(0,r.jsxs)(`div`,{className:`space-y-5`,children:[(0,r.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,r.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,r.jsxs)(`div`,{className:`max-w-xl`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search selection`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Combobox is the keyboard-first local member`}),(0,r.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,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Searchable`}),(0,r.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,r.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Local options`})]})]}),(0,r.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,r.jsxs)(`div`,{className:i,children:[(0,r.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign component owner`}),(0,r.jsx)(`div`,{className:`mt-3`,children:(0,r.jsx)(n.Combobox,{value:c,options:a.map(e=>({...e})),onValueChange:e=>s({selectValue:e??`azamat`}),placeholder:`Choose teammate`,searchPlaceholder:`Search teammate...`})})]}),(0,r.jsxs)(`div`,{className:i,children:[(0,r.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,r.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:l.label}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:l.description}),(0,r.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,r.jsx)(`section`,{className:i,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,r.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current owner: `,l.label]}),(0,r.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,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({selectValue:`nodira`}),children:`Pick Nodira`}),(0,r.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({selectValue:`azamat`}),children:`Reset`})]})]})})]})}exports.ComboboxShowcase=o;
+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/inputs/combobox.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.Combobox,{value:l,options:s.map(e=>({...e})),onValueChange:e=>c({selectValue:e??`azamat`}),placeholder:`Choose teammate`,searchPlaceholder:`Search teammate...`,clearable:!0,allowDeselect:!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,2 +1,3 @@
+import * as React from "react";
 import type { ComponentDemoProps } from "../types";
-export declare function ComboboxShowcase({ state, setState }: ComponentDemoProps): import("react").JSX.Element;
+export declare function ComboboxShowcase({ state, setState }: ComponentDemoProps): React.JSX.Element;