@kolkrabbi/kol-component 0.4.1 → 0.5.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/SegmentedToggle.jsx +7 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-component",
3
- "version": "0.4.1",
3
+ "version": "0.5.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",
package/src/atoms/SegmentedToggle.jsx CHANGED
@@ -26,15 +26,16 @@
26
26
  * value — current option value
27
27
  * onChange — handler (newValue) => void
28
28
  * options — [{ value, label, ariaLabel? }]
29
- * size — 'md' (default, 26px) | 'sm' (16px). `sm` is for icon/preview-
30
- * only options (e.g. line-style previews) where text labels
31
- * aren't used; the cells still center their contents but the
32
- * outer height is tighter.
29
+ * size — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
30
+ * 'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
31
+ * mono-16, 8/20 pad). Same cell padding + mono type as the
32
+ * matching `.kol-btn-{sm,md,lg}`, so a segmented strip lines
33
+ * up with a Button of the same size.
33
34
  * ariaLabel — accessible name for the group
34
35
  * className — additional classes on the outer shell
35
36
  */
36
37
  export default function SegmentedToggle({ value, onChange, options = [], size = 'md', ariaLabel, className = '' }) {
37
- const cellType = size === 'sm' ? '' : 'kol-mono-12'
38
+ const cellType = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
38
39
  const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
39
40
 
40
41
  const handleKeyDown = (e) => {
@@ -51,7 +52,7 @@ export default function SegmentedToggle({ value, onChange, options = [], size =
51
52
  role="radiogroup"
52
53
  aria-label={ariaLabel}
53
54
  onKeyDown={handleKeyDown}
54
- className={['kol-seg', size === 'sm' && 'kol-seg--sm', className].filter(Boolean).join(' ')}
55
+ className={['kol-seg', size !== 'md' && `kol-seg--${size}`, className].filter(Boolean).join(' ')}
55
56
  >
56
57
  {options.map((opt, i) => {
57
58
  const isActive = opt.value === value