@kolkrabbi/kol-component 0.12.11 → 0.12.13

package/package.json

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

@@ -1,6 +1,7 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 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'
 
@@ -136,22 +137,21 @@ const ContentFilters = ({
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-6">
           <h2 className="kol-helper-16 flex items-center gap-3">{titleIcon && <Icon name={titleIcon} size={20} />}{title}</h2>
-          <Divider variant="vertical" className="h-5" />
+          <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
-            <button
-              type="button"
+            <Button
+              iconOnly="filter"
+              iconSize={20}
+              size="md"
+              variant="ghost"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="p-2 hover:bg-fg-04 rounded-sm transition-colors leading-none"
               aria-label="Toggle filters"
-              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
-            >
-              <Icon name="filter" size={20} />
-            </button>
+            />
             <div
-              className="flex items-center rounded-full cursor-pointer"
+              className="flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04 transition-colors"
               style={{
-                height: 28,
-                width: searchOpen ? 200 : 28,
+                height: 30,
+                width: searchOpen ? 200 : 30,
                 background: searchOpen ? 'var(--kol-fg-04)' : 'transparent',
                 border: searchOpen ? '1px solid var(--kol-fg-08)' : '1px solid transparent',
                 transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
@@ -163,9 +163,8 @@ const ContentFilters = ({
               }}
             >
               <span
-                className="flex items-center justify-center flex-shrink-0"
+                className="kol-btn kol-btn-ghost kol-btn-md kol-btn-icon flex items-center justify-center flex-shrink-0"
                 style={{
-                  width: 28, height: 28,
                   opacity: searchOpen ? 0 : 1,
                   transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
                   position: searchOpen ? 'absolute' : 'relative',