@ibanzajoe/uploader 0.1.0 → 0.3.0

package/README.md

@@ -64,6 +64,89 @@ 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
+device camera. A **Take photo** button appears next to **Browse files** whenever
+the browser supports `getUserMedia` and the picker accepts images. The capture
+flows through the exact same pipeline as a dropped or browsed file — it lands in
+the queue with a preview, can be cropped/rotated in the in-picker editor, and is
+then uploaded normally.
+
+```tsx
+<PickerOverlay
+  apikey="pk_…"
+  open={open}
+  onClose={() => setOpen(false)}
+  pickerOptions={{
+    accept: ['image/*'],
+    // Sources offered to the user. Omit to offer everything supported.
+    fromSources: ['local_file_system', 'camera'],
+    // 'user' = front/selfie (mirrored, default) · 'environment' = rear camera
+    cameraFacingMode: 'environment',
+  }}
+/>
+```
+
+Notes:
+- The camera requires a **secure context** (HTTPS or `localhost`) and user
+  permission. Permission/no-camera errors are surfaced inline with a retry.
+- Pass `fromSources: ['local_file_system']` to hide the camera even where it is
+  supported; omit `fromSources` to offer it by default.
+- The `<CameraCapture>` component and the `isCameraSupported()` /
+  `shouldOfferCamera()` helpers are exported for fully custom pickers.
+
 ## Signed policies
 
 When the account has `requireSigned` enabled, pass a signed policy on upload: