@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/inputs/RadioTileGroup.md

@@ -118,17 +118,32 @@ Use the `columns` prop to arrange tiles in a specific number of columns using a
 Combine `flex` and `columns` to create a grid where each tile stretches to fill its column width evenly.
 
 ```tsx
-<Box sx={{
-  width: '100%',
-  maxWidth: 700
-}}>
-<Typography level="body-md" sx={{
-  mb: 2
-}}>
-Flex with Columns
-</Typography>
-<RadioTileGroup options={optionsWithIcons} onChange={handleChange} value={selectedValue} flex={true} columns={3} size="md" useIndicator={true} label="Flex with Columns Example" helperText="Items stretch to fill available space and are arranged in 3 columns" />
-</Box>
+<Box
+    sx={{
+      width: "100%",
+      maxWidth: 700
+    }}
+  >
+    <Typography
+      level="body-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      Flex with Columns
+    </Typography>
+    <RadioTileGroup
+      options={optionsWithIcons}
+      onChange={handleChange}
+      value={selectedValue}
+      flex={true}
+      columns={3}
+      size="md"
+      useIndicator={true}
+      label="Flex with Columns Example"
+      helperText="Items stretch to fill available space and are arranged in 3 columns"
+    />
+  </Box>
 ```
 
 ### Vertical Layout
@@ -136,17 +151,31 @@ Flex with Columns
 Set `columns={1}` to stack tiles vertically. This layout is well-suited for list-style selections like pricing plans or step-by-step options.
 
 ```tsx
-<Box sx={{
-  width: '100%',
-  maxWidth: 400
-}}>
-<Typography level="body-md" sx={{
-  mb: 2
-}}>
-Vertical Layout (columns: 1)
-</Typography>
-<RadioTileGroup options={pricingOptions} onChange={handleChange} value={selectedValue} columns={1} size="md" useIndicator={true} label="Subscription Plans" helperText="Select your preferred subscription plan" />
-</Box>
+<Box
+    sx={{
+      width: "100%",
+      maxWidth: 400
+    }}
+  >
+    <Typography
+      level="body-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      Vertical Layout (columns: 1)
+    </Typography>
+    <RadioTileGroup
+      options={pricingOptions}
+      onChange={handleChange}
+      value={selectedValue}
+      columns={1}
+      size="md"
+      useIndicator={true}
+      label="Subscription Plans"
+      helperText="Select your preferred subscription plan"
+    />
+  </Box>
 ```
 
 ## Text Alignment
@@ -154,30 +183,38 @@ Vertical Layout (columns: 1)
 The `textAlign` prop controls the alignment of content inside each tile. The default is `center`. Set it to `start` for left-aligned content.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4,
-  width: '100%',
-  maxWidth: 700
-}}>
-<Box>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  Center Alignment (default)
-</Typography>
-<RadioTileGroup options={simpleOptions} textAlign="center" useIndicator={true} />
-</Box>
-<Box>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  Start Alignment
-</Typography>
-<RadioTileGroup options={simpleOptions} textAlign="start" useIndicator={true} />
-</Box>
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      width: "100%",
+      maxWidth: 700
+    }}
+  >
+    <Box>
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Center Alignment (default)
+      </Typography>
+      <RadioTileGroup options={simpleOptions} textAlign="center" useIndicator={true} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Start Alignment
+      </Typography>
+      <RadioTileGroup options={simpleOptions} textAlign="start" useIndicator={true} />
+    </Box>
+  </Box>
 ```
 
 ## Sizes
@@ -185,38 +222,49 @@ The `textAlign` prop controls the alignment of content inside each tile. The def
 RadioTileGroup supports three sizes: `sm` (default), `md`, and `lg`. Choose the size that best fits the density of your layout.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4,
-  width: '100%',
-  maxWidth: 700
-}}>
-<Box>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  Size: sm (default)
-</Typography>
-<RadioTileGroup options={simpleOptions} size="sm" useIndicator={true} />
-</Box>
-<Box>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  Size: md
-</Typography>
-<RadioTileGroup options={simpleOptions} size="md" useIndicator={true} />
-</Box>
-<Box>
-  <Typography level="body-md" sx={{
-    mb: 2
-  }}>
-  Size: lg
-</Typography>
-<RadioTileGroup options={simpleOptions} size="lg" useIndicator={true} />
-</Box>
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      width: "100%",
+      maxWidth: 700
+    }}
+  >
+    <Box>
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Size: sm (default)
+      </Typography>
+      <RadioTileGroup options={simpleOptions} size="sm" useIndicator={true} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Size: md
+      </Typography>
+      <RadioTileGroup options={simpleOptions} size="md" useIndicator={true} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Size: lg
+      </Typography>
+      <RadioTileGroup options={simpleOptions} size="lg" useIndicator={true} />
+    </Box>
+  </Box>
 ```
 
 ## Icons
