disbaled and required added

Author: GoldGroove06

src/core/primitives/CheckboxGroup/fragments/CheckboxGroupPrimitiveItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 import CheckboxGroupPrimitiveContext from '../context/CheckboxGroupPrimitiveContext';
+import { useIsInsideForm } from '~/core/hooks/useIsInsideFrom';
 
 export type CheckboxGroupPrimitiveItemProps = {
     children?: React.ReactNode
@@ -10,7 +11,7 @@ export type CheckboxGroupPrimitiveItemProps = {
     disabled?: boolean
 }
 const CheckboxGroupPrimitiveItem = ({ children, className = '', value, required, disabled }: CheckboxGroupPrimitiveItemProps) => {
-    const { checkedValues, setCheckedValues, name } = React.useContext(CheckboxGroupPrimitiveContext);
+    const { checkedValues, setCheckedValues, name, required: groupRequired, disabled: groupDisabled } = React.useContext(CheckboxGroupPrimitiveContext);
 
     const checked = checkedValues.includes(value);
 
@@ -25,12 +26,14 @@ const CheckboxGroupPrimitiveItem = ({ children, className = '', value, required,
         <div>
             <RovingFocusGroup.Item role='checkbox'>
 
-                <button onClick={handleClick} className={className} aria-checked={checked} disabled={disabled} aria-required={required}>
+                <button onClick={handleClick} className={className} aria-checked={checked} disabled={disabled || groupDisabled} aria-required={required || groupRequired}>
                     {checked && children}
                 </button>
 
             </RovingFocusGroup.Item>
-            <input type="checkbox" checked={checked} name={name} value={value} style={{ display: 'none' }} required={required} disabled={disabled}/>
+           
+            <input type="checkbox" checked={checked} name={name} value={value} style={{ display: 'none' }} required={required || groupRequired} disabled={disabled || groupDisabled}/>
+            
         </div>
     );
 };

src/core/primitives/CheckboxGroup/fragments/CheckboxGroupPrimitiveRoot.tsx

@@ -17,7 +17,7 @@ export type CheckboxGroupPrimitiveRootProps = {
     onValueChange?: (value: string[]) => void;
 }
 
-const CheckboxGroupPrimitiveRoot = ({ dir, orientation, loop, defaultValue = [], value, onValueChange, children, name, ...props }: CheckboxGroupPrimitiveRootProps) => {
+const CheckboxGroupPrimitiveRoot = ({ dir, orientation, loop, defaultValue = [], value, onValueChange, children, name, required, disabled, className ='', ...props }: CheckboxGroupPrimitiveRootProps) => {
     const [checkedValues, setCheckedValues] = useControllableState(
         value,
         defaultValue,
@@ -26,9 +26,9 @@ const CheckboxGroupPrimitiveRoot = ({ dir, orientation, loop, defaultValue = [],
     console.log(checkedValues);
 
     return (
-        <div>
+        <div className={className} {...props}>
             <RovingFocusGroup.Root dir={dir} orientation={orientation} loop={loop}>
-                <CheckboxGroupPrimitiveContext.Provider value={{ checkedValues, setCheckedValues, name }}>
+                <CheckboxGroupPrimitiveContext.Provider value={{ checkedValues, setCheckedValues, name, required, disabled }}>
                     <RovingFocusGroup.Group>
                         {children}
                     </RovingFocusGroup.Group>