tembro 2.0.4 → 2.0.6

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

@@ -1,6 +1,9 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Label, Input } from "tembro"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Label, Input } from "tembro"
 
 export function Example() {
+  const [query, setQuery] = useState("buttons")
+
   return (
     <form className="space-y-4">
       <div>

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/input/mock.ts
 var e = {
-	code: "import { Label, Input } from \"tembro\"\n\nexport function Example() {\n  return (\n    <form className=\"space-y-4\">\n      <div>\n        <Label htmlFor=\"support-email\">Support email</Label>\n        <Input id=\"support-email\" type=\"email\" defaultValue=\"team@acme.io\" required />\n      </div>\n\n      <div>\n        <Label htmlFor=\"component-search\">Search components</Label>\n        <Input\n          id=\"component-search\"\n          value={query}\n          onValueChange={setQuery}\n          placeholder=\"Search by slug or title\"\n          clearable\n          trailingAction={<span className=\"text-xs text-muted-foreground\">12 results</span>}\n          replaceTrailingWhenClear={false}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"api-prefix\">Cost estimate</Label>\n        <Input\n          id=\"api-prefix\"\n          defaultValue=\"120\"\n          readOnly\n          trailing={<span className=\"text-sm aui-text-muted\">USD</span>}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"disabled-input\">Locked status</Label>\n        <Input id=\"disabled-input\" disabled value=\"Locked while syncing\" />\n      </div>\n    </form>\n  )\n}\n",
+	code: "import { useState } from \"react\"\nimport { Label, Input } from \"tembro\"\n\nexport function Example() {\n  const [query, setQuery] = useState(\"buttons\")\n\n  return (\n    <form className=\"space-y-4\">\n      <div>\n        <Label htmlFor=\"support-email\">Support email</Label>\n        <Input id=\"support-email\" type=\"email\" defaultValue=\"team@acme.io\" required />\n      </div>\n\n      <div>\n        <Label htmlFor=\"component-search\">Search components</Label>\n        <Input\n          id=\"component-search\"\n          value={query}\n          onValueChange={setQuery}\n          placeholder=\"Search by slug or title\"\n          clearable\n          trailingAction={<span className=\"text-xs text-muted-foreground\">12 results</span>}\n          replaceTrailingWhenClear={false}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"api-prefix\">Cost estimate</Label>\n        <Input\n          id=\"api-prefix\"\n          defaultValue=\"120\"\n          readOnly\n          trailing={<span className=\"text-sm aui-text-muted\">USD</span>}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"disabled-input\">Locked status</Label>\n        <Input id=\"disabled-input\" disabled value=\"Locked while syncing\" />\n      </div>\n    </form>\n  )\n}\n",
 	htmlCode: "<label for=\"example\">Search components</label>\n<input id=\"example\" data-slot=\"input\" type=\"text\" placeholder=\"Search components...\" />",
 	cliCommand: "npx tembro add input",
 	highlights: [

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { MaskedInput } from "@/index"
+import { MaskedInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("AA-123")

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/masked-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { MaskedInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <MaskedInput\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
+	code: "import { useState } from \"react\"\nimport { MaskedInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <MaskedInput\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
 	htmlCode: "<label for=\"masked\">Referral code</label><input id=\"masked\" type=\"text\" value=\"AA-123\" placeholder=\"AA-123\" />",
 	cliCommand: "npx tembro add masked-input",
 	highlights: [

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { MoneyInput } from "@/index"
+import { MoneyInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(2990.5)

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/money-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { MoneyInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <MoneyInput\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { MoneyInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <MoneyInput\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"money\">Budget</label><div>$<input id=\"money\" inputmode=\"decimal\" type=\"text\" /></div>",
 	cliCommand: "npx tembro add money-input",
 	highlights: [

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { NumberInput, parseNumberInput } from "@/index"
+import { NumberInput, parseNumberInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(14)

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/number-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { NumberInput, parseNumberInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <NumberInput\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => {\n          const candidate = parseNumberInput(event.target.value)\n          if (candidate === null) setRaw(event.target.value)\n        }}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { NumberInput, parseNumberInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <NumberInput\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => {\n          const candidate = parseNumberInput(event.target.value)\n          if (candidate === null) setRaw(event.target.value)\n        }}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"example-number\">Amount</label><input id=\"example-number\" inputmode=\"decimal\" type=\"text\" />",
 	cliCommand: "npx tembro add number-input",
 	highlights: [

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { PhoneInput } from "@/index"
+import { PhoneInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("+998 90 123 45 67")

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/phone-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { PhoneInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"+998 90 123 45 67\")\n\n  return (\n    <PhoneInput\n      value={value}\n      onValueChange={setValue}\n      defaultCountry=\"UZ\"\n      placeholder=\"+998 90 123 45 67\"\n    />\n  )\n}\n",
+	code: "import { useState } from \"react\"\nimport { PhoneInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"+998 90 123 45 67\")\n\n  return (\n    <PhoneInput\n      value={value}\n      onValueChange={setValue}\n      defaultCountry=\"UZ\"\n      placeholder=\"+998 90 123 45 67\"\n    />\n  )\n}\n",
 	htmlCode: "<label for=\"phone\">Phone</label><input id=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"+998 90 123 45 67\" />",
 	cliCommand: "npx tembro add phone-input",
 	highlights: [

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { QuantityInput } from "@/index"
+import { QuantityInput } from "tembro"
 
 export function Example() {
   const [quantity, setQuantity] = useState<number | null>(3)

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/quantity-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { QuantityInput } from \"@/index\"\n\nexport function Example() {\n  const [quantity, setQuantity] = useState<number | null>(3)\n\n  return (\n    <div className=\"space-y-3\">\n      <QuantityInput\n        value={quantity}\n        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}\n        min={0}\n        max={10}\n        step={1}\n        showControls\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Items: <strong>{quantity ?? \"unset\"}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Controls should stay aligned with adjacent action columns in compact table rows.\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Try increment/decrement at bounds to validate guardrails.\n      </p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { QuantityInput } from \"tembro\"\n\nexport function Example() {\n  const [quantity, setQuantity] = useState<number | null>(3)\n\n  return (\n    <div className=\"space-y-3\">\n      <QuantityInput\n        value={quantity}\n        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}\n        min={0}\n        max={10}\n        step={1}\n        showControls\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Items: <strong>{quantity ?? \"unset\"}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Controls should stay aligned with adjacent action columns in compact table rows.\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Try increment/decrement at bounds to validate guardrails.\n      </p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"qty\">Quantity</label><input id=\"qty\" type=\"text\" inputmode=\"numeric\" />",
 	cliCommand: "npx tembro add quantity-input",
 	highlights: [

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

@@ -1,12 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "tembro"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Select } from "tembro"
+
+const planOptions = [
+  { value: "starter", label: "Starter" },
+  { value: "growth", label: "Growth" },
+  { value: "enterprise", label: "Enterprise" },
+]
 
 export function Example() {
-  return (
-    <Select defaultValue="starter">
-      <SelectTrigger><SelectValue /></SelectTrigger>
-      <SelectContent>
-        <SelectItem value="starter">Starter</SelectItem>
-      </SelectContent>
-    </Select>
-  )
+  return <Select defaultValue="starter" options={planOptions} />
 }`,cliCommand:`npx tembro add select`,highlights:[`Primary selection surface`,`Controlled selection`,`Searchable local flow`,`Compact trigger options`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`dashboard-starter`],scenarios:[{title:`Plan picker`,description:`Switch between starter, growth and enterprise plans.`},{title:`Status filter`,description:`Use select inside dashboards and reporting toolbars.`},{title:`Compact trigger`,description:`Render small controls in dense admin layouts.`},{title:`Grouped options`,description:`Present structured choices without overwhelming the form.`}],capabilityNotes:[`Start here for most static single-choice flows before reaching for helper members.`,`Supports controlled and uncontrolled selected values plus searchable local filtering.`,`Includes trigger sizing for compact or default density layouts.`,`AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.`]};exports.selectMock=e;

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/select/mock.ts
 var e = {
-	code: "import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Select defaultValue=\"starter\">\n      <SelectTrigger><SelectValue /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"starter\">Starter</SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}",
+	code: "import { Select } from \"tembro\"\n\nconst planOptions = [\n  { value: \"starter\", label: \"Starter\" },\n  { value: \"growth\", label: \"Growth\" },\n  { value: \"enterprise\", label: \"Enterprise\" },\n]\n\nexport function Example() {\n  return <Select defaultValue=\"starter\" options={planOptions} />\n}",
 	cliCommand: "npx tembro add select",
 	highlights: [
 		"Primary selection surface",

package/dist/showcase/premium/select/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/select/index.cjs"),i=require("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=e.selectValue??l[0].value,f=l.find(e=>e.value===d)??l[0],p=l[1]??l[0],[m,h]=a.useState(`plan`),g=f.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:f.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:m})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:m===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:m===`plan`?`default`:`outline`,onClick:()=>h(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:m===`density`?`default`:`outline`,onClick:()=>h(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:m===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:m===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:m===`plan`?(0,o.jsxs)(r.Select,{value:d,onValueChange:e=>c({selectValue:e??l[0].value}),children:[(0,o.jsx)(r.SelectTrigger,{className:`w-full`,children:(0,o.jsx)(r.SelectValue,{})}),(0,o.jsx)(r.SelectContent,{children:l.map(e=>(0,o.jsx)(r.SelectItem,{value:e.value,children:e.label},e.value))})]}):(0,o.jsxs)(r.Select,{defaultValue:u[0].value,children:[(0,o.jsx)(r.SelectTrigger,{size:`sm`,className:`w-full`,children:(0,o.jsx)(r.SelectValue,{})}),(0,o.jsx)(r.SelectContent,{children:u.map(e=>(0,o.jsx)(r.SelectItem,{value:e.value,children:e.label},e.value))})]})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:g.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:f.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:f.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:p.value}),children:[`Choose `,p.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]})]})]})})]})}exports.SelectShowcase=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/select/index.cjs"),i=require("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=e.selectValue??l[0].value,f=l.find(e=>e.value===d)??l[0],p=l[1]??l[0],[m,h]=a.useState(`plan`),g=f.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:f.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:m})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:m===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:m===`plan`?`default`:`outline`,onClick:()=>h(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:m===`density`?`default`:`outline`,onClick:()=>h(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:m===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:m===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:m===`plan`?(0,o.jsx)(r.Select,{value:d,onValueChange:e=>c({selectValue:e??l[0].value}),options:l,triggerClassName:`w-full`}):(0,o.jsx)(r.Select,{defaultValue:u[0].value,options:u,size:`sm`,triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:g.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:f.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:f.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:p.value}),children:[`Choose `,p.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]})]})]})})]})}exports.SelectShowcase=c;

package/dist/showcase/premium/select/showcase.js

@@ -1,17 +1,17 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../../components/ui/select/index.js";
-import { selectDemoGroups as s } from "./data.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Select as n } from "../../../components/ui/select/index.js";
+import { selectDemoGroups as r } from "./data.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/select/showcase.tsx
-var d = "border-t border-[color:var(--aui-divider)] py-6";
-function f({ state: f, setState: p }) {
-	let m = s[0].options, h = s[1].options, g = f.selectValue ?? m[0].value, _ = m.find((e) => e.value === g) ?? m[0], v = m[1] ?? m[0], [y, b] = c.useState("plan"), x = _.value === "enterprise" ? [
+var s = "border-t border-[color:var(--aui-divider)] py-6";
+function c({ state: c, setState: l }) {
+	let u = r[0].options, d = r[1].options, f = c.selectValue ?? u[0].value, p = u.find((e) => e.value === f) ?? u[0], m = u[1] ?? u[0], [h, g] = i.useState("plan"), _ = p.value === "enterprise" ? [
 		["Seats", "Unlimited"],
 		["Support", "Dedicated"],
 		["SLA", "Priority"]
-	] : _.value === "growth" ? [
+	] : p.value === "growth" ? [
 		["Seats", "25"],
 		["Support", "Shared"],
 		["SLA", "Same day"]
@@ -20,175 +20,165 @@ function f({ state: f, setState: p }) {
 		["Support", "Email"],
 		["SLA", "Standard"]
 	];
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ o("div", {
 		className: "space-y-0",
-		children: [/* @__PURE__ */ u("section", {
+		children: [/* @__PURE__ */ o("section", {
 			className: "pb-6",
-			children: [/* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ a("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Selection"
 						}),
-						/* @__PURE__ */ l("h3", {
+						/* @__PURE__ */ a("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "One clean select surface first"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ a("p", {
 							className: "mt-3 text-sm leading-6 aui-text-muted",
 							children: "Show the default trigger, controlled value, and summary update in one place."
 						})
 					]
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Choice"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: _.label
+								children: p.label
 							})]
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Mode"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold capitalize aui-text-strong",
-								children: y
+								children: h
 							})]
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Options"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: y === "plan" ? m.length : h.length
+								children: h === "plan" ? u.length : d.length
 							})]
 						})
 					]
 				})]
-			}), /* @__PURE__ */ u("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "mt-6 flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ l(e, {
+				children: [/* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: y === "plan" ? "default" : "outline",
-					onClick: () => b("plan"),
+					variant: h === "plan" ? "default" : "outline",
+					onClick: () => g("plan"),
 					children: "Default trigger"
-				}), /* @__PURE__ */ l(e, {
+				}), /* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: y === "density" ? "default" : "outline",
-					onClick: () => b("density"),
+					variant: h === "density" ? "default" : "outline",
+					onClick: () => g("density"),
 					children: "Compact trigger"
 				})]
 			})]
-		}), /* @__PURE__ */ l("section", {
-			className: d,
-			children: /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ a("section", {
+			className: s,
+			children: /* @__PURE__ */ o("div", {
 				className: "grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]",
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 							children: "Primary select"
-						}), /* @__PURE__ */ l("h4", {
+						}), /* @__PURE__ */ a("h4", {
 							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-							children: y === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
+							children: h === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
 						})] }),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-sm font-medium aui-text-muted",
-								children: y === "plan" ? "Workspace plan" : "Toolbar density"
-							}), /* @__PURE__ */ l("div", {
+								children: h === "plan" ? "Workspace plan" : "Toolbar density"
+							}), /* @__PURE__ */ a("div", {
 								className: "mt-3",
-								children: y === "plan" ? /* @__PURE__ */ u(n, {
-									value: g,
-									onValueChange: (e) => p({ selectValue: e ?? m[0].value }),
-									children: [/* @__PURE__ */ l(a, {
-										className: "w-full",
-										children: /* @__PURE__ */ l(o, {})
-									}), /* @__PURE__ */ l(r, { children: m.map((e) => /* @__PURE__ */ l(i, {
-										value: e.value,
-										children: e.label
-									}, e.value)) })]
-								}) : /* @__PURE__ */ u(n, {
-									defaultValue: h[0].value,
-									children: [/* @__PURE__ */ l(a, {
-										size: "sm",
-										className: "w-full",
-										children: /* @__PURE__ */ l(o, {})
-									}), /* @__PURE__ */ l(r, { children: h.map((e) => /* @__PURE__ */ l(i, {
-										value: e.value,
-										children: e.label
-									}, e.value)) })]
+								children: h === "plan" ? /* @__PURE__ */ a(n, {
+									value: f,
+									onValueChange: (e) => l({ selectValue: e ?? u[0].value }),
+									options: u,
+									triggerClassName: "w-full"
+								}) : /* @__PURE__ */ a(n, {
+									defaultValue: d[0].value,
+									options: d,
+									size: "sm",
+									triggerClassName: "w-full"
 								})
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ a("div", {
 							className: "grid gap-3 sm:grid-cols-3",
-							children: x.map(([e, t]) => /* @__PURE__ */ u("div", {
+							children: _.map(([e, t]) => /* @__PURE__ */ o("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ l("p", {
+								children: [/* @__PURE__ */ a("p", {
 									className: "text-xs aui-text-muted",
 									children: e
-								}), /* @__PURE__ */ l("p", {
+								}), /* @__PURE__ */ a("p", {
 									className: "mt-1 text-sm font-medium aui-text-strong",
 									children: t
 								})]
 							}, e))
 						})
 					]
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "flex items-center justify-between gap-3",
-							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Controlled result"
-							}), /* @__PURE__ */ l("h4", {
+							}), /* @__PURE__ */ a("h4", {
 								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-								children: _.label
-							})] }), /* @__PURE__ */ l(t, {
+								children: p.label
+							})] }), /* @__PURE__ */ a(t, {
 								variant: "outline",
 								className: "rounded-full",
-								children: _.value
+								children: p.value
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ a("div", {
 							className: "border-y border-[color:var(--aui-divider)]",
 							children: [
 								"Base Select should cover normal forms and static choices first.",
 								"Async and searchable variants should be documented as upgrades, not parallel defaults.",
 								"Controlled value must update nearby product UI immediately."
-							].map((e) => /* @__PURE__ */ l("div", {
+							].map((e) => /* @__PURE__ */ a("div", {
 								className: "border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0",
 								children: e
 							}, e))
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "flex flex-wrap gap-2",
-							children: [/* @__PURE__ */ u(e, {
+							children: [/* @__PURE__ */ o(e, {
 								type: "button",
 								size: "sm",
-								onClick: () => p({ selectValue: v.value }),
-								children: ["Choose ", v.label]
-							}), /* @__PURE__ */ l(e, {
+								onClick: () => l({ selectValue: m.value }),
+								children: ["Choose ", m.label]
+							}), /* @__PURE__ */ a(e, {
 								type: "button",
 								size: "sm",
 								variant: "secondary",
-								onClick: () => p({ selectValue: m[0].value }),
+								onClick: () => l({ selectValue: u[0].value }),
 								children: "Reset"
 							})]
 						})
@@ -199,4 +189,4 @@ function f({ state: f, setState: p }) {
 	});
 }
 //#endregion
-export { f as SelectShowcase };
+export { c as SelectShowcase };

package/dist/showcase/premium/simple-select/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Button, SimpleSelect } from "@/index"
+import { Button, SimpleSelect } from "tembro"
 
 const selectOptions = [
   { value: "public", label: "Public", disabled: false },

package/dist/showcase/premium/simple-select/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/simple-select/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Button, SimpleSelect } from \"@/index\"\n\nconst selectOptions = [\n  { value: \"public\", label: \"Public\", disabled: false },\n  { value: \"private\", label: \"Private\", disabled: false },\n  { value: \"internal\", label: \"Internal\", disabled: false },\n  { value: \"archived\", label: \"Archived\", disabled: true },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"private\")\n\n  return (\n    <div className=\"space-y-3\">\n      <SimpleSelect\n        options={selectOptions}\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"private\")}\n        placeholder=\"Visibility\"\n        size=\"sm\"\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 visibility: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"public\")}>Reset public</Button>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Button, SimpleSelect } from \"tembro\"\n\nconst selectOptions = [\n  { value: \"public\", label: \"Public\", disabled: false },\n  { value: \"private\", label: \"Private\", disabled: false },\n  { value: \"internal\", label: \"Internal\", disabled: false },\n  { value: \"archived\", label: \"Archived\", disabled: true },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"private\")\n\n  return (\n    <div className=\"space-y-3\">\n      <SimpleSelect\n        options={selectOptions}\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"private\")}\n        placeholder=\"Visibility\"\n        size=\"sm\"\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 visibility: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"public\")}>Reset public</Button>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"simple-select-trigger\">Open options</button>",
 	cliCommand: "npx tembro add simple-select",
 	highlights: [

package/dist/showcase/premium/simple-select/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/simple-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({mode:o}){let[s,c]=(0,i.useState)(`private`),[l,u]=(0,i.useState)(0),d=r.routeSimpleSelectOptions,f=d.find(e=>e.value===s);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`SimpleSelect is the lightweight static member`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it only when you want a thinner wrapper around the main Select surface for static option lists.`}),(0,a.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,children:`Static options`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Searchable`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Clearable`})]})]}),(0,a.jsx)(n.SimpleSelect,{value:s,onValueChange:e=>c(e),options:d,placeholder:`Visibility`,searchable:!0,clearable:!0}),(0,a.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Current value`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:f?.label??`Nothing selected`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Behavior`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Clear icon and disabled items behave inside the same trigger model.`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`When to use`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Choose this for local option lists before moving to AsyncSelect.`})]})]}),(0,a.jsx)(n.SimpleSelect,{defaultValue:`public`,options:d},l),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>c(void 0),children:`Clear controlled`}),(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>u(e=>e+1),children:`Reset uncontrolled sample`})]}),o===`playground`?(0,a.jsx)(`p`,{className:`aui-text-muted rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:`Controlled selection can power filter states, while uncontrolled default usage is fine for one-off static forms. If the list becomes remote, move back to the Select family and choose AsyncSelect.`}):null]})}exports.SimpleSelectShowcase=o;
+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/simple-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({mode:o}){let[s,c]=(0,i.useState)(`private`),[l,u]=(0,i.useState)(0),d=r.routeSimpleSelectOptions,f=d.find(e=>e.value===s);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`SimpleSelect is the lightweight static member`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it only when you want a thinner wrapper around the main Select surface for static option lists.`}),(0,a.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,children:`Static options`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Searchable`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Clearable`})]})]}),(0,a.jsx)(n.SimpleSelect,{value:s,onValueChange:e=>c(e),options:d,placeholder:`Visibility`,searchable:!0,clearable:!0,showSelectedDescription:!0}),(0,a.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Current value`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:f?.label??`Nothing selected`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Behavior`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Clear icon and disabled items behave inside the same trigger model.`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`When to use`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Choose this for local option lists before moving to AsyncSelect.`})]})]}),(0,a.jsx)(n.SimpleSelect,{defaultValue:`public`,options:d,showSelectedDescription:!0},l),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>c(void 0),children:`Clear controlled`}),(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>u(e=>e+1),children:`Reset uncontrolled sample`})]}),o===`playground`?(0,a.jsx)(`p`,{className:`aui-text-muted rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:`Controlled selection can power filter states, while uncontrolled default usage is fine for one-off static forms. If the list becomes remote, move back to the Select family and choose AsyncSelect.`}):null]})}exports.SimpleSelectShowcase=o;

package/dist/showcase/premium/simple-select/showcase.js

@@ -46,7 +46,8 @@ function s({ mode: s }) {
 				options: f,
 				placeholder: "Visibility",
 				searchable: !0,
-				clearable: !0
+				clearable: !0,
+				showSelectedDescription: !0
 			}),
 			/* @__PURE__ */ o("div", {
 				className: "grid gap-3 md:grid-cols-3",
@@ -85,7 +86,8 @@ function s({ mode: s }) {
 			}),
 			/* @__PURE__ */ a(n, {
 				defaultValue: "public",
-				options: f
+				options: f,
+				showSelectedDescription: !0
 			}, u),
 			/* @__PURE__ */ o("div", {
 				className: "flex flex-wrap gap-2",

package/dist/showcase/preview-catalog.cjs

@@ -1,15 +1,13 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{slug:`dashboard-01`,title:`Dashboard with sidebar`,command:`npx tembro init --template next --defaults
-npx tembro add app-sidebar metric-grid data-table`,code:`import { AppSidebar } from "@/components/layout/app-sidebar"
-import { MetricGrid } from "@/components/display/metric-grid"
+npx tembro add app-sidebar metric-grid data-table`,code:`import { AppSidebar, MetricGrid } from "tembro"
 
 export function Dashboard01() {
   return <AppSidebar />
-}`,tone:`dashboard`},{slug:`table-01`,title:`Advanced invoice table`,command:`npx tembro add data-table`,code:`import { DataTable } from "@/components/data-table/data-table"
+}`,tone:`dashboard`},{slug:`table-01`,title:`Advanced invoice table`,command:`npx tembro add data-table`,code:`import { DataTable } from "tembro"
 
 export function Table01() {
   return <DataTable columns={columns} data={rows} />
-}`,tone:`table`},{slug:`auth-01`,title:`Authentication screen`,command:`npx tembro add input button`,code:`import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+}`,tone:`table`},{slug:`auth-01`,title:`Authentication screen`,command:`npx tembro add input button`,code:`import { Button, Input } from "tembro"
 
 export function Auth01() {
   return (
@@ -19,8 +17,7 @@ export function Auth01() {
       <Button>Sign in</Button>
     </div>
   )
-}`,tone:`auth`},{slug:`product-01`,title:`Commerce product detail`,command:`npx tembro add badge button`,code:`import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+}`,tone:`auth`},{slug:`product-01`,title:`Commerce product detail`,command:`npx tembro add badge button`,code:`import { Badge, Button } from "tembro"
 
 export function Product01() {
   return (
@@ -30,15 +27,15 @@ export function Product01() {
       <Button>Buy now</Button>
     </div>
   )
-}`,tone:`product`},{slug:`command-01`,title:`Command palette`,command:`npx tembro add command-palette`,code:`import { CommandPalette } from "@/components/command/command-palette"
+}`,tone:`product`},{slug:`command-01`,title:`Command palette`,command:`npx tembro add command-palette`,code:`import { CommandPalette } from "tembro"
 
 export function Command01() {
   return <CommandPalette />
-}`,tone:`command`},{slug:`calendar-01`,title:`Calendar and date picker`,command:`npx tembro add calendar date-picker`,code:`import { Calendar } from "@/components/calendar/calendar"
+}`,tone:`command`},{slug:`calendar-01`,title:`Calendar and date picker`,command:`npx tembro add calendar date-picker`,code:`import { Calendar } from "tembro"
 
 export function Calendar01() {
   return <Calendar />
-}`,tone:`calendar`},{slug:`upload-01`,title:`Upload workspace`,command:`npx tembro add file-upload image-upload`,code:`import { FileUpload } from "@/components/upload/file-upload"
+}`,tone:`calendar`},{slug:`upload-01`,title:`Upload workspace`,command:`npx tembro add file-upload image-upload`,code:`import { FileUpload } from "tembro"
 
 export function Upload01() {
   return <FileUpload />