@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/inputs/Checkbox.md

@@ -25,13 +25,7 @@ import { Checkbox } from '@ceed/ads';
 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)} />;
 }
 ```
 
@@ -58,7 +52,7 @@ Four visual styles are available: `solid` (default when checked), `soft`, `outli
 
 ## Sizes
 
-Three sizes are available: `sm`, `md` (default), and `lg`.
+Three sizes are available: `sm` (default), `md`, and `lg`.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
@@ -87,11 +81,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 Checkbox
@@ -130,10 +120,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 (
@@ -194,18 +182,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 (
@@ -222,7 +208,7 @@ function SelectAllExample() {
       <Divider />
 
       <Stack spacing={1} sx={{ pl: 2 }}>
-        {items.map(item => (
+        {items.map((item) => (
           <Checkbox
             key={item.id}
             label={item.name}
@@ -245,14 +231,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),
     }));
   };
 
@@ -296,7 +278,7 @@ function ProductFilter() {
 | `label`             | `ReactNode`                                                    | -           | Label content displayed next to the checkbox                                              |
 | `onChange`          | `(event: ChangeEvent<HTMLInputElement>) => void`               | -           | Callback when the checked state changes                                                   |
 | `color`             | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme                                                                              |
-| `size`              | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Checkbox size                                                                             |
+| `size`              | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`      | Checkbox size                                                                             |
 | `variant`           | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'solid'`   | Visual style when checked                                                                 |
 | `disabled`          | `boolean`                                                      | `false`     | Disables the checkbox                                                                     |
 | `readOnly`          | `boolean`                                                      | `false`     | Makes the checkbox read-only                                                              |

package/dist/components/inputs/CurrencyInput.md

@@ -74,14 +74,14 @@ Korean Won format with `₩` symbol, comma thousand separators, and no decimal p
 
 ## Sizes
 
-CurrencyInput supports three sizes: `sm`, `md` (default), and `lg`.
+CurrencyInput supports three sizes: `sm` (default), `md`, and `lg`.
 
 ```tsx
 <Stack gap={2}>
-  <CurrencyInput size="sm" label="Small" defaultValue={1000} />
-  <CurrencyInput size="md" label="Medium" defaultValue={1000} />
-  <CurrencyInput size="lg" label="Large" defaultValue={1000} />
-</Stack>
+    <CurrencyInput size="sm" label="Small" defaultValue={1000} />
+    <CurrencyInput size="md" label="Medium" defaultValue={1000} />
+    <CurrencyInput size="lg" label="Large" defaultValue={1000} />
+  </Stack>
 ```
 
 ## Form Features
@@ -267,7 +267,7 @@ function BudgetSetting() {
 | `disabled`     | `boolean`                                                | `false` | Disables the input                                                       |
 | `name`         | `string`                                                 | -       | HTML name attribute for form submission                                  |
 | `placeholder`  | `string`                                                 | -       | Placeholder text when the input is empty                                 |
-| `size`         | `'sm' \| 'md' \| 'lg'`                                   | `'md'`  | Input size                                                               |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                   | `'sm'`  | Input size                                                               |
 | `sx`           | `SxProps`                                                | -       | Custom styles using the MUI system                                       |
 
 ## Accessibility

package/dist/components/inputs/DatePicker.md

@@ -36,13 +36,7 @@ import { DatePicker } from '@ceed/ads';
 function DateForm() {
   const [date, setDate] = useState('');
 
-  return (
-    <DatePicker
-      label="Select Date"
-      value={date}
-      onChange={(e) => setDate(e.target.value)}
-    />
-  );
+  return <DatePicker label="Select Date" value={date} onChange={(e) => setDate(e.target.value)} />;
 }
 ```
 
@@ -57,10 +51,10 @@ DatePicker supports three sizes (`sm`, `md`, `lg`) to fit different layout densi
 
 ```tsx
 <Stack gap={2}>
-  <DatePicker {...args} size="sm" />
-  <DatePicker {...args} size="md" />
-  <DatePicker {...args} size="lg" />
-</Stack>
+    <DatePicker {...args} size="sm" />
+    <DatePicker {...args} size="md" />
+    <DatePicker {...args} size="lg" />
+  </Stack>
 ```
 
 ## Label and Helper Text
@@ -177,18 +171,20 @@ DatePicker works in both controlled mode (you manage `value` via state) and unco
 
 ```tsx
 <Stack gap={2}>
-  <DatePicker {...args} value={value} onChange={e => setValue(e.target.value)} />
-  <Button onClick={() => {
-    const currentValue = new Date(value);
-    currentValue.setDate(currentValue.getDate() + 1);
-    const year = currentValue.getFullYear();
-    const month = String(currentValue.getMonth() + 1).padStart(2, '0');
-    const day = String(currentValue.getDate()).padStart(2, '0');
-    setValue(`${year}/${month}/${day}`);
-  }}>
-  Next Day
-</Button>
-</Stack>
+    <DatePicker {...args} value={value} onChange={(e) => setValue(e.target.value)} />
+    <Button
+      onClick={() => {
+        const currentValue = new Date(value);
+        currentValue.setDate(currentValue.getDate() + 1);
+        const year = currentValue.getFullYear();
+        const month = String(currentValue.getMonth() + 1).padStart(2, "0");
+        const day = String(currentValue.getDate()).padStart(2, "0");
+        setValue(`${year}/${month}/${day}`);
+      }}
+    >
+      Next Day
+    </Button>
+  </Stack>
 ```
 
 ```tsx
@@ -206,42 +202,126 @@ The `format` prop determines the shape of the value emitted through `onChange`,
 
 ```tsx
 <Stack gap={2}>
-  <DatePicker {...args} value={value['YYYY.MM.DD']} label="YYYY.MM.DD" name="YYYY.MM.DD" format="YYYY.MM.DD" onChange={handleChange} />
-  <DatePicker {...args} value={value['YYYY/MM/DD']} label="YYYY/MM/DD" name="YYYY/MM/DD" format="YYYY/MM/DD" onChange={handleChange} />
-  <DatePicker {...args} value={value['MM/DD/YYYY']} label="MM/DD/YYYY" name="MM/DD/YYYY" format="MM/DD/YYYY" onChange={handleChange} />
-  <DatePicker {...args} value={value['YYYY-MM-DD']} label="YYYY-MM-DD" name="YYYY-MM-DD" format="YYYY-MM-DD" onChange={handleChange} />
-  <DatePicker {...args} value={value['DD/MM/YYYY']} label="DD/MM/YYYY" name="DD/MM/YYYY" format="DD/MM/YYYY" onChange={handleChange} />
-  <DatePicker {...args} value={value['DD.MM.YYYY']} label="DD.MM.YYYY" name="DD.MM.YYYY" format="DD.MM.YYYY" onChange={handleChange} />
-</Stack>
+    <DatePicker
+      {...args}
+      value={value["YYYY.MM.DD"]}
+      label="YYYY.MM.DD"
+      name="YYYY.MM.DD"
+      format="YYYY.MM.DD"
+      onChange={handleChange}
+    />
+    <DatePicker
+      {...args}
+      value={value["YYYY/MM/DD"]}
+      label="YYYY/MM/DD"
+      name="YYYY/MM/DD"
+      format="YYYY/MM/DD"
+      onChange={handleChange}
+    />
+    <DatePicker
+      {...args}
+      value={value["MM/DD/YYYY"]}
+      label="MM/DD/YYYY"
+      name="MM/DD/YYYY"
+      format="MM/DD/YYYY"
+      onChange={handleChange}
+    />
+    <DatePicker
+      {...args}
+      value={value["YYYY-MM-DD"]}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      format="YYYY-MM-DD"
+      onChange={handleChange}
+    />
+    <DatePicker
+      {...args}
+      value={value["DD/MM/YYYY"]}
+      label="DD/MM/YYYY"
+      name="DD/MM/YYYY"
+      format="DD/MM/YYYY"
+      onChange={handleChange}
+    />
+    <DatePicker
+      {...args}
+      value={value["DD.MM.YYYY"]}
+      label="DD.MM.YYYY"
+      name="DD.MM.YYYY"
+      format="DD.MM.YYYY"
+      onChange={handleChange}
+    />
+  </Stack>
 ```
 
 ```tsx
 <Stack gap={2}>
-  <DatePicker {...args} value={value1} label="YYYY.MM.DD" name="YYYY.MM.DD" displayFormat="YYYY.MM.DD" onChange={e => {
-    setValue1(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DatePicker {...args} value={value2} label="YYYY/MM/DD" name="YYYY/MM/DD" displayFormat="YYYY/MM/DD" onChange={e => {
-    setValue2(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DatePicker {...args} value={value3} label="MM/DD/YYYY" name="MM/DD/YYYY" displayFormat="MM/DD/YYYY" onChange={e => {
-    setValue3(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DatePicker {...args} value={value4} label="YYYY-MM-DD" name="YYYY-MM-DD" displayFormat="YYYY-MM-DD" onChange={e => {
-    setValue4(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DatePicker {...args} value={value5} label="DD/MM/YYYY" name="DD/MM/YYYY" displayFormat="DD/MM/YYYY" onChange={e => {
-    setValue5(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DatePicker {...args} value={value6} label="DD.MM.YYYY" name="DD.MM.YYYY" displayFormat="DD.MM.YYYY" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-</Stack>
+    <DatePicker
+      {...args}
+      value={value1}
+      label="YYYY.MM.DD"
+      name="YYYY.MM.DD"
+      displayFormat="YYYY.MM.DD"
+      onChange={(e) => {
+        setValue1(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DatePicker
+      {...args}
+      value={value2}
+      label="YYYY/MM/DD"
+      name="YYYY/MM/DD"
+      displayFormat="YYYY/MM/DD"
+      onChange={(e) => {
+        setValue2(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DatePicker
+      {...args}
+      value={value3}
+      label="MM/DD/YYYY"
+      name="MM/DD/YYYY"
+      displayFormat="MM/DD/YYYY"
+      onChange={(e) => {
+        setValue3(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DatePicker
+      {...args}
+      value={value4}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      displayFormat="YYYY-MM-DD"
+      onChange={(e) => {
+        setValue4(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DatePicker
+      {...args}
+      value={value5}
+      label="DD/MM/YYYY"
+      name="DD/MM/YYYY"
+      displayFormat="DD/MM/YYYY"
+      onChange={(e) => {
+        setValue5(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DatePicker
+      {...args}
+      value={value6}
+      label="DD.MM.YYYY"
+      name="DD.MM.YYYY"
+      displayFormat="DD.MM.YYYY"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+  </Stack>
 ```
 
 **Supported format tokens:**
@@ -263,22 +343,32 @@ Use the `presets` prop to display a list of quick-select options alongside the c
 Each preset's `value` must match the component's `format` prop. When the current value matches a preset, that preset is automatically highlighted -- regardless of whether the value was set via the preset button or by selecting the same date on the calendar.
 
 ```tsx
-<DatePicker {...args} value={value} onChange={e => {
-  setValue(e.target.value);
-  args.onChange?.(e);
-}} presets={[{
-  label: 'Today',
-  value: fmt(today)
-}, {
-  label: 'Yesterday',
-  value: daysAgo(1)
-}, {
-  label: '3 days ago',
-  value: daysAgo(3)
-}, {
-  label: '1 week ago',
-  value: daysAgo(7)
-}]} />
+<DatePicker
+    {...args}
+    value={value}
+    onChange={(e) => {
+      setValue(e.target.value);
+      args.onChange?.(e);
+    }}
+    presets={[
+      {
+        label: "Today",
+        value: fmt(today)
+      },
+      {
+        label: "Yesterday",
+        value: daysAgo(1)
+      },
+      {
+        label: "3 days ago",
+        value: daysAgo(3)
+      },
+      {
+        label: "1 week ago",
+        value: daysAgo(7)
+      }
+    ]}
+  />
 ```
 
 ```tsx
@@ -309,16 +399,22 @@ function QuickDateSelect() {
 Pair DatePicker with an external reset button to programmatically clear the value.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '10px'
-}}>
-<DatePicker {...props} value={value} onChange={event => {
-  onChange?.(event);
-  setValue(event.target.value);
-}} />
-<Button onClick={() => setValue('')}>Reset</Button>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "10px"
+    }}
+  >
+    <DatePicker
+      {...props}
+      value={value}
+      onChange={(event) => {
+        onChange?.(event);
+        setValue(event.target.value);
+      }}
+    />
+    <Button onClick={() => setValue("")}>Reset</Button>
+  </div>
 ```
 
 ### Hide Clear Button
@@ -339,12 +435,17 @@ Multiple DatePicker instances can share the same value for dependent field scena
 
 ```tsx
 <Stack gap={2}>
-  <DatePicker label="Select Date" value={value} inputReadOnly onChange={e => {
-    setValue(e.target.value);
-    setValue2(e.target.value);
-  }} />
-  <DatePicker label="Synchronized" value={value2} disabled />
-</Stack>
+    <DatePicker
+      label="Select Date"
+      value={value}
+      inputReadOnly
+      onChange={(e) => {
+        setValue(e.target.value);
+        setValue2(e.target.value);
+      }}
+    />
+    <DatePicker label="Synchronized" value={value2} disabled />
+  </Stack>
 ```
 
 ## Form with Validation
@@ -410,9 +511,7 @@ function AppointmentPicker() {
 function RegionalDateField({ locale }: { locale: string }) {
   const [date, setDate] = useState('');
 
-  const displayFormat = locale === 'en-US' ? 'MM/DD/YYYY'
-    : locale === 'en-GB' ? 'DD/MM/YYYY'
-    : 'YYYY-MM-DD';
+  const displayFormat = locale === 'en-US' ? 'MM/DD/YYYY' : locale === 'en-GB' ? 'DD/MM/YYYY' : 'YYYY-MM-DD';
 
   return (
     <DatePicker
@@ -431,51 +530,71 @@ function RegionalDateField({ locale }: { locale: string }) {
 1. **Always provide a label**
 
 ```tsx
-{/* Do */}
-<DatePicker label="Birth Date" />
+{
+  /* Do */
+}
+<DatePicker label="Birth Date" />;
 
-{/* Don't */}
-<DatePicker placeholder="Birth Date" />
+{
+  /* Don't */
+}
+<DatePicker placeholder="Birth Date" />;
 ```
 
 2. **Keep value format consistent with the `format` prop**
 
 ```tsx
-{/* Do */}
-<DatePicker format="YYYY/MM/DD" value="2024/04/15" />
+{
+  /* Do */
+}
+<DatePicker format="YYYY/MM/DD" value="2024/04/15" />;
 
-{/* Don't -- mismatched format causes unexpected behavior */}
-<DatePicker format="YYYY/MM/DD" value="04/15/2024" />
+{
+  /* Don't -- mismatched format causes unexpected behavior */
+}
+<DatePicker format="YYYY/MM/DD" value="04/15/2024" />;
 ```
 
 3. **Use `displayFormat` to separate API format from UI format**
 
 ```tsx
-{/* Do -- consistent API format, locale-appropriate display */}
-<DatePicker format="YYYY-MM-DD" displayFormat="MM/DD/YYYY" />
+{
+  /* Do -- consistent API format, locale-appropriate display */
+}
+<DatePicker format="YYYY-MM-DD" displayFormat="MM/DD/YYYY" />;
 
-{/* Don't -- changing format just for display affects onChange values */}
-<DatePicker format="MM/DD/YYYY" />
+{
+  /* Don't -- changing format just for display affects onChange values */
+}
+<DatePicker format="MM/DD/YYYY" />;
 ```
 
 4. **Set appropriate date boundaries for your use case**
 
 ```tsx
-{/* Do */}
-<DatePicker label="Birth Date" disableFuture minDate="1900/01/01" />
+{
+  /* Do */
+}
+<DatePicker label="Birth Date" disableFuture minDate="1900/01/01" />;
 
-{/* Don't -- unrestricted date range for a birth date field */}
-<DatePicker label="Birth Date" />
+{
+  /* Don't -- unrestricted date range for a birth date field */
+}
+<DatePicker label="Birth Date" />;
 ```
 
 5. **Show validation feedback with error and helperText**
 
 ```tsx
-{/* Do */}
-<DatePicker error={!isValid} helperText={errorMessage} />
+{
+  /* Do */
+}
+<DatePicker error={!isValid} helperText={errorMessage} />;
 
-{/* Don't -- silently ignore invalid state */}
-<DatePicker value={invalidDate} />
+{
+  /* Don't -- silently ignore invalid state */
+}
+<DatePicker value={invalidDate} />;
 ```
 
 ## Props and Customization