@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/inputs/date-time/time-picker/examples.mdx

@@ -1,57 +0,0 @@
-import TimePicker from './index'
-import { de } from 'react-day-picker/locale'
-
-# Basic
-
-The locale's clock: in English, 12-hour, the hours read with AM/PM.
-
-<div className="w-48 max-w-full">
-  <TimePicker defaultValue="15:33" />
-</div>
-
-# 24-hour clock
-
-A German locale writes 24-hour times.
-
-<div className="w-48 max-w-full">
-  <TimePicker locale={de} defaultValue="15:33" />
-</div>
-
-# Quarter hours
-
-`minuteStep={15}` leaves four minutes to pick from.
-
-<div className="w-48 max-w-full">
-  <TimePicker hourCycle="h23" minuteStep={15} placeholder="Start time" />
-</div>
-
-# The field follows the clock
-
-`hourCycle` sets the field's clock as well as the columns': "20:30" on `'h23'` in English, "8:30 PM" on `'h12'` in German.
-
-<div className="flex w-48 max-w-full flex-col gap-2">
-  <TimePicker hourCycle="h23" defaultValue="20:30" />
-  <TimePicker locale={de} hourCycle="h12" defaultValue="20:30" />
-</div>
-
-# Slovak, labels and format
-
-`locale="sk"` reads Slovak off Intl; `labels` names the columns and the panel's input, and `formatTime` writes the field's text from the `"HH:mm"` value.
-
-<div className="w-48 max-w-full">
-  <TimePicker
-    locale="sk"
-    placeholder="Čas"
-    formatTime={value => value + ' h'}
-    labels={{ time: 'Čas', hour: 'Hodina', minute: 'Minúta', close: 'Zavrieť' }}
-    defaultValue="15:30"
-  />
-</div>
-
-# Read only
-
-`readOnly` shows the time and never opens.
-
-<div className="w-48 max-w-full">
-  <TimePicker readOnly defaultValue="15:33" />
-</div>

package/components/inputs/date-time/time-picker/index.tsx

