cynx-ui 1.2.6 → 1.2.8

package/components/UptimeBar.jsx

@@ -1,200 +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>
-  );
-}
+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/components/XTable.jsx

@@ -1,22 +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>
-  );
-}
+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

@@ -1,94 +1,94 @@
-// cynx-ui — shared component library
-import { default as _Button } from './components/Button.jsx';
-import { default as _Input } from './components/Input.jsx';
-import { default as _Toggle } from './components/Toggle.jsx';
-import { default as _Spinner, Spinner as _SpinnerNamed } from './components/Spinner.jsx';
-import { default as _TabBar } from './components/TabBar.jsx';
-import { default as _Dropdown } from './components/Dropdown.jsx';
-import { default as _MultiSelect } from './components/MultiSelect.jsx';
-import { default as _ImageUpload } from './components/ImageUpload.jsx';
-import { default as _ChipSelect } from './components/ChipSelect.jsx';
-import { default as _Checkbox } from './components/Checkbox.jsx';
-import { default as _AuthOverlay } from './components/AuthOverlay.jsx';
-import { default as _UptimeBar } from './components/UptimeBar.jsx';
-import { default as _LineProgress } from './components/LineProgress.jsx';
-import { default as _StatBarCard } from './components/StatBarCard.jsx';
-import { default as _StatsCard } from './components/StatsCard.jsx';
-import { default as _ActivityCard } from './components/ActivityCard.jsx';
-import { default as _HoverCard } from './components/HoverCard.jsx';
-import { default as _StatsBar } from './components/StatsBar.jsx';
-import { default as _Select } from './components/Select.jsx';
-import { default as _Badge } from './components/Badge.jsx';
-import { default as _PulseDot } from './components/PulseDot.jsx';
-import { default as _CircularProgress } from './components/CircularProgress.jsx';
-import { default as _Skeleton } from './components/Skeleton.jsx';
-import { Modal as _Modal, Confirm as _Confirm } from './components/Modal.jsx';
-import { toast as _toast, useToast as _useToast, Toast as _Toast } from './components/Toast.jsx';
-import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/Confirm.jsx';
-import { SearchableDropdown as _SearchableDropdown } from './components/SearchableDropdown.jsx';
-import { Pagination as _Pagination } from './components/Pagination.jsx';
-import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
-import { ActionsMenu as _ActionsMenu } from './components/ActionsMenu.jsx';
-import { BrandingCard as _BrandingCard } from './components/BrandingCard.jsx';
-import { Dropzone as _Dropzone } from './components/Dropzone.jsx';
-import { Tabs as _Tabs } from './components/Tabs.jsx';
-import { SkeletonText as _SkeletonText, SkeletonCard as _SkeletonCard, SkeletonRows as _SkeletonRows, SkeletonStats as _SkeletonStats } from './components/Skeleton.jsx';
-import { XTable as _XTable, XThead as _XThead, XTbody as _XTbody, XTr as _XTr, XTh as _XTh, XTd as _XTd, SkeletonTable as _SkeletonTable } from './components/XTable.jsx';
-import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _TableCardFilters, TableCardBody as _TableCardBody, TableCardFooter as _TableCardFooter, CardHdr as _CardHdr, StatCard as _StatCard, StatCardSkeleton as _StatCardSkeleton } from './components/Card.jsx';
-
-export const Button = _Button;
-export const Input = _Input;
-export const Toggle = _Toggle;
-export const Spinner = _Spinner || _SpinnerNamed;
-export const TabBar = _TabBar;
-export const Dropdown = _Dropdown;
-export const MultiSelect = _MultiSelect;
-export const ImageUpload = _ImageUpload;
-export const ChipSelect = _ChipSelect;
-export const Checkbox = _Checkbox;
-export const AuthOverlay = _AuthOverlay;
-export const UptimeBar = _UptimeBar;
-export const LineProgress = _LineProgress;
-export const StatBarCard = _StatBarCard;
-export const StatsCard = _StatsCard;
-export const ActivityCard = _ActivityCard;
-export const HoverCard = _HoverCard;
-export const StatsBar = _StatsBar;
-export const Select = _Select;
-export const Badge = _Badge;
-export const PulseDot = _PulseDot;
-export const CircularProgress = _CircularProgress;
-export const Skeleton = _Skeleton;
-export const Modal = _Modal;
-export const Confirm = _Confirm;
-export const toast = _toast;
-export const useToast = _useToast;
-export const Toast = _Toast;
-export const ConfirmRoot = _ConfirmRoot;
-export const confirm = _confirm;
-export const SearchableDropdown = _SearchableDropdown;
-export const Pagination = _Pagination;
-export const DatePicker = _DatePicker;
-export const ActionsMenu = _ActionsMenu;
-export const BrandingCard = _BrandingCard;
-export const Dropzone = _Dropzone;
-export const Tabs = _Tabs;
-export const SkeletonText = _SkeletonText;
-export const SkeletonCard = _SkeletonCard;
-export const SkeletonRows = _SkeletonRows;
-export const SkeletonStats = _SkeletonStats;
-export const XTable = _XTable;
-export const XThead = _XThead;
-export const XTbody = _XTbody;
-export const XTr = _XTr;
-export const XTh = _XTh;
-export const XTd = _XTd;
-export const SkeletonTable = _SkeletonTable;
-export const PageShell = _PageShell;
-export const TableCard = _TableCard;
-export const TableCardFilters = _TableCardFilters;
-export const TableCardBody = _TableCardBody;
-export const TableCardFooter = _TableCardFooter;
-export const CardHdr = _CardHdr;
-export const StatCard = _StatCard;
-export const StatCardSkeleton = _StatCardSkeleton;
+// cynx-ui — shared component library
+import { default as _Button } from './components/Button.jsx';
+import { default as _Input } from './components/Input.jsx';
+import { default as _Toggle } from './components/Toggle.jsx';
+import { default as _Spinner, Spinner as _SpinnerNamed } from './components/Spinner.jsx';
+import { default as _TabBar } from './components/TabBar.jsx';
+import { default as _Dropdown } from './components/Dropdown.jsx';
+import { default as _MultiSelect } from './components/MultiSelect.jsx';
+import { default as _ImageUpload } from './components/ImageUpload.jsx';
+import { default as _ChipSelect } from './components/ChipSelect.jsx';
+import { default as _Checkbox } from './components/Checkbox.jsx';
+import { default as _AuthOverlay } from './components/AuthOverlay.jsx';
+import { default as _UptimeBar } from './components/UptimeBar.jsx';
+import { default as _LineProgress } from './components/LineProgress.jsx';
+import { default as _StatBarCard } from './components/StatBarCard.jsx';
+import { default as _StatsCard } from './components/StatsCard.jsx';
+import { default as _ActivityCard } from './components/ActivityCard.jsx';
+import { default as _HoverCard } from './components/HoverCard.jsx';
+import { default as _StatsBar } from './components/StatsBar.jsx';
+import { default as _Select } from './components/Select.jsx';
+import { default as _Badge } from './components/Badge.jsx';
+import { default as _PulseDot } from './components/PulseDot.jsx';
+import { default as _CircularProgress } from './components/CircularProgress.jsx';
+import { default as _Skeleton } from './components/Skeleton.jsx';
+import { Modal as _Modal, Confirm as _Confirm } from './components/Modal.jsx';
+import { toast as _toast, useToast as _useToast, Toast as _Toast } from './components/Toast.jsx';
+import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/Confirm.jsx';
+import { SearchableDropdown as _SearchableDropdown } from './components/SearchableDropdown.jsx';
+import { Pagination as _Pagination } from './components/Pagination.jsx';
+import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
+import { ActionsMenu as _ActionsMenu } from './components/ActionsMenu.jsx';
+import { BrandingCard as _BrandingCard } from './components/BrandingCard.jsx';
+import { Dropzone as _Dropzone } from './components/Dropzone.jsx';
+import { Tabs as _Tabs } from './components/Tabs.jsx';
+import { SkeletonText as _SkeletonText, SkeletonCard as _SkeletonCard, SkeletonRows as _SkeletonRows, SkeletonStats as _SkeletonStats } from './components/Skeleton.jsx';
+import { XTable as _XTable, XThead as _XThead, XTbody as _XTbody, XTr as _XTr, XTh as _XTh, XTd as _XTd, SkeletonTable as _SkeletonTable } from './components/XTable.jsx';
+import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _TableCardFilters, TableCardBody as _TableCardBody, TableCardFooter as _TableCardFooter, CardHdr as _CardHdr, StatCard as _StatCard, StatCardSkeleton as _StatCardSkeleton } from './components/Card.jsx';
+
+export const Button = _Button;
+export const Input = _Input;
+export const Toggle = _Toggle;
+export const Spinner = _Spinner || _SpinnerNamed;
+export const TabBar = _TabBar;
+export const Dropdown = _Dropdown;
+export const MultiSelect = _MultiSelect;
+export const ImageUpload = _ImageUpload;
+export const ChipSelect = _ChipSelect;
+export const Checkbox = _Checkbox;
+export const AuthOverlay = _AuthOverlay;
+export const UptimeBar = _UptimeBar;
+export const LineProgress = _LineProgress;
+export const StatBarCard = _StatBarCard;
+export const StatsCard = _StatsCard;
+export const ActivityCard = _ActivityCard;
+export const HoverCard = _HoverCard;
+export const StatsBar = _StatsBar;
+export const Select = _Select;
+export const Badge = _Badge;
+export const PulseDot = _PulseDot;
+export const CircularProgress = _CircularProgress;
+export const Skeleton = _Skeleton;
+export const Modal = _Modal;
+export const Confirm = _Confirm;
+export const toast = _toast;
+export const useToast = _useToast;
+export const Toast = _Toast;
+export const ConfirmRoot = _ConfirmRoot;
+export const confirm = _confirm;
+export const SearchableDropdown = _SearchableDropdown;
+export const Pagination = _Pagination;
+export const DatePicker = _DatePicker;
+export const ActionsMenu = _ActionsMenu;
+export const BrandingCard = _BrandingCard;
+export const Dropzone = _Dropzone;
+export const Tabs = _Tabs;
+export const SkeletonText = _SkeletonText;
+export const SkeletonCard = _SkeletonCard;
+export const SkeletonRows = _SkeletonRows;
+export const SkeletonStats = _SkeletonStats;
+export const XTable = _XTable;
+export const XThead = _XThead;
+export const XTbody = _XTbody;
+export const XTr = _XTr;
+export const XTh = _XTh;
+export const XTd = _XTd;
+export const SkeletonTable = _SkeletonTable;
+export const PageShell = _PageShell;
+export const TableCard = _TableCard;
+export const TableCardFilters = _TableCardFilters;
+export const TableCardBody = _TableCardBody;
+export const TableCardFooter = _TableCardFooter;
+export const CardHdr = _CardHdr;
+export const StatCard = _StatCard;
+export const StatCardSkeleton = _StatCardSkeleton;