@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/Switch.md

@@ -27,12 +27,7 @@ import { Switch } from '@ceed/cds';
 function MyComponent() {
   const [enabled, setEnabled] = useState(false);
 
-  return (
-    <Switch
-      checked={enabled}
-      onChange={(e) => setEnabled(e.target.checked)}
-    />
-  );
+  return <Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />;
 }
 ```
 
@@ -41,24 +36,38 @@ function MyComponent() {
 Use `FormControl` with `FormLabel` and `FormHelperText` to provide a label and description alongside the switch. The `orientation="horizontal"` layout places the label on the left and the switch on the right.
 
 ```tsx
-<FormControl orientation="horizontal" sx={{
-  width: 300,
-  justifyContent: 'space-between'
-}}>
-<div>
-  <FormLabel>Show captions</FormLabel>
-  <FormHelperText sx={{
-    mt: 0
-  }}>All languages available.</FormHelperText>
-</div>
-<Switch checked={checked} onChange={e => setChecked(e.target.checked)} color={checked ? 'success' : 'neutral'} variant={checked ? 'solid' : 'outlined'} endDecorator={checked ? 'On' : 'Off'} slotProps={{
-  endDecorator: {
-    sx: {
-      minWidth: 24
-    }
-  }
-}} />
-</FormControl>
+<FormControl
+    orientation="horizontal"
+    sx={{
+      width: 300,
+      justifyContent: "space-between"
+    }}
+  >
+    <div>
+      <FormLabel>Show captions</FormLabel>
+      <FormHelperText
+        sx={{
+          mt: 0
+        }}
+      >
+        All languages available.
+      </FormHelperText>
+    </div>
+    <Switch
+      checked={checked}
+      onChange={(e) => setChecked(e.target.checked)}
+      color={checked ? "success" : "neutral"}
+      variant={checked ? "solid" : "outlined"}
+      endDecorator={checked ? "On" : "Off"}
+      slotProps={{
+        endDecorator: {
+          sx: {
+            minWidth: 24
+          }
+        }
+      }}
+    />
+  </FormControl>
 ```
 
 ## Inline Labels
@@ -66,11 +75,18 @@ Use `FormControl` with `FormLabel` and `FormHelperText` to provide a label and d
 For simpler cases, wrap the switch inside a `Typography` component rendered as a `<label>`. This connects the text and switch semantically without requiring a `FormControl`.
 
 ```tsx
-<Typography component="label" endDecorator={<Switch sx={{
-  ml: 1
-}} />}>
-Turn alarm on
-</Typography>
+<Typography
+    component="label"
+    endDecorator={
+      <Switch
+        sx={{
+          ml: 1
+        }}
+      />
+    }
+  >
+    Turn alarm on
+  </Typography>
 ```
 
 ## With Decorators
@@ -78,15 +94,30 @@ Turn alarm on
 Use `startDecorator` and `endDecorator` to place icons or text around the switch. This is particularly useful for theme toggles or any context where visual cues reinforce the on/off meaning.
 
 ```tsx
-<Switch color={dark ? 'primary' : 'danger'} slotProps={{
-  input: {
-    'aria-label': 'dark mode'
-  }
-}} startDecorator={<LightModeIcon sx={theme => ({
-  color: dark ? 'currentColor' : 'var(--ceed-palette-danger-solidBg)'
-})} />} endDecorator={<DarkModeIcon sx={theme => ({
-  color: dark ? 'var(--ceed-palette-primary-solidBg)' : 'currentColor'
-})} />} checked={dark} onChange={event => setDark(event.target.checked)} />
+<Switch
+    color={dark ? "primary" : "danger"}
+    slotProps={{
+      input: {
+        "aria-label": "dark mode"
+      }
+    }}
+    startDecorator={
+      <LightModeIcon
+        sx={(theme) => ({
+          color: dark ? "currentColor" : "var(--ceed-palette-danger-solidBg)"
+        })}
+      />
+    }
+    endDecorator={
+      <DarkModeIcon
+        sx={(theme) => ({
+          color: dark ? "var(--ceed-palette-primary-solidBg)" : "currentColor"
+        })}
+      />
+    }
+    checked={dark}
+    onChange={(event) => setDark(event.target.checked)}
+  />
 ```
 
 ## Track Children
@@ -95,42 +126,62 @@ Display text or symbols inside the switch track using `slotProps.track.children`
 
 ```tsx
 <Stack direction="row" spacing={4}>
