@ceed/ads 1.37.0-next.1 → 1.37.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/components/Alert/Alert.d.ts +1 -1
  2. package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts +1 -1
  3. package/dist/components/Pagination/Pagination.d.ts +1 -1
  4. package/dist/components/ProfileMenu/ProfileMenu.d.ts +1 -1
  5. package/dist/components/Select/Select.d.ts +9 -1
  6. package/dist/components/ThemeProvider/ThemeProvider.d.ts +0 -20
  7. package/dist/components/data-display/Avatar.md +1 -1
  8. package/dist/components/data-display/Badge.md +1 -1
  9. package/dist/components/data-display/Chip.md +1 -1
  10. package/dist/components/data-display/Table.md +1 -1
  11. package/dist/components/data-display/Tooltip.md +1 -1
  12. package/dist/components/feedback/Alert.md +1 -1
  13. package/dist/components/feedback/CircularProgress.md +2 -2
  14. package/dist/components/feedback/Modal.md +1 -1
  15. package/dist/components/inputs/Autocomplete.md +1 -1
  16. package/dist/components/inputs/Button.md +2 -2
  17. package/dist/components/inputs/ButtonGroup.md +2 -2
  18. package/dist/components/inputs/Checkbox.md +2 -2
  19. package/dist/components/inputs/CurrencyInput.md +2 -2
  20. package/dist/components/inputs/FilterableCheckboxGroup.md +1 -1
  21. package/dist/components/inputs/FormControl.md +1 -1
  22. package/dist/components/inputs/IconButton.md +2 -2
  23. package/dist/components/inputs/Input.md +2 -2
  24. package/dist/components/inputs/PercentageInput.md +2 -2
  25. package/dist/components/inputs/RadioButton.md +2 -2
  26. package/dist/components/inputs/RadioList.md +2 -2
  27. package/dist/components/inputs/Select.md +76 -21
  28. package/dist/components/inputs/Slider.md +2 -2
  29. package/dist/components/inputs/Switch.md +1 -1
  30. package/dist/components/inputs/Textarea.md +2 -2
  31. package/dist/components/inputs/Uploader/Uploader.md +1 -1
  32. package/dist/components/navigation/IconMenuButton.md +1 -1
  33. package/dist/components/navigation/Menu.md +1 -1
  34. package/dist/components/navigation/MenuButton.md +1 -1
  35. package/dist/components/navigation/Pagination.md +1 -1
  36. package/dist/components/navigation/ProfileMenu.md +2 -2
  37. package/dist/components/navigation/Tabs.md +1 -1
  38. package/dist/components/surfaces/Accordions.md +1 -1
  39. package/dist/components/surfaces/Card.md +2 -2
  40. package/dist/index.browser.js +4 -4
  41. package/dist/index.browser.js.map +3 -3
  42. package/dist/index.cjs +248 -350
  43. package/dist/index.js +57 -159
  44. package/framer/index.js +1 -1
  45. package/package.json +2 -3
package/dist/components/Alert/Alert.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface CustomAlertProps {
14
14
  size?: AlertSize;
15
15
  }
16
16
  export type AlertProps = CustomAlertProps & Omit<JoyAlertProps, 'content' | 'actions' | 'title' | 'size'> & Omit<MotionProps, 'children'>;
17
- declare function Alert(inProps: AlertProps): React.JSX.Element;
17
+ declare function Alert(props: AlertProps): React.JSX.Element;
18
18
  declare namespace Alert {
19
19
  var displayName: string;
20
20
  }
package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts CHANGED
@@ -16,7 +16,7 @@ export type FilterableCheckboxGroupProps = {
16
16
  maxHeight?: string | number;
17
17
  disabled?: boolean;
18
18
  };
19
- declare function FilterableCheckboxGroup(inProps: FilterableCheckboxGroupProps): React.JSX.Element;
19
+ declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element;
20
20
  declare namespace FilterableCheckboxGroup {
21
21
  var displayName: string;
22
22
  }
package/dist/components/Pagination/Pagination.d.ts CHANGED
@@ -23,7 +23,7 @@ export interface PaginationProps extends React.ComponentProps<typeof PaginationR
23
23
  size?: 'sm' | 'md' | 'lg';
24
24
  variant?: 'standard' | 'compact';
25
25
  }
