@ssa-ui-kit/core 3.20.3 → 3.21.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.
- package/dist/components/Checkbox/Checkbox.d.ts +4 -2
- package/dist/components/Checkbox/types.d.ts +6 -4
- package/dist/components/Switch/Switch.d.ts +3 -2
- package/dist/components/Switch/types.d.ts +5 -2
- package/dist/index.js +799 -706
- package/dist/index.mjs +799 -706
- package/dist/styles/disabledSurface.d.ts +20 -0
- package/dist/tsbuildcache +1 -1
- package/package.json +3 -3
|
@@ -9,11 +9,13 @@ import { CheckboxProps } from './types';
|
|
|
9
9
|
*
|
|
10
10
|
* Colors are driven by `theme.palette`:
|
|
11
11
|
* - `primary` (default) — blue; uses `palette.primary.light/main/dark` for
|
|
12
|
-
* the resting border, checked fill, and hover fill.
|
|
12
|
+
* the resting border, checked fill, and hover fill.
|
|
13
13
|
* - `success` — green; uses `palette.success.main/dark` for the border and fills.
|
|
14
|
-
* Disabled uses `greyFocused40`.
|
|
15
14
|
* - `custom` — unstyled; apply your own colors via `className` or the `css` prop.
|
|
16
15
|
*
|
|
16
|
+
* When disabled, an unchecked box goes flat `greyFocused40`; a checked or
|
|
17
|
+
* indeterminate one keeps its fill colour, muted, so the state stays readable.
|
|
18
|
+
*
|
|
17
19
|
* @category Form Controls
|
|
18
20
|
* @subcategory Input
|
|
19
21
|
*
|
|
@@ -122,11 +122,13 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
|
|
|
122
122
|
* Color variant of the checkbox — controls the checked and focus-state colors.
|
|
123
123
|
* Sourced from `theme.palette`:
|
|
124
124
|
* - `primary` — blue (uses `palette.primary`); resting border is `palette.primary.light`,
|
|
125
|
-
* checked fill is `palette.primary.main`, hover fill is `palette.primary.dark
|
|
126
|
-
* disabled box
|
|
125
|
+
* checked fill is `palette.primary.main`, hover fill is `palette.primary.dark`.
|
|
126
|
+
* When disabled, an unchecked box is `greyFocused40` while a checked one keeps
|
|
127
|
+
* `palette.primary.main`, muted
|
|
127
128
|
* - `success` — green (uses `palette.success`); resting border is `palette.success.main`,
|
|
128
|
-
* checked fill is `palette.success.main`, hover fill is `palette.success.dark
|
|
129
|
-
* disabled box
|
|
129
|
+
* checked fill is `palette.success.main`, hover fill is `palette.success.dark`.
|
|
130
|
+
* When disabled, an unchecked box is `greyFocused40` while a checked one keeps
|
|
131
|
+
* `palette.success.main`, muted
|
|
130
132
|
* - `custom` — no built-in color; apply styles via `className` or the `css` prop
|
|
131
133
|
* @default 'primary'
|
|
132
134
|
*/
|
|
@@ -12,7 +12,8 @@ import { SwitchProps } from './types';
|
|
|
12
12
|
* object to supply arbitrary CSS color values.
|
|
13
13
|
*
|
|
14
14
|
* The off state always shows a neutral grey background (`greyFocused`).
|
|
15
|
-
*
|
|
15
|
+
* When disabled, the off state uses `greySelectedMenuItem`; the on state keeps its
|
|
16
|
+
* color, muted by a white overlay so the on/off distinction survives.
|
|
16
17
|
* Hovering the on state darkens it: palette variants swap to their `palette.*.dark`
|
|
17
18
|
* token; custom colors get a `rgba(0,0,0,0.15)` overlay so the knob stays unaffected.
|
|
18
19
|
*
|
|
@@ -37,7 +38,7 @@ import { SwitchProps } from './types';
|
|
|
37
38
|
*
|
|
38
39
|
* @example
|
|
39
40
|
* ```tsx
|
|
40
|
-
* // Disabled (muted
|
|
41
|
+
* // Disabled + on (muted on-color, cannot toggle)
|
|
41
42
|
* <SwitchContextProvider initialState={true}>
|
|
42
43
|
* <Switch label="Locked feature" disabled />
|
|
43
44
|
* </SwitchContextProvider>
|
|
@@ -16,7 +16,9 @@
|
|
|
16
16
|
* On hover, a `rgba(0,0,0,0.15)` overlay darkens the track; the knob is unaffected.
|
|
17
17
|
*
|
|
18
18
|
* The off state always uses a neutral grey background (`greyFocused`) regardless
|
|
19
|
-
* of variant.
|
|
19
|
+
* of variant. When disabled, the off state uses `greySelectedMenuItem` while the
|
|
20
|
+
* on state keeps its color, muted by a white overlay, so a locked-on switch
|
|
21
|
+
* still reads as on.
|
|
20
22
|
*
|
|
21
23
|
* @example
|
|
22
24
|
* ```tsx
|
|
@@ -57,7 +59,8 @@ export interface SwitchProps {
|
|
|
57
59
|
label: string;
|
|
58
60
|
/**
|
|
59
61
|
* Whether the switch is disabled
|
|
60
|
-
* Disabled switches cannot be toggled
|
|
62
|
+
* Disabled switches cannot be toggled. The off state becomes
|
|
63
|
+
* `greySelectedMenuItem`; the on state keeps its color, muted.
|
|
61
64
|
* @default false
|
|
62
65
|
*/
|
|
63
66
|
disabled?: boolean;
|