-  <Switch {...args} slotProps={{
-    track: {
-      children: <React.Fragment>
-      <Typography component="span" level="inherit" sx={{
-        ml: '10px'
-      }}>
-      On
-    </Typography>
-    <Typography component="span" level="inherit" sx={{
-      mr: '8px'
-    }}>
-    Off
-  </Typography>
-</React.Fragment>
-}
-}} sx={{
-  '--Switch-thumbSize': '27px',
-  '--Switch-trackWidth': '64px',
-  '--Switch-trackHeight': '31px'
-}} />
-<Switch color="success" slotProps={{
-  track: {
-    children: <React.Fragment>
-    <span>I</span>
-    <span>0</span>
-  </React.Fragment>,
-  sx: {
-    justifyContent: 'space-around'
-  }
-}
-}} sx={{
-  '--Switch-thumbSize': '27px',
-  '--Switch-trackWidth': '52px',
-  '--Switch-trackHeight': '31px'
-}} />
-</Stack>
+    <Switch
+      {...args}
+      slotProps={{
+        track: {
+          children: (
+            <React.Fragment>
+              <Typography
+                component="span"
+                level="inherit"
+                sx={{
+                  ml: "10px"
+                }}
+              >
+                On
+              </Typography>
+              <Typography
+                component="span"
+                level="inherit"
+                sx={{
+                  mr: "8px"
+                }}
+              >
+                Off
+              </Typography>
+            </React.Fragment>
+          )
+        }
+      }}
+      sx={{
+        "--Switch-thumbSize": "27px",
+        "--Switch-trackWidth": "64px",
+        "--Switch-trackHeight": "31px"
+      }}
+    />
+    <Switch
+      color="success"
+      slotProps={{
+        track: {
+          children: (
+            <React.Fragment>
+              <span>I</span>
+              <span>0</span>
+            </React.Fragment>
+          ),
+          sx: {
+            justifyContent: "space-around"
+          }
+        }
+      }}
+      sx={{
+        "--Switch-thumbSize": "27px",
+        "--Switch-trackWidth": "52px",
+        "--Switch-trackHeight": "31px"
+      }}
+    />
+  </Stack>
 ```
 
 ## Thumb Children
@@ -138,16 +189,20 @@ Display text or symbols inside the switch track using `slotProps.track.children`
 Place an icon inside the switch thumb using `slotProps.thumb.children`. This is useful for adding a small visual indicator that moves with the toggle.
 
 ```tsx
-<Switch size="lg" slotProps={{
-  input: {
-    'aria-label': 'Dark mode'
-  },
-  thumb: {
-    children: <DarkModeIcon fontSize="inherit" />
-  }
-}} sx={{
-  '--Switch-thumbSize': '16px'
-}} />
+<Switch
+    size="lg"
+    slotProps={{
+      input: {
+        "aria-label": "Dark mode"
+      },
+      thumb: {
+        children: <DarkModeIcon fontSize="inherit" />
+      }
+    }}
+    sx={{
+      "--Switch-thumbSize": "16px"
+    }}
+  />
 ```
 
 ## All Variants Overview
@@ -156,38 +211,54 @@ A comprehensive view of all color and decoration combinations.
 
 ```tsx
 <Stack direction="row" spacing={4}>
