@ibanzajoe/uploader 0.2.0 → 0.3.0

package/README.md

@@ -64,6 +64,57 @@ Inline drop zone that can be embedded in a form.
 
 Headless hook — returns `{ open, uploading, files, errors }`.
 
+## Theming
+
+The picker is styled entirely from `--uploader-*` CSS custom properties, so a
+third-party app can restyle it to match its own brand. There are two ways to do
+it — pick whichever fits your stack.
+
+### 1. The `theme` prop (scoped, per-instance)
+
+Pass your design tokens as a plain object. They are applied as inline CSS
+variables on that component's root, so the override is **scoped to that
+instance** — two pickers on one page can carry different themes and nothing
+leaks to the rest of your app. Only the keys you set change; everything else
+falls back to the shipped defaults.
+
+```tsx
+import { PickerOverlay } from '@uploader/react'
+import '@uploader/react/styles.css'
+
+<PickerOverlay
+  apikey="pk_…"
+  open={open}
+  onClose={() => setOpen(false)}
+  theme={{
+    accent: '#4f46e5',          // your brand color
+    accentSoft: '#eef2ff',      // tinted hover/icon background
+    accentRing: 'rgba(79,70,229,.28)',
+    radius: '12px',
+    font: "'Inter', sans-serif",
+  }}
+/>
+```
+
+`DropPane` takes the same `theme` prop. See the `UploaderTheme` type for the
+full token list (accent set, surfaces, text, borders, semantic colors, shadows,
+radius, font, transition). A `themeToVars(theme)` helper is also exported if you
+want to apply the same variables to your own wrapper element.
+
+### 2. CSS variables (global / page-level)
+
+Override the variables in your own stylesheet to theme every instance at once:
+
+```css
+:root {
+  --uploader-accent: #4f46e5;
+  --uploader-accent-soft: #eef2ff;
+  --uploader-radius: 12px;
+}
+```
+
+Dark mode is handled automatically when any ancestor has `data-theme="dark"`.
+
 ## Camera capture
 
 Both `<PickerOverlay>` and `<DropPane>` can capture a photo straight from the

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(src_exports, {
   resize: () => resize,
   rotate: () => rotate,
   shouldOfferCamera: () => shouldOfferCamera,
+  themeToVars: () => themeToVars,
   transformUrl: () => transformUrl,
   usePicker: () => usePicker
 });
@@ -1405,6 +1406,43 @@ function FileQueueRow({ entry, onRemove, onRetry, onEdit }) {
   ] });
 }
 
+// src/react/theme.ts
+var VAR_MAP = {
+  accent: "--uploader-accent",
+  accentHover: "--uploader-accent-hover",
+  accentSoft: "--uploader-accent-soft",
+  accentRing: "--uploader-accent-ring",
+  radius: "--uploader-radius",
+  background: "--uploader-bg",
+  surface: "--uploader-surface",
+  surfaceHover: "--uploader-surface-hover",
+  border: "--uploader-border",
+  borderSubtle: "--uploader-border-subtle",
+  text: "--uploader-text",
+  textMuted: "--uploader-text-muted",
+  textXMuted: "--uploader-text-xmuted",
+  error: "--uploader-error",
+  errorSoft: "--uploader-error-soft",
+  success: "--uploader-success",
+  shadowSm: "--uploader-shadow-sm",
+  shadow: "--uploader-shadow",
+  shadowLg: "--uploader-shadow-lg",
+  font: "--uploader-font",
+  transition: "--uploader-transition",
+  zBackdrop: "--uploader-z-backdrop",
+  zPanel: "--uploader-z-panel"
+};
+function themeToVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  for (const key of Object.keys(theme)) {
+    const value = theme[key];
+    if (value === void 0 || value === null) continue;
+    vars[VAR_MAP[key]] = String(value);
+  }
+  return vars;
+}
+
 // src/react/PickerOverlay.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function dialogTitle(isUploading, isDone, totalFiles, doneCount, errorCount, editingId, cameraOpen) {
@@ -1426,6 +1464,7 @@ function PickerOverlay({
   onFileUploadFinished,
   onFileUploadFailed,
   onCancel,
+  theme,
   className,
   style
 }) {
@@ -1539,6 +1578,7 @@ function PickerOverlay({
       {
         className: "uploader-backdrop",
         "data-testid": "picker-backdrop",
+        style: themeToVars(theme),
         onClick: handleClose,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
@@ -1725,11 +1765,13 @@ function DropPane({
   onFileUploadFailed,
   onCancel,
   hint = "or click to browse \xB7 max 50 MB",
+  theme,
   className,
   style
 }) {
   const [isDragOver, setIsDragOver] = (0, import_react7.useState)(false);
   const [cameraOpen, setCameraOpen] = (0, import_react7.useState)(false);
+  const rootStyle = { ...themeToVars(theme), ...style };
   const { files, addFiles, removeFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
     apikey,
     apiUrl,
@@ -1775,7 +1817,7 @@ function DropPane({
       {
         className: ["uploader-drop-pane", className ?? ""].filter(Boolean).join(" "),
         "data-testid": "drop-pane",
-        style,
+        style: rootStyle,
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           CameraCapture,
           {
@@ -1796,7 +1838,7 @@ function DropPane({
       className: ["uploader-drop-pane", className ?? ""].filter(Boolean).join(" "),
       "data-drag-over": isDragOver ? "true" : void 0,
       "data-testid": "drop-pane",
-      style,
+      style: rootStyle,
       children: [
         files.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Dropzone,
@@ -1908,6 +1950,7 @@ function DropPane({
   resize,
   rotate,
   shouldOfferCamera,
+  themeToVars,
   transformUrl,
   usePicker
 });