Segmented control

export const Default = () => <Seg options={SCOPE} initial="all" ariaLabel="Scope" />;

export const Variants = () => (
  <div style={row}>
    <Labeled label="compact — toolbar chip">
      <Seg options={OWNER} initial="user" ariaLabel="Owner" />
    </Labeled>
    <Labeled label="grow — full width, even columns">
      <div style={{ width: 360 }}>
        <Seg options={OWNER} initial="user" grow ariaLabel="Owner" />
      </div>
    </Labeled>
    <Labeled label="with count — neutral count on the active option (0 is not drawn)">
      <Seg
        options={[
          { key: 'all', label: 'All' },
          { key: 'pending', label: 'Pending', count: 12 },
          { key: 'none', label: 'Rejected', count: 0 },
        ]}
        initial="pending"
        ariaLabel="State"
      />
    </Labeled>
    <Labeled label="with count — on an inactive option">
      <Seg
        options={[
          { key: 'all', label: 'All' },
          { key: 'pending', label: 'Pending', count: 12 },
        ]}
        initial="all"
        ariaLabel="State"
      />
    </Labeled>
    {/* FA218 (AD 30. 9. 2026) — tone colors ONLY the selected option's text/icon; background/
        shadow/border stay canonical. Use only for a reply with agree/uncertain/reject semantics
        (Yes/Maybe/No etc.), never as decoration. */}
    <Labeled label="with tone — Yes/Maybe/No (positive · warning · critical)">
      <Seg
        options={[
          { key: 'yes', label: 'Yes', tone: 'positive' },
          { key: 'maybe', label: 'Maybe', tone: 'warning' },
          { key: 'no', label: 'No', tone: 'critical' },
        ]}
        initial="yes"
        ariaLabel="Attending?"
      />
    </Labeled>
  </div>
);

export const WithIconAndKbd = () => (
  <div style={row}>
    <Labeled label="icon before label">
      <Seg
        options={[
          { key: 'user', label: 'User', icon: 'user' },
          { key: 'team', label: 'Team', icon: 'users-group' },
        ]}
        initial="user"
        ariaLabel="Owner"
      />
    </Labeled>
    <Labeled label="icon before label, grow">
      <div style={{ width: 360 }}>
        <Seg
          options={[
            { key: 'month', label: 'Month', icon: 'calendar' },
            { key: 'week', label: 'Week', icon: 'calendar-week' },
          ]}
          initial="month"
          grow
          ariaLabel="View"
        />
      </div>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div style={grid}>
    <Labeled label="section top bar — view switch next to the title">
      <div
        style={{
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          background: 'var(--bg-canvas)',
          width: 720,
        }}
      >
        <SectionTopBar
          title={<SectionTopBarTitle name="Calendar" />}
          primaryAction={
            <Button variant="primary">
              <Icon name="plus" />
              New meeting
            </Button>
          }
        >
          <Seg
            options={[
              { key: 'month', label: 'Month' },
              { key: 'week', label: 'Week' },
            ]}
            initial="month"
            ariaLabel="View"
          />
          <SectionTopBarSpacer />
        </SectionTopBar>
        <div style={{ height: 'var(--sp-7)' }} />
      </div>
    </Labeled>
    <Labeled label="form field — grow inside a drawer field">
      <div style={{ width: 360 }}>
        <Field label="Visible to">
          <Seg options={OWNER} initial="team" grow ariaLabel="Visible to" />
        </Field>
      </div>
    </Labeled>
  </div>
);