@kolkrabbi/kol-component 0.10.1 → 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.
Files changed (5) 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/molecules/Dropdown.jsx +4 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-component",
3
- "version": "0.10.1",
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.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/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 (