tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -1,165 +1,23 @@
-import * as React from "react"
-import { CheckIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
-
 import {
   Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  type SelectOption,
+  type SelectProps,
 } from "@/components/ui/select"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type SimpleSelectOption = {
-  label: React.ReactNode
-  value: string
-  disabled?: boolean
-  description?: React.ReactNode
-  keywords?: string[]
-}
-
-export type SimpleSelectProps = Omit<
-  React.ComponentProps<typeof Select>,
-  "value" | "onValueChange"
-> & {
-  value?: string
-  onValueChange?: (value: string | undefined) => void
-  options: SimpleSelectOption[]
-  placeholder?: string
-  searchPlaceholder?: string
-  emptyLabel?: React.ReactNode
-  clearLabel?: string
-  size?: "sm" | "default" | "lg"
-  clearable?: boolean
-  searchable?: boolean
-  loading?: boolean
-  loadingLabel?: React.ReactNode
-  disabled?: boolean
-  triggerClassName?: string
-  contentClassName?: string
-  itemClassName?: string
-  searchClassName?: string
-  renderOption?: (option: SimpleSelectOption, state: { selected: boolean }) => React.ReactNode
-  invalid?: boolean
-}
-
-function optionMatchesSearch(option: SimpleSelectOption, search: string) {
-  const normalized = search.trim().toLowerCase()
-  if (!normalized) return true
-
-  const labelText = typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value
-  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
-  return haystack.includes(normalized)
-}
-
-function SimpleSelect({
-  value,
-  onValueChange,
-  options,
-  placeholder = "Select",
-  searchPlaceholder = "Search options...",
-  emptyLabel = "No options found",
-  clearLabel = "Clear selection",
-  size = "default",
-  clearable = false,
-  searchable = false,
-  loading = false,
-  loadingLabel = "Loading options...",
-  disabled = false,
-  triggerClassName,
-  contentClassName,
-  itemClassName,
-  searchClassName,
-  renderOption,
-  invalid,
-  ...props
-}: SimpleSelectProps) {
-  const [search, setSearch] = React.useState("")
-  const selectedOption = options.find((option) => option.value === value)
-  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
-
-  return (
-    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} disabled={disabled || loading} {...props}>
-      <SelectTrigger
-        size={size}
-        aria-invalid={invalid || undefined}
-        className={cn(
-          "w-full",
-          triggerClassName
-        )}
-      >
-        <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
-        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
-        {clearable && value && !disabled && !loading ? (
-          <button
-            type="button"
-            aria-label={clearLabel}
-            className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            onClick={(event) => {
-              event.preventDefault()
-              stopInteractivePropagation(event)
-              onValueChange?.(undefined)
-            }}
-            onMouseDown={stopInteractivePropagation}
-            onDoubleClick={stopInteractivePropagation}
-          >
-            <XIcon className="size-3.5" />
-          </button>
-        ) : null}
-      </SelectTrigger>
-      <SelectContent
-        className={cn(
-          "w-(--anchor-width)",
-          contentClassName
-        )}
-      >
-        {searchable ? (
-          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm">
-            <SearchIcon className="size-4 text-muted-foreground" />
-            <input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={searchPlaceholder}
-              className={cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", searchClassName)}
-            />
-          </div>
-        ) : null}
-
-        {loading ? (
-          <div data-slot="select-state" className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">
-            <LoaderCircleIcon className="size-4 animate-spin" />
-            {loadingLabel}
-          </div>
-        ) : filteredOptions.length === 0 ? (
-          <div data-slot="select-state" className="rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
-        ) : (
-          filteredOptions.map((option) => {
-            const selected = option.value === value
-            return (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-                className={cn("rounded-[var(--radius-md)]", itemClassName)}
-              >
-                {renderOption ? (
-                  renderOption(option, { selected })
-                ) : (
-                  <span className="flex min-w-0 flex-1 flex-col">
-                    <span className="flex min-w-0 items-center gap-2">
-                      <span className="truncate">{option.label}</span>
-                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
-                    </span>
-                    {option.description && <span className="truncate text-xs text-muted-foreground">{option.description}</span>}
-                  </span>
-                )}
-              </SelectItem>
-            )
-          })
-        )}
-      </SelectContent>
-    </Select>
-  )
-}
-
-export { SimpleSelect }
+
+export type SimpleSelectOption = SelectOption
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+export type SimpleSelectProps = Omit<SelectProps, "children"> & {
+  options: SimpleSelectOption[]
+}
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+function SimpleSelect(props: SimpleSelectProps) {
+  return <Select {...props} />
+}
+
+export { SimpleSelect }

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

@@ -36,6 +36,9 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   footer?: React.ReactNode
   items?: AppSidebarNavItem[]
   collapsed?: boolean
+  width?: React.CSSProperties["width"]
+  collapsedWidth?: React.CSSProperties["width"]
+  mobileWidth?: React.CSSProperties["width"]
   collapsedRail?: React.ReactNode
   railItems?: AppSidebarNavItem[]
   footerAccount?: AppSidebarFooterAccount
@@ -63,6 +66,23 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
 }
 
 const DEFAULT_APP_SIDEBAR_BREAKPOINT = 1024
