tembro 3.1.16 → 3.1.17

package/packages/cli/dist/index.cjs

@@ -1988,4 +1988,4 @@ ${t}`),i.forEach(n=>{let o=R[n],s=or(n),a=jn(n,o.category),c=o.registryDependenc
 ${s}`),a.sort().forEach(c=>{let d=R[c],l=or(c),u=jn(c,d.category),h=d.registryDependencies?.length?` -> ${d.registryDependencies.join(", ")}`:"";console.log(`  ${c} [${l}/${u}]${h}`);});console.log(`
 Status:`),console.log("  stable = safe public API"),console.log("  preview = usable but API may change"),console.log("  experimental = not ready for stable app contracts"),console.log("  internal = helper metadata"),console.log(`
 Distribution:`),console.log("  foundation = small runtime-safe primitives, hooks, and helpers"),console.log("  source-copy = copy into app source with init/add and edit locally"),console.log("  system = larger product surfaces and patterns; prefer source-copy only"),console.log(`
-Usage:`),console.log(`  ${re("add button input data-table")}`),console.log(`  ${re("add form --overwrite")}`),console.log(`  ${re("list --category data-table")}`),console.log(`  ${re("list --json")}`);}var mt=be(qe());function Ja(t){try{return mt.default.readJsonSync(t)}catch{return null}}function ow(t){try{return mt.default.readFileSync(t,"utf8")}catch{return null}}function FP(t,e){return e?L__default.default.resolve(t,e):null}function sw(t){let e=t.paths?.components??t.componentsPath??"src/components",r=t.paths?.ui??t.componentsPath??L__default.default.join(e,"ui"),i=t.paths?.lib??L__default.default.dirname(t.utilsPath??"src/lib/utils.ts"),n=t.paths?.hooks??"src/hooks",o=t.utilsPath??L__default.default.join(i,"utils.ts");return {componentsRoot:e,uiPath:r,libPath:i,hooksPath:n,utilsPath:o}}function jP(t,e){let r=sw(e);return t.replace("{components}",r.componentsRoot).replace("{ui}",r.uiPath).replace("{hooks}",r.hooksPath).replace("{lib}",r.libPath).replace("{utils}",r.utilsPath)}function iw(t,e){return ["tsconfig.app.json","tsconfig.json"].map(i=>L__default.default.join(t,i)).some(i=>!!Ja(i)?.compilerOptions?.paths?.[`${e}/*`])}function nw(t,e){return ["vite.config.ts","vite.config.js","vite.config.mjs"].map(i=>L__default.default.join(t,i)).some(i=>{let n=ow(i);return !!(n?.includes(`"${e}"`)||n?.includes(`'${e}'`))})}function aw(t,e){let r=Ja(L__default.default.join(t,"package.json")),i=new Set([...Object.keys(r?.dependencies??{}),...Object.keys(r?.devDependencies??{})]);return e.filter(n=>!i.has(n))}function Ya(t,e){return (t.files??[]).map(r=>({source:r.source,target:jP(r.target,e)}))}function NP(t,e){return At.map(r=>R[r]).filter(r=>r.category!=="lib").filter(r=>!r.migrationAliasFor).filter(r=>r.files?.length).filter(r=>Ya(r,e).some(i=>mt.default.existsSync(L__default.default.join(t,i.target))))}function qP(t,e){let r=NP(t,e),i=[],n=[],o=new Set;for(let s of r){for(let a of Ya(s,e))mt.default.existsSync(L__default.default.join(t,a.target))||i.push(`${s.name}: ${a.target}`);for(let a of s.registryDependencies??[]){let c=R[a];if(!c?.files?.length)continue;Ya(c,e).some(l=>mt.default.existsSync(L__default.default.join(t,l.target)))||n.push(`${s.name} -> ${a}`);}for(let a of s.dependencies??[])o.add(a);}return {copiedItems:r,missingFiles:i,missingRegistryDependencies:n,missingPackages:aw(t,Array.from(o).sort())}}function Ze(t,e){t.push(e);}function LP(t){return t?t.includes("/* tembro:start */")||t.includes("--aui-")||t.includes("--az-"):false}function cw(t={}){let e=process.cwd(),r=[],i=L__default.default.join(e,"package.json"),n=L__default.default.join(e,"tembro.json"),o=mt.default.existsSync(i),s=Ja(n);if(Ze(r,{name:"package.json",status:o?"pass":"fail",message:o?"package.json topildi.":"package.json topilmadi. Commandni React, Vite yoki Next project ichida ishlating."}),Ze(r,{name:"tembro.json",status:s?"pass":"fail",message:s?"tembro.json topildi.":`tembro.json topilmadi. Avval ${re("init")} ishlating.`}),s){let d=s.alias??"@",{componentsRoot:l,uiPath:u,libPath:h,hooksPath:p}=sw(s),f=s.cssPath??"src/index.css",b=[["components",l],["ui",u],["lib",h],["hooks",p]].filter(([,C])=>{let M=FP(e,C);return !M||!mt.default.existsSync(M)});Ze(r,{name:"paths",status:b.length?"warn":"pass",message:b.length?`Yetishmayotgan pathlar: ${b.map(([C,M])=>`${C}=${M}`).join(", ")}`:"Configured source paths mavjud."}),Ze(r,{name:"alias",status:iw(e,d)||nw(e,d)?"pass":"warn",message:iw(e,d)||nw(e,d)?`${d} alias tsconfig yoki vite configda topildi.`:`${d} alias topilmadi. Import pathlar ishlamasligi mumkin.`});let y=ow(L__default.default.join(e,f)),w=LP(y);Ze(r,{name:"theme-css",status:w?"pass":"warn",message:w?`${f} ichida Tembro tokenlari bor.`:`${f} ichida Tembro tokenlari topilmadi. ${re(`theme ${f}`)} ishlating.`});let S=qP(e,s);Ze(r,{name:"component-files",status:S.missingFiles.length?"warn":"pass",message:S.missingFiles.length?`Yetishmayotgan component fayllari: ${S.missingFiles.slice(0,8).join(", ")}${S.missingFiles.length>8?` (+${S.missingFiles.length-8})`:""}`:`${S.copiedItems.length} ta copied component file set tekshirildi.`}),Ze(r,{name:"registry-dependencies",status:S.missingRegistryDependencies.length?"warn":"pass",message:S.missingRegistryDependencies.length?`Yetishmayotgan registry dependencylar: ${S.missingRegistryDependencies.slice(0,8).join(", ")}${S.missingRegistryDependencies.length>8?` (+${S.missingRegistryDependencies.length-8})`:""}`:"Copied componentlar uchun registry dependencylar joyida."}),Ze(r,{name:"component-dependencies",status:S.missingPackages.length?"warn":"pass",message:S.missingPackages.length?`Copied componentlar uchun yetishmayotgan package dependencylar: ${S.missingPackages.join(", ")}`:"Copied component package dependencylari package.json ichida bor."});}if(o){let d=aw(e,["@fontsource-variable/geist","clsx","tailwind-merge","tw-animate-css"]);Ze(r,{name:"base-dependencies",status:d.length?"warn":"pass",message:d.length?`Yetishmayotgan dependencylar: ${d.join(", ")}`:"Base dependencylar package.json ichida bor."});}let a=r.filter(d=>d.status==="fail"),c=r.filter(d=>d.status==="warn");if(t.json){console.log(JSON.stringify({ok:a.length===0,checks:r},null,2));return}for(let d of r){let l=`${d.status.toUpperCase()} ${d.name}: ${d.message}`;d.status==="pass"&&x.success(l),d.status==="warn"&&x.warn(l),d.status==="fail"&&x.error(l);}if(a.length&&(x.error(`Doctor failed: ${a.length} fail, ${c.length} warn.`),process.exit(1)),c.length){x.warn(`Doctor completed with ${c.length} warning.`);return}x.success("Doctor passed. Project Tembro setup looks ready.");}var Ka=be(qe());async function lw(t){let e=process.cwd(),r=L__default.default.join(e,"tembro.json"),i=Ka.default.existsSync(r)?await Ka.default.readJson(r):{},n=t??i.cssPath??i.globalCssPath??"src/index.css",o=i.paths?.components??i.componentsPath??"src/components",s=await Mn({cwd:e,cssPath:n,componentsPath:o});x.success(`Tembro theme CSS yangilandi: ${s}`);}var dw={minimal:["button","input","card","badge"],dashboard:["button","input","card","badge","dropdown-menu","skeleton","tabs","page-state","filter-bar","description-list","info-card","data-table"]};async function uw(t,e={}){let r=dw[t];r||(x.error(`Preset topilmadi: ${t}`),process.exit(1)),await Dt(r,e);}var Qe=new $t;Qe.name("tembro").description("Tembro source-copy CLI").version("3.1.16");Qe.command("init").description("Initialize local Tembro source files in your project").option("--template <template>","Project defaults: vite or next").option("--skip-install","Do not install base dependencies").option("--showcase","Add every component and write a local Tembro workbench").option("-y, --defaults","Use template defaults without interactive prompts").action(Ky);Qe.command("preset").description("Add a source-copy preset to your project").argument("<name>","preset name: minimal or dashboard").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(uw);Qe.command("list").description("List available registry components").option("--category <category>","Filter by registry category").option("--status <status>","Filter by status: stable, preview, experimental, internal").option("--json","Print machine-readable JSON").action(rw);Qe.command("doctor").description("Check local project setup for Tembro source-copy usage").option("--json","Print machine-readable JSON").action(cw);Qe.command("add").description("Copy component source files into your project").argument("[components...]","components to add").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--plan","print machine-readable copy plan without writing").option("--skip-install","do not install package dependencies").action(Dt);Qe.command("showcase").description("Add every component and write a local Tembro workbench").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(t=>Dt(["showcase"],t));Qe.command("theme").description("Write or update Tembro theme CSS in your global CSS file").argument("[cssPath]","global CSS path, default from tembro.json or src/index.css").action(lw);Qe.parse();
+Usage:`),console.log(`  ${re("add button input data-table")}`),console.log(`  ${re("add form --overwrite")}`),console.log(`  ${re("list --category data-table")}`),console.log(`  ${re("list --json")}`);}var mt=be(qe());function Ja(t){try{return mt.default.readJsonSync(t)}catch{return null}}function ow(t){try{return mt.default.readFileSync(t,"utf8")}catch{return null}}function FP(t,e){return e?L__default.default.resolve(t,e):null}function sw(t){let e=t.paths?.components??t.componentsPath??"src/components",r=t.paths?.ui??t.componentsPath??L__default.default.join(e,"ui"),i=t.paths?.lib??L__default.default.dirname(t.utilsPath??"src/lib/utils.ts"),n=t.paths?.hooks??"src/hooks",o=t.utilsPath??L__default.default.join(i,"utils.ts");return {componentsRoot:e,uiPath:r,libPath:i,hooksPath:n,utilsPath:o}}function jP(t,e){let r=sw(e);return t.replace("{components}",r.componentsRoot).replace("{ui}",r.uiPath).replace("{hooks}",r.hooksPath).replace("{lib}",r.libPath).replace("{utils}",r.utilsPath)}function iw(t,e){return ["tsconfig.app.json","tsconfig.json"].map(i=>L__default.default.join(t,i)).some(i=>!!Ja(i)?.compilerOptions?.paths?.[`${e}/*`])}function nw(t,e){return ["vite.config.ts","vite.config.js","vite.config.mjs"].map(i=>L__default.default.join(t,i)).some(i=>{let n=ow(i);return !!(n?.includes(`"${e}"`)||n?.includes(`'${e}'`))})}function aw(t,e){let r=Ja(L__default.default.join(t,"package.json")),i=new Set([...Object.keys(r?.dependencies??{}),...Object.keys(r?.devDependencies??{})]);return e.filter(n=>!i.has(n))}function Ya(t,e){return (t.files??[]).map(r=>({source:r.source,target:jP(r.target,e)}))}function NP(t,e){return At.map(r=>R[r]).filter(r=>r.category!=="lib").filter(r=>!r.migrationAliasFor).filter(r=>r.files?.length).filter(r=>Ya(r,e).some(i=>mt.default.existsSync(L__default.default.join(t,i.target))))}function qP(t,e){let r=NP(t,e),i=[],n=[],o=new Set;for(let s of r){for(let a of Ya(s,e))mt.default.existsSync(L__default.default.join(t,a.target))||i.push(`${s.name}: ${a.target}`);for(let a of s.registryDependencies??[]){let c=R[a];if(!c?.files?.length)continue;Ya(c,e).some(l=>mt.default.existsSync(L__default.default.join(t,l.target)))||n.push(`${s.name} -> ${a}`);}for(let a of s.dependencies??[])o.add(a);}return {copiedItems:r,missingFiles:i,missingRegistryDependencies:n,missingPackages:aw(t,Array.from(o).sort())}}function Ze(t,e){t.push(e);}function LP(t){return t?t.includes("/* tembro:start */")||t.includes("--aui-")||t.includes("--az-"):false}function cw(t={}){let e=process.cwd(),r=[],i=L__default.default.join(e,"package.json"),n=L__default.default.join(e,"tembro.json"),o=mt.default.existsSync(i),s=Ja(n);if(Ze(r,{name:"package.json",status:o?"pass":"fail",message:o?"package.json topildi.":"package.json topilmadi. Commandni React, Vite yoki Next project ichida ishlating."}),Ze(r,{name:"tembro.json",status:s?"pass":"fail",message:s?"tembro.json topildi.":`tembro.json topilmadi. Avval ${re("init")} ishlating.`}),s){let d=s.alias??"@",{componentsRoot:l,uiPath:u,libPath:h,hooksPath:p}=sw(s),f=s.cssPath??"src/index.css",b=[["components",l],["ui",u],["lib",h],["hooks",p]].filter(([,C])=>{let M=FP(e,C);return !M||!mt.default.existsSync(M)});Ze(r,{name:"paths",status:b.length?"warn":"pass",message:b.length?`Yetishmayotgan pathlar: ${b.map(([C,M])=>`${C}=${M}`).join(", ")}`:"Configured source paths mavjud."}),Ze(r,{name:"alias",status:iw(e,d)||nw(e,d)?"pass":"warn",message:iw(e,d)||nw(e,d)?`${d} alias tsconfig yoki vite configda topildi.`:`${d} alias topilmadi. Import pathlar ishlamasligi mumkin.`});let y=ow(L__default.default.join(e,f)),w=LP(y);Ze(r,{name:"theme-css",status:w?"pass":"warn",message:w?`${f} ichida Tembro tokenlari bor.`:`${f} ichida Tembro tokenlari topilmadi. ${re(`theme ${f}`)} ishlating.`});let S=qP(e,s);Ze(r,{name:"component-files",status:S.missingFiles.length?"warn":"pass",message:S.missingFiles.length?`Yetishmayotgan component fayllari: ${S.missingFiles.slice(0,8).join(", ")}${S.missingFiles.length>8?` (+${S.missingFiles.length-8})`:""}`:`${S.copiedItems.length} ta copied component file set tekshirildi.`}),Ze(r,{name:"registry-dependencies",status:S.missingRegistryDependencies.length?"warn":"pass",message:S.missingRegistryDependencies.length?`Yetishmayotgan registry dependencylar: ${S.missingRegistryDependencies.slice(0,8).join(", ")}${S.missingRegistryDependencies.length>8?` (+${S.missingRegistryDependencies.length-8})`:""}`:"Copied componentlar uchun registry dependencylar joyida."}),Ze(r,{name:"component-dependencies",status:S.missingPackages.length?"warn":"pass",message:S.missingPackages.length?`Copied componentlar uchun yetishmayotgan package dependencylar: ${S.missingPackages.join(", ")}`:"Copied component package dependencylari package.json ichida bor."});}if(o){let d=aw(e,["@fontsource-variable/geist","clsx","tailwind-merge","tw-animate-css"]);Ze(r,{name:"base-dependencies",status:d.length?"warn":"pass",message:d.length?`Yetishmayotgan dependencylar: ${d.join(", ")}`:"Base dependencylar package.json ichida bor."});}let a=r.filter(d=>d.status==="fail"),c=r.filter(d=>d.status==="warn");if(t.json){console.log(JSON.stringify({ok:a.length===0,checks:r},null,2));return}for(let d of r){let l=`${d.status.toUpperCase()} ${d.name}: ${d.message}`;d.status==="pass"&&x.success(l),d.status==="warn"&&x.warn(l),d.status==="fail"&&x.error(l);}if(a.length&&(x.error(`Doctor failed: ${a.length} fail, ${c.length} warn.`),process.exit(1)),c.length){x.warn(`Doctor completed with ${c.length} warning.`);return}x.success("Doctor passed. Project Tembro setup looks ready.");}var Ka=be(qe());async function lw(t){let e=process.cwd(),r=L__default.default.join(e,"tembro.json"),i=Ka.default.existsSync(r)?await Ka.default.readJson(r):{},n=t??i.cssPath??i.globalCssPath??"src/index.css",o=i.paths?.components??i.componentsPath??"src/components",s=await Mn({cwd:e,cssPath:n,componentsPath:o});x.success(`Tembro theme CSS yangilandi: ${s}`);}var dw={minimal:["button","input","card","badge"],dashboard:["button","input","card","badge","dropdown-menu","skeleton","tabs","page-state","filter-bar","description-list","info-card","data-table"]};async function uw(t,e={}){let r=dw[t];r||(x.error(`Preset topilmadi: ${t}`),process.exit(1)),await Dt(r,e);}var Qe=new $t;Qe.name("tembro").description("Tembro source-copy CLI").version("3.1.17");Qe.command("init").description("Initialize local Tembro source files in your project").option("--template <template>","Project defaults: vite or next").option("--skip-install","Do not install base dependencies").option("--showcase","Add every component and write a local Tembro workbench").option("-y, --defaults","Use template defaults without interactive prompts").action(Ky);Qe.command("preset").description("Add a source-copy preset to your project").argument("<name>","preset name: minimal or dashboard").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(uw);Qe.command("list").description("List available registry components").option("--category <category>","Filter by registry category").option("--status <status>","Filter by status: stable, preview, experimental, internal").option("--json","Print machine-readable JSON").action(rw);Qe.command("doctor").description("Check local project setup for Tembro source-copy usage").option("--json","Print machine-readable JSON").action(cw);Qe.command("add").description("Copy component source files into your project").argument("[components...]","components to add").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--plan","print machine-readable copy plan without writing").option("--skip-install","do not install package dependencies").action(Dt);Qe.command("showcase").description("Add every component and write a local Tembro workbench").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(t=>Dt(["showcase"],t));Qe.command("theme").description("Write or update Tembro theme CSS in your global CSS file").argument("[cssPath]","global CSS path, default from tembro.json or src/index.css").action(lw);Qe.parse();

