@coopdigital/react 1.30.1 → 1.31.0

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,252 @@
+"use client"
+import type { ChangeEvent, FocusEvent, HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import mergeRefs from "merge-refs"
+import { useRef, useState } from "react"
+
+import { Field } from "@/components/Field"
+import { TextInput, type TextInputProps } from "@/components/TextInput"
+import { useFormReset } from "@/hooks/useFormReset"
+import { useId } from "@/hooks/useId"
+import { StandardSizes } from "@/types"
+import { forEachSlot } from "@/utils"
+
+import { formatDateValue, toDateParts, toDateValue } from "./dateinput-internal"
+import {
+  type DateInputMode,
+  type DatePart,
+  type DateParts,
+  getAutoComplete,
+} from "./dateinput-utils"
+import { DateInputContext, useDateInput } from "./DateInput.context"
+
+export interface DateInputChangeEvent {
+  /** The parts as typed. */
+  parts: DateParts
+  /** The parts as typed, joined from year to day, such as `2026-2-30`.
+   *
+   * Not checked: use `validateDate` before relying on it. */
+  value: string
+}
+
+export interface DateInputProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "defaultValue" | "onBlur" | "onChange"
+> {
+  /** Content inside the component.
+   *
+   * This should be a set of `<DateInput.Day>`, `<DateInput.Month>` and `<DateInput.Year>`. */
+  children?: ReactNode
+  /** Specify additional CSS classes. */
+  className?: string
+  /** Specify the initial value, when not controlled. One of:
+   *
+   * - an ISO date, such as `1990-08-21`
+   * - the parts, such as `{ year: "2026" }` */
+  defaultValue?: DateParts | string
+  /** Specify the base for the part ids. Will be auto-generated if not set. */
+  id?: string
+  /** Specify the DateInput mode. */
+  mode?: DateInputMode
+  /** Specify the name.
+   *
+   * Each part is `{name}-day`, `{name}-month` and`{name}-year`.
+   *
+   * A hidden input `{name}` holds the value as typed. */
+  name?: string
+  /** Called when focus leaves the whole DateInput, not each part. */
+  onBlur?: (event: DateInputChangeEvent) => void
+  /** Called when any part changes. */
+  onChange?: (event: DateInputChangeEvent) => void
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+  /** Specify the component size. */
+  size?: StandardSizes
+  /** Specify the value, when controlled. One of:
+   *
+   * - an ISO date, such as `1990-08-21`
+   * - the parts, such as `{ year: "2026" }`
+   *
+   * Update it in `onChange` with the `value` or `parts` of the event. */
+  value?: DateParts | string
+}
+
+const PART_SLOTS: Record<string, DatePart> = {
+  DateInputDay: "day",
+  DateInputMonth: "month",
+  DateInputYear: "year",
+}
+
+const DateInput = ({
+  children,
+  className,
+  defaultValue,
+  id,
+  mode,
+  name,
+  onBlur,
+  onChange,
+  ref,
+  size,
+  value,
+  ...props
+}: DateInputProps): JSX.Element => {
+  const uid = useId(id)
+
+  // The parts rendered, in order
+  const rendered: DatePart[] = []
+
+  forEachSlot(children, (slot) => {
+    const part = PART_SLOTS[slot.name]
+    if (part && !rendered.includes(part)) rendered.push(part)
+  })
+
+  const defaultParts = toDateParts(defaultValue, rendered)
+  const [typed, setTyped] = useState<DateParts>(() =>
+    value === undefined ? defaultParts : toDateParts(value, rendered)
+  )
+
+  // When controlled, show the parts as typed while they match the value,
+  // which keeps a dash typed in a part. Otherwise show the parts of the value.
+  const controlled = value !== undefined
+  const parts =
+    controlled && toDateValue(value, rendered) !== toDateValue(typed, rendered)
+      ? toDateParts(value, rendered)
+      : typed
+
+  // The browser resets each part input to its default value, so reset the
+  // parts too
+  const controlRef = useRef<HTMLInputElement>(null)
+  useFormReset(controlRef, () => {
+    if (!controlled) setTyped(defaultParts)
+  })
+
+  const getEvent = (next: DateParts): DateInputChangeEvent => ({
+    parts: next,
+    value: formatDateValue(next, rendered),
+  })
+
+  // Build on the parts shown, not typed, which still holds a change a
+  // controlling parent did not pass back
+  const changePart = (part: DatePart, partValue: string) => {
+    const next = { ...parts, [part]: partValue }
+    setTyped(next)
+    onChange?.(getEvent(next))
+  }
+
+  // Only call onBlur when focus moves outside the DateInput
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onBlur?.(getEvent(parts))
+    }
+  }
+
+  const componentProps = {
+    ...props,
+    className: clsx("coop-date-input", className),
+    onBlur: handleBlur,
+  }
+
+  return (
+    <DateInputContext.Provider
+      value={{
+        changePart,
+        controlled,
+        controlPart: rendered[0],
+        controlRef,
+        defaultValue: defaultParts,
+        id: uid,
+        mode,
+        name,
+        parts,
+        size,
+      }}
+    >
+      <div {...componentProps} ref={ref}>
+        {name && <input name={name} type="hidden" value={formatDateValue(parts, rendered)} />}
+        {children}
+      </div>
+    </DateInputContext.Provider>
+  )
+}
+
+export interface DateInputPartProps extends Omit<
+  TextInputProps,
+  "defaultValue" | "fit" | "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type" | "value"
+> {
+  /** Specify the part error state.
+   *
+   * Inherits error state of a `group` Fieldset when not set. */
+  error?: boolean
+  /** Specify the label. */
+  label?: ReactNode
+}
+
+const DateInputPart = ({
+  autoComplete,
+  className,
+  datePart: part,
+  error,
+  id,
+  label,
+  name,
+  onChange,
+  size,
+  ...props
+}: DateInputPartProps & { datePart: DatePart; label: ReactNode }): JSX.Element => {
+  const dateInput = useDateInput()
+
+  const valueProps = dateInput?.controlled
+    ? { value: dateInput.parts[part] ?? "" }
+    : { defaultValue: dateInput?.defaultValue?.[part] }
+
+  const inputProps = {
+    ...valueProps,
+    autoComplete: autoComplete ?? getAutoComplete(dateInput?.mode, part),
+    className: clsx("coop-date-input--input", className),
+    "data-part": part,
+    id: id ?? (dateInput ? `${dateInput.id}-${part}` : undefined),
+    inputMode: "numeric" as const,
+    name: name ?? (dateInput?.name ? `${dateInput.name}-${part}` : undefined),
+    onChange: (event: ChangeEvent<HTMLInputElement>) => {
+      dateInput?.changePart(part, event.target.value)
+      onChange?.(event)
+    },
+    pattern: "[0-9]*",
+    size: size ?? dateInput?.size,
+    spellCheck: false,
+    ...props,
+    // The first part is the control the form reset is looked up from
+    ref: dateInput?.controlPart === part ? mergeRefs(dateInput.controlRef, props.ref) : props.ref,
+  }
+
+  return (
+    <Field error={error} hideErrorBar>
+      <Field.Label>{label}</Field.Label>
+      <TextInput {...inputProps} />
+    </Field>
+  )
+}
+
+const DateInputDay = ({ label = "Day", ...props }: DateInputPartProps): JSX.Element => (
+  <DateInputPart {...props} datePart="day" label={label} />
+)
+const DateInputMonth = ({ label = "Month", ...props }: DateInputPartProps): JSX.Element => (
+  <DateInputPart {...props} datePart="month" label={label} />
+)
+const DateInputYear = ({ label = "Year", ...props }: DateInputPartProps): JSX.Element => (
+  <DateInputPart {...props} datePart="year" label={label} />
+)
+
+DateInput.slot = { name: "DateInput" }
+DateInputDay.slot = { name: "DateInputDay" }
+DateInputMonth.slot = { name: "DateInputMonth" }
+DateInputYear.slot = { name: "DateInputYear" }
+
+DateInput.Day = DateInputDay
+DateInput.Month = DateInputMonth
+DateInput.Year = DateInputYear
+
+export default DateInput
+export { DateInput, DateInputDay, DateInputMonth, DateInputYear }

