@kolkrabbi/kol-component 0.44.1 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.44.1",
+  "version": "0.45.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/organisms/ContentFilters.jsx

@@ -3,7 +3,6 @@ import Tag from '../atoms/Tag.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Button from '../atoms/Button.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ViewToggle from '../atoms/ViewToggle'
 import IconFrame from '../atoms/IconFrame.jsx'
 
 /**
@@ -19,7 +18,7 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {number} props.totalCount — total count before filtering
  * @param {Array} props.filterGroups — [{label, key, values}, ...]
  * @param {Function} props.renderItem — (filteredItems, viewMode, layout) => ReactNode
- * @param {Array} props.viewModeOptions — optional view mode options for ViewToggle
+ * @param {Array} props.viewModeOptions — optional view mode options for the view strip
  * @param {string} props.defaultViewMode — default view mode (default: 'list')
  * @param {Function} props.onFilterChange — optional callback when filters change
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
@@ -138,15 +137,20 @@ const ContentFilters = ({
    * uppercase these themselves. */
   const renderFilterGroup = (group) => (
     <div key={group.key} className="flex flex-col gap-3">
-      {/* The group label wears the layout strip's exact text treatment —
-        * `kol-helper-12` at 1px tracking — so TAGS / TYPES and LIST / GRID read
-        * as one family across the row (user ruling 2026-08-15: "LIST GRID text
-        * has style, that style also on TAGS and any other filter category").
-        * Rest ink, not active: the label is a heading, not a state. */}
-      <h4 className="kol-helper-12 text-fg-32" style={{ letterSpacing: 1 }}>
+      {/* THE CATEGORY LABEL IS THE ACTIVE INK — `kol-helper-12` at `text-fg-96`,
+        * the same full opacity a SELECTED layout item wears (user ruling
+        * 2026-08-15: "TAGS and other categories are ACTIVE state full opacity").
+        *
+        * Read the RENDER, not the default: the retired fork defaulted this to
+        * `text-fg-32` and kol-monitor overrode it per call site with
+        * `labelClassName="kol-helper-12 text-fg-96"` — so the fork's default was
+        * never what anyone looked at. No inline letter-spacing: the helper ramp
+        * carries its own, and the override the fork added was not in the
+        * rendered path either. */}
+      <h4 className="kol-helper-12 text-fg-96" style={{ textTransform: 'uppercase' }}>
         {group.label}
       </h4>
-      <div className="flex flex-wrap gap-2">
+      <div className="flex flex-wrap gap-4">
         {group.values.map((value) => (
           <Tag
             key={value}
@@ -155,6 +159,7 @@ const ContentFilters = ({
             hash={false}
             active={activeFilters.has(`${group.key}:${value}`)}
             onClick={() => toggleFilter(group.key, value)}
+            className={activeFilters.has(`${group.key}:${value}`) ? 'text-fg-96' : 'text-fg-48'}
           >
             {value}
           </Tag>
@@ -187,7 +192,7 @@ const ContentFilters = ({
               aria-label="Toggle filters"
               style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
             >
-              <IconSeam name="filter" size={20} />
+              <IconSeam name="filter" size={16} />
             </button>
             <div
               className="flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04 transition-colors"
@@ -215,7 +220,7 @@ const ContentFilters = ({
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
-                <IconSeam name="search" size={20} />
+                <IconSeam name="search" size={16} />
               </span>
               {searchOpen && (
                 <input
@@ -250,16 +255,28 @@ const ContentFilters = ({
               {filteredItems.length} of {totalCount}
             </span>
           )}
-          {/* View-mode toggle — active = filled chip, inactive = bare text
-            * (user ruling 2026-07-28, live look). ViewToggle's text variant IS
-            * that pattern (kol-control--filled active / bare inactive). */}
+          {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
+            * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
+            * ContentFilters.jsx:225-232): inline spans, `kol-helper-14`,
+            * uppercase + 1px tracking, `text-fg-96` active / `text-fg-32` rest.
+            * That file imports ViewToggle and never renders it for this.
+            *
+            * This REPLACES the filled-chip reading of the 2026-07-28 ruling on
+            * this surface — user ruling 2026-08-15: the fork's look, everywhere.
+            * One family across the whole row. */}
           {viewModeOptions && (
-            <ViewToggle
-              size="md"
-              viewMode={viewMode}
-              onViewChange={handleViewModeChange}
-              options={viewModeOptions}
-            />
+            <div className="flex items-center gap-4">
+              {viewModeOptions.map((opt) => (
+                <span
+                  key={opt.value}
+                  onClick={() => handleViewModeChange(opt.value)}
+                  className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+                  style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+                >
+                  {opt.label}
+                </span>
+              ))}
+            </div>
           )}
         </div>
       </div>
@@ -283,7 +300,7 @@ const ContentFilters = ({
               <button
                 type="button"
                 onClick={clearAllFilters}
-                className="kol-helper-12 transition-colors underline text-fg-48"
+                className="kol-helper-12 transition-colors underline text-fg-32 hover:text-fg-48"
                 style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
               >
                 Clear all ({activeFilters.size})