tembro 3.0.0 → 3.1.5

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

@@ -104,25 +104,11 @@ function Select({
   onSearchChange,
   ...props
 }: SelectProps) {
-  if (!options && !groups) {
-    return (
-      <SelectRoot
-        value={value ?? undefined}
-        defaultValue={defaultValue ?? undefined}
-        onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
-        onOpenChange={onOpenChange}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </SelectRoot>
-    )
-  }
-
+  const hasCustomOptions = Boolean(options || groups)
   const [search, setSearch] = React.useState("")
   const optionGroups = React.useMemo<SelectOptionGroup[]>(
-    () => groups ?? [{ options: options ?? [] }],
-    [groups, options]
+    () => (hasCustomOptions ? groups ?? [{ options: options ?? [] }] : []),
+    [groups, hasCustomOptions, options]
   )
   const flatOptions = React.useMemo(
     () => optionGroups.flatMap((group) => group.options),
@@ -137,6 +123,21 @@ function Select({
     .filter((group) => group.options.length > 0)
   const filteredOptionsCount = filteredGroups.reduce((count, group) => count + group.options.length, 0)
 
+  if (!hasCustomOptions) {
+    return (
+      <SelectRoot
+        value={value ?? undefined}
+        defaultValue={defaultValue ?? undefined}
+        onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
+        onOpenChange={onOpenChange}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </SelectRoot>
+    )
+  }
+
   return (
     <SelectRoot
       value={value ?? undefined}
@@ -195,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
@@ -216,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}
@@ -224,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>
@@ -296,13 +296,19 @@ 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}
     >
       {children}
-      <SelectPrimitive.Icon render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />} />
+      <SelectPrimitive.Icon
+        render={
+          <span data-slot="select-icon" className="inline-flex shrink-0 items-center justify-center">
+            <ChevronDownIcon data-icon="chevron" />
+          </span>
+        }
+      />
     </SelectPrimitive.Trigger>
   )
 }
@@ -331,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}
@@ -349,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}
     />
   )
@@ -363,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}
@@ -384,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/table/index.tsx

@@ -1,121 +1,129 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type TableProps = React.ComponentProps<"table"> & {
-  containerClassName?: string
-}
-
-function Table({ className, containerClassName, ...props }: TableProps) {
-  return (
-    <div
-      data-slot="table-container"
-      className={cn(
-        "relative w-full overflow-x-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-table-container-surface,var(--card))] shadow-[var(--aui-card-shadow,0_12px_30px_rgba(15,23,42,0.08))]",
-        containerClassName
-      )}
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("bg-[color:color-mix(in_oklch,var(--muted),var(--background)_30%)] [&_tr]:border-b [&_tr]:border-[color:var(--aui-card-border,var(--border))]", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_46%)] font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b border-[color:var(--aui-card-border,var(--border))] transition-colors hover:bg-[color:color-mix(in_oklch,var(--muted),var(--background)_14%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[striped=true]:bg-[color:color-mix(in_oklch,var(--muted),transparent_68%)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-11 px-4 text-left align-middle text-[0.72rem] font-semibold whitespace-nowrap uppercase tracking-[0.14em] text-muted-foreground [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "px-4 py-3.5 align-middle whitespace-nowrap text-foreground/92 [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableProps = React.ComponentProps<"table"> & {
+  containerClassName?: string
+  containerRef?: React.Ref<HTMLDivElement>
+  containerStyle?: React.CSSProperties
+}
+
+function Table({ className, containerClassName, containerRef, containerStyle, ...props }: TableProps) {
+  return (
+    <div
+      ref={containerRef}
+      data-slot="table-container"
+      className={cn(
+        "relative w-full overflow-x-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-table-container-surface,var(--card))] shadow-[var(--aui-card-shadow,0_12px_30px_rgba(15,23,42,0.08))]",
+        containerClassName
+      )}
+      style={containerStyle}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-[color:color-mix(in_oklch,var(--muted),var(--background)_30%)] [&_tr]:border-b [&_tr]:border-[color:var(--aui-card-border,var(--border))]", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_46%)] font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.ComponentPropsWithoutRef<"tr">
+>(function TableRow({ className, ...props }, ref) {
+  return (
+    <tr
+      ref={ref}
+      data-slot="table-row"
+      className={cn(
+        "border-b border-[color:var(--aui-card-border,var(--border))] transition-colors hover:bg-[color:color-mix(in_oklch,var(--muted),var(--background)_14%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[striped=true]:bg-[color:color-mix(in_oklch,var(--muted),transparent_68%)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-11 px-4 text-left align-middle text-[0.72rem] font-semibold whitespace-nowrap uppercase tracking-[0.14em] text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-4 py-3.5 align-middle whitespace-nowrap text-foreground/92 [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

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"