@kolkrabbi/kol-component 0.76.2 → 0.76.3
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.76.
|
|
3
|
+
"version": "0.76.3",
|
|
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",
|
|
@@ -27,6 +27,11 @@ import SectionText from '../molecules/SectionText.jsx'
|
|
|
27
27
|
* @param {ReactNode} media image / video / interactive node for the visual column
|
|
28
28
|
* @param {string} [ratio='4/5'] aspect ratio of the media frame
|
|
29
29
|
* @param {boolean} [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
|
|
30
|
+
* @param {boolean} [mediaClip=true] the frame clips its media (overflow hidden + radius). `false`
|
|
31
|
+
* for a node that transforms in 3D (a tilt card) — the frame keeps its ratio and radius,
|
|
32
|
+
* the node owns its own clipping (SectionSplitMediaClip, kol-website 2026-08-26: TiltCard's
|
|
33
|
+
* lifted corners were being cut flat). `mediaHover` and a self-animating node are
|
|
34
|
+
* mutually exclusive in practice — pick one.
|
|
30
35
|
* @param {'right'|'left'|'center'} [align='right'] media side, or centred single column
|
|
31
36
|
* @param {ReactNode} caption mono caption + gradient veil over the media
|
|
32
37
|
* @param {string} bgImage inline cover background on the section
|
|
@@ -44,6 +49,7 @@ export default function SectionSplit({
|
|
|
44
49
|
media,
|
|
45
50
|
ratio = '4/5',
|
|
46
51
|
mediaHover = false,
|
|
52
|
+
mediaClip = true,
|
|
47
53
|
align = 'right',
|
|
48
54
|
caption,
|
|
49
55
|
bgImage,
|
|
@@ -93,7 +99,7 @@ export default function SectionSplit({
|
|
|
93
99
|
</SectionText>
|
|
94
100
|
{media && (
|
|
95
101
|
<div
|
|
96
|
-
className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] overflow-hidden ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
|
|
102
|
+
className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
|
|
97
103
|
style={{ aspectRatio: ratio }}
|
|
98
104
|
>
|
|
99
105
|
{media}
|