@ibanzajoe/uploader 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -3,6 +3,96 @@ export { C as CropParams, O as OutputParams, a as PolicySpec, Q as QualityParams
 import * as React from 'react';
 import React__default, { CSSProperties } from 'react';
 
+/**
+ * Theming — map a plain token object to scoped CSS custom properties.
+ *
+ * The SDK is styled entirely from `--uploader-*` CSS custom properties (see
+ * styles.css). A host React app can override them in its own stylesheet, but
+ * that overrides every instance on the page and requires writing CSS.
+ *
+ * The `theme` prop on PickerOverlay / DropPane lets a host pass those tokens as
+ * a plain object instead. `themeToVars` converts the object into inline CSS
+ * variables applied to the component's own root element, so the override is
+ * **scoped to that instance** — two pickers on one page can carry different
+ * themes, and nothing leaks to the rest of the app.
+ *
+ * Only the keys you set are emitted; everything else falls back to the shipped
+ * defaults. Fully backward compatible — omit `theme` and behaviour is unchanged.
+ *
+ * @example
+ * <PickerOverlay
+ *   theme={{ accent: '#4f46e5', accentSoft: '#eef2ff', radius: '12px' }}
+ *   apikey="pk_..."
+ *   open={open}
+ *   onClose={close}
+ * />
+ */
+
+/**
+ * Host-overridable design tokens. Each maps to one `--uploader-*` CSS variable.
+ * All optional — set only what you want to change. Values are raw CSS strings
+ * (e.g. '#4f46e5', 'rgba(79,70,229,.28)', '12px', '0.2s ease').
+ */
+type UploaderTheme = {
+    /** Primary brand color. → `--uploader-accent` */
+    accent?: string;
+    /** Hover/active shade of the accent. → `--uploader-accent-hover` */
+    accentHover?: string;
+    /** Tinted fill for icon swatches and hover backgrounds. → `--uploader-accent-soft` */
+    accentSoft?: string;
+    /** Focus ring / drag-over glow (≈20–30% opacity of accent). → `--uploader-accent-ring` */
+    accentRing?: string;
+    /** Corner radius for panels, buttons, inputs. → `--uploader-radius` */
+    radius?: string;
+    /** Base surface / panel background. → `--uploader-bg` */
+    background?: string;
+    /** Secondary surface (rows, wells). → `--uploader-surface` */
+    surface?: string;
+    /** Hover state for secondary surfaces. → `--uploader-surface-hover` */
+    surfaceHover?: string;
+    /** Default border color. → `--uploader-border` */
+    border?: string;
+    /** Subtle/hairline border color. → `--uploader-border-subtle` */
+    borderSubtle?: string;
+    /** Primary text color. → `--uploader-text` */
+    text?: string;
+    /** Muted/secondary text. → `--uploader-text-muted` */
+    textMuted?: string;
+    /** Extra-muted text (hints, captions). → `--uploader-text-xmuted` */
+    textXMuted?: string;
+    /** Error color. → `--uploader-error` */
+    error?: string;
+    /** Tinted error background. → `--uploader-error-soft` */
+    errorSoft?: string;
+    /** Success color. → `--uploader-success` */
+    success?: string;
+    /** Small elevation shadow. → `--uploader-shadow-sm` */
+    shadowSm?: string;
+    /** Default elevation shadow. → `--uploader-shadow` */
+    shadow?: string;
+    /** Large elevation shadow (modal panel). → `--uploader-shadow-lg` */
+    shadowLg?: string;
+    /** Font family. Defaults to `inherit`. → `--uploader-font` */
+    font?: string;
+    /** Transition timing. → `--uploader-transition` */
+    transition?: string;
+    /** z-index of the modal backdrop. → `--uploader-z-backdrop` */
+    zBackdrop?: number | string;
+    /** z-index of the modal panel. → `--uploader-z-panel` */
+    zPanel?: number | string;
+};
+/**
+ * Convert a theme object into a style object of CSS custom properties.
+ *
+ * Returns an empty object when `theme` is undefined/empty, so it is safe to
+ * spread unconditionally. `undefined` token values are skipped (no var emitted),
+ * letting the shipped default apply.
+ *
+ * Merge it ahead of any host `style` so the host can still override per-instance:
+ *   style={{ ...themeToVars(theme), ...style }}
+ */
+declare function themeToVars(theme?: UploaderTheme): React__default.CSSProperties;
+
 /**
  * React picker prop and state types.
  *
@@ -131,12 +221,18 @@ type PickerOverlayProps = SharedPickerProps & {
     open: boolean;
     /** Called when the modal should close (ESC, backdrop, cancel). */
     onClose: () => void;
+    /**
+     * Design tokens to override, scoped to this picker instance. Maps to
+     * `--uploader-*` CSS variables applied on the overlay root — see UploaderTheme.
+     * Omit to use the shipped defaults (or page-level CSS-variable overrides).
+     */
+    theme?: UploaderTheme;
     /** Additional CSS class(es) applied to the modal panel. */
     className?: string;
     /** Inline styles applied to the modal panel. */
     style?: React__default.CSSProperties;
 };
-declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
+declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, theme, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
 
 /**
  * DropPane — inline drag-and-drop upload zone.
@@ -168,12 +264,18 @@ type DropPaneProps = SharedPickerProps & {
      * Default: "or click to browse · max 50 MB"
      */
     hint?: string;
+    /**
+     * Design tokens to override, scoped to this pane instance. Maps to
+     * `--uploader-*` CSS variables applied on the root element — see UploaderTheme.
+     * Omit to use the shipped defaults (or page-level CSS-variable overrides).
+     */
+    theme?: UploaderTheme;
     /** Additional CSS class(es) applied to the root element. */
     className?: string;
     /** Inline styles applied to the root element. */
     style?: React__default.CSSProperties;
 };
-declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, className, style, }: DropPaneProps): React__default.JSX.Element;
+declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, theme, className, style, }: DropPaneProps): React__default.JSX.Element;
 
 /**
  * CameraCapture — in-picker webcam capture.
@@ -287,4 +389,4 @@ type EditImageOptions = {
 };
 declare function editImage(file: File, opts?: EditImageOptions): Promise<File>;
 
-export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, usePicker };
+export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UploaderTheme, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, themeToVars, usePicker };

package/dist/index.d.ts

@@ -3,6 +3,96 @@ export { C as CropParams, O as OutputParams, a as PolicySpec, Q as QualityParams
 import * as React from 'react';
 import React__default, { CSSProperties } from 'react';
 
+/**
+ * Theming — map a plain token object to scoped CSS custom properties.
+ *
+ * The SDK is styled entirely from `--uploader-*` CSS custom properties (see
+ * styles.css). A host React app can override them in its own stylesheet, but
+ * that overrides every instance on the page and requires writing CSS.
+ *
+ * The `theme` prop on PickerOverlay / DropPane lets a host pass those tokens as
+ * a plain object instead. `themeToVars` converts the object into inline CSS
+ * variables applied to the component's own root element, so the override is
+ * **scoped to that instance** — two pickers on one page can carry different
+ * themes, and nothing leaks to the rest of the app.
+ *
+ * Only the keys you set are emitted; everything else falls back to the shipped
+ * defaults. Fully backward compatible — omit `theme` and behaviour is unchanged.
+ *
+ * @example
+ * <PickerOverlay
+ *   theme={{ accent: '#4f46e5', accentSoft: '#eef2ff', radius: '12px' }}
+ *   apikey="pk_..."
+ *   open={open}
+ *   onClose={close}
+ * />
+ */
+
+/**
+ * Host-overridable design tokens. Each maps to one `--uploader-*` CSS variable.
+ * All optional — set only what you want to change. Values are raw CSS strings
+ * (e.g. '#4f46e5', 'rgba(79,70,229,.28)', '12px', '0.2s ease').
+ */
+type UploaderTheme = {
+    /** Primary brand color. → `--uploader-accent` */
+    accent?: string;
+    /** Hover/active shade of the accent. → `--uploader-accent-hover` */
+    accentHover?: string;
+    /** Tinted fill for icon swatches and hover backgrounds. → `--uploader-accent-soft` */
+    accentSoft?: string;
+    /** Focus ring / drag-over glow (≈20–30% opacity of accent). → `--uploader-accent-ring` */
+    accentRing?: string;
+    /** Corner radius for panels, buttons, inputs. → `--uploader-radius` */
+    radius?: string;
+    /** Base surface / panel background. → `--uploader-bg` */
+    background?: string;
+    /** Secondary surface (rows, wells). → `--uploader-surface` */
+    surface?: string;
+    /** Hover state for secondary surfaces. → `--uploader-surface-hover` */
+    surfaceHover?: string;
+    /** Default border color. → `--uploader-border` */
+    border?: string;
+    /** Subtle/hairline border color. → `--uploader-border-subtle` */
+    borderSubtle?: string;
+    /** Primary text color. → `--uploader-text` */
+    text?: string;
+    /** Muted/secondary text. → `--uploader-text-muted` */
+    textMuted?: string;
+    /** Extra-muted text (hints, captions). → `--uploader-text-xmuted` */
+    textXMuted?: string;
+    /** Error color. → `--uploader-error` */
+    error?: string;
+    /** Tinted error background. → `--uploader-error-soft` */
+    errorSoft?: string;
+    /** Success color. → `--uploader-success` */
+    success?: string;
+    /** Small elevation shadow. → `--uploader-shadow-sm` */
+    shadowSm?: string;
+    /** Default elevation shadow. → `--uploader-shadow` */
+    shadow?: string;
+    /** Large elevation shadow (modal panel). → `--uploader-shadow-lg` */
+    shadowLg?: string;
+    /** Font family. Defaults to `inherit`. → `--uploader-font` */
+    font?: string;
+    /** Transition timing. → `--uploader-transition` */
+    transition?: string;
+    /** z-index of the modal backdrop. → `--uploader-z-backdrop` */
+    zBackdrop?: number | string;
+    /** z-index of the modal panel. → `--uploader-z-panel` */
+    zPanel?: number | string;
+};
+/**
+ * Convert a theme object into a style object of CSS custom properties.
+ *
+ * Returns an empty object when `theme` is undefined/empty, so it is safe to
+ * spread unconditionally. `undefined` token values are skipped (no var emitted),
+ * letting the shipped default apply.
+ *
+ * Merge it ahead of any host `style` so the host can still override per-instance:
+ *   style={{ ...themeToVars(theme), ...style }}
+ */
+declare function themeToVars(theme?: UploaderTheme): React__default.CSSProperties;
+
 /**
  * React picker prop and state types.
  *
@@ -131,12 +221,18 @@ type PickerOverlayProps = SharedPickerProps & {
     open: boolean;
     /** Called when the modal should close (ESC, backdrop, cancel). */
     onClose: () => void;