@@ -1,227 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a time-of-day field with
- * scrolling hour and minute columns. Props after utegsk/ui's TimePicker
- * (`hourCycle`, a string value), kept in line with the other pickers here.
- */
-
-import { type Locale, set } from 'date-fns'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type ReactNode,
-  type RefAttributes,
-  type RefObject,
-  useRef,
-} from 'react'
-import {
-  defaultLocale,
-  formatTime,
-  type HourCycle,
-  hourCycleOf,
-  parseTimeText,
-  resolveLocale,
-} from '../../../../lib/date-locale'
-import type { FieldVariant } from '../../../../lib/field-classes'
-import { dividedColumns } from '../../../../lib/scroll-column'
-import type { SizeVariant } from '../../../../lib/size-context'
-import { useControllableState } from '../../../../lib/use-controllable-state'
-import { cn } from '../../../../lib/utils'
-import { controlAttributes, invalidOf, type PickerControlProps, PickerInput, PickerShell } from '../picker-shell'
-import { pad, type Time, TimeColumns } from '../time-columns'
-
-/** Every word the picker shows or announces, for translating it. */
-interface TimePickerLabels {
-  /** Names the panel's time input. Defaults to the `placeholder`, else `"Time"`. */
-  time?: string
-  /** Names the hour column. Defaults to the locale's name for it. */
-  hour?: string
-  /** Names the minute column. Defaults to the locale's name for it. */
-  minute?: string
-  /** Names the panel's close button. Defaults to `"Close"`. */
-  close?: string
-}
-
-interface TimePickerProps extends PickerControlProps {
-  /** The picked time as `"HH:mm"` on a 24-hour clock (an `<input type="time">`'s value); `null` when empty. */
-  value?: string | null
-  /** Initial time, for an uncontrolled picker. Defaults to `null`. */
-  defaultValue?: string | null
-  /** Called with the new `"HH:mm"`, or `null` when the field is cleared. */
-  onValueChange?: (value: string | null) => void
-  /** The clock shown: on `'h12'` / `'h11'` the hours read with AM/PM. Defaults to the locale's. */
-  hourCycle?: HourCycle
-  /** Steps between the minute column's options. Defaults to `1`. */
-  minuteStep?: number
-  /** A react-day-picker / date-fns locale, or a BCP 47 tag (`"sk"`) read through Intl: the time's format and the AM/PM names. Defaults to `enUS`. */
-  locale?: Locale | string
-  /** The field's text for a time, in place of the locale's format: `(value) => …`, given `"HH:mm"`. */
-  formatTime?: (value: string) => ReactNode
-  /** Every word the picker announces (`time`, `hour`, `minute`, `close`), for translating it. Defaults to English and the locale's field names. */
-  labels?: TimePickerLabels
-  /** Shows the time but never opens. Defaults to `false`. */
-  readOnly?: boolean
-  /** Names the value for a native form: a hidden input carries it as `"HH:mm"`. */
-  name?: string
-  /** Shown while empty. */
-  placeholder?: string
-  /** Disables the field. Defaults to `false`. */
-  disabled?: boolean
-  /** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
-  variant?: FieldVariant
-  /** Marks the field invalid. Defaults to `false`. */
-  invalid?: boolean
-  /** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Controlled open state. */
-  open?: boolean
-  /** Initial open state, for an uncontrolled panel. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the panel opens or closes. */
-  onOpenChange?: (open: boolean) => void
-  /** Id of the field, for a `Label`'s `htmlFor`. */
-  id?: string
-  /** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
-  tier?: 'moderate' | 'slow'
-  /** Classes for the field. */
-  className?: string
-}
-
-const toTime = (value: string | null): Time | null => {
-  const [hours, minutes] = value?.split(':').map(Number) ?? []
-  return hours === undefined || minutes === undefined ? null : { hours, minutes }
-}
-const toValue = ({ hours, minutes }: Time) => `${pad(hours)}:${pad(minutes)}`
-
-/**
- * A time-of-day field with scrolling hour and minute columns.
- *
- * The panel opens with the time as text, selected and ready to type over
- * ("15:33", "3:33 PM"), above an hour column and a minute column; on a
- * 12-hour clock the hours read with AM/PM, and the field writes the time on
- * the same clock. Each column keeps its pick in the middle and
- * marks it with a dot. The value is `"HH:mm"` on a 24-hour clock whatever the
- * locale shows, the same as a native time input's.
- *
- * `formatTime` writes the field's text and `labels` every word it
- * announces; `locale` also takes a BCP 47 tag. `readOnly` shows the time
- * and never opens. In a form, `name` submits the value as `"HH:mm"` and
- * `required` stops an empty submit; `id`, the `aria-*` props, `onBlur`,
- * `controlProps` and the `ref` reach the field's button.
- *
- * @example {@include ./examples.mdx}
- */
-const TimePicker: ForwardRefExoticComponent<TimePickerProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-  HTMLButtonElement,
-  TimePickerProps
->(function TimePicker(
-  {
-    value: valueProp,
-    defaultValue = null,
-    onValueChange,
-    hourCycle,
-    minuteStep = 1,
-    locale: localeProp = defaultLocale,
-    formatTime: formatValue,
-    labels,
-    readOnly = false,
-    name,
-    placeholder,
-    disabled,
-    variant,
-    invalid,
-    size,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    id,
-    from,
-    effect,
-    hideSource,
-    tier,
-    className,
-    ...control
-  },
-  ref,
-) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange)
-  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange)
-  const input = useRef<HTMLInputElement>(null)
-  const locale = resolveLocale(localeProp)
-  const clock = hourCycle ?? hourCycleOf(locale)
-  const time = toTime(value)
-  const formatted = time ? formatTime(set(new Date(), time), locale, hourCycle) : ''
-
-  const readTime = (text: string) => {
-    if (!text.trim()) {
-      setValue(null)
-      return true
-    }
-    const read = parseTimeText(text, locale)
-    if (!read) return false
-    setValue(toValue({ hours: read.getHours(), minutes: read.getMinutes() }))
-    return true
-  }
-
-  return (
-    <PickerShell
-      open={open}
-      onOpenChange={setOpen}
-      size={size}
-      variant={variant}
-      invalid={invalidOf(invalid, control['aria-invalid'])}
-      disabled={disabled}
-      readOnly={readOnly}
-      icon="clock"
-      display={time && formatValue ? formatValue(toValue(time)) : formatted}
-      placeholder={placeholder}
-      closeLabel={labels?.close}
-      controlRef={ref}
-      controlProps={controlAttributes(control)}
-      formValues={[{ slot: 'value', name, value: time ? toValue(time) : '' }]}
-      required={control.required}
-      header={
-        <PickerInput
-          ref={input}
-          aria-label={labels?.time || placeholder || 'Time'}
-          placeholder={placeholder}
-          formatted={formatted}
-          onText={readTime}
-          onEnter={() => setOpen(false)}
-          className="flex-1"
-        />
-      }
-      initialFocus={input}
-      popupClassName="w-[max(var(--anchor-width,0px),14rem)]"
-      id={id}
-      from={from}
-      effect={effect}
-      hideSource={hideSource}
-      tier={tier}
-      className={className}
-    >
-      <div className={cn(dividedColumns, 'h-56')}>
-        <TimeColumns
-          value={time}
-          onValueChange={next => setValue(toValue(next))}
-          hourCycle={clock}
-          minuteStep={minuteStep}
-          locale={locale}
-          orientation="vertical"
-          fill
-          labels={labels}
-        />
-      </div>
-    </PickerShell>
-  )
-})
-
-export type { TimePickerLabels, TimePickerProps }
-export { TimePicker }
-
-export default TimePicker

