cynx-ui 1.3.21 → 1.3.22

package/components/Select.jsx

@@ -2,6 +2,13 @@ import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } fr
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X } from 'lucide-react';
 
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, searchHeight: 22, searchFont: 10.5, itemMinHeight: 18, itemPadding: '3px 5px' },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, searchHeight: 26, searchFont: 11.5, itemMinHeight: 22, itemPadding: '4.5px 7px' },
+  md: { height: 32, fontSize: 13, paddingH: 10, searchHeight: 32, searchFont: 12.5, itemMinHeight: 28, itemPadding: '8px 10px' },
+  lg: { height: 36, fontSize: 14, paddingH: 14, searchHeight: 34, searchFont: 13, itemMinHeight: 32, itemPadding: '9px 12px' },
+};
+
 const KEYFRAMES = `
 @keyframes selFadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
 @keyframes selFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@@ -158,9 +165,10 @@ export default function Select({
 
   const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value !== undefined && value !== null ? [value] : []);
 
-  const heightVal = size === 'xs' ? 24 : size === 'sm' ? 28 : 32;
-  const paddingVal = size === 'xs' ? '0 6px' : size === 'sm' ? '0 8px' : '0 10px';
-  const fontSizeVal = size === 'xs' ? '11px' : size === 'sm' ? '11.5px' : '13px';
+  const s = SIZES[size] || SIZES.md;
+  const heightVal = s.height;
+  const paddingVal = `0 ${s.paddingH}px`;
+  const fontSizeVal = `${s.fontSize}px`;
 
   let radiusVal = rounded
     ? (typeof rounded === 'string'
@@ -168,7 +176,7 @@ export default function Select({
         : typeof rounded === 'number'
           ? `${rounded}px`
           : '6px')
-    : (size === 'xs' ? '4px' : size === 'sm' ? '6px' : 'var(--rmd,var(--rads, 8px))');
+    : (s.height <= 26 ? '4px' : s.height <= 28 ? '6px' : 'var(--rmd,var(--rads, 8px))');
 
   return (
     <div
@@ -310,13 +318,13 @@ export default function Select({
                 style={{
                   width: '100%',
                   boxSizing: 'border-box',
-                  padding: size === 'xs' ? '2px 5px' : size === 'sm' ? '3px 6px' : '7px 10px',
-                  height: size === 'xs' ? 22 : size === 'sm' ? 26 : 32,
+                  padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
+                  height: s.searchHeight,
                   background: 'var(--sf2,var(--grey-1, #f5f5f8))',
                   border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
-                  borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                  borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                   fontFamily: 'var(--f,var(--sans, inherit))',
-                  fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
+                  fontSize: `${s.searchFont}px`,
                   lineHeight: 1,
                   color: 'var(--t,var(--primary-text, #0f172a))',
                   outline: 'none',
@@ -339,13 +347,13 @@ export default function Select({
                     display: 'flex',
                     alignItems: 'center',
                     gap: 6,
-                    minHeight: size === 'xs' ? 18 : size === 'sm' ? 22 : 28,
-                    padding: size === 'xs' ? '3px 5px' : size === 'sm' ? '4.5px 7px' : '8px 10px',
-                    borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                    minHeight: s.itemMinHeight,
+                    padding: s.itemPadding,
+                    borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                     cursor: opt.disabled ? 'not-allowed' : 'pointer',
                     color: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--t,var(--primary-text, #0f172a))',
                     background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))' : undefined,
-                    fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
+                    fontSize: `${s.searchFont}px`,
                     fontWeight: 400,
                     transition: 'background .1s',
                     userSelect: 'none',

package/components/TimePicker.jsx

@@ -2,38 +2,27 @@ import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react
 import { createPortal } from 'react-dom';
 import { Clock, ChevronDown, ChevronUp, Check, X, Globe, List, Sliders } from 'lucide-react';
 
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, iconPadLeft: 22, noIconPadLeft: 6, clockSize: 12 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, iconPadLeft: 26, noIconPadLeft: 8, clockSize: 13 },
+  md: { height: 32, fontSize: 13, paddingH: 10, iconPadLeft: 28, noIconPadLeft: 10, clockSize: 14 },
+  lg: { height: 36, fontSize: 14, paddingH: 14, iconPadLeft: 32, noIconPadLeft: 12, clockSize: 16 },
+};
+
 const STYLES = `
