cynx-ui 1.3.26 → 1.3.27

package/components/Skeleton.jsx

@@ -1,5 +1,6 @@
 const STYLES = `
 @keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
 .skeleton{background:linear-gradient(90deg,var(--grey-1,#f0f1f5) 25%,var(--border-light,#e8e8ec) 50%,var(--grey-1,#f0f1f5) 75%);background-size:600px 100%;animation:sk-shimmer 1.4s ease infinite;border-radius:var(--radxs,4px)}
 .skeleton-text{height:12px;margin-bottom:6px}
 `;

package/components/XTable.jsx

@@ -13,7 +13,23 @@ export function XTd({ children, style, className = '', colSpan }) {
   return <td style={{ padding: '9px 10px', verticalAlign: 'middle', color: 'var(--primary-text, #0f111c)', ...style }} colSpan={colSpan}>{children}</td>;
 }
 
+const SKELETON_STYLES = `
+@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+@keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+`;
+let _tbl_sk_id = 'cynx-table-skeleton-styles';
+function ensureSkeletonStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_tbl_sk_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _tbl_sk_id;
+  tag.textContent = SKELETON_STYLES;
+  document.head.appendChild(tag);
+}
+if (typeof document !== 'undefined') ensureSkeletonStyles();
+
 export function SkeletonTable({ rows = 6, cols = 5 }) {
+  ensureSkeletonStyles();
   return (
     <div>
       {Array.from({ length: rows }).map((_, i) => (

package/package.json

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