@a4ui/core 0.11.1 → 0.12.0

package/src/ui/Splitter.tsx

@@ -0,0 +1,115 @@
+// Resizable split panes with a draggable, keyboard-operable divider.
+import type { JSX } from 'solid-js'
+import { createSignal } from 'solid-js'
+import { cn } from '../lib/cn'
+
+export interface SplitterProps {
+  /** Content of the first pane (left when horizontal, top when vertical). */
+  start: JSX.Element
+  /** Content of the second pane (right when horizontal, bottom when vertical). */
+  end: JSX.Element
+  /** Layout axis. `'horizontal'` (default) splits side-by-side with a vertical divider; `'vertical'` stacks the panes with a horizontal divider. */
+  orientation?: 'horizontal' | 'vertical'
+  /** Initial size of the first pane, as a percentage of the container. Defaults to `50`. */
+  initial?: number
+  /** Minimum size of the first pane, as a percentage. Defaults to `15`. */
+  min?: number
+  /** Maximum size of the first pane, as a percentage. Defaults to `85`. */
+  max?: number
+  class?: string
+}
+
+/**
+ * Two panes separated by a draggable divider that resizes them. Drag the
+ * divider with a pointer or focus it and use the Arrow keys to nudge the split.
+ * The first pane's size is tracked as a percentage and clamped to `[min, max]`.
+ *
+ * @example
+ * ```tsx
+ * <Splitter
+ *   orientation="horizontal"
+ *   initial={40}
+ *   start={<div class="p-4">Sidebar</div>}
+ *   end={<div class="p-4">Main content</div>}
+ * />
+ * ```
+ */
+export function Splitter(props: SplitterProps): JSX.Element {
+  const orientation = () => props.orientation ?? 'horizontal'
+  const min = () => props.min ?? 15
+  const max = () => props.max ?? 85
+
+  const clamp = (value: number) => Math.min(max(), Math.max(min(), value))
+
+  const [size, setSize] = createSignal(clamp(props.initial ?? 50))
+
+  let container: HTMLDivElement | undefined
+
+  const updateFromPointer = (event: PointerEvent) => {
+    if (!container) return
+    const rect = container.getBoundingClientRect()
+    const pct =
+      orientation() === 'horizontal'
+        ? ((event.clientX - rect.left) / rect.width) * 100
+        : ((event.clientY - rect.top) / rect.height) * 100
+    setSize(clamp(pct))
+  }
+
+  const onPointerDown = (event: PointerEvent) => {
+    const divider = event.currentTarget as HTMLElement
+    divider.setPointerCapture(event.pointerId)
+    divider.addEventListener('pointermove', updateFromPointer)
+    const release = () => {
+      divider.removeEventListener('pointermove', updateFromPointer)
+      divider.removeEventListener('pointerup', release)
+      divider.removeEventListener('lostpointercapture', release)
+    }
+    divider.addEventListener('pointerup', release)
+    divider.addEventListener('lostpointercapture', release)
+    event.preventDefault()
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const step = 3
+    let delta = 0
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') delta = -step
+    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') delta = step
+    else if (event.key === 'Home') return setSize(min())
+    else if (event.key === 'End') return setSize(max())
+    else return
+    event.preventDefault()
+    setSize((s) => clamp(s + delta))
+  }
+
+  return (
+    <div
+      ref={container}
+      class={cn(
+        'flex overflow-hidden',
+        orientation() === 'horizontal' ? 'h-64 flex-row' : 'flex-col',
+        props.class,
+      )}
+    >
+      <div class="overflow-auto" style={{ 'flex-basis': `${size()}%` }}>
+        {props.start}
+      </div>
+      <div
+        role="separator"
+        aria-orientation={orientation()}
+        aria-valuenow={Math.round(size())}
+        aria-valuemin={min()}
+        aria-valuemax={max()}
+        tabindex={0}
+        onPointerDown={onPointerDown}
+        onKeyDown={onKeyDown}
+        class={cn(
+          'shrink-0 bg-border transition-colors hover:bg-primary/50 focus-visible:bg-primary/50 focus-visible:outline-none',
+          orientation() === 'horizontal' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize',
+        )}
+      />
+      <div class="flex-1 overflow-auto" style={{ 'flex-basis': `${100 - size()}%` }}>
+        {props.end}
+      </div>
+    </div>
+  )
+}

package/src/ui/Stat.tsx

