@plugable-io/react 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +111 -0
  2. package/dist/index.d.mts +32 -3
  3. package/dist/index.d.ts +32 -3
  4. package/dist/index.js +389 -99
  5. package/dist/index.mjs +395 -108
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -67,6 +67,117 @@ function App() {
67
67
  </PlugableProvider>
68
68
  ```
69
69
 
70
+ ### Theme Customization
71
+
72
+ The library comes with gorgeous default styling inspired by modern design principles. You can easily customize the appearance using theme props:
73
+
74
+ #### Dark Mode (Default)
75
+
76
+ ```tsx
77
+ <PlugableProvider
78
+ bucketId="your-bucket-id"
79
+ authProvider="clerk"
80
+ theme="dark" // or omit - dark is default
81
+ >
82
+ <YourApp />
83
+ </PlugableProvider>
84
+ ```
85
+
86
+ #### Light Mode
87
+
88
+ ```tsx
89
+ <PlugableProvider
90
+ bucketId="your-bucket-id"
91
+ authProvider="clerk"
92
+ theme="light"
93
+ >
94
+ <YourApp />
95
+ </PlugableProvider>
96
+ ```
97
+
98
+ #### Auto (System Preference)
99
+
100
+ ```tsx
101
+ <PlugableProvider
102
+ bucketId="your-bucket-id"
103
+ authProvider="clerk"
104
+ theme="auto" // Follows user's system preference
105
+ >
106
+ <YourApp />
107
+ </PlugableProvider>
108
+ ```
109
+
110
+ #### Custom Accent Color
111
+
112
+ ```tsx
113
+ <PlugableProvider
114
+ bucketId="your-bucket-id"
115
+ authProvider="clerk"
116
+ accentColor="#10b981" // Green accent
117
+ >
118
+ <YourApp />
119
+ </PlugableProvider>
120
+ ```
121
+
122
+ #### Custom Base Color
123
+
124
+ ```tsx
125
+ <PlugableProvider
126
+ bucketId="your-bucket-id"
127
+ authProvider="clerk"
128
+ baseColor="#1e293b" // Custom background
129
+ theme="dark"
130
+ >
131
+ <YourApp />
132
+ </PlugableProvider>
133
+ ```
134
+
135
+ #### Complete Custom Theme
136
+
137
+ ```tsx
138
+ <PlugableProvider
139
+ bucketId="your-bucket-id"
140
+ authProvider="clerk"
141
+ theme="light"
142
+ accentColor="#0ea5e9" // Cyan accent
143
+ baseColor="#f8fafc" // Light gray background
144
+ >
145
+ <YourApp />
146
+ </PlugableProvider>
147
+ ```
148
+
149
+ ### CSS Variables
150
+
151
+ The library uses CSS variables for theming, which are scoped to prevent conflicts with your app's styles. You can override any variable:
152
+
153
+ ```css
154
+ .plugable-root {
155
+ /* Accent colors */
156
+ --plugable-accent-primary: #9333ea;
157
+ --plugable-accent-secondary: #2563eb;
158
+ --plugable-accent-hover: #7c3aed;
159
+
160
+ /* Base colors */
161
+ --plugable-base-bg: #0f172a;
162
+ --plugable-base-surface: rgba(30, 41, 59, 0.5);
163
+ --plugable-base-border: rgba(255, 255, 255, 0.1);
164
+
165
+ /* Text colors */
166
+ --plugable-text-primary: #f1f5f9;
167
+ --plugable-text-secondary: #cbd5e1;
168
+ --plugable-text-muted: #64748b;
169
+
170
+ /* State colors */
171
+ --plugable-success: #34d399;
172
+ --plugable-error: #f87171;
173
+ --plugable-warning: #fbbf24;
174
+
175
+ /* Effects */
176
+ --plugable-overlay: rgba(0, 0, 0, 0.3);
177
+ --plugable-backdrop-blur: blur(24px);
178
+ }
179
+ ```
180
+
70
181
  ---
71
182
 
72
183
  ## Dropzone
package/dist/index.d.mts CHANGED
@@ -3,7 +3,7 @@ import React, { ReactNode, CSSProperties } from 'react';
3
3
  import { BucketClient, FileObject, ListResponse } from '@plugable-io/js';
4
4
  export { FileObject, SearchOptions, UpdateOptions } from '@plugable-io/js';
5
5
 
6
- type AuthProvider = 'clerk' | 'supabase' | 'firebase';
6
+ type AuthProvider = 'clerk' | 'supabase' | 'firebase' | 'generic_jwks' | 'generic_jwt';
7
7
  interface PlugableProviderProps {
8
8
  bucketId: string;
9
9
  children: ReactNode;
@@ -12,6 +12,9 @@ interface PlugableProviderProps {
12
12
  clerkJWTTemplate?: string;
13
13
  baseUrl?: string;
14
14
  staleTime?: number;
15
+ accentColor?: string;
16
+ baseColor?: string;
17
+ theme?: 'light' | 'dark' | 'auto';
15
18
  }
16
19
  type PlugableEventType = 'file.uploaded' | 'file.deleted';
17
20
  type EventHandler = (data?: any) => void;
@@ -32,7 +35,8 @@ interface PlugableContextValue {
32
35
  setCache: (key: string, entry: CacheEntry) => void;
33
36
  invalidateCache: (pattern?: string) => void;
34
37
  }
35
- declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, staleTime, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
38
+ declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, staleTime, // Default 5 minutes
39
+ accentColor, baseColor, theme, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
36
40
  declare function usePlugable(): PlugableContextValue;
37
41
 
38
42
  interface DropzoneProps {
@@ -134,4 +138,29 @@ interface UseFilesResult {
134
138
  }
135
139
  declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, }?: UseFilesOptions): UseFilesResult;
136
140
 
137
- export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };
141
+ interface ThemeConfig {
142
+ accentColor?: string;
143
+ baseColor?: string;
144
+ theme?: 'light' | 'dark' | 'auto';
145
+ }
146
+ interface ThemeColors {
147
+ accentPrimary: string;
148
+ accentSecondary: string;
149
+ accentHover: string;
150
+ baseBg: string;
151
+ baseSurface: string;
152
+ baseBorder: string;
153
+ textPrimary: string;
154
+ textSecondary: string;
155
+ textMuted: string;
156
+ success: string;
157
+ error: string;
158
+ warning: string;
159
+ overlay: string;
160
+ backdropBlur: string;
161
+ }
162
+ declare function getThemeColors(config?: ThemeConfig): ThemeColors;
163
+ declare function generateCSSVariables(colors: ThemeColors): Record<string, string>;
164
+ declare function applyCSSVariables(element: HTMLElement, config?: ThemeConfig): void;
165
+
166
+ export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type ThemeColors, type ThemeConfig, type UseFilesOptions, type UseFilesResult, applyCSSVariables, clearImageCache, generateCSSVariables, getThemeColors, useFiles, usePlugable };
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import React, { ReactNode, CSSProperties } from 'react';
3
3
  import { BucketClient, FileObject, ListResponse } from '@plugable-io/js';
4
4
  export { FileObject, SearchOptions, UpdateOptions } from '@plugable-io/js';
5
5
 
6
- type AuthProvider = 'clerk' | 'supabase' | 'firebase';
6
+ type AuthProvider = 'clerk' | 'supabase' | 'firebase' | 'generic_jwks' | 'generic_jwt';
7
7
  interface PlugableProviderProps {
8
8
  bucketId: string;
9
9
  children: ReactNode;
@@ -12,6 +12,9 @@ interface PlugableProviderProps {
12
12
  clerkJWTTemplate?: string;
13
13
  baseUrl?: string;
14
14
  staleTime?: number;
15
+ accentColor?: string;
16
+ baseColor?: string;
17
+ theme?: 'light' | 'dark' | 'auto';
15
18
  }
16
19
  type PlugableEventType = 'file.uploaded' | 'file.deleted';
17
20
  type EventHandler = (data?: any) => void;
@@ -32,7 +35,8 @@ interface PlugableContextValue {
32
35
  setCache: (key: string, entry: CacheEntry) => void;
33
36
  invalidateCache: (pattern?: string) => void;
34
37
  }
35
- declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, staleTime, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
38
+ declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, staleTime, // Default 5 minutes
39
+ accentColor, baseColor, theme, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
36
40
  declare function usePlugable(): PlugableContextValue;
37
41
 
38
42
  interface DropzoneProps {
@@ -134,4 +138,29 @@ interface UseFilesResult {
134
138
  }
135
139
  declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, }?: UseFilesOptions): UseFilesResult;
136
140
 
137
- export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };
141
+ interface ThemeConfig {
142
+ accentColor?: string;
143
+ baseColor?: string;
144
+ theme?: 'light' | 'dark' | 'auto';
145
+ }
146
+ interface ThemeColors {
147
+ accentPrimary: string;
148
+ accentSecondary: string;
149
+ accentHover: string;
150
+ baseBg: string;
151
+ baseSurface: string;
152
+ baseBorder: string;
153
+ textPrimary: string;
154
+ textSecondary: string;
155
+ textMuted: string;
156
+ success: string;
157
+ error: string;
158
+ warning: string;
159
+ overlay: string;
160
+ backdropBlur: string;
161
+ }
162
+ declare function getThemeColors(config?: ThemeConfig): ThemeColors;
163
+ declare function generateCSSVariables(colors: ThemeColors): Record<string, string>;
164
+ declare function applyCSSVariables(element: HTMLElement, config?: ThemeConfig): void;
165
+
166
+ export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type ThemeColors, type ThemeConfig, type UseFilesOptions, type UseFilesResult, applyCSSVariables, clearImageCache, generateCSSVariables, getThemeColors, useFiles, usePlugable };