@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/DateRangePicker.md

@@ -56,13 +56,7 @@ import { DateRangePicker } from '@ceed/cds';
 function DateRangeForm() {
   const [dateRange, setDateRange] = useState('');
 
-  return (
-    <DateRangePicker
-      label="Select Date Range"
-      value={dateRange}
-      onChange={(e) => setDateRange(e.target.value)}
-    />
-  );
+  return <DateRangePicker label="Select Date Range" value={dateRange} onChange={(e) => setDateRange(e.target.value)} />;
 }
 ```
 
@@ -72,10 +66,10 @@ DateRangePicker supports three sizes (`sm`, `md`, `lg`) to fit different layouts
 
 ```tsx
 <Stack gap={2}>
-  <DateRangePicker size="sm" />
-  <DateRangePicker size="md" />
-  <DateRangePicker size="lg" />
-</Stack>
+    <DateRangePicker size="sm" />
+    <DateRangePicker size="md" />
+    <DateRangePicker size="lg" />
+  </Stack>
 ```
 
 ## Form Features
@@ -183,25 +177,31 @@ In controlled mode, the parent component manages the date range state via `value
 
 ```tsx
 <Stack gap={2}>
-  <DateRangePicker {...args} onChange={e => {
-    args.onChange?.(e);
-    setValue(e.target.value);
-  }} value={value} />
-  <Button onClick={() => {
-    const [start, end] = value.split(' - ');
-    function shiftMonth(dateString: string) {
-      const currentValue = new Date(dateString);
-      currentValue.setMonth(currentValue.getMonth() + 1);
-      const year = currentValue.getFullYear();
-      const month = String(currentValue.getMonth() + 1).padStart(2, '0');
-      const day = String(currentValue.getDate()).padStart(2, '0');
-      return `${year}/${month}/${day}`;
-    }
-    setValue(`${shiftMonth(start)} - ${shiftMonth(end)}`);
-  }}>
-  Shift Month
-</Button>
-</Stack>
+    <DateRangePicker
+      {...args}
+      onChange={(e) => {
+        args.onChange?.(e);
+        setValue(e.target.value);
+      }}
+      value={value}
+    />
+    <Button
+      onClick={() => {
+        const [start, end] = value.split(" - ");
+        function shiftMonth(dateString: string) {
+          const currentValue = new Date(dateString);
+          currentValue.setMonth(currentValue.getMonth() + 1);
+          const year = currentValue.getFullYear();
+          const month = String(currentValue.getMonth() + 1).padStart(2, "0");
+          const day = String(currentValue.getDate()).padStart(2, "0");
+          return `${year}/${month}/${day}`;
+        }
+        setValue(`${shiftMonth(start)} - ${shiftMonth(end)}`);
+      }}
+    >
+      Shift Month
+    </Button>
+  </Stack>
 ```
 
 ### Uncontrolled
@@ -225,31 +225,73 @@ The `format` prop controls the format of the value returned in `onChange`. The i
 
 ```tsx
 <Stack gap={2}>
-  <DateRangePicker {...args} value={value1} label="YYYY.MM.DD" name="YYYY.MM.DD" format="YYYY.MM.DD" onChange={e => {
-    setValue1(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value2} label="YYYY/MM/DD" name="YYYY/MM/DD" format="YYYY/MM/DD" onChange={e => {
-    setValue2(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value3} label="MM/DD/YYYY" name="MM/DD/YYYY" format="MM/DD/YYYY" onChange={e => {
-    setValue3(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value4} label="YYYY-MM-DD" name="YYYY-MM-DD" format="YYYY-MM-DD" onChange={e => {
-    setValue4(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value5} label="DD/MM/YYYY" name="DD/MM/YYYY" format="DD/MM/YYYY" onChange={e => {
-    setValue5(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value6} label="DD.MM.YYYY" name="DD.MM.YYYY" format="DD.MM.YYYY" onChange={e => {
-    setValue6(e.target.value);
-    args.onChange?.(e);
-  }} />
-</Stack>
+    <DateRangePicker
+      {...args}
+      value={value1}
+      label="YYYY.MM.DD"
+      name="YYYY.MM.DD"
+      format="YYYY.MM.DD"
+      onChange={(e) => {
+        setValue1(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value2}
+      label="YYYY/MM/DD"
+      name="YYYY/MM/DD"
+      format="YYYY/MM/DD"
+      onChange={(e) => {
+        setValue2(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value3}
+      label="MM/DD/YYYY"
+      name="MM/DD/YYYY"
+      format="MM/DD/YYYY"
+      onChange={(e) => {
+        setValue3(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value4}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      format="YYYY-MM-DD"
+      onChange={(e) => {
+        setValue4(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value5}
+      label="DD/MM/YYYY"
+      name="DD/MM/YYYY"
+      format="DD/MM/YYYY"
+      onChange={(e) => {
+        setValue5(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value6}
+      label="DD.MM.YYYY"
+      name="DD.MM.YYYY"
+      format="DD.MM.YYYY"
+      onChange={(e) => {
+        setValue6(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+  </Stack>
 ```
 
 ### Display Format (`displayFormat`)
