@phpsoftbox/react-softbox 2.4.0 → 2.4.2

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 (12) hide show
  1. package/dist/components/Badge/Badge.module.css +4 -0
  2. package/dist/components/Input/{InputGroup.module.css → InputGroup.css} +21 -21
  3. package/dist/components/Input/InputGroup.d.ts +1 -1
  4. package/dist/components/Input/InputGroup.js +1 -1
  5. package/dist/components/Input/InputGroup.js.map +1 -1
  6. package/dist/components/Progress/Progress.module.css +19 -2
  7. package/dist/components/Table/Table.module.css +15 -5
  8. package/dist/foundations/tokens.css +15 -0
  9. package/docs/feedback.md +1 -1
  10. package/docs/progress.md +3 -1
  11. package/docs/table.md +1 -0
  12. package/package.json +1 -1
package/dist/components/Badge/Badge.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  padding: var(--badge-padding-y, 0.25rem) var(--badge-padding-x, 0.5rem);
7
7
  border-radius: var(--badge-border-radius, var(--radius-default));
8
8
  line-height: 1;
9
+ font-size: var(--badge-font-size, var(--badge-font-size-md, var(--font-size-2)));
9
10
  border: 0 solid var(--ui-border-color, var(--badge-border, transparent));
10
11
  background: var(--badge-bg, var(--variant-default-bg));
11
12
  color: var(--badge-color, var(--variant-default-text));
@@ -17,6 +18,7 @@
17
18
  .sizeSm {
18
19
  --badge-padding-y: 0.125rem;
19
20
  --badge-padding-x: 0.375rem;
21
+ --badge-font-size: var(--badge-font-size-sm, var(--font-size-1));
20
22
  --badge-circle-size: 1.125rem;
21
23
  --badge-dot-padding: 0.25rem;
22
24
  }
@@ -24,6 +26,7 @@
24
26
  .sizeMd {
25
27
  --badge-padding-y: 0.25rem;
26
28
  --badge-padding-x: 0.5rem;
29
+ --badge-font-size: var(--badge-font-size-md, var(--font-size-2));
27
30
  --badge-circle-size: 1.375rem;
28
31
  --badge-dot-padding: 0.3125rem;
29
32
  }
@@ -31,6 +34,7 @@
31
34
  .sizeLg {
32
35
  --badge-padding-y: 0.375rem;
33
36
  --badge-padding-x: 0.75rem;
37
+ --badge-font-size: var(--badge-font-size-lg, var(--font-size-3));
34
38
  --badge-circle-size: 1.625rem;
35
39
  --badge-dot-padding: 0.375rem;
36
40
  }