@@ -0,0 +1,74 @@
+// KPI / stat card with two motion touches: a Motion (motion.dev) fade-up
+// entrance (staggered via `delay`) and a createCountUp tween on the numeric
+// value — both gated on reduced motion. This is the design system's showcase of
+// the motion layer (Motion's `animate` + the count-up helper) in a real component.
+import { Show, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animateIn, createCountUp } from '../lib/motion'
+import { Card, CardContent } from './Card'
+
+/** Color scheme applied to a {@link Stat}'s icon badge. */
+export type StatTone = 'primary' | 'success' | 'danger' | 'neutral'
+
+const TONE_CLASSES: Record<StatTone, string> = {
+  primary: 'bg-primary/15 text-primary',
+  success: 'bg-emerald-500/15 text-emerald-600',
+  danger: 'bg-rose-500/15 text-rose-600',
+  neutral: 'bg-muted text-muted-foreground',
+}
+
+interface StatProps {
+  label: string
+  /** Numeric value — count-up tweens toward it on mount and on change. */
+  value: number
+  /** Format the (animating) number for display. Default: rounded integer. */
+  format?: (n: number) => string
+  icon?: JSX.Element
+  tone?: StatTone
+  /** Entrance stagger delay in seconds (for a row of stats). */
+  delay?: number
+  class?: string
+}
+
+/**
+ * KPI / stat card showing a label, an animated count-up numeric value, and
+ * an optional tone-colored icon badge. Combines a `solid-motionone` fade-up
+ * entrance (use `delay` to stagger a row of stats) with the `createCountUp`
+ * tween — both automatically disabled under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Stat label="Active users" value={activeUsers()} tone="success" icon={<UsersIcon />} />
+ * ```
+ */
+export function Stat(props: StatProps): JSX.Element {
+  const count = createCountUp(() => props.value)
+  const display = () => (props.format ?? ((n) => String(Math.round(n))))(count())
+  let ref: HTMLDivElement | undefined
+  onMount(() => {
+    if (ref) animateIn(ref, { delay: props.delay ?? 0 })
+  })
+  return (
+    <div ref={ref}>
+      <Card glass glow class={props.class}>
+        <CardContent class="flex items-center gap-4 p-5">
+          <Show when={props.icon}>
+            <div
+              class={cn(
+                'flex h-11 w-11 shrink-0 items-center justify-center rounded-lg',
+                TONE_CLASSES[props.tone ?? 'neutral'],
+              )}
+            >
+              {props.icon}
+            </div>
+          </Show>
+          <div class="min-w-0">
+            <p class="truncate text-sm text-muted-foreground">{props.label}</p>
+            <p class="truncate text-xl font-semibold tabular-nums text-foreground">{display()}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/ui/Stepper.tsx

@@ -0,0 +1,134 @@
+// Multi-step progress indicator: a row (or column) of numbered indicators
+// connected by lines, tracking completed / active / upcoming states. Purely
+// presentational and theme-agnostic — all colors come from semantic tokens.
+import { Check } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single step rendered by {@link Stepper}. */
+export interface StepItem {
+  /** Text shown beside the step indicator. */
+  label: string
+  /** Optional secondary line shown under the label. */
+  description?: string
+}
+
+export interface StepperProps {
+  /** Ordered list of steps to display. */
+  steps: StepItem[]
+  /** Index of the currently active step; steps before it are completed. */
+  active: number
+  /** When provided, indicators become clickable buttons reporting their index. */
+  onStepClick?: (index: number) => void
+  /** Layout direction. Defaults to `'horizontal'`. */
+  orientation?: 'horizontal' | 'vertical'
+  class?: string
+}
+
+/**
+ * Multi-step progress indicator. Steps before `active` render as completed
+ * (with a check), the `active` step is highlighted with a ring, and later
+ * steps are dimmed. Pass `onStepClick` to let users jump between steps.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   active={1}
+ *   steps={[
+ *     { label: 'Account', description: 'Your details' },
+ *     { label: 'Shipping' },
+ *     { label: 'Payment' },
+ *   ]}
+ *   onStepClick={setActive}
+ * />
+ * ```
+ */
+export function Stepper(props: StepperProps): JSX.Element {
+  const orientation = () => props.orientation ?? 'horizontal'
+
+  return (
+    <ol
+      aria-label="Progress"
+      class={cn('flex', orientation() === 'vertical' ? 'flex-col' : 'items-start', props.class)}
+    >
+      <For each={props.steps}>
+        {(step, index) => {
+          const isCompleted = () => index() < props.active
+          const isActive = () => index() === props.active
+          const isFirst = () => index() === 0
+          const isVertical = () => orientation() === 'vertical'
+          // The connector sits before this step and is "filled" when we've
+          // reached (or passed) it — i.e. for completed and active steps.
+          const connectorFilled = () => index() <= props.active
+
+          const indicatorContent = () => (
+            <Show when={isCompleted()} fallback={<span>{index() + 1}</span>}>
+              <Check class="h-4 w-4" aria-hidden="true" />
+            </Show>
+          )
+
+          const indicatorClass = () =>
+            cn(
+              'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors',
+              isCompleted() || isActive()
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground',
+              isActive() && 'ring-2 ring-primary/40',
+            )
+
+          return (
+            <li
+              aria-current={isActive() ? 'step' : undefined}
+              class={cn('flex', isVertical() ? 'flex-col' : 'flex-1 items-start last:flex-none')}
+            >
+              <div class={cn('flex', isVertical() ? 'flex-row' : 'w-full items-center')}>
+                {/* Connector line before this step (skipped for the first). */}
+                <Show when={!isFirst()}>
+                  <span
+                    aria-hidden="true"
+                    class={cn(
+                      connectorFilled() ? 'bg-primary' : 'bg-border',
+                      isVertical() ? 'ml-4 -mt-1 mb-1 w-0.5 flex-1' : 'mx-2 h-0.5 flex-1',
+                    )}
+                  />
+                </Show>
+
+                <div class={cn('flex gap-3', isVertical() ? 'items-start' : 'flex-col items-center')}>
+                  <Show
+                    when={props.onStepClick}
+                    fallback={<div class={indicatorClass()}>{indicatorContent()}</div>}
+                  >
+                    <button
+                      type="button"
+                      aria-label={step.label}
+                      class={indicatorClass()}
+                      onClick={() => props.onStepClick?.(index())}
+                    >
+                      {indicatorContent()}
+                    </button>
+                  </Show>
+
+                  <div class={cn(isVertical() ? 'pt-1' : 'text-center')}>
+                    <p
+                      class={cn(
+                        'text-sm font-medium',
+                        isActive() || isCompleted() ? 'text-foreground' : 'text-muted-foreground',
+                      )}
+                    >
+                      {step.label}
+                    </p>
+                    <Show when={step.description}>
+                      <p class="text-xs text-muted-foreground">{step.description}</p>
+                    </Show>
+                  </div>
+                </div>
+              </div>
+            </li>
+          )
+        }}
+      </For>
+    </ol>
+  )
+}

package/src/ui/Switch.tsx

@@ -0,0 +1,44 @@
+// Accessible on/off toggle on Kobalte's Switch primitive.
+import { Switch as KSwitch } from '@kobalte/core/switch'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface SwitchProps {
+  /** Whether the switch is on. Controlled — pair with `onChange`. */
+  checked: boolean
+  onChange: (checked: boolean) => void
+  /** Optional visible label rendered next to the control. */
+  label?: string
+  disabled?: boolean
+  class?: string
+}
+
+/**
+ * Accessible on/off switch, built on Kobalte's Switch primitive.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = createSignal(false)
+ * <Switch checked={enabled()} onChange={setEnabled} label="Enable notifications" />
+ * ```
+ */
+export function Switch(props: SwitchProps): JSX.Element {
+  return (
+    <KSwitch
+      checked={props.checked}
+      onChange={props.onChange}
+      disabled={props.disabled}
+      class={cn('inline-flex items-center gap-2', props.class)}
+    >
+      <KSwitch.Input />
+      <KSwitch.Control class="inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-input px-0.5 transition-colors data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
+        <KSwitch.Thumb class="h-4 w-4 rounded-full bg-white shadow-sm transition-transform data-[checked]:translate-x-4" />
+      </KSwitch.Control>
+      <Show when={props.label}>
+        <KSwitch.Label class="text-sm text-foreground">{props.label}</KSwitch.Label>
+      </Show>
+    </KSwitch>
+  )
+}

package/src/ui/Table.tsx

@@ -0,0 +1,128 @@
+// Minimal table primitives (plain HTML + Tailwind, no headless dep). For long
+// lists, virtualize with @tanstack/solid-virtual + the remeasureAfterLayout
+// helper (exported from a4ui) — the parent owns the virtualizer.
+import type { JSX, ParentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface TableProps extends ParentProps {
+  class?: string
+}
+
+/**
+ * Table root — a plain `<table>` wrapped in a horizontal-scroll container.
+ * Compose with {@link TableHead}, {@link TableBody}, {@link TableRow},
+ * {@link TableHeadCell}, and {@link TableCell}.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableHeadCell>Name</TableHeadCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Alfredo</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+export function Table(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <div class="w-full overflow-x-auto">
+      <table class={cn('w-full border-collapse text-sm', local.class)} {...rest}>
+        {local.children}
+      </table>
+    </div>
+  )
+}
+
+/**
+ * `<thead>` wrapper with the muted, bottom-bordered header styling.
+ *
+ * @example
+ * ```tsx
+ * <TableHead><TableRow><TableHeadCell>Name</TableHeadCell></TableRow></TableHead>
+ * ```
+ */
+export function TableHead(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <thead class={cn('border-b border-border text-left text-muted-foreground', local.class)} {...rest}>
+      {local.children}
+    </thead>
+  )
+}
+
+/**
+ * `<tbody>` wrapper — no default styling beyond passing through `class`.
+ *
+ * @example
+ * ```tsx
+ * <TableBody><TableRow><TableCell>Alfredo</TableCell></TableRow></TableBody>
+ * ```
+ */
+export function TableBody(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <tbody class={local.class} {...rest}>
+      {local.children}
+    </tbody>
+  )
+}
+
+/**
+ * `<tr>` wrapper — adds the row bottom-border and hover highlight.
+ *
+ * @example
+ * ```tsx
+ * <TableRow><TableCell>Alfredo</TableCell></TableRow>
+ * ```
+ */
+export function TableRow(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <tr class={cn('border-b border-border last:border-0 hover:bg-muted/40', local.class)} {...rest}>
+      {local.children}
+    </tr>
+  )
+}
+
+/**
+ * `<th>` wrapper — small uppercase heading style, use inside {@link TableHead}.
+ *
+ * @example
+ * ```tsx
+ * <TableHeadCell>Name</TableHeadCell>
+ * ```
+ */
+export function TableHeadCell(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <th class={cn('px-3 py-2 text-xs font-semibold uppercase tracking-wide', local.class)} {...rest}>
+      {local.children}
+    </th>
+  )
+}
+
+/**
+ * `<td>` wrapper — standard cell padding and vertical alignment.
+ *
+ * @example
+ * ```tsx
+ * <TableCell>Alfredo</TableCell>
+ * ```
+ */
+export function TableCell(props: TableProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <td class={cn('px-3 py-2 align-middle', local.class)} {...rest}>
+      {local.children}
+    </td>
+  )
+}

