rad-ui · kotAPI · Nov 22, 2024 · Jun 27, 2024 · Jun 28, 2024 · Jun 28, 2024
diff --git a/src/components/ui/Toggle/Toggle.tsx b/src/components/ui/Toggle/Toggle.tsx
@@ -14,6 +14,7 @@ export type ToggleProps = {
     children? : React.ReactNode;
     className? : string;
     onChange : (isPressed:boolean) => void;
+
 };
 
 const Toggle: React.FC<ToggleProps> = ({
@@ -25,6 +26,7 @@ const Toggle: React.FC<ToggleProps> = ({
     onChange,
     ...props
 }) => {
+
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
@@ -36,10 +38,11 @@ const Toggle: React.FC<ToggleProps> = ({
     };
 
     return (
+
         <ButtonPrimitive
-            className={`${rootClass}`} onClick={handlePressed}
+            className={`${rootClass}`} onClick ={handlePressed}
             data-state={isPressed ? 'on' : 'off'}
-            type="button"
+            type='button'
             data-disabled={props.disabled ? '' : undefined}
             aria-pressed={pressed} {...props}>
-            className={`${rootClass}`} onClick ={handlePressed}
-            data-state={isPressed ? 'on' : 'off'}
-            type="button"
-            type='button'
-            data-disabled={props.disabled ? '' : undefined}
-            aria-pressed={pressed} {...props}>
+            className={`${rootClass}`} onClick ={handlePressed}
+            data-state={isPressed ? 'on' : 'off'}
+            type='button'
+            data-disabled={props.disabled || undefined}
+            aria-pressed={isPressed} {...props}>
-            className={`${rootClass}`} onClick ={handlePressed}
-            data-state={isPressed ? 'on' : 'off'}
-            type="button"
-            type='button'
-            data-disabled={props.disabled ? '' : undefined}
-            aria-pressed={pressed} {...props}>
+            className={`${rootClass}`} onClick ={handlePressed}
+            data-state={isPressed ? 'on' : 'off'}
+            type='button'
+            data-disabled={props.disabled || undefined}
+            aria-pressed={isPressed} {...props}>
             {children}

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

diff --git a/src/core/primitives/Toggle/contexts/TogglePrimitiveContext.tsx b/src/core/primitives/Toggle/contexts/TogglePrimitiveContext.tsx
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+interface TogglePrimitiveContextType {
+    isPressed: boolean | undefined;
+    handlePressed: () => void;
+
+}
+export const TogglePrimitiveContext = createContext<TogglePrimitiveContextType>({} as TogglePrimitiveContextType)
diff --git a/src/core/primitives/Toggle/fragments/TogglePrimitiveRoot.tsx b/src/core/primitives/Toggle/fragments/TogglePrimitiveRoot.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export interface TogglePrimitiveRootProps {
+    defaultPressed? : boolean | false;
+    pressed: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    onChange : (isPressed:boolean) => void;
+
+}
-export interface TogglePrimitiveRootProps {
-    defaultPressed? : boolean | false;
-    pressed: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    onChange : (isPressed:boolean) => void;
-
-}
+/**
+ * Props for the Toggle Primitive component that handles basic toggle functionality
+ */
+export interface TogglePrimitiveRootProps {
+    /** Initial pressed state for uncontrolled usage */
+    defaultPressed?: boolean;
+    /** Current pressed state for controlled usage. Takes precedence over defaultPressed */
+    pressed: boolean;
+    /** Content to be rendered within the toggle */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback fired when toggle state changes */
+    onChange : (isPressed:boolean) => void;
+}
-export interface TogglePrimitiveRootProps {
-    defaultPressed? : boolean | false;
-    pressed: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    onChange : (isPressed:boolean) => void;
-
-}
+/**
+ * Props for the Toggle Primitive component that handles basic toggle functionality
+ */
+export interface TogglePrimitiveRootProps {
+    /** Initial pressed state for uncontrolled usage */
+    defaultPressed?: boolean;
+    /** Current pressed state for controlled usage. Takes precedence over defaultPressed */
+    pressed: boolean;
+    /** Content to be rendered within the toggle */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback fired when toggle state changes */
+    onChange : (isPressed:boolean) => void;
+}
+const TogglePrimitiveRoot = ({children,className='',defaultPressed,pressed,onChange,...props}:TogglePrimitiveRootProps) => {
+      const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
-const TogglePrimitiveRoot = ({children,className='',defaultPressed,pressed,onChange,...props}:TogglePrimitiveRootProps) => {
-      const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
+const TogglePrimitiveRoot = ({
+  children,
+  className = '',
+  defaultPressed = false,
+  pressed,
+  onChange,
+  ...props
+}: TogglePrimitiveRootProps) => {
+  const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? uncontrolledPressed;
-const TogglePrimitiveRoot = ({children,className='',defaultPressed,pressed,onChange,...props}:TogglePrimitiveRootProps) => {
-      const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
+const TogglePrimitiveRoot = ({
+  children,
+  className = '',
+  defaultPressed = false,
+  pressed,
+  onChange,
+  ...props
+}: TogglePrimitiveRootProps) => {
+  const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? uncontrolledPressed;
+
+   const handlePressed = () => {
+     const updatedPressed = !isPressed;
+     setIsPressed(updatedPressed);
+     onChange(updatedPressed)
+     }
-   const handlePressed = () => {
-     const updatedPressed = !isPressed;
-     setIsPressed(updatedPressed);
-     onChange(updatedPressed)
-     }
+   const handlePressed = (event: React.MouseEvent | React.KeyboardEvent) => {
+     if (
+       event.type === 'keydown' &&
+       (event as React.KeyboardEvent).key !== 'Enter' &&
+       (event as React.KeyboardEvent).key !== ' '
+     ) {
+       return;
+     }
+     event.preventDefault();
+     const updatedPressed = !isPressed;
+     if (pressed === undefined) {
+       setUncontrolledPressed(updatedPressed);
+     }
+     onChange(updatedPressed);
+   }
-   const handlePressed = () => {
-     const updatedPressed = !isPressed;
-     setIsPressed(updatedPressed);
-     onChange(updatedPressed)
-     }
+   const handlePressed = (event: React.MouseEvent | React.KeyboardEvent) => {
+     if (
+       event.type === 'keydown' &&
+       (event as React.KeyboardEvent).key !== 'Enter' &&
+       (event as React.KeyboardEvent).key !== ' '
+     ) {
+       return;
+     }
+     event.preventDefault();
+     const updatedPressed = !isPressed;
+     if (pressed === undefined) {
+       setUncontrolledPressed(updatedPressed);
+     }
+     onChange(updatedPressed);
+   }
+
+  return <span className={className} onClick={handlePressed} {...props}>{children}</span>
+
+};
+
+export default TogglePrimitiveRoot;
diff --git a/src/core/primitives/Toggle/index.tsx b/src/core/primitives/Toggle/index.tsx
@@ -0,0 +1,7 @@
+import TogglePrimitiveRoot from "./fragments/TogglePrimitiveRoot"
+
+const TogglePrimitive = {
+    Root: TogglePrimitiveRoot,
+}
+
+export default TogglePrimitive
diff --git a/src/core/primitives/Toggle/stories/TogglePrimitive.stories.tsx b/src/core/primitives/Toggle/stories/TogglePrimitive.stories.tsx
@@ -0,0 +1,19 @@
+import React 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>
+}
+
+export const All = {
+    args: {
+      className: ''
+    }
+}