Checkbox

import { Checkbox } from '@raystack/apsara';

function App() {
  return <Checkbox />;
}

function SingleCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <label>
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <span>Accept terms and conditions</span>
    </label>
  );
}

function CheckboxGroup() {
  const [values, setValues] = useState([]);

  return (
    <Checkbox.Group value={values} onValueChange={setValues}>
      <label>
        <Checkbox value="react" />
        <span>React</span>
      </label>
      <label>
        <Checkbox value="vue" />
        <span>Vue</span>
      </label>
      <label>
        <Checkbox value="angular" />
        <span>Angular</span>
      </label>
    </Checkbox.Group>
  );
}

function IndeterminateCheckbox() {
  const [checked, setChecked] = useState('indeterminate');

  return (
    <label>
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <span>Select all</span>
    </label>
  );
}

<label>
  <Checkbox disabled />
  <span>Disabled checkbox</span>
</label>

<label>
  <Checkbox disabled checked />
  <span>Disabled and checked</span>
</label>

<form>
  <label>
    <Checkbox name="subscribe" value="newsletter" />
    <span>Subscribe to newsletter</span>
  </label>
  <button type="submit">Submit</button>
</form>

<label>
  <Checkbox required />
  <span>I agree to the terms *</span>
</label>

function SelectAllCheckboxes() {
  const [selectedItems, setSelectedItems] = useState([]);
  const allItems = ['item1', 'item2', 'item3'];
  
  const allSelected = selectedItems.length === allItems.length;
  const someSelected = selectedItems.length > 0 && !allSelected;
  const selectAllState = allSelected ? true : someSelected ? 'indeterminate' : false;

  const handleSelectAll = (checked) => {
    setSelectedItems(checked ? allItems : []);
  };

  return (
    <div>
      <label>
        <Checkbox
          checked={selectAllState}
          onCheckedChange={handleSelectAll}
        />
        <span>Select all</span>
      </label>
      
      <Checkbox.Group value={selectedItems} onValueChange={setSelectedItems}>
        <label>
          <Checkbox value="item1" />
          <span>Item 1</span>
        </label>
        <label>
          <Checkbox value="item2" />
          <span>Item 2</span>
        </label>
        <label>
          <Checkbox value="item3" />
          <span>Item 3</span>
        </label>
      </Checkbox.Group>
    </div>
  );
}