Toggle Primitive, Toggle, ToggleGroup Refactor

package.json

@@ -8,7 +8,9 @@
     "./themes/default.css": "./dist/themes/default.css",
     "./themes/tailwind-presets/default.js": "./dist/themes/tailwind-presets/default.js",
     "./Accordion": "./dist/components/Accordion.js",
+    "./AlertDialog": "./dist/components/AlertDialog.js",
     "./Avatar": "./dist/components/Avatar.js",
+    "./AvatarGroup": "./dist/components/AvatarGroup.js",
     "./Badge": "./dist/components/Badge.js",
     "./BlockQuote": "./dist/components/BlockQuote.js",
     "./Button": "./dist/components/Button.js",
@@ -22,6 +24,7 @@
     "./Link": "./dist/components/Link.js",
     "./Progress": "./dist/components/Progress.js",
     "./Quote": "./dist/components/Quote.js",
+    "./RadioGroup": "./dist/components/RadioGroup.js",
     "./Separator": "./dist/components/Separator.js",
     "./Skeleton": "./dist/components/Skeleton.js",
     "./Strong": "./dist/components/Strong.js",

src/components/ui/Toggle/Toggle.tsx

@@ -3,12 +3,13 @@ import React, { useState } from 'react';
 import { customClassSwitcher } from '~/core';
 
 import ButtonPrimitive from '~/core/primitives/Button';
+import TogglePrimitive from '~/core/primitives/Toggle';
 
 const COMPONENT_NAME = 'Toggle';
 
 export type ToggleProps = {
-    defaultPressed? : boolean | false ;
-    pressed : boolean;
+    defaultPressed?: boolean;
+    pressed: boolean;
     customRootClass? : string;
     disabled? : boolean;
     children? : React.ReactNode;
@@ -18,18 +19,21 @@ export type ToggleProps = {
 };
 
 const Toggle: React.FC<ToggleProps> = ({
-    defaultPressed,
+    defaultPressed = false,
     customRootClass = '',
     children,
     className = '',
-    pressed,
+    pressed = false,
     onChange,
     ...props
 }) => {
+    if (typeof pressed !== 'boolean') {
+        throw new Error('Toggle: pressed prop must be a boolean');
+    }
 
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
+    const [isPressed, setIsPressed] = useState(pressed);
 
     const handlePressed = () => {
         const updatedPressed = !isPressed;
@@ -38,15 +42,16 @@ const Toggle: React.FC<ToggleProps> = ({
     };
 
     return (
-
-        <ButtonPrimitive
-            className={`${rootClass}`} onClick ={handlePressed}
+
+        <TogglePrimitive
+            className={`${rootClass}`}
+            pressed={isPressed}
+            onPressedChange={handlePressed}
             data-state={isPressed ? 'on' : 'off'}
-            type='button'
             data-disabled={props.disabled ? '' : undefined}
-            aria-pressed={pressed} {...props}>
+            {...props}>
             {children}
-        </ButtonPrimitive>
+        </TogglePrimitive>
     );
 };
 

src/components/ui/ToggleGroup/fragments/ToggleItem.tsx

@@ -8,7 +8,6 @@ const ToggleItem = ({ children, value = null, ...props }:any) => {
 
     const type = toggleContext?.type;
 
-
     const isActive = toggleContext?.activeToggles?.includes(value);
 
     const handleToggleSelect = () => {
@@ -17,7 +16,6 @@ const ToggleItem = ({ children, value = null, ...props }:any) => {
         // For Single Case
         if (type === 'single') {
             if (isActive) {
-
                 toggleContext?.setActiveToggles([]);
                 return;
             } else {

src/core/primitives/Toggle/index.tsx

@@ -1,7 +1,35 @@
-import TogglePrimitiveRoot from "./fragments/TogglePrimitiveRoot"
+import React, { useState } from 'react';
+
+import Primitive from '~/core/primitives/Primitive';
+
+export interface TogglePrimitiveProps {
+    defaultPressed? : boolean | false;
+    pressed: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    label?: string;
+    onPressedChange : (isPressed:boolean) => void;
 
-const TogglePrimitive = {
-    Root: TogglePrimitiveRoot,
 }
+const TogglePrimitive = ({ children, label = '', defaultPressed, pressed, onPressedChange, ...props }:TogglePrimitiveProps) => {
+    const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
+
+    const handlePressed = () => {
+        const updatedPressed = !isPressed;
+        setIsPressed(updatedPressed);
+        onPressedChange(updatedPressed);
+    };
+
+    const ariaAttributes:any = label ? { 'aria-label': label } : {};
+    ariaAttributes['aria-pressed'] = isPressed ? 'true' : 'false';
+
+    return <Primitive.button
+        onClick={handlePressed}
+        data-state={isPressed ? 'on' : 'off'}
+        {...ariaAttributes}
+        {...props}
+    >{children}
+    </Primitive.button>;
+};
 
-export default TogglePrimitive
+export default TogglePrimitive;

src/core/primitives/Toggle/stories/TogglePrimitive.stories.tsx

@@ -1,19 +1,22 @@
-import React from "react";
-import TogglePrimitive from "../index";
-import SandboxEditor from "~/components/tools/SandboxEditor/SandboxEditor";
+import React, { useState } from 'react';
+import TogglePrimitive from '../index';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
     title: 'Primitives/TogglePrimitive',
     component: TogglePrimitive,
-    render: (args:any) => <SandboxEditor>
-
-       <TogglePrimitive.Root {...args}>
-         </TogglePrimitive.Root>
-    </SandboxEditor>
-}
+    render: (args:any) => {
+        const [pressed, setPressed] = useState(false);
+        return <SandboxEditor>
+            <TogglePrimitive {...args} pressed={pressed} onPressedChange={setPressed}>
+             toggle - {pressed ? 'on' : 'off'}
+            </TogglePrimitive>
+        </SandboxEditor>;
+    }
+};
 
 export const All = {
     args: {
-      className: ''
+        className: ''
     }
-}
+};

src/core/primitives/Toggle/tests/TogglePrimitive.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TogglePrimitive from '../index';
+
+describe('TogglePrimitive', () => {
+    it('renders children correctly', () => {
+        render(<TogglePrimitive>Test Content</TogglePrimitive>);
+        expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+});