tembro 3.1.6 → 3.1.7

package/dist/src/showcase/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../components/actions/demo.cjs"),t=require("../components/calendar/demo.cjs"),n=require("../components/data-table/demo.cjs"),r=require("../components/display/demo.cjs"),i=require("../components/feedback/demo.cjs"),a=require("../components/filters/demo.cjs"),o=require("../components/form/demo.cjs"),s=require("../components/inputs/demo.cjs"),c=require("../components/layout/demo.cjs"),l=require("../components/navigation/demo.cjs"),u=require("../components/overlay/demo.cjs"),d=require("../components/patterns/demo.cjs"),f=require("../components/upload/demo.cjs"),p=require("../components/wizard/demo.cjs"),m=require("./component-api-schema.cjs"),h=require("./fallback.cjs"),g=require("./premium/types.cjs"),_=require("./premium/index.cjs"),v=require("./registry-quality.cjs"),y=require("./registry-specific.cjs"),b=require("./package-meta.cjs"),x=require("./site-data.cjs"),S=require("./supplemental.cjs"),C=require("./types.cjs"),w=require("./preview-catalog.cjs"),T=require("./preview-registry.cjs"),E=require("./search-utils.cjs");var D={...e.actionsShowcaseDemoRegistry,...t.calendarShowcaseDemoRegistry,...n.dataTableShowcaseDemoRegistry,...r.displayShowcaseDemoRegistry,...i.feedbackShowcaseDemoRegistry,...a.filtersShowcaseDemoRegistry,...o.formShowcaseDemoRegistry,...s.inputsShowcaseDemoRegistry,...c.layoutShowcaseDemoRegistry,...l.navigationShowcaseDemoRegistry,...u.overlayShowcaseDemoRegistry,...d.patternsShowcaseDemoRegistry,...f.uploadShowcaseDemoRegistry,...p.wizardShowcaseDemoRegistry,...y.registrySpecificDemoRegistry,...S.supplementalShowcaseDemoRegistry,..._.premiumShowcaseDemoRegistry,...v.registryQualityDemoRegistry},O=D;exports.CLI_ADD_COMMAND=x.CLI_ADD_COMMAND,exports.CLI_INIT_NEXT_COMMAND=x.CLI_INIT_NEXT_COMMAND,exports.CLI_INIT_VITE_COMMAND=x.CLI_INIT_VITE_COMMAND,exports.CLI_INSTALL_COMMAND=x.CLI_INSTALL_COMMAND,exports.CLI_PACKAGE_NAME=x.CLI_PACKAGE_NAME,exports.CLI_THEME_COMMAND=x.CLI_THEME_COMMAND,exports.DOCS_APP_NAME=x.DOCS_APP_NAME,exports.DOCS_RELEASES_URL=x.DOCS_RELEASES_URL,exports.DOCS_REPO_URL=x.DOCS_REPO_URL,exports.DOCS_ROOT_PATH=x.DOCS_ROOT_PATH,exports.PACKAGE_DEPENDENCY_RANGE=b.PACKAGE_DEPENDENCY_RANGE,exports.PACKAGE_GITHUB_RELEASES_URL=x.PACKAGE_GITHUB_RELEASES_URL,exports.PACKAGE_GITHUB_URL=x.PACKAGE_GITHUB_URL,exports.PACKAGE_IMPORT=x.PACKAGE_IMPORT,exports.PACKAGE_INSTALL_COMMAND=x.PACKAGE_INSTALL_COMMAND,exports.PACKAGE_LATEST_RELEASE_DATE=b.PACKAGE_LATEST_RELEASE_DATE,exports.PACKAGE_LATEST_VERSION=b.PACKAGE_LATEST_VERSION,exports.PACKAGE_NAME=x.PACKAGE_NAME,exports.PACKAGE_NPM_URL=x.PACKAGE_NPM_URL,exports.PACKAGE_RELEASES_URL=x.PACKAGE_RELEASES_URL,exports.PACKAGE_RELEASE_DATE=x.PACKAGE_RELEASE_DATE,exports.PACKAGE_VERSION=x.PACKAGE_VERSION,exports.accessibilityChecks=x.accessibilityChecks,exports.blockCards=x.blockCards,exports.blockCoverageSections=x.blockCoverageSections,exports.blockLayoutFilters=x.blockLayoutFilters,exports.blockPath=x.blockPath,exports.blockSortOptions=x.blockSortOptions,exports.blockTabs=x.blockTabs,exports.blockThemeFilters=x.blockThemeFilters,exports.componentApiSchemas=m.componentApiSchemas,exports.componentCatalog=x.componentCatalog,exports.componentDemoRegistry=O,exports.componentDocsPath=x.componentDocsPath,exports.componentExportPath=x.componentExportPath,exports.componentExportSlug=x.componentExportSlug,exports.componentGroupMeta=x.componentGroupMeta,exports.componentGroupOrder=x.componentGroupOrder,exports.componentModuleCatalog=x.componentModuleCatalog,exports.componentModulePath=x.componentModulePath,exports.componentPlaygroundPath=x.componentPlaygroundPath,exports.componentRelations=x.componentRelations,exports.createGenericShowcaseDemo=h.createGenericShowcaseDemo,exports.defaultComponentDemoState=g.defaultComponentDemoState,exports.defaultShowcaseDemoState=C.defaultShowcaseDemoState,exports.docsSidebar=x.docsSidebar,exports.exampleCards=x.exampleCards,exports.featuredBlock=x.featuredBlock,exports.getComponentApiSchema=m.getComponentApiSchema,exports.getComponentDetailSidebarItems=x.getComponentDetailSidebarItems,exports.getComponentDetailSidebarSections=x.getComponentDetailSidebarSections,exports.getComponentGroup=x.getComponentGroup,exports.getComponentGroupDetails=x.getComponentGroupDetails,exports.getComponentPreview=T.getComponentPreview,exports.getComponentSurfaceCatalogItem=x.getComponentSurfaceCatalogItem,exports.getComponentSurfaceSections=x.getComponentSurfaceSections,exports.getDocumentedMemberByComponent=x.getDocumentedMemberByComponent,exports.getDocumentedMembersByComponents=x.getDocumentedMembersByComponents,exports.getPreviewSurface=w.getPreviewSurface,exports.getPrimaryComponentCatalog=x.getPrimaryComponentCatalog,exports.getPrimaryComponentMemberInventory=x.getPrimaryComponentMemberInventory,exports.getPrimaryComponentSurfaceSlug=x.getPrimaryComponentSurfaceSlug,exports.getPrimaryComponentSurfaceTitle=x.getPrimaryComponentSurfaceTitle,exports.getSearchItemByHref=E.getSearchItemByHref,exports.getVisibleComponentCatalog=x.getVisibleComponentCatalog,exports.getVisibleSearchItems=E.getVisibleSearchItems,exports.globalSearchItems=x.globalSearchItems,exports.inspectorChecks=x.inspectorChecks,exports.installCommand=x.installCommand,exports.isAdvancedSearchItem=E.isAdvancedSearchItem,exports.isPrimaryComponentSurface=x.isPrimaryComponentSurface,exports.playgroundSidebar=x.playgroundSidebar,exports.premiumShowcaseDemoRegistry=_.premiumShowcaseDemoRegistry,exports.previewBlockRegistry=T.previewBlockRegistry,exports.previewSurfaceCatalog=w.previewSurfaceCatalog,exports.primaryNav=x.primaryNav,exports.propRows=x.propRows,exports.registryQualityDemoRegistry=v.registryQualityDemoRegistry,exports.registrySpecificDemoRegistry=y.registrySpecificDemoRegistry,exports.releaseHistory=x.releaseHistory,exports.scoreSearchItem=E.scoreSearchItem,exports.searchGroupLabel=E.searchGroupLabel,exports.searchGroupOrder=E.searchGroupOrder,exports.searchItemKindLabel=E.searchItemKindLabel,exports.showcaseDemoRegistry=D,exports.supplementalShowcaseDemoRegistry=S.supplementalShowcaseDemoRegistry,exports.supplementalShowcaseDemoSlugs=S.supplementalShowcaseDemoSlugs,exports.templatePath=x.templatePath,exports.tocItems=x.tocItems;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../components/actions/demo.cjs"),t=require("../components/calendar/demo.cjs"),n=require("../components/data-table/demo.cjs"),r=require("../components/display/demo.cjs"),i=require("../components/feedback/demo.cjs"),a=require("../components/filters/demo.cjs"),o=require("../components/form/demo.cjs"),s=require("../components/inputs/demo.cjs"),c=require("../components/layout/demo.cjs"),l=require("../components/navigation/demo.cjs"),u=require("../components/overlay/demo.cjs"),d=require("../components/patterns/demo.cjs"),f=require("../components/upload/demo.cjs"),p=require("../components/wizard/demo.cjs"),m=require("./component-api-schema.cjs"),h=require("./fallback.cjs"),g=require("./premium/types.cjs"),_=require("./premium/index.cjs"),v=require("./registry-quality.cjs"),y=require("./registry-specific.cjs"),b=require("./package-meta.cjs"),x=require("./site-data.cjs"),S=require("./supplemental.cjs"),C=require("./types.cjs"),w=require("./preview-catalog.cjs"),T=require("./preview-registry.cjs"),E=require("./search-utils.cjs");var D={...e.actionsShowcaseDemoRegistry,...t.calendarShowcaseDemoRegistry,...n.dataTableShowcaseDemoRegistry,...r.displayShowcaseDemoRegistry,...i.feedbackShowcaseDemoRegistry,...a.filtersShowcaseDemoRegistry,...o.formShowcaseDemoRegistry,...s.inputsShowcaseDemoRegistry,...c.layoutShowcaseDemoRegistry,...l.navigationShowcaseDemoRegistry,...u.overlayShowcaseDemoRegistry,...d.patternsShowcaseDemoRegistry,...f.uploadShowcaseDemoRegistry,...p.wizardShowcaseDemoRegistry,...y.registrySpecificDemoRegistry,...S.supplementalShowcaseDemoRegistry,...v.registryQualityDemoRegistry,..._.premiumShowcaseDemoRegistry},O=D;exports.CLI_ADD_COMMAND=x.CLI_ADD_COMMAND,exports.CLI_INIT_NEXT_COMMAND=x.CLI_INIT_NEXT_COMMAND,exports.CLI_INIT_VITE_COMMAND=x.CLI_INIT_VITE_COMMAND,exports.CLI_INSTALL_COMMAND=x.CLI_INSTALL_COMMAND,exports.CLI_PACKAGE_NAME=x.CLI_PACKAGE_NAME,exports.CLI_THEME_COMMAND=x.CLI_THEME_COMMAND,exports.DOCS_APP_NAME=x.DOCS_APP_NAME,exports.DOCS_RELEASES_URL=x.DOCS_RELEASES_URL,exports.DOCS_REPO_URL=x.DOCS_REPO_URL,exports.DOCS_ROOT_PATH=x.DOCS_ROOT_PATH,exports.PACKAGE_DEPENDENCY_RANGE=b.PACKAGE_DEPENDENCY_RANGE,exports.PACKAGE_GITHUB_RELEASES_URL=x.PACKAGE_GITHUB_RELEASES_URL,exports.PACKAGE_GITHUB_URL=x.PACKAGE_GITHUB_URL,exports.PACKAGE_IMPORT=x.PACKAGE_IMPORT,exports.PACKAGE_INSTALL_COMMAND=x.PACKAGE_INSTALL_COMMAND,exports.PACKAGE_LATEST_RELEASE_DATE=b.PACKAGE_LATEST_RELEASE_DATE,exports.PACKAGE_LATEST_VERSION=b.PACKAGE_LATEST_VERSION,exports.PACKAGE_NAME=x.PACKAGE_NAME,exports.PACKAGE_NPM_URL=x.PACKAGE_NPM_URL,exports.PACKAGE_RELEASES_URL=x.PACKAGE_RELEASES_URL,exports.PACKAGE_RELEASE_DATE=x.PACKAGE_RELEASE_DATE,exports.PACKAGE_VERSION=x.PACKAGE_VERSION,exports.accessibilityChecks=x.accessibilityChecks,exports.blockCards=x.blockCards,exports.blockCoverageSections=x.blockCoverageSections,exports.blockLayoutFilters=x.blockLayoutFilters,exports.blockPath=x.blockPath,exports.blockSortOptions=x.blockSortOptions,exports.blockTabs=x.blockTabs,exports.blockThemeFilters=x.blockThemeFilters,exports.componentApiSchemas=m.componentApiSchemas,exports.componentCatalog=x.componentCatalog,exports.componentDemoRegistry=O,exports.componentDocsPath=x.componentDocsPath,exports.componentExportPath=x.componentExportPath,exports.componentExportSlug=x.componentExportSlug,exports.componentGroupMeta=x.componentGroupMeta,exports.componentGroupOrder=x.componentGroupOrder,exports.componentModuleCatalog=x.componentModuleCatalog,exports.componentModulePath=x.componentModulePath,exports.componentPlaygroundPath=x.componentPlaygroundPath,exports.componentRelations=x.componentRelations,exports.createGenericShowcaseDemo=h.createGenericShowcaseDemo,exports.defaultComponentDemoState=g.defaultComponentDemoState,exports.defaultShowcaseDemoState=C.defaultShowcaseDemoState,exports.docsSidebar=x.docsSidebar,exports.exampleCards=x.exampleCards,exports.featuredBlock=x.featuredBlock,exports.getComponentApiSchema=m.getComponentApiSchema,exports.getComponentDetailSidebarItems=x.getComponentDetailSidebarItems,exports.getComponentDetailSidebarSections=x.getComponentDetailSidebarSections,exports.getComponentGroup=x.getComponentGroup,exports.getComponentGroupDetails=x.getComponentGroupDetails,exports.getComponentPreview=T.getComponentPreview,exports.getComponentSurfaceCatalogItem=x.getComponentSurfaceCatalogItem,exports.getComponentSurfaceSections=x.getComponentSurfaceSections,exports.getDocumentedMemberByComponent=x.getDocumentedMemberByComponent,exports.getDocumentedMembersByComponents=x.getDocumentedMembersByComponents,exports.getPreviewSurface=w.getPreviewSurface,exports.getPrimaryComponentCatalog=x.getPrimaryComponentCatalog,exports.getPrimaryComponentMemberInventory=x.getPrimaryComponentMemberInventory,exports.getPrimaryComponentSurfaceSlug=x.getPrimaryComponentSurfaceSlug,exports.getPrimaryComponentSurfaceTitle=x.getPrimaryComponentSurfaceTitle,exports.getSearchItemByHref=E.getSearchItemByHref,exports.getVisibleComponentCatalog=x.getVisibleComponentCatalog,exports.getVisibleSearchItems=E.getVisibleSearchItems,exports.globalSearchItems=x.globalSearchItems,exports.inspectorChecks=x.inspectorChecks,exports.installCommand=x.installCommand,exports.isAdvancedSearchItem=E.isAdvancedSearchItem,exports.isPrimaryComponentSurface=x.isPrimaryComponentSurface,exports.playgroundSidebar=x.playgroundSidebar,exports.premiumShowcaseDemoRegistry=_.premiumShowcaseDemoRegistry,exports.previewBlockRegistry=T.previewBlockRegistry,exports.previewSurfaceCatalog=w.previewSurfaceCatalog,exports.primaryNav=x.primaryNav,exports.propRows=x.propRows,exports.registryQualityDemoRegistry=v.registryQualityDemoRegistry,exports.registrySpecificDemoRegistry=y.registrySpecificDemoRegistry,exports.releaseHistory=x.releaseHistory,exports.scoreSearchItem=E.scoreSearchItem,exports.searchGroupLabel=E.searchGroupLabel,exports.searchGroupOrder=E.searchGroupOrder,exports.searchItemKindLabel=E.searchItemKindLabel,exports.showcaseDemoRegistry=D,exports.supplementalShowcaseDemoRegistry=S.supplementalShowcaseDemoRegistry,exports.supplementalShowcaseDemoSlugs=S.supplementalShowcaseDemoSlugs,exports.templatePath=x.templatePath,exports.tocItems=x.tocItems;

