@ceed/ads 1.35.1 → 1.37.0-next.1

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,66 +87,70 @@ 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
 
-Control the size of all buttons in the group with the `size` prop. Available sizes are `sm`, `md` (default), and `lg`.
+Control the size of all buttons in the group with the `size` prop. Available sizes are `sm` (default), `md`, 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>
 ```
 
 ## Toolbar Actions
@@ -274,7 +295,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
@@ -283,25 +304,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
@@ -312,9 +324,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>
 ```
 
@@ -389,7 +399,7 @@ const [view, setView] = useState('list');
 | ------------- | -------------------------------------------------------------- | -------------- | ----------------------------------- |
 | `children`    | `ReactNode`                                                    | -              | Button elements inside the group    |
 | `variant`     | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'outlined'`   | Visual style applied to all buttons |
-| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`         | Size applied to all buttons         |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`         | Size applied to all buttons         |
 | `color`       | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`    | Color applied to all buttons        |
 | `disabled`    | `boolean`                                                      | `false`        | Disables all buttons in the group   |
 | `orientation` | `'horizontal' \| 'vertical'`                                   | `'horizontal'` | Layout direction                    |

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
+  />
 ```
 
 ## Embedded Calendar Widget
@@ -179,10 +184,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>
@@ -197,19 +199,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())}
     />
   );
 }
@@ -219,10 +216,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;
@@ -282,12 +276,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`.