Desktop/ts/axo/AxoCheckbox.tsx

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { memo } from 'react';
import { Checkbox } from 'radix-ui';
import { AxoSymbol } from './AxoSymbol';
import { tw } from './tw';

const Namespace = 'AxoCheckbox';

type AxoCheckboxProps = Readonly<{
  id?: string;
  checked: boolean;
  onCheckedChange: (nextChecked: boolean) => void;
  disabled?: boolean;
  required?: boolean;
}>;

// eslint-disable-next-line import/export
export const AxoCheckbox = memo((props: AxoCheckboxProps) => {
  return (
    <Checkbox.Root
      id={props.id}
      checked={props.checked}
      onCheckedChange={props.onCheckedChange}
      disabled={props.disabled}
      required={props.required}
      className={tw(
        'flex size-5 items-center justify-center rounded-full',
        'border border-border-primary inset-shadow-on-color',
        'data-[state=unchecked]:bg-fill-primary',
        'data-[state=unchecked]:pressed:bg-fill-primary-pressed',
        'data-[state=checked]:bg-color-fill-primary',
        'data-[state=checked]:pressed:bg-color-fill-primary-pressed',
        'data-[disabled]:border-border-secondary',
        'outline-0 outline-border-focused focused:outline-[2.5px]',
        'overflow-hidden'
      )}
    >
      <Checkbox.Indicator
        className={tw(
          'data-[state=checked]:text-label-primary-on-color',
          'data-[state=checked]:data-[disabled]:text-label-disabled-on-color'
        )}
      >
        <AxoSymbol.Icon symbol="check" size={14} label={null} />
      </Checkbox.Indicator>
    </Checkbox.Root>
  );
});

AxoCheckbox.displayName = `${Namespace}`;

// eslint-disable-next-line max-len
// eslint-disable-next-line @typescript-eslint/no-namespace, @typescript-eslint/no-redeclare, import/export
export namespace AxoCheckbox {
  export type Props = AxoCheckboxProps;
}