@kolkrabbi/kol-component 0.170.0 → 0.171.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.170.0",
+  "version": "0.171.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -22,6 +22,7 @@ export { default as AssetPlaceholder } from './utilities/AssetPlaceholder.jsx'
 export { default as Avatar } from './atoms/Avatar.jsx'
 export { default as Badge } from './atoms/Badge.jsx'
 export { default as Button } from './atoms/Button.jsx'
+export { default as CloseButton } from './utilities/CloseButton.jsx'
 export { default as ActionButton } from './atoms/ActionButton.jsx'
 export { default as SizeOrDownload } from './atoms/SizeOrDownload.jsx'
 export { default as SortHeader } from './atoms/SortHeader.jsx'

package/src/molecules/ShellDrawer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Icon } from '@kolkrabbi/kol-icons'
-import Button from '../atoms/Button.jsx'
+import CloseButton from '../utilities/CloseButton.jsx'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
 /* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
@@ -197,14 +197,7 @@ export default function ShellDrawer({
           {closeSide === 'start' && (
             /* bare glyph, no container (user 2026-08-09: "the X close icon
              * does not need a container") — body ink at rest, emphasis on hover */
-            <button
-              type="button"
-              aria-label="Close"
-              onClick={onClose}
-              className="inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-body transition-colors duration-150 hover:text-emphasis"
-            >
-              <Icon name="x" size={18} />
-            </button>
+            <CloseButton onClick={onClose} size={closeSize} className="shrink-0" />
           )}
           {header != null && <div className="min-w-0 flex-1">{header}</div>}
           {/* A NORMAL ICON BUTTON (user 2026-09-02: *"it should just be like a
@@ -214,14 +207,7 @@ export default function ShellDrawer({
             * the md rung's 32px around a glyph six under it, and it read as an
             * oversized empty square. No override: the rung sets both. */}
           {closeSide !== 'start' && (
-            <Button
-              variant="nav"
-              size={closeSize}
-              iconOnly="x"
-              onClick={onClose}
-              aria-label="Close"
-              className="ml-auto shrink-0"
-            />
+            <CloseButton onClick={onClose} size={closeSize} className="ml-auto shrink-0" />
           )}
         </div>
         <div className="flex-1 overflow-y-auto pr-1" style={{ overflowAnchor: 'none' }}>

package/src/molecules/TabsRow.jsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+import CloseButton from '../utilities/CloseButton.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /* taxonomy-ok: nests kol-icons's Icon */
@@ -36,15 +37,9 @@ export default function TabsRow({ tabs = [], value, onChange, onClose, onMinimis
   return (
     <div className="flex items-stretch gap-4 h-10">
       {onClose && (
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close"
-          className="text-meta hover:text-emphasis self-center"
-          style={{ lineHeight: 0 }}
-        >
-          <Icon name="x" size={12} />
-        </button>
+        /* the one close, at the rung whose glyph is the 12 this hand-rolled
+         * (2026-09-03) — xs SOLO is 12, so the drawing does not move */
+        <CloseButton onClick={onClose} size="xs" className="self-center" />
       )}
 
       <div ref={listRef} role="tablist" onKeyDown={onKeyDown} className="flex items-stretch gap-4">

package/src/utilities/CloseButton.jsx

@@ -0,0 +1,77 @@
+import Button from '../atoms/Button.jsx'
+import IconFrame from '../atoms/IconFrame.jsx'
+
+/**
+ * CloseButton — the X that dismisses a thing. One component, so there is one.
+ *
+ * WHY IT EXISTS (user 2026-09-03: *"why are you FUCKING MAKING INDIVIDUAL
+ * CHANGES this isnt difficult, this is a button component yes or no"*). It is a
+ * Button, and that was the problem: "close" was never a component, it was four
+ * props retyped at four call sites, so the four drifted —
+ *
+ *   ShellDrawer         Button variant="nav" size="md"        (+ a second,
+ *                       hand-rolled <button> with an 18px icon for closeSide="start")
+ *   FullscreenOverlay   Button variant="nav", Button's md default
+ *   TabsRow             a hand-rolled <button> with a 12px icon and its own hover
+ *   ShellLayout         Button variant="outline" quiet size="sm"
+ *
+ * — three sizes and two variants for one control, and `ShellLayout` was still
+ * shipping the boxed outline that the 2026-09-01 one-idiom ruling retired. The
+ * ruling was written down and then re-typed wrong three times, which is the
+ * `HEADER_ICON` lesson again: a number is advice, a component is the only thing
+ * that makes the box unwritable by hand.
+ *
+ * THE IDIOM, in one place: `variant="nav"` — bare glyph, no box, the wash on
+ * hover — at `sm` (26), the same rung as the controls a close usually sits
+ * beside. `size` is here because a close in a taller chrome row legitimately
+ * takes that row's rung; it is the ONLY thing a call site may vary, and it must
+ * be a rung, never an `iconSize`. The glyph follows from the rung.
+ *
+ * UTILITY, by the placement test (2026-08-09): an X on a canvas alone means
+ * nothing — it is only ever worn BY the thing it dismisses, the same row
+ * `FullscreenOverlay` is held on. It is also the only tier that works: a close
+ * is needed by a utility (`FullscreenOverlay`), a molecule (`ShellDrawer`,
+ * `TabsRow`) and a package shell alike, and utilities are the one folder every
+ * tier may import while importing only atoms itself.
+ *
+ * TWO BASES, ONE IDIOM (user 2026-09-03: *"sometimes you dont want states"*).
+ * `states` (default true) is a Button — hover wash, press, focus ring — which is
+ * what a close in reachable chrome should be. `states={false}` is `IconFrame`,
+ * which has NO interactive states by contract: for a close that is decoration
+ * over something already dismissible, or one inside a surface that owns the
+ * whole hit area, where a lighting-up X is noise. Same glyph, same variant, same
+ * rung either way — only the state machine differs, which is exactly the
+ * distinction IconFrame was promoted for (2026-08-01).
+ *
+ * @param {Function} onClick   dismiss
+ * @param {boolean}  states    interactive states (default true → Button); false → IconFrame, no states
+ * @param {'xs'|'sm'|'md'|'lg'} size  the rung (default 'sm'); match the row it sits in
+ * @param {string}   label     accessible name (default 'Close')
+ * @param {string}   className extra classes — positioning, never chrome
+ */
+export default function CloseButton({ onClick, size = 'sm', label = 'Close', states = true, className = '', ...rest }) {
+  if (!states) {
+    return (
+      <IconFrame
+        name="x"
+        variant="nav"
+        size={size}
+        onClick={onClick}
+        aria-label={label}
+        className={className}
+        {...rest}
+      />
+    )
+  }
+  return (
+    <Button
+      variant="nav"
+      size={size}
+      iconOnly="x"
+      onClick={onClick}
+      aria-label={label}
+      className={className}
+      {...rest}
+    />
+  )
+}

package/src/utilities/FullscreenOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import Button from '../atoms/Button.jsx'
+import CloseButton from './CloseButton.jsx'
 
 /**
  * FullscreenOverlay — the scrim + centred sheet every overlay in the repo
@@ -74,14 +74,7 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
            * tap away from the first, and had he kept a box it would have worn
            * `primary`, never `outline`. Same variant as the trigger; the SQUARE
            * is `sm` since 2026-09-03, one size for the one idiom. */
-          <Button
-            variant="nav"
-            size="sm"
-            iconOnly="x"
-            className="kol-overlay-close"
-            onClick={onClose}
-            aria-label="Close"
-          />
+          <CloseButton className="kol-overlay-close" onClick={onClose} />
         )}
         {children}
       </div>