@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/inputs/Input.md

@@ -44,14 +44,7 @@ import { Input } from '@ceed/ads';
 function MyComponent() {
   const [value, setValue] = useState('');
 
-  return (
-    <Input
-      label="Name"
-      placeholder="Enter your name"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
+  return <Input label="Name" placeholder="Enter your name" value={value} onChange={(e) => setValue(e.target.value)} />;
 }
 ```
 
@@ -61,23 +54,23 @@ Input supports four visual styles: `outlined` (default), `solid`, `soft`, and `p
 
 ```tsx
 <>
-  <Input placeholder="Type in here…" variant="solid" />
-  <Input placeholder="Type in here…" variant="soft" />
-  <Input placeholder="Type in here…" variant="outlined" />
-  <Input placeholder="Type in here…" variant="plain" />
-</>
+    <Input placeholder="Type in here…" variant="solid" />
+    <Input placeholder="Type in here…" variant="soft" />
+    <Input placeholder="Type in here…" variant="outlined" />
+    <Input placeholder="Type in here…" variant="plain" />
+  </>
 ```
 
 ## Sizes
 
-Three sizes are available: `sm`, `md` (default), and `lg`.
+Three sizes are available: `sm` (default), `md`, and `lg`.
 
 ```tsx
 <>
-  <Input {...args} size="lg" />
-  <Input {...args} size="md" />
-  <Input {...args} size="sm" />
-</>
+    <Input {...args} size="lg" />
+    <Input {...args} size="md" />
+    <Input {...args} size="sm" />
+  </>
 ```
 
 ## Label and Helper Text
@@ -88,8 +81,8 @@ The `label` prop renders a form label above the input.
 
 ```tsx
 <>
-  <Input placeholder="Type in here…" label="Label" />
-</>
+    <Input placeholder="Type in here…" label="Label" />
+  </>
 ```
 
 ### Helper Text
@@ -98,8 +91,8 @@ The `helperText` prop renders descriptive text below the input.
 
 ```tsx
 <>
-  <Input placeholder="Type in here…" helperText="I'm helper text" />
-</>
+    <Input placeholder="Type in here…" helperText="I'm helper text" />
+  </>
 ```
 
 ## States
@@ -118,8 +111,8 @@ Set `error` to visually indicate a validation failure. Combine with `helperText`
 
 ```tsx
 <>
-  <Input placeholder="Invalid input" label="label" error />
-</>
+    <Input placeholder="Invalid input" label="label" error />
+  </>
 ```
 
 ### Required
@@ -141,40 +134,66 @@ Use `startDecorator` and `endDecorator` to add icons, buttons, or other elements
 
 ```tsx
 <Stack spacing={3}>
-  <Input placeholder="Amount" startDecorator={{
-    dollar: '$',
-    baht: '฿',
-    yen: '¥'
-  }[currency]} endDecorator={<React.Fragment>
-  <Divider orientation="vertical" />
-  <Select variant="plain" value={currency} options={[{
-    value: 'dollar',
-    label: 'US dollar'
-  }, {
-    value: 'baht',
-    label: 'Thai baht'
-  }, {
-    value: 'yen',
-    label: 'Japanese yen'
-  }]} onChange={e => setCurrency(e.target.value!)} slotProps={{
-    listbox: {
-      variant: 'outlined'
-    }
-  }} sx={{
-    mr: -1.5,
-    '&:hover': {
-      bgcolor: 'transparent'
-    }
-  }} />
-</React.Fragment>} sx={{
-width: 300
-}} />
-<Input placeholder="Your location" startDecorator={<Button variant="soft" color="neutral" startDecorator={<LocationOn />}>
-  Locate
-</Button>} sx={{
-width: 300
-}} />
-</Stack>
+    <Input
+      placeholder="Amount"
+      startDecorator={
+        {
+          dollar: "$",
+          baht: "฿",
+          yen: "¥"
+        }[currency]
+      }
+      endDecorator={
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            options={[
+              {
+                value: "dollar",
+                label: "US dollar"
+              },
+              {
+                value: "baht",
+                label: "Thai baht"
+              },
+              {
+                value: "yen",
+                label: "Japanese yen"
+              }
+            ]}
+            onChange={(e) => setCurrency(e.target.value!)}
+            slotProps={{
+              listbox: {
+                variant: "outlined"
+              }
+            }}
+            sx={{
+              mr: -1.5,
+              "&:hover": {
+                bgcolor: "transparent"
+              }
+            }}
+          />
+        </React.Fragment>
+      }
+      sx={{
+        width: 300
+      }}
+    />
+    <Input
+      placeholder="Your location"
+      startDecorator={
+        <Button variant="soft" color="neutral" startDecorator={<LocationOn />}>
+          Locate
+        </Button>
+      }
+      sx={{
+        width: 300
+      }}
+    />
+  </Stack>
 ```
 
 When using `endDecorator` together with `enableClearable`, both elements are displayed side by side:
@@ -194,15 +213,12 @@ Set `enableClearable` to show a clear button when the input has a value. Clickin
 
 ```tsx
 <>
-  <Input placeholder="Type in here…" label="Label" enableClearable />
-</>
+    <Input placeholder="Type in here…" label="Label" enableClearable />
+  </>
 ```
 
 ```tsx
-<Input
-  enableClearable
-  placeholder="Type something and clear it"
-/>
+<Input enableClearable placeholder="Type something and clear it" />
 ```
 
 ## Password Input
@@ -211,15 +227,27 @@ Setting `type="password"` creates a password field with an automatic visibility
 
 ```tsx
 <Stack spacing={3}>
-  <Typography level="body-md">Default password input with toggle button:</Typography>
-  <Input {...args} placeholder="Enter password" type="password" label="Password" />
+    <Typography level="body-md">Default password input with toggle button:</Typography>
+    <Input {...args} placeholder="Enter password" type="password" label="Password" />
 
-  <Typography level="body-md">Disabled password input:</Typography>
-  <Input {...args} placeholder="Enter password" type="password" label="Disabled Password" disabled />
+    <Typography level="body-md">Disabled password input:</Typography>
+    <Input
+      {...args}
+      placeholder="Enter password"
+      type="password"
+      label="Disabled Password"
+      disabled
+    />
 
-  <Typography level="body-md">Password input with toggle button disabled:</Typography>
-  <Input {...args} placeholder="Enter password" type="password" label="No Toggle" disableTogglePasswordButton />
-</Stack>
+    <Typography level="body-md">Password input with toggle button disabled:</Typography>
+    <Input
+      {...args}
+      placeholder="Enter password"
+      type="password"
+      label="No Toggle"
+      disableTogglePasswordButton
+    />
+  </Stack>
 ```
 
 ### Disabling the Password Toggle
@@ -236,12 +264,20 @@ Password inputs (`type="password"`) do not support custom `endDecorator` because
 
 ```tsx
 <Stack spacing={3}>
-  <Typography level="body-md">When type="password", the endDecorator is not supported:</Typography>
-  <Input {...args} placeholder="Enter password" type="password" label="Password with endDecorator (will show warning)" endDecorator={<Chip color="primary">Hi</Chip>} />
+    <Typography level="body-md">
+      When type="password", the endDecorator is not supported:
+    </Typography>
+    <Input
+      {...args}
+      placeholder="Enter password"
+      type="password"
+      label="Password with endDecorator (will show warning)"
+      endDecorator={<Chip color="primary">Hi</Chip>}
+    />
 
-  <Typography level="body-md">The password toggle button takes precedence:</Typography>
-  <Input {...args} placeholder="Enter password" type="password" label="Password" />
-</Stack>
+    <Typography level="body-md">The password toggle button takes precedence:</Typography>
+    <Input {...args} placeholder="Enter password" type="password" label="Password" />
+  </Stack>
 ```
 
 ## Form Control
@@ -250,9 +286,9 @@ Combining `label`, `helperText`, and `error` produces a complete form field.
 
 ```tsx
 <>
-  <Input placeholder="Type in here..." helperText="I'm helper text" label="Label" />
-  <Input placeholder="Invalid input" helperText="I'm helper text" label="Label" error />
-</>
+    <Input placeholder="Type in here..." helperText="I'm helper text" label="Label" />
+    <Input placeholder="Invalid input" helperText="I'm helper text" label="Label" error />
+  </>
 ```
 
 ```tsx
@@ -277,18 +313,20 @@ Use `value` and `onChange` for controlled behavior.
 
 ```tsx
 <>
-  <Input placeholder="Type in here…" label="Label" enableClearable value={value} onChange={handleChange} />
-</>
+    <Input
+      placeholder="Type in here…"
+      label="Label"
+      enableClearable
+      value={value}
+      onChange={handleChange}
+    />
+  </>
 ```
 
 ```tsx
 const [value, setValue] = useState('');
 
-<Input
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-  placeholder="Controlled input"
-/>
+<Input value={value} onChange={(e) => setValue(e.target.value)} placeholder="Controlled input" />;
 ```
 
 ### Uncontrolled
@@ -332,18 +370,8 @@ function LoginForm({ onSubmit }) {
   return (
     <form onSubmit={onSubmit}>
       <Stack spacing={2}>
-        <Input
-          label="Email"
-          type="email"
-          required
-          placeholder="Enter your email"
-        />
-        <Input
-          label="Password"
-          type="password"
-          required
-          placeholder="Enter your password"
-        />
+        <Input label="Email" type="email" required placeholder="Enter your email" />
+        <Input label="Password" type="password" required placeholder="Enter your password" />
         <Button type="submit">Sign In</Button>
       </Stack>
     </form>
@@ -363,7 +391,12 @@ function ValidatedForm() {
   const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
   return (
-    <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        setSubmitted(true);
+      }}
+    >
       <Stack spacing={2}>
         <Input
           label="Email"
@@ -401,7 +434,7 @@ function ValidatedForm() {
 | `readOnly`                    | `boolean`                                                      | `false`      | Makes the input read-only (focusable but not editable)                          |
 | `required`                    | `boolean`                                                      | `false`      | Marks the field as required (adds asterisk to label)                            |
 | `name`                        | `string`                                                       | -            | HTML name attribute for form submission                                         |
-| `size`                        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Input size                                                                      |
+| `size`                        | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`       | Input size                                                                      |
 | `variant`                     | `'outlined' \| 'solid' \| 'soft' \| 'plain'`                   | `'outlined'` | Visual style variant                                                            |
 | `color`                       | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`  | Color scheme                                                                    |
 | `startDecorator`              | `ReactNode`                                                    | -            | Content rendered at the start of the input                                      |

package/dist/components/inputs/MonthPicker.md

@@ -35,13 +35,7 @@ import { MonthPicker } from '@ceed/ads';
 function MonthForm() {
   const [month, setMonth] = useState('');
 
-  return (
-    <MonthPicker
-      label="Select Month"
-      value={month}
-      onChange={(e) => setMonth(e.target.value)}
-    />
-  );
+  return <MonthPicker label="Select Month" value={month} onChange={(e) => setMonth(e.target.value)} />;
 }
 ```
 
@@ -56,10 +50,10 @@ MonthPicker supports three sizes (`sm`, `md`, `lg`) for different layouts and co
 
 ```tsx
 <Stack gap={2}>
-  <MonthPicker size="sm" />
-  <MonthPicker size="md" />
-  <MonthPicker size="lg" />
-</Stack>
+    <MonthPicker size="sm" />
+    <MonthPicker size="md" />
+    <MonthPicker size="lg" />
+  </Stack>
 ```
 
 ## Form Field Features
@@ -157,17 +151,19 @@ The parent component manages the month state via the `value` and `onChange` prop
 
 ```tsx
 <Stack gap={2}>
-  <MonthPicker {...args} value={value} onChange={e => setValue(e.target.value)} />
-  <Button onClick={() => {
-    const currentValue = new Date(value);
-    currentValue.setMonth(currentValue.getMonth() + 1);
-    const year = currentValue.getFullYear();
-    const month = String(currentValue.getMonth() + 1).padStart(2, '0');
-    setValue(`${year}/${month}/01`);
-  }}>
-  Next Month
-</Button>
-</Stack>
+    <MonthPicker {...args} value={value} onChange={(e) => setValue(e.target.value)} />
+    <Button
+      onClick={() => {
+        const currentValue = new Date(value);
+        currentValue.setMonth(currentValue.getMonth() + 1);
+        const year = currentValue.getFullYear();
+        const month = String(currentValue.getMonth() + 1).padStart(2, "0");
+        setValue(`${year}/${month}/01`);
+      }}
+    >
+      Next Month
+    </Button>
+  </Stack>
 ```
 
 ### Uncontrolled
@@ -190,13 +186,55 @@ The `format` prop determines the shape of the value emitted by `onChange`. Each
 
 ```tsx
 <Stack gap={2}>
-  <MonthPicker {...args} value={value['YYYY.MM.DD']} label="YYYY.MM.DD" name="YYYY.MM.DD" format="YYYY.MM.DD" onChange={handleChange} />
-  <MonthPicker {...args} value={value['YYYY/MM/DD']} label="YYYY/MM/DD" name="YYYY/MM/DD" format="YYYY/MM/DD" onChange={handleChange} />
-  <MonthPicker {...args} value={value['MM/DD/YYYY']} label="MM/DD/YYYY" name="MM/DD/YYYY" format="MM/DD/YYYY" onChange={handleChange} />
-  <MonthPicker {...args} value={value['YYYY-MM-DD']} label="YYYY-MM-DD" name="YYYY-MM-DD" format="YYYY-MM-DD" onChange={handleChange} />
-  <MonthPicker {...args} value={value['DD/MM/YYYY']} label="DD/MM/YYYY" name="DD/MM/YYYY" format="DD/MM/YYYY" onChange={handleChange} />
-  <MonthPicker {...args} value={value['DD.MM.YYYY']} label="DD.MM.YYYY" name="DD.MM.YYYY" format="DD.MM.YYYY" onChange={handleChange} />
-</Stack>
+    <MonthPicker
+      {...args}
+      value={value["YYYY.MM.DD"]}
+      label="YYYY.MM.DD"
+      name="YYYY.MM.DD"
+      format="YYYY.MM.DD"
+      onChange={handleChange}
+    />
+    <MonthPicker
+      {...args}
+      value={value["YYYY/MM/DD"]}
+      label="YYYY/MM/DD"
+      name="YYYY/MM/DD"
+      format="YYYY/MM/DD"
+      onChange={handleChange}
+    />
+    <MonthPicker
+      {...args}
+      value={value["MM/DD/YYYY"]}
+      label="MM/DD/YYYY"
+      name="MM/DD/YYYY"
+      format="MM/DD/YYYY"
+      onChange={handleChange}
+    />
+    <MonthPicker
+      {...args}
+      value={value["YYYY-MM-DD"]}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      format="YYYY-MM-DD"
+      onChange={handleChange}
+    />
+    <MonthPicker
+      {...args}
+      value={value["DD/MM/YYYY"]}
+      label="DD/MM/YYYY"
+      name="DD/MM/YYYY"
+      format="DD/MM/YYYY"
+      onChange={handleChange}
+    />
+    <MonthPicker
+      {...args}
+      value={value["DD.MM.YYYY"]}
+      label="DD.MM.YYYY"
+      name="DD.MM.YYYY"
+      format="DD.MM.YYYY"
+      onChange={handleChange}
+    />
+  </Stack>
 ```
 
 ### Display Formats
@@ -205,43 +243,108 @@ The `displayFormat` prop controls what users see in the input field, independent
 
 ```tsx
 <Stack gap={2}>
-  <MonthPicker {...args} value={value1} label="YYYY.MM" name="YYYY.MM" displayFormat="YYYY.MM" onChange={e => {
-    setValue1(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value2} label="YYYY/MM" name="YYYY/MM" displayFormat="YYYY/MM" onChange={e => {
-    setValue2(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value3} label="MM/YYYY" name="MM/YYYY" displayFormat="MM/YYYY" onChange={e => {
-    setValue3(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value4} label="YYYY-MM" name="YYYY-MM" displayFormat="YYYY-MM" onChange={e => {
-    setValue4(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value5} label="YYYY-MM-DD" name="YYYY-MM-DD" displayFormat="YYYY-MM-DD" onChange={e => {
-    setValue5(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value6} label="MMMM YYYY" name="MMMM YYYY" displayFormat="MMMM YYYY" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value6} label="MMM YYYY" name="MMM YYYY" displayFormat="MMM YYYY" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value6} label="MMM YYYY (en-US)" name="MMM YYYY (en-US)" displayFormat="MMM YYYY" locale="en-US" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <MonthPicker {...args} value={value6} label="MMM YYYY (ko-KR)" name="MMM YYYY (ko-KR)" displayFormat="MMM YYYY" locale="ko-KR" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-</Stack>
+    <MonthPicker
+      {...args}
+      value={value1}
+      label="YYYY.MM"
+      name="YYYY.MM"
+      displayFormat="YYYY.MM"
+      onChange={(e) => {
+        setValue1(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value2}
+      label="YYYY/MM"
+      name="YYYY/MM"
+      displayFormat="YYYY/MM"
+      onChange={(e) => {
+        setValue2(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value3}
+      label="MM/YYYY"
+      name="MM/YYYY"
+      displayFormat="MM/YYYY"
+      onChange={(e) => {
+        setValue3(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value4}
+      label="YYYY-MM"
+      name="YYYY-MM"
+      displayFormat="YYYY-MM"
+      onChange={(e) => {
+        setValue4(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value5}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      displayFormat="YYYY-MM-DD"
+      onChange={(e) => {
+        setValue5(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value6}
+      label="MMMM YYYY"
+      name="MMMM YYYY"
+      displayFormat="MMMM YYYY"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value6}
+      label="MMM YYYY"
+      name="MMM YYYY"
+      displayFormat="MMM YYYY"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value6}
+      label="MMM YYYY (en-US)"
+      name="MMM YYYY (en-US)"
+      displayFormat="MMM YYYY"
+      locale="en-US"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <MonthPicker
+      {...args}
+      value={value6}
+      label="MMM YYYY (ko-KR)"
+      name="MMM YYYY (ko-KR)"
+      displayFormat="MMM YYYY"
+      locale="ko-KR"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+  </Stack>
 ```
 
 ### With Reset Button
@@ -249,15 +352,21 @@ The `displayFormat` prop controls what users see in the input field, independent
 A controlled example with an external reset button to clear the selected value.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '10px'
-}}>
-<MonthPicker {...props} value={value} onChange={event => {
-  setValue(event.target.value);
-}} />
-<Button onClick={() => setValue('')}>Reset</Button>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "10px"
+    }}
+  >
+    <MonthPicker
+      {...props}
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+    <Button onClick={() => setValue("")}>Reset</Button>
+  </div>
 ```
 
 ## Billing Period Selection
@@ -335,21 +444,14 @@ function CreditCardExpiry() {
 
 ```tsx
 // ✅ Good: Separate concerns
-<MonthPicker
-  format="YYYY/MM/DD"
-  displayFormat="MMMM YYYY"
-/>
+<MonthPicker format="YYYY/MM/DD" displayFormat="MMMM YYYY" />
 ```
 
 3. **Provide context with `helperText`**: Guide users on what they are selecting, especially when constraints are applied.
 
 ```tsx
 // ✅ Good: Clear guidance
-<MonthPicker
-  label="Statement Month"
-  helperText="Select the month for your account statement"
-  disableFuture
-/>
+<MonthPicker label="Statement Month" helperText="Select the month for your account statement" disableFuture />
 ```
 
 4. **Set reasonable date constraints**: Use `minDate`, `maxDate`, `disableFuture`, or `disablePast` to prevent invalid selections at the UI level.