tembro 2.0.4 → 2.0.6

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

@@ -7,9 +7,21 @@ export type CollapseProps = React.ComponentProps<"details"> & {
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  variant?: "default" | "soft" | "ghost"
+  size?: "sm" | "md" | "lg"
 }
 
-function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, children, ...props }: CollapseProps) {
+function Collapse({
+  open,
+  defaultOpen,
+  onOpenChange,
+  onToggle,
+  className,
+  children,
+  variant = "default",
+  size = "md",
+  ...props
+}: CollapseProps) {
   const isControlled = open !== undefined
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
   const currentOpen = isControlled ? open : internalOpen
@@ -17,8 +29,10 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
   return (
     <details
       data-slot="collapse"
+      data-variant={variant}
+      data-size={size}
       className={cn(
-        "group rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))] transition-[background-color,border-color,box-shadow] open:border-[color:var(--aui-control-hover-border,var(--ring))]",
+        "group overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] open:border-[color:var(--aui-control-hover-border,var(--ring))] data-[variant=soft]:bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] data-[variant=soft]:shadow-none data-[variant=ghost]:border-transparent data-[variant=ghost]:bg-transparent data-[variant=ghost]:shadow-none",
         className
       )}
       onToggle={(event) => {
@@ -26,6 +40,8 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
         const nextOpen = event.currentTarget.open
         if (!isControlled) {
           setInternalOpen(nextOpen)
+        } else if (nextOpen !== currentOpen) {
+          event.currentTarget.open = currentOpen
         }
         onOpenChange?.(nextOpen)
       }}
@@ -40,24 +56,51 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
 export type CollapseTriggerProps = React.ComponentProps<"summary"> & {
   icon?: React.ReactNode
   hideIcon?: boolean
+  size?: "sm" | "md" | "lg"
+  inset?: boolean
+  indicatorPosition?: "start" | "end"
 }
 
-function CollapseTrigger({ icon, hideIcon = false, className, children, ...props }: CollapseTriggerProps) {
+function CollapseTrigger({
+  icon,
+  hideIcon = false,
+  size = "md",
+  inset = false,
+  indicatorPosition = "end",
+  className,
+  children,
+  onClick,
+  ...props
+}: CollapseTriggerProps) {
+  const indicator = !hideIcon ? (
+    <span className="shrink-0 rounded-md text-muted-foreground transition-[color,transform] group-open:rotate-180 group-open:text-foreground">
+      {icon ?? <ChevronDownIcon className="size-4" />}
+    </span>
+  ) : null
+
   return (
     <summary
       data-slot="collapse-trigger"
+      data-size={size}
+      data-inset={inset || undefined}
+      data-indicator-position={indicatorPosition}
       className={cn(
-        "flex cursor-pointer list-none items-center justify-between gap-3 rounded-[calc(var(--aui-card-radius,var(--radius-xl))-1px)] px-4 py-3 text-sm font-semibold outline-none transition-[background-color,color,box-shadow] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] group-open:text-foreground [&::-webkit-details-marker]:hidden",
+        "rounded-[calc(var(--aui-card-radius,var(--radius-xl))-1px)] group-open:rounded-b-none flex cursor-pointer list-none items-start gap-3 px-4 text-sm font-semibold outline-none transition-[background-color,color,box-shadow,border-radius] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] group-open:text-foreground data-[indicator-position=end]:justify-between data-[indicator-position=start]:justify-start data-[size=sm]:py-2.5 data-[size=md]:py-3.5 data-[size=lg]:py-4.5 data-[inset=true]:px-5 [&::-webkit-details-marker]:hidden",
+        props["aria-disabled"] && "cursor-not-allowed opacity-75 hover:bg-transparent",
         className
       )}
+      onClick={(event) => {
+        if (props["aria-disabled"]) {
+          event.preventDefault()
+          return
+        }
+        onClick?.(event)
+      }}
       {...props}
     >
+      {indicatorPosition === "start" ? indicator : null}
       <span className="min-w-0 flex-1">{children}</span>
-      {!hideIcon && (
-        <span className="shrink-0 rounded-md text-muted-foreground transition-[color,transform] group-open:rotate-180 group-open:text-foreground">
-          {icon ?? <ChevronDownIcon className="size-4" />}
-        </span>
-      )}
+      {indicatorPosition === "end" ? indicator : null}
     </summary>
   )
 }
@@ -67,7 +110,7 @@ function CollapseContent({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="collapse-content"
       className={cn(
-        "border-t border-[color:var(--aui-card-border,var(--border))] px-4 py-3 text-sm leading-6 text-muted-foreground",
+        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_70%)] px-4 py-3.5 text-sm leading-6 text-muted-foreground",
         className
       )}
       {...props}
@@ -80,7 +123,14 @@ export type CollapseItem = {
   title: React.ReactNode
   content: React.ReactNode
   description?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
   disabled?: boolean
+  disabledReason?: React.ReactNode
+  icon?: React.ReactNode
+  indicatorPosition?: CollapseTriggerProps["indicatorPosition"]
+  triggerClassName?: string
+  contentClassName?: string
 }
 
 export type CollapseGroupProps = React.ComponentProps<"div"> & {
@@ -89,9 +139,21 @@ export type CollapseGroupProps = React.ComponentProps<"div"> & {
   value?: string | string[]
   defaultValue?: string | string[]
   onValueChange?: (value: string | string[]) => void
+  variant?: CollapseProps["variant"]
+  size?: CollapseTriggerProps["size"]
 }
 
-function CollapseGroup({ items, type = "multiple", value, defaultValue, onValueChange, className, ...props }: CollapseGroupProps) {
+function CollapseGroup({
+  items,
+  type = "multiple",
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "default",
+  size = "md",
+  className,
+  ...props
+}: CollapseGroupProps) {
   const initialValue = React.useMemo(() => {
     if (value !== undefined) return value
     if (defaultValue !== undefined) return defaultValue
@@ -119,16 +181,35 @@ function CollapseGroup({ items, type = "multiple", value, defaultValue, onValueC
         <Collapse
           key={item.key}
           open={isOpen(item.key)}
-          onOpenChange={(open) => updateValue(item.key, open)}
+          onOpenChange={(open) => {
+            if (item.disabled) return
+            updateValue(item.key, open)
+          }}
+          variant={variant}
+          size={size}
           className={cn(item.disabled && "pointer-events-none opacity-60")}
         >
-          <CollapseTrigger>
-            <span className="grid gap-0.5">
-              <span>{item.title}</span>
+          <CollapseTrigger
+            size={size}
+            icon={item.icon}
+            indicatorPosition={item.indicatorPosition}
+            className={item.triggerClassName}
+            aria-disabled={item.disabled || undefined}
+            title={typeof item.disabledReason === "string" ? item.disabledReason : undefined}
+          >
+            <span className="grid min-w-0 gap-0.5">
+              <span className="flex min-w-0 items-center gap-2">
+                <span className="truncate">{item.title}</span>
+                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
+                {item.meta ? <span className="ml-auto shrink-0 text-[11px] font-medium text-muted-foreground">{item.meta}</span> : null}
+              </span>
               {item.description && <span className="text-xs font-normal text-muted-foreground">{item.description}</span>}
+              {item.disabled && item.disabledReason ? (
+                <span className="text-[11px] font-medium text-muted-foreground">{item.disabledReason}</span>
+              ) : null}
             </span>
           </CollapseTrigger>
-          <CollapseContent>{item.content}</CollapseContent>
+          <CollapseContent className={item.contentClassName}>{item.content}</CollapseContent>
         </Collapse>
       ))}
     </div>

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

@@ -13,6 +13,7 @@ export type DialogOverlayProps = DialogPrimitive.Backdrop.Props
 export type DialogPopupProps = DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
+  surface?: "default" | "plain"
 }
 export type DialogHeaderProps = React.ComponentProps<"div">
 export type DialogFooterProps = React.ComponentProps<"div"> & {
@@ -58,6 +59,7 @@ function DialogContent({
   children,
   showCloseButton = true,
   size = "md",
+  surface = "default",
   ...props
 }: DialogPopupProps) {
   return (
@@ -66,8 +68,10 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         data-size={size}
+        data-surface={surface}
+        role="dialog"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border p-6 text-sm text-popover-foreground backdrop-blur duration-100 outline-none 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_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 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-hidden rounded-[var(--radius-3xl)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-6 text-sm text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_24px_70px_rgba(15,23,42,0.22))] backdrop-blur duration-100 outline-none data-[surface=plain]:overflow-visible data-[surface=plain]:border-transparent data-[surface=plain]:bg-transparent data-[surface=plain]:p-0 data-[surface=plain]:shadow-none 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",
           className
         )}
         {...props}
@@ -77,11 +81,11 @@ function DialogContent({
           <DialogPrimitive.Close
             data-slot="dialog-close"
             render={
-        <Button
-          variant="ghost"
-          className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
-          size="icon-sm"
-        />
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
+                size="icon-sm"
+              />
             }
           >
             <XIcon />
@@ -110,10 +114,10 @@ function DialogFooter({
   ...props
 }: DialogFooterProps) {
   return (
-        <div
+    <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t p-5 sm:flex-row sm:justify-end",
+        "-mx-6 -mb-6 flex flex-col-reverse gap-2 border-t border-border/70 bg-muted/20 p-5 sm:flex-row sm:justify-end",
         className
       )}
       {...props}

package/packages/cli/vendor/src/components/ui/dropdown-menu/index.tsx

@@ -17,6 +17,7 @@ export type DropdownMenuLabelProps = React.ComponentProps<"div"> & { inset?: boo
 export type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
   inset?: boolean
   variant?: "default" | "destructive"
+  closeOnSelect?: boolean
 }
 export type DropdownMenuSubmenuProps = MenuPrimitive.SubmenuRoot.Props
 export type DropdownMenuSubmenuTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
@@ -25,13 +26,19 @@ export type DropdownMenuSubmenuTriggerProps = MenuPrimitive.SubmenuTrigger.Props
 export type DropdownMenuSubmenuContentProps = React.ComponentProps<typeof DropdownMenuContent>
 export type DropdownMenuCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & {
   inset?: boolean
+  closeOnSelect?: boolean
 }
 export type DropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props
 export type DropdownMenuRadioItemProps = MenuPrimitive.RadioItem.Props & {
   inset?: boolean
+  closeOnSelect?: boolean
 }
 export type DropdownMenuSeparatorProps = MenuPrimitive.Separator.Props
 export type DropdownMenuShortcutProps = React.ComponentProps<"span">
+export type DropdownMenuItemDescriptionProps = React.ComponentProps<"span">
+
+const menuItemClassName =
+  "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm text-popover-foreground outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:border-[color:color-mix(in_oklch,var(--destructive),transparent_70%)] data-[variant=destructive]:data-[highlighted]:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] data-[variant=destructive]:data-[highlighted]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -42,6 +49,11 @@ function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps) {
 }
 
 function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
+  if (!("render" in props) && React.isValidElement(props.children)) {
+    const { children, ...rest } = props
+    return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" render={children} {...rest} />
+  }
+
   return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
@@ -64,7 +76,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-2 text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-2 text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -98,21 +110,30 @@ function DropdownMenuItem({
   className,
   inset,
   variant = "default",
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuItemProps) {
-  return (
-    <MenuPrimitive.Item
+  return (
+    <MenuPrimitive.Item
       data-slot="dropdown-menu-item"
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item data-inset:pl-8",
+        menuItemClassName,
         className
       )}
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
       {...props}
-    />
-  )
-}
+    />
+  )
+}
 
 function DropdownMenuSub({ ...props }: DropdownMenuSubmenuProps) {
   return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
@@ -129,13 +150,14 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item data-inset:pl-8",
+        menuItemClassName,
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRightIcon className="ml-auto text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -166,19 +188,28 @@ function DropdownMenuCheckboxItem({
   children,
   checked,
   inset,
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuCheckboxItemProps) {
-  return (
-    <MenuPrimitive.CheckboxItem
+  return (
+    <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
+        menuItemClassName,
         className
       )}
-      checked={checked}
-      {...props}
-    >
+      checked={checked}
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
+      {...props}
+    >
       <span
         className="pointer-events-none absolute right-2 flex items-center justify-center"
         data-slot="dropdown-menu-checkbox-item-indicator"
@@ -206,18 +237,27 @@ function DropdownMenuRadioItem({
   className,
   children,
   inset,
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuRadioItemProps) {
-  return (
-    <MenuPrimitive.RadioItem
+  return (
+    <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
+        menuItemClassName,
         className
       )}
-      {...props}
-    >
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
+      {...props}
+    >
       <span
         className="pointer-events-none absolute right-2 flex items-center justify-center"
         data-slot="dropdown-menu-radio-item-indicator"
@@ -252,14 +292,27 @@ function DropdownMenuShortcut({
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ml-auto text-[11px] tracking-[0.14em] text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+      className={cn(
+        "ml-auto rounded bg-muted/70 px-1.5 py-0.5 text-[11px] font-medium tracking-[0.08em] text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground",
         className
       )}
       {...props}
     />
-  )
-}
+  )
+}
+
+function DropdownMenuItemDescription({
+  className,
+  ...props
+}: DropdownMenuItemDescriptionProps) {
+  return (
+    <span
+      data-slot="dropdown-menu-item-description"
+      className={cn("block text-xs leading-5 text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground/70", className)}
+      {...props}
+    />
+  )
+}
 
 export {
   DropdownMenu,
@@ -271,10 +324,11 @@ export {
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuItemDescription,
+  DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 }

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

@@ -39,6 +39,7 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   kind?: "text"
   value?: string | number | readonly string[] | null
   onValueChange?: (value: string) => void
+  onDebouncedValueChange?: (value: string) => void
   leading?: React.ReactNode
   trailing?: React.ReactNode
   trailingAction?: React.ReactNode
@@ -57,6 +58,13 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   helperClassName?: string
   leadingPointerEvents?: boolean
   trailingPointerEvents?: boolean
+  searchIcon?: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  resultCount?: number
+  shortcut?: React.ReactNode
+  debounceMs?: number
+  showMetaOnClear?: boolean
 }
 
 export type InputClearableProps = Omit<ClearableInputProps, "kind"> & {
@@ -121,6 +129,20 @@ function getInputTextLength(value: InputTextProps["value"] | InputTextProps["def
   return 0
 }
 
+function shouldRenderSearchInput(props: InputTextProps) {
+  return (
+    props.type === "search" ||
+    props.searchIcon !== undefined ||
+    props.loading !== undefined ||
+    props.loadingLabel !== undefined ||
+    props.resultCount !== undefined ||
+    props.shortcut !== undefined ||
+    props.debounceMs !== undefined ||
+    props.showMetaOnClear !== undefined ||
+    props.onDebouncedValueChange !== undefined
+  )
+}
+
 const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((props, ref) => {
   const kind = props.kind ?? "text"
 
@@ -210,6 +232,82 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
   }
 
   const inputProps = props as Omit<InputTextProps, "kind">
+
+  if (shouldRenderSearchInput(inputProps)) {
+    const {
+      leading,
+      searchIcon,
+      helperText,
+      errorText,
+      showCharacterCount,
+      countFormatter,
+      helperClassName,
+      inputClassName,
+      ...searchInputProps
+    } = inputProps
+    const searchValue: SearchInputProps["value"] = Array.isArray(inputProps.value)
+      ? inputProps.value.join(" ")
+      : inputProps.value == null || typeof inputProps.value === "string" || typeof inputProps.value === "number"
+        ? inputProps.value
+        : String(inputProps.value)
+    const searchDefaultValue: SearchInputProps["defaultValue"] = Array.isArray(inputProps.defaultValue)
+      ? inputProps.defaultValue.join(" ")
+      : inputProps.defaultValue == null ||
+          typeof inputProps.defaultValue === "string" ||
+          typeof inputProps.defaultValue === "number"
+        ? inputProps.defaultValue
+        : String(inputProps.defaultValue)
+
+    const searchInput = (
+      <SearchInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        searchIcon={searchIcon ?? leading}
+        inputClassName={inputClassName}
+        {...searchInputProps}
+        value={searchValue}
+        defaultValue={searchDefaultValue}
+      />
+    )
+
+    if (!helperText && !errorText && !showCharacterCount) {
+      return searchInput
+    }
+
+    const currentLength = getInputTextLength(inputProps.value ?? inputProps.defaultValue)
+
+    return (
+      <div data-slot="input-field" className="grid gap-1.5">
+        {searchInput}
+        <div data-slot="input-meta" className="flex items-start justify-between gap-3 px-1">
+          <div
+            data-slot="input-helper"
+            className={cn(
+              "min-w-0 text-xs leading-5",
+              errorText ? "text-destructive" : "text-muted-foreground",
+              helperClassName
+            )}
+          >
+            {errorText ?? helperText}
+          </div>
+          {showCharacterCount ? (
+            <div
+              data-slot="input-count"
+              className={cn(
+                "shrink-0 text-[11px] font-medium tabular-nums",
+                errorText ? "text-destructive" : "text-muted-foreground"
+              )}
+            >
+              {countFormatter?.(currentLength, inputProps.maxLength) ??
+                (typeof inputProps.maxLength === "number"
+                  ? `${currentLength}/${inputProps.maxLength}`
+                  : currentLength)}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
   const {
     value,
     defaultValue,