@@ -258,31 +300,73 @@ The `displayFormat` prop controls what the user sees in the input field. This is
 
 ```tsx
 <Stack gap={2}>
-  <DateRangePicker {...args} value={value1} label="YYYY.MM.DD" name="YYYY.MM.DD" displayFormat="YYYY.MM.DD" onChange={e => {
-    setValue1(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value2} label="YYYY/MM/DD" name="YYYY/MM/DD" displayFormat="YYYY/MM/DD" onChange={e => {
-    setValue2(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value3} label="MM/DD/YYYY" name="MM/DD/YYYY" displayFormat="MM/DD/YYYY" onChange={e => {
-    setValue3(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value4} label="YYYY-MM-DD" name="YYYY-MM-DD" displayFormat="YYYY-MM-DD" onChange={e => {
-    setValue4(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...args} value={value5} label="DD/MM/YYYY" name="DD/MM/YYYY" displayFormat="DD/MM/YYYY" onChange={e => {
-    setValue5(e.target.value);
-    args.onChange?.(e);
-  }} />
-  <DateRangePicker {...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>
+    <DateRangePicker
+      {...args}
+      value={value1}
+      label="YYYY.MM.DD"
+      name="YYYY.MM.DD"
+      displayFormat="YYYY.MM.DD"
+      onChange={(e) => {
+        setValue1(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value2}
+      label="YYYY/MM/DD"
+      name="YYYY/MM/DD"
+      displayFormat="YYYY/MM/DD"
+      onChange={(e) => {
+        setValue2(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value3}
+      label="MM/DD/YYYY"
+      name="MM/DD/YYYY"
+      displayFormat="MM/DD/YYYY"
+      onChange={(e) => {
+        setValue3(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value4}
+      label="YYYY-MM-DD"
+      name="YYYY-MM-DD"
+      displayFormat="YYYY-MM-DD"
+      onChange={(e) => {
+        setValue4(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...args}
+      value={value5}
+      label="DD/MM/YYYY"
+      name="DD/MM/YYYY"
+      displayFormat="DD/MM/YYYY"
+      onChange={(e) => {
+        setValue5(e.target.value);
+        args.onChange?.(e);
+      }}
+    />
+    <DateRangePicker
+      {...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:**
@@ -296,8 +380,8 @@ The `displayFormat` prop controls what the user sees in the input field. This is
 ```tsx
 // format affects onChange value; displayFormat affects what users see
 <DateRangePicker
-  format="YYYY-MM-DD"        // onChange returns "2024-04-01 - 2024-04-15"
-  displayFormat="MM/DD/YYYY"  // Input shows "04/01/2024 - 04/15/2024"
+  format="YYYY-MM-DD" // onChange returns "2024-04-01 - 2024-04-15"
+  displayFormat="MM/DD/YYYY" // Input shows "04/01/2024 - 04/15/2024"
 />
 ```
 
@@ -353,25 +437,37 @@ Use the `numberOfMonths` prop to display two calendar months side by side in the
 When combined with `presets`, the dual calendar provides a fast, at-a-glance interface for report and analytics date filters.
 
 ```tsx
