all api and tests working

Author: GoldGroove06

src/components/ui/TabNav/fragments/TabNavLink.tsx

@@ -39,7 +39,6 @@ const TabNavLink = ({ value, className = '', href = '#', children, disabled, asC
                 asChild={asChild}
                 aria-disabled={disabled}
                 aria-selected={isActive}
-                // @ts-expect-error
                 disabled={disabled}
                 {...disabled ? {} : { href }}
             >

src/core/primitives/Primitive/index.tsx

@@ -5,10 +5,9 @@ const SUPPORTED_HTML_ELEMENTS = ['div', 'span', 'button', 'input', 'a', 'img', '
 type SupportedElement = typeof SUPPORTED_HTML_ELEMENTS[number];
 
 // Update type definitions to be more specific
-interface PrimitiveProps extends React.HTMLAttributes<HTMLElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-}
+type PrimitiveProps =
+  | (React.InputHTMLAttributes<HTMLInputElement> & { asChild?: boolean })
+  | (React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children?: React.ReactNode });
 
 // Update component creation with proper typing
 const createPrimitiveComponent = (elementType: SupportedElement) => {

src/core/primitives/Radio/RadioPrimitive.stories.tsx

@@ -26,8 +26,7 @@ export const All = {
             console.log('data', data);
         },
         name: 'radio',
-        value: 'radio1',
-        checked: true,
+        value: 'radio',
         required: true
     }
 };

src/core/primitives/Radio/index.tsx

@@ -1,41 +1,35 @@
-import React, { useState } from 'react';
-import Primitive from '~/core/primitives/Primitive';
+import React from 'react';
+import Primitive from '../Primitive';
 
-export type RadioPrimitiveProps = {
-    onClick?: (data: any) => void;
-    onChange?: (data: any) => void;
-    onFocus?: (data: any) => void;
-    checked?: boolean;
+type RadioPrimitiveProps = {
     name: string;
     value: string;
-    disabled?: boolean
+    id: string;
+    onChange?: () => void;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
     asChild?: boolean
-    required?: boolean
-    id?: string
-};
-
-const RadioPrimitive = ({ name = '', value = '', checked = false, onClick, onChange, onFocus, disabled = false, asChild = false, required = false, id, ...props }:RadioPrimitiveProps) => {
-    const [isChecked, setIsChecked] = useState(checked);
-    const dataAttributes = {
-        'data-checked': isChecked.toString()
-    };
-
-    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const isChecked = event.target.checked;
-        console.log(isChecked);
-        if (typeof onChange === 'function') {
-            setIsChecked(isChecked);
-            onChange({
-                value,
-                checked: isChecked
-            });
-        }
-    };
+}
 
+function RadioPrimitive({ name, value, id, checked, required, onChange, disabled, asChild, ...props }: RadioPrimitiveProps) {
     return (
-        // @ts-ignore
-        <Primitive.input id={id} type='radio' value={value} name={name} onFocus={onFocus} onChange={handleOnChange} disabled={disabled} asChild={asChild} required={required} tabIndex={-1} {...props} {...dataAttributes}/>
+        <Primitive.input
+            type="radio"
+            checked={checked}
+            name={name}
+            tabIndex={-1}
+            value={value}
+            onChange={onChange}
+            id={value}
+            aria-disabled={disabled}
+            disabled={disabled}
+            required={required}
+            aria-required={required}
+            asChild={asChild}
+            {...props}
+        />
     );
-};
+}
 
 export default RadioPrimitive;

src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.tsx

