@kolkrabbi/kol-component 0.26.1 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.26.1",
+  "version": "0.27.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/atoms/CopyButton.jsx

@@ -1,25 +1,27 @@
 import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
- * CopyButton — copy-to-clipboard chip. Clipboard icon + Copy/Copied label
- * swap with a 1.8s reset; silent when the clipboard is blocked. Chrome
- * comes from .kol-copy-btn (kol-theme); parents add their own positioning
- * class (e.g. CodeBlock's .kol-codeblock-copy).
+ * CopyButton — THE copy-to-clipboard control (2026-08-09 user ruling): the
+ * 32×32 icon button — `copy` glyph flipping to `check` for 2s on copied,
+ * no text label. This is the button CodeBlock carried privately since the
+ * 2026-07-28 elder replication, promoted to the one shared atom; the old
+ * Copy/Copied label chip (one-off SVGs outside the icon set) is retired.
+ * Chrome comes from .kol-copy-btn (kol-theme); parents add their own
+ * positioning class (e.g. CodeBlock's .kol-codeblock-copy).
  *
  * Props:
  *   text      — string (or () => string) written to the clipboard
- *   label     — show the Copy/Copied text next to the icon (default true;
- *               false = icon-only for tight spots)
  *   className — extra classes (positioning etc.)
  */
-export default function CopyButton({ text, label = true, className = '', ...props }) {
+export default function CopyButton({ text, className = '', ...props }) {
   const [copied, setCopied] = useState(false)
 
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(typeof text === 'function' ? text() : String(text ?? ''))
       setCopied(true)
-      setTimeout(() => setCopied(false), 1800)
+      setTimeout(() => setCopied(false), 2000)
     } catch {
       /* clipboard blocked — silent */
     }
@@ -34,17 +36,7 @@ export default function CopyButton({ text, label = true, className = '', ...prop
       title={copied ? 'Copied' : 'Copy'}
       {...props}
     >
-      {copied ? (
-        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
-          <path d="M5 10 L9 14 L15 6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      ) : (
-        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
-          <rect x="6" y="3" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
-          <rect x="4" y="6" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
-        </svg>
-      )}
-      {label && <span>{copied ? 'Copied' : 'Copy'}</span>}
+      <Icon name={copied ? 'check' : 'copy'} size={16} />
     </button>
   )
 }

package/src/molecules/CodeBlock.jsx

@@ -1,15 +1,14 @@
-import { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { Icon } from '@kolkrabbi/kol-icons'
+import CopyButton from '../atoms/CopyButton.jsx'
 
 /**
  * CodeBlock — REPLICATED from the elder reference
  * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user
  * mandate): react-syntax-highlighter (Prism) with the oneDark theme flattened
  * onto KOL chrome — transparent bg, 14px/1.6 mono, no text-shadow — a single
- * filename-or-language chip, and a 32×32 icon copy button (`copy` glyph →
- * check on copied). Chrome lives in kol-theme (kol-components-molecules.css).
+ * filename-or-language chip, and the CopyButton atom positioned in-frame
+ * (.kol-codeblock-copy). Chrome lives in kol-theme (kol-components-molecules.css).
  *
  * Input shapes (first match wins per field):
  *   • Portable Text: `value={{ code, language, filename }}`
@@ -25,12 +24,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {boolean} [bare]      drop the FRAME; the host owns it. Not a size.
  */
 
-const CheckMarkIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.4697 6.41987C19.7626 6.12697 20.2373 6.12697 20.5302 6.41987C20.8231 6.71276 20.8231 7.18752 20.5302 7.48041L10.9443 17.0663C9.87038 18.1401 8.12951 18.1401 7.05561 17.0663L3.46967 13.4804C3.17678 13.1875 3.17678 12.7128 3.46967 12.4199C3.76256 12.127 4.23732 12.127 4.53022 12.4199L8.11615 16.0058C8.60427 16.4938 9.39561 16.4938 9.88373 16.0058L19.4697 6.41987Z" fill="currentColor"/>
-  </svg>
-)
-
 const syntaxTheme = (foregroundToken = 80) => ({
   ...oneDark,
   'pre[class*="language-"]': {
@@ -76,22 +69,10 @@ const syntaxTheme = (foregroundToken = 80) => ({
  * on both axes. Size is INDEPENDENT of `bare`: bare removes the frame, size
  * sets the box, and a bare block still has one. */
 export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value, bare = false, size = 'md' }) {
-  const [copied, setCopied] = useState(false)
-
   const code = String(value?.code ?? codeProp ?? children ?? '')
   const language = value?.language ?? languageProp ?? 'text'
   const filename = value?.filename ?? filenameProp
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {
-      /* clipboard blocked — silent */
-    }
-  }
-
   return (
     <div className={bare ? '' : 'kol-codeblock-wrapper'}>
       <div className={`kol-codeblock kol-codeblock--${size}${bare ? ' kol-codeblock--bare' : ''}`}>
@@ -124,15 +105,7 @@ export default function CodeBlock({ children, code: codeProp, language: language
         >
           {code}
         </SyntaxHighlighter>
-        <button
-          type="button"
-          className="kol-codeblock-copy"
-          onClick={handleCopy}
-          aria-label={copied ? 'Code copied!' : 'Copy code'}
-          title={copied ? 'Code copied!' : 'Copy code'}
-        >
-          {copied ? <CheckMarkIcon /> : <Icon name="copy" size={16} />}
-        </button>
+        <CopyButton text={code} className="kol-codeblock-copy" />
       </div>
     </div>
   )