framepexls-ui-lib 2.2.7 → 2.2.11

package/dist/AccessibilityFab.js

@@ -78,6 +78,8 @@ function AccessibilityFab({
       const path = typeof event.composedPath === "function" ? event.composedPath() : [];
       if (popRef.current && path.includes(popRef.current)) return;
       if (btnRef.current && path.includes(btnRef.current)) return;
+      const target = event.target;
+      if (target == null ? void 0 : target.closest("[data-fx-keep-open], [data-fx-overlay]")) return;
       setOpen(false);
     };
     window.addEventListener("keydown", onKeyDown);

package/dist/AccessibilityFab.mjs

@@ -51,6 +51,8 @@ function AccessibilityFab({
       const path = typeof event.composedPath === "function" ? event.composedPath() : [];
       if (popRef.current && path.includes(popRef.current)) return;
       if (btnRef.current && path.includes(btnRef.current)) return;
+      const target = event.target;
+      if (target == null ? void 0 : target.closest("[data-fx-keep-open], [data-fx-overlay]")) return;
       setOpen(false);
     };
     window.addEventListener("keydown", onKeyDown);

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.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/ComboSelect.js

@@ -42,6 +42,7 @@ var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_iconos = require("./iconos");
 const cx = (...a) => a.filter(Boolean).join(" ");
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-1 focus-within:border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] disabled:opacity-60 disabled:cursor-not-allowed dark:border-[var(--border)] dark:bg-[var(--fx-surface)] dark:text-[var(--foreground)] dark:placeholder:text-[var(--muted)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.55)]";
 const isFocusableOrInteractive = (el) => {
   if (!el) return false;
@@ -248,8 +249,7 @@ function ComboSelect({
       left: r.left,
       width: r.width,
       maxHeight: maxH,
-      // Keep above Dialog (3000) and other overlays.
-      zIndex: 3600
+      zIndex: PORTAL_OVERLAY_Z_INDEX
     });
   }, []);
   import_react.default.useLayoutEffect(() => {
@@ -316,7 +316,7 @@ function ComboSelect({
       "div",
       {
         className: "fixed inset-0",
-        style: { zIndex: 3599 },
+        style: { zIndex: PORTAL_OVERLAY_Z_INDEX - 1 },
         onMouseDown: () => {
           closeDropdown();
         },
@@ -331,6 +331,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
+        "data-fx-overlay": "combo-select",
         style: { ...dropStyle, willChange: "transform, opacity" },
         variants: import_animations.popOver,
         initial: "initial",

package/dist/ComboSelect.mjs

@@ -9,6 +9,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { popOver, menuTransition } from "./animations.mjs";
 import { CheckIcon, ChevronDownIcon, CloseIcon } from "./iconos/index.mjs";
 const cx = (...a) => a.filter(Boolean).join(" ");
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-1 focus-within:border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] disabled:opacity-60 disabled:cursor-not-allowed dark:border-[var(--border)] dark:bg-[var(--fx-surface)] dark:text-[var(--foreground)] dark:placeholder:text-[var(--muted)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.55)]";
 const isFocusableOrInteractive = (el) => {
   if (!el) return false;
@@ -215,8 +216,7 @@ function ComboSelect({
       left: r.left,
       width: r.width,
       maxHeight: maxH,
-      // Keep above Dialog (3000) and other overlays.
-      zIndex: 3600
+      zIndex: PORTAL_OVERLAY_Z_INDEX
     });
   }, []);
   React.useLayoutEffect(() => {
@@ -283,7 +283,7 @@ function ComboSelect({
       "div",
       {
         className: "fixed inset-0",
-        style: { zIndex: 3599 },
+        style: { zIndex: PORTAL_OVERLAY_Z_INDEX - 1 },
         onMouseDown: () => {
           closeDropdown();
         },
@@ -298,6 +298,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
+        "data-fx-overlay": "combo-select",
         style: { ...dropStyle, willChange: "transform, opacity" },
         variants: popOver,
         initial: "initial",

package/dist/DateTimeField.js

@@ -126,6 +126,7 @@ const formatDisplayValue = (value, mode) => {
     return fmtISODateTimeLocal(parsed);
   }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function DateTimeField({
   type = "datetime-local",
   value,
@@ -190,7 +191,7 @@ function DateTimeField({
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
     let top = anchorRect.top - GAP - H;
     if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", top, left, zIndex: 1e5 };
+    return { position: "fixed", top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -390,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

@@ -93,6 +93,7 @@ const formatDisplayValue = (value, mode) => {
     return fmtISODateTimeLocal(parsed);
   }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function DateTimeField({
   type = "datetime-local",
   value,
@@ -157,7 +158,7 @@ function DateTimeField({
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
     let top = anchorRect.top - GAP - H;
     if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", top, left, zIndex: 1e5 };
+    return { position: "fixed", top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -357,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/Dropdown.js

@@ -46,6 +46,7 @@ var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_iconos = require("./iconos/index");
 var import_Button = __toESM(require("./Button"));
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const DropdownCtx = (0, import_react.createContext)(null);
 const useDropdown = () => {
   const ctx = (0, import_react.useContext)(DropdownCtx);
@@ -289,6 +290,7 @@ function Content({
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        "data-fx-overlay": "dropdown",
         variants: import_animations.popOver,
         initial: "initial",
         animate: "animate",
@@ -300,6 +302,7 @@ function Content({
           left: pos.left,
           maxHeight: pos.maxH,
           maxWidth: "calc(100vw - 16px)",
+          zIndex: PORTAL_OVERLAY_Z_INDEX,
           willChange: "transform, opacity"
         },
         className: [

package/dist/Dropdown.mjs

@@ -15,6 +15,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { popOver, menuTransition } from "./animations.mjs";
 import { MenuPuntosVerticalIcon } from "./iconos/index.mjs";
 import Button from "./Button.mjs";
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const DropdownCtx = createContext(null);
 const useDropdown = () => {
   const ctx = useContext(DropdownCtx);
@@ -258,6 +259,7 @@ function Content({
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        "data-fx-overlay": "dropdown",
         variants: popOver,
         initial: "initial",
         animate: "animate",
@@ -269,6 +271,7 @@ function Content({
           left: pos.left,
           maxHeight: pos.maxH,
           maxWidth: "calc(100vw - 16px)",
+          zIndex: PORTAL_OVERLAY_Z_INDEX,
           willChange: "transform, opacity"
         },
         className: [

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 };