tembro 3.1.6 → 3.1.8

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

@@ -95,6 +95,31 @@ function getSidebarInteractiveClassName({
     disabled && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)]"
   )
 }
+
+function getSidebarItemLayoutClassName({
+  collapsed,
+  depth,
+  itemSize,
+  activeIndicator,
+}: {
+  collapsed: boolean
+  depth: number
+  itemSize: NonNullable<AppSidebarProps["itemSize"]>
+  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
+}) {
+  return cn(
+    "relative w-full rounded-[min(var(--radius-xl),14px)] py-2",
+    itemSize === "sm" && "min-h-8 text-xs",
+    itemSize === "md" && "min-h-9 text-sm",
+    itemSize === "lg" && "min-h-11 text-sm",
+    collapsed ? "justify-center px-2" : "px-2.5",
+    !collapsed && depth > 0 && "pl-3",
+    activeIndicator === "bar" &&
+      "data-[active=true]:pl-4 before:pointer-events-none before:absolute before:left-1.5 before:top-1/2 before:hidden before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-full before:bg-[color:var(--sidebar-primary)] data-[active=true]:before:block",
+    activeIndicator === "pill" && "rounded-full",
+    activeIndicator === "none" && "data-[active=true]:shadow-none"
+  )
+}
 
 function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
   return item.items?.some((child) => !child.hidden) ?? false
@@ -138,11 +163,11 @@ function SidebarLeafItem({
     "data-size": itemSize,
     "data-active-indicator": activeIndicator,
     className: cn(
-      "flex items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "flex items-center gap-2 border border-transparent font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       getSidebarInteractiveClassName({ active: item.active, disabled: item.disabled }),
-      collapsed && "justify-center px-2"
+      getSidebarItemLayoutClassName({ collapsed, depth, itemSize, activeIndicator })
     ),
-  }
+  }
 
   const content = (
     <>
@@ -312,11 +337,11 @@ function SidebarTree({
             data-active={active || undefined}
             data-active-indicator={activeIndicator}
             className={cn(
-              "flex list-none items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]",
+              "flex list-none items-center gap-2 border border-transparent font-medium outline-none transition-[background-color,border-color,color,box-shadow]",
               getSidebarInteractiveClassName({ active }),
-              collapsed ? "justify-center px-2" : "px-2.5"
+              getSidebarItemLayoutClassName({ collapsed, depth, itemSize, activeIndicator })
             )}
-          >
+          >
             {item.icon ? (
               collapsed ? (
                 <Tooltip content={item.tooltip ?? item.label} side="right">
@@ -535,7 +560,7 @@ function SidebarSurface({
                 type="button"
                 aria-label={mobileCloseLabel}
                 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)]"
+                className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg-alt,var(--muted))] text-[color:var(--aui-page-foreground,var(--foreground))] transition hover:bg-[color:var(--aui-control-bg,var(--muted))]"
                 onClick={onRequestClose}
               >
                 <XIcon className="size-4" />
@@ -756,12 +781,12 @@ function Sidebar({
       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)]",
+        "inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] px-3 text-sm font-medium text-[color:var(--aui-page-foreground,var(--foreground))] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt,var(--muted))]",
         mobileToggleClassName
       )}
       onClick={() => setMobileOpen(!mobileOpen)}
     >
-      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]">
+      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt,var(--muted))]">
         {mobileToggleIcon ?? <MenuIcon className="size-4" />}
       </span>
       <span>{mobileOpen ? mobileCloseLabel : mobileToggleLabel}</span>
@@ -783,11 +808,15 @@ function Sidebar({
           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)}
-        />
+            mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
+            mobileOverlayClassName
+          )}
+          style={{
+            opacity: mobileOpen ? 1 : 0,
+            pointerEvents: mobileOpen ? "auto" : "none",
+          }}
+          onClick={() => setMobileOpen(false)}
+        />
         <SidebarSurface
           {...baseProps}
           mobile
@@ -800,16 +829,17 @@ function Sidebar({
           aria-modal="true"
           aria-label={typeof mobileTitle === "string" ? mobileTitle : "Navigation"}
           className={cn(
-            "fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out",
+            "fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] shadow-2xl transition-transform duration-200 ease-out",
             mobileOpen ? "translate-x-0" : "-translate-x-full",
             mobilePanelClassName,
             className
           )}
-          style={{
-            width: mobileWidth,
-            minWidth: mobileWidth,
-          }}
-        />
+          style={{
+            width: mobileWidth,
+            minWidth: mobileWidth,
+            translate: mobileOpen ? "0 0" : "-100% 0",
+          }}
+        />
       </div>
     </>
   )

package/packages/cli/vendor/src/components/theme-provider.tsx

@@ -13,7 +13,7 @@ type ThemeContextValue = {
   toggleTheme: () => void
 }
 
-const THEME_STORAGE_KEY = "azamat-ui-theme"
+const THEME_STORAGE_KEY = "tembro-theme"
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null)
 

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

@@ -16,6 +16,7 @@ export type DialogPopupProps = DialogPrimitive.Popup.Props & {
   surface?: "default" | "plain"
 }
 export type DialogHeaderProps = React.ComponentProps<"div">
+export type DialogBodyProps = React.ComponentProps<"div">
 export type DialogFooterProps = React.ComponentProps<"div"> & {
   showCloseButton?: boolean
 }
