cynx-ui 1.2.6 → 1.2.7

package/components/Dropzone.jsx

@@ -1,29 +1,29 @@
-import { useState, useRef } from 'react';
-
-export function Dropzone({ onFile, accept, hint, file }) {
-  const [over, setOver] = useState(false);
-  const inputRef = useRef(null);
-  return (
-    <div className={`dropzone${over ? ' over' : ''}`}
-      onDragOver={e => { e.preventDefault(); setOver(true); }}
-      onDragLeave={() => setOver(false)}
-      onDrop={e => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
-      onClick={() => inputRef.current?.click()}>
-      <input ref={inputRef} type="file" accept={accept}
-        onChange={e => e.target.files[0] && onFile(e.target.files[0])} style={{ display: 'none' }} />
-      <div className="dropzone-icon">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--grey-3)" strokeWidth="1.5" strokeLinecap="round">
-          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
-        </svg>
-      </div>
-      {file ? (
-        <div className="dropzone-file">{file.name}</div>
-      ) : (
-        <>
-          <div className="dropzone-text"><b>Click to select</b> or drag &amp; drop</div>
-          {hint && <div className="dropzone-hint">{hint}</div>}
-        </>
-      )}
-    </div>
-  );
-}
+import { useState, useRef } from 'react';
+
+export function Dropzone({ onFile, accept, hint, file }) {
+  const [over, setOver] = useState(false);
+  const inputRef = useRef(null);
+  return (
+    <div className={`dropzone${over ? ' over' : ''}`}
+      onDragOver={e => { e.preventDefault(); setOver(true); }}
+      onDragLeave={() => setOver(false)}
+      onDrop={e => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
+      onClick={() => inputRef.current?.click()}>
+      <input ref={inputRef} type="file" accept={accept}
+        onChange={e => e.target.files[0] && onFile(e.target.files[0])} style={{ display: 'none' }} />
+      <div className="dropzone-icon">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--grey-3)" strokeWidth="1.5" strokeLinecap="round">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+      </div>
+      {file ? (
+        <div className="dropzone-file">{file.name}</div>
+      ) : (
+        <>
+          <div className="dropzone-text"><b>Click to select</b> or drag &amp; drop</div>
+          {hint && <div className="dropzone-hint">{hint}</div>}
+        </>
+      )}
+    </div>
+  );
+}

package/components/HoverCard.jsx

@@ -1,81 +1,81 @@
-import { useState, useRef, useEffect } from 'react';
-
-/**
- * HoverCard — reusable tooltip/popover on hover
- *
- * Props:
- *   trigger      — React node as hover target
- *   children     — popup content
- *   position     — 'top' | 'bottom' (default: 'top')
- *   width        — min-width (default: 180)
- *   style        — extra popup styles
- *   triggerStyle — extra trigger wrapper styles
- */
-export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
-  const [open, setOpen] = useState(false);
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const wrapRef = useRef(null);
-
-  useEffect(() => {
-    if (open && wrapRef.current) {
-      const r = wrapRef.current.getBoundingClientRect();
-      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
-    }
-  }, [open, position]);
-
-  useEffect(() => {
-    if (!open) return;
-    const close = (e) => {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [open]);
-
-  return (
-    <div
-      ref={wrapRef}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
-    >
-      {trigger}
-      {open && (
-        <div style={{
-          position: 'fixed',
-          left: pos.x,
-          top: position === 'top' ? 'auto' : pos.y + 6,
-          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
-          transform: 'translateX(-50%)',
-          zIndex: 9999,
-          minWidth: width,
-          background: '#fff',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--rads, 8px)',
-          padding: '10px 14px',
-          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
-          pointerEvents: 'none',
-          animation: 'hoverCardIn .15s ease',
-          ...style,
-        }}>
-          {children}
-          <div style={{
-            position: 'absolute', left: '50%',
-            [position === 'top' ? 'bottom' : 'top']: -5,
-            transform: 'translateX(-50%) rotate(45deg)',
-            width: 8, height: 8, background: '#fff',
-            borderRight: '1px solid var(--border)',
-            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
-            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
-          }} />
-        </div>
-      )}
-      <style>{`
-        @keyframes hoverCardIn {
-          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-          to { opacity: 1; transform: translateX(-50%) translateY(0); }
-        }
-      `}</style>
-    </div>
-  );
-}
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * HoverCard — reusable tooltip/popover on hover
+ *
+ * Props:
+ *   trigger      — React node as hover target
+ *   children     — popup content
+ *   position     — 'top' | 'bottom' (default: 'top')
+ *   width        — min-width (default: 180)
+ *   style        — extra popup styles
+ *   triggerStyle — extra trigger wrapper styles
+ */
+export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const r = wrapRef.current.getBoundingClientRect();
+      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
+    }
+  }, [open, position]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div
+      ref={wrapRef}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
+    >
+      {trigger}
+      {open && (
+        <div style={{
+          position: 'fixed',
+          left: pos.x,
+          top: position === 'top' ? 'auto' : pos.y + 6,
+          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
+          transform: 'translateX(-50%)',
+          zIndex: 9999,
+          minWidth: width,
+          background: '#fff',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--rads, 8px)',
+          padding: '10px 14px',
+          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          pointerEvents: 'none',
+          animation: 'hoverCardIn .15s ease',
+          ...style,
+        }}>
+          {children}
+          <div style={{
+            position: 'absolute', left: '50%',
+            [position === 'top' ? 'bottom' : 'top']: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: '#fff',
+            borderRight: '1px solid var(--border)',
+            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
+            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
+          }} />
+        </div>
+      )}
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+          to { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}

