tembro 3.1.1 → 3.1.5

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

@@ -46,7 +46,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-[color-mix(in_oklch,var(--foreground),transparent_80%)] duration-100 supports-backdrop-filter:backdrop-blur-md data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -72,7 +72,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 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",
+          "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",
           className
         )}
         {...props}
@@ -84,7 +84,7 @@ function DialogContent({
             render={
               <Button
                 variant="ghost"
-                className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
+                className="absolute top-3 right-3"
                 size="icon-sm"
               />
             }
@@ -102,7 +102,7 @@ function DialogHeader({ className, ...props }: DialogHeaderProps) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2.5", className)}
+      className={cn("flex flex-col", className)}
       {...props}
     />
   )
@@ -118,7 +118,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "-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",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -137,10 +137,7 @@ function DialogTitle({ className, ...props }: DialogTitleProps) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "font-heading text-xl leading-tight font-semibold tracking-tight",
-        className
-      )}
+      className={className}
       {...props}
     />
   )
@@ -153,10 +150,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn(
-        "text-sm leading-6 text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
+      className={className}
       {...props}
     />
   )

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

@@ -38,7 +38,7 @@ 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"
+  "relative group/dropdown-menu-item [&_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} />
@@ -76,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-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)}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto 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>
@@ -95,12 +95,9 @@ function DropdownMenuLabel({
 }: DropdownMenuLabelProps) {
   return (
     <div
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90 data-inset:pl-8",
-        className
-      )}
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={className}
       {...props}
     />
   )
@@ -120,7 +117,6 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item data-inset:pl-8",
         menuItemClassName,
         className
       )}
@@ -150,14 +146,13 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "group/dropdown-menu-item data-inset:pl-8",
         menuItemClassName,
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground" />
+      <ChevronRightIcon data-slot="dropdown-menu-sub-icon" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -173,7 +168,7 @@ function DropdownMenuSubContent({
   return (
       <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("w-auto min-w-[128px] rounded-[var(--aui-card-radius,var(--radius-xl))] p-2 text-popover-foreground duration-100 data-[side=bottom]:slide-in-from-top-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:fade-out-0 data-closed:zoom-out-95", className )}
+      className={cn("w-auto min-w-32 duration-100 data-[side=bottom]:slide-in-from-top-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:fade-out-0 data-closed:zoom-out-95", className)}
       align={align}
       alignOffset={alignOffset}
       side={side}
@@ -197,7 +192,6 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
         menuItemClassName,
         className
       )}
@@ -211,8 +205,7 @@ function DropdownMenuCheckboxItem({
       {...props}
     >
       <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-checkbox-item-indicator"
+        data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
           <CheckIcon
@@ -246,7 +239,6 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
         menuItemClassName,
         className
       )}
