@a4ui/core 0.37.0 → 0.38.0

package/src/ui/Menubar.tsx

@@ -0,0 +1,212 @@
+// Application menubar (File / Edit / View …) on Kobalte's Menubar primitive:
+// roving focus across the top-level triggers, hover-to-switch once a menu is
+// open, checkbox/radio items and nested submenus. Styled with the same glass
+// overlay surface as the other menus.
+import { Menubar as KMenubar } from '@kobalte/core/menubar'
+import { Check, ChevronRight, Circle } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Kbd } from './Kbd'
+
+const CONTENT =
+  'bg-glass z-50 min-w-[12rem] overflow-hidden rounded-xl p-1 text-sm text-foreground shadow-xl outline-none'
+const ITEM =
+  'relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-8 pr-2 outline-none transition-colors data-[highlighted]:bg-muted data-[expanded]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring'
+
+interface ClassProps extends ParentProps {
+  class?: string
+}
+
+/** Props of {@link Menubar}. */
+export interface MenubarProps extends ClassProps {
+  /** Accessible name of the menubar. @default 'Application menu' */
+  label?: string
+}
+
+/**
+ * Horizontal bar of top-level menus. Arrow Left/Right moves between the
+ * triggers; once one menu is open, hovering another trigger switches to it.
+ *
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu label="File">
+ *     <MenubarItem shortcut={['⌘', 'N']}>New project</MenubarItem>
+ *     <MenubarSeparator />
+ *     <MenubarItem>Quit</MenubarItem>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
+export function Menubar(props: MenubarProps): JSX.Element {
+  return (
+    <KMenubar
+      aria-label={props.label ?? 'Application menu'}
+      class={cn(
+        'inline-flex items-center gap-0.5 rounded-xl border border-border bg-card/60 p-1',
+        props.class,
+      )}
+    >
+      {props.children}
+    </KMenubar>
+  )
+}
+
+/** Props of {@link MenubarMenu}. */
+export interface MenubarMenuProps extends ClassProps {
+  /** Text of the top-level trigger. */
+  label: string
+  /** Extra classes for the popover content. */
+  contentClass?: string
+}
+
+/** One top-level menu: a trigger button plus its popover of items. */
+export function MenubarMenu(props: MenubarMenuProps): JSX.Element {
+  return (
+    <KMenubar.Menu>
+      <KMenubar.Trigger
+        class={cn(
+          'rounded-lg px-3 py-1.5 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted data-[expanded]:bg-muted focus-visible:ring-2 focus-visible:ring-ring',
+          props.class,
+        )}
+      >
+        {props.label}
+      </KMenubar.Trigger>
+      <KMenubar.Portal>
+        <KMenubar.Content class={cn(CONTENT, props.contentClass)}>{props.children}</KMenubar.Content>
+      </KMenubar.Portal>
+    </KMenubar.Menu>
+  )
+}
+
+/** Props of {@link MenubarItem}. */
+export interface MenubarItemProps extends ClassProps {
+  disabled?: boolean
+  /** Called when the item is chosen (click, Enter or Space). */
+  onSelect?: () => void
+  /** Keys shown right-aligned as keycaps, e.g. `['⌘', 'N']`. */
+  shortcut?: string[]
+  /** Styles the item as destructive (e.g. "Delete"). */
+  destructive?: boolean
+}
+
+function Shortcut(props: { keys?: string[] }): JSX.Element {
+  return (
+    <Show when={props.keys?.length}>
+      <span class="ml-auto flex gap-0.5 pl-6" aria-hidden="true">
+        <For each={props.keys}>{(k) => <Kbd class="min-w-[1.25rem] px-1 py-0 text-[11px]">{k}</Kbd>}</For>
+      </span>
+    </Show>
+  )
+}
+
+/** A plain action row, with an optional keyboard-shortcut hint. */
+export function MenubarItem(props: MenubarItemProps): JSX.Element {
+  return (
+    <KMenubar.Item
+      class={cn(ITEM, props.destructive && 'text-destructive', props.class)}
+      disabled={props.disabled}
+      onSelect={() => props.onSelect?.()}
+    >
+      {props.children}
+      <Shortcut keys={props.shortcut} />
+    </KMenubar.Item>
+  )
+}
+
+/** Props of {@link MenubarCheckboxItem}. */
+export interface MenubarCheckboxItemProps extends ClassProps {
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  shortcut?: string[]
+}
+
+/** A toggle row exposing `role="menuitemcheckbox"` / `aria-checked`. */
+export function MenubarCheckboxItem(props: MenubarCheckboxItemProps): JSX.Element {
+  return (
+    <KMenubar.CheckboxItem
+      class={cn(ITEM, props.class)}
+      checked={props.checked}
+      onChange={(v) => props.onChange?.(v)}
+      disabled={props.disabled}
+    >
+      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+        <Check class="h-3.5 w-3.5" />
+      </KMenubar.ItemIndicator>
+      {props.children}
+      <Shortcut keys={props.shortcut} />
+    </KMenubar.CheckboxItem>
+  )
+}
+
+/** Props of {@link MenubarRadioGroup}. */
+export interface MenubarRadioGroupProps extends ParentProps {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+/** Groups {@link MenubarRadioItem}s so exactly one is selected. */
+export function MenubarRadioGroup(props: MenubarRadioGroupProps): JSX.Element {
+  return (
+    <KMenubar.RadioGroup value={props.value} onChange={(v) => props.onChange?.(v)}>
+      {props.children}
+    </KMenubar.RadioGroup>
+  )
+}
+
+/** Props of {@link MenubarRadioItem}. */
+export interface MenubarRadioItemProps extends ClassProps {
+  value: string
+  disabled?: boolean
+}
+
+/** A single-choice row inside a {@link MenubarRadioGroup} (`role="menuitemradio"`). */
+export function MenubarRadioItem(props: MenubarRadioItemProps): JSX.Element {
+  return (
+    <KMenubar.RadioItem class={cn(ITEM, props.class)} value={props.value} disabled={props.disabled}>
+      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+        <Circle class="h-2 w-2 fill-current" />
+      </KMenubar.ItemIndicator>
+      {props.children}
+    </KMenubar.RadioItem>
+  )
+}
+
+/** Props of {@link MenubarSub}. */
+export interface MenubarSubProps extends ClassProps {
+  /** Text of the submenu trigger row. */
+  label: string
+}
+
+/** A nested submenu: opens with ArrowRight / hover, closes with ArrowLeft. */
+export function MenubarSub(props: MenubarSubProps): JSX.Element {
+  return (
+    <KMenubar.Sub overlap gutter={4} shift={-5}>
+      <KMenubar.SubTrigger class={cn(ITEM, props.class)}>
+        {props.label}
+        <ChevronRight class="ml-auto h-3.5 w-3.5 text-muted-foreground" />
+      </KMenubar.SubTrigger>
+      <KMenubar.Portal>
+        <KMenubar.SubContent class={CONTENT}>{props.children}</KMenubar.SubContent>
+      </KMenubar.Portal>
+    </KMenubar.Sub>
+  )
+}
+
+/** Thin divider between groups of items. */
+export function MenubarSeparator(props: { class?: string }): JSX.Element {
+  return <KMenubar.Separator class={cn('-mx-1 my-1 h-px border-0 bg-border', props.class)} />
+}
+
+/** Non-interactive section heading inside a menu. */
+export function MenubarLabel(props: ClassProps): JSX.Element {
+  const [local] = splitProps(props, ['class', 'children'])
+  return (
+    <div class={cn('px-2 py-1.5 pl-8 text-xs font-semibold text-muted-foreground', local.class)}>
+      {local.children}
+    </div>
+  )
+}

package/src/ui/Message.tsx

@@ -1,13 +1,21 @@
-// Message — one chat message row, full-width (no bubble). Rich content is
-// passed as children so the caller can render markdown, code blocks, lists,
+// Message — one chat message row. By default full-width with no bubble; pass
+// `variant` for a bubble style and `align` to push it to one side. Rich content
+// is passed as children so the caller can render markdown, code blocks, lists,
 // etc. inside the readable prose block.
-import { type JSX, Match, Show, Switch } from 'solid-js'
+import { createContext, type JSX, Match, Show, Switch, useContext } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
 /** Who sent a {@link Message}; drives its subtle visual treatment. */
 export type ChatRole = 'user' | 'assistant' | 'system'
 
+/** Bubble style of a {@link Message}. */
+export type MessageVariant =
+  'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive'
+
+/** Which side of the thread a message sits on. */
+export type MessageAlign = 'start' | 'end'
+
 export interface MessageProps {
   role: ChatRole
   children: JSX.Element
@@ -17,40 +25,85 @@ export interface MessageProps {
   avatar?: JSX.Element
   /** Preformatted timestamp string, e.g. `'2:45 PM'`. */
   timestamp?: string
+  /** Stable id, rendered as `data-message-id` so `ChatThread.scrollToMessage` can find it. */
+  id?: string
+  /**
+   * Bubble style. When omitted the legacy role-based treatment applies
+   * (`assistant` faint panel, `user` faint tint).
+   */
+  variant?: MessageVariant
+  /** Push the message to one side and shrink it to its content (max 85% wide). */
+  align?: MessageAlign
+  /** Slot under the content, e.g. a row of reaction chips. */
+  reactions?: JSX.Element
+  /** Slot under the content for `Attachment`s (wrap several in `AttachmentGroup`). */
+  attachments?: JSX.Element
   class?: string
 }
 
+const VARIANT: Record<MessageVariant, string> = {
+  default: 'border border-border bg-card text-card-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  muted: 'bg-muted/60 text-foreground',
+  tinted: 'border border-primary/20 bg-primary/10 text-foreground',
+  outline: 'border border-border bg-transparent text-foreground',
+  ghost: 'bg-transparent text-foreground',
+  destructive: 'border border-destructive/30 bg-destructive/10 text-destructive',
+}
+
+interface MessageGroupContext {
+  align?: MessageAlign
+  variant?: MessageVariant
+}
+
+const GroupContext = createContext<MessageGroupContext>()
+
 /**
- * Full-width chat message row with no bubble: an optional avatar/author
- * header line followed by a prose content block. Role is differentiated with
- * subtle, token-based treatment only — `assistant` gets a faint muted panel,
- * `user` stays plain, `system` is a small centered note.
+ * One chat message: an optional avatar/author header followed by a prose
+ * content block, with optional `reactions` and `attachments` slots. Role is
+ * differentiated with subtle, token-based treatment — or choose a bubble
+ * `variant` and an `align` side. Inside a {@link MessageGroup} the header is
+ * suppressed (the group shows the sender once).
  *
  * @example
  * ```tsx
- * <Message role="assistant" author="Nova" timestamp="2:45 PM">
+ * <Message role="assistant" author="Nova" timestamp="2:45 PM" variant="secondary" align="start">
  *   <p>Here's the summary you asked for.</p>
  * </Message>
  * ```
  */
 export function Message(props: MessageProps): JSX.Element {
+  const group = useContext(GroupContext)
+  const variant = (): MessageVariant | undefined => props.variant ?? group?.variant
+  const align = (): MessageAlign | undefined => props.align ?? group?.align
   return (
     <Switch>
       <Match when={props.role === 'system'}>
-        <div class={cn('text-center text-xs text-muted-foreground italic', props.class)}>
+        <div
+          data-message-id={props.id}
+          class={cn('text-center text-xs text-muted-foreground italic', props.class)}
+        >
           {props.children}
         </div>
       </Match>
       <Match when={true}>
         <div
+          data-message-id={props.id}
+          data-variant={variant()}
+          data-align={align()}
           class={cn(
             'flex flex-col gap-1',
-            props.role === 'assistant' && 'rounded-xl bg-muted/40 p-3',
-            props.role === 'user' && 'rounded-xl bg-primary/5 p-3',
+            variant() ? 'rounded-2xl px-3.5 py-2.5' : 'rounded-xl',
+            variant() ? VARIANT[variant()!] : 'text-foreground',
+            !variant() && props.role === 'assistant' && 'bg-muted/40 p-3',
+            !variant() && props.role === 'user' && 'bg-primary/5 p-3',
+            align() && 'w-fit max-w-[85%]',
+            align() === 'end' && 'self-end',
+            align() === 'start' && 'self-start',
             props.class,
           )}
         >
-          <Show when={props.author || props.avatar || props.timestamp}>
+          <Show when={!group && (props.author || props.avatar || props.timestamp)}>
             <div class="flex items-center gap-2">
               {props.avatar}
               <Show when={props.author}>
@@ -61,9 +114,82 @@ export function Message(props: MessageProps): JSX.Element {
               </Show>
             </div>
           </Show>
-          <div class="space-y-2 text-sm leading-relaxed text-foreground">{props.children}</div>
+          <div class="space-y-2 text-sm leading-relaxed">{props.children}</div>
+          <Show when={props.attachments}>
+            <div data-slot="message-attachments" class="mt-1 max-w-full">
+              {props.attachments}
+            </div>
+          </Show>
+          <Show when={props.reactions}>
+            <div data-slot="message-reactions" class="mt-1 flex flex-wrap items-center gap-1">
+              {props.reactions}
+            </div>
+          </Show>
         </div>
       </Match>
     </Switch>
   )
 }
+
+export interface MessageGroupProps {
+  /** Sender name, shown once above the group. */
+  author?: string
+  /** Sender avatar, shown once next to the name. */
+  avatar?: JSX.Element
+  /** Timestamp of the first message, shown once. */
+  timestamp?: string
+  /** Side for every message in the group (a message can still override it). */
+  align?: MessageAlign
+  /** Bubble style for every message in the group (a message can still override it). */
+  variant?: MessageVariant
+  /** The consecutive `Message`s from this sender. */
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Visually groups consecutive messages from one sender: avatar, name and time
+ * appear once, and the bubbles sit closer together than separate messages.
+ *
+ * @example
+ * ```tsx
+ * <MessageGroup author="Nova" avatar={<Avatar name="Nova" size="sm" />} variant="secondary" align="start">
+ *   <Message role="assistant">First thought.</Message>
+ *   <Message role="assistant">And a follow-up.</Message>
+ * </MessageGroup>
+ * ```
+ */
+export function MessageGroup(props: MessageGroupProps): JSX.Element {
+  return (
+    <GroupContext.Provider
+      value={{
+        get align() {
+          return props.align
+        },
+        get variant() {
+          return props.variant
+        },
+      }}
+    >
+      <div
+        role="group"
+        aria-label={props.author ? `Messages from ${props.author}` : undefined}
+        data-slot="message-group"
+        class={cn('flex flex-col gap-1', props.class)}
+      >
+        <Show when={props.author || props.avatar || props.timestamp}>
+          <div class={cn('flex items-center gap-2', props.align === 'end' && 'flex-row-reverse')}>
+            {props.avatar}
+            <Show when={props.author}>
+              <span class="text-sm font-medium text-foreground">{props.author}</span>
+            </Show>
+            <Show when={props.timestamp}>
+              <span class="text-xs text-muted-foreground">{props.timestamp}</span>
+            </Show>
+          </div>
+        </Show>
+        {props.children}
+      </div>
+    </GroupContext.Provider>
+  )
+}

package/src/ui/Modal.tsx

@@ -12,7 +12,7 @@ import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
-interface ModalProps extends ParentProps {
+export interface ModalProps extends ParentProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   /** Header title; omitting it hides the whole header bar. */
@@ -24,11 +24,41 @@ interface ModalProps extends ParentProps {
    * @default 'drawer'
    */
   variant?: 'drawer' | 'center'
+  /**
+   * Width of the dialog: `'sm'` 24rem, `'md'` 32rem, `'lg'` 42rem, `'xl'` 56rem,
+   * `'full'` the whole viewport minus margin. Omitted keeps the historical width
+   * (`variant="center"`: 32rem, `variant="drawer"`: 520px). Content taller than
+   * the viewport scrolls inside the dialog; the header stays pinned.
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   class?: string
   /** Accessible label for the close button. @default 'Close' */
   closeLabel?: string
 }
 
+const CENTER_WIDTH = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  full: 'max-w-full',
+} as const
+const DRAWER_WIDTH = {
+  sm: 'max-w-sm',
+  md: 'max-w-[520px]',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  full: 'max-w-full',
+} as const
+
+// Popovers inside the dialog (MultiSelect, ...) are portaled to <body>, so
+// Kobalte sees a click on them as "outside" and would close the dialog. Those
+// panels carry `data-a4-floating`; interacting with one is not a dismissal.
+function keepForFloating(e: Event): void {
+  const target = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent?.target ?? e.target
+  if (target instanceof Element && target.closest('[data-a4-floating]')) e.preventDefault()
+}
+
 /**
  * Dialog on Kobalte's `Dialog` primitive (focus trap, portal, presence handled
  * for you), rendered as either a slide-over drawer or a centered modal depending
@@ -53,8 +83,10 @@ export function Modal(props: ModalProps): JSX.Element {
           fallback={
             <div class="fixed inset-0 z-50 flex justify-end">
               <Dialog.Content
+                onInteractOutside={keepForFloating}
                 class={cn(
-                  'drawer-content bg-glass flex h-full w-full max-w-[520px] flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  'drawer-content bg-glass flex h-full w-full flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  DRAWER_WIDTH[props.size ?? 'md'],
                   props.class,
                 )}
               >
@@ -78,13 +110,15 @@ export function Modal(props: ModalProps): JSX.Element {
         >
           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
             <Dialog.Content
+              onInteractOutside={keepForFloating}
               class={cn(
-                'modal-content w-full max-w-lg rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+                'modal-content flex max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+                CENTER_WIDTH[props.size ?? 'md'],
                 props.class,
               )}
             >
               <Show when={props.title}>
-                <div class="flex items-center justify-between border-b border-border p-6 pb-4">
+                <div class="flex shrink-0 items-center justify-between border-b border-border p-6 pb-4">
                   <Dialog.Title class="text-lg font-semibold leading-none tracking-tight">
                     {props.title}
                   </Dialog.Title>
@@ -96,7 +130,9 @@ export function Modal(props: ModalProps): JSX.Element {
                   </Dialog.CloseButton>
                 </div>
               </Show>
-              <div class="p-6 pt-4">{props.children}</div>
+              <div data-modal-body class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6 pt-4">
+                {props.children}
+              </div>
             </Dialog.Content>
           </div>
         </Show>

package/src/ui/MultiSelect.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 /** One selectable option: a stable `value` and its display `label`. */
@@ -89,17 +90,25 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.
@@ -179,7 +188,8 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
               left: `${pos().left}px`,
               width: `${pos().width}px`,
             }}
-            class="z-50 min-w-56 rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg"
+            data-a4-floating
+            class="pointer-events-auto z-50 min-w-56 rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg"
           >
             <Show when={props.searchable ?? true}>
               <input

package/src/ui/NativeSelect.tsx

@@ -0,0 +1,66 @@
+import { ChevronDown } from 'lucide-solid'
+import { createEffect, splitProps, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export type NativeSelectSize = 'sm' | 'default'
+
+interface NativeSelectProps extends Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /** @default 'default' */
+  size?: NativeSelectSize
+  /** Marks the field invalid (destructive border + `aria-invalid`). */
+  invalid?: boolean
+  /** Class for the `<select>`; use `wrapperClass` for the outer box. */
+  class?: string
+  wrapperClass?: string
+}
+
+export type { NativeSelectProps }
+
+const SIZE: Record<NativeSelectSize, string> = {
+  default: 'py-2 text-sm',
+  sm: 'py-1 text-xs',
+}
+
+/**
+ * Styled native `<select>` — gets the OS picker on mobile. Takes `<option>` and
+ * `<optgroup>` children; `value`, `onChange` and every other select attribute
+ * pass straight through.
+ *
+ * @example
+ * ```tsx
+ * <NativeSelect value={plan()} onChange={(e) => setPlan(e.currentTarget.value)} aria-label="Plan">
+ *   <option value="free">Free</option>
+ *   <option value="pro">Pro</option>
+ * </NativeSelect>
+ * ```
+ */
+export function NativeSelect(props: NativeSelectProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['size', 'invalid', 'class', 'wrapperClass', 'children', 'value'])
+  let select: HTMLSelectElement | undefined
+  // Set after mount: a `value` attribute applied before the <option> children exist is ignored.
+  createEffect(() => {
+    if (select && local.value !== undefined) select.value = String(local.value)
+  })
+  return (
+    <div class={cn('relative w-full', local.wrapperClass)}>
+      <select
+        ref={select}
+        aria-invalid={local.invalid ? 'true' : undefined}
+        class={cn(
+          'peer w-full appearance-none rounded-md border bg-background pl-3 pr-9 text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50',
+          local.invalid ? 'border-destructive' : 'border-input',
+          SIZE[local.size ?? 'default'],
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+      </select>
+      <ChevronDown
+        aria-hidden="true"
+        class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
+      />
+    </div>
+  )
+}