cynx-ui 1.2.9 → 1.2.11

package/components/Input.jsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 const SIZES = {
   xs: { height: 30, fontSize: 11, paddingH: 8 },
@@ -24,6 +24,8 @@ export default function Input({
   ...props
 }) {
   const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const s = SIZES[size] || SIZES.md;
 
   function handleClear() {
@@ -99,8 +101,8 @@ export default function Input({
           style={{
             display: 'block',
             width: '100%',
-            background: 'var(--input-bg,#fff)',
-            border: `1px solid ${error ? 'var(--danger,#f64747)' : 'var(--bd,#d7d8e0)'}`,
+            background: props.disabled ? 'var(--grey-1,#f5f5f8)' : 'var(--input-bg,#fff)',
+            border: `1px solid ${error ? 'var(--danger,#f64747)' : focused ? 'var(--accent,#f99e2c)' : hovered ? 'var(--accent,#f99e2c)' : 'var(--bd,#d7d8e0)'}`,
             borderRadius: 'var(--rads,8px)',
             color: 'var(--t1,#1a1a2e)',
             fontFamily: 'var(--f,var(--sans,inherit))',
@@ -113,13 +115,18 @@ export default function Input({
             transition: 'border-color .14s, box-shadow .14s',
             boxShadow: error
               ? '0 0 0 3px rgba(246,71,71,.12), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+              : focused
+              ? '0 0 0 3px rgba(249,158,44,.12), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
               : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             opacity: props.disabled ? 0.5 : 1,
             cursor: props.disabled ? 'not-allowed' : undefined,
-            background: props.disabled ? 'var(--grey-1,#f5f5f8)' : undefined,
             ...style,
           }}
           value={value}
+          onFocus={e => { setFocused(true); props.onFocus?.(e); }}
+          onBlur={e => { setFocused(false); props.onBlur?.(e); }}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
           {...props}
         />
 

package/components/Modal.jsx

@@ -91,6 +91,9 @@ function ensureStyles() {
   document.head.appendChild(tag);
 }
 
+// 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/Skeleton.jsx

@@ -13,6 +13,9 @@ function ensureStyles() {
   document.head.appendChild(tag);
 }
 
+// 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

@@ -10,6 +10,9 @@ function ensureStyles() {
   document.head.appendChild(tag);
 }
 
+// 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

@@ -27,6 +27,9 @@ function ensureStyles() {
   document.head.appendChild(tag);
 }
 
+// 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.9",
+  "version": "1.2.11",
   "type": "module",
   "exports": {
     ".": "./index.js"