framepexls-ui-lib 2.2.8 → 2.2.11

package/dist/AvatarSquare.d.mts

@@ -6,10 +6,13 @@ type Props = {
     alt?: string;
     initials?: string | null;
     imageFit?: "cover" | "contain";
+    imageFetchPriority?: "auto" | "high" | "low";
+    imageLoading?: "eager" | "lazy";
+    imagePreload?: boolean;
     className?: string;
     radiusClass?: string;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): React__default.JSX.Element;
+declare function AvatarSquare({ size, src, alt, initials, imageFit, imageFetchPriority, imageLoading, imagePreload, className, radiusClass, color, }: Props): React__default.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.d.ts

@@ -6,10 +6,13 @@ type Props = {
     alt?: string;
     initials?: string | null;
     imageFit?: "cover" | "contain";
+    imageFetchPriority?: "auto" | "high" | "low";
+    imageLoading?: "eager" | "lazy";
+    imagePreload?: boolean;
     className?: string;
     radiusClass?: string;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): React__default.JSX.Element;
+declare function AvatarSquare({ size, src, alt, initials, imageFit, imageFetchPriority, imageLoading, imagePreload, className, radiusClass, color, }: Props): React__default.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.js

@@ -42,12 +42,16 @@ function AvatarSquare({
   alt = "",
   initials = null,
   imageFit = "cover",
+  imageFetchPriority,
+  imageLoading = "lazy",
+  imagePreload = false,
   className = "",
   radiusClass = "rounded-xl",
   color = "accent"
 }) {
   const [error, setError] = import_react.default.useState(false);
   const showImg = !!src && !error;
+  const resolvedImageLoading = imagePreload && imageLoading === "lazy" ? "eager" : imageLoading;
   const boxStyle = { width: size, height: size };
   const RING = {
     accent: "ring-[color-mix(in_oklab,var(--ring)_30%,transparent)] dark:ring-[color-mix(in_oklab,var(--ring)_22%,transparent)]",
@@ -118,7 +122,9 @@ function AvatarSquare({
           fill: true,
           className: imageFit === "contain" ? "object-contain" : "object-cover",
           sizes: `${size}px`,
-          priority: false,
+          fetchPriority: imageFetchPriority,
+          loading: resolvedImageLoading,
+          preload: imagePreload,
           onError: () => setError(true),
           draggable: false
         }

package/dist/AvatarSquare.mjs

@@ -9,12 +9,16 @@ function AvatarSquare({
   alt = "",
   initials = null,
   imageFit = "cover",
+  imageFetchPriority,
+  imageLoading = "lazy",
+  imagePreload = false,
   className = "",
   radiusClass = "rounded-xl",
   color = "accent"
 }) {
   const [error, setError] = React.useState(false);
   const showImg = !!src && !error;
+  const resolvedImageLoading = imagePreload && imageLoading === "lazy" ? "eager" : imageLoading;
   const boxStyle = { width: size, height: size };
   const RING = {
     accent: "ring-[color-mix(in_oklab,var(--ring)_30%,transparent)] dark:ring-[color-mix(in_oklab,var(--ring)_22%,transparent)]",
@@ -85,7 +89,9 @@ function AvatarSquare({
           fill: true,
           className: imageFit === "contain" ? "object-contain" : "object-cover",
           sizes: `${size}px`,
-          priority: false,
+          fetchPriority: imageFetchPriority,
+          loading: resolvedImageLoading,
+          preload: imagePreload,
           onError: () => setError(true),
           draggable: false
         }

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.js

@@ -39,7 +39,7 @@ var import_Input = __toESM(require("./Input"));
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-1 focus:ring-inset checked:bg-[var(--primary)] checked:border-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)]";
+const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none transition-colors checked:border-[var(--primary)] checked:bg-[var(--primary)] checked:shadow-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[var(--fx-surface)]";
 const sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
@@ -101,7 +101,7 @@ const Checkbox = import_react.default.forwardRef(
             className: cx(
               baseInput,
               sizeMap[size],
-              (error || tone === "danger") && "border-[color-mix(in_oklab,var(--danger)_40%,transparent)] focus:[--tw-ring-color:color-mix(in_oklab,var(--danger-ring)_35%,transparent)]",
+              (error || tone === "danger") && "border-[color-mix(in_oklab,var(--danger)_40%,transparent)] checked:border-[var(--danger)] checked:bg-[var(--danger)]",
               inputClassName
             ),
             onChange: (e) => {

package/dist/Checkbox.mjs

@@ -6,7 +6,7 @@ import Input from "./Input.mjs";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-1 focus:ring-inset checked:bg-[var(--primary)] checked:border-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)]";
+const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none transition-colors checked:border-[var(--primary)] checked:bg-[var(--primary)] checked:shadow-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[var(--fx-surface)]";
 const sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
@@ -68,7 +68,7 @@ const Checkbox = React.forwardRef(
             className: cx(
               baseInput,
               sizeMap[size],
-              (error || tone === "danger") && "border-[color-mix(in_oklab,var(--danger)_40%,transparent)] focus:[--tw-ring-color:color-mix(in_oklab,var(--danger-ring)_35%,transparent)]",
+              (error || tone === "danger") && "border-[color-mix(in_oklab,var(--danger)_40%,transparent)] checked:border-[var(--danger)] checked:bg-[var(--danger)]",
               inputClassName
             ),
             onChange: (e) => {

package/dist/DateTimeField.js

@@ -391,7 +391,7 @@ function DateTimeField({
           {
             unstyled: true,
             type: "button",
-            className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+            className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[var(--muted)] transition hover:border-[color-mix(in_oklab,var(--primary)_36%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_8%,var(--card))] hover:text-[var(--foreground)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)] active:scale-95",
             onClick: (e) => {
               e.preventDefault();
               openPopover();

package/dist/DateTimeField.mjs

@@ -358,7 +358,7 @@ function DateTimeField({
           {
             unstyled: true,
             type: "button",
-            className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+            className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[var(--muted)] transition hover:border-[color-mix(in_oklab,var(--primary)_36%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_8%,var(--card))] hover:text-[var(--foreground)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)] active:scale-95",
             onClick: (e) => {
               e.preventDefault();
               openPopover();

package/dist/HeliipLoader.js

@@ -23,18 +23,89 @@ __export(HeliipLoader_exports, {
 });
 module.exports = __toCommonJS(HeliipLoader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_framer_motion = require("framer-motion");
-var import_iconos = require("./iconos");
 const cx = (...a) => a.filter(Boolean).join(" ");
+const loaderStyles = `
+@keyframes fx-loader-multi-shadow-spin {
+  0% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em,
+      -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em,
+      -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em,
+      -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+}
+
+@keyframes fx-loader-round {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.fx-loader-multi-shadow {
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  border-radius: 50%;
+  color: currentColor;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation:
+    fx-loader-multi-shadow-spin 1.7s infinite ease,
+    fx-loader-round 1.7s infinite ease;
+}
+`;
 function HeliipLoader({
   title = "Heliip",
-  subtitle = "Cargando\u2026",
+  subtitle = "Cargando...",
   className,
   compact = false,
   size
 }) {
   const resolvedSize = size != null ? size : compact ? "sm" : "md";
-  const iconSize = resolvedSize === "lg" ? "h-10 w-10" : resolvedSize === "sm" ? "h-5 w-5" : "h-7 w-7";
+  const loaderSize = resolvedSize === "lg" ? "text-[45px]" : resolvedSize === "sm" ? "text-[22px]" : "text-[32px]";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -42,7 +113,8 @@ function HeliipLoader({
       className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
       role: "status",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.span, { animate: { rotate: 360 }, "aria-hidden": true, className: "inline-flex", transition: { duration: 0.8, ease: "linear", repeat: Infinity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.SpinnerGapIcon, { className: iconSize }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: loaderStyles } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: cx("fx-loader-multi-shadow", loaderSize) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: subtitle || title })
       ]
     }

package/dist/HeliipLoader.mjs

@@ -1,17 +1,88 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { SpinnerGapIcon } from "./iconos/index.mjs";
 const cx = (...a) => a.filter(Boolean).join(" ");
+const loaderStyles = `
+@keyframes fx-loader-multi-shadow-spin {
+  0% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em,
+      -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em,
+      -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em,
+      -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+}
+
+@keyframes fx-loader-round {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.fx-loader-multi-shadow {
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  border-radius: 50%;
+  color: currentColor;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation:
+    fx-loader-multi-shadow-spin 1.7s infinite ease,
+    fx-loader-round 1.7s infinite ease;
+}
+`;
 function HeliipLoader({
   title = "Heliip",
-  subtitle = "Cargando\u2026",
+  subtitle = "Cargando...",
   className,
   compact = false,
   size
 }) {
   const resolvedSize = size != null ? size : compact ? "sm" : "md";
-  const iconSize = resolvedSize === "lg" ? "h-10 w-10" : resolvedSize === "sm" ? "h-5 w-5" : "h-7 w-7";
+  const loaderSize = resolvedSize === "lg" ? "text-[45px]" : resolvedSize === "sm" ? "text-[22px]" : "text-[32px]";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -19,7 +90,8 @@ function HeliipLoader({
       className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx(motion.span, { animate: { rotate: 360 }, "aria-hidden": true, className: "inline-flex", transition: { duration: 0.8, ease: "linear", repeat: Infinity }, children: /* @__PURE__ */ jsx(SpinnerGapIcon, { className: iconSize }) }),
+        /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: loaderStyles } }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cx("fx-loader-multi-shadow", loaderSize) }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: subtitle || title })
       ]
     }

package/dist/MarkdownEditor.d.mts

@@ -4,16 +4,84 @@ type Template = {
     label: string;
     content: string;
 };
+type MarkdownRange = {
+    start: number;
+    end: number;
+    kind?: string;
+    activeOffset?: number;
+};
+type MarkdownRenderOptions = {
+    includeRanges?: boolean;
+    selectedRange?: MarkdownRange | null;
+};
+declare function renderMarkdown(value: string, options?: MarkdownRenderOptions): string;
 type MarkdownEditorProps = {
     value: string;
     onChange: (next: string) => void;
     placeholder?: string;
     rows?: number;
-    height?: number;
+    height?: number | string;
+    fullscreenHeight?: number | string;
     className?: string;
     templates?: Template[];
     disabled?: boolean;
+    showPreview?: boolean;
+    enablePreview?: boolean;
+    enableFullscreen?: boolean;
+    enableDiagrams?: boolean;
+    maxImageBytes?: number;
+    maxVideoBytes?: number;
+    labels?: Partial<{
+        editor: string;
+        preview: string;
+        emptyPreview: string;
+        headings: string;
+        paragraph: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        quote: string;
+        undo: string;
+        redo: string;
+        bold: string;
+        italic: string;
+        code: string;
+        bullets: string;
+        numbers: string;
+        link: string;
+        color: string;
+        insert: string;
+        imageUrl: string;
+        imageUpload: string;
+        videoUrl: string;
+        videoUpload: string;
+        table: string;
+        lineBreak: string;
+        diagram: string;
+        umlClass: string;
+        umlSequence: string;
+        divider: string;
+        blocksView: string;
+        markdownView: string;
+        previewView: string;
+        sampleButton: string;
+        showPreview: string;
+        hidePreview: string;
+        fullscreen: string;
+        exitFullscreen: string;
+    }>;
 };
-declare function MarkdownEditor({ value, onChange, placeholder, rows, height, className, templates, disabled, }: MarkdownEditorProps): React__default.JSX.Element;
+declare function MarkdownPreview({ value, className, emptyLabel, selectable, selectedRange, onSelectRange, onOpenSelectionMenu, showBlockControls, onOpenBlockMenu, }: {
+    value: string | null | undefined;
+    className?: string;
+    emptyLabel?: string;
+    selectable?: boolean;
+    selectedRange?: MarkdownRange | null;
+    onSelectRange?: (range: MarkdownRange) => void;
+    onOpenSelectionMenu?: (event: React__default.MouseEvent, range: MarkdownRange) => void;
+    showBlockControls?: boolean;
+    onOpenBlockMenu?: (event: React__default.MouseEvent, range: MarkdownRange) => void;
+}): React__default.JSX.Element;
+declare function MarkdownEditor({ value, onChange, placeholder, rows, height, className, templates, disabled, fullscreenHeight, showPreview, enablePreview, enableFullscreen, enableDiagrams, labels, maxImageBytes, maxVideoBytes, }: MarkdownEditorProps): React__default.JSX.Element;
 
-export { type MarkdownEditorProps, MarkdownEditor as default };
+export { type MarkdownEditorProps, MarkdownPreview, MarkdownEditor as default, renderMarkdown };

package/dist/MarkdownEditor.d.ts

@@ -4,16 +4,84 @@ type Template = {
     label: string;
     content: string;
 };
+type MarkdownRange = {
+    start: number;
+    end: number;
+    kind?: string;
+    activeOffset?: number;
+};
+type MarkdownRenderOptions = {
+    includeRanges?: boolean;
+    selectedRange?: MarkdownRange | null;
+};
+declare function renderMarkdown(value: string, options?: MarkdownRenderOptions): string;
 type MarkdownEditorProps = {
     value: string;
     onChange: (next: string) => void;
     placeholder?: string;
     rows?: number;
-    height?: number;
+    height?: number | string;
+    fullscreenHeight?: number | string;
     className?: string;
     templates?: Template[];
     disabled?: boolean;
+    showPreview?: boolean;
+    enablePreview?: boolean;
+    enableFullscreen?: boolean;
+    enableDiagrams?: boolean;
+    maxImageBytes?: number;
+    maxVideoBytes?: number;
+    labels?: Partial<{
+        editor: string;
+        preview: string;
+        emptyPreview: string;
+        headings: string;
+        paragraph: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        quote: string;
+        undo: string;
+        redo: string;
+        bold: string;
+        italic: string;
+        code: string;
+        bullets: string;
+        numbers: string;
+        link: string;
+        color: string;
+        insert: string;
+        imageUrl: string;
+        imageUpload: string;
+        videoUrl: string;
+        videoUpload: string;
+        table: string;
+        lineBreak: string;
+        diagram: string;
+        umlClass: string;
+        umlSequence: string;
+        divider: string;
+        blocksView: string;
+        markdownView: string;
+        previewView: string;
+        sampleButton: string;
+        showPreview: string;
+        hidePreview: string;
+        fullscreen: string;
+        exitFullscreen: string;
+    }>;
 };
-declare function MarkdownEditor({ value, onChange, placeholder, rows, height, className, templates, disabled, }: MarkdownEditorProps): React__default.JSX.Element;
+declare function MarkdownPreview({ value, className, emptyLabel, selectable, selectedRange, onSelectRange, onOpenSelectionMenu, showBlockControls, onOpenBlockMenu, }: {
+    value: string | null | undefined;
+    className?: string;
+    emptyLabel?: string;
+    selectable?: boolean;
+    selectedRange?: MarkdownRange | null;
+    onSelectRange?: (range: MarkdownRange) => void;
+    onOpenSelectionMenu?: (event: React__default.MouseEvent, range: MarkdownRange) => void;
+    showBlockControls?: boolean;
+    onOpenBlockMenu?: (event: React__default.MouseEvent, range: MarkdownRange) => void;
+}): React__default.JSX.Element;
+declare function MarkdownEditor({ value, onChange, placeholder, rows, height, className, templates, disabled, fullscreenHeight, showPreview, enablePreview, enableFullscreen, enableDiagrams, labels, maxImageBytes, maxVideoBytes, }: MarkdownEditorProps): React__default.JSX.Element;
 
-export { type MarkdownEditorProps, MarkdownEditor as default };
+export { type MarkdownEditorProps, MarkdownPreview, MarkdownEditor as default, renderMarkdown };