@unciatech/file-manager 0.0.32 → 0.0.33

package/dist/{mock-provider-nCBvw7nl.d.cts → mock-provider-DrtiUc3h.d.cts}

@@ -172,7 +172,20 @@ interface FileManagerPageProps {
     viewMode: ViewMode;
     initialFolderId?: FolderId;
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
+    /**
+     * Optional navigation callback. When provided, the library delegates all
+     * URL navigation to this function instead of calling history.pushState
+     * directly. Use this to plug in your own router:
+     *   - React Router:    onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+     *   - Next.js:         onNavigate={(url, opts) => opts?.replace ? router.replace(url) : router.push(url)}
+     *   - TanStack Router: onNavigate={(url, opts) => router.navigate({ href: url, replace: opts?.replace })}
+     * If omitted, falls back to history.pushState (works in any bare React app).
+     */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileManagerModalProps {
     open: boolean;
@@ -184,7 +197,12 @@ interface FileManagerModalProps {
     viewMode?: ViewMode;
     initialFolderId?: FolderId;
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileManagerRootProps {
     mode: Mode;
@@ -194,11 +212,16 @@ interface FileManagerRootProps {
     initialFolderId?: FolderId;
     acceptedFileTypesForModal?: FileType[];
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
     onFilesSelected?: (files: FileMetaData[]) => void;
     onClose?: () => void;
     maxUploadFiles?: number;
     maxUploadSize?: number;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileStateOptions {
     mode: Mode;
@@ -207,9 +230,14 @@ interface FileStateOptions {
     acceptedFileTypesForModal?: FileType[];
     allowedFileTypes?: FileType[];
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
     onFilesSelected?: (files: FileMetaData[]) => void;
     onClose?: () => void;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 
 declare class MockProvider implements IFileManagerProvider {

package/dist/{mock-provider-nCBvw7nl.d.ts → mock-provider-DrtiUc3h.d.ts}

@@ -172,7 +172,20 @@ interface FileManagerPageProps {
     viewMode: ViewMode;
     initialFolderId?: FolderId;
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
+    /**
+     * Optional navigation callback. When provided, the library delegates all
+     * URL navigation to this function instead of calling history.pushState
+     * directly. Use this to plug in your own router:
+     *   - React Router:    onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+     *   - Next.js:         onNavigate={(url, opts) => opts?.replace ? router.replace(url) : router.push(url)}
+     *   - TanStack Router: onNavigate={(url, opts) => router.navigate({ href: url, replace: opts?.replace })}
+     * If omitted, falls back to history.pushState (works in any bare React app).
+     */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileManagerModalProps {
     open: boolean;
@@ -184,7 +197,12 @@ interface FileManagerModalProps {
     viewMode?: ViewMode;
     initialFolderId?: FolderId;
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileManagerRootProps {
     mode: Mode;
@@ -194,11 +212,16 @@ interface FileManagerRootProps {
     initialFolderId?: FolderId;
     acceptedFileTypesForModal?: FileType[];
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
     onFilesSelected?: (files: FileMetaData[]) => void;
     onClose?: () => void;
     maxUploadFiles?: number;
     maxUploadSize?: number;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 interface FileStateOptions {
     mode: Mode;
@@ -207,9 +230,14 @@ interface FileStateOptions {
     acceptedFileTypesForModal?: FileType[];
     allowedFileTypes?: FileType[];
     provider: IFileManagerProvider;
-    basePath?: string;
+    basePath: string;
     onFilesSelected?: (files: FileMetaData[]) => void;
     onClose?: () => void;
+    /** @see FileManagerPageProps.onNavigate */
+    onNavigate?: (url: string, options?: {
+        replace?: boolean;
+        scroll?: boolean;
+    }) => void;
 }
 
 declare class MockProvider implements IFileManagerProvider {

package/dist/mock.d.cts

@@ -1 +1 @@
-export { o as MockProvider } from './mock-provider-nCBvw7nl.cjs';
+export { o as MockProvider } from './mock-provider-DrtiUc3h.cjs';

package/dist/mock.d.ts

@@ -1 +1 @@
-export { o as MockProvider } from './mock-provider-nCBvw7nl.js';
+export { o as MockProvider } from './mock-provider-DrtiUc3h.js';

package/dist/styles.css

@@ -1,62 +1,81 @@
-/* @unciatech/file-manager — base styles
- * Import this in your root layout to provide the CSS variables the
- * file manager components depend on.
+/* @unciatech/file-manager — Tailwind v4 Theme
+ * Import this in your root CSS to automatically inject all required colors.
  *
- * Usage: import '@unciatech/file-manager/styles';
- *
- * How it works with Tailwind v4:
- *   Tailwind utility classes (e.g. bg-primary) resolve to var(--color-primary).
- *   This file defines those --color-* variables directly so they work in any
- *   consumer app without needing a @theme block or additional Tailwind config.
+ * Usage in your globals.css or index.css:
+ *   @import "tailwindcss";
+ *   @import "@unciatech/file-manager/styles";
+ *   @source "../node_modules/@unciatech/file-manager";
  */
 
-/* ── Light mode ───────────────────────────────────────────────── */
-:root {
-  --color-background:        #ffffff;
-  --color-foreground:        #09090b;   /* zinc-950 */
-  --color-card:              #ffffff;
-  --color-card-foreground:   #09090b;
-  --color-popover:           #ffffff;
-  --color-popover-foreground:#09090b;
-  --color-primary:           #3b82f6;   /* blue-500 */
-  --color-primary-foreground:#ffffff;
-  --color-secondary:         #f4f4f5;   /* zinc-100 */
-  --color-secondary-foreground:#18181b;
-  --color-muted:             #f4f4f5;
-  --color-muted-foreground:  #71717a;   /* zinc-500 */
-  --color-accent:            #f4f4f5;
-  --color-accent-foreground: #18181b;
-  --color-destructive:       #dc2626;   /* red-600 */
-  --color-destructive-foreground:#ffffff;
-  --color-border:            oklch(94% 0.004 286.32);
-  --color-input:             #e4e4e7;   /* zinc-200 */
-  --color-ring:              #a1a1aa;   /* zinc-400 */
-  --radius:                  0.5rem;
-}
-
+@custom-variant dark (&:is(.dark *));
 
-
-/* Manual .dark class (toggle button override) */
-.dark {
-  --color-background:        #09090b;
-  --color-foreground:        #fafafa;
-  --color-card:              #09090b;
-  --color-card-foreground:   #fafafa;
-  --color-popover:           #09090b;
-  --color-popover-foreground:#fafafa;
-  --color-primary:           #2563eb;
-  --color-primary-foreground:#ffffff;
-  --color-secondary:         #27272a;
-  --color-secondary-foreground:#fafafa;
-  --color-muted:             #18181b;
-  --color-muted-foreground:  #71717a;
-  --color-accent:            #18181b;
-  --color-accent-foreground: #fafafa;
-  --color-destructive:       #dc2626;
-  --color-destructive-foreground:#ffffff;
-  --color-border:            #27272a;
-  --color-input:             #27272a;
-  --color-ring:              #52525b;
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 }
 
-
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}

package/dist/styles.d.ts

@@ -0,0 +1 @@
+declare const styles: any; export default styles;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unciatech/file-manager",
-  "version": "0.0.32",
-  "description": "Modern file manager component for React and Next.js",
+  "version": "0.0.33",
+  "description": "Modern file manager component for React applications",
   "author": "Avi",
   "license": "MIT",
   "homepage": "https://github.com/unciatech/file-manager",
@@ -35,7 +35,11 @@
       "import": "./dist/mock.js",
       "require": "./dist/mock.cjs"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    }
   },
   "files": [
     "dist",
@@ -51,7 +55,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "tsup && cp styles.css dist/styles.css",
+    "build:pkg": "tsup && cp styles.css dist/styles.css && echo 'declare const styles: any; export default styles;' > dist/styles.d.ts",
     "clean": "rm -rf dist .next",
     "prepublish": "npm run build:pkg",
     "release": "npm run build:pkg && npm publish",
@@ -74,7 +78,6 @@
     "@radix-ui/react-context-menu": "^2",
     "@radix-ui/react-dialog": "^1",
     "@radix-ui/react-tooltip": "^1",
-    "next": "^14 || ^15 || ^16",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

package/styles.css

@@ -1,62 +1,81 @@
-/* @unciatech/file-manager — base styles
- * Import this in your root layout to provide the CSS variables the
- * file manager components depend on.
+/* @unciatech/file-manager — Tailwind v4 Theme
+ * Import this in your root CSS to automatically inject all required colors.
  *
- * Usage: import '@unciatech/file-manager/styles';
- *
- * How it works with Tailwind v4:
- *   Tailwind utility classes (e.g. bg-primary) resolve to var(--color-primary).
- *   This file defines those --color-* variables directly so they work in any
- *   consumer app without needing a @theme block or additional Tailwind config.
+ * Usage in your globals.css or index.css:
+ *   @import "tailwindcss";
+ *   @import "@unciatech/file-manager/styles";
+ *   @source "../node_modules/@unciatech/file-manager";
  */
 
-/* ── Light mode ───────────────────────────────────────────────── */
-:root {
-  --color-background:        #ffffff;
-  --color-foreground:        #09090b;   /* zinc-950 */
-  --color-card:              #ffffff;
-  --color-card-foreground:   #09090b;
-  --color-popover:           #ffffff;
-  --color-popover-foreground:#09090b;
-  --color-primary:           #3b82f6;   /* blue-500 */
-  --color-primary-foreground:#ffffff;
-  --color-secondary:         #f4f4f5;   /* zinc-100 */
-  --color-secondary-foreground:#18181b;
-  --color-muted:             #f4f4f5;
-  --color-muted-foreground:  #71717a;   /* zinc-500 */
-  --color-accent:            #f4f4f5;
-  --color-accent-foreground: #18181b;
-  --color-destructive:       #dc2626;   /* red-600 */
-  --color-destructive-foreground:#ffffff;
-  --color-border:            oklch(94% 0.004 286.32);
-  --color-input:             #e4e4e7;   /* zinc-200 */
-  --color-ring:              #a1a1aa;   /* zinc-400 */
-  --radius:                  0.5rem;
-}
-
+@custom-variant dark (&:is(.dark *));
 
-
-/* Manual .dark class (toggle button override) */
-.dark {
-  --color-background:        #09090b;
-  --color-foreground:        #fafafa;
-  --color-card:              #09090b;
-  --color-card-foreground:   #fafafa;
-  --color-popover:           #09090b;
-  --color-popover-foreground:#fafafa;
-  --color-primary:           #2563eb;
-  --color-primary-foreground:#ffffff;
-  --color-secondary:         #27272a;
-  --color-secondary-foreground:#fafafa;
-  --color-muted:             #18181b;
-  --color-muted-foreground:  #71717a;
-  --color-accent:            #18181b;
-  --color-accent-foreground: #fafafa;
-  --color-destructive:       #dc2626;
-  --color-destructive-foreground:#ffffff;
-  --color-border:            #27272a;
-  --color-input:             #27272a;
-  --color-ring:              #52525b;
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 }
 
-
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}