@cosxai/ui 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/actionbar/ActionBarButton.tsx

@@ -70,7 +70,7 @@ export function ActionBarButton({
         ...style,
       }}
     >
-      {icon}
+      {icon != null && <span className="ck-actionbar-icon">{icon}</span>}
       <span className={responsiveLabel ? "ck-actionbar-label" : undefined}>
         {label}
       </span>

package/src/styles/index.css

@@ -172,6 +172,22 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
   cursor: not-allowed;
 }
 
+/* Icon glyph wrapper — sized larger than the button's 13 px label
+   text so unicode symbols (◐ ☀ ☾ ◇) and small SVGs read clearly.
+   ActionBarButton wraps the icon prop in this span automatically;
+   callers don't need to opt in. The 1 px upward translate
+   compensates for geometric glyphs sitting about 1 px below their
+   em-box centre — flex centring otherwise leaves them looking
+   slightly low next to the heavier label text. */
+.ck-actionbar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+
 /* Hide labels below 768 px (the standard md breakpoint).
    Icons + tooltips remain — the bar's still informative on phones. */
 @media (max-width: 767px) {