@ceed/ads 1.13.4 → 1.15.0-next.2

package/dist/components/inputs/MonthRangePicker.md

@@ -0,0 +1,70 @@
+# MonthRangePicker
+
+## Introduction
+
+```tsx
+<MonthRangePicker />
+```
+
+| Field         | Description | Default |
+| ------------- | ----------- | ------- |
+| value         | —           | —       |
+| defaultValue  | —           | —       |
+| name          | —           | —       |
+| disabled      | —           | —       |
+| required      | —           | —       |
+| label         | —           | —       |
+| error         | —           | —       |
+| helperText    | —           | —       |
+| minDate       | —           | —       |
+| maxDate       | —           | —       |
+| disableFuture | —           | —       |
+| disablePast   | —           | —       |
+| format        | —           | —       |
+| onChange      | —           | —       |
+
+### Sizes
+
+```tsx
+<Stack gap={2}>
+  <MonthRangePicker size="sm" />
+  <MonthRangePicker size="md" />
+  <MonthRangePicker size="lg" />
+</Stack>
+```
+
+### WithLabel
+
+```tsx
+<MonthRangePicker label="Month Range" />
+```
+
+### WithHelperText
+
+```tsx
+<MonthRangePicker
+  label="Month"
+  helperText="Please select a month"
+/>
+```
+
+### Error
+
+```tsx
+<MonthRangePicker
+  label="Month"
+  helperText="Please select a month"
+  error
+/>
+```
+
+### WithFormats
+
+```tsx
+<Stack gap={2}>
+  <MonthRangePicker {...args} value={value['YYYY.MM']} label="YYYY.MM" name="YYYY.MM" format="YYYY.MM" onChange={handleChange} />
+  <MonthRangePicker {...args} value={value['YYYY/MM']} label="YYYY/MM" name="YYYY/MM" format="YYYY/MM" onChange={handleChange} />
+  <MonthRangePicker {...args} value={value['MM/YYYY']} label="MM/YYYY" name="MM/YYYY" format="MM/YYYY" onChange={handleChange} />
+  <MonthRangePicker {...args} value={value['YYYY-MM']} label="YYYY-MM" name="YYYY-MM" format="YYYY-MM" onChange={handleChange} />
+</Stack>
+```

package/dist/components/inputs/PercentageInput.md

@@ -0,0 +1,116 @@
+# PercentageInput
+
+## Introduction
+
+```tsx
+<PercentageInput placeholder="Enter a percentage" />
+```
+
+| Field           | Description | Default |
+| --------------- | ----------- | ------- |
+| value           | —           | —       |
+| defaultValue    | —           | —       |
+| onChange        | —           | —       |
+| name            | —           | —       |
+| label           | —           | —       |
+| disabled        | —           | —       |
+| required        | —           | —       |
+| error           | —           | —       |
+| helperText      | —           | —       |
+| useMinorUnit    | —           | —       |
+| maxDecimalScale | —           | —       |
+| min             | —           | —       |
+| max             | —           | —       |
+
+### Sizes
+
+```tsx
+<Stack gap={2}>
+  <PercentageInput size="sm" label="Small" />
+  <PercentageInput size="md" label="Medium" />
+  <PercentageInput size="lg" label="Large" />
+</Stack>
+```
+
+### Disabled
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  disabled
+/>
+```
+
+### Error
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  error
+/>
+```
+
+### WithLabel
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+/>
+```
+
+### WithHelperText
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+  helperText="Please enter a percentage"
+/>
+```
+
+### WithErrorText
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+  helperText="Please enter a percentage"
+  error
+/>
+```
+
+### Required
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+  helperText="Please enter a percentage"
+  required
+/>
+```
+
+### Min
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+  helperText="Please enter a percentage"
+  min={10}
+  defaultValue={5}
+/>
+```
+
+### Max
+
+```tsx
+<PercentageInput
+  placeholder="Enter a percentage"
+  label="Percentage Input"
+  helperText="Please enter a percentage"
+  max={500}
+  defaultValue={5000}
+/>
+```

package/dist/components/inputs/RadioButton.md

@@ -0,0 +1,350 @@
+# Radio
+
+## Introduction
+
+Radio 컴포넌트는 사용자가 여러 옵션 중 하나만 선택할 수 있는 단일 선택 인터페이스를 제공합니다. 라디오 버튼은 그룹으로 사용되어야 하며, 하나가 선택되면 다른 옵션들은 자동으로 해제됩니다.
+
+```tsx
+<Radio />
+```
+
+| Field         | Description | Default |
+| ------------- | ----------- | ------- |
+| checked       | —           | —       |
+| color         | —           | —       |
+| checkedIcon   | —           | —       |
+| disabled      | —           | —       |
+| disableIcon   | —           | —       |
+| label         | —           | —       |
+| name          | —           | —       |
+| onChange      | —           | —       |
+| overlay       | —           | —       |
+| readOnly      | —           | —       |
+| required      | —           | —       |
+| size          | —           | —       |
+| uncheckedIcon | —           | —       |
+| variant       | —           | —       |
+
+## Usage
+
+```tsx
+import { Radio } from '@ceed/ads';
+
+function MyComponent() {
+  const [selectedValue, setSelectedValue] = useState('option1');
+
+  return (
+    <div>
+      <Radio
+        name="example"
+        value="option1"
+        checked={selectedValue === 'option1'}
+        onChange={(e) => setSelectedValue(e.target.value)}
+        label="옵션 1"
+      />
+      <Radio
+        name="example"
+        value="option2"
+        checked={selectedValue === 'option2'}
+        onChange={(e) => setSelectedValue(e.target.value)}
+        label="옵션 2"
+      />
+    </div>
+  );
+}
+```
+
+## Examples
+
+### Variants
+
+```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>
+```
+
+### Sizes
+
+```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>
+```
+
+### Colors
+
+```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>
+```
+
+### Custom Icons
+
+아이콘을 커스터마이징하여 특별한 용도로 사용할 수 있습니다.
+
+```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>
+```
+
+### No Icon
+
+아이콘 없이 텍스트만으로 구성할 수 있습니다.
+
+```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>
+```
+
+### Segmented Controls
+
+세그먼트 컨트롤 스타일로 사용할 수 있습니다.
+
+```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>
+```
+
+### Product Attributes
+
+제품 속성 선택 등의 용도로 활용할 수 있습니다.
+
+```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>
+```
+
+## Best Practices
+
+1. **그룹 사용**: Radio 버튼들은 반드시 동일한 `name` 속성을 가진 그룹으로 사용해야 합니다.
+
+2. **레이블 제공**: 접근성을 위해 항상 의미 있는 `label`을 제공하세요.
+
+3. **초기값 설정**: 사용자 경험을 위해 적절한 초기값을 설정하는 것이 좋습니다.
+
+4. **적절한 간격**: 여러 라디오 버튼 간에는 충분한 간격을 두어 선택하기 쉽게 만드세요.
+
+5. **상태 관리**: 제어 컴포넌트로 사용하여 상태를 명확히 관리하세요.