package/src/components/DateInput/dateinput-internal.ts

@@ -0,0 +1,176 @@
+// Not exported from the DateInput entry. No React or "use client", as
+// dateinput-utils imports it.
+
+import { format, formatISO, isExists, isValid, parseISO } from "date-fns"
+
+import type {
+  DATE_ERROR_MESSAGES,
+  DateErrorCode,
+  DatePart,
+  DateParts,
+  DateValidationOptions,
+} from "./dateinput-utils"
+
+type DefaultMessages = typeof DATE_ERROR_MESSAGES
+
+export interface Limits {
+  max?: string
+  min?: string
+}
+
+// Year first, whatever order the parts render in
+const VALUE_ORDER: DatePart[] = ["year", "month", "day"]
+
+// Codes that mark every part as invalid
+export const WHOLE_DATE_ERRORS = new Set<DateErrorCode>([
+  "after-max",
+  "before-min",
+  "impossible-date",
+  "missing-date",
+  "unsupported-parts",
+])
+
+const valueParts = (parts: DatePart[]) => VALUE_ORDER.filter((part) => parts.includes(part))
+
+// Parts as typed to a value, such as 2026-2-30. Empty if every part is empty
+export const formatDateValue = (date: DateParts, parts: DatePart[] = VALUE_ORDER): string => {
+  const values = valueParts(parts).map((part) => date[part] ?? "")
+
+  return values.every((value) => value === "") ? "" : values.join("-")
+}
+
+// A piece per part. A leading -- is the ISO form of a date without a year
+const splitValue = (value: string, used: DatePart[]) => {
+  const pieces = value.split("-")
+  const iso = !used.includes("year") && value.startsWith("--") && pieces.length === used.length + 2
+
+  return iso ? pieces.slice(2) : pieces
+}
+
+// A value or ISO date to parts. Undefined when a dash typed in a part leaves
+// it unclear which part is which
+export const parseDateValue = (
+  value: string,
+  parts: DatePart[] = VALUE_ORDER
+): DateParts | undefined => {
+  if (value === "") return {}
+
+  const used = valueParts(parts)
+  const pieces = splitValue(value, used)
+  if (pieces.length !== used.length) return undefined
+
+  return Object.fromEntries(used.map((part, index) => [part, pieces[index]]))
+}
+
+// A value, ISO date or parts to a value
+export const toDateValue = (input: DateParts | string = "", parts?: DatePart[]): string =>
+  typeof input === "string" ? input : formatDateValue(input, parts)
+
+// A value, ISO date or parts to parts. Empty when a value cannot be split
+export const toDateParts = (input: DateParts | string = "", parts?: DatePart[]): DateParts =>
+  typeof input === "string" ? (parseDateValue(input, parts) ?? {}) : input
+
+export const toNumber = (value: string): number | null =>
+  /^\d+$/.test(value) ? Number(value) : null
+
+export const isValidPart = (part: DatePart, value: string): boolean => {
+  if (part === "year") return /^\d{4}$/.test(value)
+
+  const number = toNumber(value)
+  const max = part === "day" ? 31 : 12
+
+  return number !== null && number >= 1 && number <= max
+}
+
+export const trimParts = (date: DateParts): Required<DateParts> => ({
+  day: date.day?.trim() ?? "",
+  month: date.month?.trim() ?? "",
+  year: date.year?.trim() ?? "",
+})
+
+// An error code for each problem, in the order the parts are entered. A
+// date with every part empty only returns missing-date. impossible-date
+// is only checked once every part is valid.
+export const getDateErrors = (values: Required<DateParts>, parts: DatePart[]): DateErrorCode[] => {
+  if (parts.every((part) => values[part] === "")) return ["missing-date"]
+
+  const errors: DateErrorCode[] = []
+
+  for (const part of parts) {
+    if (values[part] === "") errors.push(`missing-${part}`)
+    else if (!isValidPart(part, values[part])) errors.push(`invalid-${part}`)
+  }
+
+  if (errors.length > 0 || !parts.includes("day") || !parts.includes("month")) {
+    return errors
+  }
+
+  // Without a year, check against a leap year, so 29 February is allowed
+  const year = parts.includes("year") ? Number(values.year) : 2000
+
+  return isExists(year, Number(values.month) - 1, Number(values.day)) ? [] : ["impossible-date"]
+}
+
+export const getInvalidParts = (errors: DateErrorCode[], parts: DatePart[]): DatePart[] =>
+  parts.filter((part) => errors.some((code) => WHOLE_DATE_ERRORS.has(code) || code.endsWith(part)))
+
+// Remove extra leading zeros, such as in "008", then pad to 2 digits
+export const pad = (value: string): string => String(Number(value)).padStart(2, "0")
+
+// The ISO 8601 string for a valid date, using the parts given. Empty
+// when the parts have no ISO format, such as day and year.
+export const toISODate = ({ day, month, year }: Required<DateParts>, parts: DatePart[]): string => {
+  const has = (part: DatePart) => parts.includes(part)
+
+  if (has("day") && has("month") && has("year")) return `${year}-${pad(month)}-${pad(day)}`
+  if (has("month") && has("year") && !has("day")) return `${year}-${pad(month)}`
+  if (has("day") && has("month")) return `--${pad(month)}-${pad(day)}`
+  if (parts.length === 1 && has("year")) return year
+
+  return ""
+}
+
+// Read a min or max limit. Throws for an invalid limit, as that is a
+// mistake in the code. An ISO date string is read in local time.
+export const toLimit = (limit: Date | string, name: "max" | "min"): Date => {
+  const date = typeof limit === "string" ? parseISO(limit) : limit
+  if (!isValid(date)) {
+    throw new Error(`${name} must be a valid Date or an ISO date, such as 2020-01-31`)
+  }
+
+  return date
+}
+
+// Write a limit out for a message, to the same detail as the value, such as
+// "1 January 2020", "January 2020" or "2020"
+export const formatLimit = (limit: Date, length: number): string =>
+  format(limit, length === 4 ? "yyyy" : length === 7 ? "MMMM yyyy" : "d MMMM yyyy")
+
+// Compare the value with min and max, to the same detail as the value. A
+// day and month value has no year, so it is not compared.
+export const getRangeError = (value: string, min?: Date, max?: Date): DateErrorCode | undefined => {
+  if (value.startsWith("--")) return undefined
+
+  const cut = (limit: Date) => formatISO(limit, { representation: "date" }).slice(0, value.length)
+
+  if (min && value < cut(min)) return "before-min"
+  if (max && value > cut(max)) return "after-max"
+
+  return undefined
+}
+
+// A custom message, or the default. Only the defaults use the limits. The
+// defaults are passed in, as they are public and live in dateinput-utils
+export const getMessage = (
+  code: DateErrorCode,
+  label: string | undefined,
+  messages: DateValidationOptions["messages"] = {},
+  limits: Limits,
+  defaults: DefaultMessages
+): string => {
+  const custom = messages[code]
+  if (custom !== undefined) return typeof custom === "function" ? custom(label) : custom
+
+  const fallback = defaults[code]
+  return typeof fallback === "function" ? fallback(label, limits) : fallback
+}