-<DateRangePicker {...args} value={value} onChange={e => {
-  setValue(e.target.value);
-  args.onChange?.(e);
-}} disableFuture presets={[{
-  label: 'Today',
-  value: `${fmt(today)} - ${fmt(today)}`
-}, {
-  label: 'Last 7 days',
-  value: range(7)
-}, {
-  label: 'Last 1 month',
-  value: range(1, 'months')
-}, {
-  label: 'Last 3 months',
-  value: range(3, 'months')
-}, {
-  label: 'Last 6 months',
-  value: range(6, 'months')
-}]} />
+<DateRangePicker
+    {...args}
+    value={value}
+    onChange={(e) => {
+      setValue(e.target.value);
+      args.onChange?.(e);
+    }}
+    disableFuture
+    presets={[
+      {
+        label: "Today",
+        value: `${fmt(today)} - ${fmt(today)}`
+      },
+      {
+        label: "Last 7 days",
+        value: range(7)
+      },
+      {
+        label: "Last 1 month",
+        value: range(1, "months")
+      },
+      {
+        label: "Last 3 months",
+        value: range(3, "months")
+      },
+      {
+        label: "Last 6 months",
+        value: range(6, "months")
+      }
+    ]}
+  />
 ```
 
 ```tsx
@@ -394,28 +490,40 @@ Use the `presets` prop to display quick-select options alongside the calendar, s
 Each preset's `value` must match the component's `format` prop and use the `-` separator (e.g., `"2026/03/01 - 2026/04/03"`). 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 range on the calendar.
 
 ```tsx
-<DateRangePicker {...args} value={value} onChange={e => {
-  setValue(e.target.value);
-  args.onChange?.(e);
-}} presets={[{
-  label: 'Today',
-  value: `${fmt(today)} - ${fmt(today)}`
-}, {
-  label: 'Last 3 days',
-  value: range(3)
-}, {
-  label: 'Last 7 days',
-  value: range(7)
-}, {
-  label: 'Last 1 month',
-  value: range(1, 'months')
-}, {
-  label: 'Last 3 months',
-  value: range(3, 'months')
-}, {
-  label: 'Last 6 months',
-  value: range(6, 'months')
-}]} />
+<DateRangePicker
+    {...args}
+    value={value}
+    onChange={(e) => {
+      setValue(e.target.value);
+      args.onChange?.(e);
+    }}
+    presets={[
+      {
+        label: "Today",
+        value: `${fmt(today)} - ${fmt(today)}`
+      },
+      {
+        label: "Last 3 days",
+        value: range(3)
+      },
+      {
+        label: "Last 7 days",
+        value: range(7)
+      },
+      {
+        label: "Last 1 month",
+        value: range(1, "months")
+      },
+      {
+        label: "Last 3 months",
+        value: range(3, "months")
+      },
+      {
+        label: "Last 6 months",
+        value: range(6, "months")
+      }
+    ]}
+  />
 ```
 
 ```tsx
@@ -466,15 +574,21 @@ Remove the clear button from the calendar popup using `hideClearButton`.
 Example of integrating an external reset button to clear the selected date range programmatically.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '10px'
-}}>
-<DateRangePicker {...props} value={value} onChange={event => {
-  setValue(event.target.value);
-}} />
-<Button onClick={() => setValue('')}>Reset</Button>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "10px"
+    }}
+  >
+    <DateRangePicker
+      {...props}
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+    <Button onClick={() => setValue("")}>Reset</Button>
+  </div>
 ```
 
 ## Booking Form
