@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/RadioButton.md

@@ -36,11 +36,7 @@ function MyComponent() {
   const [selectedValue, setSelectedValue] = useState('option1');
 
   return (
-    <RadioGroup
-      name="example"
-      value={selectedValue}
-      onChange={(e) => setSelectedValue(e.target.value)}
-    >
+    <RadioGroup name="example" value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
       <Radio value="option1" label="Option 1" />
       <Radio value="option2" label="Option 2" />
       <Radio value="option3" label="Option 3" />
@@ -55,14 +51,14 @@ Radio supports four visual variants: `outlined` (default), `soft`, `solid`, and
 
 ```tsx
 <FormControl>
-  <FormLabel>Variants</FormLabel>
-  <RadioGroup defaultValue="outlined" name="radio-buttons-group">
-    <Radio value="outlined" label="Outlined" variant="outlined" />
-    <Radio value="soft" label="Soft" variant="soft" />
-    <Radio value="solid" label="Solid" variant="solid" />
-    <Radio value="plain" label="Plain" variant="plain" />
-  </RadioGroup>
-</FormControl>
+    <FormLabel>Variants</FormLabel>
+    <RadioGroup defaultValue="outlined" name="radio-buttons-group">
+      <Radio value="outlined" label="Outlined" variant="outlined" />
+      <Radio value="soft" label="Soft" variant="soft" />
+      <Radio value="solid" label="Solid" variant="solid" />
+      <Radio value="plain" label="Plain" variant="plain" />
+    </RadioGroup>
+  </FormControl>
 ```
 
 ## Sizes
@@ -71,13 +67,13 @@ Three size presets are available: `sm`, `md` (default), and `lg`. Use smaller si
 
 ```tsx
 <FormControl>
-  <FormLabel>Sizes</FormLabel>
-  <RadioGroup defaultValue="medium" name="radio-buttons-group">
-    <Radio value="small" label="Small" size="sm" />
-    <Radio value="medium" label="Medium" size="md" />
-    <Radio value="large" label="Large" size="lg" />
-  </RadioGroup>
-</FormControl>
+    <FormLabel>Sizes</FormLabel>
+    <RadioGroup defaultValue="medium" name="radio-buttons-group">
+      <Radio value="small" label="Small" size="sm" />
+      <Radio value="medium" label="Medium" size="md" />
+      <Radio value="large" label="Large" size="lg" />
+    </RadioGroup>
+  </FormControl>
 ```
 
 ## Colors
@@ -86,15 +82,15 @@ Radio supports five semantic colors: `primary`, `neutral`, `danger`, `success`,
 
 ```tsx
 <FormControl>
-  <FormLabel>Colors</FormLabel>
-  <RadioGroup defaultValue="medium" name="radio-buttons-group">
-    <Radio value="primary" label="Primary" color="primary" />
-    <Radio value="neutral" label="Neutral" color="neutral" />
-    <Radio value="danger" label="Danger" color="danger" />
-    <Radio value="success" label="Success" color="success" />
-    <Radio value="warning" label="Warning" color="warning" />
-  </RadioGroup>
-</FormControl>
+    <FormLabel>Colors</FormLabel>
+    <RadioGroup defaultValue="medium" name="radio-buttons-group">
+      <Radio value="primary" label="Primary" color="primary" />
+      <Radio value="neutral" label="Neutral" color="neutral" />
+      <Radio value="danger" label="Danger" color="danger" />
+      <Radio value="success" label="Success" color="success" />
+      <Radio value="warning" label="Warning" color="warning" />
+    </RadioGroup>
+  </FormControl>
 ```
 
 ## Custom Icons
@@ -102,43 +98,55 @@ Radio supports five semantic colors: `primary`, `neutral`, `danger`, `success`,
 Replace the default radio indicator with custom icons using the `checkedIcon` prop. This is useful for card-style selectors where the selection state needs a distinctive visual treatment.
 
 ```tsx
-<RadioGroup aria-label="platform" defaultValue="Website" overlay name="platform" sx={{
-  flexDirection: 'row',
-  gap: 2,
-  [`& .${radioClasses.checked}`]: {
-    [`& .${radioClasses.action}`]: {
-      inset: -1,
-      border: '3px solid',
-      borderColor: 'primary.500'
-    }
-  },
-  [`& .${radioClasses.radio}`]: {
-    display: 'contents',
-    '& > svg': {
-      zIndex: 2,
-      position: 'absolute',
-      top: '-8px',
-      right: '-8px',
-      bgcolor: 'background.surface',
-      borderRadius: '50%'
-    }
-  }
-}}>
-{['Website', 'Documents', 'Social Account'].map(value => <Sheet key={value} variant="outlined" sx={{
-  borderRadius: 'md',
-  boxShadow: 'sm',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 1.5,
-  p: 2,
-  minWidth: 120
-}}>
-<Radio id={value} value={value} checkedIcon={<CheckCircleRoundedIcon />} />
-<Avatar variant="soft" size="sm" />
-<FormLabel htmlFor={value}>{value}</FormLabel>
-</Sheet>)}
-</RadioGroup>
+<RadioGroup
+    aria-label="platform"
+    defaultValue="Website"
+    overlay
+    name="platform"
+    sx={{
+      flexDirection: "row",
+      gap: 2,
+      [`& .${radioClasses.checked}`]: {
+        [`& .${radioClasses.action}`]: {
+          inset: -1,
+          border: "3px solid",
+          borderColor: "primary.500"
+        }
+      },
+      [`& .${radioClasses.radio}`]: {
+        display: "contents",
+        "& > svg": {
+          zIndex: 2,
+          position: "absolute",
+          top: "-8px",
+          right: "-8px",
+          bgcolor: "background.surface",
+          borderRadius: "50%"
+        }
+      }
+    }}
+  >
+    {["Website", "Documents", "Social Account"].map((value) => (
+      <Sheet
+        key={value}
+        variant="outlined"
+        sx={{
+          borderRadius: "md",
+          boxShadow: "sm",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 1.5,
+          p: 2,
+          minWidth: 120
+        }}
+      >
+        <Radio id={value} value={value} checkedIcon={<CheckCircleRoundedIcon />} />
+        <Avatar variant="soft" size="sm" />
+        <FormLabel htmlFor={value}>{value}</FormLabel>
+      </Sheet>
+    ))}
+  </RadioGroup>
 ```
 
 ## No Icon
@@ -146,52 +154,69 @@ Replace the default radio indicator with custom icons using the `checkedIcon` pr
 Use the `disableIcon` prop to hide the radio indicator entirely. This pattern is commonly used for card-style selectors where the entire card acts as the selectable target, and the selection state is conveyed through border or background styling.
 
 ```tsx
-<Box sx={{
-  width: 300
-}}>
-<FormLabel id="storage-label" sx={{
-  mb: 2,
-  fontWeight: 'xl',
-  fontSize: 'xs',
-  letterSpacing: '0.15rem'
-}}>
-Storage
-</FormLabel>
-<RadioGroup aria-labelledby="storage-label" defaultValue="512GB" size="lg" sx={{
-  gap: 1.5
-}}>
-{['512GB', '1TB', '2TB'].map(value => <Sheet key={value} sx={{
-  p: 2,
-  borderRadius: 'md',
-  boxShadow: 'sm'
-}}>
-<Radio label={`${value} SSD storage`} overlay disableIcon value={value} slotProps={{
-  label: ({
-    checked
-  }) => ({
-    sx: {
-      fontWeight: 'lg',
-      fontSize: 'md',
-      color: checked ? 'text.primary' : 'text.secondary'
-    }
-  }),
-  action: ({
-    checked
-  }) => ({
-    sx: theme => ({
-      ...(checked && {
-        '--variant-borderWidth': '2px',
-        '&&': {
-          // && to increase the specificity to win the base :hover styles
-          borderColor: theme.vars.palette.primary[500]
-        }
-      })
-    })
-  })
-}} />
-</Sheet>)}
-</RadioGroup>
-</Box>
+<Box
+    sx={{
+      width: 300
+    }}
+  >
+    <FormLabel
+      id="storage-label"
+      sx={{
+        mb: 2,
+        fontWeight: "xl",
+        fontSize: "xs",
+        letterSpacing: "0.15rem"
+      }}
+    >
+      Storage
+    </FormLabel>
+    <RadioGroup
+      aria-labelledby="storage-label"
+      defaultValue="512GB"
+      size="lg"
+      sx={{
+        gap: 1.5
+      }}
+    >
+      {["512GB", "1TB", "2TB"].map((value) => (
+        <Sheet
+          key={value}
+          sx={{
+            p: 2,
+            borderRadius: "md",
+            boxShadow: "sm"
+          }}
+        >
+          <Radio
+            label={`${value} SSD storage`}
+            overlay
+            disableIcon
+            value={value}
+            slotProps={{
+              label: ({ checked }) => ({
+                sx: {
+                  fontWeight: "lg",
+                  fontSize: "md",
+                  color: checked ? "text.primary" : "text.secondary"
+                }
+              }),
+              action: ({ checked }) => ({
+                sx: (theme) => ({
+                  ...(checked && {
+                    "--variant-borderWidth": "2px",
+                    "&&": {
+                      // && to increase the specificity to win the base :hover styles
+                      borderColor: theme.vars.palette.primary[500]
+                    }
+                  })
+                })
+              })
+            }}
+          />
+        </Sheet>
+      ))}
+    </RadioGroup>
+  </Box>
 ```
 
 ## Segmented Controls
@@ -199,42 +224,60 @@ Storage
 Radio buttons can be styled as segmented controls for compact, inline option switching. This pattern works well for toolbar-style controls where horizontal space is limited.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  alignItems: 'center',
-  gap: 2
-}}>
-<Typography id="segmented-controls-example" fontWeight="lg" fontSize="sm">
-  Justify:
-</Typography>
-<RadioGroup orientation="horizontal" aria-labelledby="segmented-controls-example" name="justify" value={justify} onChange={(event: React.ChangeEvent<HTMLInputElement>) => setJustify(event.target.value)} sx={{
-  minHeight: 48,
-  padding: '4px',
-  borderRadius: '12px',
-  bgcolor: 'neutral.softBg',
-  '--RadioGroup-gap': '4px',
-  '--Radio-actionRadius': '8px'
-}}>
-{['flex-start', 'center', 'flex-end'].map(item => <Radio key={item} color="neutral" value={item} disableIcon label={item} variant="plain" sx={{
-  px: 2,
-  alignItems: 'center'
-}} slotProps={{
-  action: ({
-    checked
-  }) => ({
-    sx: {
-      ...(checked && {
-        bgcolor: 'background.surface',
-        boxShadow: 'sm',
-        '&:hover': {
-          bgcolor: 'background.surface'
-        }
-      })
-    }
-  })
-}} />)}
-</RadioGroup>
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      alignItems: "center",
+      gap: 2
+    }}
+  >
+    <Typography id="segmented-controls-example" fontWeight="lg" fontSize="sm">
+      Justify:
+    </Typography>
+    <RadioGroup
+      orientation="horizontal"
+      aria-labelledby="segmented-controls-example"
+      name="justify"
+      value={justify}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => setJustify(event.target.value)}
+      sx={{
+        minHeight: 48,
+        padding: "4px",
+        borderRadius: "12px",
+        bgcolor: "neutral.softBg",
+        "--RadioGroup-gap": "4px",
+        "--Radio-actionRadius": "8px"
+      }}
+    >
+      {["flex-start", "center", "flex-end"].map((item) => (
+        <Radio
+          key={item}
+          color="neutral"
+          value={item}
+          disableIcon
+          label={item}
+          variant="plain"
+          sx={{
+            px: 2,
+            alignItems: "center"
+          }}
+          slotProps={{
+            action: ({ checked }) => ({
+              sx: {
+                ...(checked && {
+                  bgcolor: "background.surface",
+                  boxShadow: "sm",
+                  "&:hover": {
+                    bgcolor: "background.surface"
+                  }
+                })
+              }
+            })
+          }}
+        />
+      ))}
+    </RadioGroup>
+  </Box>
 ```
 
 ## Product Attributes
@@ -242,98 +285,132 @@ Radio buttons can be styled as segmented controls for compact, inline option swi
 Radio groups can be customized to represent product attributes such as colors and sizes. Using `overlay`, `disableIcon`, and custom `Sheet` containers, you can create rich visual selectors.
 
 ```tsx
