tembro 3.1.16 → 4.0.0

package/dist/src/showcase/premium/segmented-control/index.js

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

package/dist/src/showcase/premium/segmented-control/mock.cjs

@@ -1,18 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { LayoutGridIcon, Rows3Icon, Table2Icon } from "lucide-react"
-import { SegmentedControl } from "tembro"
-
-const options = [
-  { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },
-  { value: "list", label: "List", icon: <Rows3Icon className="size-4" /> },
-  { value: "table", label: "Table", icon: <Table2Icon className="size-4" /> },
-]
-
-export function Example() {
-  const [value, setValue] = React.useState("board")
-
-  return <SegmentedControl value={value} onValueChange={setValue} options={options} />
-}`,htmlCode:`<div data-slot="segmented-control">
-  <button role="radio" aria-checked="true">Board</button>
-  <button role="radio" aria-checked="false">List</button>
-</div>`,cliCommand:`npx tembro add segmented-control`,highlights:[`Controlled or uncontrolled value handling`,`Icon + label segments with size tokens`,`Good for view switching, density, and mode changes`],scenarios:[{title:`View mode`,description:`Switch between board, list, and table without opening a menu.`},{title:`Density`,description:`Let users change compactness inline inside the header.`},{title:`Filter mode`,description:`Keep small mutually-exclusive states visible at a glance.`}]};exports.segmentedControlMock=e;

package/dist/src/showcase/premium/segmented-control/mock.js

@@ -1,27 +0,0 @@
-//#region src/showcase/premium/segmented-control/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { LayoutGridIcon, Rows3Icon, Table2Icon } from \"lucide-react\"\nimport { SegmentedControl } from \"tembro\"\n\nconst options = [\n  { value: \"board\", label: \"Board\", icon: <LayoutGridIcon className=\"size-4\" /> },\n  { value: \"list\", label: \"List\", icon: <Rows3Icon className=\"size-4\" /> },\n  { value: \"table\", label: \"Table\", icon: <Table2Icon className=\"size-4\" /> },\n]\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"board\")\n\n  return <SegmentedControl value={value} onValueChange={setValue} options={options} />\n}",
-	htmlCode: "<div data-slot=\"segmented-control\">\n  <button role=\"radio\" aria-checked=\"true\">Board</button>\n  <button role=\"radio\" aria-checked=\"false\">List</button>\n</div>",
-	cliCommand: "npx tembro add segmented-control",
-	highlights: [
-		"Controlled or uncontrolled value handling",
-		"Icon + label segments with size tokens",
-		"Good for view switching, density, and mode changes"
-	],
-	scenarios: [
-		{
-			title: "View mode",
-			description: "Switch between board, list, and table without opening a menu."
-		},
-		{
-			title: "Density",
-			description: "Let users change compactness inline inside the header."
-		},
-		{
-			title: "Filter mode",
-			description: "Keep small mutually-exclusive states visible at a glance."
-		}
-	]
-};
-//#endregion
-export { e as segmentedControlMock };

package/dist/src/showcase/premium/segmented-control/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/ui/segmented-control/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=r.useState(`board`),[c,l]=r.useState(`comfortable`);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SegmentedControl is the inline mode switch`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Workspace view switch`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The primary use-case is a visible view toggle for board, list, or table layouts.`}),(0,a.jsx)(`div`,{className:`mt-5`,children:(0,a.jsx)(n.SegmentedControl,{value:e,onValueChange:s,options:[{value:`board`,label:`Board`,icon:(0,a.jsx)(i.LayoutGridIcon,{className:`size-4`})},{value:`list`,label:`List`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})},{value:`table`,label:`Table`,icon:(0,a.jsx)(i.Table2Icon,{className:`size-4`})}]})})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Current surface`}),(0,a.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`Controlled selection is ready for route state or URL sync.`})]}),(0,a.jsx)(t.Badge,{variant:`secondary`,children:e})]}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Prefer segmented controls for 2 to 4 options that should stay visible together.`}),(0,a.jsx)(`p`,{children:`Once the list grows larger or becomes searchable, move to Select instead.`})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Density and size tokens`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Compact admin pages often need a second segmented row for density or behavior mode.`}),(0,a.jsxs)(`div`,{className:`mt-5 space-y-4`,children:[(0,a.jsx)(n.SegmentedControl,{size:`sm`,value:c,onValueChange:l,options:[{value:`compact`,label:`Compact`},{value:`comfortable`,label:`Comfortable`},{value:`spacious`,label:`Spacious`}]}),(0,a.jsx)(n.SegmentedControl,{size:`lg`,fullWidth:!0,equalWidth:!0,defaultValue:`filters`,options:[{value:`filters`,label:`Filters`,icon:(0,a.jsx)(i.SlidersHorizontalIcon,{className:`size-4`})},{value:`views`,label:`Views`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})}]})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Use one sentence labels. Long phrases make the rail heavy and unstable.`}),(0,a.jsx)(`p`,{children:`Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row.`}),(0,a.jsx)(`p`,{children:`If a segment triggers navigation instead of state, route tabs may be the better primitive.`})]})]})]})})]})}exports.SegmentedControlShowcase=s;

package/dist/src/showcase/premium/segmented-control/showcase.js

@@ -1,157 +0,0 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { SegmentedControl as t } from "../../../components/ui/segmented-control/index.js";
-import * as n from "react";
-import { LayoutGridIcon as r, Rows3Icon as i, SlidersHorizontalIcon as a, Table2Icon as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/showcase/premium/segmented-control/showcase.tsx
-var l = "border-t border-[color:var(--aui-divider)] py-6";
-function u() {
-	let [u, d] = n.useState("board"), [f, p] = n.useState("comfortable");
-	return /* @__PURE__ */ c("div", {
-		className: "space-y-0",
-		children: [
-			/* @__PURE__ */ c("section", {
-				className: "pb-6",
-				children: [
-					/* @__PURE__ */ s("p", {
-						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-						children: "Installed primitive"
-					}),
-					/* @__PURE__ */ s("h3", {
-						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-						children: "SegmentedControl is the inline mode switch"
-					}),
-					/* @__PURE__ */ s("p", {
-						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
-						children: "Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first."
-					})
-				]
-			}),
-			/* @__PURE__ */ s("section", {
-				className: l,
-				children: /* @__PURE__ */ c("div", {
-					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
-					children: [/* @__PURE__ */ c("div", { children: [
-						/* @__PURE__ */ s("p", {
-							className: "text-lg font-semibold aui-text-strong",
-							children: "Workspace view switch"
-						}),
-						/* @__PURE__ */ s("p", {
-							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-							children: "The primary use-case is a visible view toggle for board, list, or table layouts."
-						}),
-						/* @__PURE__ */ s("div", {
-							className: "mt-5",
-							children: /* @__PURE__ */ s(t, {
-								value: u,
-								onValueChange: d,
-								options: [
-									{
-										value: "board",
-										label: "Board",
-										icon: /* @__PURE__ */ s(r, { className: "size-4" })
-									},
-									{
-										value: "list",
-										label: "List",
-										icon: /* @__PURE__ */ s(i, { className: "size-4" })
-									},
-									{
-										value: "table",
-										label: "Table",
-										icon: /* @__PURE__ */ s(o, { className: "size-4" })
-									}
-								]
-							})
-						})
-					] }), /* @__PURE__ */ c("div", {
-						className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-						children: [/* @__PURE__ */ c("div", {
-							className: "flex items-start justify-between gap-4",
-							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-								className: "text-sm font-semibold aui-text-strong",
-								children: "Current surface"
-							}), /* @__PURE__ */ s("p", {
-								className: "mt-1 text-xs aui-text-muted",
-								children: "Controlled selection is ready for route state or URL sync."
-							})] }), /* @__PURE__ */ s(e, {
-								variant: "secondary",
-								children: u
-							})]
-						}), /* @__PURE__ */ c("div", {
-							className: "mt-4 space-y-3 text-sm leading-6 aui-text-muted",
-							children: [/* @__PURE__ */ s("p", { children: "Prefer segmented controls for 2 to 4 options that should stay visible together." }), /* @__PURE__ */ s("p", { children: "Once the list grows larger or becomes searchable, move to Select instead." })]
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ s("section", {
-				className: l,
-				children: /* @__PURE__ */ c("div", {
-					className: "grid gap-6 xl:grid-cols-[0.9fr_1.1fr]",
-					children: [/* @__PURE__ */ c("div", { children: [
-						/* @__PURE__ */ s("p", {
-							className: "text-lg font-semibold aui-text-strong",
-							children: "Density and size tokens"
-						}),
-						/* @__PURE__ */ s("p", {
-							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-							children: "Compact admin pages often need a second segmented row for density or behavior mode."
-						}),
-						/* @__PURE__ */ c("div", {
-							className: "mt-5 space-y-4",
-							children: [/* @__PURE__ */ s(t, {
-								size: "sm",
-								value: f,
-								onValueChange: p,
-								options: [
-									{
-										value: "compact",
-										label: "Compact"
-									},
-									{
-										value: "comfortable",
-										label: "Comfortable"
-									},
-									{
-										value: "spacious",
-										label: "Spacious"
-									}
-								]
-							}), /* @__PURE__ */ s(t, {
-								size: "lg",
-								fullWidth: !0,
-								equalWidth: !0,
-								defaultValue: "filters",
-								options: [{
-									value: "filters",
-									label: "Filters",
-									icon: /* @__PURE__ */ s(a, { className: "size-4" })
-								}, {
-									value: "views",
-									label: "Views",
-									icon: /* @__PURE__ */ s(i, { className: "size-4" })
-								}]
-							})]
-						})
-					] }), /* @__PURE__ */ c("div", {
-						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
-						children: [/* @__PURE__ */ s("p", {
-							className: "text-sm font-semibold aui-text-strong",
-							children: "Guidance"
-						}), /* @__PURE__ */ c("div", {
-							className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
-							children: [
-								/* @__PURE__ */ s("p", { children: "Use one sentence labels. Long phrases make the rail heavy and unstable." }),
-								/* @__PURE__ */ s("p", { children: "Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row." }),
-								/* @__PURE__ */ s("p", { children: "If a segment triggers navigation instead of state, route tabs may be the better primitive." })
-							]
-						})]
-					})]
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { u as SegmentedControlShowcase };

package/dist/src/showcase/premium/select/data.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Plan picker`,options:[{value:`starter`,label:`Starter`},{value:`growth`,label:`Growth`,description:`25 seats and shared support`},{value:`enterprise`,label:`Enterprise`,description:`Unlimited seats and priority support`}]},{title:`Status filter`,size:`sm`,options:[{value:`active`,label:`Active`},{value:`review`,label:`Review`},{value:`draft`,label:`Draft`}]},{title:`Grouped workspace routing`,options:[{value:`north`,label:`North Region`,description:`Sales operations`,keywords:[`sales`]},{value:`south`,label:`South Region`,description:`Support queue`,keywords:[`support`]},{value:`billing`,label:`Billing Desk`,description:`Finance team`,keywords:[`finance`]},{value:`archive`,label:`Archive`,description:`Read-only records`,disabled:!0,keywords:[`disabled`]}]}];exports.selectDemoGroups=e;

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