package/dist/src/showcase/index.js

@@ -43,8 +43,8 @@ var $ = {
 	...u,
 	..._,
 	...Q,
-	...h,
-	...g
+	...g,
+	...h
 }, Je = $;
 //#endregion
 export { x as CLI_ADD_COMMAND, S as CLI_INIT_NEXT_COMMAND, C as CLI_INIT_VITE_COMMAND, w as CLI_INSTALL_COMMAND, T as CLI_PACKAGE_NAME, E as CLI_THEME_COMMAND, D as DOCS_APP_NAME, O as DOCS_RELEASES_URL, k as DOCS_REPO_URL, A as DOCS_ROOT_PATH, v as PACKAGE_DEPENDENCY_RANGE, j as PACKAGE_GITHUB_RELEASES_URL, M as PACKAGE_GITHUB_URL, N as PACKAGE_IMPORT, P as PACKAGE_INSTALL_COMMAND, y as PACKAGE_LATEST_RELEASE_DATE, b as PACKAGE_LATEST_VERSION, F as PACKAGE_NAME, I as PACKAGE_NPM_URL, L as PACKAGE_RELEASES_URL, R as PACKAGE_RELEASE_DATE, z as PACKAGE_VERSION, B as accessibilityChecks, V as blockCards, H as blockCoverageSections, U as blockLayoutFilters, W as blockPath, G as blockSortOptions, K as blockTabs, q as blockThemeFilters, d as componentApiSchemas, J as componentCatalog, Je as componentDemoRegistry, Y as componentDocsPath, X as componentExportPath, Z as componentExportSlug, re as componentGroupMeta, ie as componentGroupOrder, ae as componentModuleCatalog, oe as componentModulePath, se as componentPlaygroundPath, ce as componentRelations, p as createGenericShowcaseDemo, m as defaultComponentDemoState, Ie as defaultShowcaseDemoState, le as docsSidebar, ue as exampleCards, de as featuredBlock, f as getComponentApiSchema, fe as getComponentDetailSidebarItems, pe as getComponentDetailSidebarSections, me as getComponentGroup, he as getComponentGroupDetails, ze as getComponentPreview, ge as getComponentSurfaceCatalogItem, _e as getComponentSurfaceSections, ve as getDocumentedMemberByComponent, ye as getDocumentedMembersByComponents, Le as getPreviewSurface, be as getPrimaryComponentCatalog, xe as getPrimaryComponentMemberInventory, Se as getPrimaryComponentSurfaceSlug, Ce as getPrimaryComponentSurfaceTitle, Ve as getSearchItemByHref, we as getVisibleComponentCatalog, He as getVisibleSearchItems, Te as globalSearchItems, Ee as inspectorChecks, De as installCommand, Ue as isAdvancedSearchItem, Oe as isPrimaryComponentSurface, ke as playgroundSidebar, h as premiumShowcaseDemoRegistry, Be as previewBlockRegistry, Re as previewSurfaceCatalog, Ae as primaryNav, je as propRows, g as registryQualityDemoRegistry, _ as registrySpecificDemoRegistry, Me as releaseHistory, We as scoreSearchItem, Ge as searchGroupLabel, Ke as searchGroupOrder, qe as searchItemKindLabel, $ as showcaseDemoRegistry, Q as supplementalShowcaseDemoRegistry, Fe as supplementalShowcaseDemoSlugs, Ne as templatePath, Pe as tocItems };

