@alfakit/react 0.0.0-stage → 0.1.1

package/src/components/fields/slider.tsx

@@ -0,0 +1,262 @@
+import type { SliderSchema } from '@alfakit/core'
+import {
+  fieldIds,
+  sliderBehavior,
+  sliderBlocksTap,
+  sliderDirection,
+  sliderFillSections,
+  sliderFillStyle,
+  sliderFromPrimitive,
+  sliderHasTooltips,
+  sliderNextValues,
+  sliderPips,
+  sliderPrimitive,
+  sliderShowsTooltip,
+  sliderSnap,
+  sliderState,
+  sliderToPrimitive,
+  sliderValues,
+  startSliderRangeDrag,
+} from '@alfakit/core'
+import { Slider as SliderPrimitive } from 'radix-ui'
+import { useMemo, useRef, useState, type PointerEvent } from 'react'
+import { useDirection, useFormatter, useT } from '../../context'
+import { cn } from '../../lib/utils'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+
+/**
+ * A slider with one thumb, or several for a range. Built on Radix Slider, which handles
+ * pointer and keyboard input and mirrors itself in right-to-left layouts (`dir`). Values,
+ * tooltips and pips are formatted with the panel's locale.
+ */
+export function SliderField({ component }: { component: SliderSchema }) {
+  const t = useT()
+  // `rtl()` overrides the panel's direction.
+  const dir = sliderDirection(component, useDirection())
+  const formatter = useFormatter()
+  const { value, setValue, blur, error, id, disabled, readOnly, aria } =
+    useField<unknown>(component)
+  const values = sliderValues(value, component)
+  const pips = useMemo(() => (component.pips ? sliderPips(component) : []), [component])
+  const vertical = Boolean(component.vertical)
+  // `vertical(isTopToBottom: true)`: the minimum at the top.
+  const topToBottom = vertical && Boolean(component.topToBottom)
+  const behavior = sliderBehavior(component)
+  const trackRef = useRef<HTMLSpanElement>(null)
+  // `Behavior::SmoothSteps`: no snapping while a pointer drags a thumb.
+  const [smooth, setSmooth] = useState(false)
+  const primitive = sliderPrimitive(component, smooth)
+  const locked = disabled || readOnly
+
+  const change = (next: number[]) =>
+    setValue(sliderState(sliderNextValues(values, next, component), component))
+
+  // Before the primitive sees the press: start a range drag, or swallow taps on the track.
+  const onPointerDownCapture = (event: PointerEvent<HTMLDivElement>) => {
+    if (locked) return
+
+    const target = event.target as Element
+
+    if (behavior.has('drag') && target.closest('[data-slot="slider-range"]') && trackRef.current) {
+      startSliderRangeDrag(event.nativeEvent, {
+        track: trackRef.current,
+        values,
+        schema: component,
+        direction: dir,
+        vertical,
+        topToBottom,
+        onChange: (next) => setValue(sliderState(next, component)),
+        onEnd: () => blur(),
+      })
+
+      return
+    }
+
+    if (sliderBlocksTap(target, component)) {
+      event.stopPropagation()
+
+      return
+    }
+
+    if (behavior.has('smooth-steps') && target.closest('[role="slider"]')) setSmooth(true)
+  }
+  const format = (number: number) =>
+    formatter.number(number, {
+      maximumFractionDigits: component.decimalPlaces ?? 10,
+      minimumFractionDigits: component.decimalPlaces ?? 0,
+    })
+  const range = component.max - component.min
+  // `fillTrack([…])`: chosen sections are drawn here; the primitive's range stays clear.
+  const fillSections = sliderFillSections(values, component)
+  const fill = fillSections === null && (component.fillTrack === true || values.length > 1)
+
+  const thumbLabel = (index: number) => {
+    if (values.length === 1) return undefined
+    if (values.length === 2) {
+      return index === 0 ? t('slider.minimum', {}, 'Minimum') : t('slider.maximum', {}, 'Maximum')
+    }
+
+    return t('slider.thumb', { number: index + 1 }, `Value ${index + 1}`)
+  }
+
+  return (
+    <FieldWrapper field={component} htmlFor={`${id}-thumb-0`} error={error}>
+      <div
+        data-slot="slider"
+        className={cn(
+          'px-2',
+          sliderHasTooltips(component) && !vertical && 'pt-7',
+          pips.length > 0 && 'pb-6',
+        )}
+        onPointerDownCapture={onPointerDownCapture}
+      >
+        <SliderPrimitive.Root
+          id={id}
+          dir={dir}
+          min={primitive.min}
+          max={primitive.max}
+          step={primitive.step}
+          minStepsBetweenThumbs={
+            component.minDifference && !primitive.nonLinear
+              ? Math.round(component.minDifference / component.step)
+              : 0
+          }
+          orientation={vertical ? 'vertical' : 'horizontal'}
+          inverted={topToBottom}
+          disabled={locked}
+          value={sliderToPrimitive(values, component)}
+          onValueChange={(next) => change(sliderFromPrimitive(next, component, !smooth))}
+          onValueCommit={() => {
+            if (smooth) {
+              setSmooth(false)
+              change(values.map((thumb) => sliderSnap(thumb, component)))
+            }
+
+            blur()
+          }}
+          className={cn(
+            'relative flex touch-none items-center select-none data-[disabled]:opacity-50',
+            vertical ? 'h-48 w-5 flex-col' : 'w-full',
+            readOnly && 'data-[disabled]:opacity-100',
+          )}
+        >
+          <SliderPrimitive.Track
+            ref={trackRef}
+            className={cn(
+              'bg-muted relative grow overflow-hidden rounded-full',
+              vertical ? 'h-full w-1.5' : 'h-1.5 w-full',
+            )}
+          >
+            {fillSections?.map((section) => (
+              <span
+                key={`${section.start}-${section.end}`}
+                data-slot="slider-fill"
+                aria-hidden="true"
+                className={cn('bg-primary absolute', vertical ? 'w-full' : 'h-full')}
+                // Runtime geometry: no Tailwind class can hold these values.
+                style={sliderFillStyle(section, { vertical, topToBottom, direction: dir })}
+              />
+            ))}
+            <SliderPrimitive.Range
+              data-slot="slider-range"
+              className={cn(
+                'absolute',
+                fill ? 'bg-primary' : 'bg-transparent',
+                behavior.has('drag') && values.length > 1 && !locked && 'cursor-grab',
+                vertical ? 'w-full' : 'h-full',
+              )}
+            />
+          </SliderPrimitive.Track>
+          {values.map((thumb, index) => (
+            <SliderPrimitive.Thumb
+              key={index}
+              id={`${id}-thumb-${index}`}
+              aria-label={thumbLabel(index)}
+              aria-labelledby={
+                values.length === 1 && component.label ? fieldIds(id).label : undefined
+              }
+              aria-describedby={aria['aria-describedby']}
+              aria-valuetext={format(thumb)}
+              className="border-primary bg-background ring-ring/50 relative block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none"
+            >
+              {sliderShowsTooltip(component, index) && (
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    'bg-foreground text-background pointer-events-none absolute rounded px-1.5 py-0.5 text-xs whitespace-nowrap tabular-nums',
+                    vertical
+                      ? 'start-6 top-1/2 -translate-y-1/2'
+                      : 'bottom-6 left-1/2 -translate-x-1/2',
+                  )}
+                >
+                  {format(thumb)}
+                </span>
+              )}
+            </SliderPrimitive.Thumb>
+          ))}
+          {pips.length > 0 && range > 0 && (
+            <div
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none absolute',
+                vertical ? 'inset-y-0 start-6' : 'inset-x-0 top-4',
+              )}
+            >
+              {pips.map((pip) => {
+                // Radix puts the minimum at the bottom of a vertical slider and at the
+                // inline start of a horizontal one (the right in RTL).
+                const offset = `${pip.percent}%`
+                const style = vertical
+                  ? topToBottom
+                    ? { top: offset }
+                    : { bottom: offset }
+                  : dir === 'rtl'
+                    ? { right: offset }
+                    : { left: offset }
+
+                return (
+                  <span
+                    key={pip.value}
+                    style={style}
+                    className={cn(
+                      'absolute flex items-center gap-1',
+                      vertical
+                        ? cn('flex-row', topToBottom ? '-translate-y-1/2' : 'translate-y-1/2')
+                        : 'flex-col',
+                      !vertical && (dir === 'rtl' ? 'translate-x-1/2' : '-translate-x-1/2'),
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        'bg-border block',
+                        vertical ? 'h-px' : 'w-px',
+                        pip.labelled && !pip.small
+                          ? vertical
+                            ? 'w-2'
+                            : 'h-2'
+                          : vertical
+                            ? 'w-1'
+                            : 'h-1',
+                      )}
+                    />
+                    {pip.labelled && (
+                      <span
+                        className={cn(
+                          'text-muted-foreground tabular-nums',
+                          pip.small ? 'text-[0.625rem]' : 'text-xs',
+                        )}
+                      >
+                        {format(pip.value)}
+                      </span>
+                    )}
+                  </span>
+                )
+              })}
+            </div>
+          )}
+        </SliderPrimitive.Root>
+      </div>
+    </FieldWrapper>
+  )
+}