+    /**
+     * Design tokens to override, scoped to this picker instance. Maps to
+     * `--uploader-*` CSS variables applied on the overlay root — see UploaderTheme.
+     * Omit to use the shipped defaults (or page-level CSS-variable overrides).
+     */
+    theme?: UploaderTheme;
     /** Additional CSS class(es) applied to the modal panel. */
     className?: string;
     /** Inline styles applied to the modal panel. */
     style?: React__default.CSSProperties;
 };
-declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
+declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, theme, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
 
 /**
  * DropPane — inline drag-and-drop upload zone.
@@ -168,12 +264,18 @@ type DropPaneProps = SharedPickerProps & {
      * Default: "or click to browse · max 50 MB"
      */
     hint?: string;
+    /**
+     * Design tokens to override, scoped to this pane instance. Maps to
+     * `--uploader-*` CSS variables applied on the root element — see UploaderTheme.
+     * Omit to use the shipped defaults (or page-level CSS-variable overrides).
+     */
+    theme?: UploaderTheme;
     /** Additional CSS class(es) applied to the root element. */
     className?: string;
     /** Inline styles applied to the root element. */
     style?: React__default.CSSProperties;
 };
-declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, className, style, }: DropPaneProps): React__default.JSX.Element;
+declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, theme, className, style, }: DropPaneProps): React__default.JSX.Element;
 
 /**
  * CameraCapture — in-picker webcam capture.
@@ -287,4 +389,4 @@ type EditImageOptions = {
 };
 declare function editImage(file: File, opts?: EditImageOptions): Promise<File>;
 
-export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, usePicker };
+export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UploaderTheme, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, themeToVars, usePicker };

package/dist/index.js

@@ -1082,6 +1082,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
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function dialogTitle(isUploading, isDone, totalFiles, doneCount, errorCount, editingId, cameraOpen) {
@@ -1103,6 +1140,7 @@ function PickerOverlay({
   onFileUploadFinished,
   onFileUploadFailed,
   onCancel,
+  theme,
   className,
   style
 }) {
@@ -1216,6 +1254,7 @@ function PickerOverlay({
       {
         className: "uploader-backdrop",
         "data-testid": "picker-backdrop",
+        style: themeToVars(theme),
         onClick: handleClose,
         children: /* @__PURE__ */ jsxs5(
           "div",
@@ -1402,11 +1441,13 @@ function DropPane({
   onFileUploadFailed,
   onCancel,
   hint = "or click to browse \xB7 max 50 MB",
+  theme,
   className,
   style
 }) {
   const [isDragOver, setIsDragOver] = useState5(false);
   const [cameraOpen, setCameraOpen] = useState5(false);
+  const rootStyle = { ...themeToVars(theme), ...style };
   const { files, addFiles, removeFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
     apikey,
     apiUrl,
@@ -1452,7 +1493,7 @@ function DropPane({
       {
         className: ["uploader-drop-pane", className ?? ""].filter(Boolean).join(" "),
         "data-testid": "drop-pane",
-        style,
+        style: rootStyle,
         children: /* @__PURE__ */ jsx7(
           CameraCapture,
           {
@@ -1473,7 +1514,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__ */ jsx7(
           Dropzone,
@@ -1584,6 +1625,7 @@ export {
   resize,
   rotate,
   shouldOfferCamera,
+  themeToVars,
   transformUrl,
   usePicker
 };