@pantoia/ui 0.2.0 → 0.4.0

package/field/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { CircleAlert, CircleCheck, LoaderCircle } from 'lucide-react'
-import { createContext, use, useId, type ReactNode } from 'react'
+import { Field as FieldPrimitive } from '@base-ui/react/field'
 
 import { Label } from '../label'
 import { tv } from '../tv'
@@ -20,90 +19,41 @@ export const field = tv({
   defaultVariants: { layout: 'stack' },
 })
 
-export interface FieldContext {
-  id: string
-  labelId: string
-  messageId: string
-}
-
-export interface FieldControl {
-  id: string
-  'aria-labelledby': string
-  'aria-invalid': 'true' | undefined
-  'aria-describedby': string
-}
-
-const Context = createContext<FieldContext | null>(null)
-
-export interface FieldProps {
-  invalid?: boolean
+export type FieldProps = Omit<FieldPrimitive.Root.Props, 'className'> & {
   layout?: 'stack' | 'inline' | 'split'
   className?: string
-  children?: ReactNode | ((args: { control: FieldControl }) => ReactNode)
 }
 
-export function Field({ invalid = false, layout, className, children }: FieldProps) {
-  const id = useId()
-  const ctx: FieldContext = {
-    id,
-    labelId: `${id}-label`,
-    messageId: `${id}-message`,
-  }
-
-  const control: FieldControl = {
-    'id': id,
-    'aria-labelledby': ctx.labelId,
-    'aria-invalid': invalid ? 'true' : undefined,
-    'aria-describedby': ctx.messageId,
-  }
-
-  return (
-    <Context value={ctx}>
-      <div className={field({ layout, className })}>
-        {typeof children === 'function' ? children({ control }) : children}
-      </div>
-    </Context>
-  )
+export function Field({ layout, className, ...rest }: FieldProps) {
+  return <FieldPrimitive.Root {...rest} className={field({ layout, className })} />
 }
 
-const fieldLabel = tv({ base: 'group-has-disabled:text-foreground-disabled' })
+const fieldLabel = tv({ base: 'group-has-disabled:text-fg-disabled' })
 
-export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldLabelProps = Omit<FieldPrimitive.Label.Props, 'className'> & {
+  className?: string
+}
 
-  return (
-    <Label
-      id={ctx?.labelId}
-      htmlFor={ctx?.id}
-      className={fieldLabel({ className })}
-    >
-      {children}
-    </Label>
-  )
+export function FieldLabel({ render = <Label />, className, ...rest }: FieldLabelProps) {
+  return <FieldPrimitive.Label {...rest} render={render} className={fieldLabel({ className })} />
 }
 
 const fieldHelp = tv({
-  base: 'basis-full text-caption text-foreground-subtle'
-    + ' group-has-disabled:text-foreground-disabled',
+  base: 'basis-full text-caption text-fg-subtle'
+    + ' group-has-disabled:text-fg-disabled',
 })
 
-export function FieldHelp({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldHelpProps = Omit<FieldPrimitive.Description.Props, 'className'> & {
+  className?: string
+}
 
-  return (
-    <p
-      id={ctx?.messageId}
-      className={fieldHelp({ className })}
-    >
-      {children}
-    </p>
-  )
+export function FieldHelp({ className, ...rest }: FieldHelpProps) {
+  return <FieldPrimitive.Description {...rest} className={fieldHelp({ className })} />
 }
 
-export interface FieldErrorProps {
+export type FieldErrorProps = Omit<FieldPrimitive.Error.Props, 'className'> & {
   items?: string | string[]
   className?: string
-  children?: ReactNode
 }
 
 const fieldError = tv({
@@ -111,39 +61,38 @@ const fieldError = tv({
     + ' flex items-start gap-tight',
 })
 
-export function FieldError({ items, className, children }: FieldErrorProps) {
-  const ctx = use(Context)
-  const list = items == null ? [] : Array.isArray(items) ? items : [items]
+export function FieldError({ items, match = true, render = <p />, className, children, ...rest }: FieldErrorProps) {
+  const list: string[] = items == null ? [] : Array.isArray(items) ? items : [items]
 
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldError({ className })}
-    >
-      <CircleAlert className="mt-0.5 size-4 shrink-0" />
+    <FieldPrimitive.Error {...rest} match={match} render={render} className={fieldError({ className })}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" x2="12" y1="8" y2="12" />
+        <line x1="12" x2="12.01" y1="16" y2="16" />
+      </svg>
       <span className="flex min-w-0 flex-col gap-0.5">
         {children ?? list.map(t => <span key={t}>{t}</span>)}
       </span>
-    </p>
+    </FieldPrimitive.Error>
   )
 }
 
 const fieldPending = tv({
-  base: 'basis-full text-caption text-foreground-subtle'
+  base: 'basis-full text-caption text-fg-subtle'
     + ' flex items-start gap-tight',
 })
 
-export function FieldPending({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldPendingProps = FieldHelpProps
 
+export function FieldPending({ className, children, ...rest }: FieldPendingProps) {
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldPending({ className })}
-    >
-      <LoaderCircle className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none" />
+    <FieldPrimitive.Description {...rest} className={fieldPending({ className })}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none">
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
       <span className="min-w-0">{children}</span>
-    </p>
+    </FieldPrimitive.Description>
   )
 }
 
@@ -152,16 +101,16 @@ const fieldSuccess = tv({
     + ' flex items-start gap-tight',
 })
 
-export function FieldSuccess({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldSuccessProps = FieldHelpProps
 
+export function FieldSuccess({ className, children, ...rest }: FieldSuccessProps) {
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldSuccess({ className })}
-    >
-      <CircleCheck className="mt-0.5 size-4 shrink-0" />
+    <FieldPrimitive.Description {...rest} className={fieldSuccess({ className })}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
+        <circle cx="12" cy="12" r="10" />
+        <path d="m16 9-5.5 5.5L8 12" />
+      </svg>
       <span className="min-w-0">{children}</span>
-    </p>
+    </FieldPrimitive.Description>
   )
 }

package/input/index.tsx

@@ -1,20 +1,23 @@
-import type { InputHTMLAttributes } from 'react'
+'use client'
+
+import { Input as InputPrimitive } from '@base-ui/react/input'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
 export const input = tv({
-  base: 'w-full rounded-r8 text-value text-foreground'
-    + ' placeholder:text-foreground-placeholder'
+  base: 'w-full rounded-r8 text-value text-fg'
+    + ' placeholder:text-fg-placeholder'
     + ' invalid:ring-2 invalid:ring-line-danger'
-    + ' read-only:text-foreground-muted'
+    + ' read-only:text-fg-muted'
     + ' transition-state'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:bg-bg-neutral-disabled disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:bg-bg-neutral-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',
 
   variants: {
     surface: {
-      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-background-well',
-      well: 'bg-background-well',
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'h-8 px-3',
@@ -26,11 +29,12 @@ export const input = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export type InputProps = Omit<ComponentProps<typeof InputPrimitive>, 'className' | 'size'> & {
   surface?: 'bare' | 'well'
   size?: 'sm' | 'md' | 'lg'
+  className?: string
 }
 
 export function Input({ surface, size, className, ...rest }: InputProps) {
-  return <input {...rest} className={input({ surface, size, className })} />
+  return <InputPrimitive {...rest} className={input({ surface, size, className })} />
 }

package/kbd/index.tsx

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from 'react'
 import { tv } from '../tv'
 
 const kbd = tv({
-  base: 'bg-background-well text-foreground-muted text-micro rounded-mark inline-flex items-center'
-    + ' border border-line px-1.5 py-0.5 font-mono',
+  base: 'bg-bg-neutral-solid/10 text-fg text-micro rounded-r4 inline-flex items-center'
+    + ' border border-transparent px-1.5 py-0.5 font-mono',
 })
 
 export function Kbd({ className, ...rest }: HTMLAttributes<HTMLElement>) {

package/label/index.tsx

@@ -1,15 +1,13 @@
-import { Label as LabelPrimitive } from 'radix-ui'
 import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
-const labelText = tv({ base: 'text-label text-foreground' })
+const labelText = tv({ base: 'text-label text-fg' })
 
-export function Label({ className, ...rest }: ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      {...rest}
-      className={labelText({ className })}
-    />
-  )
+export type LabelProps = Omit<ComponentProps<'label'>, 'className'> & {
+  className?: string
+}
+
+export function Label({ className, ...rest }: LabelProps) {
+  return <label {...rest} className={labelText({ className })} />
 }

package/number-field/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Minus, Plus } from 'lucide-react'
-import { useEffect, useRef, useState, type InputHTMLAttributes, type PointerEvent as ReactPointerEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field'
+import { useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
 
 import { tv } from '../tv'
 
@@ -13,18 +13,18 @@ export const numberField = tv({
       + ' has-disabled:bg-bg-neutral-disabled has-disabled:cursor-not-allowed'
       + ' has-focus-visible:outline-2 has-focus-visible:outline-offset-2'
       + ' has-focus-visible:outline-line-focus-ring',
-    step: 'text-foreground-muted grid shrink-0 place-items-center rounded-r8'
+    step: 'text-fg-muted grid shrink-0 place-items-center rounded-r8'
       + ' transition-state press press-shrink enabled:not-aria-disabled:hover:bg-bg-neutral-hover'
-      + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
-      + ' aria-disabled:text-foreground-disabled aria-disabled:cursor-not-allowed',
-    input: 'text-value text-foreground w-full min-w-0 bg-transparent text-center outline-none'
-      + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
+      + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+      + ' aria-disabled:text-fg-disabled aria-disabled:cursor-not-allowed',
+    input: 'text-value text-fg w-full min-w-0 bg-transparent text-center outline-none'
+      + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
   },
 
   variants: {
     surface: {
       bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
-      well: { root: 'bg-background-well' },
+      well: { root: 'bg-bg-well' },
     },
     size: {
       sm: { root: 'h-8', step: 'size-8' },
@@ -32,202 +32,155 @@ export const numberField = tv({
       lg: { root: 'h-10', step: 'size-10', input: 'text-t16' },
     },
     readonly: {
-      true: { root: 'bg-background-well', input: 'text-foreground-muted' },
+      true: { root: 'bg-bg-well', input: 'text-fg-muted' },
     },
   },
 
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-const HOLD_DELAY = 400
-const HOLD_EVERY = 60
-
-const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
-
-const GROUPED = new Intl.NumberFormat('en-US')
-
-const TYPING = /[^0-9.-]/g
-
-function snap(n: number, min: number, step: number) {
-  const from = Number.isFinite(min) ? min : 0
-  return from + Math.round((n - from) / step) * step
+const PAGE_KEYS: Record<string, 'ArrowUp' | 'ArrowDown'> = {
+  PageUp: 'ArrowUp',
+  PageDown: 'ArrowDown',
 }
 
-function useHold(step: () => void, blocked: boolean) {
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  const beat = useRef<ReturnType<typeof setInterval> | undefined>(undefined)
-  const latest = useRef(step)
-  const [pressed, setPressed] = useState(false)
-
-  useEffect(() => { latest.current = step })
-
-  const stop = () => {
-    clearTimeout(timer.current)
-    clearInterval(beat.current)
-    setPressed(false)
-  }
-
-  useEffect(() => stop, [])
-
-  const onPointerDown = (e: ReactPointerEvent<HTMLButtonElement>) => {
-    if (e.button !== 0 || blocked) return
-
-    latest.current()
-    setPressed(true)
-    e.currentTarget.setPointerCapture(e.pointerId)
+function snap(n: number, min: number | undefined, max: number | undefined, step: number) {
+  const from = min ?? 0
+  const snapped = from + Math.round((n - from) / step) * step
+  return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, snapped))
+}
 
-    timer.current = setTimeout(() => {
-      beat.current = setInterval(() => { latest.current() }, HOLD_EVERY)
-    }, HOLD_DELAY)
+function blurDetails(event: Event): NumberFieldPrimitive.Root.ChangeEventDetails {
+  const details: NumberFieldPrimitive.Root.ChangeEventDetails = {
+    reason: 'input-blur',
+    event: event as FocusEvent,
+    trigger: event.target instanceof Element ? event.target : undefined,
+    isCanceled: false,
+    isPropagationAllowed: false,
+    cancel: () => { details.isCanceled = true },
+    allowPropagation: () => { details.isPropagationAllowed = true },
   }
-
-  return { pressed, onPointerDown, onPointerUp: stop, onPointerCancel: stop, onLostPointerCapture: stop }
+  return details
 }
 
-export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'min' | 'max' | 'step'> {
-  value?: number | undefined
-  defaultValue?: number
-  onValueChange?: (value: number | undefined) => void
-  decrementLabel: string
-  incrementLabel: string
-  min?: number
-  max?: number
-  step?: number
-  surface?: 'bare' | 'well'
-  size?: 'sm' | 'md' | 'lg'
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-}
+export type NumberFieldProps = Omit<NumberFieldPrimitive.Root.Props, 'className'>
+  & Pick<NumberFieldPrimitive.Input.Props, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'placeholder' | 'autoFocus'>
+  & {
+    decrementLabel: string
+    incrementLabel: string
+    surface?: 'bare' | 'well'
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+  }
 
-export function NumberField(props: NumberFieldProps) {
-  const {
-    value,
-    defaultValue,
-    onValueChange,
-    decrementLabel,
-    incrementLabel,
-    min = Number.NEGATIVE_INFINITY,
-    max = Number.POSITIVE_INFINITY,
-    step = 1,
-    surface,
-    size,
-    disabled = false,
-    readOnly = false,
-    className,
-    ...rest
-  } = props
-
-  const controlled = 'value' in props
-  const [own, setOwn] = useState<number | undefined>(defaultValue)
-  const [typing, setTyping] = useState<string | null>(null)
+export function NumberField({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommitted,
+  decrementLabel,
+  incrementLabel,
+  step = 1,
+  largeStep,
+  min,
+  max,
+  surface,
+  size,
+  disabled = false,
+  readOnly = false,
+  locale = 'en-US',
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  placeholder,
+  autoFocus,
+  ...rest
+}: NumberFieldProps) {
+  const [own, setOwn] = useState<number | null>(defaultValue ?? null)
+  const controlled = value !== undefined
   const current = controlled ? value : own
+  const unit = step === 'any' ? 1 : step
 
   const ui = numberField({ surface, size, readonly: readOnly })
+  const stepButton = <button type="button" disabled={disabled || readOnly} />
 
-  const set = (next: number | undefined) => {
-    const after = next === undefined ? undefined : clamp(next, min, max)
-    if (!controlled) setOwn(after)
-    if (after !== current) onValueChange?.(after)
+  const change: NumberFieldPrimitive.Root.Props['onValueChange'] = (next, details) => {
+    onValueChange?.(next, details)
+    if (!details.isCanceled && !controlled) setOwn(next)
   }
 
-  const blocked = disabled || readOnly
-  const from = current ?? (Number.isFinite(min) ? min : 0)
-  const atMin = current !== undefined && current <= min
-  const atMax = current !== undefined && current >= max
-
-  const down = useHold(() => { setTyping(null); set(from - step) }, blocked || atMin)
-  const up = useHold(() => { setTyping(null); set(from + step) }, blocked || atMax)
-
-  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
-    if (blocked) return
-
-    const moves: Record<string, number> = {
-      ArrowUp: from + step,
-      ArrowDown: from - step,
-      PageUp: from + step * 10,
-      PageDown: from - step * 10,
-      Home: min,
-      End: max,
+  const commit: NumberFieldPrimitive.Root.Props['onValueCommitted'] = (committed, details) => {
+    if (details.reason !== 'input-blur' || committed === null || step === 'any') {
+      onValueCommitted?.(committed, details)
+      return
     }
 
-    const next = moves[e.key]
-    if (next === undefined || !Number.isFinite(next)) return
+    const snapped = snap(committed, min, max, unit)
+    if (snapped !== committed) {
+      const changeDetails = blurDetails(details.event)
+      change(snapped, changeDetails)
+      if (changeDetails.isCanceled) return
+    }
 
-    e.preventDefault()
-    setTyping(null)
-    set(next)
+    onValueCommitted?.(snapped, details)
   }
 
-  const onWheel = (e: React.WheelEvent<HTMLInputElement>) => {
-    e.currentTarget.blur()
-  }
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    const arrow = PAGE_KEYS[e.key]
+    if (!arrow || e.altKey || e.ctrlKey || e.metaKey) return
 
-  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const raw = e.target.value.replace(TYPING, '')
-    setTyping(min >= 0 ? raw.replace(/-/g, '') : raw)
+    e.preventDefault()
+    e.currentTarget.dispatchEvent(new KeyboardEvent('keydown', { key: arrow, shiftKey: true, bubbles: true, cancelable: true }))
   }
 
-  const onBlur = () => {
-    if (typing === null) return
-
-    const parsed = Number(typing)
-    const empty = typing.trim() === ''
-    setTyping(null)
-
-    if (empty) set(undefined)
-    else if (Number.isFinite(parsed)) set(snap(parsed, min, step))
-  }
+  const inputProps = Object.fromEntries(
+    Object.entries({
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-invalid': ariaInvalid,
+      placeholder,
+      autoFocus,
+    }).filter(([, v]) => v !== undefined),
+  ) as NumberFieldPrimitive.Input.Props
 
   return (
-    <div className={ui.root({ className })}>
-      <button
-        type="button"
-        aria-label={decrementLabel}
-        disabled={blocked}
-        aria-disabled={atMin || undefined}
-        data-pressed={down.pressed ? '' : undefined}
-        className={ui.step()}
-        onPointerDown={down.onPointerDown}
-        onPointerUp={down.onPointerUp}
-        onPointerCancel={down.onPointerCancel}
-        onLostPointerCapture={down.onLostPointerCapture}
-      >
-        <Minus className="size-4" />
-      </button>
-
-      <input
-        {...rest}
-        type="text"
-        inputMode="decimal"
-        role="spinbutton"
-        aria-valuenow={current}
-        aria-valuemin={Number.isFinite(min) ? min : undefined}
-        aria-valuemax={Number.isFinite(max) ? max : undefined}
-        value={typing ?? (current === undefined ? '' : GROUPED.format(current))}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onInput}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        onWheel={onWheel}
-        className={ui.input()}
-      />
-
-      <button
-        type="button"
-        aria-label={incrementLabel}
-        disabled={blocked}
-        aria-disabled={atMax || undefined}
-        data-pressed={up.pressed ? '' : undefined}
-        className={ui.step()}
-        onPointerDown={up.onPointerDown}
-        onPointerUp={up.onPointerUp}
-        onPointerCancel={up.onPointerCancel}
-        onLostPointerCapture={up.onLostPointerCapture}
-      >
-        <Plus className="size-4" />
-      </button>
-    </div>
+    <NumberFieldPrimitive.Root
+      {...rest}
+      value={current}
+      onValueChange={change}
+      onValueCommitted={commit}
+      step={step}
+      largeStep={largeStep ?? unit * 10}
+      min={min}
+      max={max}
+      disabled={disabled}
+      readOnly={readOnly}
+      locale={locale}
+      className={className}
+    >
+      <NumberFieldPrimitive.Group className={ui.root()}>
+        <NumberFieldPrimitive.Decrement render={stepButton} aria-label={decrementLabel} className={ui.step()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M5 12h14" />
+          </svg>
+        </NumberFieldPrimitive.Decrement>
+
+        <NumberFieldPrimitive.Input
+          {...inputProps}
+          onKeyDown={onKeyDown}
+          className={ui.input()}
+        />
+
+        <NumberFieldPrimitive.Increment render={stepButton} aria-label={incrementLabel} className={ui.step()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M5 12h14" />
+            <path d="M12 5v14" />
+          </svg>
+        </NumberFieldPrimitive.Increment>
+      </NumberFieldPrimitive.Group>
+    </NumberFieldPrimitive.Root>
   )
 }