package/src/components/fields/tags-input.tsx

@@ -0,0 +1,176 @@
+import { moveListItem, reorderOffset, type TagsInputSchema } from '@alfakit/core'
+import { XIcon } from 'lucide-react'
+import { useEffect, useRef, useState, type KeyboardEvent } from 'react'
+import { useDirection, useT } from '../../context'
+import { badgeColorClasses, colorClass } from '../../lib/colors'
+import { cn } from '../../lib/utils'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+import { Badge } from '../ui/badge'
+
+export function TagsInputField({ component }: { component: TagsInputSchema }) {
+  const t = useT()
+  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string[] | null>(
+    component,
+  )
+  const direction = useDirection()
+  const [draft, setDraft] = useState('')
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  // Keyboard reordering: the tag to refocus after a move, and the live-region announcement.
+  const focusIndex = useRef<number | null>(null)
+  const [announcement, setAnnouncement] = useState('')
+  const listRef = useRef<HTMLDivElement>(null)
+  const reorderable = Boolean(component.reorderable) && !disabled && !readOnly
+  const tags = value ?? []
+  const listId = component.suggestions ? `${id}-suggestions` : undefined
+
+  const commit = (raw: string) => {
+    const tag = `${component.tagPrefix ?? ''}${raw.trim()}${component.tagSuffix ?? ''}`
+
+    if (raw.trim() === '' || tags.includes(tag)) {
+      setDraft('')
+
+      return
+    }
+
+    setValue([...tags, tag])
+    setDraft('')
+  }
+
+  useEffect(() => {
+    if (focusIndex.current === null) {
+      return
+    }
+
+    listRef.current?.querySelectorAll<HTMLElement>('[data-tag]')[focusIndex.current]?.focus()
+    focusIndex.current = null
+  }, [value])
+
+  // Alt + ArrowLeft/ArrowRight (flipped in RTL) moves the focused tag.
+  const onTagKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const offset = reorderOffset(event, 'horizontal', direction)
+
+    if (!reorderable || offset === null) {
+      return
+    }
+
+    event.preventDefault()
+    const target = index + offset
+
+    if (target < 0 || target >= tags.length) {
+      return
+    }
+
+    setValue(moveListItem(tags, index, target))
+    focusIndex.current = target
+    setAnnouncement(
+      t(
+        'form.tag_moved',
+        { tag: tags[index] ?? '', position: target + 1, total: tags.length },
+        ':tag moved to position :position of :total',
+      ),
+    )
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (readOnly) {
+      return
+    }
+
+    if (component.splitKeys.includes(event.key)) {
+      event.preventDefault()
+      commit(draft)
+    } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {
+      setValue(tags.slice(0, -1))
+    }
+  }
+
+  return (
+    <FieldWrapper field={component} htmlFor={id} error={error}>
+      <div
+        ref={listRef}
+        className={cn(
+          'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border px-2 py-1.5 shadow-xs has-[input:focus-visible]:ring-[3px]',
+          error && 'border-destructive',
+          disabled && 'opacity-50',
+        )}
+      >
+        {tags.map((tag, index) => (
+          <Badge
+            key={`${tag}-${index}`}
+            variant="outline"
+            data-tag=""
+            tabIndex={reorderable ? 0 : undefined}
+            aria-describedby={reorderable ? `${id}-reorder-hint` : undefined}
+            onKeyDown={(event) => onTagKeyDown(event, index)}
+            draggable={reorderable}
+            onDragStart={() => setDragIndex(index)}
+            onDragOver={(event) => reorderable && event.preventDefault()}
+            onDrop={() => {
+              if (dragIndex !== null && dragIndex !== index)
+                setValue(moveListItem(tags, dragIndex, index))
+              setDragIndex(null)
+            }}
+            onDragEnd={() => setDragIndex(null)}
+            className={cn(
+              'gap-1 pe-1',
+              colorClass(badgeColorClasses, component.color, 'gray'),
+              reorderable &&
+                'focus-visible:ring-ring/50 cursor-grab outline-none focus-visible:ring-[3px]',
+              dragIndex === index && 'opacity-50',
+            )}
+          >
+            {tag}
+            {!disabled && !readOnly && (
+              <button
+                type="button"
+                aria-label={t('form.remove_tag', { tag }, 'Remove :tag')}
+                className="hover:bg-foreground/10 rounded-sm"
+                onClick={() => setValue(tags.filter((_, i) => i !== index))}
+              >
+                <XIcon className="size-3" />
+              </button>
+            )}
+          </Badge>
+        ))}
+        <input
+          dir="auto"
+          id={id}
+          list={listId}
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={onKeyDown}
+          onBlur={() => {
+            if (!readOnly && draft.trim() !== '') {
+              commit(draft)
+            }
+
+            blur()
+          }}
+          placeholder={
+            tags.length === 0 ? (component.placeholder ?? t('form.add_item', {}, 'Add…')) : ''
+          }
+          disabled={disabled}
+          readOnly={readOnly}
+          {...aria}
+          className="placeholder:text-muted-foreground min-w-[6rem] flex-1 bg-transparent text-sm outline-none"
+        />
+        {component.suggestions && (
+          <datalist id={listId}>
+            {component.suggestions.map((suggestion) => (
+              <option key={suggestion} value={suggestion} />
+            ))}
+          </datalist>
+        )}
+        {reorderable && (
+          <span id={`${id}-reorder-hint`} className="sr-only">
+            {t('form.reorder_tags_hint', {}, 'Press Alt with an arrow key to move this tag.')}
+          </span>
+        )}
+        <span aria-live="polite" aria-atomic="true" className="sr-only">
+          {announcement}
+        </span>
+      </div>
+    </FieldWrapper>
+  )
+}