@@ -1,72 +0,0 @@
-//#region src/showcase/premium/select/data.ts
-var e = [
-	{
-		title: "Plan picker",
-		options: [
-			{
-				value: "starter",
-				label: "Starter"
-			},
-			{
-				value: "growth",
-				label: "Growth",
-				description: "25 seats and shared support"
-			},
-			{
-				value: "enterprise",
-				label: "Enterprise",
-				description: "Unlimited seats and priority support"
-			}
-		]
-	},
-	{
-		title: "Status filter",
-		size: "sm",
-		options: [
-			{
-				value: "active",
-				label: "Active"
-			},
-			{
-				value: "review",
-				label: "Review"
-			},
-			{
-				value: "draft",
-				label: "Draft"
-			}
-		]
-	},
-	{
-		title: "Grouped workspace routing",
-		options: [
-			{
-				value: "north",
-				label: "North Region",
-				description: "Sales operations",
-				keywords: ["sales"]
-			},
-			{
-				value: "south",
-				label: "South Region",
-				description: "Support queue",
-				keywords: ["support"]
-			},
-			{
-				value: "billing",
-				label: "Billing Desk",
-				description: "Finance team",
-				keywords: ["finance"]
-			},
-			{
-				value: "archive",
-				label: "Archive",
-				description: "Read-only records",
-				disabled: !0,
-				keywords: ["disabled"]
-			}
-		]
-	}
-];
-//#endregion
-export { e as selectDemoGroups };

