@ibanzajoe/uploader 0.1.0

package/dist/styles.css

@@ -0,0 +1,589 @@
+/**
+ * @uploader/react — component styles
+ *
+ * Themeable via CSS custom properties. Override any variable in your own
+ * stylesheet or on a parent element. Light / dark modes are handled via the
+ * `data-theme="dark"` attribute on any ancestor.
+ *
+ * Import once in your app:
+ *   import '@uploader/react/styles.css'
+ */
+
+/* ─── Design tokens ─────────────────────────────────────────────────────────── */
+
+:root {
+  --uploader-accent: #0057ff;
+  --uploader-accent-hover: #0041cc;
+  --uploader-radius: 8px;
+  --uploader-bg: #ffffff;
+  --uploader-surface: #f5f7fa;
+  --uploader-border: #d4d8e1;
+  --uploader-text: #1a1d23;
+  --uploader-text-muted: #6b7280;
+  --uploader-error: #dc2626;
+  --uploader-success: #16a34a;
+  --uploader-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
+  --uploader-z-backdrop: 1000;
+  --uploader-z-panel: 1001;
+  --uploader-font: inherit;
+  --uploader-transition: 0.15s ease;
+}
+
+[data-theme="dark"] {
+  --uploader-bg: #1e2130;
+  --uploader-surface: #282c3e;
+  --uploader-border: #3b4060;
+  --uploader-text: #e8eaf0;
+  --uploader-text-muted: #9ba3b8;
+  --uploader-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* ─── Backdrop ──────────────────────────────────────────────────────────────── */
+
+.uploader-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--uploader-z-backdrop);
+  font-family: var(--uploader-font);
+}
+
+/* ─── Modal panel ───────────────────────────────────────────────────────────── */
+
+.uploader-picker-panel {
+  background: var(--uploader-bg);
+  border-radius: var(--uploader-radius);
+  box-shadow: var(--uploader-shadow);
+  width: min(560px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: var(--uploader-z-panel);
+  color: var(--uploader-text);
+}
+
+.uploader-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--uploader-border);
+  flex-shrink: 0;
+}
+
+.uploader-picker-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--uploader-text);
+}
+
+.uploader-btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.4rem;
+  line-height: 1;
+  color: var(--uploader-text-muted);
+  padding: 4px 6px;
+  border-radius: 4px;
+  transition: color var(--uploader-transition), background var(--uploader-transition);
+}
+
+.uploader-btn-close:hover {
+  color: var(--uploader-text);
+  background: var(--uploader-surface);
+}
+
+.uploader-picker-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--uploader-border);
+  flex-shrink: 0;
+}
+
+/* ─── Drop zone (shared by PickerOverlay and DropPane) ──────────────────────── */
+
+.uploader-dropzone {
+  margin: 16px 20px;
+  border: 2px dashed var(--uploader-border);
+  border-radius: var(--uploader-radius);
+  background: var(--uploader-surface);
+  padding: 32px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition:
+    border-color var(--uploader-transition),
+    background var(--uploader-transition);
+  flex-shrink: 0;
+}
+
+.uploader-dropzone:hover,
+.uploader-dropzone:focus-visible,
+.uploader-drag-over .uploader-dropzone {
+  border-color: var(--uploader-accent);
+  background: color-mix(in srgb, var(--uploader-accent) 5%, var(--uploader-surface));
+  outline: none;
+}
+
+.uploader-dropzone:focus-visible {
+  outline: 2px solid var(--uploader-accent);
+  outline-offset: 2px;
+}
+
+.uploader-dropzone-icon {
+  font-size: 2.5rem;
+  color: var(--uploader-accent);
+}
+
+.uploader-dropzone-label {
+  margin: 0;
+  color: var(--uploader-text-muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+/* ─── File list ─────────────────────────────────────────────────────────────── */
+
+.uploader-file-list {
+  list-style: none;
+  margin: 0 20px;
+  padding: 0;
+  overflow-y: auto;
+  max-height: 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.uploader-file-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: calc(var(--uploader-radius) - 2px);
+  background: var(--uploader-surface);
+  border: 1px solid var(--uploader-border);
+}
+
+.uploader-file-item.uploader-file-error {
+  border-color: var(--uploader-error);
+  background: color-mix(in srgb, var(--uploader-error) 6%, var(--uploader-surface));
+}
+
+.uploader-file-item.uploader-file-done {
+  border-color: var(--uploader-success);
+}
+
+.uploader-file-thumb {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.uploader-file-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.uploader-file-name {
+  font-size: 0.875rem;
+  color: var(--uploader-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.uploader-file-error {
+  font-size: 0.75rem;
+  color: var(--uploader-error);
+}
+
+.uploader-file-done {
+  font-size: 0.75rem;
+  color: var(--uploader-success);
+}
+
+.uploader-file-progress {
+  width: 80px;
+  height: 6px;
+  appearance: none;
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.uploader-file-progress::-webkit-progress-bar {
+  background: var(--uploader-border);
+  border-radius: 3px;
+}
+
+.uploader-file-progress::-webkit-progress-value {
+  background: var(--uploader-accent);
+  border-radius: 3px;
+  transition: width var(--uploader-transition);
+}
+
+.uploader-file-progress::-moz-progress-bar {
+  background: var(--uploader-accent);
+  border-radius: 3px;
+}
+
+.uploader-file-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ─── Aggregate progress ────────────────────────────────────────────────────── */
+
+.uploader-aggregate-progress {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 20px;
+  flex-shrink: 0;
+}
+
+.uploader-aggregate-progress progress {
+  flex: 1;
+  height: 8px;
+  appearance: none;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.uploader-aggregate-progress progress::-webkit-progress-bar {
+  background: var(--uploader-border);
+  border-radius: 4px;
+}
+
+.uploader-aggregate-progress progress::-webkit-progress-value {
+  background: var(--uploader-accent);
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+.uploader-aggregate-progress progress::-moz-progress-bar {
+  background: var(--uploader-accent);
+}
+
+.uploader-aggregate-progress span {
+  font-size: 0.8rem;
+  color: var(--uploader-text-muted);
+  min-width: 3ch;
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────────────────── */
+
+.uploader-btn-upload,
+.uploader-btn-browse,
+.uploader-btn-done {
+  background: var(--uploader-accent);
+  color: #fff;
+  border: none;
+  border-radius: calc(var(--uploader-radius) - 2px);
+  padding: 8px 18px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--uploader-transition);
+}
+
+.uploader-btn-upload:hover,
+.uploader-btn-browse:hover,
+.uploader-btn-done:hover {
+  background: var(--uploader-accent-hover);
+}
+
+.uploader-btn-upload:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.uploader-btn-cancel {
+  background: var(--uploader-surface);
+  color: var(--uploader-text);
+  border: 1px solid var(--uploader-border);
+  border-radius: calc(var(--uploader-radius) - 2px);
+  padding: 8px 18px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background var(--uploader-transition);
+}
+
+.uploader-btn-cancel:hover {
+  background: var(--uploader-border);
+}
+
+.uploader-btn-cancel:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.uploader-btn-retry,
+.uploader-btn-remove {
+  background: none;
+  border: 1px solid var(--uploader-border);
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  color: var(--uploader-text-muted);
+  transition: border-color var(--uploader-transition), color var(--uploader-transition);
+}
+
+.uploader-btn-retry:hover {
+  border-color: var(--uploader-accent);
+  color: var(--uploader-accent);
+}
+
+.uploader-btn-remove:hover {
+  border-color: var(--uploader-error);
+  color: var(--uploader-error);
+}
+
+/* ─── Hidden input ──────────────────────────────────────────────────────────── */
+
+.uploader-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── DropPane root ─────────────────────────────────────────────────────────── */
+
+.uploader-drop-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: var(--uploader-font);
+  color: var(--uploader-text);
+}
+
+.uploader-drop-pane .uploader-dropzone {
+  margin: 0;
+}
+
+.uploader-drop-pane .uploader-file-list {
+  margin: 0;
+  max-height: 200px;
+}
+
+.uploader-drop-pane .uploader-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ─── Browse link (DropPane) ────────────────────────────────────────────────── */
+
+.uploader-browse-link {
+  color: var(--uploader-accent);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* ─── Image editor (in-picker, pre-upload) ──────────────────────────────────── */
+
+.uploader-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+}
+
+.uploader-editor-canvas {
+  position: relative;
+  width: 100%;
+  height: 60vh;
+  max-height: 560px;
+  background: #111418;
+  border-radius: var(--uploader-radius);
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  cursor: grab;
+}
+
+.uploader-editor-canvas:active {
+  cursor: grabbing;
+}
+
+.uploader-editor-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  /* Override global img resets (e.g. Tailwind preflight's max-width:100% /
+     height:auto) that would clamp width but not height → distorted aspect.
+     We set explicit natural width/height inline so the scale maths is exact. */
+  max-width: none;
+  max-height: none;
+  transform-origin: 0 0;
+  will-change: transform;
+  pointer-events: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.uploader-editor-cropbox {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.uploader-editor-cropbox-round {
+  border-radius: 50%;
+}
+
+.uploader-editor-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  border-radius: 2px;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.uploader-editor-hint {
+  margin: -6px 0 0;
+  font-size: 12px;
+  color: var(--uploader-text-muted);
+}
+
+.uploader-editor-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.uploader-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.uploader-editor-label {
+  font-size: 13px;
+  color: var(--uploader-text-muted);
+  min-width: 44px;
+}
+
+.uploader-editor-tool {
+  width: 36px;
+  height: 36px;
+  font-size: 18px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--uploader-surface);
+  color: var(--uploader-text);
+  border: 1px solid var(--uploader-border);
+  border-radius: calc(var(--uploader-radius) - 2px);
+  cursor: pointer;
+  transition: background var(--uploader-transition);
+}
+
+.uploader-editor-tool:hover {
+  background: var(--uploader-border);
+}
+
+.uploader-editor-tool-active {
+  background: var(--uploader-accent);
+  color: #fff;
+  border-color: var(--uploader-accent);
+}
+
+.uploader-editor-chip {
+  padding: 5px 12px;
+  font-size: 13px;
+  background: var(--uploader-surface);
+  color: var(--uploader-text);
+  border: 1px solid var(--uploader-border);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background var(--uploader-transition);
+}
+
+.uploader-editor-chip:hover {
+  background: var(--uploader-border);
+}
+
+.uploader-editor-chip-active {
+  background: var(--uploader-accent);
+  color: #fff;
+  border-color: var(--uploader-accent);
+}
+
+.uploader-editor-slider {
+  flex: 1;
+  accent-color: var(--uploader-accent);
+}
+
+.uploader-editor-number {
+  width: 90px;
+  padding: 5px 8px;
+  font: inherit;
+  color: var(--uploader-text);
+  background: var(--uploader-bg);
+  border: 1px solid var(--uploader-border);
+  border-radius: calc(var(--uploader-radius) - 2px);
+}
+
+.uploader-editor-error {
+  font-size: 13px;
+  color: var(--uploader-error);
+}
+
+.uploader-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Per-file "Edit" button in the file list */
+.uploader-btn-edit {
+  background: transparent;
+  color: var(--uploader-accent);
+  border: 1px solid var(--uploader-border);
+  border-radius: calc(var(--uploader-radius) - 2px);
+  padding: 4px 10px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background var(--uploader-transition);
+}
+
+.uploader-btn-edit:hover {
+  background: var(--uploader-surface);
+}
+
+.uploader-editor-chip:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}