package/components/inputs/field/examples.mdx

@@ -1,117 +0,0 @@
-import Field from './index'
-import Input from '../input'
-import Textarea from '../textarea'
-import NumberInput from '../number-input'
-import { Mail } from 'lucide-react'
-
-# Basics
-
-## Field
-
-A label above the control, help text below it. The label targets the control and the description is read with it.
-
-<Field className="w-72 max-w-full">
-  <Field.Label>Email</Field.Label>
-  <Input icon={Mail} placeholder="you@example.com" />
-  <Field.Description>We only write about your account.</Field.Description>
-</Field>
-
-## Any field control
-
-Textarea and NumberInput join the same way: the label, description and error wire to them.
-
-<div className="flex flex-col gap-4 w-72 max-w-full">
-  <Field>
-    <Field.Label>Message</Field.Label>
-    <Textarea placeholder="Write your message" minRows={2} />
-  </Field>
-  <Field invalid>
-    <Field.Label>Seats</Field.Label>
-    <NumberInput defaultValue={0} min={0} />
-    <Field.Error>Book at least one seat.</Field.Error>
-  </Field>
-</div>
-
-## Field.Control
-
-A control that isn't a field control gets the field's id, `aria-describedby` and `aria-invalid` through `Field.Control`, here a native select.
-
-<Field className="w-72 max-w-full">
-  <Field.Label>Country</Field.Label>
-  <Field.Control
-    render={
-      <select className="h-9 w-full bg-transparent px-1.5 text-body text-foreground">
-        <option>Slovakia</option>
-        <option>Czechia</option>
-        <option>Austria</option>
-      </select>
-    }
-  />
-  <Field.Description>Where the invoice is sent.</Field.Description>
-</Field>
-
-## Hidden label
-
-`visuallyHidden` keeps the label for assistive tech where the placeholder carries the meaning.
-
-<Field className="w-72 max-w-full">
-  <Field.Label visuallyHidden>Search</Field.Label>
-  <Input variant="bordered" placeholder="Search people" />
-</Field>
-
-## Compact
-
-`size` pins the field and its control to the compact step.
-
-<Field size="compact" className="w-64 max-w-full">
-  <Field.Label>Filter</Field.Label>
-  <Input placeholder="Name contains…" />
-  <Field.Description>Matches any part of the name.</Field.Description>
-</Field>
-
-# States
-
-## Error
-
-`invalid` turns the label and the box destructive; `Field.Error` shows its message while it has one. Both come from your validation.
-
-<Field invalid className="w-72 max-w-full">
-  <Field.Label>Email</Field.Label>
-  <Input icon={Mail} defaultValue="ada@" />
-  <Field.Error>Enter a full address, like ada@example.com.</Field.Error>
-</Field>
-
-## Required
-
-`required` marks the control required and the label with an asterisk.
-
-<Field required name="company" className="w-72 max-w-full">
-  <Field.Label>Company</Field.Label>
-  <Input placeholder="Acme Inc." />
-</Field>
-
-## Native validation
-
-With `validationMode`, Base UI checks the control's own rules (`required`, `type="email"`) and the field turns destructive on a failure; an empty `Field.Error` shows the browser's message. Type something that isn't an address and leave the field.
-
-<Field required validationMode="onBlur" className="w-72 max-w-full">
-  <Field.Label>Work email</Field.Label>
-  <Input type="email" icon={Mail} placeholder="you@company.com" />
-  <Field.Error />
-</Field>
-
-## Disabled and read-only
-
-The field hands its state to the control: `disabled` dims everything, `readOnly` keeps the value selectable.
-
-<div className="flex flex-col gap-4 w-72 max-w-full">
-  <Field disabled>
-    <Field.Label>Workspace</Field.Label>
-    <Input defaultValue="Design" />
-    <Field.Description>Only owners can rename it.</Field.Description>
-  </Field>
-  <Field readOnly>
-    <Field.Label>Invoice number</Field.Label>
-    <Input defaultValue="INV-2026-0042" />
-  </Field>
-</div>