package/dist/src/showcase/premium/select/index.cjs

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

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

@@ -1,4 +0,0 @@
-import { selectDemoGroups as e } from "./data.js";
-import { SelectShowcase as t } from "./showcase.js";
-import { selectMock as n } from "./mock.js";
-export { t as SelectShowcase, e as selectDemoGroups, n as selectMock };

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

@@ -1,24 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Select } from "tembro"
-
-const planGroups = [
-  {
-    label: "Plans",
-    options: [
-      { value: "starter", label: "Starter" },
-      { value: "growth", label: "Growth", description: "25 seats" },
-      { value: "enterprise", label: "Enterprise", description: "Priority support" },
-    ],
-  },
-]
-
-export function Example() {
-  return (
-    <Select
-      defaultValue="starter"
-      groups={planGroups}
-      searchable
-      clearable
-      emptyMessage="No plan matched"
-    />
-  )
-}`,cliCommand:`npx tembro add select`,highlights:[`Primary selection surface`,`Controlled selection`,`Searchable local flow`,`Grouped option support`,`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, grouped options, clearable state, and 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/src/showcase/premium/select/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/select/mock.ts
-var e = {
-	code: "import { Select } from \"tembro\"\n\nconst planGroups = [\n  {\n    label: \"Plans\",\n    options: [\n      { value: \"starter\", label: \"Starter\" },\n      { value: \"growth\", label: \"Growth\", description: \"25 seats\" },\n      { value: \"enterprise\", label: \"Enterprise\", description: \"Priority support\" },\n    ],\n  },\n]\n\nexport function Example() {\n  return (\n    <Select\n      defaultValue=\"starter\"\n      groups={planGroups}\n      searchable\n      clearable\n      emptyMessage=\"No plan matched\"\n    />\n  )\n}",
-	cliCommand: "npx tembro add select",
-	highlights: [
-		"Primary selection surface",
-		"Controlled selection",
-		"Searchable local flow",
-		"Grouped option support",
-		"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, grouped options, clearable state, and 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."
-	]
-};
-//#endregion
-export { e as selectMock };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/select/index.cjs"),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=i.selectDemoGroups[2].options,f=e.selectValue??l[0].value,p=l.find(e=>e.value===f)??l[0],m=l[1]??l[0],[h,g]=a.useState(`plan`),[_,v]=a.useState(`north`),y=p.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:p.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:p.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:h})]}),(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:h===`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:h===`plan`?`default`:`outline`,onClick:()=>g(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:h===`density`?`default`:`outline`,onClick:()=>g(`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:h===`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:h===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:h===`plan`?(0,o.jsx)(r.Select,{value:f,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.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:`Grouped searchable select`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{value:_,onValueChange:e=>v(e??`north`),searchable:!0,clearable:!0,placeholder:`Choose workspace`,emptyMessage:`No workspace matched`,groups:[{label:`Regions`,options:d.slice(0,2)},{label:`Operations`,options:d.slice(2)}],triggerClassName:`w-full`})})]}),(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:`Custom option renderer without duplicate check icons`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{defaultValue:l[1].value,options:l,showSelectedIndicator:!1,renderOption:(e,t)=>(0,o.jsxs)(`span`,{className:`flex min-w-0 flex-1 items-center justify-between gap-3`,children:[(0,o.jsxs)(`span`,{className:`min-w-0`,children:[(0,o.jsx)(`span`,{className:`block truncate font-medium`,children:e.label}),e.description?(0,o.jsx)(`span`,{className:`block truncate text-xs aui-text-muted`,children:e.description}):null]}),t.selected?(0,o.jsx)(`span`,{className:`rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold`,children:`Selected`}):null]}),triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:y.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:p.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:p.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:m.value}),children:[`Choose `,m.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,o.jsx)(r.Select,{value:`invalid`,onValueChange:()=>void 0,options:[{value:`invalid`,label:`Invalid selection`}],invalid:!0,triggerClassName:`w-full`}),(0,o.jsx)(r.Select,{value:`loading`,onValueChange:()=>void 0,options:[{value:`loading`,label:`Loading options`}],loading:!0,triggerClassName:`w-full`})]})]})]})})]})}exports.SelectShowcase=c;

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