-  {([undefined, 'primary', 'warning', 'success', 'danger', 'neutral'] as const).map(color => <Stack key={color} spacing={2}>
-  <Switch color={color} />
-  <Switch color={color} checked />
-  <Switch color={color} startDecorator={<LightModeIcon />} endDecorator={<DarkModeIcon />} />
-  <Switch color={color} slotProps={{
-    input: {
-      'aria-label': 'Dark mode'
-    },
-    thumb: {
-      children: <DarkModeIcon fontSize="inherit" />
-    },
-    track: {
-      children: <React.Fragment>
-      <span>I</span>
-      <span>0</span>
-    </React.Fragment>,
-    sx: {
-      justifyContent: 'space-around'
-    }
-  }
-}} sx={{
-  '--Switch-thumbSize': '27px',
-  '--Switch-trackWidth': '52px',
-  '--Switch-trackHeight': '31px'
-}} />
-<Typography component="label" startDecorator={<Switch sx={{
-  ml: 1
-}} color={color} />}>
-Label
-</Typography>
-</Stack>)}
-</Stack>
+    {([undefined, "primary", "warning", "success", "danger", "neutral"] as const).map((color) => (
+      <Stack key={color} spacing={2}>
+        <Switch color={color} />
+        <Switch color={color} checked />
+        <Switch color={color} startDecorator={<LightModeIcon />} endDecorator={<DarkModeIcon />} />
+        <Switch
+          color={color}
+          slotProps={{
+            input: {
+              "aria-label": "Dark mode"
+            },
+            thumb: {
+              children: <DarkModeIcon fontSize="inherit" />
+            },
+            track: {
+              children: (
+                <React.Fragment>
+                  <span>I</span>
+                  <span>0</span>
+                </React.Fragment>
+              ),
+              sx: {
+                justifyContent: "space-around"
+              }
+            }
+          }}
+          sx={{
+            "--Switch-thumbSize": "27px",
+            "--Switch-trackWidth": "52px",
+            "--Switch-trackHeight": "31px"
+          }}
+        />
+        <Typography
+          component="label"
+          startDecorator={
+            <Switch
+              sx={{
+                ml: 1
+              }}
+              color={color}
+            />
+          }
+        >
+          Label
+        </Typography>
+      </Stack>
+    ))}
+  </Stack>
 ```
 
 ## Common Use Cases
@@ -201,15 +272,10 @@ function SettingsPanel() {
 
   return (
     <Stack spacing={3}>
-      <FormControl
-        orientation="horizontal"
-        sx={{ width: 400, justifyContent: 'space-between' }}
-      >
+      <FormControl orientation="horizontal" sx={{ width: 400, justifyContent: 'space-between' }}>
         <div>
           <FormLabel>Notifications</FormLabel>
-          <FormHelperText sx={{ mt: 0 }}>
-            Receive alerts when new messages arrive.
-          </FormHelperText>
+          <FormHelperText sx={{ mt: 0 }}>Receive alerts when new messages arrive.</FormHelperText>
         </div>
         <Switch
           checked={notifications}
@@ -218,20 +284,12 @@ function SettingsPanel() {
         />
       </FormControl>
 
-      <FormControl
-        orientation="horizontal"
-        sx={{ width: 400, justifyContent: 'space-between' }}
-      >
+      <FormControl orientation="horizontal" sx={{ width: 400, justifyContent: 'space-between' }}>
         <div>
           <FormLabel>Auto Save</FormLabel>
-          <FormHelperText sx={{ mt: 0 }}>
-            Automatically save your work every 30 seconds.
-          </FormHelperText>
+          <FormHelperText sx={{ mt: 0 }}>Automatically save your work every 30 seconds.</FormHelperText>
         </div>
-        <Switch
-          checked={autoSave}
-          onChange={(e) => setAutoSave(e.target.checked)}
-        />
+        <Switch checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} />
       </FormControl>
     </Stack>
   );
@@ -266,10 +324,7 @@ function FeatureToggle() {
   const [betaEnabled, setBetaEnabled] = useState(false);
 
   return (
-    <FormControl
-      orientation="horizontal"
-      sx={{ justifyContent: 'space-between' }}
-    >
+    <FormControl orientation="horizontal" sx={{ justifyContent: 'space-between' }}>
       <FormLabel>Enable Beta Features</FormLabel>
       <Switch
         checked={betaEnabled}

package/dist/components/inputs/Textarea.md

@@ -56,11 +56,11 @@ Textarea supports four visual variants: `solid`, `soft`, `outlined`, and `plain`
 
 ```tsx
 <>