package/packages/cli/vendor/src/components/calendar/date-picker.tsx

@@ -22,6 +22,7 @@ export type DatePickerProps = Omit<
   labels?: DatePickerLabels
   disabled?: boolean
   clearable?: boolean
+  triggerVariant?: "default" | "compact"
   formatValue?: (value: string) => React.ReactNode
   triggerClassName?: string
   contentClassName?: string
@@ -40,6 +41,7 @@ function DatePicker({
   labels,
   disabled = false,
   clearable = true,
+  triggerVariant = "default",
   formatValue = defaultFormatValue,
   triggerClassName,
   contentClassName,
@@ -66,16 +68,18 @@ function DatePicker({
   }
 
   return (
-    <div data-slot="date-picker" className={cn("w-full", className)}>
+    <div data-slot="date-picker" data-trigger-variant={triggerVariant} className={cn("w-full", className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
             <Button
               type="button"
               variant="outline"
-              disabled={disabled}
+              disabled={disabled}
+              labelClassName="flex-1"
               className={cn(
-                "group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
+                "group w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
+                triggerVariant === "default" ? "min-h-11 gap-3 px-3" : "min-h-9 gap-2 px-2.5",
                 !hasValue && "text-muted-foreground",
                 triggerClassName
               )}
@@ -83,10 +87,10 @@ function DatePicker({
           }
         >
           <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
-          <span className="grid min-w-0 flex-1 gap-0.5">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+          <span className={cn("grid min-w-0 flex-1", triggerVariant === "default" && "gap-0.5")}>
+            {triggerVariant === "default" ? <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
               {labels?.selected ?? "Date"}
-            </span>
+            </span> : null}
             <span className={cn("truncate text-sm", hasValue && "font-semibold text-foreground")}>
               {hasValue ? formatValue(String(value)) : placeholder ?? labels?.placeholder ?? "Select date"}
             </span>
@@ -96,7 +100,7 @@ function DatePicker({
               role="button"
               tabIndex={0}
               aria-label={labels?.clear ?? "Clear date"}
-              className="ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              className={cn("ml-auto inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", triggerVariant === "default" ? "size-7" : "size-6")}
               onClick={handleClear}
               onKeyDown={(event) => {
                 if (event.key === "Enter" || event.key === " ") {

package/packages/cli/vendor/src/components/display/statistic.tsx

@@ -58,18 +58,19 @@ function Statistic({ label, value, prefix, suffix, description, trend = "neutral
   )
 }
 
-export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
-  action?: React.ReactNode
-}
-
-function StatisticCard({ action, label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps) {
-  return (
-    <Card data-slot="statistic-card" className={className} {...props}>
-      <CardHeader data-slot="statistic-card-header" className="flex flex-row items-center justify-between gap-3 pb-2">
+export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
+  action?: React.ReactNode
+  density?: "compact" | "default"
+}
+
+function StatisticCard({ action, density = "default", label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps) {
+  return (
+    <Card data-slot="statistic-card" data-density={density} className={className} {...props}>
+      <CardHeader data-slot="statistic-card-header" className={cn("flex flex-row items-center justify-between gap-3 pb-2", density === "compact" && "px-4 pt-4 pb-1")}>
         <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
         {action ? <div data-slot="statistic-card-action">{action}</div> : null}
       </CardHeader>
-      <CardContent>
+      <CardContent className={cn(density === "compact" && "px-4 pb-4")}>
         <Statistic
           label={<span className="sr-only">{label}</span>}
           value={value}
@@ -85,16 +86,20 @@ function StatisticCard({ action, label, value, prefix, suffix, description, tren
   )
 }
 
-export type StatisticGridProps = React.ComponentProps<"div"> & {
-  columns?: 1 | 2 | 3 | 4
-}
-
-function StatisticGrid({ columns = 4, className, ...props }: StatisticGridProps) {
+export type StatisticGridProps = React.ComponentProps<"div"> & {
+  columns?: 1 | 2 | 3 | 4
+  gap?: "sm" | "default" | "lg"
+}
+
+function StatisticGrid({ columns = 4, gap = "default", className, ...props }: StatisticGridProps) {
   return (
     <div
       data-slot="statistic-grid"
       className={cn(
-        "grid gap-4",
+        "grid",
+        gap === "sm" && "gap-3",
+        gap === "default" && "gap-4",
+        gap === "lg" && "gap-6",
         columns === 1 && "grid-cols-1",
         columns === 2 && "grid-cols-1 sm:grid-cols-2",
         columns === 3 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",

package/packages/cli/vendor/src/components/modern/calendar-scheduler.tsx

@@ -9,15 +9,36 @@ export type CalendarSchedulerEvent = {
   time?: string
   tone?: "default" | "success" | "warning" | "danger"
   durationMinutes?: number
+  description?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
+  icon?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+  className?: string
 }
 
 export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   events: CalendarSchedulerEvent[]
   days?: string[]
   view?: "day" | "week" | "month"
+  variant?: "board" | "agenda"
+  density?: "compact" | "default" | "comfortable"
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
   empty?: React.ReactNode
+  selectedEventId?: string
+  defaultSelectedEventId?: string
+  onSelectedEventChange?: (eventId: string, event: CalendarSchedulerEvent) => void
   onCreateEvent?: (date: string) => void
   onEventClick?: (event: CalendarSchedulerEvent) => void
+  renderEvent?: (event: CalendarSchedulerEvent, state: { selected: boolean }) => React.ReactNode
+  createLabel?: React.ReactNode
+  showCount?: boolean
+  dayClassName?: string
+  eventClassName?: string
+  formatDay?: (day: string) => React.ReactNode
 }
 
 const toneClassName = {
@@ -31,39 +52,52 @@ function CalendarScheduler({
   events,
   days,
   view = "week",
+  variant = "board",
+  density = "default",
+  title,
+  description,
+  actions,
   empty = "No events scheduled.",
+  selectedEventId,
+  defaultSelectedEventId,
+  onSelectedEventChange,
   onCreateEvent,
   onEventClick,
+  renderEvent,
+  createLabel = "Create event",
+  showCount = true,
+  dayClassName,
+  eventClassName,
+  formatDay,
   className,
   ...props
 }: CalendarSchedulerProps) {
-  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
+  const [internalSelectedEventId, setInternalSelectedEventId] = React.useState(defaultSelectedEventId)
+  const currentSelectedEventId = selectedEventId ?? internalSelectedEventId
+  const visibleEvents = events.filter((event) => !event.hidden)
+  const visibleDays = days ?? Array.from(new Set(visibleEvents.map((event) => event.date)))
+
+  const selectEvent = (event: CalendarSchedulerEvent) => {
+    if (event.disabled) return
+    if (selectedEventId === undefined) setInternalSelectedEventId(event.id)
+    onSelectedEventChange?.(event.id, event)
+    onEventClick?.(event)
+  }
 
   if (visibleDays.length === 0) {
     return (
       <div
         data-slot="calendar-scheduler"
         data-view={view}
-        className={cn(
-          "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
-          className
-        )}
+        data-variant={variant}
+        data-density={density}
+        className={cn("rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]", className)}
         {...props}
       >
         <div className="flex min-h-32 items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-muted/20 px-4 py-6 text-center">
           <div className="space-y-1.5">
-            <p data-empty="true" className="text-sm font-medium text-foreground">
-              {empty}
-            </p>
-            {onCreateEvent ? (
-              <button
-                type="button"
-                className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
-                onClick={() => onCreateEvent("today")}
-              >
-                Create event
-              </button>
-            ) : null}
+            <p data-empty="true" className="text-sm font-medium text-foreground">{empty}</p>
+            {onCreateEvent ? <button type="button" className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent("today")}>{createLabel}</button> : null}
           </div>
         </div>
       </div>
@@ -74,53 +108,79 @@ function CalendarScheduler({
     <div
       data-slot="calendar-scheduler"
       data-view={view}
-      className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)}
+      data-variant={variant}
+      data-density={density}
+      className={cn(
+        "grid",
+        density === "compact" ? "gap-2" : density === "comfortable" ? "gap-5" : "gap-3",
+        view === "month" && variant === "board" && "md:grid-cols-2 xl:grid-cols-3",
+        variant === "agenda" && "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
+        className
+      )}
       {...props}
     >
+      {(title || description || actions) ? (
+        <div data-slot="calendar-scheduler-header" className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-[min(100%,16rem)] flex-1 space-y-1">
+            {title ? <h2 className="text-base font-semibold text-foreground">{title}</h2> : null}
+            {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+        </div>
+      ) : null}
+
       {visibleDays.map((day) => {
-        const dayEvents = events.filter((event) => event.date === day)
+        const dayEvents = visibleEvents.filter((event) => event.date === day)
 
         return (
-          <section
-            key={day}
-            className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]"
-          >
+          <section key={day} data-slot="calendar-scheduler-day" className={cn(variant === "board" && "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]", dayClassName)}>
             <div className="mb-3 flex items-center justify-between gap-3">
-              <div className="text-sm font-semibold text-foreground">{day}</div>
-              <div className="text-xs text-muted-foreground">{dayEvents.length} items</div>
+              <div className="text-sm font-semibold text-foreground">{formatDay?.(day) ?? day}</div>
+              {showCount ? <div className="text-xs text-muted-foreground">{dayEvents.length} items</div> : null}
             </div>
-            <div className="grid gap-2">
+            <div className={cn("grid", density === "compact" ? "gap-1.5" : "gap-2")}>
               {dayEvents.length === 0 ? (
-                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
-                  {empty}
-                </div>
-              ) : (
-                dayEvents.map((event) => (
+                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">{empty}</div>
+              ) : dayEvents.map((event) => {
+                const selected = currentSelectedEventId === event.id
+                return (
                   <button
                     key={event.id}
                     type="button"
+                    disabled={event.disabled}
+                    data-slot="calendar-scheduler-event"
+                    data-selected={selected || undefined}
                     className={cn(
-                      "rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
-                      toneClassName[event.tone ?? "default"],
+                      "border text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+                      variant === "board" ? "rounded-[var(--radius-md)] px-3 py-2.5 shadow-sm" : "grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-[var(--radius-md)] bg-background px-3 py-3 hover:bg-muted/35 data-[selected=true]:border-primary/40 data-[selected=true]:bg-primary/5",
+                      variant === "board" && toneClassName[event.tone ?? "default"], eventClassName, event.className
                     )}
-                    onClick={() => onEventClick?.(event)}
+                    onClick={() => selectEvent(event)}
                   >
-                    <div className="font-medium">{event.title}</div>
-                    {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                    {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                    {renderEvent ? renderEvent(event, { selected }) : variant === "agenda" ? (
+                      <>
+                        <span className="inline-flex min-w-14 items-center gap-1.5 font-medium">{event.icon}{event.time ?? "—"}</span>
+                        <span className="min-w-0">
+                          <span className="block truncate font-medium text-foreground">{event.title}</span>
+                          {event.description ? <span className="mt-0.5 block text-xs text-muted-foreground">{event.description}</span> : null}
+                          {event.meta ? <span className="mt-1 block text-xs text-muted-foreground">{event.meta}</span> : null}
+                        </span>
+                        {event.badge ? <span className="shrink-0">{event.badge}</span> : event.durationMinutes ? <span className="shrink-0 text-xs opacity-70">{event.durationMinutes} min</span> : null}
+                      </>
+                    ) : (
+                      <>
+                        <div className="font-medium">{event.title}</div>
+                        {event.description ? <div className="mt-1 text-xs opacity-80">{event.description}</div> : null}
+                        {event.time ? <div className="mt-1 text-xs opacity-70">{event.time}</div> : null}
+                        {event.durationMinutes ? <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div> : null}
+                        {event.meta ? <div className="mt-1 text-xs opacity-70">{event.meta}</div> : null}
+                      </>
+                    )}
                   </button>
-                ))
-              )}
+                )
+              })}
             </div>
-            {onCreateEvent && (
-              <button
-                type="button"
-                className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
-                onClick={() => onCreateEvent(day)}
-              >
-                Create event
-              </button>
-            )}
+            {onCreateEvent ? <button type="button" className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent(day)}>{createLabel}</button> : null}
           </section>
         )
       })}

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -46,6 +46,7 @@ export type ButtonProps = ButtonPrimitive.Props &
     iconOnly?: boolean
     fullWidth?: boolean
     pressed?: boolean
+    labelClassName?: string
   }
 
 function Button({
@@ -60,6 +61,7 @@ function Button({
   iconOnly = false,
   fullWidth = false,
   pressed = false,
+  labelClassName,
   children,
   "aria-label": ariaLabel,
   ...props
@@ -96,7 +98,7 @@ function Button({
           {leftIcon}
         </span>
       ) : null}
-      {children ? <span data-slot="button-label">{loading ? loadingLabel : children}</span> : null}
+      {children ? <span data-slot="button-label" className={cn("inline-flex min-w-0 items-center gap-[inherit]", labelClassName)}>{loading ? loadingLabel : children}</span> : null}
       {!loading && rightIcon ? (
         <span data-icon="inline-end" data-slot="button-icon" className="inline-flex shrink-0 items-center justify-center">
           {rightIcon}

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.16"
+export const PACKAGE_LATEST_VERSION = "3.1.17"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/mock.ts

@@ -6,23 +6,26 @@ export const calendarSchedulerMock: ComponentDemoMock = {
 export function Example() {
   return (
     <CalendarScheduler
-      days={["Mon, Jul 6", "Tue, Jul 7"]}
+      variant="agenda"
+      density="compact"
+      title="Delivery schedule"
+      defaultSelectedEventId="1"
+      days={["Mon, Jul 6"]}
       events={[
-        { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-        { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
+        { id: "1", title: "Design review", description: "API review", date: "Mon, Jul 6", time: "10:00" },
+        { id: "2", title: "Release freeze", description: "Production gate", date: "Mon, Jul 6", time: "14:00" },
       ]}
     />
   )
 }`,
   cliCommand: "npx tembro add calendar-scheduler",
   highlights: [
-    "Compact scheduler timeline by day",
-    "Tone variants for different event priorities",
-    "Works with custom day labels",
+    "Board and agenda variants with compact or comfortable density",
+    "Rich metadata, badges, hidden and disabled event states",
+    "Controlled or uncontrolled selection and custom event rendering",
   ],
   scenarios: [
     { title: "Ops dashboard", description: "Show day tasks by lane without heavy calendar widgets." },
     { title: "Sprint board", description: "Keep event density low and readable." },
   ],
 }
-

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/showcase.tsx

@@ -7,13 +7,14 @@ const defaultDays = ["Mon, Jul 6", "Tue, Jul 7", "Wed, Jul 8"]
 
 export function CalendarSchedulerShowcase() {
   const [showWarning, setShowWarning] = React.useState(true)
+  const [variant, setVariant] = React.useState<"board" | "agenda">("agenda")
 
   const events = React.useMemo(
     () => ([
-      { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-      { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
-      { id: "3", title: "Daily standup", date: "Wed, Jul 8", time: "09:30", tone: "default" },
-      ...(showWarning ? [{ id: "4", title: "Priority follow-up", date: "Mon, Jul 6", time: "16:00", tone: "warning" }] : []),
+      { id: "1", title: "Design review", description: "Component API and release readiness", meta: "Product room", badge: <span className="rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-800">Review</span>, date: "Mon, Jul 6", time: "10:00", tone: "warning" },
+      { id: "2", title: "Release freeze", description: "Production deployment checkpoint", meta: "Platform team", badge: <span className="rounded bg-red-100 px-2 py-0.5 text-xs text-red-800">Required</span>, date: "Tue, Jul 7", time: "14:00", tone: "danger" },
+      { id: "3", title: "Daily standup", description: "Owners, blockers and delivery status", date: "Wed, Jul 8", time: "09:30", tone: "default" },
+      ...(showWarning ? [{ id: "4", title: "Priority follow-up", description: "Customer escalation review", date: "Mon, Jul 6", time: "16:00", tone: "warning" as const }] : []),
     ] as CalendarSchedulerEvent[]),
     [showWarning]
   )
@@ -21,6 +22,7 @@ export function CalendarSchedulerShowcase() {
   return (
     <div className="space-y-3">
       <div className="flex gap-2">
+        <button type="button" className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm" onClick={() => setVariant((value) => value === "agenda" ? "board" : "agenda")}>Use {variant === "agenda" ? "board" : "agenda"}</button>
         <button
           type="button"
           className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm"
@@ -29,7 +31,7 @@ export function CalendarSchedulerShowcase() {
           {showWarning ? "Hide warning" : "Show warning"}
         </button>
       </div>
-      <CalendarScheduler days={defaultDays} events={events} />
+      <CalendarScheduler title="Delivery schedule" description="Production agenda with rich event metadata and selection." variant={variant} density="compact" days={defaultDays} events={events} defaultSelectedEventId="1" />
     </div>
   )
 }

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.16",
+  "version": "3.1.17",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@3.1.16 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@3.1.17 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.16" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.17" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@3.1.16",
+          label: "tembro@3.1.17",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.16",
+  "version": "3.1.17",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [