@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/ButtonGroup.md

@@ -8,10 +8,10 @@ By applying shared props like `color`, `variant`, `size`, and `orientation` at t
 
 ```tsx
 <ButtonGroup {...args}>
-  <Button>첫번째</Button>
-  <Button>두번째</Button>
-  <Button>세번째</Button>
-</ButtonGroup>
+    <Button>첫번째</Button>
+    <Button>두번째</Button>
+    <Button>세번째</Button>
+  </ButtonGroup>
 ```
 
 | Field       | Description | Default      |
@@ -43,41 +43,43 @@ function MyComponent() {
 Apply a unified color theme to all buttons in the group using the `color` prop. Available colors are `primary`, `neutral`, `danger`, `success`, and `warning`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexDirection: 'column'
-}}>
-<ButtonGroup color="primary">
-  <Button>Primary</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexDirection: "column"
+    }}
+  >
+    <ButtonGroup color="primary">
+      <Button>Primary</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup color="neutral">
-  <Button>Neutral</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup color="neutral">
+      <Button>Neutral</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup color="danger">
-  <Button>Danger</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup color="danger">
+      <Button>Danger</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup color="success">
-  <Button>Success</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup color="success">
+      <Button>Success</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup color="warning">
-  <Button>Warning</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
-</div>
+    <ButtonGroup color="warning">
+      <Button>Warning</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
+  </div>
 ```
 
 ## Variants
@@ -85,35 +87,37 @@ Apply a unified color theme to all buttons in the group using the `color` prop.
 ButtonGroup supports four visual variants: `solid`, `soft`, `outlined`, and `plain`. The variant prop propagates to all child buttons, ensuring a consistent look.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexDirection: 'column'
-}}>
-<ButtonGroup variant="solid">
-  <Button>Solid</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexDirection: "column"
+    }}
+  >
+    <ButtonGroup variant="solid">
+      <Button>Solid</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup variant="soft">
-  <Button>Soft</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup variant="soft">
+      <Button>Soft</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup variant="outlined">
-  <Button>Outlined</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup variant="outlined">
+      <Button>Outlined</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup variant="plain">
-  <Button>Plain</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
-</div>
+    <ButtonGroup variant="plain">
+      <Button>Plain</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
+  </div>
 ```
 
 ## Sizes
@@ -121,30 +125,32 @@ ButtonGroup supports four visual variants: `solid`, `soft`, `outlined`, and `pla
 Control the size of all buttons in the group with the `size` prop. Available sizes are `sm`, `md` (default), and `lg`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexDirection: 'column',
-  alignItems: 'flex-start'
-}}>
-<ButtonGroup size="sm">
-  <Button>Small</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }}
+  >
+    <ButtonGroup size="sm">
+      <Button>Small</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup size="md">
-  <Button>Medium</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
+    <ButtonGroup size="md">
+      <Button>Medium</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
 
-<ButtonGroup size="lg">
-  <Button>Large</Button>
-  <Button>Button</Button>
-  <Button>Group</Button>
-</ButtonGroup>
-</div>
+    <ButtonGroup size="lg">
+      <Button>Large</Button>
+      <Button>Button</Button>
+      <Button>Group</Button>
+    </ButtonGroup>
+  </div>
 ```
 
 ## Orientations
@@ -152,29 +158,31 @@ Control the size of all buttons in the group with the `size` prop. Available siz
 Buttons can be arranged horizontally (default) or vertically. Use `orientation="vertical"` for stacked layouts such as side panels or narrow containers.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'flex-start'
-}}>
-<div>
-  <h4>Horizontal</h4>
-  <ButtonGroup orientation="horizontal">
-    <Button>첫번째</Button>
-    <Button>두번째</Button>
-    <Button>세번째</Button>
-  </ButtonGroup>
-</div>
-
-<div>
-  <h4>Vertical</h4>
-  <ButtonGroup orientation="vertical">
-    <Button>첫번째</Button>
-    <Button>두번째</Button>
-    <Button>세번째</Button>
-  </ButtonGroup>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      alignItems: "flex-start"
+    }}
+  >
+    <div>
+      <h4>Horizontal</h4>
+      <ButtonGroup orientation="horizontal">
+        <Button>첫번째</Button>
+        <Button>두번째</Button>
+        <Button>세번째</Button>
+      </ButtonGroup>
+    </div>
+
+    <div>
+      <h4>Vertical</h4>
+      <ButtonGroup orientation="vertical">
+        <Button>첫번째</Button>
+        <Button>두번째</Button>
+        <Button>세번째</Button>
+      </ButtonGroup>
+    </div>
+  </div>
 ```
 
 ## With Icons
@@ -182,23 +190,25 @@ Buttons can be arranged horizontally (default) or vertically. Use `orientation="
 Combine text labels with icons using the `startDecorator` prop on individual buttons for a richer, more descriptive interface.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  flexDirection: 'column'
-}}>
-<ButtonGroup>
-  <Button startDecorator={<Add />}>추가</Button>
-  <Button startDecorator={<Edit />}>편집</Button>
-  <Button startDecorator={<Delete />}>삭제</Button>
-</ButtonGroup>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      flexDirection: "column"
+    }}
+  >
+    <ButtonGroup>
+      <Button startDecorator={<Add />}>추가</Button>
+      <Button startDecorator={<Edit />}>편집</Button>
+      <Button startDecorator={<Delete />}>삭제</Button>
+    </ButtonGroup>
 
-<ButtonGroup variant="outlined">
-  <Button startDecorator={<Save />} />
-  <Button startDecorator={<Share />} />
-  <Button startDecorator={<Edit />} />
-</ButtonGroup>
-</div>
+    <ButtonGroup variant="outlined">
+      <Button startDecorator={<Save />} />
+      <Button startDecorator={<Share />} />
+      <Button startDecorator={<Edit />} />
+    </ButtonGroup>
+  </div>
 ```
 
 ## States
@@ -206,38 +216,40 @@ Combine text labels with icons using the `startDecorator` prop on individual but
 ButtonGroup supports disabled states at the group level (affecting all children) or on individual buttons for mixed-state scenarios.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  flexDirection: 'column'
-}}>
-<div>
-  <h4>Normal</h4>
-  <ButtonGroup>
-    <Button>첫번째</Button>
-    <Button>두번째</Button>
-    <Button>세번째</Button>
-  </ButtonGroup>
-</div>
-
-<div>
-  <h4>Disabled</h4>
-  <ButtonGroup disabled>
-    <Button>첫번째</Button>
-    <Button>두번째</Button>
-    <Button>세번째</Button>
-  </ButtonGroup>
-</div>
-
-<div>
-  <h4>Mixed States</h4>
-  <ButtonGroup>
-    <Button>활성</Button>
-    <Button disabled>비활성</Button>
-    <Button>활성</Button>
-  </ButtonGroup>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      flexDirection: "column"
+    }}
+  >
+    <div>
+      <h4>Normal</h4>
+      <ButtonGroup>
+        <Button>첫번째</Button>
+        <Button>두번째</Button>
+        <Button>세번째</Button>
+      </ButtonGroup>
+    </div>
+
+    <div>
+      <h4>Disabled</h4>
+      <ButtonGroup disabled>
+        <Button>첫번째</Button>
+        <Button>두번째</Button>
+        <Button>세번째</Button>
+      </ButtonGroup>
+    </div>
+
+    <div>
+      <h4>Mixed States</h4>
+      <ButtonGroup>
+        <Button>활성</Button>
+        <Button disabled>비활성</Button>
+        <Button>활성</Button>
+      </ButtonGroup>
+    </div>
+  </div>
 ```
 
 ## Toggle Group
@@ -246,20 +258,29 @@ By dynamically switching the `variant` prop on individual buttons based on selec
 
 ```tsx
 <div>
-  <h4>Toggle Group (Alignment)</h4>
-  <ButtonGroup variant="outlined">
-    <Button variant={selected === 'left' ? 'solid' : 'outlined'} onClick={() => setSelected('left')}>
-      왼쪽 정렬
-    </Button>
-    <Button variant={selected === 'center' ? 'solid' : 'outlined'} onClick={() => setSelected('center')}>
-      가운데 정렬
-    </Button>
-    <Button variant={selected === 'right' ? 'solid' : 'outlined'} onClick={() => setSelected('right')}>
-      오른쪽 정렬
-    </Button>
-  </ButtonGroup>
-  <p>선택된 정렬: {selected}</p>
-</div>
+    <h4>Toggle Group (Alignment)</h4>
+    <ButtonGroup variant="outlined">
+      <Button
+        variant={selected === "left" ? "solid" : "outlined"}
+        onClick={() => setSelected("left")}
+      >
+        왼쪽 정렬
+      </Button>
+      <Button
+        variant={selected === "center" ? "solid" : "outlined"}
+        onClick={() => setSelected("center")}
+      >
+        가운데 정렬
+      </Button>
+      <Button
+        variant={selected === "right" ? "solid" : "outlined"}
+        onClick={() => setSelected("right")}
+      >
+        오른쪽 정렬
+      </Button>
+    </ButtonGroup>
+    <p>선택된 정렬: {selected}</p>
+  </div>
 ```
 
 ## Common Use Cases
@@ -276,7 +297,7 @@ import RedoIcon from '@mui/icons-material/Redo';
   <Button startDecorator={<SaveIcon />}>Save</Button>
   <Button startDecorator={<UndoIcon />}>Undo</Button>
   <Button startDecorator={<RedoIcon />}>Redo</Button>
-</ButtonGroup>
+</ButtonGroup>;
 ```
 
 ### View Switcher
@@ -285,25 +306,16 @@ import RedoIcon from '@mui/icons-material/Redo';
 const [view, setView] = useState('list');
 
 <ButtonGroup variant="outlined" color="neutral">
-  <Button
-    variant={view === 'list' ? 'solid' : 'outlined'}
-    onClick={() => setView('list')}
-  >
+  <Button variant={view === 'list' ? 'solid' : 'outlined'} onClick={() => setView('list')}>
     List
   </Button>
-  <Button
-    variant={view === 'grid' ? 'solid' : 'outlined'}
-    onClick={() => setView('grid')}
-  >
+  <Button variant={view === 'grid' ? 'solid' : 'outlined'} onClick={() => setView('grid')}>
     Grid
   </Button>
-  <Button
-    variant={view === 'card' ? 'solid' : 'outlined'}
-    onClick={() => setView('card')}
-  >
+  <Button variant={view === 'card' ? 'solid' : 'outlined'} onClick={() => setView('card')}>
     Card
   </Button>
-</ButtonGroup>
+</ButtonGroup>;
 ```
 
 ### Pagination Controls
@@ -314,9 +326,7 @@ const [view, setView] = useState('list');
     Previous
   </Button>
   <Button disabled>{page}</Button>
-  <Button onClick={() => setPage(page + 1)}>
-    Next
-  </Button>
+  <Button onClick={() => setPage(page + 1)}>Next</Button>
 </ButtonGroup>
 ```
 

package/dist/components/inputs/Calendar.md

@@ -29,12 +29,7 @@ import { useState } from 'react';
 function DateSelector() {
   const [date, setDate] = useState<Date | null>(null);
 
-  return (
-    <Calendar
-      value={date ? [date, undefined] : undefined}
-      onChange={(dates) => setDate(dates[0] || null)}
-    />
-  );
+  return <Calendar value={date ? [date, undefined] : undefined} onChange={(dates) => setDate(dates[0] || null)} />;
 }
 ```
 
@@ -96,7 +91,11 @@ Show only the month grid for month-level navigation and selection.
 Enable both month and day views with navigation between them, giving users the flexibility to zoom in and out of the calendar.
 
 ```tsx
-<Calendar views={['month', 'day']} rangeSelection defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 20)]} />
+<Calendar
+    views={["month", "day"]}
+    rangeSelection
+    defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 20)]}
+  />
 ```
 
 ### Month Selection
@@ -154,7 +153,7 @@ Use the `shouldDisableDate` callback to implement arbitrary disabling logic, suc
 Combine `shouldDisableDate` with `disablePast` to apply multiple restrictions simultaneously.
 
 ```tsx
-<Calendar shouldDisableDate={date => [0, 6].includes(date.getDay())} disablePast />
+<Calendar shouldDisableDate={(date) => [0, 6].includes(date.getDay())} disablePast />
 ```
 
 ### Complex Date Restrictions
@@ -162,7 +161,13 @@ Combine `shouldDisableDate` with `disablePast` to apply multiple restrictions si
 Disable weekends, past dates, and limit selection to one week ahead by combining all restriction options.
 
 ```tsx
-<Calendar shouldDisableDate={date => [0, 6].includes(date.getDay()) || date.getTime() >= new Date().getTime() + 7 * 24 * 60 * 60 * 1000} disablePast />
+<Calendar
+    shouldDisableDate={(date) =>
+      [0, 6].includes(date.getDay()) ||
+      date.getTime() >= new Date().getTime() + 7 * 24 * 60 * 60 * 1000
+    }
+    disablePast
+  />
 ```
 
 ## Common Use Cases
@@ -181,10 +186,7 @@ function CalendarWidget() {
       <Typography level="title-md" sx={{ mb: 2 }}>
         Select a Date
       </Typography>
-      <Calendar
-        value={[selectedDate, undefined]}
-        onChange={(dates) => dates[0] && setSelectedDate(dates[0])}
-      />
+      <Calendar value={[selectedDate, undefined]} onChange={(dates) => dates[0] && setSelectedDate(dates[0])} />
       <Typography level="body-sm" sx={{ mt: 2 }}>
         Selected: {selectedDate.toLocaleDateString()}
       </Typography>
@@ -199,19 +201,14 @@ function CalendarWidget() {
 function BookingCalendar({ blockedDates }) {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
-  const blockedSet = useMemo(
-    () => new Set(blockedDates.map((d) => d.toDateString())),
-    [blockedDates]
-  );
+  const blockedSet = useMemo(() => new Set(blockedDates.map((d) => d.toDateString())), [blockedDates]);
 
   return (
     <Calendar
       value={selectedDate ? [selectedDate, undefined] : undefined}
       onChange={(dates) => setSelectedDate(dates[0] || null)}
       disablePast
-      shouldDisableDate={(date) =>
-        [0, 6].includes(date.getDay()) || blockedSet.has(date.toDateString())
-      }
+      shouldDisableDate={(date) => [0, 6].includes(date.getDay()) || blockedSet.has(date.toDateString())}
     />
   );
 }
@@ -221,10 +218,7 @@ function BookingCalendar({ blockedDates }) {
 
 ```tsx
 function DateRangeSelector({ onRangeSelect }) {
-  const [range, setRange] = useState<[Date | undefined, Date | undefined]>([
-    undefined,
-    undefined,
-  ]);
+  const [range, setRange] = useState<[Date | undefined, Date | undefined]>([undefined, undefined]);
 
   const dayCount = useMemo(() => {
     if (!range[0] || !range[1]) return 0;
@@ -284,12 +278,15 @@ function DateRangeSelector({ onRangeSelect }) {
 
 ```tsx
 // ✅ Memoized disable function
-const shouldDisableDate = useCallback((date: Date) => {
-  return [0, 6].includes(date.getDay()) || holidays.has(date.toDateString());
-}, [holidays]);
+const shouldDisableDate = useCallback(
+  (date: Date) => {
+    return [0, 6].includes(date.getDay()) || holidays.has(date.toDateString());
+  },
+  [holidays],
+);
 
 // ❌ Inline function recreated every render
-<Calendar shouldDisableDate={(date) => expensiveCheck(date)} />
+<Calendar shouldDisableDate={(date) => expensiveCheck(date)} />;
 ```
 
 4. **Always use Date objects, not strings.** Calendar expects native `Date` objects for `value`, `defaultValue`, `minDate`, and `maxDate`.

package/dist/components/inputs/Checkbox.md

@@ -25,13 +25,7 @@ import { Checkbox } from '@ceed/cds';
 function MyComponent() {
   const [checked, setChecked] = useState(false);
 
-  return (
-    <Checkbox
-      label="I agree"
-      checked={checked}
-      onChange={(e) => setChecked(e.target.checked)}
-    />
-  );
+  return <Checkbox label="I agree" checked={checked} onChange={(e) => setChecked(e.target.checked)} />;
 }
 ```
 
@@ -91,11 +85,7 @@ Apply semantic colors to communicate meaning.
 Represents a partially selected state, commonly used in "select all" patterns where some but not all children are selected.
 
 ```tsx
-<Checkbox
-  label="Partially selected"
-  indeterminate
-  onChange={handleChange}
-/>
+<Checkbox label="Partially selected" indeterminate onChange={handleChange} />
 ```
 
 ### Disabled
@@ -136,10 +126,8 @@ function TermsForm() {
     marketing: false,
   });
 
-  const handleChange = (key: keyof typeof agreements) => (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setAgreements(prev => ({ ...prev, [key]: event.target.checked }));
+  const handleChange = (key: keyof typeof agreements) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAgreements((prev) => ({ ...prev, [key]: event.target.checked }));
   };
 
   return (
@@ -200,18 +188,16 @@ function SelectAllExample() {
     { id: 4, name: 'Item 4', selected: false },
   ]);
 
-  const selectedCount = items.filter(item => item.selected).length;
+  const selectedCount = items.filter((item) => item.selected).length;
   const isAllSelected = selectedCount === items.length;
   const isIndeterminate = selectedCount > 0 && selectedCount < items.length;
 
   const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setItems(prev => prev.map(item => ({ ...item, selected: event.target.checked })));
+    setItems((prev) => prev.map((item) => ({ ...item, selected: event.target.checked })));
   };
 
   const handleItemToggle = (id: number) => {
-    setItems(prev => prev.map(item =>
-      item.id === id ? { ...item, selected: !item.selected } : item
-    ));
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, selected: !item.selected } : item)));
   };
 
   return (
@@ -228,7 +214,7 @@ function SelectAllExample() {
       <Divider />
 
       <Stack spacing={1} sx={{ pl: 2 }}>
-        {items.map(item => (
+        {items.map((item) => (
           <Checkbox
             key={item.id}
             label={item.name}
@@ -251,14 +237,10 @@ function ProductFilter() {
     categories: [] as string[],
   });
 
-  const handleCategoryChange = (category: string) => (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setFilters(prev => ({
+  const handleCategoryChange = (category: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilters((prev) => ({
       ...prev,
-      categories: event.target.checked
-        ? [...prev.categories, category]
-        : prev.categories.filter(c => c !== category)
+      categories: event.target.checked ? [...prev.categories, category] : prev.categories.filter((c) => c !== category),
     }));
   };