cynx-lib 1.3.28

package/ui/components/ImageUpload.jsx

@@ -0,0 +1,147 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Pencil, Upload, X, Trash2 } from 'lucide-react';
+import Button from './Button.jsx';
+
+export default function ImageUpload({ value, file, onChange, onRemove, label = 'Image' }) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [urlInput, setUrlInput] = useState(value || '');
+  const [pendingFile, setPendingFile] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+  const [closing, setClosing] = useState(false);
+
+  const previewUrl = file ? URL.createObjectURL(file) : value;
+  const filename = file ? file.name : value ? value.split('/').pop() : null;
+  const hasImage = !!(file || value);
+
+  useEffect(() => {
+    if (!editOpen) return;
+    function onKey(e) { if (e.key === 'Escape') handleClose(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [editOpen]);
+
+  function handleFile(f) {
+    if (f && f.type.startsWith('image/')) {
+      setPendingFile(f);
+      setUrlInput('');
+    }
+  }
+
+  function handleSave() {
+    if (pendingFile) {
+      onChange({ file: pendingFile, url: '' });
+    } else if (urlInput.trim()) {
+      onChange({ file: null, url: urlInput.trim() });
+    }
+    handleClose();
+  }
+
+  function handleClose() {
+    setClosing(true);
+    setTimeout(() => {
+      setEditOpen(false);
+      setClosing(false);
+      setPendingFile(null);
+      setUrlInput(value || '');
+    }, 260);
+  }
+
+  function openEdit() {
+    setUrlInput(value || '');
+    setPendingFile(null);
+    setEditOpen(true);
+  }
+
+  const modal = editOpen && createPortal(
+    <div className="modal-backdrop"
+      style={{ animation: `${closing ? 'backdropClose' : 'backdropFade'} .26s ease forwards` }}
+      onClick={e => { if (e.target === e.currentTarget) handleClose(); }}>
+      <div className="modal" style={{
+        maxWidth: 420,
+        animation: `${closing ? 'modalClose' : 'modalPop'} .26s cubic-bezier(.4,0,.2,1) forwards`,
+      }}>
+        <div className="modal-hdr">
+          <div className="modal-title">Edit {label}</div>
+          <Button variant="no-line" size="sm" icon={<X size={14} />} onClick={handleClose} />
+        </div>
+        <div className="modal-body" style={{ overflow: 'visible' }}>
+          <label
+            style={{
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads, 8px)',
+              border: `1.5px dashed ${dragOver ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+              background: 'var(--grey-1, #f5f5f8)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
+            }}
+            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={e => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files[0]); }}
+          >
+            <input type="file" accept="image/*,.ico" style={{ display: 'none' }}
+              onChange={e => handleFile(e.target.files[0])} />
+            {pendingFile ? (
+              <>
+                <img src={URL.createObjectURL(pendingFile)} alt="preview" style={{ height: 48, maxWidth: 160, objectFit: 'contain', borderRadius: 4 }} />
+                <div style={{ fontSize: '.76rem', fontWeight: 600, color: 'var(--accent, #f99e2c)' }}>{pendingFile.name}</div>
+                <div style={{ fontSize: '.68rem', color: 'var(--muted, #797b8d)' }}>{(pendingFile.size / 1024).toFixed(1)} KB — click to change</div>
+              </>
+            ) : (
+              <>
+                <Upload size={20} style={{ color: 'var(--muted, #797b8d)' }} />
+                <div style={{ fontSize: '.82rem', fontWeight: 600 }}>Click or drag to upload</div>
+                <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>PNG, JPG, SVG, ICO up to 2MB</div>
+              </>
+            )}
+          </label>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 4px' }}>
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
+            <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>or enter URL directly</span>
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
+          </div>
+          <input
+            type="url" placeholder="https://example.com/logo.png"
+            value={urlInput}
+            onChange={e => { setUrlInput(e.target.value); setPendingFile(null); }}
+            style={{
+              width: '100%', padding: '8px 10px', fontSize: '.82rem',
+              border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rads, 8px)',
+              background: 'var(--input-bg, #ffffff)', color: 'var(--primary-text, #0f172a)',
+              fontFamily: 'var(--sans, inherit)', outline: 'none',
+            }}
+          />
+        </div>
+        <div className="modal-footer">
+          <Button variant="ghost" size="xs" onClick={handleClose}>Cancel</Button>
+          <Button variant="primary" size="xs" onClick={handleSave} disabled={!pendingFile && !urlInput.trim()}>Save</Button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  return (
+    <>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: 12,
+        padding: '10px 12px', borderRadius: 'var(--rads, 8px)',
+        border: '1px solid var(--border, #e2e8f0)', background: 'var(--grey-1, #f5f5f8)',
+      }}>
+        {hasImage ? (
+          <img src={previewUrl} alt={label} style={{ height: 32, maxWidth: 80, objectFit: 'contain', borderRadius: 4, flexShrink: 0 }} />
+        ) : (
+          <div style={{ width: 32, height: 32, borderRadius: 4, background: 'var(--grey-2, #ebebee)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted, #797b8d)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+          </div>
+        )}
+        <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)', fontFamily: filename ? 'var(--mono, ui-monospace, monospace)' : 'inherit', wordBreak: 'break-all' }}>
+          {filename || 'Not set yet'}
+        </div>
+        <Button variant="ghost" size="xs" icon={<Pencil size={12} />} onClick={openEdit} style={{ flexShrink: 0 }}>Edit</Button>
+        {hasImage && (
+          <Button variant="ghost" size="xs" icon={<Trash2 size={12} />} style={{ color: 'var(--danger, #f64747)', flexShrink: 0 }} onClick={onRemove}>Remove</Button>
+        )}
+      </div>
+      {modal}
+    </>
+  );
+}

package/ui/components/InfoBadge.jsx

@@ -0,0 +1,204 @@
+import React from 'react';
+
+const SIZES = {
+  xs: {
+    height: 26,
+    padding: '0 8px',
+    fontSize: '.74rem',
+    iconSize: 13,
+    dotSize: '.7rem',
+    sepHeight: 12,
+    gap: 6,
+    borderRadius: 'var(--radxs, 6px)',
+  },
+  sm: {
+    height: 32,
+    padding: '0 12px',
+    fontSize: '.82rem',
+    iconSize: 15,
+    dotSize: '.75rem',
+    sepHeight: 14,
+    gap: 8,
+    borderRadius: 'var(--rads, 8px)',
+  },
+  md: {
+    height: 36,
+    padding: '0 14px',
+    fontSize: '.88rem',
+    iconSize: 16,
+    dotSize: '.8rem',
+    sepHeight: 16,
+    gap: 10,
+    borderRadius: 'var(--rad, 10px)',
+  },
+  lg: {
+    height: 40,
+    padding: '0 16px',
+    fontSize: '.95rem',
+    iconSize: 18,
+    dotSize: '.85rem',
+    sepHeight: 18,
+    gap: 12,
+    borderRadius: 'var(--rad, 10px)',
+  },
+};
+
+const VARIANTS = {
+  default: {
+    background: 'var(--surface, #ffffff)',
+    border: '1px solid var(--border, #d7d8e0)',
+    boxShadow: 'var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))',
+  },
+  surface: {
+    background: 'var(--surface, #ffffff)',
+    border: '1px solid var(--border, #d7d8e0)',
+    boxShadow: 'var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))',
+  },
+  flat: {
+    background: 'var(--grey-1, #f5f5f8)',
+    border: '1px solid var(--border, #d7d8e0)',
+    boxShadow: 'none',
+  },
+  ghost: {
+    background: 'transparent',
+    border: '1px solid var(--border, #d7d8e0)',
+    boxShadow: 'none',
+  },
+};
+
+export default function InfoBadge({
+  items,
+  icon,
+  label,
+  value,
+  color,
+  title,
+  dot = true,
+  size = 'sm',
+  variant = 'default',
+  style,
+  className = '',
+  children,
+  onClick,
+  ...props
+}) {
+  const sz = SIZES[size] || SIZES.sm;
+  const vr = VARIANTS[variant] || VARIANTS.default;
+
+  const containerStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: sz.height,
+    padding: sz.padding,
+    borderRadius: sz.borderRadius,
+    background: vr.background,
+    border: vr.border,
+    boxShadow: vr.boxShadow,
+    gap: sz.gap,
+    cursor: onClick ? 'pointer' : 'default',
+    userSelect: 'none',
+    ...style,
+  };
+
+  if (children) {
+    return (
+      <div style={containerStyle} className={className} onClick={onClick} title={title} {...props}>
+        {children}
+      </div>
+    );
+  }
+
+  const resolvedItems = Array.isArray(items) && items.length > 0
+    ? items
+    : (icon != null || value != null || label != null)
+      ? [{ icon, label, value, color, title, onClick }]
+      : [];
+
+  return (
+    <div style={containerStyle} className={className} onClick={onClick} title={title} {...props}>
+      {resolvedItems.map((it, idx) => {
+        const itemColor = it.color || 'inherit';
+        const showDot = it.dot !== undefined ? it.dot : dot;
+
+        return (
+          <React.Fragment key={it.id || it.key || idx}>
+            {idx > 0 && (
+              <div
+                style={{
+                  width: 1,
+                  height: sz.sepHeight,
+                  background: 'var(--border, #d7d8e0)',
+                  flexShrink: 0,
+                }}
+              />
+            )}
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 5,
+                cursor: it.onClick ? 'pointer' : 'inherit',
+              }}
+              title={it.title}
+              onClick={it.onClick}
+            >
+              {it.icon && (
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: itemColor,
+                    flexShrink: 0,
+                  }}
+                >
+                  {typeof it.icon === 'function'
+                    ? React.createElement(it.icon, { size: sz.iconSize })
+                    : React.isValidElement(it.icon)
+                      ? React.cloneElement(it.icon, { size: it.icon.props?.size || sz.iconSize })
+                      : it.icon}
+                </span>
+              )}
+              {it.label && (
+                <span
+                  style={{
+                    fontSize: sz.fontSize,
+                    fontWeight: 500,
+                    color: itemColor !== 'inherit' ? itemColor : 'var(--primary-text, #0f111c)',
+                  }}
+                >
+                  {it.label}
+                </span>
+              )}
+              {showDot && (it.icon || it.label) && it.value !== undefined && (
+                <span
+                  style={{
+                    fontSize: sz.dotSize,
+                    color: 'var(--muted, #9b9daa)',
+                    lineHeight: 1,
+                  }}
+                >
+                  •
+                </span>
+              )}
+              {it.value !== undefined && (
+                <span
+                  style={{
+                    fontSize: sz.fontSize,
+                    fontWeight: 500,
+                    color: 'var(--primary-text, #0f111c)',
+                    fontVariantNumeric: 'tabular-nums',
+                    lineHeight: 1,
+                  }}
+                >
+                  {it.value}
+                </span>
+              )}
+            </div>
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/ui/components/Input.jsx

@@ -0,0 +1,229 @@
+import { useRef, useState } from 'react';
+
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8 },
+  md: { height: 32, fontSize: 13, paddingH: 11 },
+  lg: { height: 36, fontSize: 14, paddingH: 14 },
+};
+
+export default function Input({
+  label,
+  required = false,
+  hint,
+  error,
+  size = 'md',
+  icon,
+  iconRight,
+  clearable = false,
+  suffix,
+  multiline = false,
+  onClear,
+  className = '',
+  style = {},
+  value,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  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 && !multiline;
+  const hasSuffix = !!suffix && !multiline;
+  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>
+        )}
+
+        {multiline ? (
+          <textarea
+            ref={inputRef}
+            className={className}
+            style={{
+              display: 'block',
+              width: '100%',
+              minHeight: 70,
+              resize: 'vertical',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'break-word',
+              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))',
+              fontSize: s.fontSize,
+              padding: 0,
+              paddingTop: 8,
+              paddingBottom: 8,
+              paddingLeft: hasIconLeft ? 34 : 12,
+              paddingRight: (hasIconRight || showRightSlot) ? 34 : 12,
+              outline: 'none',
+              transition: 'border-color .14s, box-shadow .14s',
+              boxShadow: error
+                ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+                : focused
+                ? 'var(--pd, 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,
+              ...style,
+            }}
+            value={value}
+            {...props}
+            onFocus={e => { setFocused(true); props.onFocus?.(e); }}
+            onBlur={e => { setFocused(false); setHovered(false); props.onBlur?.(e); }}
+          />
+        ) : (
+        <input
+          ref={inputRef}
+          className={className}
+          style={{
+            display: 'block',
+            width: '100%',
+            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))',
+            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
+              ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+              : focused
+              ? 'var(--pd, 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,
+            ...style,
+          }}
+          value={value}
+          {...props}
+          onFocus={e => { setFocused(true); props.onFocus?.(e); }}
+          onBlur={e => { setFocused(false); setHovered(false); props.onBlur?.(e); }}
+          // onMouseEnter={() => setHovered(true)}
+          // onMouseLeave={() => setHovered(false)}
+        />
+        )}
+
+        {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>
+  );
+}