Radio

export const Default = () => (
  <RadioGroup name="scope-default" items={SCOPE} initial="all" ariaLabel="Scope" />
);

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="off">
        <span className="acrm-radio">
          <span className="acrm-radio-dot" />
          Customers only
        </span>
      </Labeled>
      <Labeled label="on">
        <span className="acrm-radio is-on">
          <span className="acrm-radio-dot" />
          Customers only
        </span>
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: 3px ring (color-mix --accent 30%) on the dot via `.acrm-radio-input:focus-visible`. No
      disabled style exists in inputs.css.
    </span>
  </div>
);

export const Composition = () => (
  <div style={grid}>
    <Labeled label="group under a field label">
      <Field label="Scope">
        <RadioGroup name="scope-field" items={SCOPE} initial="customers" ariaLabel="Scope" />
      </Field>
    </Labeled>
    <Labeled label="option with description — dot aligned to the first line">
      <RadioGroup
        name="layout"
        ariaLabel="Outgoing mail format"
        initial="html"
        items={[
          { value: 'html', label: 'Formatted', desc: 'Signature, logo and links' },
          { value: 'plain', label: 'Plain text', desc: 'No formatting, safest for old clients' },
        ]}
      />
    </Labeled>
  </div>
);