Add RovingFocusGroup Utility with Root, Group, Item

Author: kotAPI

src/core/utils/RovingFocusGroup/fragments/RovingFocusGroup.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Primitive from '~/core/primitives/Primitive';
+
+const RovingFocusGroup = ({ children, ...props }: { children: React.ReactNode }) => {
+    return <Primitive.div {...props}>
+        {children}
+    </Primitive.div>;
+};
+
+export default RovingFocusGroup;

src/core/utils/RovingFocusGroup/fragments/RovingFocusItem.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Primitive from '~/core/primitives/Primitive';
+
+const RovingFocusItem = ({ children, ...props }: { children: React.ReactNode }) => {
+    return <Primitive.span {...props}>
+        {children}
+    </Primitive.span>;
+};
+
+export default RovingFocusItem;

src/core/utils/RovingFocusGroup/fragments/RovingFocusRoot.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
-const RovingFocusRoot = ({ children }: { children: React.ReactNode }) => {
-    return <div>RovingFocusRoot</div>;
+import Primitive from '~/core/primitives/Primitive';
+
+const RovingFocusRoot = ({ children, ...props }: { children: React.ReactNodex }) => {
+    return <Primitive.div {...props}>
+        {children}
+    </Primitive.div>;
 };
 
 export default RovingFocusRoot;

src/core/utils/RovingFocusGroup/index.tsx

@@ -1,7 +1,11 @@
 import RovingFocusRoot from './fragments/RovingFocusRoot';
+import RovingFocusGroup from './fragments/RovingFocusGroup';
+import RovingFocusItem from './fragments/RovingFocusItem';
 
-const RovingFocusGroup = {
-    Root: RovingFocusRoot
+const RovingFocusGroupUtility = {
+    Root: RovingFocusRoot,
+    Group: RovingFocusGroup,
+    Item: RovingFocusItem
 };
 
-export default RovingFocusGroup;
+export default RovingFocusGroupUtility;

src/core/utils/RovingFocusGroup/stories/RovingFocusGroup.stories.tsx

@@ -9,8 +9,26 @@ export default {
     component: RovingFocusGroup,
     render: () => <>
         <SandboxEditor className="space-y-2">
-            <RovingFocusGroup.Root>
-                <div>RovingFocusGroup</div>
+            <RovingFocusGroup.Root className="flex items-center gap-2">
+                <RovingFocusGroup.Group className="flex gap-2 border border-green-500 p-2">
+                    <RovingFocusGroup.Item>
+                        <button>Button 1 Group 1</button>
+                    </RovingFocusGroup.Item>
+                    <RovingFocusGroup.Item>
+                        <button>Button 2 Group 1</button>
+                    </RovingFocusGroup.Item>
+                    <RovingFocusGroup.Item>
+                        <button>Button 3 Group 1</button>
+                    </RovingFocusGroup.Item>
+                </RovingFocusGroup.Group>
+                <RovingFocusGroup.Group className="flex gap-2 border border-red-500 p-2">
+                    <RovingFocusGroup.Item>
+                        <button>Button 1 Group 2</button>
+                    </RovingFocusGroup.Item>
+                    <RovingFocusGroup.Item>
+                        <button>Button 2 Group 2</button>
+                    </RovingFocusGroup.Item>
+                </RovingFocusGroup.Group>
             </RovingFocusGroup.Root>
         </SandboxEditor>
     </>