@ceed/cds 1.34.1 → 1.35.0

package/dist/components/inputs/CurrencyInput.md

@@ -78,10 +78,10 @@ CurrencyInput supports three sizes: `sm`, `md` (default), 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

package/dist/components/inputs/DatePicker.md

@@ -36,13 +36,7 @@ import { DatePicker } from '@ceed/cds';
 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