package/src/components/fields/text-input.tsx

@@ -0,0 +1,179 @@
+import { applyMask, type TextInputSchema } from '@alfakit/core'
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { useT } from '../../context'
+import { extraProps } from '../../lib/attributes'
+import { textColorClasses } from '../../lib/colors'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+
+/** Values that are always written left to right, even in an RTL interface. */
+const LTR_INPUT_TYPES = new Set(['email', 'url', 'tel', 'password', 'number'])
+
+export function TextInputField({ component }: { component: TextInputSchema }) {
+  const { value, setValue, blur, error, id, disabled, aria } = useField<string | number | null>(
+    component,
+  )
+  const t = useT()
+  const [revealed, setRevealed] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => () => clearTimeout(copiedTimer.current), [])
+
+  const copy = () => {
+    const text = value === null || value === undefined ? '' : String(value)
+
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true)
+      clearTimeout(copiedTimer.current)
+      copiedTimer.current = setTimeout(
+        () => setCopied(false),
+        component.copyMessageDuration ?? 1500,
+      )
+    })
+  }
+
+  const type = component.inputType === 'password' && revealed ? 'text' : component.inputType
+  const hasAffixes =
+    component.prefix ||
+    component.suffix ||
+    component.prefixIcon ||
+    component.suffixIcon ||
+    component.revealable ||
+    component.copyable
+  const listId = component.datalist ? `${id}-list` : undefined
+
+  const input = (
+    <Input
+      id={id}
+      name={component.name}
+      type={type}
+      dir={LTR_INPUT_TYPES.has(component.inputType) ? 'ltr' : 'auto'}
+      value={value ?? ''}
+      onChange={(event) => setValue(applyMask(event.target.value, component.mask))}
+      onBlur={blur}
+      placeholder={component.placeholder}
+      disabled={disabled}
+      readOnly={component.readOnly}
+      required={component.required}
+      autoFocus={component.autofocus}
+      minLength={component.minLength}
+      maxLength={component.maxLength}
+      min={component.min}
+      max={component.max}
+      step={component.step}
+      autoComplete={component.autocomplete}
+      inputMode={component.inputMode as React.HTMLAttributes<HTMLInputElement>['inputMode']}
+      list={listId}
+      autoCapitalize={component.autocapitalize}
+      {...aria}
+
+      {...extraProps(
+        component.extraInputAttributes,
+        cn(
+          hasAffixes &&
+            'h-full border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        ),
+      )}
+    />
+  )
+
+  return (
+    <FieldWrapper field={component} htmlFor={id} error={error}>
+      {hasAffixes ? (
+        <div
+          data-slot="input-group"
+          className={cn(
+            'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',
+            error && 'border-destructive',
+          )}
+        >
+          {(component.prefix || component.prefixIcon) && (
+            <span className="text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm">
+              <Icon
+                name={component.prefixIcon}
+                className={component.prefixIconColor && textColorClasses[component.prefixIconColor]}
+              />
+              {component.prefix}
+            </span>
+          )}
+          {input}
+          {(component.suffix || component.suffixIcon) && (
+            <span className="text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm">
+              {component.suffix}
+              <Icon
+                name={component.suffixIcon}
+                className={component.suffixIconColor && textColorClasses[component.suffixIconColor]}
+              />
+            </span>
+          )}
+          {component.revealable && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="my-auto me-1"
+              onClick={() => setRevealed((state) => !state)}
+              aria-label={
+                revealed
+                  ? t('form.hide_password', {}, 'Hide password')
+                  : t('form.show_password', {}, 'Show password')
+              }
+            >
+              {revealed ? (
+                <Icon
+                  name="alfakit::forms.components.text-input.actions.hide-password"
+                  fallback={EyeOffIcon}
+                />
+              ) : (
+                <Icon
+                  name="alfakit::forms.components.text-input.actions.show-password"
+                  fallback={EyeIcon}
+                />
+              )}
+            </Button>
+          )}
+          {component.copyable && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="my-auto me-1"
+              data-slot="copy-button"
+              onClick={copy}
+              aria-label={t('copy', {}, 'Copy')}
+            >
+              {copied ? (
+                <CheckIcon />
+              ) : (
+                <Icon
+                  name="alfakit::forms.components.text-input.actions.copy"
+                  fallback={CopyIcon}
+                />
+              )}
+            </Button>
+          )}
+        </div>
+      ) : (
+        input
+      )}
+      {component.copyable && copied && (
+        <span role="status" className={cn('text-xs', !component.copyMessage && 'sr-only')}>
+          {component.copyMessage ?? t('copied', {}, 'Copied')}
+        </span>
+      )}
+      {component.datalist && (
+        <datalist id={listId}>
+          {component.datalist.map((option) => (
+            <option key={option} value={option} />
+          ))}
+        </datalist>
+      )}
+    </FieldWrapper>
+  )
+}

package/src/components/fields/textarea.tsx

@@ -0,0 +1,37 @@
+import type { TextareaSchema } from '@alfakit/core'
+import { extraProps } from '../../lib/attributes'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+import { Textarea } from '../ui/textarea'
+
+export function TextareaField({ component }: { component: TextareaSchema }) {
+  const { value, setValue, blur, error, id, disabled, aria } = useField<string | null>(component)
+
+  return (
+    <FieldWrapper field={component} htmlFor={id} error={error}>
+      <Textarea
+        dir="auto"
+        id={id}
+        name={component.name}
+        value={value ?? ''}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={blur}
+        placeholder={component.placeholder}
+        disabled={disabled}
+        readOnly={component.readOnly}
+        required={component.required}
+        autoFocus={component.autofocus}
+        rows={component.rows}
+        cols={component.cols}
+        minLength={component.minLength}
+        maxLength={component.maxLength}
+        {...aria}
+
+        {...extraProps(
+          component.extraInputAttributes,
+          component.autosize ? 'field-sizing-content' : undefined,
+        )}
+      />
+    </FieldWrapper>
+  )
+}