@@ -1,270 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-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 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 = r[2].options, p = c.selectValue ?? u[0].value, m = u.find((e) => e.value === p) ?? u[0], h = u[1] ?? u[0], [g, _] = i.useState("plan"), [v, y] = i.useState("north"), b = m.value === "enterprise" ? [
-		["Seats", "Unlimited"],
-		["Support", "Dedicated"],
-		["SLA", "Priority"]
-	] : m.value === "growth" ? [
-		["Seats", "25"],
-		["Support", "Shared"],
-		["SLA", "Same day"]
-	] : [
-		["Seats", "5"],
-		["Support", "Email"],
-		["SLA", "Standard"]
-	];
-	return /* @__PURE__ */ o("div", {
-		className: "space-y-0",
-		children: [/* @__PURE__ */ o("section", {
-			className: "pb-6",
-			children: [/* @__PURE__ */ o("div", {
-				className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-				children: [/* @__PURE__ */ o("div", {
-					className: "max-w-xl",
-					children: [
-						/* @__PURE__ */ a("p", {
-							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-							children: "Selection"
-						}),
-						/* @__PURE__ */ a("h3", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: "One clean select surface first"
-						}),
-						/* @__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__ */ o("div", {
-					className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
-					children: [
-						/* @__PURE__ */ o("div", {
-							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-								children: "Choice"
-							}), /* @__PURE__ */ a("p", {
-								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: m.label
-							})]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-								children: "Mode"
-							}), /* @__PURE__ */ a("p", {
-								className: "mt-2 text-lg font-semibold capitalize aui-text-strong",
-								children: g
-							})]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-								children: "Options"
-							}), /* @__PURE__ */ a("p", {
-								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: g === "plan" ? u.length : d.length
-							})]
-						})
-					]
-				})]
-			}), /* @__PURE__ */ o("div", {
-				className: "mt-6 flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ a(e, {
-					size: "sm",
-					variant: g === "plan" ? "default" : "outline",
-					onClick: () => _("plan"),
-					children: "Default trigger"
-				}), /* @__PURE__ */ a(e, {
-					size: "sm",
-					variant: g === "density" ? "default" : "outline",
-					onClick: () => _("density"),
-					children: "Compact trigger"
-				})]
-			})]
-		}), /* @__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__ */ o("div", {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
-							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-							children: "Primary select"
-						}), /* @__PURE__ */ a("h4", {
-							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-							children: g === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
-						})] }),
-						/* @__PURE__ */ o("div", {
-							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-sm font-medium aui-text-muted",
-								children: g === "plan" ? "Workspace plan" : "Toolbar density"
-							}), /* @__PURE__ */ a("div", {
-								className: "mt-3",
-								children: g === "plan" ? /* @__PURE__ */ a(n, {
-									value: p,
-									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__ */ o("div", {
-							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-sm font-medium aui-text-muted",
-								children: "Grouped searchable select"
-							}), /* @__PURE__ */ a("div", {
-								className: "mt-3",
-								children: /* @__PURE__ */ a(n, {
-									value: v,
-									onValueChange: (e) => y(e ?? "north"),
-									searchable: !0,
-									clearable: !0,
-									placeholder: "Choose workspace",
-									emptyMessage: "No workspace matched",
-									groups: [{
-										label: "Regions",
-										options: f.slice(0, 2)
-									}, {
-										label: "Operations",
-										options: f.slice(2)
-									}],
-									triggerClassName: "w-full"
-								})
-							})]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-sm font-medium aui-text-muted",
-								children: "Custom option renderer without duplicate check icons"
-							}), /* @__PURE__ */ a("div", {
-								className: "mt-3",
-								children: /* @__PURE__ */ a(n, {
-									defaultValue: u[1].value,
-									options: u,
-									showSelectedIndicator: !1,
-									renderOption: (e, t) => /* @__PURE__ */ o("span", {
-										className: "flex min-w-0 flex-1 items-center justify-between gap-3",
-										children: [/* @__PURE__ */ o("span", {
-											className: "min-w-0",
-											children: [/* @__PURE__ */ a("span", {
-												className: "block truncate font-medium",
-												children: e.label
-											}), e.description ? /* @__PURE__ */ a("span", {
-												className: "block truncate text-xs aui-text-muted",
-												children: e.description
-											}) : null]
-										}), t.selected ? /* @__PURE__ */ a("span", {
-											className: "rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold",
-											children: "Selected"
-										}) : null]
-									}),
-									triggerClassName: "w-full"
-								})
-							})]
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "grid gap-3 sm:grid-cols-3",
-							children: b.map(([e, t]) => /* @__PURE__ */ o("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ a("p", {
-									className: "text-xs aui-text-muted",
-									children: e
-								}), /* @__PURE__ */ a("p", {
-									className: "mt-1 text-sm font-medium aui-text-strong",
-									children: t
-								})]
-							}, e))
-						})
-					]
-				}), /* @__PURE__ */ o("div", {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ o("div", {
-							className: "flex items-center justify-between gap-3",
-							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-								children: "Controlled result"
-							}), /* @__PURE__ */ a("h4", {
-								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-								children: m.label
-							})] }), /* @__PURE__ */ a(t, {
-								variant: "outline",
-								className: "rounded-full",
-								children: m.value
-							})]
-						}),
-						/* @__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__ */ 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__ */ o("div", {
-							className: "flex flex-wrap gap-2",
-							children: [/* @__PURE__ */ o(e, {
-								type: "button",
-								size: "sm",
-								onClick: () => l({ selectValue: h.value }),
-								children: ["Choose ", h.label]
-							}), /* @__PURE__ */ a(e, {
-								type: "button",
-								size: "sm",
-								variant: "secondary",
-								onClick: () => l({ selectValue: u[0].value }),
-								children: "Reset"
-							})]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "grid gap-3 sm:grid-cols-2",
-							children: [/* @__PURE__ */ a(n, {
-								value: "invalid",
-								onValueChange: () => void 0,
-								options: [{
-									value: "invalid",
-									label: "Invalid selection"
-								}],
-								invalid: !0,
-								triggerClassName: "w-full"
-							}), /* @__PURE__ */ a(n, {
-								value: "loading",
-								onValueChange: () => void 0,
-								options: [{
-									value: "loading",
-									label: "Loading options"
-								}],
-								loading: !0,
-								triggerClassName: "w-full"
-							})]
-						})
-					]
-				})]
-			})
-		})]
-	});
-}
-//#endregion
-export { c as SelectShowcase };