-  <Textarea name="Solid" placeholder="Type in here…" variant="solid" />
-  <Textarea name="Soft" placeholder="Type in here…" variant="soft" />
-  <Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
-  <Textarea name="Plain" placeholder="Type in here…" variant="plain" />
-</>
+    <Textarea name="Solid" placeholder="Type in here…" variant="solid" />
+    <Textarea name="Soft" placeholder="Type in here…" variant="soft" />
+    <Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
+    <Textarea name="Plain" placeholder="Type in here…" variant="plain" />
+  </>
 ```
 
 ```tsx
@@ -76,10 +76,10 @@ Textarea comes in three sizes: `sm`, `md`, and `lg`. The default size is `md`.
 
 ```tsx
 <>
-  <Textarea size="sm" name="Size" placeholder="Small" />
-  <Textarea size="md" name="Size" placeholder="Medium" />
-  <Textarea size="lg" name="Size" placeholder="Large" />
-</>
+    <Textarea size="sm" name="Size" placeholder="Small" />
+    <Textarea size="md" name="Size" placeholder="Medium" />
+    <Textarea size="lg" name="Size" placeholder="Large" />
+  </>
 ```
 
 ```tsx
@@ -94,11 +94,11 @@ Textarea supports semantic colors via the `color` prop: `primary`, `neutral`, `d
 
 ```tsx
 <>
-  <Textarea name="Primary" placeholder="Type in here…" variant="outlined" color="primary" />
-  <Textarea name="Neutral" placeholder="Type in here…" variant="outlined" color="neutral" />
-  <Textarea name="Danger" placeholder="Type in here…" variant="outlined" color="danger" />
-  <Textarea name="Warning" placeholder="Type in here…" variant="outlined" color="warning" />
-</>
+    <Textarea name="Primary" placeholder="Type in here…" variant="outlined" color="primary" />
+    <Textarea name="Neutral" placeholder="Type in here…" variant="outlined" color="neutral" />
+    <Textarea name="Danger" placeholder="Type in here…" variant="outlined" color="danger" />
+    <Textarea name="Warning" placeholder="Type in here…" variant="outlined" color="warning" />
+  </>
 ```
 
 ```tsx
@@ -123,12 +123,7 @@ Use the `required`, `label`, and `helperText` props together to build complete f
 ```
 
 ```tsx
-<Textarea
-  label="Label"
-  helperText="I'm helper text"
-  placeholder="Type in here..."
-  required
-/>
+<Textarea label="Label" helperText="I'm helper text" placeholder="Type in here..." required />
 ```
 
 ## Common Use Cases

package/dist/components/inputs/Uploader/Uploader.md

@@ -75,15 +75,15 @@ Two sizes are available: `sm` and `md`. Use the smaller size for compact form la
 
 ```tsx
 <Stack gap={4}>
-  <Stack gap={2}>
-    <Typography level="title-sm">SM</Typography>
-    <Uploader {...args} size="sm" />
+    <Stack gap={2}>
+      <Typography level="title-sm">SM</Typography>
+      <Uploader {...args} size="sm" />
+    </Stack>
+    <Stack gap={2}>
+      <Typography level="title-sm">MD</Typography>
+      <Uploader {...args} size="md" />
+    </Stack>
   </Stack>
-  <Stack gap={2}>
-    <Typography level="title-sm">MD</Typography>
-    <Uploader {...args} size="md" />
-  </Stack>
-</Stack>
 ```
 
 ## File Type Restriction (Accepts)
@@ -103,16 +103,18 @@ The `minCount` prop sets a minimum number of required files. Validation triggers
 
 ```tsx
 <>
-  <form onSubmit={e => {
-    e.preventDefault();
-    console.log('Submitted');
-  }}>
-  <Stack gap={2}>
-    <Uploader {...args} />
-    <Button type="submit">Submit</Button>
-  </Stack>
-</form>
-</>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        console.log("Submitted");
+      }}
+    >
+      <Stack gap={2}>
+        <Uploader {...args} />
+        <Button type="submit">Submit</Button>
+      </Stack>
+    </form>
+  </>
 ```
 
 ## With Uploaded Files