package/dist/src/showcase/package-meta.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.6`,t=`July 13, 2026`,n=`^${e}`;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.7`,t=`July 15, 2026`,n=e;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;

package/dist/src/showcase/package-meta.js

@@ -1,4 +1,4 @@
 //#region src/showcase/package-meta.ts
-var e = "3.1.6", t = "July 13, 2026", n = `^${e}`;
+var e = "3.1.7", t = "July 15, 2026", n = e;
 //#endregion
 export { n as PACKAGE_DEPENDENCY_RANGE, t as PACKAGE_LATEST_RELEASE_DATE, e as PACKAGE_LATEST_VERSION };

package/dist/src/showcase/premium/app-sidebar/mock.cjs

@@ -1,4 +1,5 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Sidebar } from "tembro"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Link } from "react-router-dom"
+import { Sidebar } from "tembro"
 
 const items = [
   { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
@@ -26,7 +27,7 @@ export function Example() {
       showSectionLabels
       responsive
       renderLink={({ item: _item, href = "/", ...props }) => (
-        <a {...props} href={href} />
+        <Link {...props} to={href} />
       )}
       header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
       footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}

package/dist/src/showcase/premium/app-sidebar/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/app-sidebar/mock.ts
 var e = {
-	code: "import { Sidebar } from \"tembro\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true, sectionLabel: \"Workspace\" },\n  {\n    key: \"customers\",\n    label: \"Customers\",\n    badge: \"12\",\n    defaultExpanded: true,\n    items: [\n      { key: \"active\", label: \"Active\", href: \"/customers/active\" },\n      { key: \"archived\", label: \"Archived\", href: \"/customers/archived\" },\n    ],\n  },\n  { key: \"billing\", label: \"Billing\", href: \"/billing\", sectionLabel: \"Manage\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return (\n    <Sidebar\n      items={items}\n      navigationLabel=\"Workspace navigation\"\n      itemSize=\"md\"\n      activeIndicator=\"bar\"\n      showSectionLabels\n      responsive\n      renderLink={({ item: _item, href = \"/\", ...props }) => (\n        <a {...props} href={href} />\n      )}\n      header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n      footerAccount={{ label: \"Azamat Workspace\", description: \"Starter plan\", avatar: \"AW\" }}\n      secondaryActions={[{ key: \"support\", label: \"Support\", href: \"/support\" }]}\n      onItemSelect={(item) => console.log(item.key)}\n    />\n  )\n}",
+	code: "import { Link } from \"react-router-dom\"\nimport { Sidebar } from \"tembro\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true, sectionLabel: \"Workspace\" },\n  {\n    key: \"customers\",\n    label: \"Customers\",\n    badge: \"12\",\n    defaultExpanded: true,\n    items: [\n      { key: \"active\", label: \"Active\", href: \"/customers/active\" },\n      { key: \"archived\", label: \"Archived\", href: \"/customers/archived\" },\n    ],\n  },\n  { key: \"billing\", label: \"Billing\", href: \"/billing\", sectionLabel: \"Manage\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return (\n    <Sidebar\n      items={items}\n      navigationLabel=\"Workspace navigation\"\n      itemSize=\"md\"\n      activeIndicator=\"bar\"\n      showSectionLabels\n      responsive\n      renderLink={({ item: _item, href = \"/\", ...props }) => (\n        <Link {...props} to={href} />\n      )}\n      header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n      footerAccount={{ label: \"Azamat Workspace\", description: \"Starter plan\", avatar: \"AW\" }}\n      secondaryActions={[{ key: \"support\", label: \"Support\", href: \"/support\" }]}\n      onItemSelect={(item) => console.log(item.key)}\n    />\n  )\n}",
 	highlights: [
 		"Nested and collapsible route groups",
 		"Three density modes",

package/dist/src/showcase/premium/app-sidebar/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`}),sectionLabel:`Core`},{key:`projects`,label:`Projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`,defaultExpanded:!0,items:[{key:`active-projects`,label:`Active projects`,href:`/components/app-sidebar?view=active`},{key:`archived-projects`,label:`Archived`,href:`/components/app-sidebar?view=archived`,badge:`3`}]},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`}),sectionLabel:`Insights`},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[u,d]=a.useState(`overview`),[f,p]=a.useState(e===`playground`),[m,h]=a.useState(`desktop`),[g,_]=a.useState(!0),[v,y]=a.useState(`md`),[b,x]=a.useState(`bar`),[S,C]=a.useState(0),w=a.useMemo(()=>c.map(e=>({...e,active:e.key===u,onSelect:()=>d(e.key)})),[u]),T=c.find(e=>e.key===u),E=m===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:f?`outline`:`default`,onClick:()=>p(e=>!e),children:f?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>d(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`default`:`outline`,onClick:()=>h(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`outline`:`default`,onClick:()=>h(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,E&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.Sidebar,{collapsed:f,items:w,showSectionLabels:g,itemSize:v,activeIndicator:b,renderLink:({item:e,href:t=`/components/app-sidebar`,...n})=>(0,s.jsx)(`a`,{...n,href:t}),secondaryActions:[{key:`support`,label:`Support`,icon:(0,s.jsx)(o.LifeBuoyIcon,{className:`size-4`}),onSelect:()=>d(`reports`)}],railItems:[{key:`members`,label:`Members`,icon:(0,s.jsx)(o.UsersIcon,{className:`size-4`}),onSelect:()=>d(`projects`)}],footerAccount:{label:`Azamat Workspace`,description:S?`Account opened ${S}x`:`Starter plan`,avatar:`AW`,onSelect:()=>C(e=>e+1)},responsive:!0,mobileBreakpoint:E?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:T?.label??`Overview`}),(0,s.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:E?`Mobile drawer`:f?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:w.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]}),e===`playground`?(0,s.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:g?`default`:`outline`,onClick:()=>_(e=>!e),children:g?`Hide section labels`:`Show section labels`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`sm`?`default`:`outline`,onClick:()=>y(`sm`),children:`Compact`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`md`?`default`:`outline`,onClick:()=>y(`md`),children:`Default`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`lg`?`default`:`outline`,onClick:()=>y(`lg`),children:`Comfortable`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`bar`?`default`:`outline`,onClick:()=>x(`bar`),children:`Bar active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`pill`?`default`:`outline`,onClick:()=>x(`pill`),children:`Pill active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`none`?`default`:`outline`,onClick:()=>x(`none`),children:`Minimal active`})]}):null]})]})]})}exports.AppSidebarShowcase=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`}),sectionLabel:`Core`},{key:`projects`,label:`Projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`,defaultExpanded:!0,items:[{key:`active-projects`,label:`Active projects`,href:`/components/app-sidebar?view=active`},{key:`archived-projects`,label:`Archived`,href:`/components/app-sidebar?view=archived`,badge:`3`}]},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`}),sectionLabel:`Insights`},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[u,d]=a.useState(`overview`),[f,p]=a.useState(e===`playground`),[m,h]=a.useState(`desktop`),[g,_]=a.useState(!0),[v,y]=a.useState(`md`),[b,x]=a.useState(`bar`),[S,C]=a.useState(0),w=a.useMemo(()=>c.map(e=>({...e,active:e.key===u,onSelect:()=>d(e.key)})),[u]),T=c.find(e=>e.key===u),E=m===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states, section labels, active indicators and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:f?`outline`:`default`,onClick:()=>p(e=>!e),children:f?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>d(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`default`:`outline`,onClick:()=>h(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`outline`:`default`,onClick:()=>h(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,E&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.Sidebar,{collapsed:f,items:w,showSectionLabels:g,itemSize:v,activeIndicator:b,renderLink:({item:e,href:t=`/components/app-sidebar`,...n})=>(0,s.jsx)(`a`,{...n,href:t}),secondaryActions:[{key:`support`,label:`Support`,icon:(0,s.jsx)(o.LifeBuoyIcon,{className:`size-4`}),onSelect:()=>d(`reports`)}],railItems:[{key:`members`,label:`Members`,icon:(0,s.jsx)(o.UsersIcon,{className:`size-4`}),onSelect:()=>d(`projects`)}],footerAccount:{label:`Azamat Workspace`,description:S?`Account opened ${S}x`:`Starter plan`,avatar:`AW`,onSelect:()=>C(e=>e+1)},responsive:!0,mobileBreakpoint:E?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:T?.label??`Overview`}),(0,s.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:E?`Mobile drawer`:f?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:w.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]}),e===`playground`?(0,s.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:g?`default`:`outline`,onClick:()=>_(e=>!e),children:g?`Hide section labels`:`Show section labels`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`sm`?`default`:`outline`,onClick:()=>y(`sm`),children:`Compact`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`md`?`default`:`outline`,onClick:()=>y(`md`),children:`Default`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`lg`?`default`:`outline`,onClick:()=>y(`lg`),children:`Comfortable`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`bar`?`default`:`outline`,onClick:()=>x(`bar`),children:`Bar active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`pill`?`default`:`outline`,onClick:()=>x(`pill`),children:`Pill active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`none`?`default`:`outline`,onClick:()=>x(`none`),children:`Minimal active`})]}):null]})]})]})}exports.AppSidebarShowcase=u;