package/components/inputs/field/index.tsx

@@ -1,268 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a labelled form field on
- * Base UI's Field, with no form library of its own. The label, description
- * and error line up with the text inside the field box
- * (`lib/field-variants.ts`), and the field's state reaches any control built
- * on `useFieldBox` through `FieldStateContext` (`lib/field-classes.ts`), the
- * way InputGroup.Field hands it to its control.
- */
-
-import { Field as BaseField } from '@base-ui/react/field'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-  type RefAttributes,
-  useMemo,
-} from 'react'
-import { FIELD_TEXT_INSET, FieldStateContext, useFieldState } from '../../../lib/field-classes'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { slotId, slotRender } from '../../../lib/slot'
-import { cn } from '../../../lib/utils'
-import { SizeProvider } from '../../../primitives/sizes'
-import { Label } from '../input'
-
-/** When native validity is checked. */
-type FieldValidationMode = 'onSubmit' | 'onBlur' | 'onChange'
-
-interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** The field's parts: `Field.Label`, a control, `Field.Description`, `Field.Error`. */
-  children?: ReactNode
-  /** Marks the value invalid: the label and the control turn destructive and the control sets `aria-invalid`. Set it from your validation (a form library's field state). Defaults to `false`. */
-  invalid?: boolean
-  /** Disables the control and dims the field. Defaults to `false`. */
-  disabled?: boolean
-  /** Shows the value without letting it change (Input, NumberInput and FileDropzone read it). Defaults to `false`. */
-  readOnly?: boolean
-  /** Marks the control required and the label with an asterisk. Defaults to `false`. */
-  required?: boolean
-  /** Names the value when the form is submitted; wins over the control's own `name`. */
-  name?: string
-  /** Whether the value differs from its initial one, for a form library that tracks it (sets `data-dirty`). */
-  dirty?: boolean
-  /** Whether the control has been visited, for a form library that tracks it (sets `data-touched`). */
-  touched?: boolean
-  /** When Base UI checks the control's native validity (`required`, `pattern`, `type`): on form submit, on blur, or on every change. A failure turns the field destructive and an empty `Field.Error` shows the browser's message. Defaults to `"onSubmit"`. */
-  validationMode?: FieldValidationMode
-  /** Pins the field and its control to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the root. */
-  className?: string
-}
-
-interface FieldLabelProps {
-  /** Label text. */
-  children: ReactNode
-  /** Keep the label for assistive tech but don't render it, for a field whose placeholder or context carries the meaning. Defaults to `false`. */
-  visuallyHidden?: boolean
-  /** Classes for the label. */
-  className?: string
-}
-
-function FieldLabel({ children, visuallyHidden, className }: FieldLabelProps) {
-  const field = useFieldState()
-
-  return (
-    <BaseField.Label
-      render={
-        <Label invalid={field?.invalid} className={cn(visuallyHidden && 'sr-only', className)}>
-          {children}
-          {field?.required && <span aria-hidden="true"> *</span>}
-        </Label>
-      }
-    />
-  )
-}
-
-interface FieldDescriptionProps {
-  /** Help text under the control: a format, a limit, what the value is for. */
-  children: ReactNode
-  /** Classes for the description. */
-  className?: string
-}
-
-function FieldDescription({ children, className }: FieldDescriptionProps) {
-  const size = useSize()
-
-  return (
-    <BaseField.Description
-      className={cn(
-        'text-muted-foreground weight-normal data-[disabled]:opacity-50',
-        size.variant === 'compact' ? 'text-caption-compact' : 'text-caption',
-        FIELD_TEXT_INSET[size.variant],
-        className,
-      )}
-    >
-      {children}
-    </BaseField.Description>
-  )
-}
-
-/** Which native validity state shows the message (`"valueMissing"`, `"typeMismatch"`, …). */
-type FieldErrorMatch = boolean | keyof ValidityState
-
-interface FieldErrorProps {
-  /** The message. While it has one, it shows; empty, it hides. */
-  children?: ReactNode
-  /** Overrides when it shows: `true` always, `false` never, or a native validity state such as `"valueMissing"`. Defaults to showing while it has a message. */
-  match?: FieldErrorMatch
-  /** Classes for the message. */
-  className?: string
-}
-
-function FieldError({ children, match, className }: FieldErrorProps) {
-  const size = useSize()
-  const hasMessage = children != null && children !== false && children !== ''
-
-  return (
-    <BaseField.Error
-      // Without a message and a match, Base UI shows the native validation message.
-      match={match ?? (hasMessage || undefined)}
-      className={cn(
-        'text-destructive weight-medium',
-        size.variant === 'compact' ? 'text-caption-compact' : 'text-caption',
-        FIELD_TEXT_INSET[size.variant],
-        'transition-opacity duration-fast data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-fast-exit',
-        className,
-      )}
-      // An explicit `children: undefined` would hide Base UI's own message.
-      {...(hasMessage ? { children } : {})}
-    />
-  )
-}
-
-interface FieldControlProps {
-  /** The element that becomes the control, e.g. a native `<select>` or a third-party input. */
-  render?: ReactElement
-  /** Compose onto the single child instead. Defaults to `false`. */
-  asChild?: boolean
-  /** The control, with `asChild`. */
-  children?: ReactNode
-}
-
-function FieldControl({ render, asChild, children }: FieldControlProps) {
-  const el = slotRender(render, asChild, children)
-  return <BaseField.Control render={el} id={slotId(el)} />
-}
-
-interface ProvideFieldStateProps {
-  invalid: boolean
-  disabled: boolean
-  readOnly: boolean
-  required: boolean
-  children?: ReactNode
-}
-
-function ProvideFieldState({ invalid, disabled, readOnly, required, children }: ProvideFieldStateProps) {
-  const state = useMemo(
-    () => ({ active: false, invalid, disabled, readOnly, required }),
-    [invalid, disabled, readOnly, required],
-  )
-  return <FieldStateContext.Provider value={state}>{children}</FieldStateContext.Provider>
-}
-
-type FieldComponent = ForwardRefExoticComponent<FieldProps & RefAttributes<HTMLDivElement>> & {
-  Label: typeof FieldLabel
-  Description: typeof FieldDescription
-  Error: typeof FieldError
-  Control: typeof FieldControl
-}
-
-/**
- * A labelled form field: a label above the control, help text and an error
- * message below it, all linked for assistive tech.
- *
- * Put an Input, Textarea, NumberInput, FileDropzone, Select or any other
- * field control inside and it joins on its own: the label targets it, the
- * description and error are read with it, and the field hands it its
- * `invalid`, `disabled`, `readOnly` and `required` state, so the box turns
- * destructive with the label. The label and messages sit inset to line up
- * with the text in the box. The field holds no validation of its own:
- * `invalid` and the error's message come from yours (a form library's field
- * state, a server response), and `Field.Error` shows while it has a message.
- * A native failure (`required`, `pattern`, `type="email"`) caught by Base UI's
- * validation turns it destructive too, and an empty `Field.Error` then shows
- * the browser's message.
- * Behavior comes from Base UI's Field.
- *
- * `size` pins the field and its control to one step of the size ladder;
- * without it they follow the surrounding SizeProvider, which is how to set a
- * form's density when a control's own props keep the native `<input size>`
- * attribute (a character width, not a height). `Field.Control` passes a
- * native `size` through to the element untouched.
- *
- * InputGroup.Field is the preset for a group of text fields: a label and an
- * error string, and the group's hover gliding from field to field. Reach for
- * Field when a field stands alone, needs a description, or holds a control
- * other than a text input.
- *
- * Statics:
- * - `Field.Label` — the label, weight-stable and muted; destructive while
- *   the field is invalid, with an asterisk while it is required:
- *   `visuallyHidden`.
- * - `Field.Description` — muted help text under the control.
- * - `Field.Error` — the destructive message; it fades in while it has
- *   children: `match` (`true`, `false`, or a native validity state).
- * - `Field.Control` — wires a control that isn't a field control (a native
- *   element, a third-party input) with the field's id, `aria-describedby`
- *   and `aria-invalid`: `render={<select/>}` or `asChild`. Field controls
- *   (Input, NumberInput, …) need no wrapper.
- *
- * @example {@include ./examples.mdx}
- */
-const Field = forwardRef<HTMLDivElement, FieldProps>(
-  (
-    { invalid = false, disabled = false, readOnly = false, required = false, size, className, children, ...props },
-    ref,
-  ) => {
-    const field = (
-      // Base UI wires the plumbing: Field.Label's htmlFor targets the
-      // control, Description and Error ids land in its aria-describedby, and
-      // `invalid` drives aria-invalid / data-invalid.
-      <BaseField.Root
-        ref={ref}
-        invalid={invalid}
-        disabled={disabled}
-        className={cn('flex min-w-0 flex-col gap-1', className)}
-        // The render function sees Base UI's validity, so a native failure
-        // (`required`, `pattern`, a type mismatch) turns the label and the box
-        // destructive too, not only the `invalid` prop.
-        render={(rootProps, rootState) => (
-          <div {...rootProps}>
-            <ProvideFieldState
-              invalid={invalid || rootState.valid === false}
-              disabled={disabled}
-              readOnly={readOnly}
-              required={required}
-            >
-              {rootProps.children}
-            </ProvideFieldState>
-          </div>
-        )}
-        {...props}
-      >
-        {children}
-      </BaseField.Root>
-    )
-
-    return size ? <SizeProvider size={size}>{field}</SizeProvider> : field
-  },
-) as FieldComponent
-
-Field.displayName = 'Field'
-
-Object.assign(Field, { Label: FieldLabel, Description: FieldDescription, Error: FieldError, Control: FieldControl })
-
-export type {
-  FieldControlProps,
-  FieldDescriptionProps,
-  FieldErrorMatch,
-  FieldErrorProps,
-  FieldLabelProps,
-  FieldProps,
-  FieldValidationMode,
-}
-export { Field, FieldControl, FieldDescription, FieldError, FieldLabel }
-export default Field