@ceed/ads 1.35.1 → 1.37.0-next.1

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>
 ```
 
 ## Filter Panel
@@ -322,7 +382,7 @@ When dealing with a large set of options like countries, the search filter and v
 | `placeholder` | `string`                                                 | -          | Placeholder text for the search input               |
 | `required`    | `boolean`                                                | `false`    | Marks the field as required                         |
 | `disabled`    | `boolean`                                                | `false`    | Disables all checkboxes                             |
-| `size`        | `'sm' \| 'md' \| 'lg'`                                   | `'md'`     | Component size                                      |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                   | `'sm'`     | Component size                                      |
 | `maxHeight`   | `string \| number`                                       | `300`      | Maximum height of the options list before scrolling |
 
 ## Accessibility

package/dist/components/inputs/FormControl.md

@@ -6,10 +6,10 @@ FormControl is a wrapper component that provides context to form elements such a
 
 ```tsx
 <FormControl {...args}>
-  <FormLabel>Label</FormLabel>
-  <Input placeholder="Enter text…" />
-  <FormHelperText>This is helper text.</FormHelperText>
-</FormControl>
+    <FormLabel>Label</FormLabel>
+    <Input placeholder="Enter text…" />
+    <FormHelperText>This is helper text.</FormHelperText>
+  </FormControl>
 ```
 
 | Field       | Description | Default |
@@ -42,10 +42,10 @@ The most common pattern — wrapping an Input with a label and helper text.
 
 ```tsx
 <FormControl>
-  <FormLabel>Username</FormLabel>
-  <Input placeholder="Enter username" />
-  <FormHelperText>Choose a unique username.</FormHelperText>
-</FormControl>
+    <FormLabel>Username</FormLabel>
+    <Input placeholder="Enter username" />
+    <FormHelperText>Choose a unique username.</FormHelperText>
+  </FormControl>
 ```
 
 ## With Textarea
@@ -54,10 +54,10 @@ FormControl works equally well with Textarea components.
 
 ```tsx
 <FormControl>
-  <FormLabel>Description</FormLabel>
-  <Textarea placeholder="Enter description…" minRows={3} />
-  <FormHelperText>Provide a detailed description.</FormHelperText>
-</FormControl>
+    <FormLabel>Description</FormLabel>
+    <Textarea placeholder="Enter description…" minRows={3} />
+    <FormHelperText>Provide a detailed description.</FormHelperText>
+  </FormControl>
 ```
 
 ## With Select
@@ -66,10 +66,10 @@ Use FormControl with Select for dropdown fields.
 
 ```tsx
 <FormControl>
-  <FormLabel>Role</FormLabel>
-  <Select placeholder="Select a role" options={roleOptions} />
-  <FormHelperText>Select the user role.</FormHelperText>
-</FormControl>
+    <FormLabel>Role</FormLabel>
+    <Select placeholder="Select a role" options={roleOptions} />
+    <FormHelperText>Select the user role.</FormHelperText>
+  </FormControl>
 ```
 
 ## Error State
@@ -78,10 +78,10 @@ Set `error` on FormControl to propagate the error state to all child components.
 
 ```tsx
 <FormControl error>
-  <FormLabel>Email</FormLabel>
-  <Input placeholder="email@example.com" defaultValue="invalid-email" />
-  <FormHelperText>Please enter a valid email address.</FormHelperText>
-</FormControl>
+    <FormLabel>Email</FormLabel>
+    <Input placeholder="email@example.com" defaultValue="invalid-email" />
+    <FormHelperText>Please enter a valid email address.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -98,10 +98,10 @@ Set `disabled` to disable all child form elements at once.
 
 ```tsx
 <FormControl disabled>
-  <FormLabel>Name</FormLabel>
-  <Input placeholder="Enter name" defaultValue="John Doe" />
-  <FormHelperText>This field is disabled.</FormHelperText>
-</FormControl>
+    <FormLabel>Name</FormLabel>
+    <Input placeholder="Enter name" defaultValue="John Doe" />
+    <FormHelperText>This field is disabled.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -118,10 +118,10 @@ Set `required` to add an asterisk (\*) to the label and mark the field as requir
 
 ```tsx
 <FormControl required>