@@ -72,7 +73,7 @@ function DialogContent({
         role="dialog"
         aria-modal="true"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid max-h-[min(92vh,calc(100dvh-2rem))] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto overscroll-contain duration-100 outline-none data-[surface=plain]:overflow-visible data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_minmax(0,1fr)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid max-h-[min(92vh,calc(100dvh-2rem))] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 grid-rows-[auto_minmax(0,1fr)_auto] gap-5 overflow-hidden overscroll-contain duration-100 outline-none data-[surface=plain]:overflow-visible data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -102,7 +103,17 @@ function DialogHeader({ className, ...props }: DialogHeaderProps) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col", className)}
+      className={cn("min-w-0 shrink-0 pr-10", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogBody({ className, ...props }: DialogBodyProps) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn("min-h-0 overflow-y-auto overscroll-contain", className)}
       {...props}
     />
   )
@@ -118,7 +129,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex shrink-0 flex-wrap items-center justify-end gap-2 [&_[data-slot=button]]:inline-flex [&_[data-slot=button]]:flex-row [&_[data-slot=button]]:items-center [&_[data-slot=button]]:justify-center [&_[data-slot=button]]:gap-2",
         className
       )}
       {...props}
@@ -158,6 +169,7 @@ function DialogDescription({
 
 export {
   Dialog,
+  DialogBody,
   DialogClose,
   DialogContent,
   DialogDescription,

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

@@ -16,7 +16,9 @@ export type SelectContentProps = SelectPrimitive.Popup.Props &
     "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
   >
 export type SelectLabelProps = SelectPrimitive.GroupLabel.Props
-export type SelectItemProps = SelectPrimitive.Item.Props
+export type SelectItemProps = SelectPrimitive.Item.Props & {
+  showIndicator?: boolean
+}
 export type SelectSeparatorProps = SelectPrimitive.Separator.Props
 export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>
 export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>
@@ -57,6 +59,7 @@ export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onVa
   itemClassName?: string
   searchClassName?: string
   renderOption?: (option: SelectOption, state: { selected: boolean }) => React.ReactNode
+  showSelectedIndicator?: boolean
   invalid?: boolean
   onSearchChange?: (value: string) => void
 }
@@ -98,6 +101,7 @@ function Select({
   itemClassName,
   searchClassName,
   renderOption,
+  showSelectedIndicator = true,
   invalid,
   children,
   onOpenChange,
@@ -239,6 +243,7 @@ function Select({
                     key={option.value}
                     value={option.value}
                     disabled={option.disabled}
+                    showIndicator={showSelectedIndicator}
                     className={cn("rounded-[var(--radius-md)]", itemClassName)}
                   >
                     {renderOption ? (
@@ -296,6 +301,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "flex w-full min-w-0 items-center justify-between gap-2 whitespace-nowrap outline-none select-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "rounded-[var(--radius-lg)] border border-[color:var(--aui-input-border,var(--border))] bg-[color:var(--aui-input-bg,var(--background))] px-3 text-[color:var(--aui-input-fg,var(--foreground))] shadow-sm transition-[border-color,box-shadow,background-color] hover:border-[color:var(--aui-input-border-hover,var(--border))] focus-visible:border-[color:var(--aui-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--aui-ring,var(--ring)),transparent_82%)] disabled:opacity-60 data-[size=sm]:h-9 data-[size=default]:min-h-10 data-[size=lg]:min-h-11 data-[size=lg]:px-4 aria-[invalid=true]:border-[color:var(--aui-danger,var(--destructive))] aria-[invalid=true]:shadow-[0_0_0_3px_color-mix(in_oklch,var(--aui-danger,var(--destructive)),transparent_84%)]",
         className
       )}
       {...props}
@@ -336,7 +342,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative isolate max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
+            "relative isolate max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-xl)] border border-[color:var(--aui-surface-border,var(--border))] bg-[color:var(--aui-popover-bg,var(--popover))] p-1 text-[color:var(--aui-popover-fg,var(--popover-foreground))] shadow-xl",
             className
           )}
           {...props}
@@ -360,12 +366,12 @@ function SelectLabel({ className, ...props }: SelectLabelProps) {
   )
 }
 
-function SelectItem({ className, children, ...props }: SelectItemProps) {
+function SelectItem({ className, children, showIndicator = true, ...props }: SelectItemProps) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex w-full cursor-default items-center gap-2 px-2.5 py-2 pr-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-highlighted:bg-[color:var(--aui-control-bg,var(--muted))] data-highlighted:text-[color:var(--aui-control-fg,var(--foreground))] data-selected:bg-[color:var(--aui-control-bg,var(--muted))] data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
@@ -373,11 +379,13 @@ function SelectItem({ className, children, ...props }: SelectItemProps) {
       <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
         {children}
       </SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
-      >
-        <CheckIcon className="pointer-events-none" />
-      </SelectPrimitive.ItemIndicator>
+      {showIndicator ? (
+        <SelectPrimitive.ItemIndicator
+          render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+        >
+          <CheckIcon className="pointer-events-none size-4" />
+        </SelectPrimitive.ItemIndicator>
+      ) : null}
     </SelectPrimitive.Item>
   )
 }