@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/inputs/RadioList.md

@@ -42,16 +42,23 @@ function MyComponent() {
 A simple radio list with three options and a default selection.
 
 ```tsx
-<RadioList items={[{
-  label: 'Small',
-  value: 'sm'
-}, {
-  label: 'Medium',
-  value: 'md'
-}, {
-  label: 'Large',
-  value: 'lg'
-}]} defaultValue="md" />
+<RadioList
+    items={[
+      {
+        label: "Small",
+        value: "sm"
+      },
+      {
+        label: "Medium",
+        value: "md"
+      },
+      {
+        label: "Large",
+        value: "lg"
+      }
+    ]}
+    defaultValue="md"
+  />
 ```
 
 ## Controlled
@@ -60,21 +67,19 @@ Use `value` and `onChange` for controlled state management.
 
 ```tsx
 <Stack gap={2}>
-  <Typography level="body-sm">Selected: {value}</Typography>
-  <RadioList items={defaultItems} value={value} onChange={e => setValue((e.target as HTMLInputElement).value)} />
-</Stack>
+    <Typography level="body-sm">Selected: {value}</Typography>
+    <RadioList
+      items={defaultItems}
+      value={value}
+      onChange={(e) => setValue((e.target as HTMLInputElement).value)}
+    />
+  </Stack>
 ```
 
 ```tsx
 function ControlledExample() {
   const [value, setValue] = React.useState('option1');
-  return (
-    <RadioList
-      items={items}
-      value={value}
-      onChange={(e) => setValue((e.target as HTMLInputElement).value)}
-    />
-  );
+  return <RadioList items={items} value={value} onChange={(e) => setValue((e.target as HTMLInputElement).value)} />;
 }
 ```
 
@@ -103,38 +108,49 @@ Set `orientation="horizontal"` to display options in a row.
 ```
 
 ```tsx
-<RadioList
-  items={items}
-  defaultValue="option1"
-  orientation="horizontal"
-/>
+<RadioList items={items} defaultValue="option1" orientation="horizontal" />
 ```
 
 ## Sizes
 
-RadioList supports `sm`, `md` (default), and `lg` sizes. The size is applied to all radio buttons in the group.
+RadioList supports `sm` (default), `md`, and `lg` sizes. The size is applied to all radio buttons in the group.
 
 ```tsx
 <Stack gap={3}>
-  <Box>
-    <Typography level="body-sm" sx={{
-      mb: 1
-    }}>Small</Typography>
-    <RadioList items={defaultItems} defaultValue="option1" size="sm" />
-  </Box>
-  <Box>
-    <Typography level="body-sm" sx={{
-      mb: 1
-    }}>Medium</Typography>
-    <RadioList items={defaultItems} defaultValue="option1" size="md" />
-  </Box>
-  <Box>
-    <Typography level="body-sm" sx={{
-      mb: 1
-    }}>Large</Typography>
-    <RadioList items={defaultItems} defaultValue="option1" size="lg" />
-  </Box>
-</Stack>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Small
+      </Typography>
+      <RadioList items={defaultItems} defaultValue="option1" size="sm" />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Medium
+      </Typography>
+      <RadioList items={defaultItems} defaultValue="option1" size="md" />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Large
+      </Typography>
+      <RadioList items={defaultItems} defaultValue="option1" size="lg" />
+    </Box>
+  </Stack>
 ```
 
 ## Colors
@@ -143,12 +159,12 @@ Five semantic colors are available via the `color` prop.
 
 ```tsx
 <Stack gap={3}>
-  <RadioList items={defaultItems} defaultValue="option1" color="primary" />
-  <RadioList items={defaultItems} defaultValue="option1" color="neutral" />
-  <RadioList items={defaultItems} defaultValue="option1" color="danger" />
-  <RadioList items={defaultItems} defaultValue="option1" color="success" />
-  <RadioList items={defaultItems} defaultValue="option1" color="warning" />
-</Stack>
+    <RadioList items={defaultItems} defaultValue="option1" color="primary" />
+    <RadioList items={defaultItems} defaultValue="option1" color="neutral" />
+    <RadioList items={defaultItems} defaultValue="option1" color="danger" />
+    <RadioList items={defaultItems} defaultValue="option1" color="success" />
+    <RadioList items={defaultItems} defaultValue="option1" color="warning" />
+  </Stack>
 ```
 
 ## Settings Selection
@@ -244,7 +260,7 @@ function RoleSelector({ roles }: { roles: { id: string; name: string }[] }) {
 | `name`         | `string`                                                       | -            | Groups radios together for form submission |
 | `disabled`     | `boolean`                                                      | `false`      | Disables all radio buttons                 |
 | `orientation`  | `'horizontal' \| 'vertical'`                                   | `'vertical'` | Layout orientation                         |
-| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Radio button size                          |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`       | Radio button size                          |
 | `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'`  | Color scheme                               |
 | `sx`           | `SxProps`                                                      | -            | Custom styles using the MUI system         |