cynx-lib 1.3.28

package/ui/components/StatsBar.jsx

@@ -0,0 +1,88 @@
+import { Users, Monitor, ShieldAlert, Activity, WifiOff } from 'lucide-react';
+
+const itemStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 5,
+  padding: '4px 8px',
+  fontSize: '.8rem',
+  fontWeight: 600,
+  color: 'var(--t, #0f172a)',
+};
+
+const iconWrap = (color) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 20,
+  height: 20,
+  borderRadius: 5,
+  background: color + '18',
+  color: color,
+  flexShrink: 0,
+});
+
+const sep = {
+  width: 1,
+  height: 14,
+  background: 'var(--border-light, #ebebf0)',
+  margin: '0 3px',
+  flexShrink: 0,
+};
+
+const groupStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 0,
+  padding: '3px 8px',
+  minHeight: 32,
+  borderRadius: 7,
+  border: '1px solid var(--border, #e2e8f0)',
+  background: 'var(--surface, #ffffff)',
+  boxShadow: 'var(--shadow, 0 1px 2px rgba(0,0,0,.05))',
+};
+
+export default function StatsBar({ total = 0, active = 0, blocked = 0, actions = 0, type }) {
+  const dotted = type === 'dotted';
+  const dot = (color) => dotted ? <span style={{ color, fontSize: '.8rem', fontWeight: 700 }}>•</span> : null;
+
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      {/* Device group */}
+      <div style={groupStyle}>
+        <div style={itemStyle}>
+          <span style={iconWrap('#6366f1')}><Monitor size={10} /></span>
+          {dot('#6366f1')}
+          <span>{total}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('var(--s, #22c55e)')}><Users size={10} /></span>
+          {dot('var(--s, #22c55e)')}
+          <span>{active}</span>
+        </div>
+      </div>
+
+      {/* Status group */}
+      <div style={groupStyle}>
+        <div style={itemStyle}>
+          <span style={iconWrap('var(--d, #ef4444)')}><ShieldAlert size={10} /></span>
+          {dot('var(--d, #ef4444)')}
+          <span>{blocked}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('var(--w, #f59e0b)')}><Activity size={10} /></span>
+          {dot('var(--w, #f59e0b)')}
+          <span>{actions}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('var(--t3, #94a3b8)')}><WifiOff size={10} /></span>
+          {dot('var(--t3, #94a3b8)')}
+          <span>{total - active}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/components/StatsCard.jsx

