tembro 2.0.0 → 2.0.2

package/packages/cli/vendor/src/components/layout/app-sidebar.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
+import { MenuIcon, XIcon } from "lucide-react"
 
+import { useIsMobile } from "@/hooks/use-is-mobile"
 import { Tooltip } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 
@@ -40,11 +42,28 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   secondaryActions?: AppSidebarNavItem[]
   footerSecondary?: React.ReactNode
   tooltipOnCollapsed?: boolean
+  responsive?: boolean
+  mobileBreakpoint?: number
+  mobileOpen?: boolean
+  defaultMobileOpen?: boolean
+  onMobileOpenChange?: (open: boolean) => void
+  mobileTitle?: React.ReactNode
+  mobileDescription?: React.ReactNode
+  mobileToggleLabel?: string
+  mobileToggleIcon?: React.ReactNode
+  showMobileToggle?: boolean
+  closeOnSelect?: boolean
+  mobileToggleClassName?: string
+  mobilePanelClassName?: string
+  mobileOverlayClassName?: string
+  renderMobileToggle?: (state: { open: boolean; setOpen: (open: boolean) => void }) => React.ReactNode
   onItemSelect?: (item: AppSidebarNavItem) => void
   renderItem?: (item: AppSidebarNavItem, state: { collapsed: boolean }) => React.ReactNode
   renderLink?: (props: React.ComponentProps<"a"> & { item: AppSidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
+const DEFAULT_APP_SIDEBAR_BREAKPOINT = 1024
+
 function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
   return item.items?.some((child) => !child.hidden) ?? false
 }
@@ -54,6 +73,11 @@ function isSidebarItemActive(item: AppSidebarNavItem): boolean {
   return item.items?.some((child) => isSidebarItemActive(child)) ?? false
 }
 
+function triggerSidebarItem(item: AppSidebarNavItem, onItemSelect?: (item: AppSidebarNavItem) => void) {
+  item.onSelect?.()
+  onItemSelect?.(item)
+}
+
 function SidebarLeafItem({
   item,
   collapsed,
@@ -111,8 +135,7 @@ function SidebarLeafItem({
                 event.preventDefault()
                 return
               }
-              item.onSelect?.()
-              onItemSelect?.(item)
+              triggerSidebarItem(item, onItemSelect)
             },
             children: content,
           })}
@@ -129,8 +152,7 @@ function SidebarLeafItem({
             event.preventDefault()
             return
           }
-          item.onSelect?.()
-          onItemSelect?.(item)
+          triggerSidebarItem(item, onItemSelect)
         }}
       >
         {content}
