s3kit 0.1.0

package/dist/react/index.css

@@ -0,0 +1,155 @@
+/* src/react/FileManager.module.css */
+.root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  height: 100%;
+  font-family:
+    "Geist",
+    "Inter",
+    -apple-system,
+    sans-serif;
+  font-size: 13px;
+  color: var(--s3kit-text);
+  background-color: var(--s3kit-bg);
+  border: 1px solid var(--s3kit-border);
+  overflow: hidden;
+  position: relative;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--s3kit-bg);
+  transition: all 0.2s ease;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--s3kit-border);
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.navTabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 16px;
+}
+.navTab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s;
+  border: none;
+  background: none;
+}
+.tableHeader {
+  display: grid;
+  border-bottom: 1px solid var(--s3kit-border);
+  background-color: var(--s3kit-bg);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--s3kit-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+.row {
+  display: grid;
+  align-items: center;
+  border-bottom: 1px solid var(--s3kit-border);
+  cursor: pointer;
+}
+.sidebarRight {
+  background-color: var(--s3kit-bg);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  will-change: transform, opacity;
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+}
+.previewPortal {
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  pointer-events: none;
+}
+.previewBox {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--s3kit-bg-secondary);
+  border-bottom: 1px solid var(--s3kit-border);
+  padding: 20px;
+}
+.metadata {
+  padding: 24px;
+}
+.metaItem {
+  margin-bottom: 16px;
+}
+.metaLabel {
+  font-size: 11px;
+  color: var(--s3kit-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+.metaValue {
+  font-size: 13px;
+  color: var(--s3kit-text);
+  word-break: break-all;
+}
+@keyframes tokoPreviewSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes tokoPreviewSlideOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+.spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--s3kit-text-secondary);
+  border-top-color: var(--s3kit-accent, var(--s3kit-text));
+  border-radius: 50%;
+  animation: tokoSpin 0.8s linear infinite;
+  display: inline-block;
+}
+@keyframes tokoSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/react/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/FileManager.module.css"],"sourcesContent":[".root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: minmax(0, 1fr);\n  height: 100%;\n  font-family:\n    'Geist',\n    'Inter',\n    -apple-system,\n    sans-serif;\n  font-size: 13px;\n  color: var(--s3kit-text);\n  background-color: var(--s3kit-bg);\n  border: 1px solid var(--s3kit-border);\n  overflow: hidden;\n  position: relative;\n}\n\n.main {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background-color: var(--s3kit-bg);\n  transition: all 0.2s ease;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--s3kit-border);\n  flex-direction: row;\n  flex-wrap: nowrap;\n}\n\n.navTabs {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: 16px;\n}\n\n.navTab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.15s;\n  border: none;\n  background: none;\n}\n\n.tableHeader {\n  display: grid;\n  border-bottom: 1px solid var(--s3kit-border);\n  background-color: var(--s3kit-bg);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--s3kit-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  position: sticky;\n  top: 0;\n  z-index: 5;\n}\n\n.row {\n  display: grid;\n  align-items: center;\n  border-bottom: 1px solid var(--s3kit-border);\n  cursor: pointer;\n}\n\n.sidebarRight {\n  background-color: var(--s3kit-bg);\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  will-change: transform, opacity;\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10;\n}\n\n.previewPortal {\n  position: absolute;\n  inset: 0;\n  z-index: 9;\n  pointer-events: none;\n}\n\n.previewBox {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--s3kit-bg-secondary);\n  border-bottom: 1px solid var(--s3kit-border);\n  padding: 20px;\n}\n\n.metadata {\n  padding: 24px;\n}\n\n.metaItem {\n  margin-bottom: 16px;\n}\n\n.metaLabel {\n  font-size: 11px;\n  color: var(--s3kit-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 4px;\n}\n\n.metaValue {\n  font-size: 13px;\n  color: var(--s3kit-text);\n  word-break: break-all;\n}\n\n@keyframes tokoPreviewSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes tokoPreviewSlideOut {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(12px);\n  }\n}\n\n.spinner {\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--s3kit-text-secondary);\n  border-top-color: var(--s3kit-accent, var(--s3kit-text));\n  border-radius: 50%;\n  animation: tokoSpin 0.8s linear infinite;\n  display: inline-block;\n}\n\n@keyframes tokoSpin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,yBAAuB;AACvB,sBAAoB,OAAO,CAAC,EAAE;AAC9B,UAAQ;AACR;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb;AACF,aAAW;AACX,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,YAAU;AACV,YAAU;AACZ;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,cAAY;AACZ,UAAQ;AACR,oBAAkB,IAAI;AACtB,cAAY,IAAI,KAAK;AACvB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe,IAAI,MAAM,IAAI;AAC7B,kBAAgB;AAChB,aAAW;AACb;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,gBAAc;AAChB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS,IAAI;AACb,UAAQ;AACR,aAAW;AACX,eAAa;AACb,cAAY,IAAI;AAChB,UAAQ;AACR,cAAY;AACd;AAEA,CAAC;AACC,WAAS;AACT,iBAAe,IAAI,MAAM,IAAI;AAC7B,oBAAkB,IAAI;AACtB,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACX,kBAAgB;AAChB,kBAAgB;AAChB,YAAU;AACV,OAAK;AACL,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,iBAAe,IAAI,MAAM,IAAI;AAC7B,UAAQ;AACV;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,WAAS;AACT,WAAS;AACT,kBAAgB;AAChB,eAAa,SAAS,EAAE;AACxB,YAAU;AACV,cAAY;AACZ,YAAU;AACV,SAAO;AACP,OAAK;AACL,UAAQ;AACR,WAAS;AACX;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,SAAO;AACP,gBAAc,EAAE,EAAE;AAClB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,oBAAkB,IAAI;AACtB,iBAAe,IAAI,MAAM,IAAI;AAC7B,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,iBAAe;AACjB;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,kBAAgB;AAChB,kBAAgB;AAChB,iBAAe;AACjB;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,cAAY;AACd;AAEA,WAAW;AACT;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,UAAQ,IAAI,MAAM,IAAI;AACtB,oBAAkB,IAAI,cAAc,EAAE,IAAI;AAC1C,iBAAe;AACf,aAAW,SAAS,KAAK,OAAO;AAChC,WAAS;AACX;AAEA,WAJa;AAKX;AACE,eAAW,OAAO;AACpB;AACF;","names":[]}

