@ceed/ads 1.36.0 → 1.37.0-next.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 (44) 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/ThemeProvider/ThemeProvider.d.ts +20 -0
  6. package/dist/components/data-display/Avatar.md +1 -1
  7. package/dist/components/data-display/Badge.md +1 -1
  8. package/dist/components/data-display/Chip.md +1 -1
  9. package/dist/components/data-display/Table.md +1 -1
  10. package/dist/components/data-display/Tooltip.md +1 -1
  11. package/dist/components/feedback/Alert.md +1 -1
  12. package/dist/components/feedback/CircularProgress.md +2 -2
  13. package/dist/components/feedback/Modal.md +1 -1
  14. package/dist/components/inputs/Autocomplete.md +1 -1
  15. package/dist/components/inputs/Button.md +2 -2
  16. package/dist/components/inputs/ButtonGroup.md +2 -2
  17. package/dist/components/inputs/Checkbox.md +2 -2
  18. package/dist/components/inputs/CurrencyInput.md +2 -2
  19. package/dist/components/inputs/FilterableCheckboxGroup.md +1 -1
  20. package/dist/components/inputs/FormControl.md +1 -1
  21. package/dist/components/inputs/IconButton.md +2 -2
  22. package/dist/components/inputs/Input.md +2 -2
  23. package/dist/components/inputs/PercentageInput.md +2 -2
  24. package/dist/components/inputs/RadioButton.md +2 -2
  25. package/dist/components/inputs/RadioList.md +2 -2
  26. package/dist/components/inputs/Select.md +2 -2
  27. package/dist/components/inputs/Slider.md +2 -2
  28. package/dist/components/inputs/Switch.md +1 -1
  29. package/dist/components/inputs/Textarea.md +2 -2
  30. package/dist/components/inputs/Uploader/Uploader.md +1 -1
  31. package/dist/components/navigation/IconMenuButton.md +1 -1
  32. package/dist/components/navigation/Menu.md +1 -1
  33. package/dist/components/navigation/MenuButton.md +1 -1
  34. package/dist/components/navigation/Pagination.md +1 -1
  35. package/dist/components/navigation/ProfileMenu.md +2 -2
  36. package/dist/components/navigation/Tabs.md +1 -1
  37. package/dist/components/surfaces/Accordions.md +1 -1
  38. package/dist/components/surfaces/Card.md +2 -2
  39. package/dist/index.browser.js +3 -3
  40. package/dist/index.browser.js.map +3 -3
  41. package/dist/index.cjs +347 -224
  42. package/dist/index.js +155 -32
  43. package/framer/index.js +1 -1
  44. package/package.json +3 -2
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(props: AlertProps): React.JSX.Element;
17
+ declare function Alert(inProps: 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(props: FilterableCheckboxGroupProps): React.JSX.Element;
19
+ declare function FilterableCheckboxGroup(inProps: 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(props: PaginationProps): React.JSX.Element;
26
+ declare function Pagination(inProps: 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(props: ProfileMenuProps): React.JSX.Element;
39
+ declare function ProfileMenu(inProps: ProfileMenuProps): React.JSX.Element;
40
40
  declare namespace ProfileMenu {
41
41
  var displayName: string;
42
42
  }
package/dist/components/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -9,6 +9,10 @@ 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';
12
16
  declare module '@mui/joy/styles' {
13
17
  interface Components {
14
18
  Calendar?: {
@@ -43,6 +47,22 @@ declare module '@mui/joy/styles' {
43
47
  defaultProps?: Partial<SearchBarProps>;
44
48
  styleOverrides?: StyleOverrides<SearchBarSlot, SearchBarOwnerState, Theme>;
45
49
  };
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
+ };
46
66
  }
47
67
  }
48
68
  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'` | `'md'` | Avatar size |
355
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Badge size |
365
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Chip size |
315
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Table size |
1748
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Tooltip size |
256
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Alert size (affects title/content typography levels) |
488
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
32
+ CircularProgress supports three sizes: `sm` (default), `md`, 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'` | `'md'` | Progress indicator size |
231
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Dialog size |
745
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Input size |
795
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
109
+ Three sizes are available: `sm` (default), `md`, 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'` | `'md'` | Button size |
288
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
125
+ Control the size of all buttons in the group with the `size` prop. Available sizes are `sm` (default), `md`, 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'` | `'md'` | Size applied to all buttons |
402
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
55
+ Three sizes are available: `sm` (default), `md`, 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'` | `'md'` | Checkbox size |
281
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
77
+ CurrencyInput supports three sizes: `sm` (default), `md`, 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'` | `'md'` | Input size |
270
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Component size |
385
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Size applied to child components |
369
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), 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` (default), `md`, 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'` | `'md'` | Button size |
435
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
66
+ Three sizes are available: `sm` (default), `md`, 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'` | `'md'` | Input size |
437
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
45
+ PercentageInput supports three sizes: `sm` (default), `md`, 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'` | `'md'` | Input size |
282
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`. Use smaller sizes for compact layouts and larger sizes for touch-friendly interfaces.
66
+ Three size presets are available: `sm` (default), `md`, 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'` | `'md'` | Radio button size |
548
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg` sizes. The size is applied to all radio buttons in the group.
116
+ RadioList supports `sm` (default), `md`, 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'` | `'md'` | Radio button size |
263
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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`, `md` (default), and `lg`.
83
+ Three sizes are available: `sm` (default), `md`, and `lg`.
84
84
 
85
85
  ```tsx
86
86
  <Stack spacing={4}>
@@ -570,7 +570,7 @@ function LocationSelect() {
570
570
  | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
571
571
  | `disabled` | `boolean` | `false` | Disables the select |
572
572
  | `placeholder` | `string` | `'Choose one...'` | Placeholder text when no value is selected |
573
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Select size |
573
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Select size |
574
574
  | `variant` | `'outlined' \| 'plain' \| 'solid' \| 'soft'` | `'outlined'` | Visual style variant |
575
575
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
576
576
  | `startDecorator` | `ReactNode` | - | Content rendered before the select trigger text |
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`, `md` (default), and `lg`.
40
+ Slider supports three sizes: `sm` (default), `md`, 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'` | `'md'` | Slider size |
394
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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'` | `'md'` | Switch size |
397
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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 `md`.
75
+ Textarea comes in three sizes: `sm`, `md`, and `lg`. The default size is `sm`.
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'` | `'md'` | Textarea size |
272
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 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 |
package/dist/components/inputs/Uploader/Uploader.md CHANGED
@@ -355,7 +355,7 @@ function GalleryUpload({ existingImages }) {
355
355
  | `error` | `boolean` | `false` | Applies error styling |
356
356
  | `disabled` | `boolean` | `false` | Disables the uploader |
357
357
  | `name` | `string` | - | HTML name attribute for form submission |
358
- | `size` | `'sm' \| 'md'` | `'md'` | Uploader size |
358
+ | `size` | `'sm' \| 'md'` | `'sm'` | Uploader size |
359
359
 
360
360
  ## Accessibility
361
361
 
package/dist/components/navigation/IconMenuButton.md CHANGED
@@ -233,7 +233,7 @@ function EditorToolbar({ onAction }) {
233
233
  | ---------------------- | ---------------------------------------------------------------------- | ----------- | -------------------------------------------- |
234
234
  | `icon` | `ReactNode` | (required) | Icon element to render in the trigger button |
235
235
  | `items` | `{ text: string; component?: ElementType; componentProps?: object }[]` | - | Menu items |
236
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
236
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Button size |
237
237
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Button color |
238
238
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'plain'` | Button visual style |
239
239
  | `disabled` | `boolean` | `false` | Disables the button |
package/dist/components/navigation/Menu.md CHANGED
@@ -844,7 +844,7 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
844
844
  | `open` | `boolean` | - | Controlled open state |
845
845
  | `onClose` | `() => void` | - | Callback when the menu closes |
846
846
  | `placement` | `Placement` | `'bottom-start'` | Menu position relative to trigger |
847
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Menu size |
847
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Menu size |
848
848
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'outlined'` | Visual style |
849
849
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
850
850
  | `sx` | `SxProps` | - | Custom styles |
package/dist/components/navigation/MenuButton.md CHANGED
@@ -238,7 +238,7 @@ function ToolbarActions({ selectedItems, onAction }) {
238
238
  | `buttonText` | `string` | (required) | Text displayed in the trigger button |
239
239
  | `items` | `{ text: string; onClick?: () => void }[]` | (required) | Menu item list |
240
240
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'outlined'` | Button visual style |
241
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
241
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Button size |
242
242
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Button color |
243
243
  | `disabled` | `boolean` | `false` | Disables the button |
244
244
  | `startDecorator` | `ReactNode` | - | Content before button text |
package/dist/components/navigation/Pagination.md CHANGED
@@ -231,7 +231,7 @@ function URLPaginatedList() {
231
231
  | `defaultPaginationModel` | `{ page: number; pageSize: number }` | `{ page: 1, pageSize: 25 }` | Initial pagination state |
232
232
  | `rowCount` | `number` | (required) | Total number of rows |
233
233
  | `onPageChange` | `(newPage: number) => void` | (required) | Callback when page changes |
234
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Pagination control size |
234
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Pagination control size |
235
235
  | `variant` | `'standard' \| 'compact'` | `'standard'` | Pagination display mode |
236
236
 
237
237
  ## Best Practices
package/dist/components/navigation/ProfileMenu.md CHANGED
@@ -170,7 +170,7 @@ Profile card without any action menu items. The dropdown displays only the user
170
170
 
171
171
  ## Sizes
172
172
 
173
- ProfileMenu supports `md` (default) and `sm` size variants for use in different layout densities.
173
+ ProfileMenu supports `sm` (default) and `md` size variants for use in different layout densities.
174
174
 
175
175
  ```tsx
176
176
  <Stack direction="row" gap="150px">
@@ -405,7 +405,7 @@ function OrgProfileMenu({ user, organization }) {
405
405
  | `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled) |
406
406
  | `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
407
407
  | `getInitial` | `(name: string) => string` | First character | Custom function to extract initials from name |
408
- | `size` | `'sm' \| 'md'` | `'md'` | Component size |
408
+ | `size` | `'sm' \| 'md'` | `'sm'` | Component size |
409
409
 
410
410
  ## Best Practices
411
411
 
package/dist/components/navigation/Tabs.md CHANGED
@@ -368,7 +368,7 @@ function SidebarTabs() {
368
368
  | `defaultValue` | `string \| number` | - | Initial active tab (uncontrolled) |
369
369
  | `onChange` | `(event, value) => void` | - | Callback when active tab changes |
370
370
  | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab layout direction |
371
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tab size |
371
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Tab size |
372
372
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'plain'` | Visual style |
373
373
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
374
374
  | `sx` | `SxProps` | - | Custom styles |
package/dist/components/surfaces/Accordions.md CHANGED
@@ -615,7 +615,7 @@ function MultiSectionForm({ onSubmit }) {
615
615
  | Prop | Type | Default | Description |
616
616
  | ---------------- | -------------------------------------------------------------- | ----------- | ------------------------------------------------- |
617
617
  | `items` | `Array<{ summary: string; details: ReactNode }>` | - | Array of accordion items with headers and content |
618
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the accordion |
618
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Size of the accordion |
619
619
  | `variant` | `'plain' \| 'outlined' \| 'soft' \| 'solid'` | `'plain'` | Visual style variant |
620
620
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color theme |
621
621
  | `disableDivider` | `boolean` | `false` | Remove divider lines between items |
package/dist/components/surfaces/Card.md CHANGED
@@ -127,7 +127,7 @@ Apply a color scheme to match your UI context.
127
127
 
128
128
  ## Sizes
129
129
 
130
- Three sizes control the card's internal padding: `sm`, `md` (default), and `lg`.
130
+ Three sizes control the card's internal padding: `sm` (default), `md`, and `lg`.
131
131
 
132
132
  ```tsx
133
133
  <Stack direction="row" spacing={2} alignItems="flex-start" flexWrap="wrap">
@@ -1306,7 +1306,7 @@ A social-media-style card with avatar, text, inline image, and engagement button
1306
1306
  | ---------------- | -------------------------------------------------------------- | ------------ | -------------------------------------------------------- |
1307
1307
  | `children` | `ReactNode` | - | Card content (CardContent, CardCover, CardActions, etc.) |
1308
1308
  | `variant` | `'solid' \| 'soft' \| 'outlined' \| 'plain'` | `'outlined'` | Visual style |
1309
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Card size (affects padding) |
1309
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Card size (affects padding) |
1310
1310
  | `color` | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme |
1311
1311
  | `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Card layout direction |
1312
1312
  | `invertedColors` | `boolean` | `false` | Invert child component colors |