feat: migrate radio to base ui

apps/www/src/components/typetable/typetable.module.css

@@ -99,3 +99,8 @@
   flex-wrap: wrap;
   gap: var(--rs-space-1);
 }
+.required {
+  color: var(--rs-color-foreground-danger-primary);
+  position: relative;
+  top: -4px;
+}

apps/www/src/components/typetable/typetable.tsx

@@ -45,7 +45,10 @@ export interface TypeNode {
 export function TypeTable({
   type,
   className
-}: { type: Record<string, TypeNode>; className?: string }) {
+}: {
+  type: Record<string, TypeNode>;
+  className?: string;
+}) {
   const entries = Object.entries(type);
 
   return (
@@ -87,7 +90,7 @@ function Item({
           className={deprecated ? styles.propNameDeprecated : styles.propName}
         >
           {name}
-          {!required && '?'}
+          {required ? <span className={styles.required}>*</span> : ''}
         </code>
         <span className={styles.fieldValue}>
           {typeDescriptionLink ? (
@@ -130,7 +133,10 @@ function Item({
                 language='tsx'
                 className={cx(styles.fieldCode, styles.fieldValue)}
               >
-                {String(typeDescription ?? type)}
+                {String(type) +
+                  (!required && !String(type).includes('undefined')
+                    ? ' | undefined'
+                    : '')}
               </CodeBlock.Code>
             </CodeBlock>
           </Flex>

apps/www/src/content/docs/components/radio/demo.ts

@@ -3,22 +3,22 @@
 export const preview = {
   type: 'code',
   code: `
-  <Radio defaultValue="2">
-    <Flex direction="column" gap="small">
+  <Radio.Group defaultValue="2">
+  <Flex direction="column" gap="small">
       <Flex gap="small" align="center">
-        <Radio.Item value="1" id="P1" />
-        <label htmlFor="P1">Option One</label>
-      </Flex>
-      <Flex gap="small" align="center">
-        <Radio.Item value="2" id="P2" />
-        <label htmlFor="P2">Option Two</label>
-      </Flex>
-      <Flex gap="small" align="center">
-        <Radio.Item value="3" id="P3" disabled/>
-        <label htmlFor="P3">Option Three</label>
+          <Radio value="1" id="P1" />
+          <label htmlFor="P1">Option One</label>
+        </Flex>
+        <Flex gap="small" align="center">
+          <Radio value="2" id="P2" />
+          <label htmlFor="P2">Option Two</label>
+        </Flex>
+        <Flex gap="small" align="center">
+          <Radio value="3" id="P3" disabled/>
+          <label htmlFor="P3">Option Three</label>
       </Flex>
     </Flex>
-  </Radio>`
+  </Radio.Group>`
 };
 
 export const stateDemo = {
@@ -27,45 +27,43 @@ export const stateDemo = {
     {
       name: 'Default',
       code: `
-<Radio defaultValue="1">
+<Radio.Group defaultValue="1">
   <Flex gap="small" align="center">
-    <Radio.Item value="1" id="d1" />
+    <Radio value="1" id="d1" />
     <label htmlFor="d1">Default Option</label>
   </Flex>
-</Radio>`
+</Radio.Group>`
     },
     {
       name: 'Disabled',
       code: `
-<Radio defaultValue="1">
+<Radio.Group defaultValue="1">
   <Flex gap="small" align="center">
-    <Radio.Item value="1" disabled id="dis1" />
+    <Radio value="1" disabled id="dis1" />
     <label htmlFor="dis1">Disabled Option</label>
   </Flex>
-</Radio>`
+</Radio.Group>`
     }
   ]
 };
 
 export const labelDemo = {
   type: 'code',
   code: `
-  <Radio defaultValue="1">
-    <Flex direction="column" gap="small">
+  <Radio.Group defaultValue="1">
       <Flex gap="small" align="center">
-        <Radio.Item value="1" id="L1" />
+        <Radio value="1" id="L1" />
         <label htmlFor="L1">Option One</label>
       </Flex>
       <Flex gap="small" align="center">
-        <Radio.Item value="2" id="L2" />
+        <Radio value="2" id="L2" />
         <label htmlFor="L2">Option Two</label>
       </Flex>
       <Flex gap="small" align="center">
-        <Radio.Item value="3" id="L3" />
+        <Radio value="3" id="L3" />
         <label htmlFor="L3">Option Three</label>
       </Flex>
-    </Flex>
-  </Radio>`
+  </Radio.Group>`
 };
 
 export const formDemo = {
@@ -77,18 +75,18 @@ export const formDemo = {
   alert(JSON.stringify(Object.fromEntries(formData)));
 }}>
   <Flex direction="column" gap="medium">
-    <Radio name="plan" defaultValue="monthly" required>
+    <Radio.Group name="plan" defaultValue="monthly">
       <Flex direction="column" gap="small">
         <Flex gap="small" align="center">
-          <Radio.Item value="monthly" id="mp" />
+          <Radio value="monthly" id="mp" />
           <label htmlFor="mp">Monthly Plan</label>
         </Flex>
         <Flex gap="small" align="center">
-          <Radio.Item value="yearly" id="yp" />
+          <Radio value="yearly" id="yp" />
           <label htmlFor="yp">Yearly Plan</label>
         </Flex>
       </Flex>
-    </Radio>
+    </Radio.Group>
     <Button type="submit" width="100%">Submit</Button>
   </Flex>
 </form>`

apps/www/src/content/docs/components/radio/index.mdx

@@ -16,13 +16,14 @@ import { Radio } from "@raystack/apsara";
 
 ## Radio Props
 
-### Radio Props
+### Radio.Group Props
+
+<auto-type-table path="./props.ts" name="RadioGroupProps" />
 
-<auto-type-table path="./props.ts" name="RadioRootProps" />
+### Radio Props
 
-### Radio.Item Props
+<auto-type-table path="./props.ts" name="RadioProps" />
 
-<auto-type-table path="./props.ts" name="RadioItemProps" />
 
 ## Examples
 

apps/www/src/content/docs/components/radio/props.ts

@@ -1,42 +1,56 @@
-export interface RadioRootProps {
+export interface RadioGroupProps {
   /** The value of the radio item that should be checked by default. */
-  defaultValue?: string;
+  defaultValue?: any;
 
   /** The controlled value of the radio item that is checked. */
-  value?: string;
+  value?: any;
 
   /** Event handler called when the value changes. */
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: any, event: Event) => void;
 
   /** When true, prevents user interaction with the radio group. */
   disabled?: boolean;
 
   /** The name of the radio group when submitted as a form field. */
   name?: string;
 
-  /** When true, indicates that a value must be selected before the form can be submitted. */
-  required?: boolean;
-
-  /** The orientation of the radio group. */
-  orientation?: 'horizontal' | 'vertical';
-
-  /** The reading direction of the radio group. */
-  dir?: 'ltr' | 'rtl';
-
-  /** A label for the radio group that is announced by screen readers. */
-  ariaLabel?: string;
+  /** Additional CSS class name. */
+  className?: string;
+
+  /**
+   * Allows you to replace the component's HTML element with a different tag, or compose it with another component.
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?:
+    | React.ReactElement
+    | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement);
 }
 
-export interface RadioItemProps {
+export interface RadioProps {
   /** The unique value of the radio item. */
-  value: string;
+  value: any;
 
   /** When true, prevents user interaction with this radio item. */
   disabled?: boolean;
 
-  /** When true, indicates that this radio item must be checked. */
-  required?: boolean;
-
   /** The unique identifier for the radio item. */
   id?: string;
+
+  /** Additional CSS class name. */
+  className?: string;
+
+  /**
+   * Allows you to replace the component's HTML element with a different tag, or compose it with another component.
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?:
+    | React.ReactElement
+    | ((
+        props: React.HTMLAttributes<HTMLElement>,
+        state: { checked: boolean }
+      ) => React.ReactElement);
 }