package/src/ui/Tabs.tsx

@@ -0,0 +1,72 @@
+// Accessible tabs on Kobalte's Tabs primitive.
+import { Tabs as KTabs } from '@kobalte/core/tabs'
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** One tab: its unique `value`, trigger `label`, and panel `content`. */
+export interface TabItem {
+  value: string
+  label: string
+  content: JSX.Element
+}
+
+interface TabsProps {
+  /** Tabs to render, in order — each contributes a trigger and a panel. */
+  items: TabItem[]
+  /** Currently selected tab's `value`. Controlled — pair with `onChange`. */
+  value: string
+  onChange: (value: string) => void
+  class?: string
+}
+
+/**
+ * Accessible tabs, built on Kobalte's Tabs primitive, with a sliding selection
+ * indicator.
+ *
+ * @example
+ * ```tsx
+ * const [tab, setTab] = createSignal('profile')
+ * <Tabs
+ *   value={tab()}
+ *   onChange={setTab}
+ *   items={[
+ *     { value: 'profile', label: 'Profile', content: <ProfilePanel /> },
+ *     { value: 'billing', label: 'Billing', content: <BillingPanel /> },
+ *   ]}
+ * />
+ * ```
+ */
+export function Tabs(props: TabsProps): JSX.Element {
+  return (
+    <KTabs value={props.value} onChange={props.onChange} class={props.class}>
+      {/* `relative` anchors the absolutely-positioned Indicator to the list's
+          bottom border — without it the indicator escapes to the nearest
+          positioned ancestor and strands itself at the bottom of the page. */}
+      <KTabs.List class="relative flex gap-1 border-b border-border">
+        <For each={props.items}>
+          {(item) => (
+            <KTabs.Trigger
+              value={item.value}
+              class={cn(
+                'px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground',
+                'data-[selected]:text-foreground',
+              )}
+            >
+              {item.label}
+            </KTabs.Trigger>
+          )}
+        </For>
+        <KTabs.Indicator class="absolute bottom-0 h-0.5 bg-primary transition-all" />
+      </KTabs.List>
+      <For each={props.items}>
+        {(item) => (
+          <KTabs.Content value={item.value} class="py-4">
+            {item.content}
+          </KTabs.Content>
+        )}
+      </For>
+    </KTabs>
+  )
+}

