feat(v3): CheckboxGroup, FieldCheckboxGroup

app/components/form/field-radio-group/index.tsx

@@ -54,6 +54,7 @@ export const FieldRadioGroup = <
       defaultValue={defaultValue}
       shouldUnregister={shouldUnregister}
       render={({ field: { onChange, value, ...field }, fieldState }) => {
+        const isInvalid = fieldState.error ? true : undefined;
         return (
           <div
             {...containerProps}
@@ -64,7 +65,7 @@ export const FieldRadioGroup = <
           >
             <RadioGroup
               id={ctx.id}
-              aria-invalid={fieldState.error ? true : undefined}
+              aria-invalid={isInvalid}
               aria-labelledby={ctx.labelId}
               aria-describedby={
                 !fieldState.error
@@ -83,6 +84,7 @@ export const FieldRadioGroup = <
                     <React.Fragment key={radioId}>
                       {renderOption({
                         label,
+                        'aria-invalid': isInvalid,
                         ...field,
                         ...option,
                       })}
@@ -91,7 +93,13 @@ export const FieldRadioGroup = <
                 }
 
                 return (
-                  <Radio key={radioId} size={size} {...field} {...option}>
+                  <Radio
+                    key={radioId}
+                    aria-invalid={isInvalid}
+                    size={size}
+                    {...field}
+                    {...option}
+                  >
                     {label}
                   </Radio>
                 );

app/components/form/form-field-controller.tsx

@@ -96,6 +96,7 @@ export const FormFieldController = <
 
       case 'checkbox':
         return <FieldCheckbox {...props} />;
+
       // -- ADD NEW FIELD COMPONENT HERE --
     }
   };

app/components/ui/checkbox-group.stories.tsx

@@ -0,0 +1,173 @@
+import { Meta } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { useCheckboxGroup } from '@/components/ui/checkbox.utils';
+import { CheckboxGroup } from '@/components/ui/checkbox-group';
+export default {
+  title: 'CheckboxGroup',
+  component: CheckboxGroup,
+} satisfies Meta<typeof CheckboxGroup>;
+
+const astrobears = [
+  { value: 'bearstrong', label: 'Bearstrong', disabled: false },
+  { value: 'pawdrin', label: 'Buzz Pawdrin', disabled: false },
+  { value: 'grizzlyrin', label: 'Yuri Grizzlyrin', disabled: true },
+] as const;
+
+export const Default = () => {
+  return (
+    <CheckboxGroup>
+      {astrobears.map((option) => (
+        <Checkbox key={option.value} value={option.value}>
+          {option.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  );
+};
+
+export const DefaultValue = () => {
+  return (
+    <CheckboxGroup defaultValue={['bearstrong']}>
+      {astrobears.map((option) => (
+        <Checkbox key={option.value} value={option.value}>
+          {option.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <CheckboxGroup disabled>
+      {astrobears.map((option) => (
+        <Checkbox key={option.value} value={option.value}>
+          {option.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  );
+};
+
+export const DisabledOption = () => {
+  return (
+    <CheckboxGroup>
+      {astrobears.map((option) => (
+        <Checkbox
+          key={option.value}
+          value={option.value}
+          disabled={option.disabled}
+        >
+          {option.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  );
+};
+
+export const ParentCheckbox = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <CheckboxGroup
+      value={value}
+      onValueChange={setValue}
+      allValues={astrobears.map((bear) => bear.value)}
+    >
+      <Checkbox name="astrobears" parent>
+        Astrobears
+      </Checkbox>
+      <div className="flex flex-col gap-1 pl-4">
+        {astrobears.map((option) => (
+          <Checkbox key={option.value} value={option.value}>
+            {option.label}
+          </Checkbox>
+        ))}
+      </div>
+    </CheckboxGroup>
+  );
+};
+
+const nestedBears = [
+  { value: 'bearstrong', label: 'Bearstrong', children: undefined },
+  {
+    value: 'pawdrin',
+    label: 'Buzz Pawdrin',
+    children: [
+      { value: 'mini-pawdrin-1', label: 'Mini pawdrin 1' },
+      { value: 'mini-pawdrin-2', label: 'Mini pawdrin 2' },
+    ],
+  },
+  {
+    value: 'grizzlyrin',
+    label: 'Yuri Grizzlyrin',
+    children: [
+      { value: 'mini-grizzlyrin-1', label: 'Mini grizzlyrin 1' },
+      { value: 'mini-grizzlyrin-2', label: 'Mini grizzlyrin 2' },
+    ],
+  },
+];
+
+export const Nested = () => {
+  return (
+    <CheckboxGroup
+      groups={['grizzlyrin', 'pawdrin']}
+      checkAll={{ label: 'Astrobears' }}
+      options={nestedBears}
+    />
+  );
+};
+
+export const NestedWithCustomLogic = () => {
+  const {
+    main: { indeterminate, ...main },
+    nested,
+  } = useCheckboxGroup(nestedBears, {
+    groups: ['grizzlyrin', 'pawdrin'],
+    mainDefaultValue: [],
+    nestedDefaultValue: {
+      grizzlyrin: [],
+      pawdrin: ['mini-pawdrin-1'],
+    },
+  });
+
+  return (
+    <>
+      <CheckboxGroup {...main}>
+        <Checkbox name="astrobears" parent indeterminate={indeterminate}>
+          Astrobears
+        </Checkbox>
+        <div className="space-y-1 pl-4">
+          {nestedBears.map((bear) => {
+            if (!bear.children) {
+              return (
+                <Checkbox key={bear.value} value={bear.value}>
+                  {bear.label}
+                </Checkbox>
+              );
+            }
+
+            return (
+              <CheckboxGroup key={bear.value} {...nested[bear.value]}>
+                <Checkbox value={bear.value} parent>
+                  {bear.label}
+                </Checkbox>
+                <div className="space-y-1 pl-4">
+                  {bear.children.map((bear) => (
+                    <Checkbox key={bear.value} value={bear.value}>
+                      {bear.label}
+                    </Checkbox>
+                  ))}
+                </div>
+              </CheckboxGroup>
+            );
+          })}
+        </div>
+      </CheckboxGroup>
+      [{main.value.join(', ')}] <br />[{nested['grizzlyrin']?.value?.join(', ')}
+      ]
+    </>
+  );
+};

app/components/ui/checkbox-group.tsx

@@ -0,0 +1,142 @@
+import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui-components/react/checkbox-group';
+import { cva, VariantProps } from 'class-variance-authority';
+import { ReactNode, useId } from 'react';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { useCheckboxGroup } from '@/components/ui/checkbox.utils';
+
+const checkboxGroupVariants = cva('flex flex-col items-start gap-1', {
+  variants: {
+    size: {
+      // TODO
+      default: '',
+      sm: '',
+      lg: '',
+    },
+    isNested: {
+      true: 'pl-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+    isNested: false,
+  },
+});
+
+export type CheckboxOption = {
+  label: ReactNode;
+  value: string;
+  children?: Array<CheckboxOption>;
+};
+
+type BaseCheckboxGroupProps = Omit<CheckboxGroupPrimitive.Props, 'children'>;
+
+type WithChildren = { children: ReactNode };
+type WithOptions = {
+  checkAll?: { label: ReactNode; value?: string };
+  options: Array<CheckboxOption>;
+  children?: never;
+  groups?: string[];
+};
+type ChildrenOrOption = OneOf<[WithChildren, WithOptions]>;
+
+export type CheckboxGroupProps = BaseCheckboxGroupProps &
+  VariantProps<typeof checkboxGroupVariants> &
+  ChildrenOrOption;
+
+/** For now, this component is only meant to work up until 2 levels deep nested groups */
+export function CheckboxGroup({
+  children,
+  options,
+  groups,
+  size,
+  isNested: isNestedProp,
+  className,
+  ...props
+}: CheckboxGroupProps) {
+  const isNested = !!isNestedProp || !!groups?.length;
+
+  const formattedClassName = checkboxGroupVariants({
+    size,
+    isNested,
+    className,
+  });
+  return options?.length ? (
+    <CheckboxGroupWithOptions
+      options={options}
+      groups={groups}
+      className={formattedClassName}
+      isNested={isNested}
+      {...props}
+    />
+  ) : (
+    <CheckboxGroupWithChildren className={formattedClassName} {...props}>
+      {children}
+    </CheckboxGroupWithChildren>
+  );
+}
+
+function CheckboxGroupWithOptions({
+  options,
+  groups,
+  checkAll,
+  isNested,
+  ...props
+}: BaseCheckboxGroupProps & WithOptions & { isNested?: boolean }) {
+  const groupId = useId();
+
+  const {
+    main: { indeterminate, ...main },
+    nested,
+  } = useCheckboxGroup(options, {
+    groups: groups ?? [],
+  });
+
+  const rootProps = isNested ? main : {};
+
+  return (
+    <CheckboxGroupPrimitive {...rootProps} {...props}>
+      {checkAll && (
+        <Checkbox
+          parent
+          value={checkAll.value}
+          key={`${groupId}-root`}
+          indeterminate={isNested ? undefined : indeterminate}
+          className="-ml-4"
+        >
+          {checkAll.label}
+        </Checkbox>
+      )}
+      {options.map((option) => {
+        const nestedGroup = nested[option.value ?? ''];
+
+        if (!option.children || !option.children.length) {
+          return (
+            <Checkbox key={option.value} value={option.value}>
+              {option.label}
+            </Checkbox>
+          );
+        }
+
+        return (
+          <CheckboxGroup
+            isNested
+            key={option.value}
+            checkAll={{ label: option.label, value: option.value }}
+            options={option.children}
+            {...(option.children && nestedGroup
+              ? { ...nestedGroup, defaultValue: [] }
+              : undefined)}
+          />
+        );
+      })}
+    </CheckboxGroupPrimitive>
+  );
+}
+
+function CheckboxGroupWithChildren({
+  children,
+  ...props
+}: BaseCheckboxGroupProps & WithChildren) {
+  return <CheckboxGroupPrimitive {...props}>{children}</CheckboxGroupPrimitive>;
+}

app/components/ui/checkbox.tsx

@@ -19,7 +19,7 @@ const labelVariants = cva('flex items-start gap-2.5 text-primary', {
 });
 
 const checkboxVariants = cva(
-  'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20',
+  'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20 aria-invalid:data-unchecked:border-destructive',
   {
     variants: {
       size: {