cynx-ui 1.2.7 → 1.2.9

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,13 +81,14 @@ 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;
 }
 
 export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, bodyStyle }) {

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

@@ -1,12 +1,16 @@
-const KEYFRAMES = `@keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}`;
-let styleInjected = false;
-
+const STYLES = `
+@keyframes sk-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}
+`;
+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.textContent = KEYFRAMES;
+  tag.id = _id;
+  tag.textContent = STYLES;
   document.head.appendChild(tag);
-  styleInjected = true;
 }
 
 const SK_BASE = {

package/components/Spinner.jsx

@@ -1,36 +1,49 @@
-export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
-  const s = inline ? 14 : size;
-  const svg = (
-    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
-      stroke={color} strokeWidth="2.5" strokeLinecap="round">
-      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
-    </svg>
-  );
-
-  if (fullPage) {
-    return (
-      <div style={{
-        position: 'fixed', inset: 0,
-        background: 'var(--bg)',
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center', gap: 16,
-        zIndex: 9999,
-      }}>
-        {svg}
-        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
-          Loading...
-        </div>
-      </div>
-    );
-  }
-
-  if (inline) return svg;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
-      {svg}
-    </div>
-  );
-}
-
-export default Spinner;
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
+
+let _id = 'cynx-spinner-styles';
+function ensureStyles() {
+  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);
+}
+
+export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  const s = inline ? 14 : size;
+  const svg = (
+    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
+      stroke={color} strokeWidth="2.5" strokeLinecap="round">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>
+  );
+
+  if (fullPage) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--bg)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        {svg}
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) return svg;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      {svg}
+    </div>
+  );
+}
+
+export default Spinner;

package/components/Toast.jsx

@@ -1,57 +1,85 @@
-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
-  );
-}
+import { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+const STYLES = `
+#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 99999; }
+.toast {
+  background: var(--surface, #fff); border: 1px solid var(--border, #d7d8e0);
+  border-radius: var(--rads, 8px); padding: 10px 14px;
+  font-size: .78rem; display: flex; align-items: center; gap: 8px;
+  box-shadow: 0px 40px 100px 0px rgba(0,0,0,.15); max-width: 300px;
+  color: var(--primary-text, #0f111c); font-weight: 500;
+  animation: cx-toastSlide .18s ease;
+  cursor: pointer;
+}
+.toast.ok  { border-left: 3px solid var(--success, #27ae60); }
+.toast.err { border-left: 3px solid var(--danger, #f64747); }
+@keyframes cx-toastSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
+`;
+
+let _id = 'cynx-toast-styles';
+function ensureStyles() {
+  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);
+}
+
+// ── 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') {
+  ensureStyles();
+  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 }) {
+  ensureStyles();
+  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/package.json

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