package/dist/react/index.d.cts

@@ -0,0 +1,79 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { i as S3Entry } from '../types-g2IYvH3O.cjs';
+
+interface FileManagerProps {
+    /** API endpoint URL, e.g., "/api/s3" */
+    apiUrl: string;
+    /** Custom fetch function for auth headers */
+    fetch?: typeof fetch;
+    /** Called when a file is selected */
+    onFileSelect?: (file: S3Entry) => void;
+    /** Called when selection changes */
+    onSelectionChange?: (entries: S3Entry[]) => void;
+    /** Called when confirming selection (picker mode) */
+    onConfirm?: (entries: S3Entry[]) => void;
+    /** Called when navigating to a path */
+    onNavigate?: (path: string) => void;
+    /** Custom className for the root element */
+    className?: string;
+    /** Custom styles for the root element */
+    style?: CSSProperties;
+    /** Theme mode: 'light', 'dark', or 'system' */
+    theme?: 'light' | 'dark' | 'system';
+    /** UI mode */
+    mode?: 'viewer' | 'picker' | 'manager';
+    /** Selection type */
+    selection?: 'single' | 'multiple';
+    /** Action gates */
+    allowActions?: Partial<{
+        upload: boolean;
+        createFolder: boolean;
+        delete: boolean;
+        rename: boolean;
+        move: boolean;
+        copy: boolean;
+        restore: boolean;
+    }>;
+    /** Picker confirm button label */
+    confirmLabel?: string;
+    /** Hide Trash folder and trash view */
+    hideTrash?: boolean;
+    /** Optional extension filter (e.g. ['jpg','png']) */
+    filterExtensions?: string[];
+    /** Optional mime type filter (e.g. ['image/jpeg','application/pdf']) */
+    filterMimeTypes?: string[];
+    /** Toolbar controls */
+    toolbar?: Partial<{
+        search: boolean;
+        viewSwitcher: boolean;
+        sort: boolean;
+        breadcrumbs: boolean;
+    }>;
+    /** Controlled view mode */
+    viewMode?: 'list' | 'grid';
+    /** Default view mode (uncontrolled) */
+    defaultViewMode?: 'list' | 'grid';
+    /** Called when view mode changes */
+    onViewModeChange?: (mode: 'list' | 'grid') => void;
+    /** Label overrides */
+    labels?: Partial<{
+        upload: string;
+        newFolder: string;
+        delete: string;
+        deleteForever: string;
+        restore: string;
+        emptyTrash: string;
+        confirm: string;
+        searchPlaceholder: string;
+    }>;
+}
+
+declare function FileManager({ apiUrl, fetch: customFetch, onFileSelect, onSelectionChange, onConfirm, onNavigate, className, style, theme: themeMode, mode, selection, allowActions, confirmLabel, hideTrash, filterExtensions, filterMimeTypes, toolbar, viewMode: viewModeProp, defaultViewMode, onViewModeChange, labels, }: FileManagerProps): react_jsx_runtime.JSX.Element;
+
+interface FilePickerProps extends Omit<FileManagerProps, 'mode' | 'selection'> {
+    selection?: 'single' | 'multiple';
+}
+declare function FilePicker({ selection, allowActions, confirmLabel, ...props }: FilePickerProps): react_jsx_runtime.JSX.Element;
+
+export { FileManager, type FileManagerProps, FilePicker, type FilePickerProps };

