cynx-ui 1.0.0

package/Tabs.jsx

@@ -0,0 +1,16 @@
+export function Tabs({ tabs, value, onChange, style }) {
+  return (
+    <div className="xtabs" style={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} className={`xtab${active ? ' active' : ''}`} onClick={() => onChange(key)}>
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/Toast.jsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+// ── Module-level state ────────────────────────────────────────────────────────
+let _toasts = [];
+let _listeners = new Set();
+
+function notify() {
+  const snapshot = [..._toasts];
+  _listeners.forEach(fn => fn(snapshot));
+}
+
+// Global toast — call from anywhere, no hook needed
+export function toast(msg, type = 'ok') {
+  const id = Date.now() + Math.random();
+  _toasts = [..._toasts, { id, msg, type }];
+  notify();
+  setTimeout(() => {
+    _toasts = _toasts.filter(t => t.id !== id);
+    notify();
+  }, 3500);
+}
+
+// ── Hook — for components that want reactive state ────────────────────────────
+export function useToast() {
+  const [toasts, setToasts] = useState(_toasts);
+
+  useEffect(() => {
+    _listeners.add(setToasts);
+    return () => _listeners.delete(setToasts);
+  }, []);
+
+  const remove = useCallback(id => {
+    _toasts = _toasts.filter(t => t.id !== id);
+    notify();
+  }, []);
+
+  return { toasts, toast, remove };
+}
+
+// ── Render component ──────────────────────────────────────────────────────────
+export function Toast({ toasts, remove }) {
+  return createPortal(
+    <div id="toast-root">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
+          {t.type === 'ok'
+            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
+            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+          }
+          {t.msg}
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+}

package/Toggle.jsx

@@ -0,0 +1,58 @@
+const STYLES = `
+.tgl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
+.tgl input{position:absolute;opacity:0;width:0;height:0}
+.tgl-tr{position:relative;border-radius:var(--rfull,99px);transition:background .2s ease;flex-shrink:0;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
+.tgl-th{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .25s cubic-bezier(.34,1.56,.64,1)}
+.tgl-sm .tgl-tr{width:28px;height:16px}
+.tgl-sm .tgl-th{width:12px;height:12px;left:2px}
+.tgl-sm input:checked~.tgl-tr .tgl-th{left:14px}
+.tgl-md .tgl-tr{width:34px;height:18px}
+.tgl-md .tgl-th{width:14px;height:14px;left:2px}
+.tgl-md input:checked~.tgl-tr .tgl-th{left:18px}
+.tgl-lg .tgl-tr{width:44px;height:24px}
+.tgl-lg .tgl-th{width:18px;height:18px;left:3px}
+.tgl-lg input:checked~.tgl-tr .tgl-th{left:23px}
+.tgl:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
+`;
+
+const COLORS = {
+  primary: 'var(--accent)',
+  success: 'var(--success)',
+  warning: '#f59e0b',
+  danger:  'var(--danger)',
+};
+
+let styleInjected = false;
+
+export default function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'md',
+  color = 'primary',
+  label = null,
+  labelStyle = {},
+  onClick = null,
+  className = '',
+  style = {},
+}) {
+  if (!styleInjected && typeof document !== 'undefined') {
+    const tag = document.createElement('style');
+    tag.textContent = STYLES;
+    document.head.appendChild(tag);
+    styleInjected = true;
+  }
+
+  const sizeClass = size !== 'md' ? ` tgl-${size}` : '';
+  const classes = `tgl${sizeClass}${className ? ' ' + className : ''}`;
+  const trackColor = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
+
+  return (
+    <label className={classes} style={style} onClick={onClick}>
+      <input type="checkbox" checked={checked} disabled={disabled}
+        onChange={e => onChange?.(e.target.checked)} />
+      <span className="tgl-tr" style={{ background: trackColor }}><span className="tgl-th" /></span>
+      {label && <span style={labelStyle}>{label}</span>}
+    </label>
+  );
+}

package/UptimeBar.jsx

@@ -0,0 +1,200 @@
+import { useMemo, useState, useRef } from 'react';
+
+const card = {
+  background: '#fff',
+  border: '1px solid var(--border)',
+  borderRadius: 'var(--rad)',
+  boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+};
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function formatDate(date) {
+  return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
+}
+
+export default function UptimeBar({
+  title = 'Uptime',
+  subtitle,
+  successValues = [],
+  failedValues = [],
+  totalSlots = 90,
+  greenColor = 'var(--success)',
+  redColor = 'var(--danger)',
+  emptyColor = 'var(--grey-1)',
+  barHeight = 28,
+  barRadius = 3,
+  leftLabel,
+  rightLabel,
+  showDot = true,
+  dotColor,
+  style,
+}) {
+  const [hovered, setHovered] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+
+  const bars = useMemo(() => {
+    const len = Math.max(successValues.length, failedValues.length, totalSlots);
+    const result = [];
+    const stepS = successValues.length / len;
+    const stepF = failedValues.length / len;
+    for (let i = 0; i < len; i++) {
+      const si = Math.min(Math.floor(i * stepS), successValues.length - 1);
+      const fi = Math.min(Math.floor(i * stepF), failedValues.length - 1);
+      const s = successValues[si] || 0;
+      const f = failedValues[fi] || 0;
+      result.push({ success: s, failed: f });
+    }
+    return result;
+  }, [successValues, failedValues, totalSlots]);
+
+  const dates = useMemo(() => {
+    const result = [];
+    const now = new Date();
+    for (let i = 0; i < bars.length; i++) {
+      const d = new Date(now);
+      d.setDate(d.getDate() - (bars.length - 1 - i));
+      result.push(d);
+    }
+    return result;
+  }, [bars.length]);
+
+  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
+  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
+  const totalAll = totalSuccess + totalFailed;
+  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
+
+  function handleMouseEnter(e, idx) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+    setTooltipPos({
+      x: rect.left - containerRect.left + rect.width / 2,
+      y: rect.top - containerRect.top - 8,
+    });
+    setHovered(idx);
+  }
+
+  return (
+    <div ref={containerRef} style={{ ...card, padding: '14px 18px 14px', position: 'relative', ...style }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {showDot && (
+            <span style={{
+              width: 8, height: 8, borderRadius: '50%',
+              background: dotColor || greenColor, flexShrink: 0,
+            }} />
+          )}
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
+          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
+        </div>
+        {/* Legend */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <LegendDot color={greenColor} label="Success" />
+          <LegendDot color={redColor} label="Failed" />
+          <LegendDot color={emptyColor} label="None" />
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
+        {bars.map((b, i) => {
+          const total = b.success + b.failed;
+          const hasData = total > 0;
+          const successPct = hasData ? (b.success / total) * 100 : 0;
+          const failedPct = hasData ? (b.failed / total) * 100 : 0;
+
+          return (
+            <div
+              key={i}
+              onMouseEnter={(e) => handleMouseEnter(e, i)}
+              onMouseLeave={() => setHovered(null)}
+              style={{
+                flex: 1,
+                height: '100%',
+                borderRadius: barRadius,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+                background: hasData ? 'transparent' : emptyColor,
+              }}
+            >
+              {hasData && (
+                <>
+                  {/* Failed on bottom */}
+                  {b.failed > 0 && (
+                    <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />
+                  )}
+                  {/* Success on top */}
+                  {b.success > 0 && (
+                    <div style={{ height: `${successPct}%`, background: greenColor }} />
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Tooltip */}
+      {hovered !== null && (
+        <div style={{
+          position: 'absolute',
+          left: tooltipPos.x,
+          top: tooltipPos.y,
+          transform: 'translate(-50%, -100%)',
+          background: '#fff',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--rads)',
+          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          padding: '8px 12px',
+          pointerEvents: 'none',
+          zIndex: 100,
+          whiteSpace: 'nowrap',
+        }}>
+          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+            {formatDate(dates[hovered])}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {bars[hovered].success > 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
+                {bars[hovered].success} success login{bars[hovered].success !== 1 ? 's' : ''}
+                {bars[hovered].failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+              </div>
+            )}
+            {bars[hovered].failed > 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
+                {bars[hovered].failed} failed login{bars[hovered].failed !== 1 ? 's' : ''}
+                {bars[hovered].success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+              </div>
+            )}
+            {bars[hovered].success === 0 && bars[hovered].failed === 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>
+                No logins
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
+        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>
+          {uptimePercent}%
+        </span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
+      </div>
+    </div>
+  );
+}
+
+function LegendDot({ color, label }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
+      <span style={{ fontSize: '.55rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+    </div>
+  );
+}

package/XTable.jsx

@@ -0,0 +1,22 @@
+export function XTable({ children, style }) { return <table className="x-table" style={style}>{children}</table>; }
+export function XThead({ children }) { return <thead>{children}</thead>; }
+export function XTbody({ children }) { return <tbody>{children}</tbody>; }
+export function XTr({ children, onClick }) { return <tr className="x-tr" onClick={onClick}>{children}</tr>; }
+export function XTh({ children, style }) { return <th className="x-th" style={style}>{children}</th>; }
+export function XTd({ children, style, className = '', colSpan }) {
+  return <td className={`x-td ${className}`} style={style} colSpan={colSpan}>{children}</td>;
+}
+
+export function SkeletonTable({ rows = 6, cols = 5 }) {
+  return (
+    <div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="skeleton-row">
+          {Array.from({ length: cols }).map((_, j) => (
+            <div key={j} className={`skeleton skeleton-text ${j === 0 ? 'short' : j === cols - 1 ? 'short' : 'mid'}`} style={{ flex: 1 }} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/index.js

@@ -0,0 +1,45 @@
+// cynx-ui — shared component library
+// Re-exports every component so consumers can do:
+//   import { Button, Modal, Toast } from 'cynx-ui'
+
+export { default as Button } from './Button.jsx';
+export { default as Input } from './Input.jsx';
+export { default as Layout } from './Layout.jsx';
+export { default as Toggle } from './Toggle.jsx';
+export { default as Spinner } from './Spinner.jsx';
+export { default as TabBar } from './TabBar.jsx';
+export { default as Dropdown } from './Dropdown.jsx';
+export { default as Notifications } from './Notifications.jsx';
+export { default as MultiSelect } from './MultiSelect.jsx';
+export { default as ImageUpload } from './ImageUpload.jsx';
+export { default as DeleteConfirmModal } from './DeleteConfirmModal.jsx';
+export { default as ChipSelect } from './ChipSelect.jsx';
+export { default as Checkbox } from './Checkbox.jsx';
+export { default as AuthOverlay } from './AuthOverlay.jsx';
+export { default as UptimeBar } from './UptimeBar.jsx';
+export { default as LineProgress } from './LineProgress.jsx';
+export { default as StatBarCard } from './StatBarCard.jsx';
+export { default as StatsCard } from './StatsCard.jsx';
+export { default as ActivityCard } from './ActivityCard.jsx';
+export { default as HoverCard } from './HoverCard.jsx';
+export { default as StatsBar } from './StatsBar.jsx';
+export { default as Select } from './Select.jsx';
+export { default as Card } from './Card.jsx';
+export { default as Badge } from './Badge.jsx';
+export { default as PulseDot } from './PulseDot.jsx';
+export { default as CircularProgress } from './CircularProgress.jsx';
+export { default as Skeleton } from './Skeleton.jsx';
+
+export { Modal, Confirm } from './Modal.jsx';
+export { toast, useToast, Toast } from './Toast.jsx';
+export { ConfirmRoot, confirm } from './Confirm.jsx';
+export { SearchableDropdown } from './SearchableDropdown.jsx';
+export { Pagination } from './Pagination.jsx';
+export { DatePicker } from './DatePicker.jsx';
+export { ActionsMenu } from './ActionsMenu.jsx';
+export { BrandingCard } from './BrandingCard.jsx';
+export { Dropzone } from './Dropzone.jsx';
+export { Tabs } from './Tabs.jsx';
+export { SkeletonText, SkeletonCard, SkeletonRows, SkeletonStats } from './Skeleton.jsx';
+export { XTable, XThead, XTbody, XTr, XTh, XTd, SkeletonTable } from './XTable.jsx';
+export { PageShell, TableCard, TableCardFilters, TableCardBody, TableCardFooter, CardHdr, StatCard, StatCardSkeleton } from './Card.jsx';

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "cynx-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*.jsx"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6",
+    "lucide-react": ">=0.400"
+  },
+  "files": [
+    "*.jsx",
+    "index.js"
+  ]
+}