@kolkrabbi/kol-component 0.10.0 → 0.11.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 +2 -2
- package/src/atoms/AssetPlaceholder.jsx +3 -2
- package/src/atoms/Button.jsx +5 -5
- package/src/atoms/FullscreenOverlay.jsx +6 -1
- package/src/atoms/Input.jsx +0 -3
- package/src/atoms/LabeledControl.jsx +2 -2
- package/src/atoms/Popover.jsx +5 -1
- package/src/atoms/Section.jsx +1 -1
- package/src/atoms/Tag.jsx +1 -1
- package/src/atoms/Textarea.jsx +1 -1
- package/src/atoms/ToggleBracket.jsx +2 -2
- package/src/atoms/ToggleCheckbox.jsx +2 -2
- package/src/atoms/ViewToggle.jsx +3 -3
- package/src/index.js +1 -0
- package/src/molecules/CodeBlock.jsx +20 -4
- package/src/molecules/ColorInputRow.jsx +0 -1
- package/src/molecules/Dropdown.jsx +4 -10
- package/src/molecules/TabsRow.jsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.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.
|
|
26
|
+
"@kolkrabbi/kol-icons": "0.7.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "^18.3.0 || ^19.0.0",
|
|
@@ -10,7 +10,7 @@ export default function AssetPlaceholder({
|
|
|
10
10
|
category,
|
|
11
11
|
name,
|
|
12
12
|
aspectRatio = '16 / 9',
|
|
13
|
-
note = '
|
|
13
|
+
note = 'MISSING',
|
|
14
14
|
className = '',
|
|
15
15
|
}) {
|
|
16
16
|
const label = [category, name].filter(Boolean).join(' · ')
|
|
@@ -23,7 +23,8 @@ export default function AssetPlaceholder({
|
|
|
23
23
|
>
|
|
24
24
|
{/* note is single-line → helper scale; label can wrap (category · name
|
|
25
25
|
* in a narrow tile) → line-height-bearing mono scale */}
|
|
26
|
-
|
|
26
|
+
{/* no text-transform (casing law) — note is authored in-case */}
|
|
27
|
+
<span className="kol-asset-placeholder-note kol-helper-12 [letter-spacing:0.12em] text-fg-48">{note}</span>
|
|
27
28
|
{label && <span className="kol-asset-placeholder-label kol-mono-12 text-fg-40 [letter-spacing:0.04em]">{label}</span>}
|
|
28
29
|
</div>
|
|
29
30
|
)
|
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
|
-
|
|
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
|
-
|
|
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) {
|
|
@@ -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 (
|
|
26
|
+
if (e.target === e.currentTarget) onClose?.()
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
return (
|
package/src/atoms/Input.jsx
CHANGED
|
@@ -25,7 +25,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
|
|
|
25
25
|
* the shell at text-meta. aria-hidden — affordances, not labels.
|
|
26
26
|
* iconLeft — name of a leading icon rendered inside the shell (e.g.
|
|
27
27
|
* "search-16"). iconSize overrides the size-derived default.
|
|
28
|
-
* uppercase — adds Tailwind `uppercase` to the input element only.
|
|
29
28
|
*
|
|
30
29
|
* Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
|
|
31
30
|
* Input owns prefix/suffix/icon layout + the inner <input> styling.
|
|
@@ -47,7 +46,6 @@ export default function Input({
|
|
|
47
46
|
iconSize = null,
|
|
48
47
|
placeholder,
|
|
49
48
|
disabled = false,
|
|
50
|
-
uppercase = false,
|
|
51
49
|
width,
|
|
52
50
|
className = '',
|
|
53
51
|
inputClassName = '',
|
|
@@ -86,7 +84,6 @@ export default function Input({
|
|
|
86
84
|
* the affordance than to the empty edge, reads off-balance. */
|
|
87
85
|
prefix !== undefined && 'pr-1',
|
|
88
86
|
suffix !== undefined && 'pl-1',
|
|
89
|
-
uppercase && 'uppercase',
|
|
90
87
|
isNumber && 'hide-number-spinners',
|
|
91
88
|
inputClassName,
|
|
92
89
|
].filter(Boolean).join(' ')
|
|
@@ -44,7 +44,7 @@ export default function LabeledControl({
|
|
|
44
44
|
<div className={`flex items-center gap-3 ${className}`}>
|
|
45
45
|
{showLabel && (
|
|
46
46
|
<span
|
|
47
|
-
className="kol-helper-10
|
|
47
|
+
className="kol-helper-10 tracking-widest text-meta shrink-0"
|
|
48
48
|
style={{ width: labelWidth }}
|
|
49
49
|
>
|
|
50
50
|
{labelInner}
|
|
@@ -58,7 +58,7 @@ export default function LabeledControl({
|
|
|
58
58
|
return (
|
|
59
59
|
<div className={`flex flex-col gap-2 ${className}`}>
|
|
60
60
|
{showLabel && (
|
|
61
|
-
<span className="kol-helper-10
|
|
61
|
+
<span className="kol-helper-10 tracking-widest text-meta">{labelInner}</span>
|
|
62
62
|
)}
|
|
63
63
|
{children}
|
|
64
64
|
</div>
|
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
|
-
|
|
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/Section.jsx
CHANGED
|
@@ -8,7 +8,7 @@ export default function Section({ label, children, className = '' }) {
|
|
|
8
8
|
return (
|
|
9
9
|
<div className={`flex flex-col gap-2 ${className}`}>
|
|
10
10
|
{label && (
|
|
11
|
-
<p className="kol-helper-10
|
|
11
|
+
<p className="kol-helper-10 tracking-widest text-meta">{label}</p>
|
|
12
12
|
)}
|
|
13
13
|
{children}
|
|
14
14
|
</div>
|
package/src/atoms/Tag.jsx
CHANGED
package/src/atoms/Textarea.jsx
CHANGED
|
@@ -6,7 +6,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
|
|
|
6
6
|
* `--textarea` modifier (display: block).
|
|
7
7
|
*
|
|
8
8
|
* variant="filled" (default) — persistent solid bg
|
|
9
|
-
* variant="ghost" —
|
|
9
|
+
* variant="ghost" — legacy alias, resolves to outline
|
|
10
10
|
* variant="outline" — bordered, transparent bg
|
|
11
11
|
*
|
|
12
12
|
* size="sm" / "md" (default) / "lg" — padding + type class
|
|
@@ -25,8 +25,8 @@ const ToggleBracket = ({
|
|
|
25
25
|
const isPlain = variant === 'plain'
|
|
26
26
|
|
|
27
27
|
const cls = isPlain
|
|
28
|
-
? `inline-flex items-center gap-3 kol-mono-12
|
|
29
|
-
: `kol-control kol-control--filled kol-control-md kol-mono-12
|
|
28
|
+
? `inline-flex items-center gap-3 kol-mono-12 text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
|
|
29
|
+
: `kol-control kol-control--filled kol-control-md kol-mono-12 justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
|
|
30
30
|
|
|
31
31
|
return (
|
|
32
32
|
<button
|
|
@@ -29,9 +29,9 @@ const ToggleCheckbox = ({
|
|
|
29
29
|
<polyline points="1 5 4 8 11 1" fill="none" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
|
30
30
|
</svg>
|
|
31
31
|
</span>
|
|
32
|
-
<span className="toggle-checkbox-label kol-helper-12
|
|
32
|
+
<span className="toggle-checkbox-label kol-helper-12 tracking-[0.08em]">
|
|
33
33
|
{label}
|
|
34
|
-
{hint ? <span className="ml-2 opacity-60
|
|
34
|
+
{hint ? <span className="ml-2 opacity-60 tracking-normal kol-helper-10">{hint}</span> : null}
|
|
35
35
|
</span>
|
|
36
36
|
</label>
|
|
37
37
|
)
|
package/src/atoms/ViewToggle.jsx
CHANGED
|
@@ -13,7 +13,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
|
|
|
13
13
|
* inactive = off (bare text). Use for compact on/off
|
|
14
14
|
* where a segmented two-button toggle is overkill.
|
|
15
15
|
*
|
|
16
|
-
* Built on the .kol-control shell. Default options use grid
|
|
16
|
+
* Built on the .kol-control shell. Default options use grid / view-list
|
|
17
17
|
* icons; consumers can pass `options` to override. `iconVariant` picks the
|
|
18
18
|
* icon cut for variant="icon" ('stroke' default; 'solid' reads better at
|
|
19
19
|
* 14px). For `variant="single"`, the FIRST option in `options` is the "off"
|
|
@@ -25,8 +25,8 @@ const ViewToggle = ({
|
|
|
25
25
|
variant = 'text',
|
|
26
26
|
iconVariant = 'stroke',
|
|
27
27
|
options = [
|
|
28
|
-
{ value: 'grid', label: 'Grid view', icon: 'grid
|
|
29
|
-
{ value: 'list', label: 'List view', icon: 'list
|
|
28
|
+
{ value: 'grid', label: 'Grid view', icon: 'grid' },
|
|
29
|
+
{ value: 'list', label: 'List view', icon: 'view-list' }
|
|
30
30
|
],
|
|
31
31
|
className = ''
|
|
32
32
|
}) => {
|
package/src/index.js
CHANGED
|
@@ -117,6 +117,7 @@ export { Icon } from '@kolkrabbi/kol-icons'
|
|
|
117
117
|
|
|
118
118
|
// graphics (SVG illustration loader — globs its own ./graphics/svg/**)
|
|
119
119
|
export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'
|
|
120
|
+
export { GRAPHIC_RAW } from './graphics/graphicData.js'
|
|
120
121
|
|
|
121
122
|
// hooks
|
|
122
123
|
export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'
|
|
@@ -1,11 +1,27 @@
|
|
|
1
1
|
import CopyButton from '../atoms/CopyButton.jsx'
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* CodeBlock — a chrome'd code block with language chip, filename chip, and copy.
|
|
5
|
+
*
|
|
6
|
+
* Accepts three input shapes (first match wins per field):
|
|
7
|
+
* • Portable Text: `value={{ code, language, filename }}` — the Sanity code-block
|
|
8
|
+
* object can be passed straight through from a portable-text map.
|
|
9
|
+
* • Direct props: `code` / `language` / `filename`.
|
|
10
|
+
* • Children: `<CodeBlock language="js">{'…'}</CodeBlock>` (the original API).
|
|
11
|
+
*
|
|
12
|
+
* DOM order is copy → filename → lang → pre so the `.kol-codeblock-*` + pre
|
|
13
|
+
* adjacency rules in the chrome CSS can pad the pre when chips are present.
|
|
14
|
+
*/
|
|
15
|
+
export default function CodeBlock({ children, code, language, filename, value }) {
|
|
16
|
+
const src = code ?? value?.code ?? children
|
|
17
|
+
const lang = language ?? value?.language
|
|
18
|
+
const file = filename ?? value?.filename
|
|
4
19
|
return (
|
|
5
20
|
<div className="kol-codeblock">
|
|
6
|
-
{
|
|
7
|
-
<
|
|
8
|
-
<
|
|
21
|
+
<CopyButton text={String(src ?? '')} className="kol-codeblock-copy" />
|
|
22
|
+
{file && <span className="kol-codeblock-filename">{file}</span>}
|
|
23
|
+
{lang && <span className="kol-codeblock-lang">{lang}</span>}
|
|
24
|
+
<pre><code>{src}</code></pre>
|
|
9
25
|
</div>
|
|
10
26
|
)
|
|
11
27
|
}
|
|
@@ -141,15 +141,9 @@ const Dropdown = ({
|
|
|
141
141
|
data-state={isOpen ? 'open' : 'closed'}
|
|
142
142
|
>
|
|
143
143
|
<span>{currentOption?.label}</span>
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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="
|
|
157
|
+
<div className="kol-dd-list" role="listbox">
|
|
164
158
|
{options.map((option) => {
|
|
165
159
|
const isActive = option.value === currentOption?.value
|
|
166
160
|
return (
|