-<Box sx={{
-  overflow: 'auto',
-  px: 2
-}}>
-<FormLabel id="product-color-attribute" sx={{
-  mb: 1.5,
-  fontWeight: 'xl',
-  textTransform: 'uppercase',
-  fontSize: 'xs',
-  letterSpacing: '0.1em'
-}}>
-Color
-</FormLabel>
-<RadioGroup aria-labelledby="product-color-attribute" defaultValue="warning" sx={{
-  gap: 2,
-  flexWrap: 'wrap',
-  flexDirection: 'row'
-}}>
-{(['primary', 'neutral', 'danger', 'success', 'warning'] as const).map(color => <Sheet key={color} sx={{
-  position: 'relative',
-  width: 40,
-  height: 40,
-  flexShrink: 0,
-  bgcolor: `${color}.solidBg`,
-  borderRadius: '50%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}}>
-<Radio overlay variant="solid" color={color} checkedIcon={<Done fontSize="large" />} value={color} slotProps={{
-  input: {
-    'aria-label': color
-  },
-  radio: {
-    sx: {
-      display: 'contents',
-      '--variant-borderWidth': '2px'
-    }
-  }
-}} sx={{
-  '--joy-focus-outlineOffset': '4px',
-  '--joy-palette-focusVisible': theme => theme.vars.palette[color][500],
-  [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
-    outlineWidth: '2px'
-  }
-}} />
-</Sheet>)}
-</RadioGroup>
-<br />
-<FormLabel id="product-size-attribute" sx={{
-  mb: 1.5,
-  fontWeight: 'xl',
-  textTransform: 'uppercase',
-  fontSize: 'xs',
-  letterSpacing: '0.1em'
-}}>
-Size
-</FormLabel>
-<RadioGroup aria-labelledby="product-size-attribute" defaultValue="M" sx={{
-  gap: 2,
-  mb: 2,
-  flexWrap: 'wrap',
-  flexDirection: 'row'
-}}>
-{['XS', 'S', 'M', 'L', 'XL'].map(size => <Sheet key={size} sx={{
-  position: 'relative',
-  width: 40,
-  height: 40,
-  flexShrink: 0,
-  borderRadius: '50%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  '--joy-focus-outlineOffset': '4px',
-  '--joy-palette-focusVisible': theme => theme.vars.palette.neutral.outlinedBorder,
-  [`& .${radioClasses.checked}`]: {
-    [`& .${radioClasses.label}`]: {
-      fontWeight: 'lg'
-    },
-    [`& .${radioClasses.action}`]: {
-      '--variant-borderWidth': '2px',
-      borderColor: 'text.secondary'
-    }
-  },
-  [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
-    outlineWidth: '2px'
-  }
-}}>
-<Radio color="neutral" overlay disableIcon value={size} label={size} />
-</Sheet>)}
-</RadioGroup>
-</Box>
+<Box
+    sx={{
+      overflow: "auto",
+      px: 2
+    }}
+  >
+    <FormLabel
+      id="product-color-attribute"
+      sx={{
+        mb: 1.5,
+        fontWeight: "xl",
+        textTransform: "uppercase",
+        fontSize: "xs",
+        letterSpacing: "0.1em"
+      }}
+    >
+      Color
+    </FormLabel>
+    <RadioGroup
+      aria-labelledby="product-color-attribute"
+      defaultValue="warning"
+      sx={{
+        gap: 2,
+        flexWrap: "wrap",
+        flexDirection: "row"
+      }}
+    >
+      {(["primary", "neutral", "danger", "success", "warning"] as const).map((color) => (
+        <Sheet
+          key={color}
+          sx={{
+            position: "relative",
+            width: 40,
+            height: 40,
+            flexShrink: 0,
+            bgcolor: `${color}.solidBg`,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <Radio
+            overlay
+            variant="solid"
+            color={color}
+            checkedIcon={<Done fontSize="large" />}
+            value={color}
+            slotProps={{
+              input: {
+                "aria-label": color
+              },
+              radio: {
+                sx: {
+                  display: "contents",
+                  "--variant-borderWidth": "2px"
+                }
+              }
+            }}
+            sx={{
+              "--joy-focus-outlineOffset": "4px",
+              "--joy-palette-focusVisible": (theme) => theme.vars.palette[color][500],
+              [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
+                outlineWidth: "2px"
+              }
+            }}
+          />
+        </Sheet>
+      ))}
+    </RadioGroup>
+    <br />
+    <FormLabel
+      id="product-size-attribute"
+      sx={{
+        mb: 1.5,
+        fontWeight: "xl",
+        textTransform: "uppercase",
+        fontSize: "xs",
+        letterSpacing: "0.1em"
+      }}
+    >
+      Size
+    </FormLabel>
+    <RadioGroup
+      aria-labelledby="product-size-attribute"
+      defaultValue="M"
+      sx={{
+        gap: 2,
+        mb: 2,
+        flexWrap: "wrap",
+        flexDirection: "row"
+      }}
+    >
+      {["XS", "S", "M", "L", "XL"].map((size) => (
+        <Sheet
+          key={size}
+          sx={{
+            position: "relative",
+            width: 40,
+            height: 40,
+            flexShrink: 0,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "--joy-focus-outlineOffset": "4px",
+            "--joy-palette-focusVisible": (theme) => theme.vars.palette.neutral.outlinedBorder,
+            [`& .${radioClasses.checked}`]: {
+              [`& .${radioClasses.label}`]: {
+                fontWeight: "lg"
+              },
+              [`& .${radioClasses.action}`]: {
+                "--variant-borderWidth": "2px",
+                borderColor: "text.secondary"
+              }
+            },
+            [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
+              outlineWidth: "2px"
+            }
+          }}
+        >
+          <Radio color="neutral" overlay disableIcon value={size} label={size} />
+        </Sheet>
+      ))}
+    </RadioGroup>
+  </Box>
 ```
 
 ## Common Use Cases
@@ -347,11 +424,7 @@ function SurveyQuestion() {
   return (
     <FormControl>
       <FormLabel>How satisfied are you with our service?</FormLabel>
-      <RadioGroup
-        name="satisfaction"
-        value={answer}
-        onChange={(e) => setAnswer(e.target.value)}
-      >
+      <RadioGroup name="satisfaction" value={answer} onChange={(e) => setAnswer(e.target.value)}>
         <Radio value="very-satisfied" label="Very Satisfied" color="success" />
         <Radio value="satisfied" label="Satisfied" />
         <Radio value="neutral" label="Neutral" />
@@ -372,12 +445,7 @@ function PaymentMethodSelector() {
   return (
     <FormControl>
       <FormLabel>Payment Method</FormLabel>
-      <RadioGroup
-        name="payment"
-        value={method}
-        onChange={(e) => setMethod(e.target.value)}
-        sx={{ gap: 1.5 }}
-      >
+      <RadioGroup name="payment" value={method} onChange={(e) => setMethod(e.target.value)} sx={{ gap: 1.5 }}>
         {[
           { value: 'credit-card', label: 'Credit Card' },
           { value: 'bank-transfer', label: 'Bank Transfer' },
@@ -416,11 +484,7 @@ function ShippingOptions() {
   return (
     <FormControl>
       <FormLabel>Shipping Speed</FormLabel>
-      <RadioGroup
-        name="shipping"
-        value={shipping}
-        onChange={(e) => setShipping(e.target.value)}
-      >
+      <RadioGroup name="shipping" value={shipping} onChange={(e) => setShipping(e.target.value)}>
         <Radio value="standard" label="Standard (5-7 business days) - Free" />
         <Radio value="express" label="Express (2-3 business days) - $9.99" />
         <Radio value="overnight" label="Overnight (next day) - $24.99" />