Merge branch 'main' of https://github.com/GoldGroove06/radui-fork

Author: GoldGroove06

src/components/ui/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,39 @@
+import RadioGroup from './RadioGroup';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import { useState } from 'react';
+
+const RadioButton = (args) => {
+   const options = [
+    {id: 'html', value: 'html', label:'HTML'},
+    {id: 'css', value: 'css', label:'CSS'},
+    {id: 'javascript', value: 'javascript', label:'JavaScript'},]
+
+    const [language, setLanguage] = useState({})
+
+    const handleChange = (e) => {
+          setLanguage(e.target.value)
+    }
+      return (
+        <SandboxEditor>
+                {options.map((option) => (
+            <RadioGroup className='radioItems'{...args}
+            key={option.id} 
+            id={option.id}
+            name='language'
+            value={option.value}
+            checked={language === option.value}
+            onChange={handleChange} >
+                <span id={option.id} >{option.label}</span>    
+                   </RadioGroup>
+                    ))}
+        </SandboxEditor>
+      )
+}
+
+export default {
+    title: 'UI/Input/RadioGroup',
+    component: RadioGroup,
+    render: (args) => <RadioButton {...args}/>   
+};
+
+export const All = {};

src/components/ui/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,28 @@
+import React, { DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren} from 'react';
+import { customClassSwitcher} from "~/core";
+import RadioPrimitive from '~/core/primitives/Radio';
+const COMPONENT_NAME = 'RadioGroup';
+
+export type RadioGroupProps = {
+  
+    children?: React.ReactNode;
+    className: string;
+    customRootClass: string;  
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & PropsWithChildren
+
+const RadioGroup =({children,type='radio', className='',customRootClass='', ...props}:RadioGroupProps) => {
+    const rootClass= customClassSwitcher(customRootClass,COMPONENT_NAME)
+   
+    return (
+      <div className={`${rootClass} ${className}`} role='radiogroup'>
+        <RadioPrimitive 
+         type={type}
+         {...props}>
+
+         {children}
+       </RadioPrimitive>
+       </div>
+    )
+}
+      
+export default RadioGroup;

src/components/ui/Switch/stories/Switch.stories.js

@@ -13,11 +13,12 @@ const CheckBox = (args) => {
         setIsChecked(state);
     };
     return <SandboxEditor className="space-x-1">
-        {variants.map((variant, index) => (
-            <Switch defaultChecked={args} key={index} variant={variant} onChange={handleChange} {...args} />
-        ))}
-
-    </SandboxEditor>;
+            {variants.map((variant,index) => (
+              <Switch defaultChecked={args} key={index} variant={variant} onChange={handleChange} {...args} /> 
+            ))}  
+             
+           </SandboxEditor>;
+          
 };
 
 export const All = {};

src/core/primitives/Button/ButtonPrimitive.stories.tsx

@@ -10,7 +10,9 @@ export default {
         <div >
             <div className='flex space-x-2 w-full flex-1'>
                 <ButtonPrimitive {...args} />
+                
             </div>
+
         </div>
     </SandboxEditor>
 };

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

@@ -0,0 +1,38 @@
+import React from "react";
+import RadioPrimitive from '.';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+export default {
+    title: 'Primitives/RadioPrimitive',
+    component: RadioPrimitive,
+    render: (args:React.ComponentProps<typeof RadioPrimitive>) => <SandboxEditor>
+
+         <RadioPrimitive {...args} />
+    </SandboxEditor>
+    
+    }
+
+export const All = {
+     args: {
+        role: 'radio',
+        children: 'Radio',
+        checked: false,
+     }
+}
+
+export const WithAriaLabel = {
+     args: {
+        role: 'radio',
+        'aria-label': 'Aria label',
+        children: 'Radio',
+     }
+}
+
+export const Checked = {
+
+     args: {
+        role: 'radio',
+        checked: true,
+        children: 'Radio',
+     }
+}

src/core/primitives/Radio/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const RadioPrimitive = ({role='radio', label='', id, value, defaultChecked, onChange, checked, children, ...props}:any) => {
+      const ariaProps = {
+         'aria-label': label || undefined,
+         'aria-checked': checked ? 'true' : 'false',
+         'data-checked': checked ? 'true' : 'false'
+      }
+
+       return (
+       <div>
+        
+          
+          <input type='radio' id={id} {...ariaProps} {...props} value={value} checked={defaultChecked} onChange={onChange} />
+             
+           <label htmlFor={id}> {children}</label>
+          
+       </div>
+       )     
+}
+
+export default RadioPrimitive

styles/themes/components/radio.scss

@@ -0,0 +1,15 @@
+.rad-ui-radio-group{
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: var(--rad-ui-color-accent-900);
+    &.radioItems{
+        font-size: 1.2rem;
+    }
+    
+    &:focus{
+        outline: 2px solid var(--rad-ui-color-accent-900);
+        outline-offset: 2px;
+    }
+}

styles/themes/default.scss

@@ -18,6 +18,7 @@
 @import "./components/progress.scss";
 @import "./components/toggle.scss";
 @import "./components/toggle-group.scss";
+@import "./components/radio.scss";
 @import "./components/switch.scss";
 @import "./components/skeleton.scss";