Section

import { Card, Field, Group, Heading, Note, Once, Row, Soft } from '@hanzo/ui/settings'

export function Default() {
  const [name, setName] = useState('')
  const [note, setNote] = useState('')
  return (
    <YStack gap="$6" width="100%" maxW={760}>
      <Heading title="General" detail="How this surface looks and listens." action={<Button size="sm" onPress={() => setNote('Saved.')}>Save</Button>} />
      <Group title="Appearance" detail="Kept in this browser.">
        <Card>
          <Row first title="Theme" detail="Follows the system." trailing={<Switch aria-label="Dark" />} />
          <Row title="hk-live-3f9a" detail="Made Sep 27, 2026" mono trailing={<Button size="sm" variant="outline">Revoke</Button>} />
        </Card>
      </Group>
      <Field label="What should Hanzo call you?" hint="The home page greets you by it.">
        <Input value={name} onChangeText={setName} placeholder="Name" aria-label="What should Hanzo call you?" />
      </Field>
      <Note>{note}</Note>
    </YStack>
  )
}

export function Quiet() {
  return (
    <YStack gap="$4" width="100%" maxW={760}>
      <Card>
        <Soft>No keys yet.</Soft>
      </Card>
      <Soft action={<Button size="sm">Sign in</Button>}>Sign in to see your keys.</Soft>
      <Once value="hk-live-3f9a0c71d2" label="API key" />
    </YStack>
  )
}

Types

export interface HeadingProps {
  title: string
  /** One or two lines on what the section is for. */
  detail?: string
  /** The section's one action — an Add, a Save. */
  action?: ReactNode
  /** The heading's outline level. The page's own title is the nav's, so 2. */
  level?: 1 | 2 | 3
}

export interface GroupProps {
  title: string
  detail?: string
  action?: ReactNode
  /** One level under the section's `Heading`. */
  level?: 2 | 3 | 4
  children: ReactNode
}

export interface RowProps {
  title: string
  detail?: string
  /** Before the words — a mark, an icon, a status. */
  leading?: ReactNode
  /** After them — what can be done to this row. */
  trailing?: ReactNode
  /** The Card's first row draws no rule above itself. */
  first?: boolean
  /** The title is an identifier — a key name, a path — and is set in `$mono`. */
  mono?: boolean
}

export interface OnceProps {
  /** The credential. */
  value: string
  /** What it is — "API key". Names the value and its copy control. */
  label: string
  /** The line under it. */
  says?: string
  /** What follows — a Done. */
  children?: ReactNode
}

Exports