@kolkrabbi/kol-component 0.36.0 → 0.37.0
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.37.0",
|
|
4
4
|
"description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@floating-ui/react": "^0.27.19",
|
|
30
30
|
"embla-carousel-react": "^8.6.0",
|
|
31
31
|
"react-syntax-highlighter": "^16.1.1",
|
|
32
|
-
"@kolkrabbi/kol-icons": "^0.
|
|
32
|
+
"@kolkrabbi/kol-icons": "^0.15.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"framer-motion": "^12.0.0",
|
|
@@ -33,7 +33,11 @@
|
|
|
33
33
|
* variant — 'default' (shipped chrome: shared outer stroke + dividers,
|
|
34
34
|
* filled active cell) | 'filled' (the state law's tiles: every
|
|
35
35
|
* cell a surface-secondary tile with 1px transparent gaps, NO
|
|
36
|
-
* outline shell; the inset ring marks ONLY the selected cell)
|
|
36
|
+
* outline shell; the inset ring marks ONLY the selected cell) |
|
|
37
|
+
* 'tonal' (filled tiles, but the clicked cell marks itself by
|
|
38
|
+
* TONE — surface-tertiary fill, no ring; 2026-08-12).
|
|
39
|
+
* Every variant renders at the SAME pinned button-ladder
|
|
40
|
+
* height (26/32/40) — icon or text, the box never moves.
|
|
37
41
|
* size — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
|
|
38
42
|
* 'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
|
|
39
43
|
* mono-16, 8/20 pad). Same cell padding + mono type as the
|
|
@@ -62,7 +66,13 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
|
|
|
62
66
|
role={stateless ? 'group' : 'radiogroup'}
|
|
63
67
|
aria-label={ariaLabel}
|
|
64
68
|
onKeyDown={handleKeyDown}
|
|
65
|
-
className={[
|
|
69
|
+
className={[
|
|
70
|
+
'kol-seg',
|
|
71
|
+
(variant === 'filled' || variant === 'tonal') && 'kol-seg--filled',
|
|
72
|
+
variant === 'tonal' && 'kol-seg--tonal',
|
|
73
|
+
size !== 'md' && `kol-seg--${size}`,
|
|
74
|
+
className,
|
|
75
|
+
].filter(Boolean).join(' ')}
|
|
66
76
|
>
|
|
67
77
|
{options.map((opt, i) => {
|
|
68
78
|
const isActive = !stateless && opt.value === value
|