+const DEFAULT_SIDEBAR_WIDTH = "18rem"
+const DEFAULT_COLLAPSED_SIDEBAR_WIDTH = "4.75rem"
+const DEFAULT_MOBILE_SIDEBAR_WIDTH = "min(88vw, 22rem)"
+
+function getSidebarInteractiveClassName({
+  active,
+  disabled,
+}: {
+  active?: boolean
+  disabled?: boolean
+}) {
+  return cn(
+    "border-[color:transparent] text-foreground/80 hover:border-[color:var(--aui-divider)] hover:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_4%)] hover:text-foreground focus-visible:border-[color:var(--aui-control-border-strong,var(--border))] focus-visible:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_6%)] focus-visible:text-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_86%)]",
+    active && "border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_91%)] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",
+    disabled && "hover:border-transparent hover:bg-transparent hover:text-foreground/80"
+  )
+}
 
 function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
   return item.items?.some((child) => !child.hidden) ?? false
@@ -101,6 +121,7 @@ function SidebarLeafItem({
     "data-depth": String(depth),
     className: cn(
       "flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 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",
+      getSidebarInteractiveClassName({ active: item.active, disabled: item.disabled }),
       collapsed && "justify-center px-2"
     ),
   }
@@ -257,6 +278,7 @@ function SidebarTree({
             data-slot="app-sidebar-group-trigger"
             className={cn(
               "flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]",
+              getSidebarInteractiveClassName({ active }),
               collapsed ? "justify-center px-2" : "px-2.5"
             )}
           >
@@ -312,6 +334,7 @@ function SidebarActionButton({
       data-disabled={item.disabled || undefined}
       className={cn(
         "flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 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",
+        getSidebarInteractiveClassName({ active: item.active, disabled: item.disabled }),
         collapsed && "justify-center px-2"
       )}
       disabled={item.disabled}
@@ -350,6 +373,7 @@ function SidebarFooterAccount({
       data-slot="app-sidebar-account"
       className={cn(
         "flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]",
+        getSidebarInteractiveClassName({}),
         collapsed ? "justify-center px-2 py-2.5" : "px-3 py-2.5"
       )}
       onClick={() => {
@@ -397,10 +421,13 @@ function SidebarFooterAccount({
 
 function SidebarSurface({
   className,
+  style,
   header,
   footer,
   items = [],
   collapsed = false,
+  width = DEFAULT_SIDEBAR_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_SIDEBAR_WIDTH,
   collapsedRail,
   railItems = [],
   footerAccount,
@@ -438,6 +465,11 @@ function SidebarSurface({
       data-collapsed={collapsed || undefined}
       data-mobile={mobile || undefined}
       className={cn("flex h-full min-h-0 flex-col overflow-hidden", className)}
+      style={{
+        width: collapsed ? collapsedWidth : width,
+        minWidth: collapsed ? collapsedWidth : width,
+        ...style,
+      }}
       {...props}
     >
       {(header || showMobileHeader) && (
@@ -565,6 +597,9 @@ function AppSidebar({
   footer,
   items = [],
   collapsed = false,
+  width = DEFAULT_SIDEBAR_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_SIDEBAR_WIDTH,
+  mobileWidth = DEFAULT_MOBILE_SIDEBAR_WIDTH,
   collapsedRail,
   railItems = [],
   footerAccount,
@@ -634,6 +669,8 @@ function AppSidebar({
     footer,
     items,
     collapsed,
+    width,
+    collapsedWidth,
     collapsedRail,
     railItems,
     footerAccount,
@@ -703,11 +740,15 @@ function AppSidebar({
           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",
+            "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",
             mobileOpen ? "translate-x-0" : "-translate-x-full",
             mobilePanelClassName,
             className
           )}
+          style={{
+            width: mobileWidth,
+            minWidth: mobileWidth,
+          }}
         />
       </div>
     </>

package/packages/cli/vendor/src/components/layout/breadcrumbs.tsx

@@ -18,6 +18,7 @@ export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
   maxItems?: number
   collapseLabel?: React.ReactNode
   separator?: React.ReactNode
+  wrap?: boolean
   renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
@@ -44,6 +45,7 @@ function Breadcrumbs({
   maxItems,
   collapseLabel = "…",
   separator = <ChevronRightIcon className="size-3.5" />,
+  wrap = false,
   renderLink,
   ...props
 }: BreadcrumbsProps) {
@@ -54,11 +56,15 @@ function Breadcrumbs({
 
   return (
     <nav
-      data-slot="breadcrumbs"
-      aria-label="Breadcrumb"
-      className={cn("flex min-w-0 items-center gap-1 text-sm text-muted-foreground", className)}
-      {...props}
-    >
+      data-slot="breadcrumbs"
+      aria-label="Breadcrumb"
+      className={cn(
+        "flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground",
+        wrap ? "flex-wrap" : "whitespace-nowrap",
+        className
+      )}
+      {...props}
+    >
       {resolvedItems.map((item, index) => {
         const isCollapsed = item.key === "__collapsed__"
         const isLast = index === resolvedItems.length - 1
@@ -76,7 +82,7 @@ function Breadcrumbs({
                 item,
                 href: item.href,
                 "data-slot": "breadcrumbs-link",
-                className: "truncate transition-colors hover:text-foreground",
+                className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
                 onClick: () => item.onSelect?.(),
                 children: (
                   <span className="inline-flex min-w-0 items-center gap-1.5">
@@ -88,7 +94,7 @@ function Breadcrumbs({
                 <a
                   href={item.href}
                   data-slot="breadcrumbs-link"
-                  className="truncate transition-colors hover:text-foreground"
+                  className="truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground"
                   onClick={() => item.onSelect?.()}
                 >
                   <span className="inline-flex min-w-0 items-center gap-1.5">
@@ -101,7 +107,10 @@ function Breadcrumbs({
               <span
                 data-slot="breadcrumbs-current"
                 aria-current={isCurrent ? (item.currentLabel ?? "page") : undefined}
-                className={cn("inline-flex min-w-0 items-center gap-1.5 truncate", isCurrent && "font-medium text-foreground")}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5",
+                  isCurrent && "bg-accent/45 font-medium text-foreground"
+                )}
               >
                 {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
                 <span className="truncate">{item.label}</span>

package/packages/cli/vendor/src/components/layout/stat-card.tsx

@@ -17,16 +17,23 @@ export type StatCardTrend = {
   label?: React.ReactNode
 }
 
-export type StatCardProps = React.ComponentProps<typeof Card> & {
+export type StatCardProps = React.ComponentProps<typeof Card> & {
   title?: React.ReactNode
   value?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-  action?: React.ReactNode
-  trend?: StatCardTrend
-  footer?: React.ReactNode
-  helperText?: React.ReactNode
-  loading?: boolean
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  trend?: StatCardTrend
+  footer?: React.ReactNode
+  helperText?: React.ReactNode
+  comparisonItems?: Array<{
+    label: React.ReactNode
+    value: React.ReactNode
+    change?: React.ReactNode
+    trend?: StatCardTrend["tone"] | "neutral"
+  }>
+  comparisonColumns?: 2 | 3 | 4
+  loading?: boolean
   valuePrefix?: React.ReactNode
   valueSuffix?: React.ReactNode
   contentClassName?: string
@@ -59,11 +66,13 @@ function StatCard({
   value,
   description,
   icon,
-  action,
-  trend,
-  footer,
-  helperText,
-  loading = false,
+  action,
+  trend,
+  footer,
+  helperText,
+  comparisonItems,
+  comparisonColumns = 2,
+  loading = false,
   valuePrefix,
   valueSuffix,
   contentClassName,
@@ -99,22 +108,53 @@ function StatCard({
             </div>
           </CardHeader>
 
-          {(description || trend || helperText || footer) && (
-            <CardContent className={cn("space-y-2", contentClassName)}>
-              {(description || trend) && (
-                <div className="flex flex-wrap items-center gap-2 text-sm">
+          {(description || trend || helperText || footer || comparisonItems?.length) && (
+            <CardContent className={cn("space-y-2", contentClassName)}>
+              {(description || trend) && (
+                <div className="flex flex-wrap items-center gap-2 text-sm">
                   {trend && (
                     <Badge variant="ghost" tone={trend.tone === "muted" || trend.tone === "default" ? "neutral" : trend.tone} size="sm" className={cn("font-medium", trendClassName[trend.tone ?? "default"])}>
                       {trend.value}
                     </Badge>
                   )}
                   {trend?.label ? <span className="text-muted-foreground">{trend.label}</span> : null}
-                  {description && <span className="text-muted-foreground">{description}</span>}
-                </div>
-              )}
-              {helperText ? <p className="text-xs leading-5 text-muted-foreground">{helperText}</p> : null}
-              {footer}
-            </CardContent>
+                  {description && <span className="text-muted-foreground">{description}</span>}
+                </div>
+              )}
+              {comparisonItems?.length ? (
+                <div
+                  data-slot="stat-card-comparison"
+                  className={cn(
+                    "grid gap-3 pt-1",
+                    comparisonColumns === 2 && "grid-cols-2",
+                    comparisonColumns === 3 && "grid-cols-3",
+                    comparisonColumns === 4 && "grid-cols-2 sm:grid-cols-4"
+                  )}
+                >
+                  {comparisonItems.map((item, index) => (
+                    <div key={index} className="min-w-0 space-y-1">
+                      <p className="truncate text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                        {item.label}
+                      </p>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-base font-semibold text-foreground">{item.value}</span>
+                        {item.change ? (
+                          <Badge
+                            variant="ghost"
+                            tone={item.trend === "neutral" ? "neutral" : item.trend === "default" ? "neutral" : item.trend}
+                            size="sm"
+                          >
+                            {item.change}
+                          </Badge>
+                        ) : null}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+              {helperText ? <p className="text-xs leading-5 text-muted-foreground">{helperText}</p> : null}
+              {footer}
+            </CardContent>
           )}
         </>
       )}

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

@@ -10,10 +10,11 @@ export type CalendarSchedulerEvent = {
   tone?: "default" | "success" | "warning" | "danger"
 }
 
-export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
-  events: CalendarSchedulerEvent[]
-  days?: string[]
-}
+export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
+  events: CalendarSchedulerEvent[]
+  days?: string[]
+  empty?: React.ReactNode
+}
 
 const toneClassName = {
   default: "border-border bg-muted",
@@ -22,24 +23,33 @@ const toneClassName = {
   danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
 }
 
-function CalendarScheduler({ events, days, className, ...props }: CalendarSchedulerProps) {
-  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
-
-  return (
-    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
-      {visibleDays.map((day) => (
-        <section key={day} className="rounded-xl border bg-card p-3">
-          <div className="mb-2 text-sm font-semibold">{day}</div>
-          <div className="grid gap-2">
-            {events.filter((event) => event.date === day).map((event) => (
-              <div key={event.id} className={cn("rounded-md border px-3 py-2 text-sm", toneClassName[event.tone ?? "default"])}>
-                <div className="font-medium">{event.title}</div>
-                {event.time && <div className="text-xs opacity-70">{event.time}</div>}
-              </div>
-            ))}
-          </div>
-        </section>
-      ))}
+function CalendarScheduler({ events, days, empty = "No events scheduled.", className, ...props }: CalendarSchedulerProps) {
+  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
+
+  return (
+    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
+      {visibleDays.map((day) => (
+        <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))]">
+          <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">{events.filter((event) => event.date === day).length} items</div>
+          </div>
+          <div className="grid gap-2">
+            {events.filter((event) => event.date === day).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>
+            ) : (
+              events.filter((event) => event.date === day).map((event) => (
+                <div key={event.id} className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-sm shadow-sm", toneClassName[event.tone ?? "default"])}>
+                  <div className="font-medium">{event.title}</div>
+                  {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+      ))}
     </div>
   )
 }