package/dist/src/showcase/premium/app-sidebar/showcase.js

@@ -79,7 +79,7 @@ function g({ mode: a }) {
 							}),
 							/* @__PURE__ */ f("p", {
 								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior."
+								children: "This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states, section labels, active indicators and collapsed behavior."
 							})
 						]
 					}), /* @__PURE__ */ p("div", {

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/inputs/async-select.cjs"),n=require("../../component-route-data.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=n.routeWorkspaceOptions,o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();return t?a.filter(e=>String(e.label??``).toLowerCase().includes(t)):a};function c(){let[c,l]=(0,r.useState)(``),[u,d]=(0,r.useState)([`north`,`west`]),f=n.routeWorkspaceOptions.find(e=>e.value===c),p=n.routeWorkspaceOptions.filter(e=>u.includes(String(e.value)));return(0,i.jsx)(`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:`Remote selection`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AsyncSelect is the remote member of the Select family`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{value:c,onValueChange:e=>l(e??``),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectedDescription:!0,debounceMs:220,labels:{placeholder:`Choose service region`,searchPlaceholder:`Search regions...`}})}),(0,i.jsxs)(`div`,{className:`mt-5`,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Multi select uses the same component`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{isMulti:!0,value:u,onValueChange:e=>d(e),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectAll:!0,maxSelected:3,maxVisibleTags:2,showSelectedDescription:!0,debounceMs:220,labels:{multiPlaceholder:`Choose team coverage`,searchPlaceholder:`Search team regions...`,selectedCount:e=>`${e} regions selected`,hiddenSelected:e=>`+${e} more`}})})]}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Hydrate selection`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Selected value can be restored from ID-first edit state.`})]})]})]}),(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:f?.label||`No region selected`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:c||`none`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:f?n.routeWorkspaceOptions.find(e=>e.value===f.value)?.team:`No team`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Multi mode`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:p.length?p.map(e=>e.label).join(`, `):`No teams selected`})]})]})]})]})]})})}exports.AsyncSelectShowcase=c;
+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/async-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=r.routeWorkspaceOptions,s=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,c=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();if(t===`error`)throw Error(`Unable to load regions`);return t?o.filter(e=>String(e.label??``).toLowerCase().includes(t)):o},l=async e=>(await new Promise(e=>setTimeout(e,120)),o.find(t=>t.value===e)??null),u=async e=>(await new Promise(e=>setTimeout(e,120)),o.filter(t=>e.includes(String(t.value)))),d=async e=>(await new Promise(e=>setTimeout(e,180)),{value:e.trim().toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``)||`custom-region`,label:e.trim(),description:`Created from the current search query`});function f(){let[f,p]=(0,i.useState)(``),[m,h]=(0,i.useState)([`north`,`west`]),g=r.routeWorkspaceOptions.find(e=>e.value===f),_=r.routeWorkspaceOptions.filter(e=>m.includes(String(e.value)));return(0,a.jsx)(`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:`Remote selection`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AsyncSelect is the remote member of the Select family`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,a.jsxs)(`div`,{className:s,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(n.AsyncSelect,{value:f,onValueChange:e=>p(e??``),loadOptions:c,loadSelectedOption:l,defaultOptions:o,minSearchLength:1,clearable:!0,showSelectedDescription:!0,debounceMs:220,onCreateOption:d,createOptionLabel:e=>`Create region "${e.trim()}"`,labels:{placeholder:`Choose service region`,searchPlaceholder:`Search regions...`,error:`Could not load regions. Try another query.`}})}),(0,a.jsxs)(`div`,{className:`mt-5`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Multi select uses the same component`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(n.AsyncSelect,{isMulti:!0,value:m,onValueChange:e=>h(e),loadOptions:c,loadSelectedOptions:u,defaultOptions:o,minSearchLength:1,clearable:!0,showSelectAll:!0,maxSelected:3,maxVisibleTags:2,showSelectedDescription:!0,debounceMs:220,onCreateOption:d,createOptionLabel:e=>`Create team "${e.trim()}"`,labels:{multiPlaceholder:`Choose team coverage`,searchPlaceholder:`Search team regions...`,error:`Could not load teams. Try another query.`,selectedCount:e=>`${e} regions selected`,hiddenSelected:e=>`+${e} more`,maxSelected:e=>`Maximum ${e} regions`}})})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,a.jsx)(e.Button,{size:`sm`,variant:`secondary`,onClick:()=>p(`south`),children:`Hydrate South`}),(0,a.jsx)(e.Button,{size:`sm`,variant:`secondary`,onClick:()=>h([`north`,`west`,`central`]),children:`Fill max selected`}),(0,a.jsx)(e.Button,{size:`sm`,variant:`outline`,onClick:()=>{p(``),h([])},children:`Clear all`})]}),(0,a.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional. Type error to test failure state.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Create and hydrate`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Create missing options and restore selected labels from ID-first edit state.`})]})]})]}),(0,a.jsxs)(`div`,{className:s,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:g?.label||`No region selected`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:f||`none`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:g?r.routeWorkspaceOptions.find(e=>e.value===g.value)?.team:`No team`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Multi mode`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:_.length?_.map(e=>e.label).join(`, `):`No teams selected`})]})]})]})]})]})})}exports.AsyncSelectShowcase=f;

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