package/src/components/DateInput/dateinput-utils.ts

@@ -0,0 +1,194 @@
+// Validation for dates entered as separate day, month and year parts.
+// The DateInput entry exports this to server code too, so it must not import
+// React or use "use client".
+
+import {
+  formatLimit,
+  getDateErrors,
+  getInvalidParts,
+  getMessage,
+  getRangeError,
+  type Limits,
+  parseDateValue,
+  toISODate,
+  toLimit,
+  trimParts,
+} from "./dateinput-internal"
+
+export type DatePart = "day" | "month" | "year"
+
+export interface DateParts {
+  day?: string
+  month?: string
+  year?: string
+}
+
+export type DateInputMode = "dob" | undefined
+
+export type DateErrorCode =
+  | "missing-date"
+  | "missing-day"
+  | "missing-month"
+  | "missing-year"
+  | "invalid-day"
+  | "invalid-month"
+  | "invalid-year"
+  | "impossible-date"
+  | "unsupported-parts"
+  | "before-min"
+  | "after-max"
+
+/** A message, or a function that builds one from the label. */
+export type DateErrorMessage = string | ((label?: string) => string)
+
+export interface DateValidationOptions {
+  /** The name of the date, as it would start a sentence, such as "Date
+   * of birth".
+   *
+   * Default: `Date`. */
+  label?: string
+  /** The latest date allowed, as a `Date` or an ISO date such as `2026-12-31`.
+   *
+   * Only the parts used are compared, such as the month and year. */
+  max?: Date | string
+  /** Messages to use instead of the defaults. */
+  messages?: Partial<Record<DateErrorCode, DateErrorMessage>>
+  /** The earliest date allowed, as a `Date` or an ISO date such as `2020-01-01`.
+   *
+   * Only the parts used are compared, such as the month and year. */
+  min?: Date | string
+  /** The parts used, in the order they are entered.
+   *
+   * Default: `day`, `month`, `year`. */
+  parts?: DatePart[]
+}
+
+export interface DateValidationSuccess {
+  /** Whether the date is valid. */
+  valid: true
+  /** The date as an ISO 8601 string, such as 1990-08-21. */
+  value: string
+}
+
+export interface DateValidationError {
+  /** The code for the first problem, in the order the parts are entered. */
+  error: DateErrorCode
+  /** The parts with an error. Every part is invalid when the date is
+   * empty, impossible, has no ISO format or is outside `min` and `max`. */
+  invalid: DatePart[]
+  /** The message for the error. */
+  message: string
+  /** Whether the date is valid. */
+  valid: false
+}
+
+export type DateValidation = DateValidationSuccess | DateValidationError
+
+export const DATE_PARTS: DatePart[] = ["day", "month", "year"]
+
+const realDate = (label = "Date") => `${label} must be a real date`
+
+export const DATE_ERROR_MESSAGES: Record<
+  DateErrorCode,
+  string | ((label?: string, limits?: Limits) => string)
+> = {
+  "after-max": (label = "Date", limits) => `${label} must be on or before ${limits?.max}`,
+  "before-min": (label = "Date", limits) => `${label} must be on or after ${limits?.min}`,
+  "impossible-date": realDate,
+  "invalid-day": realDate,
+  "invalid-month": realDate,
+  "invalid-year": "Year must include 4 numbers",
+  "missing-date": "Enter a date",
+  "missing-day": (label = "Date") => `${label} must include a day`,
+  "missing-month": (label = "Date") => `${label} must include a month`,
+  "missing-year": (label = "Date") => `${label} must include a year`,
+  "unsupported-parts": realDate,
+}
+
+// Check parts and return if they make a complete, possible date with an
+// ISO format, between min and max. A valid date has its ISO value. An
+// invalid date has the code and message for the first problem, and the
+// parts with an error.
+export const validateDateParts = (
+  date: DateParts,
+  { label, max, messages = {}, min, parts = DATE_PARTS }: DateValidationOptions = {}
+): DateValidation => {
+  const minDate = min === undefined ? undefined : toLimit(min, "min")
+  const maxDate = max === undefined ? undefined : toLimit(max, "max")
+  const values = trimParts(date)
+  const errors = getDateErrors(values, parts)
+  let value = ""
+
+  if (errors.length === 0) {
+    value = toISODate(values, parts)
+    const rangeError = value ? getRangeError(value, minDate, maxDate) : "unsupported-parts"
+
+    if (!rangeError) return { valid: true, value }
+    errors.push(rangeError)
+  }
+
+  const [error] = errors
+  const limits = {
+    max: maxDate && value ? formatLimit(maxDate, value.length) : undefined,
+    min: minDate && value ? formatLimit(minDate, value.length) : undefined,
+  }
+
+  return {
+    error,
+    invalid: getInvalidParts(errors, parts),
+    message: getMessage(error, label, messages, limits, DATE_ERROR_MESSAGES),
+    valid: false,
+  }
+}
+
+/** Check a value, such as the DateInput value or the value a form
+ * submits, the same way as `validateDateParts`. Use the same `parts` as
+ * the DateInput. */
+export const validateDate = (
+  value: string,
+  options: DateValidationOptions = {}
+): DateValidation => {
+  const date = parseDateValue(value, options.parts)
+  if (date) return validateDateParts(date, options)
+
+  // A dash typed in a part leaves it unclear which part is wrong, so the
+  // whole date is
+  const { label, messages, parts = DATE_PARTS } = options
+
+  return {
+    error: "impossible-date",
+    invalid: parts,
+    message: getMessage("impossible-date", label, messages, {}, DATE_ERROR_MESSAGES),
+    valid: false,
+  }
+}
+
+/** As this is a more specific function for a birth of date validation, we can make some assumptions.
+ * Such as, date needs to be today or in the past and error message should reflect date of birth.
+ * Check a value, such as the DateInput value or the value a form
+ * submits, the same way as `validateDateParts`. Use the same `parts` as
+ * the DateInput. */
+
+export const validateDob = (value: string, options: DateValidationOptions = {}): DateValidation => {
+  const { messages, ...rest } = options
+  return validateDate(value, {
+    label: "Date of birth",
+    max: new Date(),
+    messages: {
+      "after-max": "Date of birth must be today or in the past",
+      "missing-date": "Enter your date of birth",
+      ...messages,
+    },
+    parts: DATE_PARTS,
+    ...rest,
+  })
+}
+
+export const getAutoComplete = (mode: DateInputMode, part: DatePart): string | undefined => {
+  if (!mode) return undefined
+  if (mode === "dob") {
+    if (part === "day") return "bday-day"
+    if (part === "month") return "bday-month"
+    if (part === "year") return "bday-year"
+  }
+}

