@kolkrabbi/kol-component 0.74.2 → 0.75.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.75.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",
|
|
@@ -83,6 +83,9 @@ function MediaLayer({ media }) {
|
|
|
83
83
|
* @param {ReactNode} label · headline · body · actions the composed text (SectionText)
|
|
84
84
|
* @param {string} [headlineSize='display-04']
|
|
85
85
|
* @param {string} [panelMaxWidth='max-w-[440px]'] the glass panel's cap on the composed route
|
|
86
|
+
* @param {object} panelProps everything else on the glass panel (user ask 2026-08-26):
|
|
87
|
+
* `padding` ('px-6 py-8') · `maxWidth` · `surfaceOpacity`
|
|
88
|
+
* (80) · `blur` ('1px') · `gap` · `className`
|
|
86
89
|
* @param {ReactNode} panel a caller-authored content node; wins over the text props and children
|
|
87
90
|
* @param {ReactNode} children fallback content slot
|
|
88
91
|
* @param {string} align media: 'center' | 'start' | 'end' — placement of the content ·
|
|
@@ -102,6 +105,7 @@ export default function SectionHero({
|
|
|
102
105
|
body,
|
|
103
106
|
actions,
|
|
104
107
|
panelMaxWidth = 'max-w-[440px]',
|
|
108
|
+
panelProps,
|
|
105
109
|
panel,
|
|
106
110
|
children,
|
|
107
111
|
align = 'center',
|
|
@@ -145,7 +149,7 @@ export default function SectionHero({
|
|
|
145
149
|
: 'justify-center'
|
|
146
150
|
const composed = label || headline || body || actions
|
|
147
151
|
const content = panel ?? (composed ? (
|
|
148
|
-
<OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'}>
|
|
152
|
+
<OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'} {...panelProps}>
|
|
149
153
|
<SectionText
|
|
150
154
|
label={label}
|
|
151
155
|
headline={headline}
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
* @param {string} align 'center' | 'start' | 'end' (cross-axis + text)
|
|
12
12
|
* @param {string} gap vertical rhythm class between children
|
|
13
13
|
* @param {string} maxWidth optional max-w-* class (adds mx-auto)
|
|
14
|
+
* @param {string} padding padding classes (default 'px-6 py-8') — 2026-08-26,
|
|
15
|
+
* the one knob the panel had no seam for
|
|
14
16
|
*/
|
|
15
17
|
export default function OverlayGlassPanel({
|
|
16
18
|
children,
|
|
@@ -19,6 +21,7 @@ export default function OverlayGlassPanel({
|
|
|
19
21
|
align = 'center',
|
|
20
22
|
gap = 'gap-6',
|
|
21
23
|
maxWidth = '',
|
|
24
|
+
padding = 'px-6 py-8',
|
|
22
25
|
className = '',
|
|
23
26
|
}) {
|
|
24
27
|
const alignCls =
|
|
@@ -28,7 +31,7 @@ export default function OverlayGlassPanel({
|
|
|
28
31
|
|
|
29
32
|
return (
|
|
30
33
|
<div
|
|
31
|
-
className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)]
|
|
34
|
+
className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] ${padding} ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
|
|
32
35
|
style={{
|
|
33
36
|
backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
|
|
34
37
|
backdropFilter: `blur(${blur})`,
|