tembro 2.0.6 → 2.1.1

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

@@ -4,51 +4,162 @@ import { cn } from "@/lib/utils"
 
 export type RightClickMenuItem = {
   label: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: React.ReactNode
   onSelect?: () => void
   disabled?: boolean
+  variant?: "default" | "destructive"
 }
 
 export type RightClickMenuProps = React.ComponentProps<"div"> & {
   items: RightClickMenuItem[]
+  label?: string
 }
 
-function RightClickMenu({ items, children, className, ...props }: RightClickMenuProps) {
+function getClampedPoint(x: number, y: number, width = 224, height: number) {
+  if (typeof window === "undefined") {
+    return { x, y }
+  }
+
+  const padding = 8
+  return {
+    x: Math.min(Math.max(padding, x), Math.max(padding, window.innerWidth - width - padding)),
+    y: Math.min(Math.max(padding, y), Math.max(padding, window.innerHeight - height - padding)),
+  }
+}
+
+function RightClickMenu({
+  items,
+  children,
+  className,
+  label = "Context menu",
+  ...props
+}: RightClickMenuProps) {
   const [open, setOpen] = React.useState(false)
   const [point, setPoint] = React.useState({ x: 0, y: 0 })
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([])
+  const enabledItems = React.useMemo(
+    () => items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled),
+    [items]
+  )
+
+  const openAt = React.useCallback(
+    (x: number, y: number) => {
+      const nextPoint = getClampedPoint(x, y, 224, Math.max(44, items.length * 42 + 12))
+      setPoint(nextPoint)
+      setActiveIndex(enabledItems[0]?.index ?? 0)
+      setOpen(true)
+    },
+    [enabledItems, items.length]
+  )
 
   React.useEffect(() => {
     if (!open) return
     const close = () => setOpen(false)
-    window.addEventListener("click", close)
-    return () => window.removeEventListener("click", close)
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false)
+      }
+    }
+
+    window.addEventListener("pointerdown", close)
+    window.addEventListener("resize", close)
+    window.addEventListener("scroll", close, true)
+    window.addEventListener("keydown", onKeyDown)
+    return () => {
+      window.removeEventListener("pointerdown", close)
+      window.removeEventListener("resize", close)
+      window.removeEventListener("scroll", close, true)
+      window.removeEventListener("keydown", onKeyDown)
+    }
   }, [open])
 
+  React.useEffect(() => {
+    if (!open) return
+    itemRefs.current[activeIndex]?.focus()
+  }, [activeIndex, open])
+
+  const focusNext = (direction: 1 | -1) => {
+    if (enabledItems.length === 0) return
+    const currentEnabledIndex = enabledItems.findIndex(({ index }) => index === activeIndex)
+    const nextEnabled =
+      enabledItems[(currentEnabledIndex + direction + enabledItems.length) % enabledItems.length]
+    setActiveIndex(nextEnabled.index)
+  }
+
   return (
     <div
       data-slot="right-click-menu"
-      className={cn("contents", className)}
+      ref={rootRef}
+      tabIndex={0}
+      className={cn("contents focus:outline-none", className)}
       onContextMenu={(event) => {
         event.preventDefault()
-        setPoint({ x: event.clientX, y: event.clientY })
-        setOpen(true)
+        openAt(event.clientX, event.clientY)
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
+          event.preventDefault()
+          const rect = rootRef.current?.getBoundingClientRect()
+          openAt(rect ? rect.left + 12 : 12, rect ? rect.top + 12 : 12)
+        }
       }}
       {...props}
     >
       {children}
       {open ? (
-        <div className="fixed z-50 min-w-40 rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-xl" style={{ left: point.x, top: point.y }}>
+        <div
+          data-slot="right-click-menu-content"
+          role="menu"
+          aria-label={label}
+          className="fixed z-50 min-w-56 max-w-[calc(100vw-1rem)] 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-1.5 text-sm text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] outline-none"
+          style={{ left: point.x, top: point.y }}
+          onPointerDown={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault()
+              focusNext(1)
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault()
+              focusNext(-1)
+            }
+            if (event.key === "Home") {
+              event.preventDefault()
+              setActiveIndex(enabledItems[0]?.index ?? activeIndex)
+            }
+            if (event.key === "End") {
+              event.preventDefault()
+              setActiveIndex(enabledItems.at(-1)?.index ?? activeIndex)
+            }
+          }}
+        >
           {items.map((item, index) => (
             <button
               key={index}
+              ref={(node) => {
+                itemRefs.current[index] = node
+              }}
               type="button"
+              role="menuitem"
               disabled={item.disabled}
-              className="block w-full rounded-lg px-3 py-2 text-left hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
+              data-variant={item.variant ?? "default"}
+              className="group flex min-h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-2 text-left text-popover-foreground outline-none transition-[background-color,color] hover:bg-accent focus-visible:bg-accent data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] data-[variant=destructive]:focus-visible:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"
               onClick={() => {
+                if (item.disabled) return
                 item.onSelect?.()
                 setOpen(false)
               }}
             >
-              {item.label}
+              {item.icon}
+              <span className="min-w-0 flex-1 truncate">{item.label}</span>
+              {item.shortcut ? (
+                <span className="ml-3 text-[11px] font-medium tracking-[0.08em] text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground">
+                  {item.shortcut}
+                </span>
+              ) : null}
             </button>
           ))}
         </div>

