Field

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@fairgarden-private/design/components/Field'
import { Input } from '@fairgarden-private/design/components/Input'
import styles from './states.module.css'

/**
 * Rest, optional, invalid and disabled fields. The invalid field passes the
 * danger scale to its control and error; the label stays --primary12.
 */
export function FieldStates() {
  return (
    <div className={styles.stack}>
      <Field>
        <FieldLabel>Email Address</FieldLabel>
        <Input type="email" placeholder="Email address…" />
        <FieldDescription>We send one trail report a month.</FieldDescription>
      </Field>
      <Field>
        <FieldLabel optional>Phone Number</FieldLabel>
        <Input type="tel" />
      </Field>
      <Field invalid>
        <FieldLabel>Postcode</FieldLabel>
        <Input defaultValue="12" style={{ inlineSize: '8ch' }} />
        <FieldError match>Postcode is too short. Enter all 5 digits.</FieldError>
      </Field>
      <Field disabled>
        <FieldLabel>Member Number</FieldLabel>
        <Input defaultValue="FG-2041" />
        <FieldDescription>Assigned when your membership starts.</FieldDescription>
      </Field>
    </div>
  )
}

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@fairgarden-private/design/components/Field'
import { Input } from '@fairgarden-private/design/components/Input'
import styles from './color.module.css'

/**
 * `primary` recolors the label, description and, by inheritance, the
 * control. While invalid the error always takes the danger scale.
 */
export function FieldColor() {
  return (
    <div className={styles.stack}>
      <Field primary="plum">
        <FieldLabel>Trail Name</FieldLabel>
        <Input placeholder="Ridge loop…" />
        <FieldDescription>Primary plum: label, edge, value and ring.</FieldDescription>
      </Field>
      <Field primary="slate" secondary="indigo" invalid>
        <FieldLabel>Group Size</FieldLabel>
        <Input defaultValue="40" />
        <FieldError match>Groups are 12 or fewer. Enter 1–12.</FieldError>
      </Field>
    </div>
  )
}

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@fairgarden-private/design/components/Field'
import { PresetGround } from '@/components/PresetGround'
import { Input } from '@fairgarden-private/design/components/Input'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** The same fields on paper and forest: the roles resolve per ground. */
export function FieldGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Field>
            <FieldLabel>Your Name</FieldLabel>
            <Input placeholder="First and last name…" />
            <FieldDescription>As it appears on your card.</FieldDescription>
          </Field>
          <Field invalid>
            <FieldLabel>Email Address</FieldLabel>
            <Input defaultValue="heron@" />
            <FieldError match>Enter an email address, like name@example.com.</FieldError>
          </Field>
        </PresetGround>
      ))}
    </div>
  )
}