@kolkrabbi/kol-component 0.44.2 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.44.2",
+  "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
@@ -148,7 +147,9 @@ const ContentFilters = ({
         * 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">{group.label}</h4>
+      <h4 className="kol-helper-12 text-fg-96" style={{ textTransform: 'uppercase' }}>
+        {group.label}
+      </h4>
       <div className="flex flex-wrap gap-4">
         {group.values.map((value) => (
           <Tag
@@ -191,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"
@@ -219,7 +220,7 @@ const ContentFilters = ({
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
-                <IconSeam name="search" size={20} />
+                <IconSeam name="search" size={16} />
               </span>
               {searchOpen && (
                 <input
@@ -254,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>