package/src/ui/TagInput.tsx

@@ -0,0 +1,85 @@
+// Controlled tag editor: the tag array is owned by the parent (value/onChange);
+// only the in-progress input text is local state. Enter/comma commit a tag,
+// Backspace on an empty input pops the last one — same keyboard idiom users
+// expect from chip inputs elsewhere.
+import type { JSX } from 'solid-js'
+import { For, createSignal } from 'solid-js'
+import { X } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+
+export interface TagInputProps {
+  /** Current tags (controlled). */
+  value: string[]
+  /** Called with the next tag array whenever tags are added or removed. */
+  onChange: (tags: string[]) => void
+  placeholder?: string
+  class?: string
+}
+
+/**
+ * Bordered field that turns free text into removable chips. Press Enter or comma
+ * to add the trimmed input as a tag (empty and duplicate values are ignored),
+ * click a chip's `×` to remove it, or press Backspace on an empty input to drop
+ * the last tag. Theme-agnostic — colors come from semantic tokens.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>(['solid', 'ui'])
+ * <TagInput value={tags()} onChange={setTags} placeholder="Add tag…" />
+ * ```
+ */
+export function TagInput(props: TagInputProps): JSX.Element {
+  const [text, setText] = createSignal('')
+
+  const addTag = () => {
+    const tag = text().trim()
+    if (tag && !props.value.includes(tag)) props.onChange([...props.value, tag])
+    setText('')
+  }
+
+  const removeTag = (tag: string) => {
+    props.onChange(props.value.filter((t) => t !== tag))
+  }
+
+  const onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.key === 'Enter' || ev.key === ',') {
+      ev.preventDefault()
+      addTag()
+    } else if (ev.key === 'Backspace' && text() === '' && props.value.length > 0) {
+      removeTag(props.value[props.value.length - 1])
+    }
+  }
+
+  return (
+    <div
+      class={cn(
+        'flex flex-wrap items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5',
+        props.class,
+      )}
+    >
+      <For each={props.value}>
+        {(tag) => (
+          <span class="inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs text-foreground">
+            {tag}
+            <button
+              type="button"
+              aria-label={`Remove ${tag}`}
+              onClick={() => removeTag(tag)}
+              class="inline-flex items-center text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <X class="size-3" />
+            </button>
+          </span>
+        )}
+      </For>
+      <input
+        class="flex-1 border-0 bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+        value={text()}
+        placeholder={props.placeholder}
+        onInput={(ev) => setText(ev.currentTarget.value)}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  )
+}

package/src/ui/Textarea.tsx

@@ -0,0 +1,38 @@
+// Controlled multi-line text field — plain <textarea>, mirrors Input.tsx.
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const TEXTAREA_BASE =
+  'w-full min-h-[80px] resize-y rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground px-3 py-2 text-sm outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50'
+
+interface TextareaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onInput'> {
+  value: string
+  /** Called with the new string value on every input event (not the raw DOM event). */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Controlled multi-line text field — a plain `<textarea>` styled to match
+ * {@link Input}. Any other native textarea attribute (e.g. `rows`, `placeholder`,
+ * `disabled`) is passed through.
+ *
+ * @example
+ * ```tsx
+ * const [bio, setBio] = createSignal('')
+ * <Textarea value={bio()} onInput={setBio} placeholder="Tell us about yourself" />
+ * ```
+ */
+export function Textarea(props: TextareaProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <textarea
+      class={cn(TEXTAREA_BASE, local.class)}
+      value={local.value}
+      onInput={(ev) => local.onInput(ev.currentTarget.value)}
+      {...rest}
+    />
+  )
+}