@@ -0,0 +1,171 @@
+import CircularProgress from './CircularProgress';
+
+const BASE = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 14px',
+  minHeight: 68,
+  borderRadius: 'var(--rad,10px)',
+  background: 'var(--surface,#fff)',
+  border: '1px solid var(--border, #e2e8f0)',
+  boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
+  minWidth: 0,
+  transition: 'border-color .15s',
+};
+
+const SIMPLE_BASE = {
+  ...BASE,
+  padding: '12px 14px',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+};
+
+export default function StatsCard({
+  variant = 'default',
+  icon,
+  iconColor = 'var(--blue, #2782e4)',
+  iconBg = 'var(--infd, rgba(39,130,228,.1))',
+  title,
+  value,
+  subtitle,
+  percent,
+  percentColor,
+  progressSize = 'sm',
+  progressTrackColor = 'var(--bd2, #e8e8ec)',
+  headRight,
+  className = '',
+  style = {},
+  children,
+}) {
+  if (variant === 'simple') {
+    return (
+      <div className={className} style={{ ...SIMPLE_BASE, ...style }}>
+        <div style={{
+          width: '100%',
+          marginBottom: 8,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+          {title && (
+            <div style={{
+              fontSize: '.58rem',
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '.08em',
+              color: 'var(--muted,#9b9daa)',
+            }}>{title}</div>
+          )}
+          {icon && (
+            <div style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              color: iconColor,
+            }}>
+              {icon}
+            </div>
+          )}
+        </div>
+        {value !== undefined && (
+          <div style={{
+            fontSize: '1.25rem',
+            fontWeight: 800,
+            letterSpacing: '-.03em',
+            lineHeight: 1.1,
+            minHeight: '1.375em',
+          }}>{value}</div>
+        )}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={{ ...BASE, ...style }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+        flex: 1,
+      }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 8,
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}>
+            {icon && (
+              <div style={{
+                width: 24,
+                height: 24,
+                borderRadius: 6,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+                background: iconBg,
+                color: iconColor,
+              }}>
+                {icon}
+              </div>
+            )}
+            {title && (
+              <div style={{
+                fontSize: '.58rem',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '.08em',
+                color: 'var(--muted,#9b9daa)',
+              }}>{title}</div>
+            )}
+          </div>
+          {headRight}
+        </div>
+        {value !== undefined && (
+          <div style={{
+            fontSize: '1.1rem',
+            fontWeight: 800,
+            letterSpacing: '-.02em',
+            color: 'var(--primary-text,#0f111c)',
+            lineHeight: 1.2,
+            minHeight: '1.32em',
+          }}>{value}</div>
+        )}
+        <div style={{
+          fontSize: '.62rem',
+          color: 'var(--muted,#9b9daa)',
+          fontWeight: 500,
+          marginTop: 1,
+          minHeight: 14,
+        }}>{subtitle || '\u00A0'}</div>
+        {children}
+      </div>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 0,
+      }}>
+        {percent !== undefined && (
+          <CircularProgress
+            value={percent}
+            size={progressSize}
+            color={percentColor}
+            trackColor={progressTrackColor}
+            showPercent
+            rounded
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/TabBar.jsx

@@ -0,0 +1,404 @@
+import { useState, 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();
+
+function ChevronIcon({ isOpen }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        transition: 'transform 0.18s cubic-bezier(0.4, 0, 0.2, 1)',
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        opacity: 0.75,
+        marginLeft: 2,
+        flexShrink: 0,
+      }}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="var(--accent, #3b82f6)"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ flexShrink: 0 }}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+export default function TabBar({ tabs, active, onChange, capitalize = false, padding, variant = 'underline' }) {
+  const barRef   = useRef(null);
+  const indRef   = useRef(null);
+  const initDone = useRef(false);
+  const [openDropdownId, setOpenDropdownId] = useState(null);
+
+  // Click outside to close dropdowns
+  useEffect(() => {
+    if (!openDropdownId) return;
+    const handleClickOutside = (e) => {
+      if (barRef.current && !barRef.current.contains(e.target)) {
+        setOpenDropdownId(null);
+      }
+    };
+    window.addEventListener('mousedown', handleClickOutside, true);
+    window.addEventListener('pointerdown', handleClickOutside, true);
+    window.addEventListener('click', handleClickOutside, true);
+    return () => {
+      window.removeEventListener('mousedown', handleClickOutside, true);
+      window.removeEventListener('pointerdown', handleClickOutside, true);
+      window.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [openDropdownId]);
+
+  // 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}"]`) || bar.querySelector(`[data-active="true"]`);
+    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
+        ref={barRef}
+        style={{
+          display: 'inline-flex',
+          gap: 4,
+          background: 'var(--grey-1, #f5f5f8)',
+          borderRadius: 'var(--radxs, 6px)',
+          padding: '3px',
+          border: '1px solid var(--border-light, #ebebf0)',
+          position: 'relative',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}
+      >
+        {tabs.map(t => {
+          const hasItems = Array.isArray(t.items) && t.items.length > 0;
+          const activeSubItem = hasItems ? t.items.find(item => String(item.id) === String(active)) : null;
+          const isActive = (active != null && t.id != null && String(active) === String(t.id)) || !!activeSubItem;
+          const isOpen = openDropdownId === t.id;
+
+          const handleTabClick = () => {
+            if (t.disabled) return;
+            if (hasItems) {
+              setOpenDropdownId(isOpen ? null : t.id);
+            } else {
+              setOpenDropdownId(null);
+              onChange(t.id);
+            }
+          };
+
+          return (
+            <div key={t.id} style={{ position: 'relative' }}>
+              <button
+                type="button"
+                data-tabid={t.id}
+                data-active={isActive}
+                disabled={t.disabled}
+                onClick={handleTabClick}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 5,
+                  height: 26,
+                  padding: padding || '0 10px',
+                  border: 'none',
+                  borderRadius: 'var(--radxs, 6px)',
+                  background: isActive ? 'var(--surface,#fff)' : isOpen ? 'var(--grey-2, #e5e7eb)' : 'transparent',
+                  boxShadow: isActive ? '0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)' : 'none',
+                  fontSize: '.75rem', fontWeight: isActive ? 600 : 500,
+                  color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
+                  cursor: t.disabled ? 'not-allowed' : 'pointer',
+                  opacity: t.disabled ? 0.38 : 1,
+                  transition: 'all .18s ease',
+                  fontFamily: 'inherit',
+                  whiteSpace: 'nowrap',
+                  textTransform: capitalize ? 'capitalize' : 'none',
+                }}
+              >
+                {t.icon}{t.label}
+                {activeSubItem && (
+                  <span style={{
+                    fontSize: '.68rem',
+                    fontWeight: 600,
+                    color: 'var(--accent, #3b82f6)',
+                    background: 'var(--accent-bg, rgba(59,130,246,0.12))',
+                    padding: '1px 6px',
+                    borderRadius: 4,
+                    marginLeft: 2,
+                  }}>
+                    {activeSubItem.label}
+                  </span>
+                )}
+                {hasItems && <ChevronIcon isOpen={isOpen} />}
+                {t.count != null && t.count > 0 && (
+                  <span style={{
+                    background: isActive ? 'var(--accent-bg, rgba(249,158,44,.1))' : 'var(--grey-2, #d7d8e0)',
+                    color:      isActive ? 'var(--accent, #f99e2c)'    : 'var(--muted, #797b8d)',
+                    borderRadius: 10,
+                    padding: '1px 6px',
+                    fontSize: '.68rem',
+                    fontWeight: 600,
+                  }}>{t.count}</span>
+                )}
+              </button>
+
+              {/* Dropdown Menu for Pill Tab */}
+              {isOpen && hasItems && (
+                <div style={{
+                  position: 'absolute',
+                  top: 'calc(100% + 4px)',
+                  left: 0,
+                  zIndex: 9999,
+                  minWidth: 185,
+                  background: 'var(--surface, #fff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--radxs, 6px)',
+                  boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+                  padding: '4px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                }}>
+                  {t.items.map(subItem => {
+                    const isSubSelected = active === subItem.id;
+                    return (
+                      <button
+                        key={subItem.id}
+                        type="button"
+                        onClick={() => {
+                          onChange(subItem.id);
+                          setOpenDropdownId(null);
+                        }}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          padding: '6px 10px',
+                          fontSize: '.75rem',
+                          fontWeight: isSubSelected ? 600 : 400,
+                          color: isSubSelected ? 'var(--accent, #3b82f6)' : 'var(--primary-text, #0f111c)',
+                          background: isSubSelected ? 'var(--accent-bg, rgba(59,130,246,0.08))' : 'transparent',
+                          borderRadius: 4,
+                          border: 'none',
+                          cursor: 'pointer',
+                          textAlign: 'left',
+                          transition: 'background .15s',
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!isSubSelected) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)';
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!isSubSelected) e.currentTarget.style.background = 'transparent';
+                        }}
+                      >
+                        <span>{subItem.label}</span>
+                        {isSubSelected && <CheckIcon />}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Default: underline variant
+  const defaultPadding = padding || '10px 16px';
+
+  return (
+    <div ref={barRef} style={{ display:'flex', position:'relative', alignItems: 'center' }}>
+      <div ref={indRef} style={{
+        position:'absolute', bottom:'-1px', left:0,
+        height:2, width:0,
+        background:'var(--accent, #f99e2c)',
+        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 hasItems = Array.isArray(t.items) && t.items.length > 0;
+        const activeSubItem = hasItems ? t.items.find(item => String(item.id) === String(active)) : null;
+        const isActive = (active != null && t.id != null && String(active) === String(t.id)) || !!activeSubItem;
+        const isOpen = openDropdownId === t.id;
+
+        const handleTabClick = () => {
+          if (t.disabled) return;
+          if (hasItems) {
+            setOpenDropdownId(isOpen ? null : t.id);
+          } else {
+            setOpenDropdownId(null);
+            onChange(t.id);
+          }
+        };
+
+        return (
+          <div key={t.id} style={{ position: 'relative' }}>
+            <button
+              type="button"
+              data-tabid={t.id}
+              data-active={isActive}
+              disabled={t.disabled}
+              onClick={handleTabClick}
+              style={{
+                display:'flex', alignItems:'center', gap:6,
+                padding: defaultPadding,
+                border:'none', background:'none',
+                fontSize:'.82rem', fontWeight:500,
+                color: isActive ? 'var(--accent, #f99e2c)' : 'var(--muted, #797b8d)',
+                cursor: t.disabled ? 'not-allowed' : 'pointer',
+                opacity: t.disabled ? 0.38 : 1,
+                transition:'color .18s',
+                marginBottom:'-1px',
+                position:'relative', zIndex:1,
+                fontFamily:'inherit',
+                whiteSpace:'nowrap',
+                textTransform: capitalize ? 'capitalize' : 'none',
+              }}
+            >
+              {t.icon}{t.label}
+              {activeSubItem && (
+                <span style={{
+                  fontSize: '.68rem',
+                  fontWeight: 600,
+                  color: 'var(--accent, #3b82f6)',
+                  background: 'var(--accent-bg, rgba(59,130,246,0.12))',
+                  padding: '1px 6px',
+                  borderRadius: 4,
+                }}>
+                  {activeSubItem.label}
+                </span>
+              )}
+              {hasItems && <ChevronIcon isOpen={isOpen} />}
+              {t.count != null && t.count > 0 && (
+                <span style={{
+                  background: isActive ? 'var(--accent-bg, rgba(249,158,44,.1))' : 'var(--grey-1, #f5f5f8)',
+                  color:      isActive ? 'var(--accent, #f99e2c)'    : 'var(--muted, #797b8d)',
+                  borderRadius: 10,
+                  padding: '1px 6px',
+                  fontSize: '.68rem',
+                  transition: 'background .18s, color .18s',
+                }}>{t.count}</span>
+              )}
+            </button>
+
+            {/* Dropdown Menu for Underline Tab */}
+            {isOpen && hasItems && (
+              <div style={{
+                position: 'absolute',
+                top: 'calc(100% + 2px)',
+                left: 0,
+                zIndex: 9999,
+                minWidth: 190,
+                background: 'var(--surface, #fff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--radxs, 6px)',
+                boxShadow: '0 6px 20px rgba(0,0,0,0.12)',
+                padding: '4px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+              }}>
+                {t.items.map(subItem => {
+                  const isSubSelected = active === subItem.id;
+                  return (
+                    <button
+                      key={subItem.id}
+                      type="button"
+                      onClick={() => {
+                        onChange(subItem.id);
+                        setOpenDropdownId(null);
+                      }}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justify: 'space-between',
+                        padding: '6px 10px',
+                        fontSize: '.78rem',
+                        fontWeight: isSubSelected ? 600 : 400,
+                        color: isSubSelected ? 'var(--accent, #3b82f6)' : 'var(--primary-text, #0f111c)',
+                        background: isSubSelected ? 'var(--accent-bg, rgba(59,130,246,0.08))' : 'transparent',
+                        borderRadius: 4,
+                        border: 'none',
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                        transition: 'background .15s',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSubSelected) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)';
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSubSelected) e.currentTarget.style.background = 'transparent';
+                      }}
+                    >
+                      <span>{subItem.label}</span>
+                      {isSubSelected && <CheckIcon />}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/ui/components/Tabs.jsx

@@ -0,0 +1,29 @@
+export function Tabs({ tabs, value, onChange, style }) {
+  return (
+    <div style={{ display: 'inline-flex', gap: 3, background: 'var(--grey-1, #f5f5f8)', borderRadius: 'var(--radxs, 6px)', padding: '3px', border: '1px solid var(--border-light, #ebebf0)', ...style }}>
+      {tabs.map(t => {
+        const label = typeof t === 'string' ? t : t.label;
+        const key   = typeof t === 'string' ? t : t.value;
+        const active = key === value;
+        return (
+          <button key={key} onClick={() => onChange(key)} style={{
+            display: 'flex', alignItems: 'center', gap: 5,
+            padding: '5px 12px',
+            border: 'none',
+            borderRadius: 'var(--radxs, 6px)',
+            background: active ? 'var(--surface,#fff)' : 'transparent',
+            boxShadow: active ? 'var(--shadow, 0 1px 2px rgba(0,0,0,.06))' : 'none',
+            fontSize: '.75rem', fontWeight: active ? 600 : 500,
+            color: active ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
+            cursor: 'pointer',
+            transition: 'all .18s ease',
+            fontFamily: 'inherit',
+            whiteSpace: 'nowrap',
+          }}>
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}