@@ -249,17 +297,22 @@ Add icons to tiles using the `startDecorator` property on each option. Icons hel
 Pass `value` and `onChange` to fully control the selected state from the parent component. This is recommended when the selection participates in form state or triggers side effects.
 
 ```tsx
-<Box sx={{
-  width: '100%',
-  maxWidth: 500
-}}>
-<Typography level="body-md" sx={{
-  mb: 1
-}}>
-Selected value: {selectedValue}
-</Typography>
-<RadioTileGroup options={simpleOptions} value={selectedValue} onChange={handleChange} />
-</Box>
+<Box
+    sx={{
+      width: "100%",
+      maxWidth: 500
+    }}
+  >
+    <Typography
+      level="body-md"
+      sx={{
+        mb: 1
+      }}
+    >
+      Selected value: {selectedValue}
+    </Typography>
+    <RadioTileGroup options={simpleOptions} value={selectedValue} onChange={handleChange} />
+  </Box>
 ```
 
 ### Uncontrolled
@@ -267,34 +320,56 @@ Selected value: {selectedValue}
 Use `defaultValue` to set an initial selection without managing state externally. The component tracks its own selection internally.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4
-}}>
-<Box sx={{
-  width: '100%',
-  maxWidth: 500
-}}>
-<Typography level="body-md" sx={{
-  mb: 2
-}}>
-Uncontrolled Example (with Indicator)
-</Typography>
-<RadioTileGroup options={simpleOptions} defaultValue="option2" useIndicator={true} onChange={event => console.log(`Selected value: ${event.target.value}`)} />
-</Box>
-<Box sx={{
-  width: '100%',
-  maxWidth: 500
-}}>
-<Typography level="body-md" sx={{
-  mb: 2
-}}>
-Uncontrolled Example (without Indicator)
-</Typography>
-<RadioTileGroup options={simpleOptions} defaultValue="option3" useIndicator={false} onChange={event => console.log(`Selected value: ${event.target.value}`)} />
-</Box>
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 4
+    }}
+  >
+    <Box
+      sx={{
+        width: "100%",
+        maxWidth: 500
+      }}
+    >
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Uncontrolled Example (with Indicator)
+      </Typography>
+      <RadioTileGroup
+        options={simpleOptions}
+        defaultValue="option2"
+        useIndicator={true}
+        onChange={(event) => console.log(`Selected value: ${event.target.value}`)}
+      />
+    </Box>
+    <Box
+      sx={{
+        width: "100%",
+        maxWidth: 500
+      }}
+    >
+      <Typography
+        level="body-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        Uncontrolled Example (without Indicator)
+      </Typography>
+      <RadioTileGroup
+        options={simpleOptions}
+        defaultValue="option3"
+        useIndicator={false}
+        onChange={(event) => console.log(`Selected value: ${event.target.value}`)}
+      />
+    </Box>
+  </Box>
 ```
 
 ## Disabled State
@@ -349,18 +424,32 @@ Use the `error` prop to indicate validation errors. Pair it with `helperText` to
 Combine `required`, `error`, and `helperText` to build a complete form validation flow. The example below validates that the user has made a selection before submitting.
 
 ```tsx
