cynx-ui 1.2.16 → 1.2.18

package/components/CircularProgress.jsx

@@ -1,163 +1,163 @@
-import { useEffect, useRef } from 'react';
-
-const SIZES = {
-  xs: { svg: 48, stroke: 4, fontSize: '.7rem' },
-  sm: { svg: 64, stroke: 5, fontSize: '.85rem' },
-  md: { svg: 80, stroke: 6, fontSize: '1rem' },
-  lg: { svg: 100, stroke: 7, fontSize: '1.15rem' },
-  xl: { svg: 120, stroke: 8, fontSize: '1.3rem' },
-};
-
-export default function CircularProgress({
-  value = 0,
-  size = 'md',
-  customSize,
-  color = 'var(--blue)',
-  trackColor = '#e0e0e4',
-  label = '',
-  showPercent = true,
-  animated = true,
-  rounded = false,
-  indeterminate = false,
-  speed = 1,
-  strokeWidth,
-  gap = 4,
-  className = '',
-  style = {},
-}) {
-  const base = SIZES[size] || SIZES.md;
-  const svg = customSize || base.svg;
-  const stroke = strokeWidth ?? (customSize ? Math.max(3, svg * 0.06) : base.stroke);
-  const fontSize = customSize ? `${Math.max(11, svg * 0.13)}px` : base.fontSize;
-  const cx = svg / 2;
-  const cy = svg / 2;
-  const r = (svg - stroke) / 2;
-  const c = 2 * Math.PI * r;
-  const pct = Math.min(100, Math.max(0, value));
-  const BIG = c * 4;
-  const cap = rounded ? 'round' : 'butt';
-
-  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
-  const capOverrun = rounded ? stroke : 0;
-  const gapSize = userGap + capOverrun;
-  const total = c - 2 * gapSize;
-
-  const isFull = pct >= 100;
-  const isEmpty = pct <= 0;
-
-  let indDash, indOffset, trackDash, trackOffset, indOpacity;
-  let indStartDeg, indEndDeg, trackStartDeg, trackEndDeg;
-
-  if (isEmpty) {
-    indDash = `0,${BIG}`; indOffset = 0;
-    trackDash = `${c},${BIG}`; trackOffset = 0;
-    indOpacity = 0;
-    indStartDeg = indEndDeg = trackStartDeg = trackEndDeg = 0;
-  } else if (isFull) {
-    indDash = `${c + stroke * 2},${BIG}`; indOffset = 0;
-    trackDash = `0,${BIG}`; trackOffset = 0;
-    indOpacity = 1;
-    indStartDeg = 0; indEndDeg = 360;
-    trackStartDeg = trackEndDeg = 0;
-  } else {
-    const activeLen = (pct / 100) * total;
-    const inactiveLen = total - activeLen;
-    indDash = `${activeLen},${BIG}`; indOffset = 0;
-    trackDash = `${inactiveLen},${BIG}`; trackOffset = -(activeLen + gapSize);
-    indOpacity = 1;
-    indStartDeg = 0; indEndDeg = (pct / 100) * 360;
-    trackStartDeg = (pct / 100) * 360; trackEndDeg = 360;
-  }
-
-  const gRef = useRef(null);
-  const indRef = useRef(null);
-  const trackRef = useRef(null);
-
-  useEffect(() => {
-    if (!indeterminate) return;
-    const capRad = (180 / Math.PI) * (stroke / r) / 2;
-    const gapRad = (180 / Math.PI) * (gapSize / r);
-    const gapArcLen = (capRad + gapRad) / 360 * c;
-    let angle = -90, arcFrac = 0.45, arcDir = 1, raf;
-    let lastTime = performance.now();
-    function tick(now) {
-      const dt = (now - lastTime) / 16.67;
-      lastTime = now;
-      angle = (angle + 3.6 * speed * dt) % 360;
-      arcFrac += 0.006 * arcDir * speed * dt;
-      if (arcFrac >= 0.72) { arcFrac = 0.72; arcDir = -1; }
-      if (arcFrac <= 0.18) { arcFrac = 0.18; arcDir = 1; }
-      const indLen = c * arcFrac;
-      const trackLen = Math.max(0, c - indLen - gapArcLen * 2);
-      if (gRef.current) gRef.current.style.transform = `rotate(${angle}deg)`;
-      if (indRef.current) indRef.current.setAttribute('stroke-dasharray', `${indLen.toFixed(2)},9999`);
-      if (trackRef.current) {
-        trackRef.current.setAttribute('stroke-dasharray', `${trackLen.toFixed(2)},9999`);
-        trackRef.current.setAttribute('stroke-dashoffset', `${(-(indLen + gapArcLen)).toFixed(2)}`);
-      }
-      raf = requestAnimationFrame(tick);
-    }
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [indeterminate, c, stroke, r, gapSize, speed]);
-
-  return (
-    <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, ...style }}>
-      <div style={{ position: 'relative', width: svg, height: svg }}>
-        <svg width={svg} height={svg} viewBox={`0 0 ${svg} ${svg}`}>
-          {indeterminate ? (
-            <g ref={gRef} style={{ transformOrigin: `${cx}px ${cy}px` }}>
-              <circle
-                ref={trackRef}
-                cx={cx} cy={cy} r={r}
-                fill="none" stroke={trackColor} strokeWidth={stroke} strokeLinecap={cap}
-              />
-              <circle
-                ref={indRef}
-                cx={cx} cy={cy} r={r}
-                fill="none" stroke={color} strokeWidth={stroke} strokeLinecap={cap}
-              />
-            </g>
-          ) : (
-            <>
-              <circle
-                cx={cx} cy={cy} r={r}
-                fill="none" stroke={trackColor} strokeWidth={stroke}
-                strokeLinecap={cap}
-                strokeDasharray={trackDash} strokeDashoffset={trackOffset}
-                style={{
-                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
-                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)' : 'none',
-                }}
-              />
-              <circle
-                cx={cx} cy={cy} r={r}
-                fill="none" stroke={color} strokeWidth={stroke}
-                strokeLinecap={cap}
-                strokeDasharray={indDash} strokeDashoffset={indOffset}
-                style={{
-                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
-                  opacity: indOpacity,
-                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s' : 'none',
-                }}
-              />
-            </>
-          )}
-        </svg>
-        {showPercent && !indeterminate && (
-          <div style={{
-            position: 'absolute', inset: 0,
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            fontSize, fontWeight: 600, color: 'var(--primary-text)',
-            fontVariantNumeric: 'tabular-nums',
-          }}>
-            {Math.round(pct)}%
-          </div>
-        )}
-      </div>
-      {label && (
-        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
-      )}
-    </div>
-  );
-}
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { svg: 48, stroke: 4, fontSize: '.7rem' },
+  sm: { svg: 64, stroke: 5, fontSize: '.85rem' },
+  md: { svg: 80, stroke: 6, fontSize: '1rem' },
+  lg: { svg: 100, stroke: 7, fontSize: '1.15rem' },
+  xl: { svg: 120, stroke: 8, fontSize: '1.3rem' },
+};
+
+export default function CircularProgress({
+  value = 0,
+  size = 'md',
+  customSize,
+  color = 'var(--blue)',
+  trackColor = '#e0e0e4',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = false,
+  indeterminate = false,
+  speed = 1,
+  strokeWidth,
+  gap = 4,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const svg = customSize || base.svg;
+  const stroke = strokeWidth ?? (customSize ? Math.max(3, svg * 0.06) : base.stroke);
+  const fontSize = customSize ? `${Math.max(11, svg * 0.13)}px` : base.fontSize;
+  const cx = svg / 2;
+  const cy = svg / 2;
+  const r = (svg - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const pct = Math.min(100, Math.max(0, value));
+  const BIG = c * 4;
+  const cap = rounded ? 'round' : 'butt';
+
+  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
+  const capOverrun = rounded ? stroke : 0;
+  const gapSize = userGap + capOverrun;
+  const total = c - 2 * gapSize;
+
+  const isFull = pct >= 100;
+  const isEmpty = pct <= 0;
+
+  let indDash, indOffset, trackDash, trackOffset, indOpacity;
+  let indStartDeg, indEndDeg, trackStartDeg, trackEndDeg;
+
+  if (isEmpty) {
+    indDash = `0,${BIG}`; indOffset = 0;
+    trackDash = `${c},${BIG}`; trackOffset = 0;
+    indOpacity = 0;
+    indStartDeg = indEndDeg = trackStartDeg = trackEndDeg = 0;
+  } else if (isFull) {
+    indDash = `${c + stroke * 2},${BIG}`; indOffset = 0;
+    trackDash = `0,${BIG}`; trackOffset = 0;
+    indOpacity = 1;
+    indStartDeg = 0; indEndDeg = 360;
+    trackStartDeg = trackEndDeg = 0;
+  } else {
+    const activeLen = (pct / 100) * total;
+    const inactiveLen = total - activeLen;
+    indDash = `${activeLen},${BIG}`; indOffset = 0;
+    trackDash = `${inactiveLen},${BIG}`; trackOffset = -(activeLen + gapSize);
+    indOpacity = 1;
+    indStartDeg = 0; indEndDeg = (pct / 100) * 360;
+    trackStartDeg = (pct / 100) * 360; trackEndDeg = 360;
+  }
+
+  const gRef = useRef(null);
+  const indRef = useRef(null);
+  const trackRef = useRef(null);
+
+  useEffect(() => {
+    if (!indeterminate) return;
+    const capRad = (180 / Math.PI) * (stroke / r) / 2;
+    const gapRad = (180 / Math.PI) * (gapSize / r);
+    const gapArcLen = (capRad + gapRad) / 360 * c;
+    let angle = -90, arcFrac = 0.45, arcDir = 1, raf;
+    let lastTime = performance.now();
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      angle = (angle + 3.6 * speed * dt) % 360;
+      arcFrac += 0.006 * arcDir * speed * dt;
+      if (arcFrac >= 0.72) { arcFrac = 0.72; arcDir = -1; }
+      if (arcFrac <= 0.18) { arcFrac = 0.18; arcDir = 1; }
+      const indLen = c * arcFrac;
+      const trackLen = Math.max(0, c - indLen - gapArcLen * 2);
+      if (gRef.current) gRef.current.style.transform = `rotate(${angle}deg)`;
+      if (indRef.current) indRef.current.setAttribute('stroke-dasharray', `${indLen.toFixed(2)},9999`);
+      if (trackRef.current) {
+        trackRef.current.setAttribute('stroke-dasharray', `${trackLen.toFixed(2)},9999`);
+        trackRef.current.setAttribute('stroke-dashoffset', `${(-(indLen + gapArcLen)).toFixed(2)}`);
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [indeterminate, c, stroke, r, gapSize, speed]);
+
+  return (
+    <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, ...style }}>
+      <div style={{ position: 'relative', width: svg, height: svg }}>
+        <svg width={svg} height={svg} viewBox={`0 0 ${svg} ${svg}`}>
+          {indeterminate ? (
+            <g ref={gRef} style={{ transformOrigin: `${cx}px ${cy}px` }}>
+              <circle
+                ref={trackRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke} strokeLinecap={cap}
+              />
+              <circle
+                ref={indRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke} strokeLinecap={cap}
+              />
+            </g>
+          ) : (
+            <>
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={trackDash} strokeDashoffset={trackOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)' : 'none',
+                }}
+              />
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={indDash} strokeDashoffset={indOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  opacity: indOpacity,
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s' : 'none',
+                }}
+              />
+            </>
+          )}
+        </svg>
+        {showPercent && !indeterminate && (
+          <div style={{
+            position: 'absolute', inset: 0,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontSize, fontWeight: 600, color: 'var(--primary-text)',
+            fontVariantNumeric: 'tabular-nums',
+          }}>
+            {Math.round(pct)}%
+          </div>
+        )}
+      </div>
+      {label && (
+        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+      )}
+    </div>
+  );
+}