@@ -1,97 +1,108 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { AsyncSelect as t } from "../../../components/inputs/async-select.js";
-import { routeWorkspaceOptions as n } from "../../component-route-data.js";
-import { useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { AsyncSelect as n } from "../../../components/inputs/async-select.js";
+import { routeWorkspaceOptions as r } from "../../component-route-data.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/async-select/showcase.tsx
-var o = n, s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", c = async (e) => {
+var s = r, c = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", l = async (e) => {
 	await new Promise((e) => setTimeout(e, 260));
 	let t = e.trim().toLowerCase();
-	return t ? o.filter((e) => String(e.label ?? "").toLowerCase().includes(t)) : o;
-};
-function l() {
-	let [l, u] = r(""), [d, f] = r(["north", "west"]), p = n.find((e) => e.value === l), m = n.filter((e) => d.includes(String(e.value)));
-	return /* @__PURE__ */ i("div", {
+	if (t === "error") throw Error("Unable to load regions");
+	return t ? s.filter((e) => String(e.label ?? "").toLowerCase().includes(t)) : s;
+}, u = async (e) => (await new Promise((e) => setTimeout(e, 120)), s.find((t) => t.value === e) ?? null), d = async (e) => (await new Promise((e) => setTimeout(e, 120)), s.filter((t) => e.includes(String(t.value)))), f = async (e) => (await new Promise((e) => setTimeout(e, 180)), {
+	value: e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "custom-region",
+	label: e.trim(),
+	description: "Created from the current search query"
+});
+function p() {
+	let [p, m] = i(""), [h, g] = i(["north", "west"]), _ = r.find((e) => e.value === p), v = r.filter((e) => h.includes(String(e.value)));
+	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
-		children: /* @__PURE__ */ a("section", {
+		children: /* @__PURE__ */ o("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", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Remote selection"
 						}),
-						/* @__PURE__ */ i("h3", {
+						/* @__PURE__ */ a("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "AsyncSelect is the remote member of the Select family"
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 							children: "Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware."
 						})
 					]
-				}), /* @__PURE__ */ a("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "flex flex-wrap gap-2",
 					children: [
-						/* @__PURE__ */ i(e, {
+						/* @__PURE__ */ a(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Async"
 						}),
-						/* @__PURE__ */ i(e, {
+						/* @__PURE__ */ a(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Search"
 						}),
-						/* @__PURE__ */ i(e, {
+						/* @__PURE__ */ a(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Clearable"
 						})
 					]
 				})]
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]",
-				children: [/* @__PURE__ */ a("div", {
-					className: s,
+				children: [/* @__PURE__ */ o("div", {
+					className: c,
 					children: [
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Assign service region"
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ a("div", {
 							className: "mt-3",
-							children: /* @__PURE__ */ i(t, {
-								value: l,
-								onValueChange: (e) => u(e ?? ""),
-								loadOptions: c,
-								defaultOptions: o,
+							children: /* @__PURE__ */ a(n, {
+								value: p,
+								onValueChange: (e) => m(e ?? ""),
+								loadOptions: l,
+								loadSelectedOption: u,
+								defaultOptions: s,
 								minSearchLength: 1,
 								clearable: !0,
 								showSelectedDescription: !0,
 								debounceMs: 220,
+								onCreateOption: f,
+								createOptionLabel: (e) => `Create region "${e.trim()}"`,
 								labels: {
 									placeholder: "Choose service region",
-									searchPlaceholder: "Search regions..."
+									searchPlaceholder: "Search regions...",
+									error: "Could not load regions. Try another query."
 								}
 							})
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ o("div", {
 							className: "mt-5",
-							children: [/* @__PURE__ */ i("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-sm font-medium aui-text-muted",
 								children: "Multi select uses the same component"
-							}), /* @__PURE__ */ i("div", {
+							}), /* @__PURE__ */ a("div", {
 								className: "mt-3",
-								children: /* @__PURE__ */ i(t, {
+								children: /* @__PURE__ */ a(n, {
 									isMulti: !0,
-									value: d,
-									onValueChange: (e) => f(e),
-									loadOptions: c,
-									defaultOptions: o,
+									value: h,
+									onValueChange: (e) => g(e),
+									loadOptions: l,
+									loadSelectedOptions: d,
+									defaultOptions: s,
 									minSearchLength: 1,
 									clearable: !0,
 									showSelectAll: !0,
@@ -99,97 +110,130 @@ function l() {
 									maxVisibleTags: 2,
 									showSelectedDescription: !0,
 									debounceMs: 220,
+									onCreateOption: f,
+									createOptionLabel: (e) => `Create team "${e.trim()}"`,
 									labels: {
 										multiPlaceholder: "Choose team coverage",
 										searchPlaceholder: "Search team regions...",
+										error: "Could not load teams. Try another query.",
 										selectedCount: (e) => `${e} regions selected`,
-										hiddenSelected: (e) => `+${e} more`
+										hiddenSelected: (e) => `+${e} more`,
+										maxSelected: (e) => `Maximum ${e} regions`
 									}
 								})
 							})]
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ o("div", {
+							className: "mt-4 flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ a(e, {
+									size: "sm",
+									variant: "secondary",
+									onClick: () => m("south"),
+									children: "Hydrate South"
+								}),
+								/* @__PURE__ */ a(e, {
+									size: "sm",
+									variant: "secondary",
+									onClick: () => g([
+										"north",
+										"west",
+										"central"
+									]),
+									children: "Fill max selected"
+								}),
+								/* @__PURE__ */ a(e, {
+									size: "sm",
+									variant: "outline",
+									onClick: () => {
+										m(""), g([]);
+									},
+									children: "Clear all"
+								})
+							]
+						}),
+						/* @__PURE__ */ o("div", {
 							className: "mt-4 grid gap-3 md:grid-cols-3",
 							children: [
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "font-medium aui-text-strong",
 										children: "Type to query"
-									}), /* @__PURE__ */ i("p", {
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 leading-6 aui-text-muted",
-										children: "Minimum search length keeps remote requests intentional."
+										children: "Minimum search length keeps remote requests intentional. Type error to test failure state."
 									})]
 								}),
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "font-medium aui-text-strong",
 										children: "Clear safely"
-									}), /* @__PURE__ */ i("p", {
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 leading-6 aui-text-muted",
 										children: "Clear action is isolated from the trigger surface."
 									})]
 								}),
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "font-medium aui-text-strong",
-										children: "Hydrate selection"
-									}), /* @__PURE__ */ i("p", {
+										children: "Create and hydrate"
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 leading-6 aui-text-muted",
-										children: "Selected value can be restored from ID-first edit state."
+										children: "Create missing options and restore selected labels from ID-first edit state."
 									})]
 								})
 							]
 						})
 					]
