@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/backend/messages/message-compose-form-groups.tsx

@@ -4,6 +4,13 @@ import { type CrudField } from '../CrudForm'
 import { IconButton } from '../../primitives/icon-button'
 import { Input } from '../../primitives/input'
 import { Label } from '../../primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { Switch } from '../../primitives/switch'
 import { AttachmentsSection } from '../detail/AttachmentsSection'
 import { SwitchableMarkdownInput } from '../inputs/SwitchableMarkdownInput'
@@ -98,19 +105,21 @@ function ContextActionsSection({ compose }: ComposeProps) {
           <Label htmlFor="messages-compose-context-action-type">
             {compose.t('messages.composer.objectPicker.actionTypeLabel', 'Action type')}
           </Label>
-          <select
-            id="messages-compose-context-action-type"
-            value={compose.contextActionType}
-            onChange={(event) => compose.setContextActionType(event.target.value)}
-            className="h-9 w-full rounded-md border bg-background px-3 text-sm"
+          <Select
+            value={compose.contextActionType || undefined}
+            onValueChange={(value) => compose.setContextActionType(value || '')}
           >
-            <option value="">{compose.t('messages.composer.objectPicker.actionTypePlaceholder', 'Select action')}</option>
-            {compose.contextActionOptions.map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="messages-compose-context-action-type">
+              <SelectValue placeholder={compose.t('messages.composer.objectPicker.actionTypePlaceholder', 'Select action')} />
+            </SelectTrigger>
+            <SelectContent>
+              {compose.contextActionOptions.map((option) => (
+                <SelectItem key={option.id} value={option.id}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       ) : null}
     </div>

package/src/backend/messages/useMessageCompose.ts

@@ -154,6 +154,16 @@ export function useMessageCompose({
   const [submitting, setSubmitting] = React.useState(false)
   const [submitMode, setSubmitMode] = React.useState<'send' | 'draft'>('send')
   const [submitError, setSubmitError] = React.useState<string | null>(null)
+  // Tracks whether the composer is currently in the "open" lifecycle so the init
+  // effect below only runs on the closed → open transition, not on every parent
+  // re-render that produces a new `defaultValues` / `contextObject` reference
+  // while the user is typing. Without this guard, an inline literal
+  // `defaultValues={{...}}` in a re-rendering parent (e.g. message detail page
+  // with live notification badges or queue progress) would clear the body /
+  // subject mid-keystroke. CI shard 9 surfaced this as TC-MSG-009 timing out
+  // because `keyboard.type` characters appeared to "type nowhere" — they were
+  // typed correctly, then immediately wiped by the next effect run.
+  const isOpenRef = React.useRef(false)
 
   const messageTypesQuery = useQuery({
     queryKey: ['messages', 'types'],
@@ -219,7 +229,16 @@ export function useMessageCompose({
   }, [attachmentEntityId, attachmentRecordId, t])
 
   React.useEffect(() => {
-    if (!isOpen) return
+    if (!isOpen) {
+      isOpenRef.current = false
+      return
+    }
+    // Only initialize on the closed → open transition. Subsequent parent
+    // re-renders that change `defaultValues` / `contextObject` references
+    // (inline object literals are a new reference on every render) MUST NOT
+    // overwrite state the user has typed in.
+    if (isOpenRef.current) return
+    isOpenRef.current = true
 
     const nextRecipients = defaultValues?.recipients?.filter((value) => typeof value === 'string' && value.trim().length > 0) ?? []
     const dedupedRecipients = Array.from(new Set(nextRecipients))

package/src/frontend/LanguageSwitcher.tsx

@@ -3,6 +3,13 @@ import { useId, useTransition } from 'react'
 import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
 import { useRouter } from 'next/navigation'
 import { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 
 export function LanguageSwitcher() {
   const current = useLocale()
@@ -41,26 +48,22 @@ export function LanguageSwitcher() {
   return (
     <div className="flex items-center gap-2 text-xs text-muted-foreground">
       <label htmlFor={selectId}>{t('common.language')}</label>
-      <div className="relative">
-        <select
-          id={selectId}
-          className="appearance-none rounded-md border bg-background px-3 py-1 pr-8 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50"
-          value={current}
-          onChange={(event) => setLocale(event.target.value as Locale)}
-          disabled={pending}
-        >
+      <Select
+        value={current}
+        onValueChange={(value) => setLocale(value as Locale)}
+        disabled={pending}
+      >
+        <SelectTrigger id={selectId} size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
           {locales.map((locale) => (
-            <option key={locale} value={locale}>
+            <SelectItem key={locale} value={locale}>
               {languageLabels[locale]}
-            </option>
+            </SelectItem>
           ))}
-        </select>
-        <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground">
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M6 9l6 6 6-6" />
-          </svg>
-        </span>
-      </div>
+        </SelectContent>
+      </Select>
     </div>
   )
 }

package/src/index.ts

@@ -32,6 +32,11 @@ export * from './primitives/social-button'
 export * from './primitives/fancy-button'
 export * from './primitives/checkbox'
 export * from './primitives/checkbox-field'
+export * from './primitives/select'
+export * from './primitives/switch'
+export * from './primitives/switch-field'
+export * from './primitives/radio'
+export * from './primitives/radio-field'
 export * from './primitives/label'
 export * from './primitives/separator'
 export * from './primitives/spinner'

package/src/primitives/checkbox-field.tsx

@@ -38,13 +38,14 @@ export const CheckboxField = React.forwardRef<
   const reactId = React.useId()
   const id = idProp ?? `checkbox-field-${reactId}`
 
+  const hasMultiLine = Boolean(description || sublabel || link)
   const checkbox = (
     <Checkbox
       ref={ref}
       id={id}
       size={size}
       disabled={disabled}
-      className={cn("mt-0.5", className)}
+      className={cn(hasMultiLine && "mt-0.5", className)}
       {...checkboxProps}
     />
   )
@@ -76,7 +77,14 @@ export const CheckboxField = React.forwardRef<
   )
 
   return (
-    <div className={cn("flex items-start gap-2", flip && "flex-row-reverse", containerClassName)}>
+    <div
+      className={cn(
+        "flex gap-2",
+        hasMultiLine ? "items-start" : "items-center",
+        flip && "flex-row-reverse",
+        containerClassName
+      )}
+    >
       {flip ? content : checkbox}
       {flip ? checkbox : content}
     </div>

package/src/primitives/input.tsx

@@ -1,20 +1,81 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
-type InputProps = React.ComponentPropsWithoutRef<'input'>
+const inputWrapperVariants = cva(
+  'inline-flex w-full items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors focus-within:outline-none focus-within:shadow-focus focus-within:border-foreground hover:bg-muted/40 has-[input:disabled]:bg-bg-disabled has-[input:disabled]:border-border-disabled has-[input:disabled]:shadow-none has-[input:disabled]:hover:bg-bg-disabled has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:focus-within:border-destructive',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5',
+        default: 'h-9 px-3',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+const inputElementVariants = cva(
+  'flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-transparent',
+  {
+    variants: {
+      size: {
+        sm: 'text-xs',
+        default: 'text-sm',
+        lg: 'text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+export type InputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+    /** Optional className on the inner <input> element. */
+    inputClassName?: string
+  }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type = 'text', ...props }, ref) => (
-    <input
-      ref={ref}
-      type={type}
-      className={cn(
-        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    />
-  )
+  ({ className, inputClassName, type = 'text', size, leftIcon, rightIcon, ...props }, ref) => {
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), className)}
+        data-slot="input-wrapper"
+      >
+        {leftIcon ? (
+          <span
+            className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4"
+            aria-hidden="true"
+          >
+            {leftIcon}
+          </span>
+        ) : null}
+        <input
+          ref={ref}
+          type={type}
+          className={cn(inputElementVariants({ size }), inputClassName)}
+          {...props}
+        />
+        {rightIcon ? (
+          <span
+            className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4"
+            aria-hidden="true"
+          >
+            {rightIcon}
+          </span>
+        ) : null}
+      </div>
+    )
+  }
 )
 
 Input.displayName = 'Input'
+
+export { inputWrapperVariants, inputElementVariants }

package/src/primitives/radio-field.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Radio } from './radio'
+
+export type RadioFieldProps = Omit<React.ComponentProps<typeof Radio>, 'id'> & {
+  id?: string
+  label: React.ReactNode
+  sublabel?: React.ReactNode
+  description?: React.ReactNode
+  badge?: React.ReactNode
+  link?: React.ReactNode
+  /** When true, renders the radio on the right of the label content. */
+  flip?: boolean
+  containerClassName?: string
+  contentClassName?: string
+}
+
+export const RadioField = React.forwardRef<
+  React.ElementRef<typeof Radio>,
+  RadioFieldProps
+>(({
+  id: idProp,
+  label,
+  sublabel,
+  description,
+  badge,
+  link,
+  flip = false,
+  containerClassName,
+  contentClassName,
+  className,
+  disabled,
+  ...radioProps
+}, ref) => {
+  // useId is SSR/HMR-stable; counter-based fallbacks drift on hydration.
+  const fallbackId = React.useId()
+  const id = idProp ?? fallbackId
+
+  const hasMultiLine = Boolean(description || sublabel || link)
+  const radio = (
+    <Radio
+      ref={ref}
+      id={id}
+      disabled={disabled}
+      className={cn(hasMultiLine && 'mt-0.5', className)}
+      {...radioProps}
+    />
+  )
+
+  const content = (
+    <div className={cn('flex flex-1 min-w-0 flex-col gap-2.5', contentClassName)}>
+      <div className="flex flex-col gap-1">
+        <div className="flex flex-wrap items-center gap-1">
+          <label
+            htmlFor={id}
+            className={cn(
+              'text-sm font-medium leading-5 text-foreground select-none',
+              disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
+            )}
+          >
+            {label}
+          </label>
+          {sublabel ? (
+            <span className="text-xs leading-4 text-muted-foreground select-none">{sublabel}</span>
+          ) : null}
+          {badge ? <span className="inline-flex shrink-0">{badge}</span> : null}
+        </div>
+        {description ? (
+          <p className="text-xs leading-4 text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {link ? <div className="flex">{link}</div> : null}
+    </div>
+  )
+
+  return (
+    <div
+      className={cn(
+        'flex gap-2',
+        hasMultiLine ? 'items-start' : 'items-center',
+        flip && 'flex-row-reverse',
+        containerClassName
+      )}
+    >
+      {flip ? content : radio}
+      {flip ? radio : content}
+    </div>
+  )
+})
+RadioField.displayName = 'RadioField'

package/src/primitives/radio.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex flex-col gap-2', className)}
+    {...props}
+  />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+export const Radio = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aspect-square size-5 shrink-0 rounded-full border border-input bg-background',
+      'flex items-center justify-center transition-colors',
+      'hover:border-muted-foreground/40',
+      'data-[state=checked]:border-accent-indigo data-[state=checked]:bg-accent-indigo',
+      'focus-visible:outline-none focus-visible:shadow-focus',
+      'disabled:cursor-not-allowed disabled:opacity-60',
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <span aria-hidden="true" className="block size-2 rounded-full bg-white" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+Radio.displayName = RadioGroupPrimitive.Item.displayName

package/src/primitives/select.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const selectTriggerVariants = cva(
+  'inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:bg-muted/40 focus:outline-none focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:[&_svg]:opacity-60 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5 text-xs',
+        default: 'h-9 px-3 text-sm',
+        lg: 'h-10 px-3 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
+  VariantProps<typeof selectTriggerVariants>
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, size, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(selectTriggerVariants({ size }), className)}
+    data-slot="select-trigger"
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="text-muted-foreground" aria-hidden="true" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1 text-muted-foreground', className)}
+    {...props}
+  >
+    <ChevronUp className="size-4" aria-hidden="true" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1 text-muted-foreground', className)}
+    {...props}
+  >
+    <ChevronDown className="size-4" aria-hidden="true" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', sideOffset = 4, ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      position={position}
+      sideOffset={sideOffset}
+      className={cn(
+        'relative z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-input bg-popover text-popover-foreground shadow-md outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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',
+        position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]',
+        className
+      )}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1 max-h-[var(--radix-select-content-available-height)] overflow-y-auto',
+          position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-overline uppercase text-muted-foreground', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors',
+      'focus:bg-muted focus:text-foreground',
+      'data-[state=checked]:bg-muted/70 data-[state=checked]:text-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+      className
+    )}
+    {...props}
+  >
+    <span className="flex-1 truncate">
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </span>
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-4 text-foreground" aria-hidden="true" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+/**
+ * Wraps Radix `Select.Root` to absorb the controlled/uncontrolled transition
+ * many call sites trigger by passing `value={x || undefined}`. React fires
+ * "Select is changing from uncontrolled to controlled" the moment value flips
+ * from undefined to a defined string, and Radix's internal state ends up in
+ * an inconsistent shape (dropdown flashes, selections no-op). Coercing
+ * `undefined` → `''` keeps Radix in stable controlled mode for the lifetime
+ * of the component while preserving "no selection" semantics — Radix simply
+ * matches no SelectItem and `SelectValue` falls back to the placeholder.
+ */
+const Select = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
+>(({ value, defaultValue, onValueChange, ...props }, _ref) => {
+  const isControlled = value !== undefined || onValueChange !== undefined
+  if (!isControlled) {
+    return <SelectPrimitive.Root defaultValue={defaultValue} {...props} />
+  }
+  return (
+    <SelectPrimitive.Root
+      value={value ?? ''}
+      onValueChange={onValueChange}
+      {...props}
+    />
+  )
+}) as unknown as typeof SelectPrimitive.Root
+;(Select as React.ComponentType).displayName = 'Select'
+const SelectGroup = SelectPrimitive.Group
+const SelectValue = SelectPrimitive.Value
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  selectTriggerVariants,
+}