package/components/Dropdown.jsx

@@ -1,116 +1,116 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { ChevronDown, Check } from 'lucide-react';
-
-export default function Dropdown({ value, onChange, options, placeholder = 'Select...', disabled }) {
-  const [open, setOpen] = useState(false);
-  const [rect, setRect]  = useState(null);
-  const btnRef = useRef();
-  const menuRef = useRef();
-
-  const updateRect = useCallback(() => {
-    if (btnRef.current) setRect(btnRef.current.getBoundingClientRect());
-  }, []);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    function onDown(e) {
-      const inBtn = btnRef.current?.contains(e.target);
-      const inMenu = menuRef.current?.contains(e.target);
-      if (!inBtn && !inMenu) setOpen(false);
-    }
-    // Use setTimeout to avoid closing on the same click that opened
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', onDown, true);
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('mousedown', onDown, true);
-    };
-  }, [open]);
-
-  // Update position on scroll/resize while open
-  useEffect(() => {
-    if (!open) return;
-    window.addEventListener('scroll', updateRect, true);
-    window.addEventListener('resize', updateRect);
-    return () => {
-      window.removeEventListener('scroll', updateRect, true);
-      window.removeEventListener('resize', updateRect);
-    };
-  }, [open, updateRect]);
-
-  function toggle() {
-    if (disabled) return;
-    updateRect();
-    setOpen(o => !o);
-  }
-
-  const selected = options.find(o => String(o.value) === String(value));
-
-  const menu = open && rect && createPortal(
-    <div
-      ref={menuRef}
-      data-dropdown="true"
-      style={{
-        position: 'fixed',
-        top:   rect.bottom + 4,
-        left:  rect.left,
-        width: rect.width,
-        background: 'var(--surface)',
-        border: '1px solid var(--border)',
-        borderRadius: 'var(--rads)',
-        boxShadow: 'var(--shadow-lg)',
-        zIndex: 999999,
-        animation: 'dropdownOpen .2s cubic-bezier(.16,1,.3,1)',
-      }}>
-      {options.map(o => {
-        const active = String(o.value) === String(value);
-        return (
-          <div key={o.value}
-            onMouseDown={e => e.stopPropagation()}
-            onClick={() => { onChange(o.value); setOpen(false); }}
-            onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'var(--hover-bg)'; }}
-            onMouseLeave={e => { e.currentTarget.style.background = active ? 'var(--accent-bg)' : 'transparent'; }}
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '9px 12px', cursor: 'pointer', fontSize: '.82rem',
-              color: active ? 'var(--accent)' : 'var(--primary-text)',
-              background: active ? 'var(--accent-bg)' : 'transparent',
-              fontWeight: active ? 600 : 400,
-            }}>
-            <span>{o.label}</span>
-            {active && <Check size={12} />}
-          </div>
-        );
-      })}
-    </div>,
-    document.body
-  );
-
-  return (
-    <div ref={btnRef} style={{ position: 'relative' }}>
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={toggle}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '8px 11px', background: 'var(--input-bg)',
-          border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
-          boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
-          borderRadius: 'var(--rads)', cursor: disabled ? 'not-allowed' : 'pointer',
-          color: selected ? 'var(--primary-text)' : 'var(--muted)',
-          fontSize: '.82rem', fontFamily: 'var(--sans)', transition: 'all .14s',
-          opacity: disabled ? .5 : 1, gap: 8,
-        }}>
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {selected ? selected.label : placeholder}
-        </span>
-        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
-      </button>
-      {menu}
-    </div>
-  );
-}
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check } from 'lucide-react';
+
+export default function Dropdown({ value, onChange, options, placeholder = 'Select...', disabled }) {
+  const [open, setOpen] = useState(false);
+  const [rect, setRect]  = useState(null);
+  const btnRef = useRef();
+  const menuRef = useRef();
+
+  const updateRect = useCallback(() => {
+    if (btnRef.current) setRect(btnRef.current.getBoundingClientRect());
+  }, []);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      const inBtn = btnRef.current?.contains(e.target);
+      const inMenu = menuRef.current?.contains(e.target);
+      if (!inBtn && !inMenu) setOpen(false);
+    }
+    // Use setTimeout to avoid closing on the same click that opened
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', onDown, true);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', onDown, true);
+    };
+  }, [open]);
+
+  // Update position on scroll/resize while open
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('scroll', updateRect, true);
+    window.addEventListener('resize', updateRect);
+    return () => {
+      window.removeEventListener('scroll', updateRect, true);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [open, updateRect]);
+
+  function toggle() {
+    if (disabled) return;
+    updateRect();
+    setOpen(o => !o);
+  }
+
+  const selected = options.find(o => String(o.value) === String(value));
+
+  const menu = open && rect && createPortal(
+    <div
+      ref={menuRef}
+      data-dropdown="true"
+      style={{
+        position: 'fixed',
+        top:   rect.bottom + 4,
+        left:  rect.left,
+        width: rect.width,
+        background: 'var(--surface)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--rads)',
+        boxShadow: 'var(--shadow-lg)',
+        zIndex: 999999,
+        animation: 'dropdownOpen .2s cubic-bezier(.16,1,.3,1)',
+      }}>
+      {options.map(o => {
+        const active = String(o.value) === String(value);
+        return (
+          <div key={o.value}
+            onMouseDown={e => e.stopPropagation()}
+            onClick={() => { onChange(o.value); setOpen(false); }}
+            onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'var(--hover-bg)'; }}
+            onMouseLeave={e => { e.currentTarget.style.background = active ? 'var(--accent-bg)' : 'transparent'; }}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: '9px 12px', cursor: 'pointer', fontSize: '.82rem',
+              color: active ? 'var(--accent)' : 'var(--primary-text)',
+              background: active ? 'var(--accent-bg)' : 'transparent',
+              fontWeight: active ? 600 : 400,
+            }}>
+            <span>{o.label}</span>
+            {active && <Check size={12} />}
+          </div>
+        );
+      })}
+    </div>,
+    document.body
+  );
+
+  return (
+    <div ref={btnRef} style={{ position: 'relative' }}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={toggle}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '8px 11px', background: 'var(--input-bg)',
+          border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
+          boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+          borderRadius: 'var(--rads)', cursor: disabled ? 'not-allowed' : 'pointer',
+          color: selected ? 'var(--primary-text)' : 'var(--muted)',
+          fontSize: '.82rem', fontFamily: 'var(--sans)', transition: 'all .14s',
+          opacity: disabled ? .5 : 1, gap: 8,
+        }}>
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
+      </button>
+      {menu}
+    </div>
+  );
+}

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>
+  );
+}