-<Stack spacing={2} sx={{
-  width: '100%',
-  maxWidth: 500
-}}>
-<RadioTileGroup options={simpleOptions} value={selectedValue} onChange={handleChange} label="Choose your preferred option" helperText={error ? 'Please select an option' : 'This selection is required'} error={error} useIndicator={true} required={true} />
-<Box sx={{
-  display: 'flex',
-  justifyContent: 'flex-end'
-}}>
-<Button onClick={handleSubmit}>Submit</Button>
-</Box>
-</Stack>
+<Stack
+    spacing={2}
+    sx={{
+      width: "100%",
+      maxWidth: 500
+    }}
+  >
+    <RadioTileGroup
+      options={simpleOptions}
+      value={selectedValue}
+      onChange={handleChange}
+      label="Choose your preferred option"
+      helperText={error ? "Please select an option" : "This selection is required"}
+      error={error}
+      useIndicator={true}
+      required={true}
+    />
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "flex-end"
+      }}
+    >
+      <Button onClick={handleSubmit}>Submit</Button>
+    </Box>
+  </Stack>
 ```
 
 ## Shipping Method Selection
@@ -385,28 +474,42 @@ import BusinessIcon from '@mui/icons-material/Business';
   onChange={(e) => setSelected(e.target.value)}
   size="md"
   useIndicator
-/>
+/>;
 ```
 
 ```tsx
-<Box sx={{
-  width: '100%',
-  maxWidth: 700
-}}>
-<RadioTileGroup label="배송 방법 선택" helperText="배송 방법에 따라 배송비가 달라질 수 있습니다." options={[{
-  value: 'standard',
-  label: '일반 배송',
-  startDecorator: <HomeIcon />
-}, {
-  value: 'express',
-  label: '빠른 배송',
-  startDecorator: <LocalShippingIcon />
-}, {
-  value: 'business',
-  label: '기업 배송',
-  startDecorator: <BusinessIcon />
-}]} onChange={handleChange} value={selectedValue} size="md" useIndicator={true} />
-</Box>
+<Box
+    sx={{
+      width: "100%",
+      maxWidth: 700
+    }}
+  >
+    <RadioTileGroup
+      label="배송 방법 선택"
+      helperText="배송 방법에 따라 배송비가 달라질 수 있습니다."
+      options={[
+        {
+          value: "standard",
+          label: "일반 배송",
+          startDecorator: <HomeIcon />
+        },
+        {
+          value: "express",
+          label: "빠른 배송",
+          startDecorator: <LocalShippingIcon />
+        },
+        {
+          value: "business",
+          label: "기업 배송",
+          startDecorator: <BusinessIcon />
+        }
+      ]}
+      onChange={handleChange}
+      value={selectedValue}
+      size="md"
+      useIndicator={true}
+    />
+  </Box>
 ```
 
 ## Survey / Preference Selection
@@ -430,28 +533,42 @@ Present survey options with icons in a multi-column grid for a clear, scannable
 ```
 
 ```tsx
-<Box sx={{
-  width: '100%',
-  maxWidth: 700
-}}>
-<RadioTileGroup label="선호하는 운동 유형을 선택해주세요" options={[{
-  value: 'cardio',
-  label: '유산소 운동',
-  startDecorator: <DirectionsRunIcon />
-}, {
-  value: 'strength',
-  label: '근력 운동',
-  startDecorator: <FitnessCenterIcon />
-}, {
-  value: 'flexibility',
-  label: '유연성 운동',
-  startDecorator: <SelfImprovementIcon />
-}, {
-  value: 'balance',
-  label: '균형 운동',
-  startDecorator: <BalanceIcon />
-}]} onChange={handleChange} value={selectedValue} columns={2} size="md" />
-</Box>
+<Box
+    sx={{
+      width: "100%",
+      maxWidth: 700
+    }}
+  >
+    <RadioTileGroup
+      label="선호하는 운동 유형을 선택해주세요"
+      options={[
+        {
+          value: "cardio",
+          label: "유산소 운동",
+          startDecorator: <DirectionsRunIcon />
+        },
+        {
+          value: "strength",
+          label: "근력 운동",
+          startDecorator: <FitnessCenterIcon />
+        },
+        {
+          value: "flexibility",
+          label: "유연성 운동",
+          startDecorator: <SelfImprovementIcon />
+        },
+        {
+          value: "balance",
+          label: "균형 운동",
+          startDecorator: <BalanceIcon />
+        }
+      ]}
+      onChange={handleChange}
+      value={selectedValue}
+      columns={2}
+      size="md"
+    />
+  </Box>
 ```
 
 ## Pricing Plan Picker