26
- declare function Pagination(inProps: PaginationProps): React.JSX.Element;
26
+ declare function Pagination(props: PaginationProps): React.JSX.Element;
27
27
  declare namespace Pagination {
28
28
  var displayName: string;
29
29
  }
package/dist/components/ProfileMenu/ProfileMenu.d.ts CHANGED
@@ -36,7 +36,7 @@ export interface BaseProfileMenuProps {
36
36
  size?: 'sm' | 'md';
37
37
  }
38
38
  export type ProfileMenuProps = BaseProfileMenuProps & Omit<ComponentProps<typeof ProfileMenuRoot>, 'size'>;
39
- declare function ProfileMenu(inProps: ProfileMenuProps): React.JSX.Element;
39
+ declare function ProfileMenu(props: ProfileMenuProps): React.JSX.Element;
40
40
  declare namespace ProfileMenu {
41
41
  var displayName: string;
42
42
  }
package/dist/components/Select/Select.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import React, { ComponentProps } from 'react';
2
2
  import { Select as JoySelect, type SelectProps as JoySelectProps } from '@mui/joy';
3
+ import FormControl from '../FormControl';
4
+ import FormLabel from '../FormLabel';
5
+ import FormHelperText from '../FormHelperText';
3
6
  import { SelectValue } from '@mui/base';
4
7
  export type { JoySelectProps };
5
8
  export type { OptionProps } from '@mui/joy';
@@ -24,11 +27,16 @@ export { Option };
24
27
  export type InferOptionValue<OptionValue> = OptionValue extends {
25
28
  value: infer V;
26
29
  } ? V : OptionValue;
