@kolkrabbi/kol-component 0.12.9 → 0.12.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "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/ViewToggle.jsx

@@ -20,6 +20,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * value; the SECOND is "on".
  */
 const ViewToggle = ({
+  size = 'sm',
   viewMode,
   onViewChange,
   variant = 'text',
@@ -75,8 +76,8 @@ const ViewToggle = ({
      * border-reveal hover. (Earlier ghost variant revealed an outline on
      * hover; that's deliberately gone.) */
     return isActive
-      ? 'kol-control kol-control--filled kol-control-sm kol-mono-12'
-      : 'kol-control kol-control-sm kol-mono-12 text-meta hover:text-emphasis'
+      ? `kol-control kol-control--filled kol-control-${size} kol-mono-${size === 'md' ? '14' : '12'}`
+      : `kol-control kol-control-${size} kol-mono-${size === 'md' ? '14' : '12'} text-meta hover:text-emphasis`
   }
 
   return (

package/src/organisms/ContentFilters.jsx

@@ -27,6 +27,7 @@ const ContentFilters = ({
   items,
   title,
   totalCount,
+  titleIcon,
   filterGroups = [],
   renderItem,
   viewModeOptions,
@@ -134,7 +135,8 @@ const ContentFilters = ({
     <div className="w-full" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-6">
-          <h2 className="kol-helper-14">{title}</h2>
+          <h2 className="kol-helper-16 flex items-center gap-3">{titleIcon && <Icon name={titleIcon} size={20} />}{title}</h2>
+          <Divider variant="vertical" className="h-5" />
           <div className="flex items-center gap-1">
             <button
               type="button"
@@ -143,7 +145,7 @@ const ContentFilters = ({
               aria-label="Toggle filters"
               style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
             >
-              <Icon name="filter" size={16} />
+              <Icon name="filter" size={20} />
             </button>
             <div
               className="flex items-center rounded-full cursor-pointer"
@@ -169,7 +171,7 @@ const ContentFilters = ({
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
-                <Icon name="search" size={16} />
+                <Icon name="search" size={20} />
               </span>
               {searchOpen && (
                 <input
@@ -209,6 +211,7 @@ const ContentFilters = ({
             * that pattern (kol-control--filled active / bare inactive). */}
           {viewModeOptions && (
             <ViewToggle
+              size="md"
               viewMode={viewMode}
               onViewChange={handleViewModeChange}
               options={viewModeOptions}