@@ -26,7 +26,11 @@ const RadioButton = (args: RadioButtonProps) => {
     };
     return (
         <SandboxEditor>
-            <RadioGroupPrimitive.Root orientation='horizontal' dir='rtl' name='test'>
+            <RadioGroupPrimitive.Root
+                orientation='horizontal' dir='rtl'
+                name='test'
+            //  defaultValue='css'
+            >
                 {options.map((option) => (
                     <RadioGroupPrimitive.Item key={option.id} value={option.value}>
                         {option.label}
@@ -65,30 +69,26 @@ export const InForm = () => {
 
     return (
         <SandboxEditor>
-        <form onSubmit={handleSubmit}>
-            <RadioGroupPrimitive.Root
-                orientation="horizontal"
-                name="language"
-                value={selected}
-                onValueChange={handleChange}
-            >
-                {options.map((option) => (
-                    <RadioGroupPrimitive.Item key={option.id} value={option.value}>
-                        {option.label}
-                    </RadioGroupPrimitive.Item>
-                ))}
-            </RadioGroupPrimitive.Root>
-            <button type="submit" style={{ marginTop: 16 }}>Submit</button>
-            {submitted && (
-                <div style={{ marginTop: 12 }}>
-                    <strong>Submitted value:</strong> {submitted}
-                </div>
-            )}
-        </form>
+            <form onSubmit={handleSubmit}>
+                <RadioGroupPrimitive.Root
+                // orientation="horizontal"
+                    name="language"
+                    value={selected}
+                    onValueChange={handleChange}
+                >
+                    {options.map((option) => (
+                        <RadioGroupPrimitive.Item key={option.id} value={option.value}>
+                            {option.label}
+                        </RadioGroupPrimitive.Item>
+                    ))}
+                </RadioGroupPrimitive.Root>
+                <button type="submit" style={{ marginTop: 16 }}>Submit</button>
+                {submitted && (
+                    <div style={{ marginTop: 12 }}>
+                        <strong>Submitted value:</strong> {submitted}
+                    </div>
+                )}
+            </form>
         </SandboxEditor>
     );
 };
-
-
-
-

src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveItem.tsx

@@ -2,38 +2,37 @@ import React, { PropsWithChildren, useContext } from 'react';
 import RadioGroupContext from '../context/RadioGroupContext';
 import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 import RadioPrimitive from '~/core/primitives/Radio';
-import Primitive from '../../Primitive';
 
 type RadioGroupPrimitiveItemProps = PropsWithChildren<{
     value: string;
     disabled?: boolean
-    children?: React.ReactNode
+    children?: React.ReactNode;
+    required?: boolean
 }>;
 
-const RadioGroupPrimitiveItem = ({ value, children, disabled, ...props }: RadioGroupPrimitiveItemProps) => {
+const RadioGroupPrimitiveItem = ({ value, children, disabled, required = false, ...props }: RadioGroupPrimitiveItemProps) => {
     const context = useContext(RadioGroupContext);
     if (!context) {
         throw new Error('RadioGroup.Item must be used within a RadioGroup.Root');
     }
-    const { groupDisabled, name, selectedValue, setSelectedValue, } = context;
-
+    const { groupDisabled, name, selectedValue, setSelectedValue } = context;
 
     return (
         <RovingFocusGroup.Item role='radio'>
             <div {...props} onFocus={() => setSelectedValue(value)}>
-                <Primitive.input
-                   
-                    type="radio"
+
+                <RadioPrimitive
                     id={value}
                     name={name}
                     value={value}
-                    checked={selectedValue === value}
+                    checked = {selectedValue === value}
                     disabled={groupDisabled || disabled}
-                    tabIndex={ -1}
+                    required={required}
                     onChange={() => setSelectedValue(value)}
-                    onFocus={() => setSelectedValue(value)}
                 />
+
                 <label htmlFor={value}>{children}</label>
+
             </div>
         </RovingFocusGroup.Item>
     );

src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveRoot.tsx

@@ -4,7 +4,6 @@ import RadioGroupContext from '../context/RadioGroupContext';
 import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 import useControllableState from '~/core/hooks/useControllableState';
 
-
 type RadioGroupPrimitiveRootProps = PropsWithChildren<{
     className?: string;
     customRootClass?: string;
@@ -19,14 +18,12 @@ type RadioGroupPrimitiveRootProps = PropsWithChildren<{
     dir?: 'ltr' | 'rtl';
 }>;
 
-const RadioGroupPrimitiveRoot = ({ value, defaultValue = '', onValueChange, children, disabled: groupDisabled = false, required = false, name = '', orientation = 'horizontal', loop = true, dir = 'ltr', ...props }: RadioGroupPrimitiveRootProps) => {
-
+const RadioGroupPrimitiveRoot = ({ value, defaultValue = '', onValueChange, children, disabled: groupDisabled = false, required = false, name = '', orientation = 'horizontal', loop = false, dir = 'ltr', ...props }: RadioGroupPrimitiveRootProps) => {
     const [selectedValue, setSelectedValue] = useControllableState(
         value,
         defaultValue,
         onValueChange
     );
-    
 
     const sendItems = {
         selectedValue,
@@ -36,16 +33,15 @@ const RadioGroupPrimitiveRoot = ({ value, defaultValue = '', onValueChange, chil
     };
 
     return (
-        <RovingFocusGroup.Root orientation={orientation} loop={loop} dir={dir}>
+        <RovingFocusGroup.Root>
             <RadioGroupContext.Provider value={sendItems}>
-        <RovingFocusGroup.Group>
-                <Primitive.div {...props} aria-required={required} role='radiogroup' aria-disabled={groupDisabled}>
-                    
+                <RovingFocusGroup.Group>
+                    <Primitive.div {...props} aria-required={required} role='radiogroup' aria-disabled={groupDisabled}>
+
                         {children}
-                    
 
-                </Primitive.div>
-        </RovingFocusGroup.Group>
+                    </Primitive.div>
+                </RovingFocusGroup.Group>
             </RadioGroupContext.Provider>
         </RovingFocusGroup.Root>
     )

src/core/primitives/RadioGroup/tests/RadioGroupPrimtive.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import RadioGroupPrimitiveRoot from '../fragments/RadioGroupPrimitiveRoot';
+import RadioGroupPrimitiveItem from '../fragments/RadioGroupPrimitiveItem';
+
+describe('RadioGroupPrimitive', () => {
+    it('renders radio items and allows selection (uncontrolled)', () => {
+        render(
+            <RadioGroupPrimitiveRoot defaultValue="b" name="test-group">
+                <RadioGroupPrimitiveItem value="a">Option A</RadioGroupPrimitiveItem>
+                <RadioGroupPrimitiveItem value="b">Option B</RadioGroupPrimitiveItem>
+                <RadioGroupPrimitiveItem value="c">Option C</RadioGroupPrimitiveItem>
+            </RadioGroupPrimitiveRoot>
+        );
+        const radioA = screen.getByLabelText('Option A') as HTMLInputElement;
+        const radioB = screen.getByLabelText('Option B') as HTMLInputElement;
+        const radioC = screen.getByLabelText('Option C') as HTMLInputElement;
+        expect(radioA.checked).toBe(false);
+        expect(radioB.checked).toBe(true);
+        expect(radioC.checked).toBe(false);
+        fireEvent.click(radioA);
+        expect(radioA.checked).toBe(true);
+        expect(radioB.checked).toBe(false);
+        expect(radioC.checked).toBe(false);
+    });
+
+    it('calls onValueChange in controlled mode', () => {
+        const handleChange = jest.fn();
+        render(
+            <RadioGroupPrimitiveRoot value="a" onValueChange={handleChange} name="test-group">
+                <RadioGroupPrimitiveItem value="a">Option A</RadioGroupPrimitiveItem>
+                <RadioGroupPrimitiveItem value="b">Option B</RadioGroupPrimitiveItem>
+            </RadioGroupPrimitiveRoot>
+        );
+        const radioB = screen.getByLabelText('Option B') as HTMLInputElement;
+        fireEvent.click(radioB);
+        expect(handleChange).toHaveBeenCalledWith('b');
+    });
+
+    it('disables all radios when group is disabled', () => {
+        render(
+            <RadioGroupPrimitiveRoot defaultValue="a" disabled name="test-group">
+                <RadioGroupPrimitiveItem value="a">Option A</RadioGroupPrimitiveItem>
+                <RadioGroupPrimitiveItem value="b">Option B</RadioGroupPrimitiveItem>
+            </RadioGroupPrimitiveRoot>
+        );
+        const radioA = screen.getByLabelText('Option A') as HTMLInputElement;
+        const radioB = screen.getByLabelText('Option B') as HTMLInputElement;
+        expect(radioA).toBeDisabled();
+        expect(radioB).toBeDisabled();
+    });
+
+    it('disables individual radio when disabled', () => {
+        render(
+            <RadioGroupPrimitiveRoot defaultValue="a" name="test-group">
+                <RadioGroupPrimitiveItem value="a" disabled>Option A</RadioGroupPrimitiveItem>
+                <RadioGroupPrimitiveItem value="b">Option B</RadioGroupPrimitiveItem>
+            </RadioGroupPrimitiveRoot>
+        );
+        const radioA = screen.getByLabelText('Option A') as HTMLInputElement;
+        const radioB = screen.getByLabelText('Option B') as HTMLInputElement;
+        expect(radioA).toBeDisabled();
+        expect(radioB).not.toBeDisabled();
+    });
+
+    it('sets required and name attributes', () => {
+        render(
+            <RadioGroupPrimitiveRoot defaultValue="a" required name="my-radio-group">
+                <RadioGroupPrimitiveItem value="a">Option A</RadioGroupPrimitiveItem>
+            </RadioGroupPrimitiveRoot>
+        );
+        const radioA = screen.getByLabelText('Option A') as HTMLInputElement;
+        expect(radioA).toHaveAttribute('name', 'my-radio-group');
+        // required is set on the group, not the input, but we can check the group
+        const group = screen.getByRole('radiogroup');
+        expect(group).toHaveAttribute('aria-required', 'true');
+    });
+
+    it('throws error if RadioGroupPrimitiveItem is used outside RadioGroupPrimitiveRoot', () => {
+    // Suppress error output for this test
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        expect(() => {
+            render(<RadioGroupPrimitiveItem value="a">Option A</RadioGroupPrimitiveItem>);
+        }).toThrow('RadioGroup.Item must be used within a RadioGroup.Root');
+        spy.mockRestore();
+    });
+});