cynx-ui 1.2.12 → 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/components/Toggle.jsx

@@ -5,36 +5,13 @@ const SIZES = {
 };
 
 const COLORS = {
-  primary: 'var(--accent)',
-  success: 'var(--success)',
+  primary: '#f99e2c',
+  success: '#27ae60',
   warning: '#f59e0b',
-  danger:  'var(--danger)',
+  danger:  '#f64747',
 };
 
-const STYLES = `
-@keyframes cx-toggle-on {
-  0% { transform: translateY(-50%) scale(1); }
-  40% { transform: translateY(-50%) scale(1.15); }
-  100% { transform: translateY(-50%) scale(1); }
-}
-@keyframes cx-toggle-off {
-  0% { transform: translateY(-50%) scale(1); }
-  40% { transform: translateY(-50%) scale(1.15); }
-  100% { transform: translateY(-50%) scale(1); }
-}
-`;
-
-let _id = 'cynx-toggle-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();
+const OFF_COLOR = '#d7d8e0';
 
 export default function Toggle({
   checked = false,
@@ -48,14 +25,18 @@ export default function Toggle({
   className = '',
   style = {},
 }) {
-  ensureStyles();
   const s = SIZES[size] || SIZES.md;
-  const trackBg = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
+  const trackBg = checked ? (COLORS[color] || COLORS.primary) : OFF_COLOR;
 
   return (
     <label
       className={className}
-      style={{ display:'inline-flex', alignItems:'center', gap:8, cursor: disabled ? 'not-allowed' : 'pointer', userSelect:'none', opacity: disabled ? .4 : 1, ...style }}
+      style={{
+        display:'inline-flex', alignItems:'center', gap:8,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        userSelect:'none', opacity: disabled ? .4 : 1,
+        ...style,
+      }}
       onClick={onClick}
     >
       <input type="checkbox" checked={checked} disabled={disabled}
@@ -63,18 +44,21 @@ export default function Toggle({
         style={{ position:'absolute', opacity:0, width:0, height:0 }} />
       <span style={{
         position:'relative', width: s.w, height: s.h, borderRadius: s.r,
-        background: trackBg, flexShrink:0, transition:'background .25s ease',
-        boxShadow:'0 1px 3px rgba(20,22,41,.1)',
+        background: trackBg, flexShrink: 0,
+        transition: 'background .25s ease',
+        boxShadow: '0 1px 3px rgba(20,22,41,.1)',
       }}>
         <span style={{
           position:'absolute', top:'50%',
-          transform:'translateY(-50%)',
+          transform: checked
+            ? 'translateY(-50%) scale(1)'
+            : 'translateY(-50%) scale(1)',
           left: checked ? s.on : s.off,
           width: s.dot, height: s.dot,
-          background:'#fff', borderRadius:'50%',
-          boxShadow:'0 1px 3px rgba(0,0,0,.25)',
-          transition:'left .25s cubic-bezier(.34,1.56,.64,1)',
-          animation: `cx-toggle-${checked ? 'on' : 'off'} .25s cubic-bezier(.34,1.56,.64,1)`,
+          background: '#fff', borderRadius: '50%',
+          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+          transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
+          willChange: 'left',
         }} />
       </span>
       {label && <span style={labelStyle}>{label}</span>}

package/package.json

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