27
- export interface SelectProps<OptionValue extends OptionType, Multiple extends boolean = false> extends Omit<ComponentProps<typeof JoySelect<OptionValue, any, Multiple>>, 'value' | 'onChange' | 'multiple'> {
30
+ export interface SelectProps<OptionValue extends OptionType, Multiple extends boolean = false> extends Omit<ComponentProps<typeof JoySelect<OptionValue, any, Multiple>>, 'value' | 'onChange' | 'multiple' | 'slotProps'> {
28
31
  options: OptionValue[];
29
32
  label?: string;
30
33
  helperText?: string;
31
34
  error?: boolean;
35
+ slotProps?: ComponentProps<typeof JoySelect<OptionValue, any, Multiple>>['slotProps'] & {
36
+ formControl?: ComponentProps<typeof FormControl>;
37
+ formLabel?: ComponentProps<typeof FormLabel>;
38
+ formHelperText?: ComponentProps<typeof FormHelperText>;
39
+ };
32
40
  value?: SelectValue<InferOptionValue<OptionValue>, Multiple>;
33
41
  onChange?: (event: Omit<React.SyntheticEvent<HTMLElement>, 'target'> & {
34
42
  target: {
package/dist/components/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -9,10 +9,6 @@ import { MonthPickerProps } from '../MonthPicker';
9
9
  import { MonthRangePickerProps } from '../MonthRangePicker';
10
10
  import { PercentageInputProps } from '../PercentageInput';
11
11
  import type { SearchBarOwnerState, SearchBarProps, SearchBarSlot } from '../SearchBar/SearchBar';
12
- import type { AlertProps } from '../Alert/Alert';
13
- import type { PaginationProps } from '../Pagination/Pagination';
14
- import type { FilterableCheckboxGroupProps } from '../FilterableCheckboxGroup/FilterableCheckboxGroup';
15
- import type { ProfileMenuProps } from '../ProfileMenu/ProfileMenu';
16
12
  declare module '@mui/joy/styles' {
17
13
  interface Components {
18
14
  Calendar?: {
@@ -47,22 +43,6 @@ declare module '@mui/joy/styles' {
47
43
  defaultProps?: Partial<SearchBarProps>;
48
44
  styleOverrides?: StyleOverrides<SearchBarSlot, SearchBarOwnerState, Theme>;
49
45
  };
50
- Alert?: {
51
- defaultProps?: Partial<AlertProps>;
52
- styleOverrides?: StyleOverrides<'root', {}, Theme>;
53
- };
54
- Pagination?: {
55
- defaultProps?: Partial<PaginationProps>;
56
- styleOverrides?: StyleOverrides<'root' | 'button' | 'container', {}, Theme>;
57
- };
58
- FilterableCheckboxGroup?: {
59
- defaultProps?: Partial<FilterableCheckboxGroupProps>;
60
- styleOverrides?: StyleOverrides<'root', {}, Theme>;
61
- };
62
- ProfileMenu?: {
63
- defaultProps?: Partial<ProfileMenuProps>;
64
- styleOverrides?: StyleOverrides<'root' | 'button' | 'item', {}, Theme>;
65
- };
66
46
  }
67
47
  }
68
48
  declare module '@mui/joy/Avatar' {
package/dist/components/data-display/Avatar.md CHANGED
@@ -352,7 +352,7 @@ While the image is loading, `children` are shown first, then the image is displa
352
352
  | `alt` | `string` | - | Alt text for the avatar image |
353
353
  | `children` | `ReactNode` | - | Fallback content (text, icon) when no image |
354
354
  | `getInitial` | `(name: string) => string` | First character | Custom function to extract initials from a name |
355
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Avatar size |
355
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Avatar size |
356
356
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'soft'` | Visual style |
357
357
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
358
358
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
package/dist/components/data-display/Badge.md CHANGED
@@ -362,7 +362,7 @@ function FeatureButton() {
362
362
  | `badgeContent` | `ReactNode` | - | Content displayed inside the badge (number, text). Omit for dot badge |
363
363
  | `children` | `ReactNode` | - | The element the badge is attached to |
364
364
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'danger'` | Badge color |
365
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Badge size |
365
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Badge size |
366
366
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style |
367
367
  | `max` | `number` | `99` | Maximum value before showing "N+" |
368
368
  | `invisible` | `boolean` | `false` | Hides the badge |
package/dist/components/data-display/Chip.md CHANGED
@@ -312,7 +312,7 @@ Can represent various states.
312
312
  | ---------------- | -------------------------------------------------------------- | ----------- | -------------------------------------- |
313
313
  | `children` | `ReactNode` | - | Chip content (text, icons) |
314
314
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'soft'` | Visual style |
315
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Chip size |
315
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Chip size |
316
316
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
317
317
  | `disabled` | `boolean` | `false` | Disables the chip |
318
318
  | `onClick` | `(event: MouseEvent) => void` | - | Click handler (makes chip interactive) |
package/dist/components/data-display/Table.md CHANGED
@@ -1745,7 +1745,7 @@ Guidance for responsive design:
1745
1745
  | `stripe` | `'odd' \| 'even'` | - | Striped row background |
1746
1746
  | `hoverRow` | `boolean` | `false` | Highlight rows on hover |
1747
1747
  | `stickyHeader` | `boolean` | `false` | Fix the header when scrolling |
1748
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Table size |
1748
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Table size |
1749
1749
  | `variant` | `'plain' \| 'outlined' \| 'soft' \| 'solid'` | `'plain'` | Visual style |
1750
1750
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
1751
1751
  | `sx` | `SxProps` | - | Custom styles |
package/dist/components/data-display/Tooltip.md CHANGED
@@ -253,7 +253,7 @@ Used with interactive elements.
253
253
  | `onClose` | `() => void` | - | Callback when tooltip should close |
254
254
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Tooltip color scheme |
255
255
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style |
256
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Tooltip size |
256
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tooltip size |
257
257
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
258
258
 
259
259
  > **Note**: Tooltip also accepts all Joy UI Tooltip props and Framer Motion props.
package/dist/components/feedback/Alert.md CHANGED
@@ -485,7 +485,7 @@ function DismissibleAlerts() {
485
485
  | `actions` | `ReactNode` | - | Action buttons or elements displayed on the right |
486
486
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Alert color scheme |
487
487
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'soft'` | Visual style |
488
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Alert size (affects title/content typography levels) |
488
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Alert size (affects title/content typography levels) |
489
489
  | `startDecorator` | `ReactNode` | - | Icon or element rendered before the content |
490
490
  | `invertedColors` | `boolean` | `false` | Invert child component colors (auto `true` when `variant='solid'`) |
491
491
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
package/dist/components/feedback/CircularProgress.md CHANGED
@@ -29,7 +29,7 @@ function MyComponent() {
29
29
 
30
30
  ## Sizes
31
31
 
32
- CircularProgress supports three sizes: `sm` (default), `md`, and `lg`.
32
+ CircularProgress supports three sizes: `sm`, `md` (default), and `lg`.
33
33
 
34
34
  ```tsx
35
35
  <>
@@ -228,7 +228,7 @@ function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
228
228
  | ------------- | -------------------------------------------------------------- | ----------- | -------------------------------------------- |
229
229
  | `determinate` | `boolean` | `false` | Show determinate progress (requires `value`) |
230
230
  | `value` | `number` | - | Progress value (0-100) for determinate mode |
231
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Progress indicator size |
231
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Progress indicator size |
232
232
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'soft'` | Visual style |
233
233
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme |
234
234
  | `thickness` | `number` | - | Stroke width of the circle |
package/dist/components/feedback/Modal.md CHANGED
@@ -742,7 +742,7 @@ Modal uses a composition pattern with multiple sub-components:
742
742
  | --------- | -------------------------------------------------------------- | ------------ | ------------ |
743
743
  | `variant` | `'plain' \| 'outlined' \| 'soft' \| 'solid'` | `'outlined'` | Visual style |
744
744
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
745
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Dialog size |
745
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Dialog size |
746
746
  | `layout` | `'center' \| 'fullscreen'` | `'center'` | Layout mode |
747
747
 
748
748
  ### ModalFrame Props
package/dist/components/inputs/Autocomplete.md CHANGED
@@ -792,7 +792,7 @@ function LazyAutocomplete({ fetchOptions }) {
792
792
  | `loading` | `boolean` | `false` | Show loading indicator |
793
793
  | `multiple` | `boolean` | `false` | Allow multiple selections |
794
794
  | `groupBy` | `(option) => string` | - | Function to group options |
795
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Input size |
795
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
796
796
  | `variant` | `'outlined' \| 'soft' \| 'solid' \| 'plain'` | `'outlined'` | Visual style variant |
797
797
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
798
798
  | `disabled` | `boolean` | `false` | Disable the input |
package/dist/components/inputs/Button.md CHANGED
@@ -106,7 +106,7 @@ Four visual styles are available to indicate action importance.
106
106
 
107
107
  ## Sizes
108
108
 
109
- Three sizes are available: `sm` (default), `md`, and `lg`.
109
+ Three sizes are available: `sm`, `md` (default), and `lg`.
110
110
 
111
111
  ```tsx
112
112
  <>
@@ -285,7 +285,7 @@ function AsyncButton() {
285
285
  | ------------------ | -------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------- |
286
286
  | `children` | `ReactNode` | - | Button content (text, icons, etc.) |
287
287
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style |
288
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Button size |
288
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
289
289
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme |
290
290
  | `disabled` | `boolean` | `false` | Disables the button |
291
291
  | `loading` | `boolean` | `false` | Shows a loading indicator and disables the button |
package/dist/components/inputs/ButtonGroup.md CHANGED
@@ -122,7 +122,7 @@ ButtonGroup supports four visual variants: `solid`, `soft`, `outlined`, and `pla
122
122
 
123
123
  ## Sizes
124
124
 
125
- Control the size of all buttons in the group with the `size` prop. Available sizes are `sm` (default), `md`, and `lg`.
125
+ Control the size of all buttons in the group with the `size` prop. Available sizes are `sm`, `md` (default), and `lg`.
126
126
 
127
127
  ```tsx
128
128
  <div
@@ -399,7 +399,7 @@ const [view, setView] = useState('list');
399
399
  | ------------- | -------------------------------------------------------------- | -------------- | ----------------------------------- |
400
400
  | `children` | `ReactNode` | - | Button elements inside the group |
401
401
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'outlined'` | Visual style applied to all buttons |
402
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Size applied to all buttons |
402
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size applied to all buttons |
403
403
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color applied to all buttons |
404
404
  | `disabled` | `boolean` | `false` | Disables all buttons in the group |
405
405
  | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
package/dist/components/inputs/Checkbox.md CHANGED
@@ -52,7 +52,7 @@ Four visual styles are available: `solid` (default when checked), `soft`, `outli
52
52
 
53
53
  ## Sizes
54
54
 
55
- Three sizes are available: `sm` (default), `md`, and `lg`.
55
+ Three sizes are available: `sm`, `md` (default), and `lg`.
56
56
 
57
57
  ```tsx
58
58
  <Stack direction="row" spacing={2} alignItems="center">
@@ -278,7 +278,7 @@ function ProductFilter() {
278
278
  | `label` | `ReactNode` | - | Label content displayed next to the checkbox |
279
279
  | `onChange` | `(event: ChangeEvent<HTMLInputElement>) => void` | - | Callback when the checked state changes |
280
280
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
281
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Checkbox size |
281
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
282
282
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style when checked |
283
283
  | `disabled` | `boolean` | `false` | Disables the checkbox |
284
284
  | `readOnly` | `boolean` | `false` | Makes the checkbox read-only |
package/dist/components/inputs/CurrencyInput.md CHANGED
@@ -74,7 +74,7 @@ Korean Won format with `₩` symbol, comma thousand separators, and no decimal p
74
74
 
75
75
  ## Sizes
76
76
 
77
- CurrencyInput supports three sizes: `sm` (default), `md`, and `lg`.
77
+ CurrencyInput supports three sizes: `sm`, `md` (default), and `lg`.
78
78
 
79
79
  ```tsx
80
80
  <Stack gap={2}>
@@ -267,7 +267,7 @@ function BudgetSetting() {
267
267
  | `disabled` | `boolean` | `false` | Disables the input |
268
268
  | `name` | `string` | - | HTML name attribute for form submission |
269
269
  | `placeholder` | `string` | - | Placeholder text when the input is empty |
270
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Input size |
270
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
271
271
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
272
272
 
273
273
  ## Accessibility
package/dist/components/inputs/FilterableCheckboxGroup.md CHANGED
@@ -382,7 +382,7 @@ When dealing with a large set of options like countries, the search filter and v
382
382
  | `placeholder` | `string` | - | Placeholder text for the search input |
383
383
  | `required` | `boolean` | `false` | Marks the field as required |
384
384
  | `disabled` | `boolean` | `false` | Disables all checkboxes |
385
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Component size |
385
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Component size |
386
386
  | `maxHeight` | `string \| number` | `300` | Maximum height of the options list before scrolling |
387
387
 
388
388
  ## Accessibility
package/dist/components/inputs/FormControl.md CHANGED
@@ -366,7 +366,7 @@ function SettingsForm() {
366
366
  | `error` | `boolean` | `false` | Applies error styling to child components |
367
367
  | `disabled` | `boolean` | `false` | Disables all child form elements |
368
368
  | `required` | `boolean` | `false` | Adds required indicator to FormLabel and `aria-required` to input |
369
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Size applied to child components |
369
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size applied to child components |
370
370
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
371
371
  | `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction |
372
372
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
package/dist/components/inputs/IconButton.md CHANGED
@@ -100,7 +100,7 @@ Four visual variants are available: `solid` (filled background), `soft` (tinted
100
100
 
101
101
  ## Sizes
102
102
 
103
- The `size` prop controls the button dimensions. Available sizes are `sm` (default), `md`, and `lg`. Ensure touch targets meet the minimum 44px recommended size for touch interfaces.
103
+ The `size` prop controls the button dimensions. Available sizes are `sm`, `md` (default), and `lg`. Ensure touch targets meet the minimum 44px recommended size for touch interfaces.
104
104
 
105
105
  ```tsx
106
106
  <div
@@ -432,7 +432,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
432
432
  | ----------- | -------------------------------------------------------------- | ----------- | ---------------------------------------- |
433
433
  | `children` | `ReactNode` | - | Icon element to render inside the button |
434
434
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'plain'` | Visual style |
435
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Button size |
435
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
436
436
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
437
437
  | `disabled` | `boolean` | `false` | Disables the button |
438
438
  | `loading` | `boolean` | `false` | Shows a loading indicator |
package/dist/components/inputs/Input.md CHANGED
@@ -63,7 +63,7 @@ Input supports four visual styles: `outlined` (default), `solid`, `soft`, and `p
63
63
 
64
64
  ## Sizes
65
65
 
66
- Three sizes are available: `sm` (default), `md`, and `lg`.
66
+ Three sizes are available: `sm`, `md` (default), and `lg`.
67
67
 
68
68
  ```tsx
69
69
  <>
@@ -434,7 +434,7 @@ function ValidatedForm() {
434
434
  | `readOnly` | `boolean` | `false` | Makes the input read-only (focusable but not editable) |
435
435
  | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
436
436
  | `name` | `string` | - | HTML name attribute for form submission |
437
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Input size |
437
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
438
438
  | `variant` | `'outlined' \| 'solid' \| 'soft' \| 'plain'` | `'outlined'` | Visual style variant |
439
439
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
440
440
  | `startDecorator` | `ReactNode` | - | Content rendered at the start of the input |
package/dist/components/inputs/PercentageInput.md CHANGED
@@ -42,7 +42,7 @@ function MyComponent() {
42
42
 
43
43
  ## Sizes
44
44
 
45
- PercentageInput supports three sizes: `sm` (default), `md`, and `lg`.
45
+ PercentageInput supports three sizes: `sm`, `md` (default), and `lg`.
46
46
 
47
47
  ```tsx
48
48
  <Stack gap={2}>
@@ -279,7 +279,7 @@ function CompletionTracker({ value, onChange }) {
279
279
  | `disabled` | `boolean` | `false` | Disables the input |
280
280
  | `name` | `string` | - | HTML name attribute for form submission |
281
281
  | `placeholder` | `string` | - | Placeholder text when the input is empty |
282
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Input size |
282
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
283
283
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
284
284
 
285
285
  > **Note**: PercentageInput also accepts all Input props and Framer Motion props.
package/dist/components/inputs/RadioButton.md CHANGED
@@ -63,7 +63,7 @@ Radio supports four visual variants: `outlined` (default), `soft`, `solid`, and
63
63
 
64
64
  ## Sizes
65
65
 
66
- Three size presets are available: `sm` (default), `md`, and `lg`. Use smaller sizes for compact layouts and larger sizes for touch-friendly interfaces.
66
+ Three size presets are available: `sm`, `md` (default), and `lg`. Use smaller sizes for compact layouts and larger sizes for touch-friendly interfaces.
67
67
 
68
68
  ```tsx
69
69
  <FormControl>
@@ -545,7 +545,7 @@ function ShippingOptions() {
545
545
  | `value` | `string` | - | Value attribute for form submission |
546
546
  | `name` | `string` | - | Groups radios together for mutual exclusivity |
547
547
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme |
548
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Radio button size |
548
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio button size |
549
549
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'outlined'` | Visual style |
550
550
  | `disabled` | `boolean` | `false` | Disables the radio button |
551
551
  | `overlay` | `boolean` | `false` | Extends clickable area to parent container |
package/dist/components/inputs/RadioList.md CHANGED
@@ -113,7 +113,7 @@ Set `orientation="horizontal"` to display options in a row.
113
113
 
114
114
  ## Sizes
115
115
 
116
- RadioList supports `sm` (default), `md`, and `lg` sizes. The size is applied to all radio buttons in the group.
116
+ RadioList supports `sm`, `md` (default), and `lg` sizes. The size is applied to all radio buttons in the group.
117
117
 
118
118
  ```tsx
119
119
  <Stack gap={3}>
@@ -260,7 +260,7 @@ function RoleSelector({ roles }: { roles: { id: string; name: string }[] }) {
260
260
  | `name` | `string` | - | Groups radios together for form submission |
261
261
  | `disabled` | `boolean` | `false` | Disables all radio buttons |
262
262
  | `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout orientation |
263
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Radio button size |
263
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio button size |
264
264
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme |
265
265
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
266
266
 
package/dist/components/inputs/Select.md CHANGED
@@ -80,7 +80,7 @@ Select supports four visual styles: `outlined` (default), `plain`, `soft`, and `
80
80
 
81
81
  ## Sizes
82
82
 
83
- Three sizes are available: `sm` (default), `md`, and `lg`.
83
+ Three sizes are available: `sm`, `md` (default), and `lg`.
84
84
 
85
85
  ```tsx
86
86
  <Stack spacing={4}>
@@ -207,6 +207,58 @@ Combining `label`, `helperText`, and `error` produces a complete form field. Her
207
207
  </>
208
208
  ```
209
209
 
210
+ ## Slot Props and Deterministic Ids
211
+
212
+ The `slotProps` prop targets both Joy Select's own slots (`button`, `listbox`, `root`, …) and the wrapper slots that `Select` composes around it (`formControl`, `formLabel`, `formHelperText`). Pass `id` (or `slotProps.formControl.id`) to pin the field's ids deterministically — `FormControl` derives the button `id` and the label `id` (`${id}-label`) from it, which keeps `byLabelText` / `byRole('combobox', { name })` queries stable in tests.
213
+
214
+ ```tsx
215
+ <Stack
216
+ spacing={3}
217
+ sx={{
218
+ minWidth: 240
219
+ }}
220
+ >
221
+ {/* id seeds deterministic FormControl ids: button#pet, label#pet-label (testable via byLabelText/byRole) */}
222
+ <Select
223
+ id="pet"
224
+ label="Pet"
225
+ defaultValue="cat"
226
+ options={options}
227
+ slotProps={{
228
+ formLabel: {
229
+ sx: {
230
+ color: "primary.500"
231
+ }
232
+ },
233
+ formHelperText: {
234
+ sx: {
235
+ fontStyle: "italic"
236
+ }
237
+ },
238
+ button: {
239
+ "aria-describedby": "pet-extra"
240
+ }
241
+ }}
242
+ helperText="Wired via slotProps"
243
+ />
244
+ </Stack>
245
+ ```
246
+
247
+ ```tsx
248
+ <Select
249
+ id="pet"
250
+ label="Pet"
251
+ helperText="Wired via slotProps"
252
+ options={options}
253
+ slotProps={{
254
+ formLabel: { sx: { color: 'primary.500' } },
255
+ formHelperText: { sx: { fontStyle: 'italic' } },
256
+ button: { 'aria-describedby': 'pet-extra' },
257
+ }}
258
+ />
259
+ // → renders button#pet and label#pet-label, connected via aria-labelledby
260
+ ```
261
+
210
262
  ## Required Field
211
263
 
212
264
  Set `required` to mark the field as required. An asterisk is added to the label automatically.
@@ -557,25 +609,27 @@ function LocationSelect() {
557
609
 
558
610
  ### Key Props
559
611
 
560
- | Prop | Type | Default | Description |
561
- | ---------------- | ---------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
562
- | `options` | `OptionType[]` | `[]` | Array of options (objects or primitives) |
563
- | `value` | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | - | Selected value(s) for controlled mode |
564
- | `defaultValue` | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | - | Initial value for uncontrolled mode |
565
- | `onChange` | `(event: { target: { name?, value } }, newValue) => void` | - | Callback when selection changes |
566
- | `multiple` | `boolean` | `false` | Allow multiple selections (value becomes an array) |
567
- | `label` | `string` | - | Form label displayed above the select |
568
- | `helperText` | `string` | - | Helper text displayed below the select |
569
- | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
570
- | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
571
- | `disabled` | `boolean` | `false` | Disables the select |
572
- | `placeholder` | `string` | `'Choose one...'` | Placeholder text when no value is selected |
573
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Select size |
574
- | `variant` | `'outlined' \| 'plain' \| 'solid' \| 'soft'` | `'outlined'` | Visual style variant |
575
- | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
576
- | `startDecorator` | `ReactNode` | - | Content rendered before the select trigger text |
577
- | `endDecorator` | `ReactNode` | - | Content rendered after the select trigger text |
578
- | `sx` | `SxProps` | - | Custom styles using the MUI system |
612
+ | Prop | Type | Default | Description |
613
+ | ---------------- | ----------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------- |
614
+ | `options` | `OptionType[]` | `[]` | Array of options (objects or primitives) |
615
+ | `value` | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | - | Selected value(s) for controlled mode |
616
+ | `defaultValue` | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | - | Initial value for uncontrolled mode |
617
+ | `onChange` | `(event: { target: { name?, value } }, newValue) => void` | - | Callback when selection changes |
618
+ | `multiple` | `boolean` | `false` | Allow multiple selections (value becomes an array) |
619
+ | `label` | `string` | - | Form label displayed above the select |
620
+ | `helperText` | `string` | - | Helper text displayed below the select |
621
+ | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
622
+ | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
623
+ | `disabled` | `boolean` | `false` | Disables the select |
624
+ | `placeholder` | `string` | `'Choose one...'` | Placeholder text when no value is selected |
625
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Select size |
626
+ | `variant` | `'outlined' \| 'plain' \| 'solid' \| 'soft'` | `'outlined'` | Visual style variant |
627
+ | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
628
+ | `startDecorator` | `ReactNode` | - | Content rendered before the select trigger text |
629
+ | `endDecorator` | `ReactNode` | - | Content rendered after the select trigger text |
630
+ | `id` | `string` | - | Seeds deterministic ids: button `id`, label `${id}-label` |
631
+ | `slotProps` | `{ formControl?, formLabel?, formHelperText?, button?, listbox?, ... }` | - | Props forwarded to composed wrapper slots and Joy Select slots |
632
+ | `sx` | `SxProps` | - | Custom styles using the MUI system |
579
633
 
580
634
  ### Option Type
581
635
 
@@ -611,7 +665,8 @@ const options = [
611
665
 
612
666
  ## Accessibility
613
667
 
614
- - **Label association**: When you use the `label` prop, the component automatically connects the label to the select element via `aria-labelledby`. Always provide a label for screen reader users.
668
+ - **Label association**: When you use the `label` prop, the component automatically connects the label to the select element via `aria-labelledby` (the internal `FormControl` propagates a `labelId` to both the label and the button slot). You do not need to wire `useId` or a custom `FormLabel` externally. Always provide a label for screen reader users.
669
+ - **Deterministic ids for tests**: Pass `id` (or `slotProps.formControl.id`) to fix the generated ids, so `byLabelText` / `byRole('combobox', { name })` resolve to a stable accessible name.
615
670
  - **Keyboard navigation**: The select can be opened with Enter or Space, navigated with Arrow Up/Down and Home/End, confirmed with Enter, and dismissed with Escape.
616
671
  - **Error announcement**: When `error` is set, `aria-invalid` is applied. Pair it with a descriptive `helperText` so assistive technology can announce the error reason.
617
672
  - **Required state**: The `required` prop adds `aria-required` and a visible asterisk to the label, communicating the requirement both visually and programmatically.
package/dist/components/inputs/Slider.md CHANGED
@@ -37,7 +37,7 @@ function MyComponent() {
37
37
 
38
38
  ## Sizes
39
39
 
40
- Slider supports three sizes: `sm` (default), `md`, and `lg`.
40
+ Slider supports three sizes: `sm`, `md` (default), and `lg`.
41
41
 
42
42
  ```tsx
43
43
  <Stack
@@ -391,7 +391,7 @@ function TemperatureSetting() {
391
391
  | `valueLabelDisplay` | `'on' \| 'off' \| 'auto'` | `'auto'` | When to display the value label |
392
392
  | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Slider orientation |
393
393
  | `disabled` | `boolean` | `false` | Disables the slider |
394
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Slider size |
394
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Slider size |
395
395
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme |
396
396
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style |
397
397
  | `sx` | `SxProps` | - | Custom styles using the MUI system |
package/dist/components/inputs/Switch.md CHANGED
@@ -394,7 +394,7 @@ function FeatureToggle() {
394
394
  | `disabled` | `boolean` | `false` | Disables the switch |
395
395
  | `readOnly` | `boolean` | `false` | Makes the switch read-only |
396
396
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme when checked |
397
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Switch size |
397
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size |
398
398
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'solid'` | Visual style |
399
399
  | `startDecorator` | `ReactNode` | - | Content rendered before the switch |
400
400
  | `endDecorator` | `ReactNode` | - | Content rendered after the switch |
package/dist/components/inputs/Textarea.md CHANGED
@@ -72,7 +72,7 @@ Textarea supports four visual variants: `solid`, `soft`, `outlined`, and `plain`
72
72
 
73
73
  ## Sizes
74
74
 
75
- Textarea comes in three sizes: `sm`, `md`, and `lg`. The default size is `sm`.
75
+ Textarea comes in three sizes: `sm`, `md`, and `lg`. The default size is `md`.
76
76
 
77
77
  ```tsx
78
78
  <>
@@ -269,7 +269,7 @@ function ReadOnlyNotes() {
269
269
  | `placeholder` | `string` | - | Placeholder text when the textarea is empty |
270
270
  | `disabled` | `boolean` | `false` | Disables the textarea |
271
271
  | `required` | `boolean` | `false` | Marks the field as required |
272
- | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Textarea size |
272
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Textarea size |
273
273
  | `variant` | `'outlined' \| 'solid' \| 'soft' \| 'plain'` | `'outlined'` | Visual style variant |
274
274
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
275
275
  | `sx` | `SxProps` | - | Custom styles using the MUI system |