@geekapps/silo-elements-nextjs 0.0.2 → 0.0.4

package/dist/components/DropZone.js

@@ -0,0 +1,137 @@
+import { useState, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/utils/theme.ts
+var defaultTheme = {
+  borderColor: "#e2e8f0",
+  borderColorActive: "#6366f1",
+  backgroundColor: "#f8fafc",
+  backgroundColorHover: "#f1f5f9",
+  textColor: "#0f172a",
+  textColorMuted: "#64748b",
+  accentColor: "#6366f1",
+  accentColorHover: "#4f46e5",
+  errorColor: "#ef4444",
+  successColor: "#22c55e",
+  borderRadius: "12px",
+  fontFamily: "inherit"
+};
+function resolveTheme(theme) {
+  return { ...defaultTheme, ...theme };
+}
+function themeToVars(theme) {
+  return {
+    "--silo-border": theme.borderColor,
+    "--silo-border-active": theme.borderColorActive,
+    "--silo-bg": theme.backgroundColor,
+    "--silo-bg-hover": theme.backgroundColorHover,
+    "--silo-text": theme.textColor,
+    "--silo-text-muted": theme.textColorMuted,
+    "--silo-accent": theme.accentColor,
+    "--silo-accent-hover": theme.accentColorHover,
+    "--silo-error": theme.errorColor,
+    "--silo-success": theme.successColor,
+    "--silo-radius": theme.borderRadius,
+    "--silo-font": theme.fontFamily
+  };
+}
+function DropZone({
+  accept,
+  multiple = false,
+  disabled = false,
+  maxSize,
+  onFiles,
+  onError,
+  className = "",
+  style,
+  theme,
+  children
+}) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef(null);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const validate = useCallback(
+    (files) => {
+      return files.filter((f) => {
+        if (maxSize && f.size > maxSize) {
+          onError?.(new Error(`File "${f.name}" exceeds max size of ${maxSize} bytes`));
+          return false;
+        }
+        return true;
+      });
+    },
+    [maxSize, onError]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+    },
+    [disabled, validate, onFiles]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+      e.target.value = "";
+    },
+    [validate, onFiles]
+  );
+  const rootStyle = {
+    ...vars,
+    fontFamily: "var(--silo-font)",
+    border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
+    borderRadius: "var(--silo-radius)",
+    backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
+    color: "var(--silo-text)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "border-color 0.15s, background-color 0.15s",
+    opacity: disabled ? 0.5 : 1,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `silo-dropzone${className ? ` ${className}` : ""}`,
+      style: rootStyle,
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      onClick: () => !disabled && inputRef.current?.click(),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      "aria-label": "Upload area",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            style: { display: "none" },
+            onChange: handleChange,
+            disabled
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { DropZone };
+//# sourceMappingURL=DropZone.js.map
+//# sourceMappingURL=DropZone.js.map

package/dist/components/DropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/theme.ts","../../src/components/DropZone.tsx"],"names":[],"mappings":";;;;AAEO,IAAM,YAAA,GAAoC;AAAA,EAC/C,WAAA,EAAa,SAAA;AAAA,EACb,iBAAA,EAAmB,SAAA;AAAA,EACnB,eAAA,EAAiB,SAAA;AAAA,EACjB,oBAAA,EAAsB,SAAA;AAAA,EACtB,SAAA,EAAW,SAAA;AAAA,EACX,cAAA,EAAgB,SAAA;AAAA,EAChB,WAAA,EAAa,SAAA;AAAA,EACb,gBAAA,EAAkB,SAAA;AAAA,EAClB,UAAA,EAAY,SAAA;AAAA,EACZ,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,EAAc,MAAA;AAAA,EACd,UAAA,EAAY;AACd,CAAA;AAEO,SAAS,aAAa,KAAA,EAAwC;AACnE,EAAA,OAAO,EAAE,GAAG,YAAA,EAAc,GAAG,KAAA,EAAM;AACrC;AAEO,SAAS,YAAY,KAAA,EAAoD;AAC9E,EAAA,OAAO;AAAA,IACL,iBAAiB,KAAA,CAAM,WAAA;AAAA,IACvB,wBAAwB,KAAA,CAAM,iBAAA;AAAA,IAC9B,aAAa,KAAA,CAAM,eAAA;AAAA,IACnB,mBAAmB,KAAA,CAAM,oBAAA;AAAA,IACzB,eAAe,KAAA,CAAM,SAAA;AAAA,IACrB,qBAAqB,KAAA,CAAM,cAAA;AAAA,IAC3B,iBAAiB,KAAA,CAAM,WAAA;AAAA,IACvB,uBAAuB,KAAA,CAAM,gBAAA;AAAA,IAC7B,gBAAgB,KAAA,CAAM,UAAA;AAAA,IACtB,kBAAkB,KAAA,CAAM,YAAA;AAAA,IACxB,iBAAiB,KAAA,CAAM,YAAA;AAAA,IACvB,eAAe,KAAA,CAAM;AAAA,GACvB;AACF;ACTO,SAAS,QAAA,CAAS;AAAA,EACvB,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAA,GAAI,aAAa,KAAK,CAAA;AAC5B,EAAA,MAAM,IAAA,GAAO,YAAY,CAAC,CAAA;AAE1B,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,KAAA,KAA0B;AACzB,MAAA,OAAO,KAAA,CAAM,MAAA,CAAO,CAAC,CAAA,KAAM;AACzB,QAAA,IAAI,OAAA,IAAW,CAAA,CAAE,IAAA,GAAO,OAAA,EAAS;AAC/B,UAAA,OAAA,GAAU,IAAI,MAAM,CAAA,MAAA,EAAS,CAAA,CAAE,IAAI,CAAA,sBAAA,EAAyB,OAAO,QAAQ,CAAC,CAAA;AAC5E,UAAA,OAAO,KAAA;AAAA,QACT;AACA,QAAA,OAAO,IAAA;AAAA,MACT,CAAC,CAAA;AAAA,IACH,CAAA;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,GACnB;AAEA,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,CAAA,KAAiC;AAChC,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,IAAA,CAAK,CAAA,CAAE,aAAa,KAAK,CAAA;AAC7C,MAAA,MAAM,KAAA,GAAQ,SAAS,KAAK,CAAA;AAC5B,MAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,OAAA,CAAQ,KAAK,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,QAAA,EAAU,QAAA,EAAU,OAAO;AAAA,GAC9B;AAEA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,CAAA,KAAqC;AACpC,MAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,CAAO,KAAA,IAAS,EAAE,CAAA;AAC7C,MAAA,MAAM,KAAA,GAAQ,SAAS,KAAK,CAAA;AAC5B,MAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,OAAA,CAAQ,KAAK,CAAA;AAC/B,MAAA,CAAA,CAAE,OAAO,KAAA,GAAQ,EAAA;AAAA,IACnB,CAAA;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,GACpB;AAEA,EAAA,MAAM,SAAA,GAA2B;AAAA,IAC/B,GAAG,IAAA;AAAA,IACH,UAAA,EAAY,kBAAA;AAAA,IACZ,MAAA,EAAQ,CAAA,WAAA,EAAc,QAAA,GAAW,2BAAA,GAA8B,oBAAoB,CAAA,CAAA;AAAA,IACnF,YAAA,EAAc,oBAAA;AAAA,IACd,eAAA,EAAiB,WAAW,sBAAA,GAAyB,gBAAA;AAAA,IACrD,KAAA,EAAO,kBAAA;AAAA,IACP,MAAA,EAAQ,WAAW,aAAA,GAAgB,SAAA;AAAA,IACnC,UAAA,EAAY,4CAAA;AAAA,IACZ,OAAA,EAAS,WAAW,GAAA,GAAM,CAAA;AAAA,IAC1B,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,CAAA,aAAA,EAAgB,SAAA,GAAY,CAAA,CAAA,EAAI,SAAS,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3D,KAAA,EAAO,SAAA;AAAA,MACP,UAAA,EAAY,CAAC,CAAA,KAAM;AAAE,QAAA,CAAA,CAAE,cAAA,EAAe;AAAG,QAAA,IAAI,CAAC,QAAA,EAAU,WAAA,CAAY,IAAI,CAAA;AAAA,MAAG,CAAA;AAAA,MAC3E,WAAA,EAAa,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,MACpC,MAAA,EAAQ,UAAA;AAAA,MACR,SAAS,MAAM,CAAC,QAAA,IAAY,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MACpD,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,MAC1B,SAAA,EAAW,CAAC,CAAA,KAAM;AAAE,QAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAAG,CAAA;AAAA,MACvF,YAAA,EAAW,aAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,MAAA;AAAA,YACL,MAAA;AAAA,YACA,QAAA;AAAA,YACA,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,YACzB,QAAA,EAAU,YAAA;AAAA,YACV;AAAA;AAAA,SACF;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","file":"DropZone.js","sourcesContent":["import type { SiloTheme } from \"../types.js\";\n\nexport const defaultTheme: Required<SiloTheme> = {\n  borderColor: \"#e2e8f0\",\n  borderColorActive: \"#6366f1\",\n  backgroundColor: \"#f8fafc\",\n  backgroundColorHover: \"#f1f5f9\",\n  textColor: \"#0f172a\",\n  textColorMuted: \"#64748b\",\n  accentColor: \"#6366f1\",\n  accentColorHover: \"#4f46e5\",\n  errorColor: \"#ef4444\",\n  successColor: \"#22c55e\",\n  borderRadius: \"12px\",\n  fontFamily: \"inherit\",\n};\n\nexport function resolveTheme(theme?: SiloTheme): Required<SiloTheme> {\n  return { ...defaultTheme, ...theme };\n}\n\nexport function themeToVars(theme: Required<SiloTheme>): Record<string, string> {\n  return {\n    \"--silo-border\": theme.borderColor,\n    \"--silo-border-active\": theme.borderColorActive,\n    \"--silo-bg\": theme.backgroundColor,\n    \"--silo-bg-hover\": theme.backgroundColorHover,\n    \"--silo-text\": theme.textColor,\n    \"--silo-text-muted\": theme.textColorMuted,\n    \"--silo-accent\": theme.accentColor,\n    \"--silo-accent-hover\": theme.accentColorHover,\n    \"--silo-error\": theme.errorColor,\n    \"--silo-success\": theme.successColor,\n    \"--silo-radius\": theme.borderRadius,\n    \"--silo-font\": theme.fontFamily,\n  };\n}\n","\"use client\";\n\nimport {\n  useState,\n  useRef,\n  useCallback,\n  type DragEvent,\n  type ChangeEvent,\n  type ReactNode,\n  type CSSProperties,\n} from \"react\";\nimport type { SiloTheme } from \"../types.js\";\nimport { resolveTheme, themeToVars } from \"../utils/theme.js\";\n\ninterface DropZoneProps {\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  maxSize?: number;\n  onFiles: (files: File[]) => void;\n  onError?: (error: Error) => void;\n  className?: string;\n  style?: CSSProperties;\n  theme?: SiloTheme;\n  children: ReactNode;\n}\n\nexport function DropZone({\n  accept,\n  multiple = false,\n  disabled = false,\n  maxSize,\n  onFiles,\n  onError,\n  className = \"\",\n  style,\n  theme,\n  children,\n}: DropZoneProps) {\n  const [dragging, setDragging] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const t = resolveTheme(theme);\n  const vars = themeToVars(t);\n\n  const validate = useCallback(\n    (files: File[]): File[] => {\n      return files.filter((f) => {\n        if (maxSize && f.size > maxSize) {\n          onError?.(new Error(`File \"${f.name}\" exceeds max size of ${maxSize} bytes`));\n          return false;\n        }\n        return true;\n      });\n    },\n    [maxSize, onError]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setDragging(false);\n      if (disabled) return;\n      const files = Array.from(e.dataTransfer.files);\n      const valid = validate(files);\n      if (valid.length) onFiles(valid);\n    },\n    [disabled, validate, onFiles]\n  );\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const files = Array.from(e.target.files ?? []);\n      const valid = validate(files);\n      if (valid.length) onFiles(valid);\n      e.target.value = \"\";\n    },\n    [validate, onFiles]\n  );\n\n  const rootStyle: CSSProperties = {\n    ...vars as CSSProperties,\n    fontFamily: \"var(--silo-font)\",\n    border: `2px dashed ${dragging ? \"var(--silo-border-active)\" : \"var(--silo-border)\"}`,\n    borderRadius: \"var(--silo-radius)\",\n    backgroundColor: dragging ? \"var(--silo-bg-hover)\" : \"var(--silo-bg)\",\n    color: \"var(--silo-text)\",\n    cursor: disabled ? \"not-allowed\" : \"pointer\",\n    transition: \"border-color 0.15s, background-color 0.15s\",\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  };\n\n  return (\n    <div\n      className={`silo-dropzone${className ? ` ${className}` : \"\"}`}\n      style={rootStyle}\n      onDragOver={(e) => { e.preventDefault(); if (!disabled) setDragging(true); }}\n      onDragLeave={() => setDragging(false)}\n      onDrop={handleDrop}\n      onClick={() => !disabled && inputRef.current?.click()}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") inputRef.current?.click(); }}\n      aria-label=\"Upload area\"\n    >\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        style={{ display: \"none\" }}\n        onChange={handleChange}\n        disabled={disabled}\n      />\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+interface ProgressBarProps {
+    progress: number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ProgressBar({ progress, className, style }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+export { ProgressBar };

package/dist/components/ProgressBar.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ProgressBar({ progress, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `silo-progress-track${className ? ` ${className}` : ""}`,
+      style: {
+        height: "6px",
+        borderRadius: "3px",
+        backgroundColor: "rgba(99,102,241,0.15)",
+        overflow: "hidden",
+        ...style
+      },
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "silo-progress-fill",
+          style: {
+            height: "100%",
+            width: `${progress}%`,
+            backgroundColor: "var(--silo-accent, #6366f1)",
+            borderRadius: "3px",
+            transition: "width 0.2s ease"
+          }
+        }
+      )
+    }
+  );
+}
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";;AAUO,SAAS,YAAY,EAAE,QAAA,EAAU,SAAA,GAAY,EAAA,EAAI,OAAM,EAAqB;AACjF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,CAAA,mBAAA,EAAsB,SAAA,GAAY,CAAA,CAAA,EAAI,SAAS,KAAK,EAAE,CAAA,CAAA;AAAA,MACjE,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,KAAA;AAAA,QACR,YAAA,EAAc,KAAA;AAAA,QACd,eAAA,EAAiB,uBAAA;AAAA,QACjB,QAAA,EAAU,QAAA;AAAA,QACV,GAAG;AAAA,OACL;AAAA,MACA,IAAA,EAAK,aAAA;AAAA,MACL,eAAA,EAAe,QAAA;AAAA,MACf,eAAA,EAAe,CAAA;AAAA,MACf,eAAA,EAAe,GAAA;AAAA,MAEf,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,oBAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,MAAA,EAAQ,MAAA;AAAA,YACR,KAAA,EAAO,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,YAClB,eAAA,EAAiB,6BAAA;AAAA,YACjB,YAAA,EAAc,KAAA;AAAA,YACd,UAAA,EAAY;AAAA;AACd;AAAA;AACF;AAAA,GACF;AAEJ","file":"ProgressBar.js","sourcesContent":["\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\ninterface ProgressBarProps {\n  progress: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ProgressBar({ progress, className = \"\", style }: ProgressBarProps) {\n  return (\n    <div\n      className={`silo-progress-track${className ? ` ${className}` : \"\"}`}\n      style={{\n        height: \"6px\",\n        borderRadius: \"3px\",\n        backgroundColor: \"rgba(99,102,241,0.15)\",\n        overflow: \"hidden\",\n        ...style,\n      }}\n      role=\"progressbar\"\n      aria-valuenow={progress}\n      aria-valuemin={0}\n      aria-valuemax={100}\n    >\n      <div\n        className=\"silo-progress-fill\"\n        style={{\n          height: \"100%\",\n          width: `${progress}%`,\n          backgroundColor: \"var(--silo-accent, #6366f1)\",\n          borderRadius: \"3px\",\n          transition: \"width 0.2s ease\",\n        }}\n      />\n    </div>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -1,220 +1,12 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UploadResult } from '@geekapps/silo-nextjs';
+export { ImageUploader } from './ImageUploader.js';
+export { VideoUploader } from './VideoUploader.js';
+export { FileUploader } from './FileUploader.js';
+export { MediaUploader } from './MediaUploader.js';
+export { Source, SourceProps, Sources, SourcesProps, Storyboard, StoryboardFrame, StoryboardFrameProps, StoryboardProps, Subtitle, SubtitleProps, Subtitles, SubtitlesProps, Video, VideoPlayer, VideoSourceType } from './VideoPlayer.js';
+export { DropZone } from './components/DropZone.js';
+export { ProgressBar } from './components/ProgressBar.js';
+export { defaultTheme, resolveTheme } from './utils/theme.js';
+export { BaseUploaderProps, FileUploaderProps, ImageUploaderProps, MediaUploaderProps, SiloTheme, VideoPlayerControls, VideoPlayerProps, VideoUploaderProps } from './types.js';
 export { SiloProvider, useFileStatus, useSignedUrl, useSiloClient, useUpload } from '@geekapps/silo-nextjs';
-import { ReactNode, CSSProperties } from 'react';
-
-interface BaseUploaderProps {
-    /** Bucket to upload to */
-    bucket?: string;
-    /** Seconds until file expires (optional) */
-    expiresIn?: number;
-    /** Keep file private (default: true) */
-    private?: boolean;
-    /** Called when upload completes */
-    onUpload?: (result: UploadResult) => void;
-    /** Called when upload fails */
-    onError?: (error: Error) => void;
-    /** Custom className for the root element */
-    className?: string;
-    /** Custom styles */
-    style?: React.CSSProperties;
-    /** Disable the uploader */
-    disabled?: boolean;
-    /** Max file size in bytes */
-    maxSize?: number;
-    /** Custom label/content slot */
-    children?: React.ReactNode;
-    /** Override inner icon slot */
-    renderIcon?: () => React.ReactNode;
-    /** Override progress bar slot */
-    renderProgress?: (progress: number) => React.ReactNode;
-    /** Override success state slot */
-    renderSuccess?: (result: UploadResult) => React.ReactNode;
-    /** Override error state slot */
-    renderError?: (error: Error, retry: () => void) => React.ReactNode;
-    /** Theme tokens */
-    theme?: SiloTheme;
-}
-interface SiloTheme {
-    borderColor?: string;
-    borderColorActive?: string;
-    backgroundColor?: string;
-    backgroundColorHover?: string;
-    textColor?: string;
-    textColorMuted?: string;
-    accentColor?: string;
-    accentColorHover?: string;
-    errorColor?: string;
-    successColor?: string;
-    borderRadius?: string;
-    fontFamily?: string;
-}
-interface ImageUploaderProps extends BaseUploaderProps {
-    /** Allow cropping before upload */
-    allowCrop?: boolean;
-    /** Crop aspect ratio (e.g. 16/9) */
-    cropAspectRatio?: number;
-    /** Show preview after selection */
-    showPreview?: boolean;
-    /** Accept string (default: image/*) */
-    accept?: string;
-}
-interface VideoUploaderProps extends BaseUploaderProps {
-    /** Show video preview after selection */
-    showPreview?: boolean;
-    /** Accept string (default: video/*) */
-    accept?: string;
-}
-interface FileUploaderProps extends BaseUploaderProps {
-    /** Accepted MIME types or extensions */
-    accept?: string;
-    /** Allow multiple files */
-    multiple?: boolean;
-}
-interface MediaUploaderProps extends BaseUploaderProps {
-    /** Which tabs to show */
-    tabs?: Array<"image" | "video" | "file">;
-    /** Default active tab */
-    defaultTab?: "image" | "video" | "file";
-    imageProps?: Partial<ImageUploaderProps>;
-    videoProps?: Partial<VideoUploaderProps>;
-    fileProps?: Partial<FileUploaderProps>;
-}
-interface VideoPlayerProps {
-    /** HLS playlist URL or direct MP4 URL */
-    src: string;
-    /** Poster/thumbnail image URL */
-    poster?: string;
-    /** Signed URL for private streams */
-    token?: string;
-    /** Auto play */
-    autoPlay?: boolean;
-    /** Loop */
-    loop?: boolean;
-    /** Mute */
-    muted?: boolean;
-    /** Show native controls (default: true) */
-    controls?: boolean;
-    /** Custom controls slot — disables native controls */
-    renderControls?: (player: VideoPlayerControls) => React.ReactNode;
-    /** Custom className */
-    className?: string;
-    /** Custom styles */
-    style?: React.CSSProperties;
-    /** Subtitle tracks */
-    tracks?: Array<{
-        src: string;
-        label: string;
-        srcLang: string;
-        default?: boolean;
-    }>;
-    /** Theme */
-    theme?: SiloTheme;
-    /** Called when playback starts */
-    onPlay?: () => void;
-    /** Called when playback pauses */
-    onPause?: () => void;
-    /** Called on time update */
-    onTimeUpdate?: (currentTime: number, duration: number) => void;
-}
-interface VideoPlayerControls {
-    playing: boolean;
-    currentTime: number;
-    duration: number;
-    volume: number;
-    muted: boolean;
-    play: () => void;
-    pause: () => void;
-    seek: (time: number) => void;
-    setVolume: (vol: number) => void;
-    toggleMute: () => void;
-    requestFullscreen: () => void;
-}
-
-declare function ImageUploader({ bucket, expiresIn, private: isPrivate, onUpload, onError, className, style, disabled, maxSize, accept, showPreview, theme, renderIcon, renderProgress, renderSuccess, renderError, children, }: ImageUploaderProps): react_jsx_runtime.JSX.Element;
-
-declare function VideoUploader({ bucket, expiresIn, private: isPrivate, onUpload, onError, className, style, disabled, maxSize, accept, showPreview, theme, renderIcon, renderProgress, renderSuccess, renderError, children, }: VideoUploaderProps): react_jsx_runtime.JSX.Element;
-
-declare function FileUploader({ bucket, expiresIn, private: isPrivate, onUpload, onError, className, style, disabled, maxSize, accept, multiple, theme, renderIcon, renderProgress, renderSuccess, renderError, children, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
-
-declare function MediaUploader({ tabs, defaultTab, imageProps, videoProps, fileProps, className, style, theme, onUpload, onError, ...shared }: MediaUploaderProps): react_jsx_runtime.JSX.Element;
-
-type VideoSourceType = "dash" | "hls" | "file";
-type SourceProps = {
-    id?: string;
-    src: string;
-    label?: string;
-    type?: VideoSourceType;
-    default?: boolean;
-};
-type SourcesProps = {
-    children: ReactNode;
-};
-type SubtitleProps = {
-    src: string;
-    srclang: string;
-    label: string;
-    default?: boolean;
-};
-type SubtitlesProps = {
-    children: ReactNode;
-};
-type StoryboardFrameProps = {
-    start: number;
-    end: number;
-    image: string;
-    x?: number;
-    y?: number;
-    w?: number;
-    h?: number;
-};
-type StoryboardProps = {
-    src?: string;
-    fallbackImage?: string;
-    width?: number;
-    height?: number;
-    children?: ReactNode;
-};
-type VideoProps = {
-    title?: string;
-    description?: string;
-    poster?: string;
-    children: ReactNode;
-    className?: string;
-    autoHideControls?: boolean;
-    defaultVolume?: number;
-};
-declare function Sources(_props: SourcesProps): null;
-declare function Source(_props: SourceProps): null;
-declare function Subtitles(_props: SubtitlesProps): null;
-declare function Subtitle(_props: SubtitleProps): null;
-declare function Storyboard(_props: StoryboardProps): null;
-declare function StoryboardFrame(_props: StoryboardFrameProps): null;
-declare function Video({ title, description, poster, children, className, autoHideControls, defaultVolume, }: VideoProps): react_jsx_runtime.JSX.Element;
-declare const VideoPlayer: typeof Video;
-
-interface DropZoneProps {
-    accept?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    maxSize?: number;
-    onFiles: (files: File[]) => void;
-    onError?: (error: Error) => void;
-    className?: string;
-    style?: CSSProperties;
-    theme?: SiloTheme;
-    children: ReactNode;
-}
-declare function DropZone({ accept, multiple, disabled, maxSize, onFiles, onError, className, style, theme, children, }: DropZoneProps): react_jsx_runtime.JSX.Element;
-
-interface ProgressBarProps {
-    progress: number;
-    className?: string;
-    style?: CSSProperties;
-}
-declare function ProgressBar({ progress, className, style }: ProgressBarProps): react_jsx_runtime.JSX.Element;
-
-declare const defaultTheme: Required<SiloTheme>;
-declare function resolveTheme(theme?: SiloTheme): Required<SiloTheme>;
-
-export { type BaseUploaderProps, DropZone, FileUploader, type FileUploaderProps, ImageUploader, type ImageUploaderProps, MediaUploader, type MediaUploaderProps, ProgressBar, type SiloTheme, Source, type SourceProps, Sources, type SourcesProps, Storyboard, StoryboardFrame, type StoryboardFrameProps, type StoryboardProps, Subtitle, type SubtitleProps, Subtitles, type SubtitlesProps, Video, VideoPlayer, type VideoPlayerControls, type VideoPlayerProps, type VideoSourceType, VideoUploader, type VideoUploaderProps, defaultTheme, resolveTheme };
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

@@ -686,7 +686,8 @@ function Video({
   children,
   className,
   autoHideControls = true,
-  defaultVolume = 0.72
+  defaultVolume = 0.72,
+  maxHeight
 }) {
   const parsed = useMemo(() => parseVideoChildren(children), [children]);
   const initialSourceIndex = useMemo(() => {
@@ -1234,7 +1235,8 @@ function Video({
               setControlsVisible(false);
             }
           },
-          className: "relative aspect-video w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
+          className: "@container relative aspect-video w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
+          style: maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
           children: [
             /* @__PURE__ */ jsx(
               "video",
@@ -1262,7 +1264,7 @@ function Video({
               "div",
               {
                 className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
-                children: /* @__PURE__ */ jsx("span", { className: "grid size-20 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20", children: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-1 size-9" }) })
+                children: /* @__PURE__ */ jsx("span", { className: "grid size-12 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20 @sm:size-16 @lg:size-20", children: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-1 size-5 @sm:size-7 @lg:size-9" }) })
               }
             ),
             isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
@@ -1274,7 +1276,7 @@ function Video({
                 onClick: togglePlay,
                 className: `absolute inset-0 z-30 flex flex-col justify-between bg-gradient-to-b from-black/55 via-black/10 to-black/75 ${controlsVisible ? "" : "pointer-events-none"}`,
                 children: [
-                  /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "flex items-start justify-between gap-4 px-7 pt-7 text-white md:px-9 md:pt-8", children: [
+                  /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
                     /* @__PURE__ */ jsxs("div", { children: [
                       title && /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-wide md:text-xl", children: title }),
                       description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-white/85", children: description })
@@ -1290,7 +1292,7 @@ function Video({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-7 pb-7 text-white md:px-9 md:pb-8", children: [
+                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-4 pb-4 text-white @sm:px-7 @sm:pb-7 @lg:px-9 @lg:pb-8", children: [
                     /* @__PURE__ */ jsxs(
                       "div",
                       {