refactor: radio group to use ark

packages/react/__stories__/radio-group.stories.tsx

@@ -19,18 +19,30 @@ export default {
   decorators: [(story: Function) => <Box padding="40px">{story()}</Box>],
 }
 
-const DemoRadio = (props: RadioGroup.ItemProps) => {
+const RadioItem = (props: RadioGroup.ItemProps) => {
   const { children, ...rest } = props
   return (
     <RadioGroup.Item {...rest}>
-      <RadioGroup.ItemControl />
+      <RadioGroup.ItemHiddenInput />
+      <RadioGroup.ItemIndicator />
       <RadioGroup.ItemText>{children}</RadioGroup.ItemText>
     </RadioGroup.Item>
   )
 }
 
+export const Basic = () => {
+  return (
+    <RadioGroup.Root defaultValue="1" colorPalette="red">
+      <HStack gap="4">
+        <RadioItem value="1">Radio One</RadioItem>
+        <RadioItem value="2">Radio Two</RadioItem>
+      </HStack>
+    </RadioGroup.Root>
+  )
+}
+
 export const Variants = () => {
-  const recipe = useSlotRecipe("Radio")
+  const recipe = useSlotRecipe("RadioGroup")
   return (
     <PlaygroundTable>
       <thead>
@@ -51,14 +63,15 @@ export const Variants = () => {
               <For each={recipe.variantMap.variant}>
                 {(v) => (
                   <td>
-                    <RadioGroup.Root defaultValue="1" minWidth="200px">
+                    <RadioGroup.Root
+                      defaultValue="1"
+                      colorPalette={c}
+                      variant={v}
+                      minWidth="200px"
+                    >
                       <HStack gap="4">
-                        <DemoRadio colorPalette={c} variant={v} value="1">
-                          Radio
-                        </DemoRadio>
-                        <DemoRadio colorPalette={c} variant={v} value="2">
-                          Radio
-                        </DemoRadio>
+                        <RadioItem value="1">Radio</RadioItem>
+                        <RadioItem value="2">Radio</RadioItem>
                       </HStack>
                     </RadioGroup.Root>
                   </td>
@@ -73,7 +86,7 @@ export const Variants = () => {
 }
 
 export const Sizes = () => {
-  const recipe = useSlotRecipe("Radio")
+  const recipe = useSlotRecipe("RadioGroup")
   return (
     <PlaygroundTable>
       <thead>
@@ -94,14 +107,15 @@ export const Sizes = () => {
               <For each={recipe.variantMap.size}>
                 {(v) => (
                   <td>
-                    <RadioGroup.Root defaultValue="1" minWidth="200px">
+                    <RadioGroup.Root
+                      colorPalette={c}
+                      size={v}
+                      defaultValue="1"
+                      minWidth="200px"
+                    >
                       <HStack gap="4">
-                        <DemoRadio colorPalette={c} size={v} value="1">
-                          Radio
-                        </DemoRadio>
-                        <DemoRadio colorPalette={c} size={v} value="2">
-                          Radio
-                        </DemoRadio>
+                        <RadioItem value="1">Radio</RadioItem>
+                        <RadioItem value="2">Radio</RadioItem>
                       </HStack>
                     </RadioGroup.Root>
                   </td>
@@ -127,9 +141,9 @@ export const WithForm = () => {
         <Label>What's your favorite Anime?</Label>
         <RadioGroup.Root defaultValue="1">
           <Stack gap="2">
-            <DemoRadio value="1">Naruto</DemoRadio>
-            <DemoRadio value="2">Dragon Ball</DemoRadio>
-            <DemoRadio value="3">One Piece</DemoRadio>
+            <RadioItem value="1">Naruto</RadioItem>
+            <RadioItem value="2">Dragon Ball</RadioItem>
+            <RadioItem value="3">One Piece</RadioItem>
           </Stack>
         </RadioGroup.Root>
       </Field>

packages/react/__stories__/radiomark.stories.tsx

@@ -0,0 +1,23 @@
+import { Radiomark, Stack, chakra } from "../src"
+
+export default {
+  title: "Components / Radiomark",
+  decorators: [
+    (story: Function) => (
+      <chakra.div maxW="500px" mt="40px" mx="auto">
+        {story()}
+      </chakra.div>
+    ),
+  ],
+}
+
+export const Demo = () => {
+  return (
+    <Stack colorPalette="gray">
+      <Radiomark />
+      <Radiomark checked />
+      <Radiomark disabled />
+      <Radiomark checked disabled />
+    </Stack>
+  )
+}

packages/react/src/components/index.ts

@@ -47,6 +47,7 @@ export * from "./portal"
 export * from "./progress"
 export * from "./progress-circular"
 export * from "./radio-group"
+export * from "./radiomark"
 export * from "./segment-group"
 export * from "./select"
 export * from "./separator"

packages/react/src/components/radio-group/index.ts

@@ -1,24 +1,26 @@
-export { RadioGroupItem } from "./radio-group-item"
-export type { RadioGroupItemProps } from "./radio-group-item"
-
-export { useRadio } from "./use-radio"
-export type { UseRadioProps, UseRadioReturn } from "./use-radio"
-
-export { useRadioGroup } from "./use-radio-group"
-export type { UseRadioGroupProps, UseRadioGroupReturn } from "./use-radio-group"
-
-export { RadioGroupRoot } from "./radio-group-root"
-export type { RadioGroupRootProps } from "./radio-group-root"
-
-export { useRadioGroupContext } from "./radio-group-context"
-
-export { RadioGroupItemControl } from "./radio-group-item-control"
-export type { RadioGroupItemControlProps } from "./radio-group-item-control"
-
-export { RadioGroupItemText } from "./radio-group-item-text"
-export type { RadioGroupItemTextProps } from "./radio-group-item-text"
-
-export { RadioGroupItemIndicator } from "./radio-group-item-indicator"
-export type { RadioGroupItemIndicatorProps } from "./radio-group-item-indicator"
+export {
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemText,
+  RadioGroupLabel,
+  RadioGroupRoot,
+  RadioGroupItemIndicator,
+} from "./radio-group"
+
+export type {
+  RadioGroupItemControlProps,
+  RadioGroupItemProps,
+  RadioGroupItemTextProps,
+  RadioGroupLabelProps,
+  RadioGroupRootProps,
+} from "./radio-group"
+
+export {
+  RadioGroupItemHiddenInput,
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "@ark-ui/react/radio-group"
+
+export type { RadioGroupValueChangeDetails } from "@ark-ui/react/radio-group"
 
 export * as RadioGroup from "./namespace"

packages/react/src/components/radio-group/namespace.ts

@@ -1,14 +1,23 @@
-export { RadioGroupItem as Item } from "./radio-group-item"
-export type { RadioGroupItemProps as ItemProps } from "./radio-group-item"
+export {
+  RadioGroupItem as Item,
+  RadioGroupItemControl as ItemControl,
+  RadioGroupItemText as ItemText,
+  RadioGroupLabel as Label,
+  RadioGroupRoot as Root,
+  RadioGroupItemIndicator as ItemIndicator,
+} from "./radio-group"
 
-export { RadioGroupRoot as Root } from "./radio-group-root"
-export type { RadioGroupRootProps as RootProps } from "./radio-group-root"
+export type {
+  RadioGroupItemControlProps as ItemControlProps,
+  RadioGroupItemProps as ItemProps,
+  RadioGroupItemTextProps as ItemTextProps,
+  RadioGroupLabelProps as LabelProps,
+  RadioGroupRootProps as RootProps,
+} from "./radio-group"
 
-export { RadioGroupItemControl as ItemControl } from "./radio-group-item-control"
-export type { RadioGroupItemControlProps } from "./radio-group-item-control"
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+} from "@ark-ui/react/radio-group"
 
-export { RadioGroupItemText as ItemText } from "./radio-group-item-text"
-export type { RadioGroupItemTextProps as ItemTextProps } from "./radio-group-item-text"
-
-export { RadioGroupItemIndicator as ItemIndicator } from "./radio-group-item-indicator"
-export type { RadioGroupItemIndicatorProps as ItemIndicatorProps } from "./radio-group-item-indicator"
+export type { RadioGroupValueChangeDetails as ValueChangeDetails } from "@ark-ui/react/radio-group"