tembro 2.0.5 → 2.1.0

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

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
 
 export type SelectRootProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
 export type SelectGroupProps = SelectPrimitive.Group.Props
@@ -21,7 +21,249 @@ export type SelectSeparatorProps = SelectPrimitive.Separator.Props
 export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>
 export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>
 
-const Select = SelectPrimitive.Root
+export type SelectOption = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+  description?: React.ReactNode
+  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
+  searchable?: boolean
+  loading?: boolean
+  loadingLabel?: React.ReactNode
+  disabled?: boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+  searchClassName?: string
+  renderOption?: (option: SelectOption, state: { selected: boolean }) => React.ReactNode
+  invalid?: boolean
+  onSearchChange?: (value: string) => void
+}
+
+const SelectRoot = SelectPrimitive.Root
+
+function optionMatchesSearch(option: SelectOption, search: string) {
+  const normalized = search.trim().toLowerCase()
+  if (!normalized) return true
+
+  const labelText =
+    typeof option.label === "string" || typeof option.label === "number"
+      ? String(option.label)
+      : option.value
+  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
+  return haystack.includes(normalized)
+}
+
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  groups,
+  placeholder = "Select",
+  searchPlaceholder = "Search options...",
+  emptyLabel = "No options found",
+  emptyMessage,
+  clearLabel = "Clear selection",
+  size = "default",
+  clearable = false,
+  searchable = false,
+  loading = false,
+  loadingLabel = "Loading options...",
+  disabled = false,
+  showSelectedDescription = true,
+  triggerClassName,
+  contentClassName,
+  itemClassName,
+  searchClassName,
+  renderOption,
+  invalid,
+  children,
+  onOpenChange,
+  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 [search, setSearch] = React.useState("")
+  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
+      value={value ?? undefined}
+      defaultValue={defaultValue ?? undefined}
+      onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
+      disabled={disabled || loading}
+      onOpenChange={(open, eventDetails) => {
+        if (!open) setSearch("")
+        onOpenChange?.(open, eventDetails)
+      }}
+      {...props}
+    >
+      <SelectTrigger
+        size={size}
+        aria-invalid={invalid || undefined}
+        className={cn("w-full", triggerClassName)}
+      >
+        <SelectValue placeholder={placeholder}>
+          {selectedOption ? (
+            <span className="flex min-w-0 flex-col items-start">
+              <span className="truncate">{selectedOption.label}</span>
+              {showSelectedDescription && selectedOption.description ? (
+                <span className="truncate text-[11px] font-medium text-muted-foreground">
+                  {selectedOption.description}
+                </span>
+              ) : null}
+            </span>
+          ) : null}
+        </SelectValue>
+        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
+        {clearable && value && !disabled && !loading ? (
+          <span
+            role="button"
+            tabIndex={0}
+            aria-label={clearLabel}
+            className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={(event) => {
+              event.preventDefault()
+              stopInteractivePropagation(event)
+              onValueChange?.(undefined)
+            }}
+            onMouseDown={stopInteractivePropagation}
+            onDoubleClick={stopInteractivePropagation}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                onValueChange?.(undefined)
+              }
+            }}
+          >
+            <XIcon className="size-3.5" />
+          </span>
+        ) : null}
+      </SelectTrigger>
+      <SelectContent className={cn("w-(--anchor-width)", contentClassName)}>
+        {searchable ? (
+          <div
+            data-slot="select-search"
+            className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm"
+          >
+            <SearchIcon className="size-4 text-muted-foreground" />
+            <input
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                onSearchChange?.(event.target.value)
+              }}
+              placeholder={searchPlaceholder}
+              className={cn(
+                "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                searchClassName
+              )}
+            />
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div
+            data-slot="select-state"
+            className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground"
+          >
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            {loadingLabel}
+          </div>
+        ) : 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>
+        ) : (
+          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>
+  )
+}
 
 function SelectGroup({ className, ...props }: SelectGroupProps) {
   return (
@@ -60,11 +302,7 @@ function SelectTrigger({
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon
-        render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
-      />
+      <SelectPrimitive.Icon render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />} />
     </SelectPrimitive.Trigger>
   )
 }
@@ -92,7 +330,10 @@ function SelectContent({
         <SelectPrimitive.Popup
           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", className)}
+          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",
+            className
+          )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -104,24 +345,20 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectLabelProps) {
+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={cn(
+        "px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90",
+        className
+      )}
       {...props}
     />
   )
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectItemProps) {
+function SelectItem({ className, children, ...props }: SelectItemProps) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -135,9 +372,7 @@ function SelectItem({
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
       >
         <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
@@ -145,10 +380,7 @@ function SelectItem({
   )
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectSeparatorProps) {
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
@@ -158,10 +390,7 @@ function SelectSeparator({
   )
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: SelectScrollUpButtonProps) {
+function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps) {
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
@@ -176,10 +405,7 @@ function SelectScrollUpButton({
   )
 }
 
-function SelectScrollDownButton({
-  className,
-  ...props
-}: SelectScrollDownButtonProps) {
+function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps) {
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"