@kolkrabbi/kol-component 0.12.8 → 0.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.8",
+  "version": "0.12.10",
   "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,
@@ -120,7 +121,7 @@ const ContentFilters = ({
           const isActive = activeFilters.has(filterKey)
           return (
             <div key={value} onClick={() => toggleFilter(group.key, value)}>
-              <Tag size="md" variant="default" hash={false} className={isActive ? 'border-fg-32' : 'border-fg-08'}>
+              <Tag size="sm" variant="default" hash={false} className={isActive ? 'border-fg-32' : 'border-fg-08'}>
                 {value}
               </Tag>
             </div>
@@ -134,7 +135,7 @@ 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>
           <div className="flex items-center gap-1">
             <button
               type="button"
@@ -209,6 +210,7 @@ const ContentFilters = ({
             * that pattern (kol-control--filled active / bare inactive). */}
           {viewModeOptions && (
             <ViewToggle
+              size="md"
               viewMode={viewMode}
               onViewChange={handleViewModeChange}
               options={viewModeOptions}