@@ -575,10 +689,7 @@ function DataExport() {
 
 ```tsx
 // Store ISO format, display locale format
-<DateRangePicker
-  format="YYYY-MM-DD"
-  displayFormat="MM/DD/YYYY"
-/>
+<DateRangePicker format="YYYY-MM-DD" displayFormat="MM/DD/YYYY" />
 ```
 
 3. **Use `inputReadOnly` on mobile**: On touch devices, keyboard input for date ranges is error-prone. Use `inputReadOnly` to force calendar selection.
@@ -605,7 +716,7 @@ const getDuration = (value) => {
   return `${days} day${days !== 1 ? 's' : ''} selected`;
 };
 
-<DateRangePicker helperText={getDuration(dateRange)} />
+<DateRangePicker helperText={getDuration(dateRange)} />;
 ```
 
 ## Props and Customization

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -63,10 +63,10 @@ Three sizes are available: `sm`, `md`, and `lg`. The size affects the search inp
 
 ```tsx
 <Stack spacing={3}>
-  <FilterableCheckboxGroup {...args} size="lg" label="Large" />
-  <FilterableCheckboxGroup {...args} size="md" label="Medium" />
-  <FilterableCheckboxGroup {...args} size="sm" label="Small" />
-</Stack>
+    <FilterableCheckboxGroup {...args} size="lg" label="Large" />
+    <FilterableCheckboxGroup {...args} size="md" label="Medium" />
+    <FilterableCheckboxGroup {...args} size="sm" label="Small" />
+  </Stack>
 ```
 
 ## Label and Helper Text
@@ -116,9 +116,18 @@ Control the visible height of the options list with the `maxHeight` prop (defaul
 
 ```tsx
 <Stack spacing={3}>
-  <FilterableCheckboxGroup label="Custom Height (150px)" placeholder="Search..." options={defaultOptions} maxHeight={150} />
-  <FilterableCheckboxGroup label="Default Height (300px)" placeholder="Search..." options={defaultOptions} />
-</Stack>
+    <FilterableCheckboxGroup
+      label="Custom Height (150px)"
+      placeholder="Search..."
+      options={defaultOptions}
+      maxHeight={150}
+    />
+    <FilterableCheckboxGroup
+      label="Default Height (300px)"
+      placeholder="Search..."
+      options={defaultOptions}
+    />
+  </Stack>
 ```
 
 ## Long List with Virtual Scrolling
@@ -154,12 +163,20 @@ Pass `value` and `onChange` to manage the selection state externally. This is th
 
 ```tsx
 <Stack spacing={2}>
-  <FilterableCheckboxGroup label="Select Fruits" placeholder="Search fruits..." options={defaultOptions} value={value} onChange={setValue} />
-  <Typography level="body-sm">
-    Selected:{' '}
-    {value.length > 0 ? value.map(v => defaultOptions.find(o => o.value === v)?.label).join(', ') : 'None'}
-  </Typography>
-</Stack>
+    <FilterableCheckboxGroup
+      label="Select Fruits"
+      placeholder="Search fruits..."
+      options={defaultOptions}
+      value={value}
+      onChange={setValue}
+    />
+    <Typography level="body-sm">
+      Selected:{" "}
+      {value.length > 0
+        ? value.map((v) => defaultOptions.find((o) => o.value === v)?.label).join(", ")
+        : "None"}
+    </Typography>
+  </Stack>
 ```
 
 ## Sorting Behavior
@@ -168,34 +185,56 @@ The component automatically sorts options on initial render: selected items appe
 
 ```tsx
 <Stack spacing={2}>
-  <Stack direction="row" spacing={1}>
-    <button type="button" onClick={() => {
-      setOptions([...options, {
-        value: `new-${Date.now()}`,
-        label: `New Item ${options.length - 11}`
-      }]);
-    }} style={{
-      padding: '4px 12px',
-      cursor: 'pointer'
-    }}>
-    Add New Option
-  </button>
-  <button type="button" onClick={() => {
-    setKey(prev => prev + 1);
-  }} style={{
-    padding: '4px 12px',
-    cursor: 'pointer'
-  }}>
-  Force Re-render
-</button>
-</Stack>
-<FilterableCheckboxGroup key={key} label="Sorting Demo" placeholder="Search..." helperText="Click 'Add New Option' to test sorting when options change" options={options} value={value} onChange={setValue} />
-<Typography level="body-sm" sx={{
-  whiteSpace: 'pre-line'
-}}>
-{`Selected: ${value.length > 0 ? value.join(', ') : 'None'}\n\nOptions count: ${options.length}\n\n- Add New Option: Add new item to test sorting when options change\n- Force Re-render: Remount component to test initial sorting\n\nAlphabet items (A-Z) appear first, then numbers (1-9).`}
-</Typography>
-</Stack>
+    <Stack direction="row" spacing={1}>
+      <button
+        type="button"
+        onClick={() => {
+          setOptions([
+            ...options,
+            {
+              value: `new-${Date.now()}`,
+              label: `New Item ${options.length - 11}`
+            }
+          ]);
+        }}
+        style={{
+          padding: "4px 12px",
+          cursor: "pointer"
+        }}
+      >
+        Add New Option
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setKey((prev) => prev + 1);
+        }}
+        style={{
+          padding: "4px 12px",
+          cursor: "pointer"
+        }}
+      >
+        Force Re-render
+      </button>
+    </Stack>
+    <FilterableCheckboxGroup
+      key={key}
+      label="Sorting Demo"
+      placeholder="Search..."
+      helperText="Click 'Add New Option' to test sorting when options change"
+      options={options}
+      value={value}
+      onChange={setValue}
+    />
+    <Typography
+      level="body-sm"
+      sx={{
+        whiteSpace: "pre-line"
+      }}
+    >
+      {`Selected: ${value.length > 0 ? value.join(", ") : "None"}\n\nOptions count: ${options.length}\n\n- Add New Option: Add new item to test sorting when options change\n- Force Re-render: Remount component to test initial sorting\n\nAlphabet items (A-Z) appear first, then numbers (1-9).`}
+    </Typography>
+  </Stack>
 ```
 
 ## Disabled State
@@ -208,20 +247,41 @@ The component supports both full and partial disabling.
 
 ```tsx
 <Stack spacing={3}>
