@a4ui/core 0.11.1 → 0.13.0

package/src/ui/MultiSelect.tsx

@@ -0,0 +1,236 @@
+// Multi-select dropdown — searchable options with removable chips on the
+// trigger. Popover mechanics (portaled, fixed-position, outside-click/Escape/
+// scroll/resize close) are copied verbatim from DateField.tsx: no Kobalte
+// primitive covers a chip-trigger multi-select, so this is hand-rolled in
+// plain Solid + theme tokens.
+import { Check, ChevronDown, X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** One selectable option: a stable `value` and its display `label`. */
+export interface MultiSelectOption {
+  value: string
+  label: string
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+  placeholder?: string
+  /** Show a search box in the dropdown. Default `true`. */
+  searchable?: boolean
+  disabled?: boolean
+  class?: string
+}
+
+/**
+ * Multi-select dropdown: the trigger shows selected options as removable
+ * chips, and the portaled popover lists (optionally search-filtered) options
+ * to toggle. Picking an option keeps the popover open so several values can
+ * be chosen in a row; the popover closes on outside click, Escape, scroll, or
+ * resize.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>([])
+ * <MultiSelect
+ *   options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+ *   value={tags()}
+ *   onChange={setTags}
+ *   placeholder="Select tags…"
+ * />
+ * ```
+ */
+export function MultiSelect(props: MultiSelectProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const [query, setQuery] = createSignal('')
+
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  let searchRef: HTMLInputElement | undefined
+
+  // Portaled popovers escape the trigger's stacking context (e.g. a glass
+  // card's backdrop-filter), so they can't be `absolute`-positioned relative
+  // to it — place them with `fixed` at the trigger's measured viewport rect,
+  // same as DateField.
+  const [pos, setPos] = createSignal({ top: 0, left: 0, width: 224 })
+  const MIN_W = 224 // min-w-56
+
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const width = Math.max(r.width, MIN_W)
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8))
+    setPos({ top: r.bottom + 4, left, width })
+  }
+
+  const openPopover = () => {
+    if (props.disabled) return
+    place()
+    setOpen(true)
+    setQuery('')
+  }
+
+  const close = () => setOpen(false)
+
+  const onDocPointer = (ev: MouseEvent) => {
+    const t = ev.target as Node
+    // Ignore clicks on the trigger (rootRef) AND the portaled popover (popRef).
+    if (rootRef && !rootRef.contains(t) && popRef && !popRef.contains(t)) close()
+  }
+  const onKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Escape') close()
+  }
+
+  // Wire/tear-down the global listeners strictly around the open state. Scroll/
+  // resize close the popover (its fixed position would otherwise drift).
+  const toggleListeners = (isOpen: boolean) => {
+    if (isOpen) {
+      document.addEventListener('mousedown', onDocPointer)
+      document.addEventListener('keydown', onKey)
+      window.addEventListener('scroll', close, true)
+      window.addEventListener('resize', close)
+    } else {
+      document.removeEventListener('mousedown', onDocPointer)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+    }
+  }
+  // Reactively attach when open flips; always clean up on unmount.
+  createEffect(() => toggleListeners(open()))
+  onCleanup(() => toggleListeners(false))
+
+  // Autofocus the search box once the popover mounts.
+  createEffect(() => {
+    if (open() && (props.searchable ?? true)) {
+      searchRef?.focus()
+    }
+  })
+
+  const selectedOptions = createMemo(() => props.options.filter((o) => props.value.includes(o.value)))
+
+  const filteredOptions = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    if (!q) return props.options
+    return props.options.filter((o) => o.label.toLowerCase().includes(q))
+  })
+
+  const toggleValue = (value: string) => {
+    const next = props.value.includes(value)
+      ? props.value.filter((v) => v !== value)
+      : [...props.value, value]
+    props.onChange(next)
+  }
+
+  const removeValue = (ev: MouseEvent, value: string) => {
+    ev.stopPropagation()
+    props.onChange(props.value.filter((v) => v !== value))
+  }
+
+  return (
+    <div ref={rootRef} class={cn('relative', props.class)}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open()}
+        onClick={() => (open() ? close() : openPopover())}
+        class="flex min-h-9 h-auto w-full flex-wrap items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span class="flex flex-1 flex-wrap items-center gap-1">
+          <Show
+            when={selectedOptions().length > 0}
+            fallback={<span class="text-muted-foreground">{props.placeholder ?? 'Select…'}</span>}
+          >
+            <For each={selectedOptions()}>
+              {(opt) => (
+                <span class="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-foreground">
+                  {opt.label}
+                  <button
+                    type="button"
+                    aria-label={`Remove ${opt.label}`}
+                    onClick={(ev) => removeValue(ev, opt.value)}
+                    class="rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus:ring-2 focus:ring-ring/30"
+                  >
+                    <X class="h-3 w-3" />
+                  </button>
+                </span>
+              )}
+            </For>
+          </Show>
+        </span>
+        <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={popRef}
+            style={{
+              position: 'fixed',
+              top: `${pos().top}px`,
+              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"
+          >
+            <Show when={props.searchable ?? true}>
+              <input
+                ref={searchRef}
+                type="text"
+                value={query()}
+                onInput={(ev) => setQuery(ev.currentTarget.value)}
+                placeholder="Search…"
+                class="mb-1 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground outline-none a4-field"
+              />
+            </Show>
+            <ul role="listbox" aria-multiselectable="true" class="max-h-60 overflow-y-auto">
+              <For
+                each={filteredOptions()}
+                fallback={<li class="px-2 py-1.5 text-sm text-muted-foreground">No options</li>}
+              >
+                {(opt) => {
+                  const isSelected = () => props.value.includes(opt.value)
+                  return (
+                    <li role="none">
+                      <button
+                        type="button"
+                        role="option"
+                        aria-selected={isSelected()}
+                        aria-pressed={isSelected()}
+                        onClick={() => toggleValue(opt.value)}
+                        class={cn(
+                          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-muted focus:bg-muted',
+                          isSelected() && 'bg-primary/10',
+                        )}
+                      >
+                        <span
+                          class={cn(
+                            'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input',
+                            isSelected() && 'border-primary bg-primary text-primary-foreground',
+                          )}
+                        >
+                          <Show when={isSelected()}>
+                            <Check class="h-3 w-3" />
+                          </Show>
+                        </span>
+                        <span class="truncate">{opt.label}</span>
+                      </button>
+                    </li>
+                  )
+                }}
+              </For>
+            </ul>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}

package/src/ui/MultiStateBadge.tsx

@@ -0,0 +1,93 @@
+// A status pill that smoothly morphs between idle/loading/success/error: the
+// background/text color tweens via CSS `transition-colors` while the icon and
+// label cross-fade, and each state change gets a spring "pop" via Motion
+// (motion.dev's "multi-state badge" pattern) — skipped under reduced motion.
+import { createEffect, on, Switch, Match, type JSX } from 'solid-js'
+import { Loader2, Check, X } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { motionReduced, animate } from '../lib/motion'
+
+/** The lifecycle state a {@link MultiStateBadge} can be in. */
+export type BadgeState = 'idle' | 'loading' | 'success' | 'error'
+
+export interface MultiStateBadgeProps {
+  /** Current lifecycle state; drives color, icon, and label. */
+  state: BadgeState
+  /** Override the per-state text. Defaults: idle→'Ready', loading→'Working…', success→'Done', error→'Failed'. */
+  labels?: Partial<Record<BadgeState, string>>
+  class?: string
+}
+
+const DEFAULT_LABELS: Record<BadgeState, string> = {
+  idle: 'Ready',
+  loading: 'Working…',
+  success: 'Done',
+  error: 'Failed',
+}
+
+const STATE_CLASSES: Record<BadgeState, string> = {
+  idle: 'bg-muted text-muted-foreground',
+  loading: 'bg-primary/15 text-primary',
+  success: 'bg-green-500/15 text-green-600',
+  error: 'bg-destructive/15 text-destructive',
+}
+
+/**
+ * Status badge that animates between `idle` → `loading` → `success` → `error`,
+ * morphing its color and swapping its icon/label on each transition. Colors
+ * tween via a CSS `transition-colors` class; the pill also gets a spring
+ * "pop" and the icon/label cross-fade via Motion's `animate`, both skipped
+ * when {@link motionReduced} is true.
+ *
+ * @example
+ * ```tsx
+ * <MultiStateBadge state={saveState()} labels={{ error: 'Save failed' }} />
+ * ```
+ */
+export function MultiStateBadge(props: MultiStateBadgeProps): JSX.Element {
+  let rootEl: HTMLSpanElement | undefined
+  let contentEl: HTMLSpanElement | undefined
+
+  const label = () => props.labels?.[props.state] ?? DEFAULT_LABELS[props.state]
+
+  createEffect(
+    on(
+      () => props.state,
+      () => {
+        if (motionReduced()) return
+        if (rootEl) animate(rootEl, { scale: [0.9, 1] }, { type: 'spring', stiffness: 500, damping: 20 })
+        if (contentEl) animate(contentEl, { opacity: [0, 1] }, { duration: 0.2, ease: 'easeOut' })
+      },
+      { defer: true },
+    ),
+  )
+
+  return (
+    <span
+      ref={rootEl}
+      role="status"
+      aria-live="polite"
+      class={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors',
+        STATE_CLASSES[props.state],
+        props.class,
+      )}
+    >
+      <span ref={contentEl} class="inline-flex items-center gap-1.5">
+        <Switch>
+          <Match when={props.state === 'loading'}>
+            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+          </Match>
+          <Match when={props.state === 'success'}>
+            <Check class="h-3.5 w-3.5" />
+          </Match>
+          <Match when={props.state === 'error'}>
+            <X class="h-3.5 w-3.5" />
+          </Match>
+        </Switch>
+        <span>{label()}</span>
+      </span>
+    </span>
+  )
+}

