@kolkrabbi/kol-component 0.10.1 → 0.12.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 (9) hide show
  1. package/package.json +2 -2
  2. package/src/atoms/Button.jsx +5 -5
  3. package/src/atoms/FullscreenOverlay.jsx +6 -1
  4. package/src/atoms/Popover.jsx +5 -1
  5. package/src/atoms/SectionLabel.jsx +8 -4
  6. package/src/index.js +1 -0
  7. package/src/molecules/Dropdown.jsx +4 -10
  8. package/src/organisms/FeaturedCarousel.jsx +2 -1
  9. package/src/organisms/FoundryCTA.jsx +65 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-component",
3
- "version": "0.10.1",
3
+ "version": "0.12.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",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "@floating-ui/react": "^0.27.19",
25
25
  "embla-carousel-react": "^8.6.0",
26
- "@kolkrabbi/kol-icons": "0.6.1"
26
+ "@kolkrabbi/kol-icons": "0.7.0"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": "^18.3.0 || ^19.0.0",
package/src/atoms/Button.jsx CHANGED
@@ -94,7 +94,10 @@ const Button = ({
94
94
  const quietClass = quiet && !isPressed ? 'kol-btn-quiet' : ''
95
95
  const pressedClass = isPressed ? 'kol-btn-pressed' : ''
96
96
 
97
- const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${className}`.trim().replace(/\s+/g, ' ')
97
+ // .kol-btn-icon replaces the old iconOnly INLINE style — inline display
98
+ // beat every consumer utility (lg:hidden could never hide the button).
99
+ const iconOnlyClass = iconOnly ? 'kol-btn-icon' : ''
100
+ const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${iconOnlyClass} ${className}`.trim().replace(/\s+/g, ' ')
98
101
 
99
102
  // Render icon with optional hover state
100
103
  const renderIcon = (iconName, iconHoverName) => {
@@ -154,10 +157,7 @@ const Button = ({
154
157
  return children
155
158
  }
156
159
 
157
- // Merge icon-only specific styles with user-provided styles
158
- const mergedStyle = iconOnly
159
- ? { lineHeight: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }
160
- : style
160
+ const mergedStyle = style
161
161
 
162
162
  // Render as button
163
163
  if (onClick || !href) {
package/src/atoms/FullscreenOverlay.jsx CHANGED
@@ -17,8 +17,13 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
17
17
 
18
18
  if (!open) return null
19
19
 
20
+ /* Dismiss ONLY when the backdrop itself is hit. The old check ("target not
21
+ * inside the sheet") closed the overlay on clicks in PORTALLED children —
22
+ * React portals bubble events through the React tree, so a Dropdown panel
23
+ * opened from inside the sheet (mounted on <body> via FloatingPortal)
24
+ * registered as an outside click and killed the overlay on option-select. */
20
25
  const onBackdropClick = (e) => {
21
- if (sheetRef.current && !sheetRef.current.contains(e.target)) onClose?.()
26
+ if (e.target === e.currentTarget) onClose?.()
22
27
  }
23
28
 
24
29
  return (
package/src/atoms/Popover.jsx CHANGED
@@ -175,7 +175,11 @@ export function PopoverPanel({
175
175
  if (!popover.open) return null
176
176
 
177
177
  const { refs, floatingStyles, context, getFloatingProps } = popover
178
- const cls = [panel && 'kol-popover', className].filter(Boolean).join(' ')
178
+ /* kol-popover-float rides every floating node (panel chrome or not): it
179
+ * carries the stacking guarantee — floats must top overlay chrome
180
+ * (.kol-overlay z-100), or a dropdown inside a FullscreenOverlay renders
181
+ * under the sheet and its options can't be clicked. */
182
+ const cls = ['kol-popover-float', panel && 'kol-popover', className].filter(Boolean).join(' ')
179
183
 
180
184
  /* `data-editor-keep-selection` mirrors the marker on the EditorShell
181
185
  * root. Popovers render via FloatingPortal (mounted on <body>, outside
package/src/atoms/SectionLabel.jsx CHANGED
@@ -5,22 +5,26 @@ export default function SectionLabel({
5
5
  size = 'md',
6
6
  className = ''
7
7
  }) {
8
- // Size variants: sm (16px), md (20px), lg (32px)
8
+ // Size variants: sm (16px), md (20px), lg (32px).
9
+ // Migrated off the deleted legacy kol-label-* family (2026-07-15): current
10
+ // helper/heading classes, no text-transform — labels render as authored.
11
+ // (lg's old 'kol-heading-md' was a ghost class defined nowhere — rendered
12
+ // 16px default; kol-sans-heading-03 is the real 32px scale.)
9
13
  const sizeConfig = {
10
14
  sm: {
11
15
  height: 'h-4',
12
16
  iconSize: 16,
13
- textClass: 'kol-label-compact-md'
17
+ textClass: 'kol-helper-14'
14
18
  },
15
19
  md: {
16
20
  height: 'h-5',
17
21
  iconSize: 24,
18
- textClass: 'kol-label-compact-lg'
22
+ textClass: 'kol-helper-20'
19
23
  },
20
24
  lg: {
21
25
  height: 'h-8',
22
26
  iconSize: 40,
23
- textClass: 'kol-heading-md'
27
+ textClass: 'kol-sans-heading-03'
24
28
  }
25
29
  }
26
30
 
package/src/index.js CHANGED
@@ -104,6 +104,7 @@ export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
104
104
  export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
105
105
  export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
106
106
  export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
107
+ export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
107
108
  export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
108
109
  export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
109
110
  export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
package/src/molecules/Dropdown.jsx CHANGED
@@ -141,15 +141,9 @@ const Dropdown = ({
141
141
  data-state={isOpen ? 'open' : 'closed'}
142
142
  >
143
143
  <span>{currentOption?.label}</span>
144
- <Icon
145
- name="chevron-down"
146
- size={ICON_SIZE[resolvedSize]}
147
- className="ml-auto"
148
- style={{
149
- transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
150
- transition: 'transform 300ms',
151
- }}
152
- />
144
+ {/* chrome lives in .kol-dd-caret (trailing edge + open-state flip) —
145
+ * keyed off the trigger's data-state, no inline styles */}
146
+ <Icon name="chevron-down" size={ICON_SIZE[resolvedSize]} className="kol-dd-caret" />
153
147
  </button>
154
148
 
155
149
  <PopoverPanel
@@ -160,7 +154,7 @@ const Dropdown = ({
160
154
  >
161
155
  {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
162
156
 
163
- <div className="flex max-h-[300px] flex-col items-stretch overflow-y-auto" role="listbox">
157
+ <div className="kol-dd-list" role="listbox">
164
158
  {options.map((option) => {
165
159
  const isActive = option.value === currentOption?.value
166
160
  return (
package/src/organisms/FeaturedCarousel.jsx CHANGED
@@ -183,7 +183,8 @@ export default function FeaturedCarousel({
183
183
  >
184
184
  {showHeader && (
185
185
  <div className="mb-6 flex items-center gap-4">
186
- <span className="kol-label-mono-xs text-auto">{sectionLabel}</span>
186
+ {/* migrated off the deleted legacy kol-label-* family — label renders as authored */}
187
+ <span className="kol-helper-12 text-auto">{sectionLabel}</span>
187
188
  <span className="kol-mono-12 text-fg-64">{selectedIndex + 1} / {items.length}</span>
188
189
  </div>
189
190
  )}
package/src/organisms/FoundryCTA.jsx ADDED
@@ -0,0 +1,65 @@
1
+ import Button from '../atoms/Button.jsx'
2
+
3
+ /* taxonomy-ok: nests component's Button */
4
+
5
+ /**
6
+ * FoundryCTA — the simple centered tier of the CTA-band family: a centered
7
+ * column with a short rule line, a heading, a mono description, and one or
8
+ * more Button actions. CtaGlobal is the editorial two-column closer of the
9
+ * same family; this is the quiet mid-page tier (foundry pages, prints grid).
10
+ *
11
+ * Presentational — copy arrives as props and renders verbatim (no
12
+ * text-transform; author strings in their final case). Actions with an
13
+ * `href` render Button's anchor form; pass `onNavigate` for SPA routing —
14
+ * same `(href, event)` seam contract as WorkListItem — or omit it for plain
15
+ * anchors (external links, mailto:).
16
+ *
17
+ * @param {ReactNode} heading band heading (kol-sans-heading-02)
18
+ * @param {ReactNode} description supporting line (kol-mono-14, dimmed)
19
+ * @param {Object|Array} action one {href, label, variant?, target?, rel?} or an array;
20
+ * variant 'secondary' renders Button's outline treatment,
21
+ * anything else the primary fill
22
+ * @param {Function} onNavigate (href, event) => void — SPA-nav seam for internal links
23
+ * @param {string} className extra classes on the section
24
+ */
25
+ export default function FoundryCTA({
26
+ heading,
27
+ description,
28
+ action,
29
+ onNavigate,
30
+ className = '',
31
+ }) {
32
+ const actions = (Array.isArray(action) ? action : [action]).filter(Boolean)
33
+
34
+ return (
35
+ <section className={`w-full py-24 ${className}`.trim()}>
36
+ <div className="max-w-[900px] mx-auto text-center space-y-8">
37
+ <div className="w-32 h-px bg-fg-24 mx-auto" />
38
+
39
+ {heading && <h2 className="kol-sans-heading-02 text-auto">{heading}</h2>}
40
+
41
+ {description && (
42
+ <p className="kol-mono-14 text-fg-64 max-w-[600px] mx-auto">{description}</p>
43
+ )}
44
+
45
+ {actions.length > 0 && (
46
+ <div className={`pt-4 ${actions.length > 1 ? 'flex flex-col sm:flex-row gap-4 justify-center' : ''}`.trim()}>
47
+ {actions.map((act, i) => (
48
+ <Button
49
+ key={i}
50
+ variant={act.variant === 'secondary' ? 'outline' : 'primary'}
51
+ size="md"
52
+ href={act.href}
53
+ target={act.target}
54
+ rel={act.rel}
55
+ onClick={onNavigate ? (e) => onNavigate(act.href, e) : undefined}
56
+ >
57
+ {act.label}
58
+ </Button>
59
+ ))}
60
+ </div>
61
+ )}
62
+ </div>
63
+ </section>
64
+ )
65
+ }