@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/inputs/MonthRangePicker.md

@@ -36,11 +36,7 @@ function MonthRangeForm() {
   const [monthRange, setMonthRange] = useState('');
 
   return (
-    <MonthRangePicker
-      label="Select Month Range"
-      value={monthRange}
-      onChange={(e) => setMonthRange(e.target.value)}
-    />
+    <MonthRangePicker label="Select Month Range" value={monthRange} onChange={(e) => setMonthRange(e.target.value)} />
   );
 }
 ```
@@ -56,10 +52,10 @@ MonthRangePicker supports three sizes (`sm`, `md`, `lg`) for different layouts a
 
 ```tsx
 <Stack gap={2}>
-  <MonthRangePicker size="sm" />
-  <MonthRangePicker size="md" />
-  <MonthRangePicker size="lg" />
-</Stack>
+    <MonthRangePicker size="sm" />
+    <MonthRangePicker size="md" />
+    <MonthRangePicker size="lg" />
+  </Stack>
 ```
 
 ## Form Field Features
@@ -157,21 +153,23 @@ The parent component manages the month range state via the `value` and `onChange
 
 ```tsx
 <Stack gap={2}>
-  <MonthRangePicker {...args} value={value} onChange={e => setValue(e.target.value)} />
-  <Button onClick={() => {
-    const [start, end] = value.split(' - ');
-    function shiftMonth(dateString: string) {
-      const currentValue = new Date(dateString);
-      currentValue.setFullYear(currentValue.getFullYear() + 1);
-      const year = currentValue.getFullYear();
-      const month = String(currentValue.getMonth() + 1).padStart(2, '0');
-      return `${year}/${month}`;
-    }
-    setValue(`${shiftMonth(start)} - ${shiftMonth(end)}`);
-  }}>
-  Shift Year
-</Button>
-</Stack>
+    <MonthRangePicker {...args} value={value} onChange={(e) => setValue(e.target.value)} />
+    <Button
+      onClick={() => {
+        const [start, end] = value.split(" - ");
+        function shiftMonth(dateString: string) {
+          const currentValue = new Date(dateString);
+          currentValue.setFullYear(currentValue.getFullYear() + 1);
+          const year = currentValue.getFullYear();
+          const month = String(currentValue.getMonth() + 1).padStart(2, "0");
+          return `${year}/${month}`;
+        }
+        setValue(`${shiftMonth(start)} - ${shiftMonth(end)}`);
+      }}
+    >
+      Shift Year
+    </Button>
+  </Stack>
 ```
 
 ### Uncontrolled
@@ -194,11 +192,39 @@ The value is a string with start and end months separated by `-` (e.g., `"2024/0
 
 ```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>
+    <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>
 ```
 
 ### With Reset Button
@@ -206,15 +232,21 @@ The value is a string with start and end months separated by `-` (e.g., `"2024/0
 A controlled example with an external reset button to clear the selected range.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '10px'
-}}>
-<MonthRangePicker {...props} value={value} onChange={event => {
-  setValue(event.target.value);
-}} />
-<Button onClick={() => setValue('')}>Reset</Button>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "10px"
+    }}
+  >
+    <MonthRangePicker
+      {...props}
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+    <Button onClick={() => setValue("")}>Reset</Button>
+  </div>
 ```
 
 ## Fiscal Period Report
@@ -267,9 +299,7 @@ function SubscriptionForm() {
       onChange={(e) => setDuration(e.target.value)}
       disablePast
       helperText={
-        getMonthsCount(duration) > 0
-          ? `${getMonthsCount(duration)} month subscription`
-          : 'Select start and end months'
+        getMonthsCount(duration) > 0 ? `${getMonthsCount(duration)} month subscription` : 'Select start and end months'
       }
       required
     />
@@ -299,11 +329,7 @@ function YearOverYearComparison() {
         onChange={(e) => setCurrentPeriod(e.target.value)}
         disableFuture
       />
-      <MonthRangePicker
-        label="Previous Period (Auto-calculated)"
-        value={getPreviousPeriod(currentPeriod)}
-        disabled
-      />
+      <MonthRangePicker label="Previous Period (Auto-calculated)" value={getPreviousPeriod(currentPeriod)} disabled />
     </Stack>
   );
 }
@@ -331,9 +357,7 @@ function YearOverYearComparison() {
 
 ```tsx
 // ✅ Good: Dynamic helper text
-<MonthRangePicker
-  helperText={`${getMonthsCount(range)} months selected`}
-/>
+<MonthRangePicker helperText={`${getMonthsCount(range)} months selected`} />
 ```
 
 3. **Set reasonable date constraints**: Use `minDate`, `maxDate`, `disableFuture`, or `disablePast` to prevent invalid selections at the UI level.

package/dist/components/inputs/PercentageInput.md

@@ -36,28 +36,20 @@ import { PercentageInput } from '@ceed/ads';
 function MyComponent() {
   const [rate, setRate] = React.useState(0);
 
-  return (
-    <PercentageInput
-      label="Tax Rate"
-      value={rate}
-      onChange={(e) => setRate(e.target.value)}
-      min={0}
-      max={100}
-    />
-  );
+  return <PercentageInput label="Tax Rate" value={rate} onChange={(e) => setRate(e.target.value)} min={0} max={100} />;
 }
 ```
 
 ## Sizes
 
-PercentageInput supports three sizes: `sm`, `md` (default), and `lg`.
+PercentageInput supports three sizes: `sm` (default), `md`, and `lg`.
 
 ```tsx
 <Stack gap={2}>
-  <PercentageInput size="sm" label="Small" />
-  <PercentageInput size="md" label="Medium" />
-  <PercentageInput size="lg" label="Large" />
-</Stack>
+    <PercentageInput size="sm" label="Small" />
+    <PercentageInput size="md" label="Medium" />
+    <PercentageInput size="lg" label="Large" />
+  </Stack>
 ```
 
 ## Form Features
@@ -146,8 +138,10 @@ Set `min` and `max` to enforce value boundaries. When the entered value is outsi
 ```
 
 ```tsx
-<PercentageInput min={10} defaultValue={5} />
-{/* Shows error because 5 < 10 */}
+<PercentageInput min={10} defaultValue={5} />;
+{
+  /* Shows error because 5 < 10 */
+}
 ```
 
 ### Maximum Value
@@ -163,8 +157,10 @@ Set `min` and `max` to enforce value boundaries. When the entered value is outsi
 ```
 
 ```tsx
-<PercentageInput max={500} defaultValue={5000} />
-{/* Shows error because 5000 > 500 */}
+<PercentageInput max={500} defaultValue={5000} />;
+{
+  /* Shows error because 5000 > 500 */
+}
 ```
 
 ## Decimal Scale
@@ -219,20 +215,8 @@ function DiscountSetting() {
 function TaxRateForm() {
   return (
     <Stack gap={2}>
-      <PercentageInput
-        label="VAT Rate"
-        defaultValue={10}
-        maxDecimalScale={2}
-        min={0}
-        max={100}
-      />
-      <PercentageInput
-        label="Local Tax Rate"
-        defaultValue={2.5}
-        maxDecimalScale={2}
-        min={0}
-        max={50}
-      />
+      <PercentageInput label="VAT Rate" defaultValue={10} maxDecimalScale={2} min={0} max={100} />
+      <PercentageInput label="Local Tax Rate" defaultValue={2.5} maxDecimalScale={2} min={0} max={50} />
     </Stack>
   );
 }
@@ -295,7 +279,7 @@ function CompletionTracker({ value, onChange }) {
 | `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                     |
 
 > **Note**: PercentageInput also accepts all Input props and Framer Motion props.