package/src/components/DateInput/index.ts

@@ -0,0 +1,6 @@
+import DateInput from "./DateInput"
+
+export default DateInput
+export { DateInput }
+export * from "./DateInput"
+export * from "./dateinput-utils"

package/src/components/Field/Field.context.ts

@@ -1,7 +1,7 @@
 "use client"
 import { createContext, useContext } from "react"
 
-import { joinIds, type MarkerIds } from "@/components/FieldMarkers/fieldmarkers-utils"
+import { joinIds, type MarkerIds } from "@/components/FieldMarkers/fieldmarkers-internal"
 
 export interface FieldConfig {
   disabled: boolean

package/src/components/Field/Field.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
-import { getMarkerIds, type Markers } from "@/components/FieldMarkers/fieldmarkers-utils"
+import { getMarkerIds, type Markers } from "@/components/FieldMarkers/fieldmarkers-internal"
 import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "@/components/FieldMarkers/Label"
 import { useFieldset } from "@/components/Fieldset/Fieldset.context"

package/src/components/Fieldset/Fieldset.tsx

@@ -3,7 +3,11 @@ import clsx from "clsx"
 import { type FieldsetHTMLAttributes, HTMLAttributes, type JSX, Ref } from "react"
 
 import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
-import { getMarkerIds, joinIds, type Markers } from "@/components/FieldMarkers/fieldmarkers-utils"
+import {
+  getMarkerIds,
+  joinIds,
+  type Markers,
+} from "@/components/FieldMarkers/fieldmarkers-internal"
 import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
 import { Legend as BaseLegend, type LegendProps } from "@/components/FieldMarkers/Legend"
 import { useId } from "@/hooks/useId"

package/src/components/Form/Form.tsx

@@ -2,6 +2,8 @@ import type { FormHTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
+import { StandardSizes } from "@/types"
+
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   /** Content inside the component. */
   children?: ReactNode
@@ -9,11 +11,17 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   className?: string
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLFormElement>
+  /** Specify the spacing.
+   *
+   * Default: `md`
+   */
+  spacing?: StandardSizes
 }
 
-const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
+const Form = ({ children, className, ref, spacing, ...props }: FormProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-form", className),
+    "data-spacing": spacing ?? undefined,
     ...props,
   }