package/dist/components/Input/{InputGroup.module.css → InputGroup.css} RENAMED
@@ -1,4 +1,4 @@
1
- :global(.rsb-input-group) {
1
+ .rsb-input-group {
2
2
  display: flex;
3
3
  align-items: stretch;
4
4
  gap: 0;
@@ -6,61 +6,61 @@
6
6
  min-width: 0;
7
7
  }
8
8
 
9
- :global(.rsb-input-group--stretch) > :global(.rsb-group-item) {
9
+ .rsb-input-group--stretch > .rsb-group-item {
10
10
  flex: 0 0 auto;
11
11
  min-width: 0;
12
12
  }
13
13
 
14
- :global(.rsb-input-group--stretch > .rsb-group-item:not(.rsb-input-addon):not(.btn):not(.rsb-radio)) {
14
+ .rsb-input-group--stretch > .rsb-group-item:not(.rsb-input-addon):not(.btn):not(.rsb-radio) {
15
15
  flex: 1 1 0;
16
16
  }
17
17
 
18
- :global(.rsb-input-group) > :global(.rsb-group-item) {
18
+ .rsb-input-group > .rsb-group-item {
19
19
  position: relative;
20
20
  border-radius: 0 !important;
21
21
  min-height: var(--ui-control-height, 48px);
22
22
  }
23
23
 
24
- :global(.rsb-input-group) > :global(.rsb-group-item):focus,
25
- :global(.rsb-input-group) > :global(.rsb-group-item):focus-within {
24
+ .rsb-input-group > .rsb-group-item:focus,
25
+ .rsb-input-group > .rsb-group-item:focus-within {
26
26
  z-index: 2;
27
27
  }
28
28
 
29
- :global(.rsb-input-group) > :global(.rsb-group-item.btn) {
29
+ .rsb-input-group > .rsb-group-item.btn {
30
30
  min-height: var(--ui-control-height, 48px);
31
31
  box-shadow: none;
32
32
  flex: 0 0 auto;
33
33
  }
34
34
 
35
- :global(.rsb-input-group) > :global(.rsb-group-item) > :where(input, button, textarea) {
35
+ .rsb-input-group > .rsb-group-item > :where(input, button, textarea) {
36
36
  border-radius: 0 !important;
37
37
  }
38
38
 
39
- :global(.rsb-input-group) > :global(.rsb-group-item):first-child {
39
+ .rsb-input-group > .rsb-group-item:first-child {
40
40
  border-top-left-radius: var(--input-border-radius, var(--radius-default)) !important;
41
41
  border-bottom-left-radius: var(--input-border-radius, var(--radius-default)) !important;
42
42
  }
43
43
 
44
- :global(.rsb-input-group) > :global(.rsb-group-item):first-child > :where(input, button, textarea) {
44
+ .rsb-input-group > .rsb-group-item:first-child > :where(input, button, textarea) {
45
45
  border-top-left-radius: var(--input-border-radius, var(--radius-default)) !important;
46
46
  border-bottom-left-radius: var(--input-border-radius, var(--radius-default)) !important;
47
47
  }
48
48
 
49
- :global(.rsb-input-group) > :global(.rsb-group-item):last-child {
49
+ .rsb-input-group > .rsb-group-item:last-child {
50
50
  border-top-right-radius: var(--input-border-radius, var(--radius-default)) !important;
51
51
  border-bottom-right-radius: var(--input-border-radius, var(--radius-default)) !important;
52
52
  }
53
53
 
54
- :global(.rsb-input-group) > :global(.rsb-group-item):last-child > :where(input, button, textarea) {
54
+ .rsb-input-group > .rsb-group-item:last-child > :where(input, button, textarea) {
55
55
  border-top-right-radius: var(--input-border-radius, var(--radius-default)) !important;
56
56
  border-bottom-right-radius: var(--input-border-radius, var(--radius-default)) !important;
57
57
  }
58
58
 
59
- :global(.rsb-input-group) > :global(.rsb-group-item) + :global(.rsb-group-item) {
59
+ .rsb-input-group > .rsb-group-item + .rsb-group-item {
60
60
  margin-left: -1px;
61
61
  }
62
62
 
63
- :global(.rsb-input-addon) {
63
+ .rsb-input-addon {
64
64
  display: inline-flex;
65
65
  align-items: center;
66
66
  justify-content: center;
@@ -75,36 +75,36 @@
75
75
  white-space: nowrap;
76
76
  }
77
77
 
78
- :global(.rsb-input-addon--label),
79
- :global(.rsb-input-addon--muted) {
78
+ .rsb-input-addon--label,
79
+ .rsb-input-addon--muted {
80
80
  background: var(--surface-input-muted);
81
81
  color: var(--color-muted);
82
82
  border-color: var(--color-line);
83
83
  }
84
84
 
85
- :global(.rsb-input-addon--label) {
85
+ .rsb-input-addon--label {
86
86
  color: var(--color-muted-2);
87
87
  font-size: var(--font-size-2);
88
88
  text-transform: none;
89
89
  letter-spacing: 0;
90
90
  }
91
91
 
92
- :global(.rsb-input-addon--muted) {
92
+ .rsb-input-addon--muted {
93
93
  font-weight: 500;
94
94
  }
95
95
 
96
- :global(.rsb-input-addon--choice) {
96
+ .rsb-input-addon--choice {
97
97
  gap: 10px;
98
98
  padding: 0 14px;
99
99
  background: var(--surface-input-muted);
100
100
  border-color: var(--color-line);
101
101
  }
102
102
 
103
- :global(.rsb-input-addon--choice) > :global(.rsb-radio) {
103
+ .rsb-input-addon--choice > .rsb-radio {
104
104
  align-items: center;
105
105
  }
106
106
 
107
- :global(.rsb-input-group) > :global(.rsb-radio.rsb-group-item) {
107
+ .rsb-input-group > .rsb-radio.rsb-group-item {
108
108
  align-items: center;
109
109
  min-height: var(--ui-control-height, 48px);
110
110
  padding: 0 14px;
package/dist/components/Input/InputGroup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './InputGroup.module.css';
2
+ import './InputGroup.css';
3
3
  type GroupProps = React.HTMLAttributes<HTMLDivElement> & {
4
4
  stretch?: boolean;
5
5
  };
package/dist/components/Input/InputGroup.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React from 'react';
3
- import './InputGroup.module.css';
3
+ import './InputGroup.css';
4
4
  const GROUP_CLASS = 'rsb-input-group';
5
5
  const GROUP_STRETCH_CLASS = 'rsb-input-group--stretch';
6
6
  const ITEM_CLASS = 'rsb-group-item';
package/dist/components/Input/InputGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../src/components/Input/InputGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,MAAM,mBAAmB,GAAG,0BAA0B,CAAC;AACvD,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAatC,MAAM,eAAe,GAAG,CAAC,GAAG,OAAiD,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEpH,SAAS,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACpF,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzG,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,OAAO,GAAG,KAAmD,CAAC;QACpE,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC5E,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,YAC/B,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IAC7F,MAAM,SAAS,GAAG,EAAuB,CAAC;IAC1C,MAAM,OAAO,GAAG;QACd,WAAW;QACX,GAAG,WAAW,KAAK,OAAO,EAAE;QAC5B,UAAU;QACV,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAkC;IAChE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAkC;IAC/D,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAkC;IACjE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,QAAQ,GAAG,CAAC;AAC9D,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACtD,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAC,CAAC"}
1
+ {"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../src/components/Input/InputGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,MAAM,mBAAmB,GAAG,0BAA0B,CAAC;AACvD,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAatC,MAAM,eAAe,GAAG,CAAC,GAAG,OAAiD,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEpH,SAAS,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACpF,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzG,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,OAAO,GAAG,KAAmD,CAAC;QACpE,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC5E,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,YAC/B,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IAC7F,MAAM,SAAS,GAAG,EAAuB,CAAC;IAC1C,MAAM,OAAO,GAAG;QACd,WAAW;QACX,GAAG,WAAW,KAAK,OAAO,EAAE;QAC5B,UAAU;QACV,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAkC;IAChE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAkC;IAC/D,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAkC;IACjE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,QAAQ,GAAG,CAAC;AAC9D,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACtD,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAC,CAAC"}
package/dist/components/Progress/Progress.module.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .progress {
2
+ --progress-label-font-size: var(--progress-label-font-size-md, var(--font-size-3));
3
+ --progress-value-font-size: var(--progress-value-font-size-md, var(--font-size-2));
2
4
  display: flex;
3
5
  flex-direction: column;
4
6
  gap: 8px;
5
7
  }
6
8
 
7
9
  .label {
8
- font-size: 13px;
10
+ font-size: var(--progress-label-font-size);
9
11
  color: var(--color-muted);
10
12
  }
11
13
 
@@ -26,19 +28,34 @@
26
28
  }
27
29
 
28
30
  .value {
29
- font-size: 12px;
31
+ font-size: var(--progress-value-font-size);
30
32
  color: var(--color-muted);
31
33
  text-align: right;
32
34
  }
33
35
 
36
+ .sm {
37
+ --progress-label-font-size: var(--progress-label-font-size-sm, var(--font-size-2));
38
+ --progress-value-font-size: var(--progress-value-font-size-sm, var(--font-size-1));
39
+ }
40
+
34
41
  .sm .track {
35
42
  height: 6px;
36
43
  }
37
44
 
45
+ .md {
46
+ --progress-label-font-size: var(--progress-label-font-size-md, var(--font-size-3));
47
+ --progress-value-font-size: var(--progress-value-font-size-md, var(--font-size-2));
48
+ }
49
+
38
50
  .md .track {
39
51
  height: 10px;
40
52
  }
41
53
 
54
+ .lg {
55
+ --progress-label-font-size: var(--progress-label-font-size-lg, var(--font-size-4));
56
+ --progress-value-font-size: var(--progress-value-font-size-lg, var(--font-size-3));
57
+ }
58
+
42
59
  .lg .track {
43
60
  height: 14px;
44
61
  }
package/dist/components/Table/Table.module.css CHANGED
@@ -1,4 +1,7 @@
1
1
  .wrapper {
2
+ --table-font-size: var(--table-font-size-md, var(--font-size-3));
3
+ --table-head-font-size: var(--table-head-font-size-md, var(--font-size-2));
4
+ --table-caption-font-size: var(--table-caption-font-size-md, var(--font-size-2));
2
5
  width: 100%;
3
6
  border-radius: var(--table-border-radius, var(--radius-default));
4
7
  border: 1px solid var(--color-line);
@@ -28,6 +31,7 @@
28
31
  border-bottom: 1px solid var(--color-divider);
29
32
  background: var(--surface-panel-soft);
30
33
  border-radius: var(--table-border-radius, var(--radius-default)) var(--table-border-radius, var(--radius-default)) 0 0;
34
+ font-size: var(--table-font-size);
31
35
  }
32
36
 
33
37
  .bulkActions[data-position='bottom'] {
@@ -104,7 +108,7 @@
104
108
  width: 100%;
105
109
  border-collapse: collapse;
106
110
  color: var(--color-text);
107
- font-size: var(--font-size-3);
111
+ font-size: var(--table-font-size);
108
112
  min-width: var(--ui-table-min, 560px);
109
113
  }
110
114
 
@@ -112,7 +116,7 @@
112
116
  caption-side: top;
113
117
  text-align: left;
114
118
  padding: var(--spacing-3) var(--spacing-4);
115
- font-size: var(--font-size-2);
119
+ font-size: var(--table-caption-font-size);
116
120
  color: var(--color-muted);
117
121
  }
118
122
 
@@ -140,14 +144,14 @@
140
144
  }
141
145
 
142
146
  .headCell {
143
- font-size: var(--font-size-2);
147
+ font-size: var(--table-head-font-size);
144
148
  letter-spacing: 0.02em;
145
149
  color: var(--color-muted);
146
150
  text-align: left;
147
151
  }
148
152
 
149
153
  .cell {
150
- font-size: var(--font-size-3);
154
+ font-size: var(--table-font-size);
151
155
  }
152
156
 
153
157
  .cellContent {
@@ -161,6 +165,7 @@
161
165
  }
162
166
 
163
167
  .footerCell {
168
+ font-size: var(--table-font-size);
164
169
  font-weight: 600;
165
170
  border-top: 1px solid var(--color-divider);
166
171
  border-bottom: none;
@@ -190,7 +195,12 @@
190
195
  .sizeSm .cell,
191
196
  .sizeSm .footerCell {
192
197
  padding: var(--spacing-2) var(--spacing-3);
193
- font-size: var(--font-size-2);
198
+ }
199
+
200
+ .sizeSm {
201
+ --table-font-size: var(--table-font-size-sm, var(--font-size-2));
202
+ --table-head-font-size: var(--table-head-font-size-sm, var(--font-size-1));
203
+ --table-caption-font-size: var(--table-caption-font-size-sm, var(--font-size-1));
194
204
  }
195
205
 
196
206
  .alignCenter {
package/dist/foundations/tokens.css CHANGED
@@ -223,6 +223,9 @@
223
223
  --badge-border-radius: var(--radius-default);
224
224
  --badge-pill-border-radius: var(--radius-pill);
225
225
  --badge-circle-border-radius: var(--radius-circle);
226
+ --badge-font-size-sm: var(--font-size-1);
227
+ --badge-font-size-md: var(--font-size-2);
228
+ --badge-font-size-lg: var(--font-size-3);
226
229
  --card-border-radius: var(--radius-default);
227
230
  --card-toolbar-border-radius: var(--radius-default);
228
231
  --card-toolbar-button-height-sm: 2rem;
@@ -239,6 +242,12 @@
239
242
  --card-toolbar-button-font-size-lg: var(--font-size-4);
240
243
  --alert-border-radius: var(--radius-default);
241
244
  --table-border-radius: var(--radius-default);
245
+ --table-font-size-sm: var(--font-size-2);
246
+ --table-font-size-md: var(--font-size-3);
247
+ --table-head-font-size-sm: var(--font-size-1);
248
+ --table-head-font-size-md: var(--font-size-2);
249
+ --table-caption-font-size-sm: var(--font-size-1);
250
+ --table-caption-font-size-md: var(--font-size-2);
242
251
  --input-border-radius: var(--radius-default);
243
252
  --select-border-radius: var(--input-border-radius);
244
253
  --textarea-border-radius: var(--input-border-radius);
@@ -247,6 +256,12 @@
247
256
  --tooltip-border-radius: var(--radius-default);
248
257
  --toast-border-radius: var(--radius-default);
249
258
  --progress-border-radius: var(--radius-pill);
259
+ --progress-label-font-size-sm: var(--font-size-2);
260
+ --progress-label-font-size-md: var(--font-size-3);
261
+ --progress-label-font-size-lg: var(--font-size-4);
262
+ --progress-value-font-size-sm: var(--font-size-1);
263
+ --progress-value-font-size-md: var(--font-size-2);
264
+ --progress-value-font-size-lg: var(--font-size-3);
250
265
  --wizard-step-border-radius: var(--radius-default);
251
266
  --wizard-step-index-border-radius: var(--radius-circle);
252
267
  --wizard-content-border-radius: var(--radius-default);
package/docs/feedback.md CHANGED
@@ -24,7 +24,7 @@
24
24
  <Badge variant="danger" dot aria-label="Ошибка" className="p-2" />
25
25
  ```
26
26
 
27
- `Badge` не меняет регистр текста и не задает font-size. Для декоративных решений используйте helpers: `text-uppercase`, `f-2`, `border`, `rounded-pill`, `rounded-circle` и т.д.
27
+ `Badge` не меняет регистр текста. Размеры `sm`, `md`, `lg` задают padding, circle-size и font-size через `--badge-*` токены; для декоративных решений используйте helpers: `text-uppercase`, `f-2`, `border`, `rounded-pill`, `rounded-circle` и т.д.
28
28
 
29
29
  ## Alert
30
30
 
package/docs/progress.md CHANGED
@@ -8,11 +8,13 @@
8
8
  <Progress value={40} label="Миграции" />
9
9
  <Progress value={72} label="Сборка" variant="primary" />
10
10
  <Progress value={88} label="Тесты" variant="info" showValue />
11
+ <Progress value={36} label="Мини" variant="success" size="sm" showValue />
12
+ <Progress value={92} label="Крупный" variant="warning" size="lg" showValue />
11
13
  <Progress label="Синхронизация" indeterminate />
12
14
  ```
13
15
 
14
16
  ## Варианты
15
17
 
16
18
  - `variant`: `default`, `primary`, `info`, `success`, `warning`, `danger`.
17
- - `size`: `sm`, `md`, `lg`.
19
+ - `size`: `sm`, `md`, `lg`; меняет высоту трека и размер шрифта `label`/`showValue`.
18
20
  - `indeterminate`: бесконечная анимация, без значения.
package/docs/table.md CHANGED
@@ -138,3 +138,4 @@ const [selected, setSelected] = useState<React.Key[]>([]);
138
138
  - `hideOn` — скрыть колонку на `sm`/`md`/`lg`
139
139
  - `width` / `minWidth` — размеры колонки
140
140
  - `align` — `left` | `center` | `right`
141
+ - `size` — `sm` или `md`; меняет padding и font-size таблицы, заголовков и caption через `--table-*` токены
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phpsoftbox/react-softbox",
3
- "version": "2.4.0",
3
+ "version": "2.4.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",