Checkbox

export const Default = () => <Checkbox label="Only verified phone numbers" defaultChecked />;

export const Variants = () => (
  <div style={row}>
    <Labeled label="with label">
      <Checkbox label="Include inactive" defaultChecked />
    </Labeled>
    <Labeled label="bare (row selection)">
      <Checkbox aria-label="Select row" defaultChecked />
    </Labeled>
    <Labeled label="menu row — .acrm-check-row">
      <StyledBox state="on">Include inactive</StyledBox>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="unchecked">
        <Checkbox label="Notify me" />
      </Labeled>
      <Labeled label="checked">
        <Checkbox label="Notify me" defaultChecked />
      </Labeled>
      <Labeled label="indeterminate">
        <Checkbox label="Notify me" indeterminate readOnly checked={false} />
      </Labeled>
      <Labeled label="disabled">
        <Checkbox label="Notify me" disabled />
      </Labeled>
      <Labeled label="disabled, checked">
        <Checkbox label="Notify me" disabled defaultChecked />
      </Labeled>
      <Labeled label="disabled, indeterminate">
        <Checkbox label="Notify me" disabled indeterminate readOnly checked={false} />
      </Labeled>
    </div>
    <div style={row}>
      <Labeled label="menu row — off">
        <StyledBox>Notify me</StyledBox>
      </Labeled>
      <Labeled label="menu row — on">
        <StyledBox state="on">Notify me</StyledBox>
      </Labeled>
      <Labeled label="menu row — mixed">
        <StyledBox state="mixed">Notify me</StyledBox>
      </Labeled>
      <Labeled label="menu row — disabled, on">
        <StyledBox state="on" disabled>
          Notify me
        </StyledBox>
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: 3px ring (color-mix --accent 30%) on the box via `.acrm-check-input:focus-visible +
      .acrm-checkbox`; hover (enabled, off) turns the border --accent.
    </span>
  </div>
);

export const Composition = () => (
  <div style={grid}>
    <Labeled label="option group under a field label">
      <Field label="Notifications">
        <div style={col}>
          <Checkbox label="New tasks assigned to me" defaultChecked />
          <Checkbox label="Mentions in notes" defaultChecked />
          <Checkbox label="Weekly digest" />
        </div>
      </Field>
    </Labeled>
    <Labeled label="menu rows — styled box on the right (CheckMenu anatomy)">
      <div
        style={{
          display: 'grid',
          minWidth: 240,
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-md)',
          background: 'var(--surface-100)',
          padding: 'var(--sp-1)',
        }}
      >
        {[
          ['Prospect', 'on'],
          ['Customer', 'on'],
          ['Partner', undefined],
        ].map(([name, state]) => (
          <span
            key={name}
            className="acrm-check-row"
            style={{
              display: 'flex',
              height: 'var(--control-h)',
              padding: '0 var(--sp-3)',
              borderRadius: 'var(--radius-xs)',
            }}
          >
            <span style={{ flex: 1 }}>{name}</span>
            <span className={'acrm-checkbox' + (state ? ' is-on' : '')}>
              <Icon name="check" />
            </span>
          </span>
        ))}
      </div>
    </Labeled>
  </div>
);