-  <FormLabel>Full Name</FormLabel>
-  <Input placeholder="Enter your full name" />
-  <FormHelperText>This field is required.</FormHelperText>
-</FormControl>
+    <FormLabel>Full Name</FormLabel>
+    <Input placeholder="Enter your full name" />
+    <FormHelperText>This field is required.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -137,19 +137,19 @@ FormControl supports `sm`, `md`, and `lg` sizes. The size is inherited by child
 
 ```tsx
 <Stack gap={3}>
-  <FormControl size="sm">
-    <FormLabel>Small</FormLabel>
-    <Input placeholder="Small input" />
-  </FormControl>
-  <FormControl size="md">
-    <FormLabel>Medium</FormLabel>
-    <Input placeholder="Medium input" />
-  </FormControl>
-  <FormControl size="lg">
-    <FormLabel>Large</FormLabel>
-    <Input placeholder="Large input" />
-  </FormControl>
-</Stack>
+    <FormControl size="sm">
+      <FormLabel>Small</FormLabel>
+      <Input placeholder="Small input" />
+    </FormControl>
+    <FormControl size="md">
+      <FormLabel>Medium</FormLabel>
+      <Input placeholder="Medium input" />
+    </FormControl>
+    <FormControl size="lg">
+      <FormLabel>Large</FormLabel>
+      <Input placeholder="Large input" />
+    </FormControl>
+  </Stack>
 ```
 
 ## Horizontal Layout
@@ -157,12 +157,15 @@ FormControl supports `sm`, `md`, and `lg` sizes. The size is inherited by child
 Use `orientation="horizontal"` for inline form controls, such as Switch or Checkbox toggles.
 
 ```tsx
-<FormControl orientation="horizontal" sx={{
-  gap: 2
-}}>
-<FormLabel>Subscribe</FormLabel>
-<Switch />
-</FormControl>
+<FormControl
+    orientation="horizontal"
+    sx={{
+      gap: 2
+    }}
+  >
+    <FormLabel>Subscribe</FormLabel>
+    <Switch />
+  </FormControl>
 ```
 
 ```tsx
@@ -177,28 +180,31 @@ Use `orientation="horizontal"` for inline form controls, such as Switch or Check
 A complete form demonstrating FormControl with multiple input types.
 
 ```tsx
-<Stack gap={2} sx={{
-  maxWidth: 400
-}}>
-<FormControl required>
-  <FormLabel>Name</FormLabel>
-  <Input placeholder="Enter your name" />
-</FormControl>
-<FormControl required>
-  <FormLabel>Email</FormLabel>
-  <Input type="email" placeholder="email@example.com" />
-  <FormHelperText>We will never share your email.</FormHelperText>
-</FormControl>
-<FormControl>
-  <FormLabel>Role</FormLabel>
-  <Select placeholder="Select a role" options={roleOptions} />
-</FormControl>
-<FormControl>
-  <FormLabel>Bio</FormLabel>
-  <Textarea placeholder="Tell us about yourself…" minRows={3} />
-  <FormHelperText>Maximum 500 characters.</FormHelperText>
-</FormControl>
-</Stack>
+<Stack
+    gap={2}
+    sx={{
+      maxWidth: 400
+    }}
+  >
+    <FormControl required>
+      <FormLabel>Name</FormLabel>
+      <Input placeholder="Enter your name" />
+    </FormControl>
+    <FormControl required>
+      <FormLabel>Email</FormLabel>
+      <Input type="email" placeholder="email@example.com" />
+      <FormHelperText>We will never share your email.</FormHelperText>
+    </FormControl>
+    <FormControl>
+      <FormLabel>Role</FormLabel>
+      <Select placeholder="Select a role" options={roleOptions} />
+    </FormControl>
+    <FormControl>
+      <FormLabel>Bio</FormLabel>
+      <Textarea placeholder="Tell us about yourself…" minRows={3} />
+      <FormHelperText>Maximum 500 characters.</FormHelperText>
+    </FormControl>
+  </Stack>
 ```
 
 ## FormLabel
@@ -360,7 +366,7 @@ function SettingsForm() {
 | `error`       | `boolean`                                                      | `false`      | Applies error styling to child components                         |
 | `disabled`    | `boolean`                                                      | `false`      | Disables all child form elements                                  |
 | `required`    | `boolean`                                                      | `false`      | Adds required indicator to FormLabel and `aria-required` to input |
-| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Size applied to child components                                  |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`       | Size applied to child components                                  |
 | `color`       | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`  | Color scheme                                                      |
 | `orientation` | `'horizontal' \| 'vertical'`                                   | `'vertical'` | Layout direction                                                  |
 | `sx`          | `SxProps`                                                      | -            | Custom styles using the MUI system                                |