-				}), /* @__PURE__ */ a("div", {
-					className: s,
+				}), /* @__PURE__ */ o("div", {
+					className: c,
 					children: [
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Selected result"
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: p?.label || "No region selected"
+							children: _?.label || "No region selected"
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ a("p", {
 							className: "mt-2 text-sm leading-6 aui-text-muted",
 							children: "Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model."
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ o("div", {
 							className: "mt-4 space-y-3",
 							children: [
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
 										children: "Value"
-									}), /* @__PURE__ */ i("p", {
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: l || "none"
+										children: p || "none"
 									})]
 								}),
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
 										children: "Team"
-									}), /* @__PURE__ */ i("p", {
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: p ? n.find((e) => e.value === p.value)?.team : "No team"
+										children: _ ? r.find((e) => e.value === _.value)?.team : "No team"
 									})]
 								}),
-								/* @__PURE__ */ a("div", {
+								/* @__PURE__ */ o("div", {
 									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ i("p", {
+									children: [/* @__PURE__ */ a("p", {
 										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
 										children: "Multi mode"
-									}), /* @__PURE__ */ i("p", {
+									}), /* @__PURE__ */ a("p", {
 										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: m.length ? m.map((e) => e.label).join(", ") : "No teams selected"
+										children: v.length ? v.map((e) => e.label).join(", ") : "No teams selected"
 									})]
 								})
 							]
@@ -201,4 +245,4 @@ function l() {
 	});
 }
 //#endregion
-export { l as AsyncSelectShowcase };
+export { p as AsyncSelectShowcase };

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/avatar.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`,i=[{key:`az`,name:`Azamat Jurayev`,status:`online`},{key:`sa`,name:`Saida Karimova`,status:`busy`},{key:`um`,name:`Umid Rakhimov`,status:`away`},{key:`ni`,name:`Nigor Akhmedova`,status:`online`},{key:`ja`,name:`Jasur Tursunov`,status:`offline`}];function a(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Avatar handles identity without heavy cards`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Assignee row`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The component should stay readable in compact operational lists, not only inside profile layouts.`}),(0,n.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(t.Avatar,{name:`Azamat Jurayev`,size:`lg`,status:`online`}),(0,n.jsxs)(`div`,{className:`min-w-0`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Azamat Jurayev`}),(0,n.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Release owner for the current component pass`})]}),(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Online`})]})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Size and shape`}),(0,n.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-3`,children:[(0,n.jsx)(t.Avatar,{name:`AZ`,size:`xs`}),(0,n.jsx)(t.Avatar,{name:`AZ`,size:`sm`,shape:`rounded`}),(0,n.jsx)(t.Avatar,{name:`AZ`,size:`default`}),(0,n.jsx)(t.Avatar,{name:`AZ`,size:`lg`,shape:`square`}),(0,n.jsx)(t.Avatar,{name:`AZ`,size:`xl`,shape:`rounded`})]})]})]})}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Team summary`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Grouped avatars work best as a compact cue, not a replacement for a full people management panel.`})]}),(0,n.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,n.jsx)(t.AvatarGroup,{items:i,max:4})})]})})]})}exports.AvatarShowcase=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/avatar.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`,i=[{key:`az`,name:`Azamat Jurayev`,status:`online`},{key:`sa`,name:`Saida Karimova`,status:`busy`},{key:`um`,name:`Umid Rakhimov`,status:`away`},{key:`ni`,name:`Nigor Akhmedova`,status:`online`},{key:`ja`,name:`Jasur Tursunov`,status:`offline`}];function a(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Avatar handles identity without heavy cards`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Assignee row`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The component should stay readable in compact operational lists, not only inside profile layouts.`}),(0,n.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(t.Avatar,{name:`Azamat Jurayev`,size:`lg`,status:`online`}),(0,n.jsxs)(`div`,{className:`min-w-0`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Azamat Jurayev`}),(0,n.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Release owner for the current component pass`})]}),(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Online`})]})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Size and shape`}),(0,n.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-3`,children:[(0,n.jsx)(t.Avatar,{name:`TM`,size:`xs`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`sm`,shape:`rounded`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`default`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`lg`,shape:`square`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`xl`,shape:`rounded`})]})]})]})}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Team summary`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Grouped avatars work best as a compact cue, not a replacement for a full people management panel.`})]}),(0,n.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,n.jsx)(t.AvatarGroup,{items:i,max:4})})]})})]})}exports.AvatarShowcase=a;

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