package/components/Input.jsx

@@ -1,121 +1,181 @@
-import { useRef } from 'react';
-
-const STYLES = `
-.cinp{display:block;width:100%;background:var(--input-bg,#fff);border:1px solid var(--bd,#d7d8e0);border-radius:var(--rads,8px);color:var(--t1,#1a1a2e);font-family:var(--f,var(--sans,inherit));font-size:13px;padding:0 11px;outline:none;transition:border-color .14s,box-shadow .14s;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
-.cinp::placeholder{color:var(--t3,#9b9daa)}
-.cinp:focus{border-color:var(--accent,#f99e2c);box-shadow:0 0 0 3px rgba(249,158,44,.12),var(--shadow,0 1px 3px rgba(20,22,41,.1))}
-.cinp:disabled{opacity:.5;cursor:not-allowed;background:var(--grey-1,#f5f5f8)}
-.cinp-error{border-color:var(--danger,#f64747)}
-.cinp-error:focus{border-color:var(--danger,#f64747);box-shadow:0 0 0 3px rgba(246,71,71,.12)}
-
-.cinp-xs{height:30px;font-size:11px;padding:0 8px}
-.cinp-sm{height:32px;font-size:12px;padding:0 9px}
-.cinp-md{height:34px;font-size:13px}
-.cinp-lg{height:40px;font-size:14px;padding:0 14px}
-
-.cinp-wrap{display:flex;flex-direction:column;gap:5px}
-.cinp-wrap-xs .cinp-label{font-size:9px}
-.cinp-label{font-size:11px;font-weight:600;color:var(--t2,#797b8d);text-transform:uppercase;letter-spacing:.08em}
-.cinp-req{color:var(--danger,#f64747);margin-left:2px}
-.cinp-hint{font-size:11px;color:var(--t3,#9b9daa)}
-.cinp-err{font-size:11px;color:var(--danger,#f64747)}
-
-.cinp-icon-left{position:relative}
-.cinp-icon-left .cinp{padding-left:34px}
-.cinp-icon-left .cinp-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3,#9b9daa);pointer-events:none;line-height:0}
-.cinp-icon-left .cinp-icon svg{width:14px;height:14px}
-
-.cinp-icon-right{position:relative}
-.cinp-icon-right .cinp{padding-right:34px}
-.cinp-icon-right .cinp-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--t3,#9b9daa);pointer-events:none}
-.cinp-icon-right .cinp-icon svg{width:14px;height:14px}
-
-.cinp-wrap-clearable{position:relative}
-.cinp-wrap-clearable .cinp{padding-right:30px}
-.cinp-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--t3,#9b9daa);padding:0;transition:background .12s,color .12s;line-height:0}
-.cinp-clear:hover{background:var(--grey-1,#f0f0f4);color:var(--t1,#1a1a2e)}
-
-.cinp-wrap-suffix{position:relative}
-.cinp-wrap-suffix .cinp{padding-right:40px}
-.cinp-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;pointer-events:none}
-
-textarea.cinp{resize:vertical;min-height:72px;height:auto;padding-top:8px;padding-bottom:8px;line-height:1.5}
-`;
-
-let styleInjected = false;
-
-export default function Input({
-  label,
-  required = false,
-  hint,
-  error,
-  size = 'md',
-  icon,
-  iconRight,
-  clearable = false,
-  suffix,
-  onClear,
-  className = '',
-  style = {},
-  value,
-  ...props
-}) {
-  const inputRef = useRef(null);
-
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
-
-  function handleClear() {
-    if (props.onChange) props.onChange({ target: { value: '' } });
-    if (onClear) onClear();
-    inputRef.current?.focus();
-  }
-
-  const hasIconLeft = !!icon;
-  const hasIconRight = !!iconRight;
-  const showClear = clearable && !!value && !props.disabled;
-  const hasSuffix = !!suffix;
-  const showRightSlot = showClear || hasSuffix;
-
-  const wrapClasses = [
-    'cinp-wrap',
-    `cinp-wrap-${size}`,
-    hasIconLeft && 'cinp-icon-left',
-    (hasIconRight || showRightSlot) && 'cinp-icon-right',
-    showRightSlot && !hasIconRight && 'cinp-wrap-clearable',
-  ].filter(Boolean).join(' ');
-
-  const inputClass = `cinp cinp-${size}${error ? ' cinp-error' : ''}${className ? ' ' + className : ''}`;
-
-  const input = (
-    <input ref={inputRef} className={inputClass} style={style} value={value} {...props} />
-  );
-
-  return (
-    <div className={wrapClasses}>
-      {label && (
-        <label className="cinp-label">
-          {label}
-          {required && <span className="cinp-req">*</span>}
-        </label>
-      )}
-      {hasIconLeft && <span className="cinp-icon">{icon}</span>}
-      {hasIconRight && <span className="cinp-icon">{iconRight}</span>}
-      {input}
-      {showClear && (
-        <button type="button" className="cinp-clear" tabIndex={-1} onClick={handleClear}>
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
-            <line x1="1" y1="1" x2="9" y2="9" />
-            <line x1="9" y1="1" x2="1" y2="9" />
-          </svg>
-        </button>
-      )}
-      {hint && !error && <span className="cinp-hint">{hint}</span>}
-      {error && <span className="cinp-err">{error}</span>}
-    </div>
-  );
-}
+import { useRef } from 'react';
+
+const SIZES = {
+  xs: { height: 30, fontSize: 11, paddingH: 8 },
+  sm: { height: 32, fontSize: 12, paddingH: 9 },
+  md: { height: 34, fontSize: 13, paddingH: 11 },
+  lg: { height: 40, fontSize: 14, paddingH: 14 },
+};
+
+export default function Input({
+  label,
+  required = false,
+  hint,
+  error,
+  size = 'md',
+  icon,
+  iconRight,
+  clearable = false,
+  suffix,
+  onClear,
+  className = '',
+  style = {},
+  value,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const s = SIZES[size] || SIZES.md;
+
+  function handleClear() {
+    if (props.onChange) props.onChange({ target: { value: '' } });
+    if (onClear) onClear();
+    inputRef.current?.focus();
+  }
+
+  const hasIconLeft = !!icon;
+  const hasIconRight = !!iconRight;
+  const showClear = clearable && !!value && !props.disabled;
+  const hasSuffix = !!suffix;
+  const showRightSlot = showClear || hasSuffix;
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 5,
+    }}>
+      {label && (
+        <label style={{
+          fontSize: size === 'xs' ? 9 : 11,
+          fontWeight: 600,
+          color: 'var(--t2,#797b8d)',
+          textTransform: 'uppercase',
+          letterSpacing: '.08em',
+        }}>
+          {label}
+          {required && <span style={{ color: 'var(--danger,#f64747)', marginLeft: 2 }}>*</span>}
+        </label>
+      )}
+
+      <div style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+      }}>
+        {hasIconLeft && (
+          <span style={{
+            position: 'absolute',
+            left: 10,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            color: 'var(--t3,#9b9daa)',
+            pointerEvents: 'none',
+            lineHeight: 0,
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+            {icon}
+          </span>
+        )}
+
+        {hasIconRight && (
+          <span style={{
+            position: 'absolute',
+            right: 10,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            color: 'var(--t3,#9b9daa)',
+            pointerEvents: 'none',
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+            {iconRight}
+          </span>
+        )}
+
+        <input
+          ref={inputRef}
+          className={className}
+          style={{
+            display: 'block',
+            width: '100%',
+            background: 'var(--input-bg,#fff)',
+            border: `1px solid ${error ? 'var(--danger,#f64747)' : 'var(--bd,#d7d8e0)'}`,
+            borderRadius: 'var(--rads,8px)',
+            color: 'var(--t1,#1a1a2e)',
+            fontFamily: 'var(--f,var(--sans,inherit))',
+            fontSize: s.fontSize,
+            height: s.height,
+            padding: `0 ${s.paddingH}px`,
+            paddingLeft: hasIconLeft ? 34 : s.paddingH,
+            paddingRight: (hasIconRight || showRightSlot) ? 34 : s.paddingH,
+            outline: 'none',
+            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))'
+              : '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}
+          {...props}
+        />
+
+        {showClear && (
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={handleClear}
+            style={{
+              position: 'absolute',
+              right: 8,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 18,
+              height: 18,
+              borderRadius: '50%',
+              background: 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'var(--t3,#9b9daa)',
+              padding: 0,
+              lineHeight: 0,
+            }}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+              <line x1="1" y1="1" x2="9" y2="9" />
+              <line x1="9" y1="1" x2="1" y2="9" />
+            </svg>
+          </button>
+        )}
+
+        {hasSuffix && !showClear && (
+          <span style={{
+            position: 'absolute',
+            right: 8,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            pointerEvents: 'none',
+          }}>
+            {suffix}
+          </span>
+        )}
+      </div>
+
+      {hint && !error && (
+        <span style={{ fontSize: 11, color: 'var(--t3,#9b9daa)' }}>{hint}</span>
+      )}
+      {error && (
+        <span style={{ fontSize: 11, color: 'var(--danger,#f64747)' }}>{error}</span>
+      )}
+    </div>
+  );
+}