@kolkrabbi/kol-component 0.235.0 → 0.236.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.235.0",
+  "version": "0.236.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -128,6 +128,8 @@ export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as DocumentEditor } from './organisms/DocumentEditor.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
+/* TabChips — tabs as chips, for inside a toolbar (2026-10-01; was the showcase's local DocTabs) */
+export { default as TabChips } from './molecules/TabChips.jsx'
 
 // organisms
 /* monorepo sets (P6–P10) — organism members. Foundry members live in the

package/src/molecules/TabChips.jsx

@@ -0,0 +1,39 @@
+/**
+ * TabChips — Tabs as a row of chips. the active tab is a filled chip, the rest are quiet text.
+ *
+ * WHY IT EXISTS (user, 2026-10-01, on the showcase's Preview / Code and pnpm / npm / yarn / bun rows:
+ * *"what is this button? its not DS?"* → *"we can just make a tab chip for this purpose exactly
+ * like this"*). It was `DocTabs`, a strip local to the showcase, built there because neither
+ * shipped tab control fits a toolbar: `SegmentedToggle` is a joined strip with radiogroup
+ * semantics, `TabsRow` is an underline strip that wants a rule beneath it. This is the third tab
+ * idiom — small, unframed, sits inside a bar — promoted as it was, class for class.
+ *
+ * Labels render as authored. Selection is the parent's.
+ *
+ * @param {Array}    tabs       `[{ id, label }]`
+ * @param {string}   value      id of the active tab (controlled)
+ * @param {Function} onChange   `(id) => void`
+ * @param {string}   [ariaLabel] accessible name for the strip
+ * @param {string}   [className] extra classes on the row
+ */
+export default function TabChips({ tabs = [], value, onChange, ariaLabel, className = '' }) {
+  return (
+    <div className={`flex items-center gap-1 ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
+      {tabs.map((t) => {
+        const active = t.id === value
+        return (
+          <button
+            key={t.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange?.(t.id)}
+            className={`kol-mono-12 rounded-[var(--kol-radius-sm)] px-3 py-1 transition-colors [@media(pointer:coarse)]:min-h-8 ${active ? 'bg-fg-08 text-emphasis' : 'text-meta hover:text-emphasis'}`}
+          >
+            {t.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}