@@ -96,25 +96,25 @@ function s() {
 							className: "mt-4 flex flex-wrap items-center gap-3",
 							children: [
 								/* @__PURE__ */ r(t, {
-									name: "AZ",
+									name: "TM",
 									size: "xs"
 								}),
 								/* @__PURE__ */ r(t, {
-									name: "AZ",
+									name: "TM",
 									size: "sm",
 									shape: "rounded"
 								}),
 								/* @__PURE__ */ r(t, {
-									name: "AZ",
+									name: "TM",
 									size: "default"
 								}),
 								/* @__PURE__ */ r(t, {
-									name: "AZ",
+									name: "TM",
 									size: "lg",
 									shape: "square"
 								}),
 								/* @__PURE__ */ r(t, {
-									name: "AZ",
+									name: "TM",
 									size: "xl",
 									shape: "rounded"
 								})

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
+import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
 
 export function Example() {
   const [open, setOpen] = React.useState(false)
@@ -14,6 +14,11 @@ export function Example() {
             Confirm that these notes are final before moving to production.
           </DialogDescription>
         </DialogHeader>
+        <DialogBody>
+          <p className="text-sm text-muted-foreground">
+            The body scrolls independently when content is long, while the footer stays usable.
+          </p>
+        </DialogBody>
         <DialogFooter>
           <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
           <Button>Publish</Button>

package/dist/src/showcase/premium/dialog/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/dialog/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button>Publish</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Publish update</DialogTitle>\n          <DialogDescription>\n            Confirm that these notes are final before moving to production.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n          <Button>Publish</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}",
+	code: "import * as React from \"react\"\nimport { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button>Publish</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Publish update</DialogTitle>\n          <DialogDescription>\n            Confirm that these notes are final before moving to production.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <p className=\"text-sm text-muted-foreground\">\n            The body scrolls independently when content is long, while the footer stays usable.\n          </p>\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n          <Button>Publish</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}",
 	htmlCode: "<button data-slot=\"dialog-trigger\">Open dialog</button>",
 	cliCommand: "npx tembro add dialog",
 	highlights: [

package/dist/src/showcase/premium/dialog/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/ui/dialog/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,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:`Overlay`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Dialogs should justify focus`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit.`})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-3`,children:r.dialogDemoItems.map(r=>(0,i.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:r.title}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:r.description})]}),(0,i.jsx)(t.Badge,{variant:r.confirmVariant===`destructive`?`destructive`:`outline`,children:r.confirmLabel})]}),(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsxs)(n.Dialog,{children:[(0,i.jsx)(n.DialogTrigger,{render:(0,i.jsx)(e.Button,{variant:r.triggerVariant}),children:r.label}),(0,i.jsxs)(n.DialogContent,{children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:r.title}),(0,i.jsx)(n.DialogDescription,{children:r.description})]}),(0,i.jsx)(n.DialogFooter,{showCloseButton:!0,children:(0,i.jsx)(e.Button,{variant:r.confirmVariant,children:r.confirmLabel})})]})]})})]},r.label))})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-3`,children:[`Keep the page understandable before the overlay opens.`,`Use outcome-specific action labels inside the dialog footer.`,`Do not move long multi-step workflows into a small modal by default.`].map(e=>(0,i.jsx)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted`,children:e},e))})})]})}exports.DialogShowcase=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/ui/dialog/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,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:`Overlay`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Dialogs should justify focus`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit.`})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-3`,children:r.dialogDemoItems.map(r=>(0,i.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:r.title}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:r.description})]}),(0,i.jsx)(t.Badge,{variant:r.confirmVariant===`destructive`?`destructive`:`outline`,children:r.confirmLabel})]}),(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsxs)(n.Dialog,{children:[(0,i.jsx)(n.DialogTrigger,{render:(0,i.jsx)(e.Button,{variant:r.triggerVariant}),children:r.label}),(0,i.jsxs)(n.DialogContent,{children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:r.title}),(0,i.jsx)(n.DialogDescription,{children:r.description})]}),(0,i.jsx)(n.DialogBody,{children:(0,i.jsx)(`div`,{className:`rounded-[16px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 aui-text-muted`,children:`This body area scrolls independently when content becomes long. Footer actions stay visible and aligned.`})}),(0,i.jsx)(n.DialogFooter,{showCloseButton:!0,children:(0,i.jsx)(e.Button,{variant:r.confirmVariant,children:r.confirmLabel})})]})]})})]},r.label))})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(n.Dialog,{children:[(0,i.jsx)(n.DialogTrigger,{render:(0,i.jsx)(e.Button,{variant:`outline`}),children:`Open form dialog`}),(0,i.jsxs)(n.DialogContent,{size:`lg`,children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:`Create staff member`}),(0,i.jsx)(n.DialogDescription,{children:`Use focused form dialogs for short admin tasks with stable footer actions.`})]}),(0,i.jsx)(n.DialogBody,{children:(0,i.jsx)(`div`,{className:`grid gap-4 sm:grid-cols-2`,children:[`Full name`,`Phone`,`Role`,`Status`,`Branch`,`Temporary password`].map(e=>(0,i.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[e,(0,i.jsx)(`input`,{className:`h-10 rounded-xl border border-[color:var(--aui-input-border)] bg-[color:var(--aui-input-bg)] px-3 text-sm outline-none focus-visible:border-[color:var(--aui-ring)]`,placeholder:e})]},e))})}),(0,i.jsxs)(n.DialogFooter,{children:[(0,i.jsx)(e.Button,{variant:`outline`,children:`Cancel`}),(0,i.jsx)(e.Button,{children:`Create staff`})]})]})]}),(0,i.jsxs)(n.Dialog,{children:[(0,i.jsx)(n.DialogTrigger,{render:(0,i.jsx)(e.Button,{variant:`destructive`}),children:`Open destructive dialog`}),(0,i.jsxs)(n.DialogContent,{size:`sm`,children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:`Deactivate restaurant`}),(0,i.jsx)(n.DialogDescription,{children:`This action pauses public ordering and hides active shifts from the restaurant.`})]}),(0,i.jsx)(n.DialogBody,{children:(0,i.jsx)(`div`,{className:`rounded-[16px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-700`,children:`Operators can reactivate it later, but active customer sessions will be interrupted.`})}),(0,i.jsxs)(n.DialogFooter,{children:[(0,i.jsx)(e.Button,{variant:`outline`,children:`Keep active`}),(0,i.jsx)(e.Button,{variant:`destructive`,children:`Deactivate`})]})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-3`,children:[`Keep the page understandable before the overlay opens.`,`Use outcome-specific action labels inside the dialog footer.`,`Do not move long multi-step workflows into a small modal by default.`].map(e=>(0,i.jsx)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted`,children:e},e))})})]})}exports.DialogShowcase=o;