Fix Radio Card docs order and headings (#267)

Author: pedromenezes1

.changeset/fix-radio-sub-components.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix Radio compound component to use Object.assign pattern, enabling sub-component detection (Radio.Group, Radio.Item) in the component registry.

packages/kumo-docs-astro/src/pages/components/radio.mdx

@@ -127,46 +127,6 @@ defaultValue="standard"
       <RadioDescriptionDemo client:visible />
     </ComponentExample>
 
-    <Heading level={3}>With Error</Heading>
-    <p>
-      Show validation errors at the group level using the <code
-        class="rounded bg-kumo-control px-1 py-0.5 text-sm">error</code> prop.
-    </p>
-    <ComponentExample
-      code={`<Radio.Group
-
-legend="Payment method"
-error="Please select a payment method to continue"
-
->
-
-  <Radio.Item label="Credit Card" value="card" variant="error" />
-  <Radio.Item label="PayPal" value="paypal" variant="error" />
-  <Radio.Item label="Bank Transfer" value="bank" variant="error" />
-</Radio.Group>`}
-    >
-      <RadioErrorDemo client:visible />
-    </ComponentExample>
-
-    <Heading level={3}>Disabled</Heading>
-    <p>
-      Disable the entire group or individual items.
-    </p>
-    <ComponentExample
-      code={`<Radio.Group legend="Disabled group" disabled defaultValue="a">
-
-  <Radio.Item label="Option A" value="a" />
-  <Radio.Item label="Option B" value="b" />
-</Radio.Group>
-
-<Radio.Group legend="Individual disabled" defaultValue="available">
-  <Radio.Item label="Available" value="available" />
-  <Radio.Item label="Unavailable" value="unavailable" disabled />
-</Radio.Group>`}
-    >
-      <RadioDisabledDemo client:visible />
-    </ComponentExample>
-
     <Heading level={3}>Control Position</Heading>
     <p>
       Use `controlPosition="end"` to place labels before radio buttons.
@@ -181,9 +141,9 @@ error="Please select a payment method to continue"
       <RadioControlPositionDemo client:visible />
     </ComponentExample>
 
-    <Heading level={3}>Card Appearance</Heading>
+    <Heading level={3}>Radio Card</Heading>
     <p>
-      Use `appearance="card"` for a more prominent card-style layout with descriptions.
+      Use <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">appearance="card"</code> on the group to display each option as a selectable card. Combine with the <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">description</code> prop on each item for richer content.
     </p>
     <ComponentExample
       code={`<Radio.Group legend="Choose a plan" appearance="card" defaultValue="free">
@@ -213,9 +173,9 @@ error="Please select a payment method to continue"
       <RadioCardDemo client:visible />
     </ComponentExample>
 
-    <Heading level={3}>Card Appearance (Horizontal)</Heading>
+    <Heading level={3}>Radio Card (Horizontal)</Heading>
     <p>
-      Combine `appearance="card"` with `orientation="horizontal"` for a horizontal card layout.
+      Combine <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">appearance="card"</code> with <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">orientation="horizontal"</code> for a side-by-side card layout.
     </p>
     <ComponentExample
       code={`<Radio.Group
@@ -251,6 +211,46 @@ defaultValue="free"
     >
       <RadioCardHorizontalDemo client:visible />
     </ComponentExample>
+
+    <Heading level={3}>With Error</Heading>
+    <p>
+      Show validation errors at the group level using the <code
+        class="rounded bg-kumo-control px-1 py-0.5 text-sm">error</code> prop.
+    </p>
+    <ComponentExample
+      code={`<Radio.Group
+
+legend="Payment method"
+error="Please select a payment method to continue"
+
+>
+
+  <Radio.Item label="Credit Card" value="card" variant="error" />
+  <Radio.Item label="PayPal" value="paypal" variant="error" />
+  <Radio.Item label="Bank Transfer" value="bank" variant="error" />
+</Radio.Group>`}
+    >
+      <RadioErrorDemo client:visible />
+    </ComponentExample>
+
+    <Heading level={3}>Disabled</Heading>
+    <p>
+      Disable the entire group or individual items.
+    </p>
+    <ComponentExample
+      code={`<Radio.Group legend="Disabled group" disabled defaultValue="a">
+
+  <Radio.Item label="Option A" value="a" />
+  <Radio.Item label="Option B" value="b" />
+</Radio.Group>
+
+<Radio.Group legend="Individual disabled" defaultValue="available">
+  <Radio.Item label="Available" value="available" />
+  <Radio.Item label="Unavailable" value="unavailable" disabled />
+</Radio.Group>`}
+    >
+      <RadioDisabledDemo client:visible />
+    </ComponentExample>
   </ComponentSection>
 
 {/* API Reference */}

packages/kumo/ai/component-registry.json

@@ -1938,13 +1938,7 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n    />",
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: \"1\",\n  name: \"John Doe\",\n  email: \"john@example.com\"\n};`}\n    />",
-        "<CodeBlock\n      lang=\"bash\"\n      code={`npm install @cloudflare/kumo\npnpm add @cloudflare/kumo`}\n    />",
-        "<CodeBlock\n      lang=\"jsonc\"\n      code={`{\n  \"name\": \"kumo\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"react\": \"^19.0.0\"\n  }\n}`}\n    />",
-        "<Code\n      lang=\"bash\"\n      code=\"export API_KEY={{apiKey}}\"\n      values={{\n        apiKey: { value: \"sk_live_123\", highlight: true },\n      }}\n    />"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "border-kumo-fill",
@@ -3354,7 +3348,8 @@
       "examples": [
         "<Loader />",
         "<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>",
-        "<Loader size={24} />"
+        "<Loader size={24} />",
+        "<Loader className=\"text-kumo-subtle\" />"
       ],
       "colors": []
     },
@@ -3387,9 +3382,9 @@
         }
       },
       "examples": [
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />"
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3461,7 +3456,7 @@
         "<Meter label=\"Progress\" value={40} showValue={false} />",
         "<Meter label=\"Quota reached\" value={100} />",
         "<Meter label=\"Memory usage\" value={15} />",
-        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-green-500 via-green-500 to-green-500\"\n    />"
+        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-kumo-success via-kumo-success to-kumo-success\"\n    />"
       ],
       "colors": [
         "bg-kumo-fill",
@@ -3805,7 +3800,72 @@
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
-      ]
+      ],
+      "subComponents": {
+        "Item": {
+          "name": "Item",
+          "description": "Item sub-component",
+          "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {
+            "legend": {
+              "type": "string",
+              "required": true
+            },
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "orientation": {
+              "type": "\"vertical\" | \"horizontal\"",
+              "optional": true
+            },
+            "appearance": {
+              "type": "KumoRadioAppearance",
+              "optional": true
+            },
+            "error": {
+              "type": "string",
+              "optional": true
+            },
+            "description": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "value": {
+              "type": "string",
+              "optional": true
+            },
+            "disabled": {
+              "type": "boolean",
+              "optional": true
+            },
+            "label": {
+              "type": "\"start\" (default) puts radio before label",
+              "required": true
+            },
+            "Note": {
+              "type": "In card appearance",
+              "required": true
+            },
+            "controlPosition": {
+              "type": "RadioControlPosition",
+              "optional": true
+            },
+            "name": {
+              "type": "string",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        }
+      }
     },
     "Select": {
       "name": "Select",
@@ -4084,6 +4144,7 @@
         "bg-kumo-brand",
         "bg-kumo-control",
         "outline-kumo-ring",
+        "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -4240,7 +4301,8 @@
         "<Switch label=\"Disabled\" checked={false} disabled />",
         "<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>",
-        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Default variant\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral variant\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
+        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Default variant\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral variant\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -5138,4 +5200,4 @@
       ]
     }
   }
-}
+}