Field

import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from '@hanzo/ui'

export function Profile() {
  return (
    <FieldSet>
      <FieldLegend>Profile</FieldLegend>
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="field-demo-name">Full name</FieldLabel>
          <Input id="field-demo-name" placeholder="Evil Rabbit" />
          <FieldDescription>This appears on invoices and emails.</FieldDescription>
        </Field>
        <Field data-invalid>
          <FieldLabel htmlFor="field-demo-username">Username</FieldLabel>
          <Input id="field-demo-username" aria-invalid />
          <FieldError>Choose another username.</FieldError>
        </Field>
        <Field orientation="horizontal">
          <Switch id="field-demo-newsletter" />
          <FieldLabel htmlFor="field-demo-newsletter">
            Subscribe to the newsletter
          </FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

export function ChoiceCards() {
  return (
    <FieldGroup>
      <FieldLabel htmlFor="field-demo-email-updates">
        <Field orientation="horizontal">
          <Checkbox id="field-demo-email-updates" defaultChecked />
          <FieldContent>
            <FieldTitle>Email updates</FieldTitle>
            <FieldDescription>Product news, at most weekly.</FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="field-demo-sms-updates">
        <Field orientation="horizontal">
          <Checkbox id="field-demo-sms-updates" />
          <FieldContent>
            <FieldTitle>SMS updates</FieldTitle>
            <FieldDescription>Order status only.</FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </FieldGroup>
  )
}

export function SeparatedGroups() {
  return (
    <YStack gap="$6">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="field-demo-email">Email</FieldLabel>
          <Input id="field-demo-email" placeholder="[email protected]" />
        </Field>
      </FieldGroup>
      <FieldSeparator>Or continue with</FieldSeparator>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="field-demo-provider">Provider</FieldLabel>
          <Input id="field-demo-provider" placeholder="GitHub" />
        </Field>
      </FieldGroup>
    </YStack>
  )
}

export function Responsive() {
  const [remember, setRemember] = useState(false)
  return (
    <FieldGroup>
      <Field orientation="responsive">
        <FieldLabel htmlFor="field-demo-remember">Remember me</FieldLabel>
        <XStack items="center" gap="$2">
          <Switch id="field-demo-remember" checked={remember} onCheckedChange={setRemember} />
        </XStack>
      </Field>
    </FieldGroup>
  )
}

Types

export type FieldOrientation = 'vertical' | 'horizontal' | 'responsive'

export type FieldLegendVariant = 'legend' | 'label'

export type FieldSetProps = ComponentProps<typeof FieldSet>

export type FieldLegendProps = ComponentProps<typeof FieldLegend>

export type FieldGroupProps = ComponentProps<typeof FieldGroup>

export type FieldProps = Omit<ComponentProps<typeof FieldFrame>, 'orientation'> & {
  orientation?: FieldOrientation
  'data-invalid'?: boolean
}

export type FieldContentProps = ComponentProps<typeof FieldContent>

export type FieldLabelProps = ComponentProps<typeof FieldLabel>

export type FieldTitleProps = ComponentProps<typeof FieldTitle>

export type FieldDescriptionProps = ComponentProps<typeof FieldDescription>

export type FieldSeparatorProps = ComponentProps<typeof FieldSeparator>

export type FieldErrorIssue = { message?: string }

export type FieldErrorProps = ComponentProps<typeof XStack> & {
  errors?: Array<FieldErrorIssue | undefined>
  /** Issues from any [Standard Schema](https://standardschema.dev/) validator. */
  issues?: Array<FieldErrorIssue | undefined>
}

Exports