@kolkrabbi/kol-component 0.81.0 → 0.82.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.82.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",
|
|
@@ -38,12 +38,25 @@ import useSectionTheme from '../hooks/useSectionTheme.js'
|
|
|
38
38
|
* lifted corners were being cut flat). `mediaHover` and a self-animating node are
|
|
39
39
|
* mutually exclusive in practice — pick one.
|
|
40
40
|
* @param {'right'|'left'|'center'} [align='right'] media side, or centred single column
|
|
41
|
+
* @param {'full'|'80'|'60'|string} [height='60'] min-height on the family's ladder — full = 100dvh,
|
|
42
|
+
* 80 = 70svh / 80vh, 60 = 50svh / 60vh (default); the columns stay vertically centred inside it
|
|
41
43
|
* @param {ReactNode} caption mono caption + gradient veil over the media
|
|
42
44
|
* @param {string} bgImage inline cover background on the section
|
|
43
45
|
* @param {boolean} fullBleed span the full viewport width
|
|
44
46
|
* @param {object} slotClass · slotStyle per-slot class / style on the text block (reveal seam)
|
|
45
47
|
* @param {string} className · innerClassName · columnClassName layout seams
|
|
46
48
|
*/
|
|
49
|
+
/* The family's height ladder, as MIN-height — content may still grow, the two
|
|
50
|
+
* columns stay centred (SectionSplitHeight, kol-website 2026-08-27: "we need
|
|
51
|
+
* to set some sizes"). Same three names as SectionHero's presets, literal
|
|
52
|
+
* strings (the SPLIT_HEIGHTS lesson — a class built at runtime is not a
|
|
53
|
+
* class); anything else passes through as a class string. */
|
|
54
|
+
const MIN_HEIGHTS = {
|
|
55
|
+
full: 'min-h-dvh',
|
|
56
|
+
80: 'min-h-[70svh] md:min-h-[80vh]',
|
|
57
|
+
60: 'min-h-[50svh] md:min-h-[60vh]',
|
|
58
|
+
}
|
|
59
|
+
|
|
47
60
|
export default function SectionSplit({
|
|
48
61
|
theme,
|
|
49
62
|
label,
|
|
@@ -58,6 +71,7 @@ export default function SectionSplit({
|
|
|
58
71
|
mediaHover = false,
|
|
59
72
|
mediaClip = true,
|
|
60
73
|
align = 'right',
|
|
74
|
+
height = '60',
|
|
61
75
|
caption,
|
|
62
76
|
bgImage,
|
|
63
77
|
fullBleed = false,
|
|
@@ -81,13 +95,13 @@ export default function SectionSplit({
|
|
|
81
95
|
<section
|
|
82
96
|
ref={themeRef}
|
|
83
97
|
data-theme={themeStamp}
|
|
84
|
-
className={`kol-section-split px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
|
|
98
|
+
className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${MIN_HEIGHTS[height] || height} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
|
|
85
99
|
style={sectionStyle}
|
|
86
100
|
>
|
|
87
101
|
{/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's
|
|
88
102
|
* --kol-container-max ladder — 100% → 1400 → 1600 → 1800. Split ran 1200,
|
|
89
103
|
* cards 1400, the CTA 1600: three numbers for one job, unflagged. */}
|
|
90
|
-
<div className={`max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
|
|
104
|
+
<div className={`w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
|
|
91
105
|
{/* `order` rather than `flex-row-reverse`: the grid is one column below
|
|
92
106
|
* 901px, and DOM order is what decides the stack there. */}
|
|
93
107
|
<SectionText
|