@@ -259,8 +251,7 @@ function DropdownMenuRadioItem({
       {...props}
     >
       <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-radio-item-indicator"
+        data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
           <CheckIcon
@@ -278,8 +269,8 @@ function DropdownMenuSeparator({
 }: DropdownMenuSeparatorProps) {
   return (
     <MenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1.5 h-px bg-border/80", className)}
+      data-slot="dropdown-menu-separator"
+      className={className}
       {...props}
     />
   )
@@ -291,11 +282,8 @@ function DropdownMenuShortcut({
 }: DropdownMenuShortcutProps) {
   return (
     <span
-      data-slot="dropdown-menu-shortcut"
-      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
-      )}
+      data-slot="dropdown-menu-shortcut"
+      className={className}
       {...props}
     />
   )
@@ -308,7 +296,7 @@ function DropdownMenuItemDescription({
   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)}
+      className={className}
       {...props}
     />
   )

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { InputPrimitive } from "@/components/ui/input-primitive"
+import { InputPrimitive } from "./primitive"
 import { cn } from "@/lib/utils"
 
 const inputDecoratorVariants = cva("relative flex w-full items-center", {

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

@@ -102,8 +102,9 @@ function InputGroupButton({
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
+      data-slot="input-group-text"
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 [&_svg]:pointer-events-none",
         className
       )}
       {...props}

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

@@ -283,23 +283,21 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
       <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
+          <div
+            data-slot="input-helper"
+            data-invalid={Boolean(errorText) || undefined}
+            className={cn(
+              "min-w-0",
+              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"
-              )}
+              data-slot="input-count"
+              data-invalid={Boolean(errorText) || undefined}
+              className="shrink-0 tabular-nums"
             >
               {countFormatter?.(currentLength, inputProps.maxLength) ??
                 (typeof inputProps.maxLength === "number"
@@ -342,7 +340,6 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
   const isControlled = value !== undefined
   const currentLength = isControlled ? getInputTextLength(value) : uncontrolledLength
   const helperMessage = errorText ?? helperText
-  const helperTone = errorText ? "text-destructive" : "text-muted-foreground"
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     if (!isControlled) {
@@ -422,18 +419,17 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
         className="flex items-start justify-between gap-3 px-1"
       >
         <div
-          data-slot="input-helper"
-          className={cn("min-w-0 text-xs leading-5", helperTone, helperClassName)}
+          data-slot="input-helper"
+          data-invalid={Boolean(errorText) || undefined}
+          className={cn("min-w-0", helperClassName)}
         >
           {helperMessage}
         </div>
         {showCharacterCount ? (
           <div
-            data-slot="input-count"
-            className={cn(
-              "shrink-0 text-[11px] font-medium tabular-nums",
-              errorText ? "text-destructive" : "text-muted-foreground"
-            )}
+            data-slot="input-count"
+            data-invalid={Boolean(errorText) || undefined}
+            className="shrink-0 tabular-nums"
           >
             {countFormatter?.(currentLength, maxLength) ??
               (typeof maxLength === "number" ? `${currentLength}/${maxLength}` : currentLength)}

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

@@ -3,7 +3,7 @@ import * as React from "react"
 import { InputChrome } from "./chrome"
 import { getInputValue } from "./value"
 import { parseMoneyLikeInput } from "./numeric-value"
-import { InputPrimitive } from "@/components/ui/input-primitive"
+import { InputPrimitive } from "./primitive"
 import { cn } from "@/lib/utils"
 
 export type MoneyInputProps = Omit<

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

@@ -84,19 +84,19 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       <>
         {trailing}
         {showCapsLockWarning && capsLockOn ? (
-          <span data-slot="password-caps-lock" className="hidden text-xs text-amber-600 sm:inline" aria-live="polite">
+          <span data-slot="password-caps-lock" aria-live="polite">
             {capsLockLabel}
           </span>
         ) : null}
         {showToggle ? (
           <button
-            type="button"
-            disabled={disabled}
-            aria-label={currentVisible ? hideLabel : showLabel}
-            className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-            onClick={() => setVisibleState(!currentVisible)}
-          >
-            {currentVisible ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+            type="button"
+            data-slot="password-toggle"
+            disabled={disabled}
+            aria-label={currentVisible ? hideLabel : showLabel}
+            onClick={() => setVisibleState(!currentVisible)}
+          >
+            {currentVisible ? <EyeOffIcon data-icon="password-hide" /> : <EyeIcon data-icon="password-show" />}
           </button>
         ) : null}
       </>

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

@@ -5,7 +5,7 @@ import { InputChrome } from "./chrome"
 import { getInputValue } from "./value"
 import { clampNumericValue, parseDecimalInput } from "./numeric-value"
 import { Button } from "@/components/ui/button"
-import { InputPrimitive } from "@/components/ui/input-primitive"
+import { InputPrimitive } from "./primitive"
 import { cn } from "@/lib/utils"
 
 export type QuantityInputProps = Omit<

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

@@ -46,7 +46,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex max-h-[min(var(--available-height),calc(100dvh-1rem))] w-[min(var(--anchor-width),20rem)] min-w-60 max-w-[calc(100vw-1rem)] origin-(--transform-origin) flex-col gap-3 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-4 text-sm text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] outline-hidden duration-100 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:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex max-h-[min(var(--available-height),calc(100dvh-1rem))] w-[min(var(--anchor-width),20rem)] min-w-60 max-w-[calc(100vw-1rem)] origin-(--transform-origin) flex-col gap-3 overflow-y-auto outline-hidden duration-100 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:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -60,7 +60,7 @@ function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
   return (
     <div
       data-slot="popover-header"
-      className={cn("flex flex-col gap-1 text-sm", className)}
+      className={className}
       {...props}
     />
   )
@@ -69,8 +69,8 @@ function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
 function PopoverTitle({ className, ...props }: PopoverTitleProps) {
   return (
     <PopoverPrimitive.Title
-      data-slot="popover-title"
-      className={cn("text-base font-semibold tracking-tight", className)}
+      data-slot="popover-title"
+      className={className}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function PopoverDescription({
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={cn("leading-6 text-muted-foreground", className)}
+      className={className}
       {...props}
     />
   )

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

@@ -196,7 +196,7 @@ function Select({
         {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"
+            className="sticky top-0 flex items-center gap-2"
           >
             <SearchIcon className="size-4 text-muted-foreground" />
             <input
@@ -217,7 +217,7 @@ function Select({
         {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"
+            className="flex items-center gap-2"
           >
             <LoaderCircleIcon className="size-4 animate-spin" />
             {loadingLabel}
@@ -225,7 +225,6 @@ function Select({
         ) : filteredOptionsCount === 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"
           >
             {emptyMessage ?? emptyLabel}
           </div>
@@ -297,7 +296,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-11 data-[size=lg]:h-12 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "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",
         className
       )}
       {...props}
@@ -305,8 +304,8 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <span className="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground">
-            <ChevronDownIcon className="size-4" />
+          <span data-slot="select-icon" className="inline-flex shrink-0 items-center justify-center">
+            <ChevronDownIcon data-icon="chevron" />
           </span>
         }
       />
@@ -338,7 +337,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95",
+            "relative isolate max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
             className
           )}
           {...props}
@@ -356,10 +355,7 @@ function SelectLabel({ className, ...props }: SelectLabelProps) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn(
-        "px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90",
-        className
-      )}
+      className={className}
       {...props}
     />
   )
@@ -370,7 +366,7 @@ function SelectItem({ className, children, ...props }: SelectItemProps) {
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] 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-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2",
+        "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",
         className
       )}
       {...props}
@@ -391,7 +387,7 @@ function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1.5 h-px bg-border/80", className)}
+      className={cn("pointer-events-none", className)}
       {...props}
     />
   )

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

@@ -25,12 +25,9 @@ const TabsList = React.forwardRef<
       data-variant={variant}
       data-overflow={overflow}
       className={cn(
-        "inline-flex max-w-full min-h-11 items-center justify-start gap-1 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:color-mix(in_oklch,var(--border),white_4%)] bg-[color:var(--aui-control-panel-bg,var(--muted))] p-1 text-muted-foreground shadow-[var(--aui-control-panel-shadow,var(--aui-control-shadow,none))] backdrop-blur",
+        "inline-flex max-w-full items-center justify-start",
         overflow === "scroll" && "overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         overflow === "wrap" && "flex-wrap",
-        variant === "underline" && "min-h-10 rounded-none border-x-0 border-t-0 bg-transparent p-0 shadow-none",
-        variant === "compact" && "min-h-9 rounded-[var(--radius-lg)] p-0.5",
-        variant === "pills" && "rounded-full",
         className
       )}
     {...props}
@@ -47,10 +44,7 @@ const TabsTrigger = React.forwardRef<
       data-slot="tabs-trigger"
       data-variant={variant}
       className={cn(
-        "inline-flex min-h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-[color:color-mix(in_oklch,var(--background),transparent_18%)] hover:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] data-[selected]:bg-[color:var(--aui-control-surface,var(--background))] data-[selected]:text-foreground data-[selected]:shadow-[var(--aui-control-shadow,none)] aria-selected:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] aria-selected:bg-[color:var(--aui-control-surface,var(--background))] aria-selected:text-foreground aria-selected:shadow-[var(--aui-control-shadow,none)] focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-        variant === "underline" && "min-h-10 rounded-none border-b-2 px-2 shadow-none data-[selected]:border-b-primary data-[selected]:bg-transparent data-[selected]:shadow-none aria-selected:border-b-primary aria-selected:bg-transparent aria-selected:shadow-none",
-        variant === "pills" && "rounded-full",
-        variant === "compact" && "min-h-8 px-2.5 text-xs",
+        "inline-flex shrink-0 items-center justify-center whitespace-nowrap disabled:pointer-events-none",
         className
       )}
     {...props}
@@ -65,10 +59,7 @@ const TabsContent = React.forwardRef<
     <BaseTabs.Panel
       ref={ref}
       data-slot="tabs-content"
-      className={cn(
-      "mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]",
-      className
-    )}
+      className={className}
     {...props}
   />
 ))

package/packages/cli/vendor/src/components/upload/demo.tsx

@@ -3,5 +3,4 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 export const uploadShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy.", "ImageUpload"),
-  component("file-dropzone", "FileDropzone", "upload", "Lightweight file dropzone primitive for custom upload flows."),
 ])

package/packages/cli/vendor/src/components/upload/file-upload.tsx

@@ -236,14 +236,14 @@ function validateIncomingFiles({
 
 function defaultRenderFile({ file, progress, status, remove, retry, removeLabel = "Remove file" }: FileUploadRenderFileState) {
   return (
-    <div className="flex min-w-0 items-center gap-3">
-      <span className="flex size-9 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm">
+    <div data-slot="file-upload-file-content" className="flex min-w-0 items-center gap-3">
+      <span data-slot="file-upload-file-icon" className="flex size-9 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm">
         <FileIcon className="size-4 text-muted-foreground" />
       </span>
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">
-          <div className="truncate text-sm font-medium text-foreground">{file.name}</div>
-          <span className={cn(
+          <div data-slot="file-upload-file-name" className="truncate text-sm font-medium text-foreground">{file.name}</div>
+          <span data-slot="file-upload-file-status" data-status={status} className={cn(
             "rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em]",
             status === "uploading" && "bg-primary/10 text-primary",
             status === "success" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
@@ -253,10 +253,11 @@ function defaultRenderFile({ file, progress, status, remove, retry, removeLabel
             {status}
           </span>
         </div>
-        <div className="text-xs text-muted-foreground">{formatBytes(file.size)}</div>
+        <div data-slot="file-upload-file-size" className="text-xs text-muted-foreground">{formatBytes(file.size)}</div>
         {typeof progress === "number" && (
-          <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80">
+          <div data-slot="file-upload-progress" className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80">
             <div
+              data-slot="file-upload-progress-bar"
               className="h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]"
               style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }}
             />
@@ -467,21 +468,21 @@ function FileUpload({
         onDragOver={handleDragOver}
         onDrop={handleDrop}
       >
-        <div className="mx-auto flex size-13 items-center justify-center rounded-full border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_14%),var(--background))] text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.12),0_10px_24px_rgba(15,23,42,0.06)]">
+        <div data-slot="file-upload-dropzone-icon" className="mx-auto flex size-13 items-center justify-center rounded-full border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_14%),var(--background))] text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.12),0_10px_24px_rgba(15,23,42,0.06)]">
           <UploadCloudIcon className="size-5" />
         </div>
-        <div className="grid gap-1">
-          <div className="text-sm font-semibold text-foreground">{isDragging ? dragActiveLabel : dropzoneLabel}</div>
-          {dropzoneDescription && <div className="text-sm leading-6 text-muted-foreground">{dropzoneDescription}</div>}
+        <div data-slot="file-upload-dropzone-content" className="grid gap-1">
+          <div data-slot="file-upload-dropzone-label" className="text-sm font-semibold text-foreground">{isDragging ? dragActiveLabel : dropzoneLabel}</div>
+          {dropzoneDescription && <div data-slot="file-upload-dropzone-description" className="text-sm leading-6 text-muted-foreground">{dropzoneDescription}</div>}
           {(accept || maxSize || maxFiles || helperText) && (
-            <div className="text-xs leading-5 text-muted-foreground">
+            <div data-slot="file-upload-helper" className="text-xs leading-5 text-muted-foreground">
               {helperText ?? [accept ? `Types: ${accept}` : null, maxSize ? `Max size: ${formatBytes(maxSize)}` : null, maxFiles ? `Max files: ${maxFiles}` : null].filter(Boolean).join(" • ")}
             </div>
           )}
         </div>
 
         {renderActions?.({ openFileDialog, clearFiles, files }) ?? (
-          <div className="flex justify-center gap-2">
+          <div data-slot="file-upload-actions" className="flex justify-center gap-2">
             <Button
               type="button"
               variant="outline"
@@ -518,7 +519,7 @@ function FileUpload({
       </div>
 
       {showFileList && files.length > 0 && (
-        <div data-slot="file-upload-list" className={cn("grid gap-2", fileListClassName)}>
+        <div data-slot="file-upload-list" aria-live="polite" className={cn("grid gap-2", fileListClassName)}>
           {files.map((file, index) => {
             const state = {
               file,
@@ -545,10 +546,11 @@ function FileUpload({
       )}
 
       {resolvedRejectedFiles.length > 0 && (
-        <div data-slot="file-upload-rejected-list" className={cn("grid gap-2", rejectedListClassName)}>
+        <div data-slot="file-upload-rejected-list" role="alert" aria-live="assertive" className={cn("grid gap-2", rejectedListClassName)}>
           {resolvedRejectedFiles.map((rejectedFile, index) => (
             <div
               key={`${rejectedFile.file.name}-${index}`}
+              data-slot="file-upload-rejected-item"
               className="rounded-[min(var(--radius-lg),12px)] border border-destructive/22 bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
             >
               {renderRejectedFile?.({ rejectedFile, index }) ?? <span>{rejectedFile.file.name}: {rejectedFile.message}</span>}

package/packages/cli/vendor/src/components/upload/index.ts

@@ -1,4 +1,2 @@
 export { FileUpload } from "./file-upload"
 export { ImageUpload } from "./image-upload"
-export { FileDropzone } from "./file-dropzone"
-export type { FileDropzoneProps } from "./file-dropzone"