@@ -148,8 +170,7 @@ function SidebarLeafItem({
           if (item.disabled) return
           const href = item.href
           if (!href) return
-          item.onSelect?.()
-          onItemSelect?.(item)
+          triggerSidebarItem(item, onItemSelect)
           if (href.startsWith("http")) {
             window.open(href, "_blank", "noopener,noreferrer")
             return
@@ -168,8 +189,8 @@ function SidebarLeafItem({
       disabled={item.disabled}
       {...commonProps}
       onClick={() => {
-        item.onSelect?.()
-        onItemSelect?.(item)
+        if (item.disabled) return
+        triggerSidebarItem(item, onItemSelect)
       }}
     >
       {content}
@@ -250,7 +271,14 @@ function SidebarTree({
             ) : null}
             {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
             {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
-            {!collapsed && <span data-slot="app-sidebar-group-chevron" className="ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90">›</span>}
+            {!collapsed && (
+              <span
+                data-slot="app-sidebar-group-chevron"
+                className="ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90"
+              >
+                ›
+              </span>
+            )}
           </summary>
           <div data-slot="app-sidebar-group-content" className={cn("mt-1 space-y-1", !collapsed && "pl-3")}>
             <SidebarTree
@@ -289,8 +317,7 @@ function SidebarActionButton({
       disabled={item.disabled}
       onClick={() => {
         if (item.disabled) return
-        item.onSelect?.()
-        onItemSelect?.(item)
+        triggerSidebarItem(item, onItemSelect)
       }}
     >
       {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
@@ -311,9 +338,11 @@ function SidebarActionButton({
 function SidebarFooterAccount({
   account,
   collapsed,
+  onAfterSelect,
 }: {
   account: AppSidebarFooterAccount
   collapsed: boolean
+  onAfterSelect?: () => void
 }) {
   const body = (
     <button
@@ -325,6 +354,7 @@ function SidebarFooterAccount({
       )}
       onClick={() => {
         account.onSelect?.()
+        onAfterSelect?.()
         if (!account.href) return
         if (account.href.startsWith("http")) {
           window.open(account.href, "_blank", "noopener,noreferrer")
@@ -365,7 +395,7 @@ function SidebarFooterAccount({
   )
 }
 
-function AppSidebar({
+function SidebarSurface({
   className,
   header,
   footer,
@@ -376,25 +406,70 @@ function AppSidebar({
   footerAccount,
   secondaryActions = [],
   footerSecondary,
-  tooltipOnCollapsed = true,
+  tooltipOnCollapsed,
   onItemSelect,
   renderItem,
   renderLink,
   children,
+  mobile,
+  mobileTitle,
+  mobileDescription,
+  onRequestClose,
+  closeOnSelect = true,
   ...props
-}: AppSidebarProps) {
+}: Omit<AppSidebarProps, "responsive" | "mobileBreakpoint" | "mobileOpen" | "defaultMobileOpen" | "onMobileOpenChange" | "mobileToggleLabel" | "mobileToggleIcon" | "showMobileToggle" | "mobileToggleClassName" | "mobilePanelClassName" | "mobileOverlayClassName" | "renderMobileToggle"> & {
+  mobile?: boolean
+  onRequestClose?: () => void
+}) {
   const visibleItems = items.filter((item) => !item.hidden)
   const visibleRailItems = railItems.filter((item) => !item.hidden)
   const visibleSecondaryActions = secondaryActions.filter((item) => !item.hidden)
 
+  const handleSelect = React.useCallback((item: AppSidebarNavItem) => {
+    onItemSelect?.(item)
+    if (mobile && closeOnSelect) onRequestClose?.()
+  }, [closeOnSelect, mobile, onItemSelect, onRequestClose])
+
+  const showMobileHeader = mobile && (mobileTitle || mobileDescription || onRequestClose)
+
   return (
     <aside
       data-slot="app-sidebar"
       data-collapsed={collapsed || undefined}
+      data-mobile={mobile || undefined}
       className={cn("flex h-full min-h-0 flex-col overflow-hidden", className)}
       {...props}
     >
-      {header && <div data-slot="app-sidebar-header" className="shrink-0 border-b p-3">{header}</div>}
+      {(header || showMobileHeader) && (
+        <div data-slot="app-sidebar-header" className="shrink-0 border-b p-3">
+          <div className="flex items-start gap-3">
+            <div className="min-w-0 flex-1">
+              {header ?? null}
+              {showMobileHeader ? (
+                <div className={cn(header && "mt-3")}>
+                  {mobileTitle ? (
+                    <p className="text-sm font-semibold text-foreground">{mobileTitle}</p>
+                  ) : null}
+                  {mobileDescription ? (
+                    <p className="mt-1 text-xs leading-5 text-muted-foreground">{mobileDescription}</p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+            {mobile && onRequestClose ? (
+              <button
+                type="button"
+                aria-label="Close navigation"
+                data-slot="app-sidebar-mobile-close"
+                className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]"
+                onClick={onRequestClose}
+              >
+                <XIcon className="size-4" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+      )}
 
       <nav data-slot="app-sidebar-nav" className="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
         {children ??
@@ -417,7 +492,7 @@ function AppSidebar({
             items={visibleItems}
             collapsed={collapsed}
             depth={0}
-            onItemSelect={onItemSelect}
+            onItemSelect={handleSelect}
             renderLink={renderLink}
           />
         )}
@@ -434,7 +509,7 @@ function AppSidebar({
                       key={item.key}
                       item={item}
                       collapsed
-                      onItemSelect={onItemSelect}
+                      onItemSelect={handleSelect}
                     />
                   ))}
                 </div>
@@ -444,7 +519,9 @@ function AppSidebar({
           ) : null}
           {!collapsed && footerAccount ? (
             <div data-slot="app-sidebar-account-wrap" className="mb-3">
-              <SidebarFooterAccount account={footerAccount} collapsed={false} />
+              <SidebarFooterAccount account={footerAccount} collapsed={false} onAfterSelect={() => {
+                if (mobile && closeOnSelect) onRequestClose?.()
+              }} />
             </div>
           ) : null}
           {!collapsed && visibleSecondaryActions.length > 0 ? (
@@ -454,7 +531,7 @@ function AppSidebar({
                   key={item.key}
                   item={item}
                   collapsed={false}
-                  onItemSelect={onItemSelect}
+                  onItemSelect={handleSelect}
                 />
               ))}
             </div>
@@ -466,7 +543,13 @@ function AppSidebar({
           ) : null}
           {collapsed && footerAccount ? (
             <div data-slot="app-sidebar-account-wrap">
-              <SidebarFooterAccount account={footerAccount} collapsed />
+              <SidebarFooterAccount
+                account={footerAccount}
+                collapsed
+                onAfterSelect={() => {
+                  if (mobile && closeOnSelect) onRequestClose?.()
+                }}
+              />
             </div>
           ) : null}
           {!collapsed && footer}
@@ -475,7 +558,162 @@ function AppSidebar({
     </aside>
   )
 }
-
+
+function AppSidebar({
+  className,
+  header,
+  footer,
+  items = [],
+  collapsed = false,
+  collapsedRail,
+  railItems = [],
+  footerAccount,
+  secondaryActions = [],
+  footerSecondary,
+  tooltipOnCollapsed = true,
+  responsive = true,
+  mobileBreakpoint = DEFAULT_APP_SIDEBAR_BREAKPOINT,
+  mobileOpen: mobileOpenProp,
+  defaultMobileOpen = false,
+  onMobileOpenChange,
+  mobileTitle,
+  mobileDescription,
+  mobileToggleLabel = "Open navigation",
+  mobileToggleIcon,
+  showMobileToggle = true,
+  closeOnSelect = true,
+  mobileToggleClassName,
+  mobilePanelClassName,
+  mobileOverlayClassName,
+  renderMobileToggle,
+  onItemSelect,
+  renderItem,
+  renderLink,
+  children,
+  ...props
+}: AppSidebarProps) {
+  const isMobile = responsive ? useIsMobile(mobileBreakpoint) : false
+  const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = React.useState(defaultMobileOpen)
+  const mobileOpen = mobileOpenProp ?? uncontrolledMobileOpen
+
+  const setMobileOpen = React.useCallback((nextOpen: boolean) => {
+    if (mobileOpenProp == null) {
+      setUncontrolledMobileOpen(nextOpen)
+    }
+    onMobileOpenChange?.(nextOpen)
+  }, [mobileOpenProp, onMobileOpenChange])
+
+  React.useEffect(() => {
+    if (!isMobile && mobileOpen) {
+      setMobileOpen(false)
+    }
+  }, [isMobile, mobileOpen, setMobileOpen])
+
+  React.useEffect(() => {
+    if (!isMobile || !mobileOpen) return
+
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMobileOpen(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isMobile, mobileOpen, setMobileOpen])
+
+  const baseProps = {
+    className,
+    header,
+    footer,
+    items,
+    collapsed,
+    collapsedRail,
+    railItems,
+    footerAccount,
+    secondaryActions,
+    footerSecondary,
+    tooltipOnCollapsed,
+    closeOnSelect,
+    onItemSelect,
+    renderItem,
+    renderLink,
+    children,
+    ...props,
+  }
+
+  if (!responsive || !isMobile) {
+    return <SidebarSurface {...baseProps} />
+  }
+
+  const defaultTrigger = (
+    <button
+      type="button"
+      aria-label={mobileOpen ? "Close navigation" : mobileToggleLabel}
+      data-slot="app-sidebar-mobile-trigger"
+      data-state={mobileOpen ? "open" : "closed"}
+      className={cn(
+        "inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]",
+        mobileToggleClassName
+      )}
+      onClick={() => setMobileOpen(!mobileOpen)}
+    >
+      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]">
+        {mobileToggleIcon ?? <MenuIcon className="size-4" />}
+      </span>
+      <span>{mobileOpen ? "Close navigation" : mobileToggleLabel}</span>
+    </button>
+  )
+
+  return (
+    <>
+      {showMobileToggle
+        ? renderMobileToggle
+          ? renderMobileToggle({ open: mobileOpen, setOpen: setMobileOpen })
+          : defaultTrigger
+        : null}
+      <div data-slot="app-sidebar-mobile-root" className="relative z-40">
+        <button
+          type="button"
+          aria-label="Dismiss navigation"
+          data-slot="app-sidebar-mobile-overlay"
+          data-state={mobileOpen ? "open" : "closed"}
+          className={cn(
+            "fixed inset-0 z-40 bg-black/45 transition-opacity duration-200",
+            mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
+            mobileOverlayClassName
+          )}
+          onClick={() => setMobileOpen(false)}
+        />
+        <SidebarSurface
+          {...baseProps}
+          mobile
+          collapsed={false}
+          mobileTitle={mobileTitle}
+          mobileDescription={mobileDescription}
+          onRequestClose={() => setMobileOpen(false)}
+          data-state={mobileOpen ? "open" : "closed"}
+          role="dialog"
+          aria-modal="true"
+          aria-label={typeof mobileTitle === "string" ? mobileTitle : "Navigation"}
+          className={cn(
+            "fixed inset-y-0 left-0 z-50 w-[min(88vw,22rem)] max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out",
+            mobileOpen ? "translate-x-0" : "-translate-x-full",
+            mobilePanelClassName,
+            className
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
 /**
  * Canonical sidebar surface for new usage.
  */

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

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "2.0.0"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 7, 2026"
+export const PACKAGE_LATEST_VERSION = "2.0.2"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 8, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
 

package/packages/cli/vendor/src/showcase/premium/app-shell/showcase.tsx

@@ -69,9 +69,13 @@ export function AppShellShowcase({ mode }: ComponentDemoProps) {
 
         <div className="grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]">
           <AppSidebar
-            className={collapsed ? "hidden lg:block" : ""}
+            responsive
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open the shell menu first, then move through app routes without squeezing the main content."
             header={<div className="px-3 py-2 text-sm font-semibold">AZA Studio</div>}
             footer={<div className="aui-text-muted px-3 py-2 text-xs">Shell footer</div>}
+            className={collapsed ? "lg:w-[92px]" : ""}
+            collapsed={collapsed}
           >
             <SidebarNav items={navItems} />
           </AppSidebar>

package/packages/cli/vendor/src/showcase/premium/app-sidebar/showcase.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, SettingsIcon } from "lucide-react"
 
 import { AppSidebar, Badge, Button } from "@/index"
+import { cn } from "@/lib/utils"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -18,6 +19,7 @@ const panelClass = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[
 export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
   const [activeKey, setActiveKey] = React.useState("overview")
   const [collapsed, setCollapsed] = React.useState(mode === "playground")
+  const [previewSurface, setPreviewSurface] = React.useState<"desktop" | "mobile">("desktop")
 
   const items = React.useMemo(
     () =>
@@ -30,6 +32,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
   )
 
   const activeItem = navItems.find((item) => item.key === activeKey)
+  const mobilePreview = previewSurface === "mobile"
 
   return (
     <div className="space-y-5">
@@ -45,7 +48,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
           <div className="flex flex-wrap gap-2">
             <Badge variant="outline" className="rounded-full">Header slot</Badge>
             <Badge variant="outline" className="rounded-full">Badges</Badge>
-            <Badge variant="outline" className="rounded-full">Collapsed rail</Badge>
+            <Badge variant="outline" className="rounded-full">Mobile drawer</Badge>
           </div>
         </div>
       </section>
@@ -58,14 +61,25 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
           <Button size="sm" variant="outline" onClick={() => setActiveKey("reports")}>
             Jump to reports
           </Button>
+          <Button size="sm" variant={mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("mobile")}>
+            Mobile drawer
+          </Button>
+          <Button size="sm" variant={!mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("desktop")}>
+            Desktop rail
+          </Button>
         </div>
       ) : null}
 
       <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
-        <section className={panelClass}>
+        <section className={cn(panelClass, mobilePreview && "mx-auto w-full max-w-[420px]")}>
           <AppSidebar
             collapsed={collapsed}
             items={items}
+            responsive
+            mobileBreakpoint={mobilePreview ? 10000 : 0}
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open routes, check badges, and move between sections from one compact drawer."
+            mobileToggleLabel="Open workspace menu"
             header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
             footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
             className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
@@ -81,8 +95,8 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
 
           <div className="mt-6 grid gap-3 sm:grid-cols-3">
             <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Mode</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{collapsed ? "Collapsed" : "Expanded"}</p>
+              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Shell</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{mobilePreview ? "Mobile drawer" : (collapsed ? "Collapsed" : "Expanded")}</p>
             </div>
             <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
               <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Visible items</p>

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

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

package/registry.json

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