Checkbox Group

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId } from "react";export function CheckboxGroupDemo() {  const labelId = useId();  return (    <CheckboxGroup aria-labelledby={labelId} defaultValue={["email"]}>      <CheckboxGroupLabel id={labelId}>Notification Channels</CheckboxGroupLabel>      <CheckboxGroupList>        {options.map((option) => (          <CheckboxGroupItem key={option.value}>            <CheckboxGroupItemControl value={option.value} name="notifications" />            <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId } from "react";export function CheckboxGroupSizesDemo() {  const labelId = useId();  return (    <CheckboxGroup aria-labelledby={labelId} defaultValue={["md"]}>      <CheckboxGroupLabel id={labelId}>Control Size</CheckboxGroupLabel>      <CheckboxGroupList>        {options.map((option) => (          <CheckboxGroupItem key={option.value}>            <CheckboxGroupItemControl value={option.value} size={option.value} />            <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "xs", label: "Extra-small" },  { value: "sm", label: "Small" },  { value: "md", label: "Medium" },  { value: "lg", label: "Large" },  { value: "xl", label: "Extra-large" },] as const;

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId, useState } from "react";export function ControlledCheckboxGroupDemo() {  const labelId = useId();  const [value, setValue] = useState(["push"] as string[]);  return (    <div className={styles.wrapper}>      <CheckboxGroup aria-labelledby={labelId} value={value} onValueChange={setValue}>        <CheckboxGroupLabel id={labelId}>Active Alerts</CheckboxGroupLabel>        <CheckboxGroupList>          {options.map((option) => (            <CheckboxGroupItem key={option.value}>              <CheckboxGroupItemControl value={option.value} name="alerts" />              <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>            </CheckboxGroupItem>          ))}        </CheckboxGroupList>      </CheckboxGroup>      <span className={styles.hint}>Current value: {value.join(", ") || "none"}</span>    </div>  );}

.wrapper {  display: flex;  flex-direction: column;  align-items: flex-start;  gap: var(--spacing-2);}.hint {  color: var(--color-muted-foreground);  font-size: var(--text-xs);  line-height: var(--line-height-text-xs);}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId } from "react";export function DisabledCheckboxGroupDemo() {  const labelId = useId();  return (    <CheckboxGroup aria-labelledby={labelId} defaultValue={["push"]} disabled>      <CheckboxGroupLabel id={labelId}>Disabled Settings</CheckboxGroupLabel>      <CheckboxGroupList>        {options.map((option) => (          <CheckboxGroupItem key={option.value}>            <CheckboxGroupItemControl value={option.value} name="disabled-settings" />            <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId, useState } from "react";export function ParentCheckboxGroupDemo() {  const labelId = useId();  const [value, setValue] = useState([] as string[]);  return (    <CheckboxGroup      aria-labelledby={labelId}      value={value}      onValueChange={setValue}      allValues={fruitValues}    >      <CheckboxGroupLabel id={labelId}>Fruits</CheckboxGroupLabel>      <CheckboxGroupList>        <CheckboxGroupItem>          <CheckboxGroupItemControl parent />          <CheckboxGroupItemLabel>Select all</CheckboxGroupItemLabel>        </CheckboxGroupItem>        {options.map((option) => (          <CheckboxGroupItem key={option.value}>            <CheckboxGroupItemControl value={option.value} />            <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "apple", label: "Apple" },  { value: "orange", label: "Orange" },  { value: "pear", label: "Pear" },];const fruitValues = options.map((option) => option.value);

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId } from "react";function CustomPlusIcon() {  return (    <svg viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false">      <path        d="M5 1.5V8.5M1.5 5H8.5"        stroke="currentColor"        strokeWidth="1.8"        strokeLinecap="round"      />    </svg>  );}export function CustomIconCheckboxGroupDemo() {  const labelId = useId();  return (    <CheckboxGroup aria-labelledby={labelId} defaultValue={["email"]}>      <CheckboxGroupLabel id={labelId}>Custom Indicators</CheckboxGroupLabel>      <CheckboxGroupList>        {options.map((option) => (          <CheckboxGroupItem key={option.value}>            <CheckboxGroupItemControl              value={option.value}              name="custom-indicators"              checkedIcon={<CustomPlusIcon />}            />            <CheckboxGroupItemLabel>{option.label}</CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import {  CheckboxGroup,  CheckboxGroupItem,  CheckboxGroupItemControl,  CheckboxGroupItemLabel,  CheckboxGroupLabel,  CheckboxGroupList,} from "moduix";import { useId } from "react";export function CustomStylesCheckboxGroupDemo() {  const labelId = useId();  return (    <CheckboxGroup      aria-labelledby={labelId}      defaultValue={["email"]}      className={styles.customGroup}    >      <CheckboxGroupLabel id={labelId} className={styles.customLabel}>        Styled Channels      </CheckboxGroupLabel>      <CheckboxGroupList className={styles.customList}>        {options.map((option) => (          <CheckboxGroupItem key={option.value} className={styles.customItem}>            <CheckboxGroupItemControl              value={option.value}              name="styled-notifications"              className={styles.customControl}              classNames={{ indicator: styles.customIndicator }}            />            <CheckboxGroupItemLabel className={styles.customItemLabel}>              {option.label}            </CheckboxGroupItemLabel>          </CheckboxGroupItem>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

.customGroup,.customList,.customItem {  gap: var(--spacing-3);}.customLabel,.customItemLabel {  color: var(--color-primary);}.customControl {  border-color: var(--color-primary);  &[data-checked] {    background-color: var(--color-primary);  }}.customIndicator {  color: var(--color-primary-foreground);}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import {  Checkbox,  CheckboxField,  CheckboxGroup,  CheckboxGroupLabel,  CheckboxGroupList,  CheckboxLabel,} from "moduix";import { useId } from "react";export function CheckboxGroupFieldCompositionDemo() {  const labelId = useId();  return (    <CheckboxGroup aria-labelledby={labelId} defaultValue={["email"]}>      <CheckboxGroupLabel id={labelId}>Channels</CheckboxGroupLabel>      <CheckboxGroupList>        {options.map((option) => (          <CheckboxField key={option.value}>            <Checkbox value={option.value} name="field-composition" />            <CheckboxLabel>{option.label}</CheckboxLabel>          </CheckboxField>        ))}      </CheckboxGroupList>    </CheckboxGroup>  );}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];

import { CheckboxGroup, CheckboxGroupItemControl } from "moduix";import { useId } from "react";export function SiblingLabelCheckboxGroupDemo() {  const id = useId();  const labelId = useId();  return (    <div className={styles.siblingRow}>      <div id={labelId} className={styles.hint}>        Channels      </div>      <CheckboxGroup defaultValue={["email"]} aria-labelledby={labelId}>        <CheckboxGroupItemControl          nativeButton          render={<button />}          id={id}          value="email"          name="sibling-notifications"        />      </CheckboxGroup>      <label htmlFor={id} className={styles.label}>        Email updates      </label>    </div>  );}

.siblingRow {  display: flex;  align-items: center;  gap: var(--checkbox-gap, var(--spacing-2));}.hint {  color: var(--color-muted-foreground);  font-size: var(--text-xs);  line-height: var(--line-height-text-xs);}.label {  color: var(--checkbox-label-color, var(--color-foreground));  font-size: var(--checkbox-label-font-size, var(--text-sm));  font-weight: var(--checkbox-label-font-weight, var(--weight-medium));  line-height: var(--checkbox-label-line-height, var(--line-height-text-sm));}

import {  Checkbox,  CheckboxGroup,  CheckboxLabel,  Field,  FieldItem,  FieldLabel,  Fieldset,  FieldsetLegend,} from "moduix";export function CheckboxGroupFormIntegrationDemo() {  return (    <Field name="notificationChannels">      <Fieldset render={<CheckboxGroup defaultValue={["email"]} />}>        <FieldsetLegend>Notification Channels</FieldsetLegend>        {options.map((option) => (          <FieldItem key={option.value}>            <FieldLabel>              <Checkbox value={option.value} />              <CheckboxLabel>{option.label}</CheckboxLabel>            </FieldLabel>          </FieldItem>        ))}      </Fieldset>    </Field>  );}

const options = [  { value: "email", label: "Email updates" },  { value: "push", label: "Push notifications" },  { value: "sms", label: "SMS alerts" },];