cynx-ui 1.2.13 → 1.2.14

package/components/TabBar.jsx

@@ -1,92 +1,156 @@
-import { useRef, useEffect } from 'react';
-
-/**
- * TabBar — sliding underline indicator tabs
- * Props:
- *   tabs:         [{ id, label, icon?, count? }]
- *   active:       string (active tab id)
- *   onChange:     fn(id)
- *   capitalize:   bool — when true, tab labels are text-transform: capitalize
- *   padding:      string — override button padding (default '10px 16px')
- */
-export default function TabBar({ tabs, active, onChange, capitalize = false, padding = '10px 16px' }) {
-  const barRef   = useRef(null);
-  const indRef   = useRef(null);
-  const initDone = useRef(false);
-
-  useEffect(() => {
-    const bar = barRef.current;
-    const ind = indRef.current;
-    if (!bar || !ind) return;
-
-    const activeBtn = bar.querySelector(`[data-tabid="${active}"]`);
-    if (!activeBtn) return;
-
-    const barRect = bar.getBoundingClientRect();
-    const btnRect = activeBtn.getBoundingClientRect();
-    const x = btnRect.left - barRect.left;
-    const w = btnRect.width;
-
-    if (!initDone.current) {
-      ind.style.transition = 'none';
-      ind.style.width      = w + 'px';
-      ind.style.transform  = `translateX(${x}px)`;
-      requestAnimationFrame(() => { ind.style.transition = ''; });
-      initDone.current = true;
-    } else {
-      ind.style.width     = w + 'px';
-      ind.style.transform = `translateX(${x}px)`;
-    }
-  }, [active, tabs]);
-
-  return (
-    <div ref={barRef} style={{ display:'flex', position:'relative' }}>
-      {/* sliding underline */}
-      <div ref={indRef} style={{
-        position:'absolute', bottom:'-1px', left:0,
-        height:2, width:0,
-        background:'var(--accent)',
-        borderRadius:'2px 2px 0 0',
-        transition:'transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1)',
-        pointerEvents:'none', zIndex:2,
-      }} />
-
-      {tabs.map(t => {
-        const isActive = active === t.id;
-        return (
-          <button
-            key={t.id}
-            data-tabid={t.id}
-            onClick={() => onChange(t.id)}
-            style={{
-              display:'flex', alignItems:'center', gap:6,
-              padding,
-              border:'none', background:'none',
-              fontSize:'.82rem', fontWeight:500,
-              color: isActive ? 'var(--accent)' : 'var(--muted)',
-              cursor:'pointer',
-              transition:'color .18s',
-              marginBottom:'-1px',
-              position:'relative', zIndex:1,
-              fontFamily:'inherit',
-              whiteSpace:'nowrap',
-              textTransform: capitalize ? 'capitalize' : 'none',
-            }}
-          >
-            {t.icon}{t.label}
-            {t.count != null && t.count > 0 && (
-              <span style={{
-                background: isActive ? 'var(--accent-bg)' : 'var(--grey-1)',
-                color:      isActive ? 'var(--accent)'    : 'var(--muted)',
-                borderRadius: 10,
-                padding: '1px 6px',
-                fontSize: '.68rem',
-                transition: 'background .18s, color .18s',
-              }}>{t.count}</span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+import { useRef, useEffect } from 'react';
+
+const STYLES = `
+@keyframes cx-tabSlide {
+  from { opacity: 0; transform: scaleX(.8); }
+  to   { opacity: 1; transform: scaleX(1); }
+}
+`;
+
+let _id = 'cynx-tabbar-styles';
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+if (typeof document !== 'undefined') ensureStyles();
+
+export default function TabBar({ tabs, active, onChange, capitalize = false, padding, variant = 'underline' }) {
+  const barRef   = useRef(null);
+  const indRef   = useRef(null);
+  const initDone = useRef(false);
+
+  // Underline indicator positioning
+  useEffect(() => {
+    if (variant !== 'underline') return;
+    const bar = barRef.current;
+    const ind = indRef.current;
+    if (!bar || !ind) return;
+
+    const activeBtn = bar.querySelector(`[data-tabid="${active}"]`);
+    if (!activeBtn) return;
+
+    const barRect = bar.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    const x = btnRect.left - barRect.left;
+    const w = btnRect.width;
+
+    if (!initDone.current) {
+      ind.style.transition = 'none';
+      ind.style.width      = w + 'px';
+      ind.style.transform  = `translateX(${x}px)`;
+      requestAnimationFrame(() => { ind.style.transition = ''; });
+      initDone.current = true;
+    } else {
+      ind.style.width     = w + 'px';
+      ind.style.transform = `translateX(${x}px)`;
+    }
+  }, [active, tabs, variant]);
+
+  if (variant === 'pill') {
+    return (
+      <div style={{
+        display: 'flex', gap: 4,
+        background: 'var(--grey-1, #f5f5f8)',
+        borderRadius: 'var(--rads, 8px)',
+        padding: '4px',
+        border: '1px solid var(--border-light, #ebebf0)',
+      }}>
+        {tabs.map(t => {
+          const isActive = active === t.id;
+          return (
+            <button
+              key={t.id}
+              data-tabid={t.id}
+              onClick={() => onChange(t.id)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 6,
+                padding: padding || '8px 16px',
+                border: 'none',
+                borderRadius: 'var(--radxs, 6px)',
+                background: isActive ? '#fff' : 'transparent',
+                boxShadow: isActive ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
+                fontSize: '.82rem', fontWeight: isActive ? 600 : 500,
+                color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
+                cursor: 'pointer',
+                transition: 'all .18s ease',
+                fontFamily: 'inherit',
+                whiteSpace: 'nowrap',
+                textTransform: capitalize ? 'capitalize' : 'none',
+              }}
+            >
+              {t.icon}{t.label}
+              {t.count != null && t.count > 0 && (
+                <span style={{
+                  background: isActive ? 'var(--accent-bg)' : 'var(--grey-2, #d7d8e0)',
+                  color:      isActive ? 'var(--accent)'    : 'var(--muted)',
+                  borderRadius: 10,
+                  padding: '1px 6px',
+                  fontSize: '.68rem',
+                  fontWeight: 600,
+                }}>{t.count}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Default: underline variant
+  const defaultPadding = padding || '10px 16px';
+
+  return (
+    <div ref={barRef} style={{ display:'flex', position:'relative' }}>
+      <div ref={indRef} style={{
+        position:'absolute', bottom:'-1px', left:0,
+        height:2, width:0,
+        background:'var(--accent)',
+        borderRadius:'2px 2px 0 0',
+        transition:'transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1)',
+        pointerEvents:'none', zIndex:2,
+      }} />
+
+      {tabs.map(t => {
+        const isActive = active === t.id;
+        return (
+          <button
+            key={t.id}
+            data-tabid={t.id}
+            onClick={() => onChange(t.id)}
+            style={{
+              display:'flex', alignItems:'center', gap:6,
+              padding: defaultPadding,
+              border:'none', background:'none',
+              fontSize:'.82rem', fontWeight:500,
+              color: isActive ? 'var(--accent)' : 'var(--muted)',
+              cursor:'pointer',
+              transition:'color .18s',
+              marginBottom:'-1px',
+              position:'relative', zIndex:1,
+              fontFamily:'inherit',
+              whiteSpace:'nowrap',
+              textTransform: capitalize ? 'capitalize' : 'none',
+            }}
+          >
+            {t.icon}{t.label}
+            {t.count != null && t.count > 0 && (
+              <span style={{
+                background: isActive ? 'var(--accent-bg)' : 'var(--grey-1)',
+                color:      isActive ? 'var(--accent)'    : 'var(--muted)',
+                borderRadius: 10,
+                padding: '1px 6px',
+                fontSize: '.68rem',
+                transition: 'background .18s, color .18s',
+              }}>{t.count}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "type": "module",
   "exports": {
     ".": "./index.js"