-  <FilterableCheckboxGroup label="Entirely Disabled" placeholder="Search..." helperText="All inputs are disabled" options={defaultOptions.slice(0, 5)} disabled />
-  <FilterableCheckboxGroup label="Partially Disabled Options" placeholder="Search..." helperText="Some options are disabled" options={disabledOptions} />
-  <Stack spacing={2}>
-    <FilterableCheckboxGroup label="Controlled + Partially Disabled" placeholder="Search..." helperText="Disabled options (Banana, Date) maintain their selected state" options={disabledOptions} value={controlledValue} onChange={setControlledValue} />
-    <Typography level="body-sm">
-      Selected: {controlledValue.length > 0 ? controlledValue.join(', ') : 'None'}
-    </Typography>
-    <Typography level="body-sm" sx={{
-      color: 'text.secondary'
-    }}>
-    Try "Select all" - it will only affect enabled options (Apple, Cherry, Elderberry)
-  </Typography>
-</Stack>
-</Stack>
+    <FilterableCheckboxGroup
+      label="Entirely Disabled"
+      placeholder="Search..."
+      helperText="All inputs are disabled"
+      options={defaultOptions.slice(0, 5)}
+      disabled
+    />
+    <FilterableCheckboxGroup
+      label="Partially Disabled Options"
+      placeholder="Search..."
+      helperText="Some options are disabled"
+      options={disabledOptions}
+    />
+    <Stack spacing={2}>
+      <FilterableCheckboxGroup
+        label="Controlled + Partially Disabled"
+        placeholder="Search..."
+        helperText="Disabled options (Banana, Date) maintain their selected state"
+        options={disabledOptions}
+        value={controlledValue}
+        onChange={setControlledValue}
+      />
+      <Typography level="body-sm">
+        Selected: {controlledValue.length > 0 ? controlledValue.join(", ") : "None"}
+      </Typography>
+      <Typography
+        level="body-sm"
+        sx={{
+          color: "text.secondary"
+        }}
+      >
+        Try "Select all" - it will only affect enabled options (Apple, Cherry, Elderberry)
+      </Typography>
+    </Stack>
+  </Stack>
 ```
 
 ## Common Use Cases