bestax-mcp 0.0.0

package/data/components/Radios.json

@@ -0,0 +1,240 @@
+{
+  "name": "Radios",
+  "kind": "component",
+  "category": "form",
+  "slug": "form/radios",
+  "docsUrl": "https://bestax.io/docs/api/form/radios",
+  "examples": [
+    {
+      "title": "Grouped Radios (All Disabled Example)",
+      "code": "<Radios>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Attend{' '}\n  </Radio>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Decline{' '}\n  </Radio>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Tentative{' '}\n  </Radio>\n</Radios>"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "<Radios label=\"RSVP\">\n  <Radio name=\"rsvp\"> Attend </Radio>\n  <Radio name=\"rsvp\"> Decline </Radio>\n  <Radio name=\"rsvp\"> Tentative </Radio>\n</Radios>"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"RSVP\">\n      <Field.Body>\n        <Field>\n          <Radios>\n            <Radio name=\"rsvp2\"> Attend </Radio>\n            <Radio name=\"rsvp2\"> Decline </Radio>\n            <Radio name=\"rsvp2\"> Tentative </Radio>\n          </Radios>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"RSVP\">\n      <Field.Body>\n        <Field>\n          <Control>\n            <Radios>\n              <Radio name=\"rsvp3\"> Attend </Radio>\n              <Radio name=\"rsvp3\"> Decline </Radio>\n              <Radio name=\"rsvp3\"> Tentative </Radio>\n            </Radios>\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Radios name=\"color\" label=\"Favorite color\">\n  <Radios.Radio value=\"red\">Red</Radios.Radio>\n  <Radios.Radio value=\"green\">Green</Radios.Radio>\n</Radios>"
+    }
+  ],
+  "accessibility": "- The group is rendered as a `<div class=\"radios\" role=\"radiogroup\">` containing labeled radio buttons.\n- The `label` prop names the whole group: the rendered `<label>` gets an id (yours via `labelProps.id`, or a generated one) and the group points at it with `aria-labelledby`.\n- Each child should be a `Radio` for proper labeling and accessibility.\n- Use the same `name` for all radios in a group to ensure mutual exclusivity.",
+  "related": ["Field", "Radio"],
+  "storybook": "https://bestax.io/storybook/?path=/story/form-radio--listofradios",
+  "summary": "The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.",
+  "import": "import { Radios, Radio } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/form/Radios.tsx",
+  "rootClass": "radios",
+  "parts": [
+    {
+      "path": "Radios",
+      "summary": "The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.",
+      "component": null,
+      "props": [
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labelProps",
+          "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
+          "default": null,
+          "description": "Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "Form field name shared by every Radio in the group (via context).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "default": null,
+          "description": "Currently-selected value (controlled mode).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "default": null,
+          "description": "Initial selected value (uncontrolled mode).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "default": null,
+          "description": "Fires when the selection changes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Radio elements to render in the group.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labelSize",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size for the label (used in horizontal layouts).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "horizontal",
+          "type": "boolean",
+          "default": "false",
+          "description": "Horizontal field layout.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "message",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Help/validation message below the input.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "messageColor",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Bulma color for the message.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the Field wrapper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "Radios.Radio",
+      "summary": "The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.",
+      "component": "Radio",
+      "props": [
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Color of the radio button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the radio button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the radio is disabled.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The label/content for the radio.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLInputElement>",
+          "default": null,
+          "description": "Forwarded to the underlying element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <input> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": []
+}