cynx-ui 1.2.8 → 1.2.10

package/components/Badge.jsx

@@ -29,14 +29,15 @@ const SHAPES = {
 };
 
 const KEYFRAMES = `@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
-let styleInjected = false;
+let _id = 'cynx-badge-styles';
 
 function ensureStyles() {
-  if (styleInjected || typeof document === 'undefined') return;
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
   const tag = document.createElement('style');
+  tag.id = _id;
   tag.textContent = KEYFRAMES;
   document.head.appendChild(tag);
-  styleInjected = true;
 }
 
 const SIZE_MAP = {

package/components/Modal.jsx

@@ -81,15 +81,19 @@ const STYLES = `
 @keyframes modalCardOut { from { opacity:1; transform:scale(1) translateY(0) } to { opacity:0; transform:scale(.96) translateY(-8px) } }
 `;
 
-let injected = false;
+let _id = 'cynx-modal-styles';
 function ensureStyles() {
-  if (injected || typeof document === 'undefined') return;
+  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);
-  injected = true;
 }
 
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
 export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, bodyStyle }) {
   const [closing, setClosing] = useState(false);
   const mounted = useRef(open);

package/components/PulseDot.jsx

@@ -17,14 +17,15 @@ const SIZES = {
 };
 
 const KEYFRAMES = `@keyframes pdot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}`;
-let styleInjected = false;
+let _id = 'cynx-pulsedot-styles';
 
 function ensureStyles() {
-  if (styleInjected || typeof document === 'undefined') return;
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
   const tag = document.createElement('style');
+  tag.id = _id;
   tag.textContent = KEYFRAMES;
   document.head.appendChild(tag);
-  styleInjected = true;
 }
 
 export default function PulseDot({

package/components/Select.jsx

@@ -3,14 +3,15 @@ import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X } from 'lucide-react';
 
 const KEYFRAMES = `@keyframes selFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}`;
-let styleInjected = false;
+let _id = 'cynx-select-styles';
 
 function ensureStyles() {
-  if (styleInjected || typeof document === 'undefined') return;
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
   const tag = document.createElement('style');
+  tag.id = _id;
   tag.textContent = KEYFRAMES;
   document.head.appendChild(tag);
-  styleInjected = true;
 }
 
 export default function Select({

package/components/Skeleton.jsx

@@ -3,16 +3,19 @@ const STYLES = `
 .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}
 `;
-let styleInjected = false;
-
+let _id = 'cynx-skeleton-styles';
 function ensureStyles() {
-  if (styleInjected || typeof document === 'undefined') return;
+  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);
-  styleInjected = true;
 }
 
+// Auto-inject on module load so raw className="skeleton" works everywhere
+if (typeof document !== 'undefined') ensureStyles();
+
 const SK_BASE = {
   background: 'linear-gradient(90deg, var(--grey-1, #f0f1f5) 25%, var(--border-light, #e8e8ec) 50%, var(--grey-1, #f0f1f5) 75%)',
   backgroundSize: '600px 100%',

package/components/Spinner.jsx

@@ -1,14 +1,18 @@
 const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
 
-let injected = false;
+let _id = 'cynx-spinner-styles';
 function ensureStyles() {
-  if (injected || typeof document === 'undefined') return;
+  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);
-  injected = true;
 }
 
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
 export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
   ensureStyles();
   const s = inline ? 14 : size;

package/components/Toast.jsx

@@ -17,15 +17,19 @@ const STYLES = `
 @keyframes cx-toastSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
 `;
 
-let injected = false;
+let _id = 'cynx-toast-styles';
 function ensureStyles() {
-  if (injected || typeof document === 'undefined') return;
+  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);
-  injected = true;
 }
 
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
 // ── Module-level state ────────────────────────────────────────────────────────
 let _toasts = [];
 let _listeners = new Set();

package/package.json

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