@@ -184,15 +186,17 @@ Demonstrates automatic validation error messages for various rule violations (fi
 
 ```tsx
 <Stack gap={4}>
-  <Stack gap={2}>
-    <Typography level="title-sm">Try uploading files that violate validation rules:</Typography>
-    <Typography level="body-sm">• Upload a file larger than 500KB (individual file size limit)</Typography>
-    <Typography level="body-sm">• Upload multiple files exceeding 1MB total</Typography>
-    <Typography level="body-sm">• Upload more than 2 files</Typography>
-    <Typography level="body-sm">• Upload non-PNG/JPG files</Typography>
+    <Stack gap={2}>
+      <Typography level="title-sm">Try uploading files that violate validation rules:</Typography>
+      <Typography level="body-sm">
+        • Upload a file larger than 500KB (individual file size limit)
+      </Typography>
+      <Typography level="body-sm">• Upload multiple files exceeding 1MB total</Typography>
+      <Typography level="body-sm">• Upload more than 2 files</Typography>
+      <Typography level="body-sm">• Upload non-PNG/JPG files</Typography>
+    </Stack>
+    <Uploader {...args} />
   </Stack>
-  <Uploader {...args} />
-</Stack>
 ```
 
 ## Helper Text Variations
@@ -201,19 +205,40 @@ Comparison of auto-generated helper text, custom helper text, and error-state he
 
 ```tsx
 <Stack gap={4}>
-  <Stack gap={2}>
-    <Typography level="title-sm">Default Helper Text (Generated)</Typography>
-    <Uploader {...args} label="Default helper text" accept=".png,.jpg,.pdf" maxFileTotalSize={5 * 1024 * 1024} maxCount={3} />
-  </Stack>
-  <Stack gap={2}>
-    <Typography level="title-sm">Custom Helper Text</Typography>
-    <Uploader {...args} label="Custom helper text" accept=".png,.jpg,.pdf" maxFileTotalSize={5 * 1024 * 1024} maxCount={3} helperText="Please upload your profile documents (PNG, JPG, or PDF only)" />
-  </Stack>
-  <Stack gap={2}>
-    <Typography level="title-sm">Error State with Custom Helper Text</Typography>
-    <Uploader {...args} label="Error state" accept=".png,.jpg,.pdf" maxFileTotalSize={5 * 1024 * 1024} maxCount={3} error={true} helperText="There was an error processing your files. Please try again." />
+    <Stack gap={2}>
+      <Typography level="title-sm">Default Helper Text (Generated)</Typography>
+      <Uploader
+        {...args}
+        label="Default helper text"
+        accept=".png,.jpg,.pdf"
+        maxFileTotalSize={5 * 1024 * 1024}
+        maxCount={3}
+      />
+    </Stack>
+    <Stack gap={2}>
+      <Typography level="title-sm">Custom Helper Text</Typography>
+      <Uploader
+        {...args}
+        label="Custom helper text"
+        accept=".png,.jpg,.pdf"
+        maxFileTotalSize={5 * 1024 * 1024}
+        maxCount={3}
+        helperText="Please upload your profile documents (PNG, JPG, or PDF only)"
+      />
+    </Stack>
+    <Stack gap={2}>
+      <Typography level="title-sm">Error State with Custom Helper Text</Typography>
+      <Uploader
+        {...args}
+        label="Error state"
+        accept=".png,.jpg,.pdf"
+        maxFileTotalSize={5 * 1024 * 1024}
+        maxCount={3}
+        error={true}
+        helperText="There was an error processing your files. Please try again."
+      />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ## Disabled State
@@ -257,7 +282,11 @@ import { Uploader, Stack, Button } from '@ceed/cds';
 
 function DocumentForm() {
   return (
-    <form onSubmit={(e) => { e.preventDefault(); }}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
       <Stack gap={3}>
         <Uploader
           label="Supporting Documents"