package/dist/react/index.d.ts

@@ -0,0 +1,79 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { i as S3Entry } from '../types-g2IYvH3O.js';
+
+interface FileManagerProps {
+    /** API endpoint URL, e.g., "/api/s3" */
+    apiUrl: string;
+    /** Custom fetch function for auth headers */
+    fetch?: typeof fetch;
+    /** Called when a file is selected */
+    onFileSelect?: (file: S3Entry) => void;
+    /** Called when selection changes */
+    onSelectionChange?: (entries: S3Entry[]) => void;
+    /** Called when confirming selection (picker mode) */
+    onConfirm?: (entries: S3Entry[]) => void;
+    /** Called when navigating to a path */
+    onNavigate?: (path: string) => void;
+    /** Custom className for the root element */
+    className?: string;
+    /** Custom styles for the root element */
+    style?: CSSProperties;
+    /** Theme mode: 'light', 'dark', or 'system' */
+    theme?: 'light' | 'dark' | 'system';
+    /** UI mode */
+    mode?: 'viewer' | 'picker' | 'manager';
+    /** Selection type */
+    selection?: 'single' | 'multiple';
+    /** Action gates */
+    allowActions?: Partial<{
+        upload: boolean;
+        createFolder: boolean;
+        delete: boolean;
+        rename: boolean;
+        move: boolean;
+        copy: boolean;
+        restore: boolean;
+    }>;
+    /** Picker confirm button label */
+    confirmLabel?: string;
+    /** Hide Trash folder and trash view */
+    hideTrash?: boolean;
+    /** Optional extension filter (e.g. ['jpg','png']) */
+    filterExtensions?: string[];
+    /** Optional mime type filter (e.g. ['image/jpeg','application/pdf']) */
+    filterMimeTypes?: string[];
+    /** Toolbar controls */
+    toolbar?: Partial<{
+        search: boolean;
+        viewSwitcher: boolean;
+        sort: boolean;
+        breadcrumbs: boolean;
+    }>;
+    /** Controlled view mode */
+    viewMode?: 'list' | 'grid';
+    /** Default view mode (uncontrolled) */
+    defaultViewMode?: 'list' | 'grid';
+    /** Called when view mode changes */
+    onViewModeChange?: (mode: 'list' | 'grid') => void;
+    /** Label overrides */
+    labels?: Partial<{
+        upload: string;
+        newFolder: string;
+        delete: string;
+        deleteForever: string;
+        restore: string;
+        emptyTrash: string;
+        confirm: string;
+        searchPlaceholder: string;
+    }>;
+}
+
+declare function FileManager({ apiUrl, fetch: customFetch, onFileSelect, onSelectionChange, onConfirm, onNavigate, className, style, theme: themeMode, mode, selection, allowActions, confirmLabel, hideTrash, filterExtensions, filterMimeTypes, toolbar, viewMode: viewModeProp, defaultViewMode, onViewModeChange, labels, }: FileManagerProps): react_jsx_runtime.JSX.Element;
+
+interface FilePickerProps extends Omit<FileManagerProps, 'mode' | 'selection'> {
+    selection?: 'single' | 'multiple';
+}
+declare function FilePicker({ selection, allowActions, confirmLabel, ...props }: FilePickerProps): react_jsx_runtime.JSX.Element;
+
+export { FileManager, type FileManagerProps, FilePicker, type FilePickerProps };