-@keyframes cynxTimePickerPopIn {
-  0% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+@keyframes cynxTimePickerFadeInDown {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
-
-@keyframes cynxTimePickerPopOut {
-  0% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
+@keyframes cynxTimePickerFadeInUp {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .cynx-timepicker-drop {
-  animation: cynxTimePickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   will-change: opacity, transform;
 }
 
-.cynx-timepicker-drop.closing {
-  animation: cynxTimePickerPopOut 0.14s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
 .cynx-timepicker-cell {
   transition: background-color 0.12s ease, color 0.12s ease;
 }
@@ -176,7 +165,7 @@ export function TimePicker({
   timezone = 'Asia/Tashkent',
   label,
   placeholder,
-  size = 'sm',                 // 'xs' | 'sm' | 'md'
+  size = 'md',                 // 'xs' | 'sm' | 'md' | 'lg'
   disabled = false,
   readOnly = false,
   style = {},
@@ -184,8 +173,6 @@ export function TimePicker({
 }) {
   const displayClockIcon = showIcon && !hideIcon;
   const [open, setOpen] = useState(false);
-  const [rendered, setRendered] = useState(false);
-  const [closing, setClosing] = useState(false);
 
   const [activeVariant, setActiveVariant] = useState(variant);
   const [mode, setMode] = useState(format);
@@ -196,7 +183,7 @@ export function TimePicker({
   const dropRef = useRef(null);
   const isTypingRef = useRef(false);
 
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 230 });
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 230, openUp: false });
 
   ensureStyles();
 
@@ -204,22 +191,42 @@ export function TimePicker({
   useEffect(() => { setMode(format); }, [format]);
   useEffect(() => { setTz(timezone); }, [timezone]);
 
+  const calcPos = useCallback(() => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const dropW = mode === '12h' ? 290 : 230;
+    const dropEl = dropRef.current;
+    const dropH = dropEl ? dropEl.offsetHeight : 230;
+    const spaceBelow = window.innerHeight - r.bottom;
+    const spaceAbove = r.top;
+    const openUp = spaceBelow < Math.min(dropH, 230) + 12 && spaceAbove > spaceBelow;
+
+    let top;
+    if (openUp) {
+      top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropH) - 4);
+    } else {
+      top = Math.min(window.innerHeight - 40, r.bottom + 4);
+    }
+
+    let left = r.left;
+    if (left + dropW > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - dropW - 8);
+    }
+    if (left < 8) left = 8;
+
+    setPos({ top, left, width: Math.max(r.width, dropW), openUp });
+  }, [mode]);
+
   const openPicker = useCallback(() => {
     if (disabled || readOnly) return;
-    setRendered(true);
-    setClosing(false);
+    calcPos();
     setOpen(true);
-  }, [disabled, readOnly]);
+  }, [disabled, readOnly, calcPos]);
 
   const closePicker = useCallback(() => {
     if (!open) return;
-    setClosing(true);
     setOpen(false);
     setShowTzPicker(false);
-    setTimeout(() => {
-      setRendered(false);
-      setClosing(false);
-    }, 140);
   }, [open]);
 
   const togglePicker = useCallback(() => {
@@ -250,33 +257,15 @@ export function TimePicker({
     }
   }, [value, mode, showSeconds, formatOutput]);
 
-  const calcPos = useCallback(() => {
-    if (!btnRef.current) return;
-    const r = btnRef.current.getBoundingClientRect();
-    const dropW = mode === '12h' ? 290 : 230;
-    const dropH = dropRef.current ? dropRef.current.offsetHeight : 230;
-
-    let left = r.left;
-    if (left + dropW > window.innerWidth - 12) {
-      left = Math.max(12, r.right - dropW);
-    }
-    if (left < 12) left = 12;
-
-    let top = r.bottom + 4;
-    if (top + dropH > window.innerHeight - 12 && r.top - 4 - dropH > 12) {
-      top = r.top - 4 - dropH;
-    }
-
-    setPos({ top, left, width: Math.max(r.width, dropW) });
-  }, [mode]);
-
   useLayoutEffect(() => {
-    if (!rendered) return;
-    calcPos();
-  }, [rendered, calcPos]);
+    if (open) {
+      calcPos();
+      requestAnimationFrame(calcPos);
+    }
+  }, [open, calcPos]);
 
   useEffect(() => {
-    if (!rendered || closing) return;
+    if (!open) return;
     function onDown(e) {
       const inBtn = btnRef.current && btnRef.current.contains(e.target);
       const inDrop = dropRef.current && dropRef.current.contains(e.target);
@@ -284,18 +273,15 @@ export function TimePicker({
         closePicker();
       }
     }
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', onDown, true);
-    }, 0);
+    document.addEventListener('mousedown', onDown, true);
     window.addEventListener('scroll', calcPos, true);
     window.addEventListener('resize', calcPos);
     return () => {
-      clearTimeout(timer);
       document.removeEventListener('mousedown', onDown, true);
       window.removeEventListener('scroll', calcPos, true);
       window.removeEventListener('resize', calcPos);
     };
-  }, [rendered, closing, calcPos, closePicker]);
+  }, [open, closePicker, calcPos]);
 
   const emitChange = (parsedObj, useMode = mode) => {
     const formatted = formatOutput(parsedObj, useMode);
@@ -518,10 +504,11 @@ export function TimePicker({
   const fullMinutesList = Array.from({ length: 60 }, (_, i) => i);
 
 
+  const s = SIZES[size] || SIZES.md;
   const inputHeight = style?.height
     ? (typeof style.height === 'number' ? `${style.height}px` : style.height)
-    : (size === 'xs' ? '24px' : (size === 'sm' ? '32px' : '38px'));
-  const fontSize = (size === 'xs' || (style?.height && parseInt(style.height) <= 26)) ? '.72rem' : (size === 'sm' ? '.78rem' : '.85rem');
+    : `${s.height}px`;
+  const fontSize = `${s.fontSize}px`;
 
   return (
     <div
@@ -559,7 +546,7 @@ export function TimePicker({
               transition: 'color .15s ease',
             }}
           >
-            <Clock size={size === 'sm' ? 14 : 16} />
+            <Clock size={s.clockSize} />
           </button>
         )}
 
@@ -581,8 +568,8 @@ export function TimePicker({
             maxWidth: '100%',
             boxSizing: 'border-box',
             height: inputHeight,
-            paddingLeft: displayClockIcon ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
-            paddingRight: size === 'xs' ? 18 : 26,
+            paddingLeft: displayClockIcon ? s.iconPadLeft : s.noIconPadLeft,
+            paddingRight: s.height <= 26 ? 18 : 26,
             border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd, var(--border, #d7d8e0))'}`,
             borderRadius: 'var(--rads, 8px)',
             fontSize: fontSize,
@@ -603,47 +590,51 @@ export function TimePicker({
           }}
         />
 
-        <div style={{ position: 'absolute', right: 8, display: 'flex', alignItems: 'center' }}>
-          {inputValue && !disabled && !readOnly ? (
-            <button
-              type="button"
-              onClick={clearTime}
+        <div style={{ position: 'absolute', right: 8, display: 'flex', alignItems: 'center', gap: 4 }}>
+          {inputValue && !disabled && !readOnly && (
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                clearTime();
+              }}
               title="Очистить"
               style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--t2, var(--muted, #9b9daa))',
-                padding: 2,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                transition: 'color .14s ease',
+                cursor: 'pointer',
+                color: 'var(--t2, var(--muted, #9b9daa))',
+                padding: '0 2px',
+                flexShrink: 0,
               }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--danger, #f64747)'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--t2, var(--muted, #9b9daa))'}
             >
-              <X size={13} />
-            </button>
-          ) : (
-            <ChevronDown
-              size={13}
-              style={{
-                color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
-                transform: open ? 'rotate(180deg)' : 'none',
-                transition: 'transform .2s ease, color .15s ease',
-                pointerEvents: 'none',
-              }}
-            />
+              <X size={12} />
+            </span>
           )}
+          <ChevronDown
+            size={12}
+            style={{
+              flexShrink: 0,
+              color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
+              transition: 'transform .2s ease',
+              transform: open ? 'rotate(180deg)' : undefined,
+              cursor: 'pointer',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              togglePicker();
+            }}
+          />
         </div>
       </div>
 
       {/* PORTAL DROPDOWN POPUP */}
-      {rendered && createPortal(
+      {open && createPortal(
         <div
           ref={dropRef}
-          className={`cynx-timepicker-drop ${closing ? 'closing' : ''}`}
+          className="cynx-timepicker-drop"
           style={{
             position: 'fixed',
             top: pos.top,
@@ -660,6 +651,7 @@ export function TimePicker({
             fontSize: '.78rem',
             userSelect: 'none',
             fontFamily: 'var(--sans, inherit)',
+            animation: `${pos.openUp ? 'cynxTimePickerFadeInUp' : 'cynxTimePickerFadeInDown'} .15s ease`,
           }}
         >
           {/* Header Bar: Variant Switcher */}

package/index.js

@@ -1,97 +1,97 @@
-// 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 _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 _LinearProgress } from './components/LinearProgress.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 { Pagination as _Pagination } from './components/Pagination.jsx';
-import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
-import { TimePicker as _TimePicker } from './components/TimePicker.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';
-
-import { default as _FilePicker } from './components/FilePicker.jsx';
-import { default as _Divider } from './components/Divider.jsx';
-import { default as _InfoBadge } from './components/InfoBadge.jsx';
-
-export const Button = _Button;
-export const FilePicker = _FilePicker;
-export const Divider = _Divider;
-export const InfoBadge = _InfoBadge;
-export const Input = _Input;
-export const Toggle = _Toggle;
-export const Spinner = _Spinner || _SpinnerNamed;
-export const TabBar = _TabBar;
-export const ImageUpload = _ImageUpload;
-export const ChipSelect = _ChipSelect;
-export const Checkbox = _Checkbox;
-export const AuthOverlay = _AuthOverlay;
-export const UptimeBar = _UptimeBar;
-export const LinearProgress = _LinearProgress;
-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 Pagination = _Pagination;
-export const DatePicker = _DatePicker;
-export const TimePicker = _TimePicker;
-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 _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 _LinearProgress } from './components/LinearProgress.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 { Pagination as _Pagination } from './components/Pagination.jsx';
+import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
+import { TimePicker as _TimePicker } from './components/TimePicker.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';
+
+import { default as _FilePicker } from './components/FilePicker.jsx';
+import { default as _Divider } from './components/Divider.jsx';
+import { default as _InfoBadge } from './components/InfoBadge.jsx';
+
+export const Button = _Button;
+export const FilePicker = _FilePicker;
+export const Divider = _Divider;
+export const InfoBadge = _InfoBadge;
+export const Input = _Input;
+export const Toggle = _Toggle;
+export const Spinner = _Spinner || _SpinnerNamed;
+export const TabBar = _TabBar;
+export const ImageUpload = _ImageUpload;
+export const ChipSelect = _ChipSelect;
+export const Checkbox = _Checkbox;
+export const AuthOverlay = _AuthOverlay;
+export const UptimeBar = _UptimeBar;
+export const LinearProgress = _LinearProgress;
+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 Pagination = _Pagination;
+export const DatePicker = _DatePicker;
+export const TimePicker = _TimePicker;
+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;

package/package.json

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