package/packages/cli/vendor/src/components/ui/segmented-control/index.tsx

@@ -16,6 +16,7 @@ export type SegmentedControlProps<TValue extends string = string> = Omit<React.C
   options: SegmentedControlOption<TValue>[]
   size?: "sm" | "md" | "lg"
   fullWidth?: boolean
+  equalWidth?: boolean
 }
 
 const sizeClassName = {
@@ -31,17 +32,28 @@ function SegmentedControl<TValue extends string = string>({
   options,
   size = "md",
   fullWidth = false,
+  equalWidth = false,
   className,
   ...props
 }: SegmentedControlProps<TValue>) {
   const [internalValue, setInternalValue] = React.useState<TValue | undefined>(defaultValue ?? options[0]?.value)
   const currentValue = value ?? internalValue
+  const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([])
 
   const selectValue = (nextValue: TValue) => {
     if (value === undefined) setInternalValue(nextValue)
     onValueChange?.(nextValue)
   }
 
+  const moveFocus = (fromIndex: number, direction: 1 | -1) => {
+    const enabledOptions = options
+      .map((option, index) => ({ option, index }))
+      .filter(({ option }) => !option.disabled)
+    const enabledIndex = enabledOptions.findIndex(({ index }) => index === fromIndex)
+    const next = enabledOptions[(enabledIndex + direction + enabledOptions.length) % enabledOptions.length]
+    buttonRefs.current[next?.index ?? fromIndex]?.focus()
+  }
+
   return (
     <div
       data-slot="segmented-control"
@@ -49,26 +61,40 @@ function SegmentedControl<TValue extends string = string>({
       className={cn(
         "inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur",
         fullWidth && "flex w-full",
+        equalWidth && "grid auto-cols-fr grid-flow-col",
         className
       )}
       {...props}
     >
-      {options.map((option) => {
+      {options.map((option, optionIndex) => {
         const selected = option.value === currentValue
         return (
           <button
             key={option.value}
+            ref={(node) => {
+              buttonRefs.current[optionIndex] = node
+            }}
             type="button"
             role="radio"
             aria-checked={selected}
             disabled={option.disabled}
             data-selected={selected || undefined}
             className={cn(
-              "inline-flex items-center justify-center gap-1.5 rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)]",
+              "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)] [&_svg]:size-4 [&_svg]:shrink-0",
               sizeClassName[size],
-              fullWidth && "flex-1"
+              (fullWidth || equalWidth) && "w-full"
             )}
             onClick={() => selectValue(option.value)}
+            onKeyDown={(event) => {
+              if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+                event.preventDefault()
+                moveFocus(optionIndex, 1)
+              }
+              if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                event.preventDefault()
+                moveFocus(optionIndex, -1)
+              }
+            }}
           >
             {option.icon}
             {option.label}

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

@@ -29,14 +29,21 @@ export type SelectOption = {
   keywords?: string[]
 }
 
+export type SelectOptionGroup = {
+  label?: React.ReactNode
+  options: SelectOption[]
+}
+
 export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onValueChange"> & {
   value?: string | null
   defaultValue?: string | null
   onValueChange?: (value: string | undefined) => void
   options?: SelectOption[]
+  groups?: SelectOptionGroup[]
   placeholder?: string
   searchPlaceholder?: string
   emptyLabel?: React.ReactNode
+  emptyMessage?: React.ReactNode
   clearLabel?: string
   size?: "sm" | "default" | "lg"
   clearable?: boolean
@@ -51,6 +58,7 @@ export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onVa
   searchClassName?: string
   renderOption?: (option: SelectOption, state: { selected: boolean }) => React.ReactNode
   invalid?: boolean
+  onSearchChange?: (value: string) => void
 }
 
 const SelectRoot = SelectPrimitive.Root
@@ -72,9 +80,11 @@ function Select({
   defaultValue,
   onValueChange,
   options,
+  groups,
   placeholder = "Select",
   searchPlaceholder = "Search options...",
   emptyLabel = "No options found",
+  emptyMessage,
   clearLabel = "Clear selection",
   size = "default",
   clearable = false,
@@ -91,9 +101,10 @@ function Select({
   invalid,
   children,
   onOpenChange,
+  onSearchChange,
   ...props
 }: SelectProps) {
-  if (!options) {
+  if (!options && !groups) {
     return (
       <SelectRoot
         value={value ?? undefined}
@@ -109,8 +120,22 @@ function Select({
   }
 
   const [search, setSearch] = React.useState("")
-  const selectedOption = options.find((option) => option.value === value)
-  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
+  const optionGroups = React.useMemo<SelectOptionGroup[]>(
+    () => groups ?? [{ options: options ?? [] }],
+    [groups, options]
+  )
+  const flatOptions = React.useMemo(
+    () => optionGroups.flatMap((group) => group.options),
+    [optionGroups]
+  )
+  const selectedOption = flatOptions.find((option) => option.value === value)
+  const filteredGroups = optionGroups
+    .map((group) => ({
+      ...group,
+      options: group.options.filter((option) => optionMatchesSearch(option, search)),
+    }))
+    .filter((group) => group.options.length > 0)
+  const filteredOptionsCount = filteredGroups.reduce((count, group) => count + group.options.length, 0)
 
   return (
     <SelectRoot
@@ -175,7 +200,10 @@ function Select({
             <SearchIcon className="size-4 text-muted-foreground" />
             <input
               value={search}
-              onChange={(event) => setSearch(event.target.value)}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                onSearchChange?.(event.target.value)
+              }}
               placeholder={searchPlaceholder}
               className={cn(
                 "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
@@ -193,39 +221,44 @@ function Select({
             <LoaderCircleIcon className="size-4 animate-spin" />
             {loadingLabel}
           </div>
-        ) : filteredOptions.length === 0 ? (
+        ) : 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"
           >
-            {emptyLabel}
+            {emptyMessage ?? emptyLabel}
           </div>
         ) : (
-          filteredOptions.map((option) => {
-            const selected = option.value === value
-            return (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-                className={cn("rounded-[var(--radius-md)]", itemClassName)}
-              >
-                {renderOption ? (
-                  renderOption(option, { selected })
-                ) : (
-                  <span className="flex min-w-0 flex-1 flex-col">
-                    <span className="flex min-w-0 items-center gap-2">
-                      <span className="truncate">{option.label}</span>
-                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
-                    </span>
-                    {option.description ? (
-                      <span className="truncate text-xs text-muted-foreground">{option.description}</span>
-                    ) : null}
-                  </span>
-                )}
-              </SelectItem>
-            )
-          })
+          filteredGroups.map((group, groupIndex) => (
+            <SelectGroup key={groupIndex}>
+              {group.label ? <SelectLabel>{group.label}</SelectLabel> : null}
+              {group.options.map((option) => {
+                const selected = option.value === value
+                return (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                    className={cn("rounded-[var(--radius-md)]", itemClassName)}
+                  >
+                    {renderOption ? (
+                      renderOption(option, { selected })
+                    ) : (
+                      <span className="flex min-w-0 flex-1 flex-col">
+                        <span className="flex min-w-0 items-center gap-2">
+                          <span className="truncate">{option.label}</span>
+                          {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
+                        </span>
+                        {option.description ? (
+                          <span className="truncate text-xs text-muted-foreground">{option.description}</span>
+                        ) : null}
+                      </span>
+                    )}
+                  </SelectItem>
+                )
+              })}
+            </SelectGroup>
+          ))
         )}
       </SelectContent>
     </SelectRoot>

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

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Loader2Icon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -9,8 +10,29 @@ export type SwitchProps = Omit<
   checked?: boolean
   defaultChecked?: boolean
   onCheckedChange?: (checked: boolean) => void
+  size?: "sm" | "md" | "lg"
+  loading?: boolean
+  invalid?: boolean
+  label?: React.ReactNode
+  description?: React.ReactNode
+  labelPlacement?: "start" | "end" | "top" | "bottom"
+  switchClassName?: string
+  labelClassName?: string
+  descriptionClassName?: string
 }
 
+const switchSizeClassName = {
+  sm: "h-5 w-9",
+  md: "h-6.5 w-11.5",
+  lg: "h-8 w-14",
+} satisfies Record<NonNullable<SwitchProps["size"]>, string>
+
+const thumbSizeClassName = {
+  sm: "size-4 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
+  md: "size-5 data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
+  lg: "size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1",
+} satisfies Record<NonNullable<SwitchProps["size"]>, string>
+
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
   (
     {
@@ -18,6 +40,15 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       checked,
       defaultChecked = false,
       onCheckedChange,
+      size = "md",
+      loading = false,
+      invalid = false,
+      label,
+      description,
+      labelPlacement = "end",
+      switchClassName,
+      labelClassName,
+      descriptionClassName,
       disabled,
       onClick,
       ...props
@@ -27,8 +58,10 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     const isControlled = checked !== undefined
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
     const currentChecked = isControlled ? checked : internalChecked
+    const isDisabled = disabled || loading
 
     const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      if (isDisabled) return
       const nextChecked = !currentChecked
 
       if (!isControlled) {
@@ -39,18 +72,23 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       onClick?.(event)
     }
 
-    return (
+    const control = (
       <button
         ref={ref}
         type="button"
         role="switch"
         aria-checked={currentChecked}
+        aria-invalid={invalid || undefined}
+        aria-busy={loading || undefined}
         data-state={currentChecked ? "checked" : "unchecked"}
+        data-size={size}
         data-slot="switch"
-        disabled={disabled}
+        disabled={isDisabled}
         className={cn(
-          "peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]",
-          className
+          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]",
+          switchSizeClassName[size],
+          switchClassName,
+          !label && className
         )}
         onClick={handleClick}
         {...props}
@@ -59,11 +97,38 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
           data-slot="switch-thumb"
           data-state={currentChecked ? "checked" : "unchecked"}
           className={cn(
-            "pointer-events-none block size-5 rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5 dark:bg-[rgba(255,255,255,0.96)]"
+            "pointer-events-none flex items-center justify-center rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform dark:bg-[rgba(255,255,255,0.96)]",
+            thumbSizeClassName[size]
           )}
-        />
+        >
+          {loading ? <Loader2Icon className="size-3 animate-spin text-muted-foreground" /> : null}
+        </span>
       </button>
     )
+
+    if (!label && !description) return control
+
+    const labelBlock = (
+      <span className="grid min-w-0 gap-0.5">
+        {label ? <span className={cn("text-sm font-medium leading-5 text-foreground", labelClassName)}>{label}</span> : null}
+        {description ? <span className={cn("text-xs leading-5 text-muted-foreground", descriptionClassName)}>{description}</span> : null}
+      </span>
+    )
+
+    return (
+      <label
+        data-slot="switch-field"
+        data-label-placement={labelPlacement}
+        className={cn(
+          "inline-flex min-w-0 gap-3",
+          labelPlacement === "top" || labelPlacement === "bottom" ? "flex-col" : "items-start",
+          labelPlacement === "start" && "flex-row-reverse justify-end",
+          className
+        )}
+      >
+        {labelPlacement === "bottom" ? <>{control}{labelBlock}</> : <>{labelBlock}{control}</>}
+      </label>
+    )
   }
 )
 Switch.displayName = "Switch"

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

@@ -4,8 +4,13 @@ import { Tabs as BaseTabs } from "@base-ui/react/tabs"
 import { cn } from "@/lib/utils"
 
 export type TabsRootProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Root>
-export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>
-export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>
+export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List> & {
+  variant?: "default" | "pills" | "underline" | "compact"
+  overflow?: "wrap" | "scroll"
+}
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab> & {
+  variant?: "default" | "pills" | "underline" | "compact"
+}
 export type TabsContentProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>
 
 const Tabs = BaseTabs.Root
@@ -13,12 +18,19 @@ const Tabs = BaseTabs.Root
 const TabsList = React.forwardRef<
   React.ElementRef<typeof BaseTabs.List>,
   TabsListProps
->(({ className, ...props }, ref) => (
+>(({ className, variant = "default", overflow = "scroll", ...props }, ref) => (
     <BaseTabs.List
       ref={ref}
       data-slot="tabs-list"
+      data-variant={variant}
+      data-overflow={overflow}
       className={cn(
-        "inline-flex min-h-11 items-center justify-center 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 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",
+        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}
@@ -29,12 +41,16 @@ TabsList.displayName = "TabsList"
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof BaseTabs.Tab>,
   TabsTriggerProps
->(({ className, ...props }, ref) => (
+>(({ className, variant = "default", ...props }, ref) => (
     <BaseTabs.Tab
       ref={ref}
       data-slot="tabs-trigger"
+      data-variant={variant}
       className={cn(
-        "inline-flex min-h-9 items-center justify-center 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",
+        "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",
         className
       )}
     {...props}