package/src/ui/NotificationCenter.tsx

@@ -0,0 +1,103 @@
+// Bell-triggered notification panel built on A4ui's Popover primitive.
+import { Bell, X } from 'lucide-solid'
+import { For, type JSX, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Popover } from './Popover'
+
+/** A single entry rendered by {@link NotificationCenter}. */
+export interface NotificationItem {
+  id: string
+  title: string
+  description?: string
+  time?: string
+  read?: boolean
+}
+
+export interface NotificationCenterProps {
+  /** Notifications to display, newest first. */
+  items: NotificationItem[]
+  /** Called with an item's id when its dismiss button is clicked. */
+  onDismiss?: (id: string) => void
+  /** Called when the "Mark all read" action is clicked. */
+  onMarkAllRead?: () => void
+  class?: string
+}
+
+/**
+ * Bell button that opens a popover listing notifications, with an unread count
+ * badge, per-item dismiss, and a "mark all read" action. Built on {@link Popover}.
+ *
+ * @example
+ * ```tsx
+ * <NotificationCenter
+ *   items={items}
+ *   onDismiss={(id) => remove(id)}
+ *   onMarkAllRead={() => markAll()}
+ * />
+ * ```
+ */
+export function NotificationCenter(props: NotificationCenterProps): JSX.Element {
+  const unread = () => props.items.filter((item) => !item.read).length
+
+  const trigger = (
+    <span class={cn('relative inline-grid place-items-center rounded-md p-2 text-foreground', props.class)}>
+      <Bell class="h-5 w-5" />
+      <Show when={unread() > 0}>
+        <span class="absolute -right-1 -top-1 grid h-4 min-w-4 place-items-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">
+          {unread()}
+        </span>
+      </Show>
+    </span>
+  )
+
+  return (
+    <Popover trigger={trigger} class="w-80 p-0">
+      <div class="flex items-center justify-between border-b border-border px-4 py-3">
+        <span class="text-sm font-semibold text-foreground">Notifications</span>
+        <button
+          type="button"
+          class="text-xs font-medium text-primary hover:underline"
+          onClick={() => props.onMarkAllRead?.()}
+        >
+          Mark all read
+        </button>
+      </div>
+      <Show
+        when={props.items.length > 0}
+        fallback={<p class="px-4 py-8 text-center text-sm text-muted-foreground">You're all caught up</p>}
+      >
+        <ul class="max-h-96 divide-y divide-border overflow-y-auto">
+          <For each={props.items}>
+            {(item) => (
+              <li class="flex items-start gap-2 px-4 py-3">
+                <div class="min-w-0 flex-1">
+                  <p class="flex items-center gap-1.5 text-sm font-medium text-foreground">
+                    <Show when={!item.read}>
+                      <span class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+                    </Show>
+                    <span class="truncate">{item.title}</span>
+                  </p>
+                  <Show when={item.description}>
+                    <p class="mt-0.5 text-xs text-muted-foreground">{item.description}</p>
+                  </Show>
+                  <Show when={item.time}>
+                    <p class="mt-1 text-[11px] text-muted-foreground">{item.time}</p>
+                  </Show>
+                </div>
+                <button
+                  type="button"
+                  aria-label="Dismiss"
+                  class="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                  onClick={() => props.onDismiss?.(item.id)}
+                >
+                  <X class="h-4 w-4" />
+                </button>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </Popover>
+  )
+}

package/src/ui/NotificationStack.tsx

@@ -0,0 +1,104 @@
+// A stacked-notifications widget (phone lock-screen style): the newest card is
+// full-size on top and older cards peek out behind it, scaled down and offset.
+// Presentational + controlled — the parent owns `items` (newest first) and
+// removes a card when `onDismiss` fires; the stack re-flows with a CSS transition.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animateIn, motionReduced } from '../lib/motion'
+
+export interface StackNotification {
+  id: string | number
+  title: string
+  description?: string
+  icon?: JSX.Element
+}
+
+export interface NotificationStackProps {
+  /** Newest first. The parent owns this array. */
+  items: StackNotification[]
+  /** How many cards are visible before the rest collapse behind. @default 3 */
+  max?: number
+  /** Fired when a card is dismissed; the parent should drop it from `items`. */
+  onDismiss?: (id: string | number) => void
+  class?: string
+}
+
+/**
+ * Stacked notifications. Cards behind the front one are offset down and scaled,
+ * so they peek from the bottom edge; removing the front card promotes the rest
+ * with a smooth transition (skipped under reduced motion). New cards fade/slide
+ * in via `animateIn`.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = createStore<StackNotification[]>([])
+ * <NotificationStack
+ *   items={items}
+ *   onDismiss={(id) => setItems((xs) => xs.filter((x) => x.id !== id))}
+ * />
+ * ```
+ */
+export function NotificationStack(props: NotificationStackProps): JSX.Element {
+  const max = () => props.max ?? 3
+
+  return (
+    <div
+      role="log"
+      aria-live="polite"
+      class={cn('relative w-full max-w-sm', props.class)}
+      // reserve room for the front card plus the peek of those behind it
+      style={{ 'min-height': `${88 + (Math.min(props.items.length, max()) - 1) * 10}px` }}
+    >
+      <For each={props.items}>
+        {(item, i) => {
+          const hidden = () => i() > max() - 1
+          return (
+            <div
+              ref={(el) => animateIn(el, { y: -8 })}
+              class={cn(
+                'card absolute inset-x-0 top-0 rounded-xl border border-border bg-card p-3 shadow-lg',
+                !motionReduced() && 'transition-[transform,opacity] duration-300 ease-out',
+              )}
+              style={{
+                transform: `translateY(${i() * 10}px) scale(${1 - i() * 0.05})`,
+                opacity: hidden() ? 0 : 1 - i() * 0.15,
+                'z-index': props.items.length - i(),
+                'pointer-events': hidden() ? 'none' : 'auto',
+                'transform-origin': 'top center',
+              }}
+            >
+              <div class="flex items-start gap-2.5">
+                {item.icon && <span class="mt-0.5 shrink-0 text-primary">{item.icon}</span>}
+                <div class="min-w-0 flex-1">
+                  <p class="truncate text-sm font-medium text-foreground">{item.title}</p>
+                  {item.description && (
+                    <p class="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{item.description}</p>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  aria-label={`Dismiss ${item.title}`}
+                  onClick={() => props.onDismiss?.(item.id)}
+                  class="shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    class="h-3.5 w-3.5"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/ui/NowPlaying.tsx

@@ -0,0 +1,100 @@
+// Compact "now playing" music widget: cover art, title/artist, and an
+// animated equalizer. The bounce is pure CSS (keyframes injected once into
+// the document head), so the bars animate at zero per-frame JS cost — same
+// pattern as LoadingDots. Bars freeze to a static height when playback is
+// paused or under reduced motion.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface NowPlayingProps {
+  title: string
+  artist?: string
+  /** Cover art URL. */
+  cover?: string
+  /** Whether the equalizer bars are animating. @default true */
+  playing?: boolean
+  class?: string
+}
+
+const STYLE_ID = 'a4ui-now-playing-style'
+
+function ensureStyleInjected(): void {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = `
+@keyframes a4-eq {
+  0%, 100% { transform: scaleY(0.3); }
+  50% { transform: scaleY(1); }
+}
+`
+  document.head.appendChild(style)
+}
+
+// Per-bar duration/delay (seconds) so the bars don't bounce in lockstep.
+const BARS = [
+  { duration: 0.6, delay: 0 },
+  { duration: 0.5, delay: 0.1 },
+  { duration: 0.7, delay: 0.05 },
+  { duration: 0.45, delay: 0.15 },
+  { duration: 0.65, delay: 0.2 },
+]
+
+/**
+ * Compact "now playing" music widget with an animated equalizer. Bars bounce
+ * via CSS keyframes while `playing` is true; they freeze to a low static
+ * height when paused or under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <NowPlaying title="Random Access Memories" artist="Daft Punk" cover="/covers/ram.jpg" playing />
+ * ```
+ */
+export function NowPlaying(props: NowPlayingProps): JSX.Element {
+  ensureStyleInjected()
+
+  const playing = () => (props.playing ?? true) && !motionReduced()
+
+  const barStyle = (bar: (typeof BARS)[number], index: number): JSX.CSSProperties => {
+    if (!playing()) {
+      return {
+        height: '30%',
+        'transform-origin': 'bottom',
+      }
+    }
+    return {
+      height: '100%',
+      'transform-origin': 'bottom',
+      'animation-name': 'a4-eq',
+      'animation-duration': `${bar.duration}s`,
+      'animation-delay': `${bar.delay + index * 0.02}s`,
+      'animation-iteration-count': 'infinite',
+      'animation-timing-function': 'ease-in-out',
+    }
+  }
+
+  return (
+    <div
+      class={cn('flex items-center gap-3 rounded-xl border border-border bg-card p-3', props.class)}
+      aria-label={`Now playing: ${props.title}${props.artist ? ` by ${props.artist}` : ''}`}
+    >
+      <Show when={props.cover} fallback={<div class="h-12 w-12 shrink-0 rounded-lg bg-muted" />}>
+        <img src={props.cover} alt="" class="h-12 w-12 shrink-0 rounded-lg object-cover" />
+      </Show>
+      <div class="min-w-0 flex-1">
+        <p class="truncate font-medium text-foreground">{props.title}</p>
+        <Show when={props.artist}>
+          <p class="truncate text-sm text-muted-foreground">{props.artist}</p>
+        </Show>
+      </div>
+      <div class="flex h-6 items-end gap-0.5">
+        <For each={BARS}>
+          {(bar, index) => <span class="w-1 rounded-full bg-primary" style={barStyle(bar, index())} />}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/ui/NumberInput.tsx

@@ -0,0 +1,48 @@
+// Numeric field with −/+ steppers on Kobalte's NumberField primitive.
+import { NumberField as KNumberField } from '@kobalte/core/number-field'
+import type { JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface NumberInputProps {
+  value: number
+  onChange: (value: number) => void
+  /** Lower bound; the decrement trigger disables itself at this value. */
+  min?: number
+  /** Upper bound; the increment trigger disables itself at this value. */
+  max?: number
+  class?: string
+}
+
+const TRIGGER_CLASS =
+  'grid h-9 w-9 shrink-0 place-items-center border border-input bg-background text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50'
+
+/**
+ * Numeric field with −/+ stepper buttons, built on Kobalte's `NumberField` primitive.
+ * Use for bounded numeric input (quantities, counts) where clicking to nudge the
+ * value is preferable to typing alone.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput value={qty()} onChange={setQty} min={0} max={99} />
+ * ```
+ */
+export function NumberInput(props: NumberInputProps): JSX.Element {
+  return (
+    <KNumberField
+      rawValue={props.value}
+      onRawValueChange={(v) => props.onChange(v)}
+      minValue={props.min}
+      maxValue={props.max}
+      class={cn('inline-flex items-stretch', props.class)}
+    >
+      <KNumberField.DecrementTrigger class={cn(TRIGGER_CLASS, 'rounded-l-md')} aria-label="Decrement">
+        −
+      </KNumberField.DecrementTrigger>
+      <KNumberField.Input class="w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field" />
+      <KNumberField.IncrementTrigger class={cn(TRIGGER_CLASS, 'rounded-r-md')} aria-label="Increment">
+        +
+      </KNumberField.IncrementTrigger>
+    </KNumberField>
+  )
+}