@igorvaryvoda/sirv-upload-widget 0.1.2 → 0.1.4

package/README.md

@@ -10,6 +10,7 @@ A React file upload widget for [Sirv CDN](https://sirv.com) with batch uploads,
 - **Sirv file picker** to browse existing files
 - **HEIC/HEIF conversion** for iPhone photos
 - **Presigned URL support** for secure direct uploads
+- **Dark mode** with automatic system preference detection
 - **Customizable styling** via CSS variables
 - **TypeScript** support with full type definitions
 
@@ -98,6 +99,7 @@ export default function UploadPage() {
 | `onConflict` | `'overwrite' \| 'rename' \| 'skip' \| 'ask'` | `'rename'` | Filename conflict handling |
 | `disabled` | `boolean` | `false` | Disable the widget |
 | `compact` | `boolean` | `false` | Compact mode for smaller spaces |
+| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Color theme (auto follows system preference) |
 | `labels` | `object` | - | Custom labels for i18n |
 | `className` | `string` | - | Custom CSS class |
 
@@ -112,6 +114,25 @@ features?: {
 }
 ```
 
+## Dark Mode
+
+The widget supports dark mode out of the box with three options:
+
+```tsx
+// Auto (default) - follows system preference
+<SirvUploader theme="auto" ... />
+
+// Force light mode
+<SirvUploader theme="light" ... />
+
+// Force dark mode
+<SirvUploader theme="dark" ... />
+```
+
+Dark mode automatically activates when:
+- `theme="auto"` (default) and the user's system prefers dark mode
+- `theme="dark"` is explicitly set
+
 ## Styling
 
 Customize the widget using CSS variables:
@@ -128,6 +149,19 @@ Customize the widget using CSS variables:
 }
 ```
 
+For dark mode customization, override the dark theme variables:
+
+```css
+@media (prefers-color-scheme: dark) {
+  .sirv-uploader {
+    --sirv-primary: #3b82f6;
+    --sirv-bg: #1e1e1e;
+    --sirv-text: #e5e5e5;
+    /* ... */
+  }
+}
+```
+
 ## Individual Components
 
 For custom layouts, you can use the components individually:

package/dist/index.d.mts

@@ -264,6 +264,14 @@ interface SirvUploaderProps {
      * Compact mode for smaller spaces.
      */
     compact?: boolean;
+    /**
+     * Color theme.
+     * - 'auto': Follow system preference (default)
+     * - 'light': Force light mode
+     * - 'dark': Force dark mode
+     * @default 'auto'
+     */
+    theme?: 'auto' | 'light' | 'dark';
     /**
      * Custom labels for i18n.
      */
@@ -383,7 +391,7 @@ interface CsvParseResult {
     invalidCount: number;
 }
 
-declare function SirvUploader({ presignEndpoint, proxyEndpoint, sirvAccount, folder, onUpload, onError, onSelect, onRemove, features, maxFiles, maxFileSize, accept, onConflict, autoUpload, concurrency, className, disabled, compact, labels: customLabels, children, }: SirvUploaderProps): react_jsx_runtime.JSX.Element;
+declare function SirvUploader({ presignEndpoint, proxyEndpoint, sirvAccount, folder, onUpload, onError, onSelect, onRemove, features, maxFiles, maxFileSize, accept, onConflict, autoUpload, concurrency, className, disabled, compact, theme, labels: customLabels, children, }: SirvUploaderProps): react_jsx_runtime.JSX.Element;
 
 interface DropZoneProps {
     onFiles: (files: SirvFile[]) => void;

package/dist/index.d.ts

@@ -264,6 +264,14 @@ interface SirvUploaderProps {
      * Compact mode for smaller spaces.
      */
     compact?: boolean;
+    /**
+     * Color theme.
+     * - 'auto': Follow system preference (default)
+     * - 'light': Force light mode
+     * - 'dark': Force dark mode
+     * @default 'auto'
+     */
+    theme?: 'auto' | 'light' | 'dark';
     /**
      * Custom labels for i18n.
      */
@@ -383,7 +391,7 @@ interface CsvParseResult {
     invalidCount: number;
 }
 
-declare function SirvUploader({ presignEndpoint, proxyEndpoint, sirvAccount, folder, onUpload, onError, onSelect, onRemove, features, maxFiles, maxFileSize, accept, onConflict, autoUpload, concurrency, className, disabled, compact, labels: customLabels, children, }: SirvUploaderProps): react_jsx_runtime.JSX.Element;
+declare function SirvUploader({ presignEndpoint, proxyEndpoint, sirvAccount, folder, onUpload, onError, onSelect, onRemove, features, maxFiles, maxFileSize, accept, onConflict, autoUpload, concurrency, className, disabled, compact, theme, labels: customLabels, children, }: SirvUploaderProps): react_jsx_runtime.JSX.Element;
 
 interface DropZoneProps {
     onFiles: (files: SirvFile[]) => void;

package/dist/index.js

@@ -1570,6 +1570,7 @@ function SirvUploader({
   className,
   disabled = false,
   compact = false,
+  theme = "auto",
   labels: customLabels = {},
   children
 }) {
@@ -1646,7 +1647,8 @@ function SirvUploader({
   const hasPendingFiles = upload.files.some((f) => f.status === "pending" || f.status === "error");
   const showTabs = csvImport && batch;
   const browseEndpoint = proxyEndpoint || (presignEndpoint ? presignEndpoint.replace(/\/presign$/, "") : "");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx2__default.default("sirv-uploader", className), children: [
+  const themeClass = theme === "dark" ? "sirv-uploader--dark" : theme === "light" ? "sirv-uploader--light" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx2__default.default("sirv-uploader", themeClass, className), children: [
     showTabs && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sirv-tabs", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",