framepexls-ui-lib 2.2.2 → 2.2.6

package/dist/AccessibilityFab.d.mts

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { FontSizeControllerProps } from './theme/FontSizeController.mjs';
+import { ThemeToggleProps } from './theme/ThemeToggle.mjs';
+
+type AccessibilityFabLabels = {
+    title?: string;
+    description?: string;
+    close?: string;
+    open?: string;
+    appearanceTitle?: string;
+    appearanceDescription?: string;
+    fontFamilyTitle?: string;
+    fontFamilyDescription?: string;
+    fontSizeTitle?: string;
+    fontSizeDescription?: string;
+};
+type AccessibilityFabProps = {
+    className?: string;
+    fontFamilyControl?: React__default.ReactNode;
+    labels?: AccessibilityFabLabels;
+    showDescriptions?: boolean;
+    themeToggleProps?: Omit<ThemeToggleProps, "className">;
+    fontSizeProps?: Omit<FontSizeControllerProps, "className">;
+};
+declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
+
+export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };

package/dist/AccessibilityFab.d.ts

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { FontSizeControllerProps } from './theme/FontSizeController.js';
+import { ThemeToggleProps } from './theme/ThemeToggle.js';
+
+type AccessibilityFabLabels = {
+    title?: string;
+    description?: string;
+    close?: string;
+    open?: string;
+    appearanceTitle?: string;
+    appearanceDescription?: string;
+    fontFamilyTitle?: string;
+    fontFamilyDescription?: string;
+    fontSizeTitle?: string;
+    fontSizeDescription?: string;
+};
+type AccessibilityFabProps = {
+    className?: string;
+    fontFamilyControl?: React__default.ReactNode;
+    labels?: AccessibilityFabLabels;
+    showDescriptions?: boolean;
+    themeToggleProps?: Omit<ThemeToggleProps, "className">;
+    fontSizeProps?: Omit<FontSizeControllerProps, "className">;
+};
+declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
+
+export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };

package/dist/AccessibilityFab.js

@@ -0,0 +1,158 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccessibilityFab_exports = {};
+__export(AccessibilityFab_exports, {
+  default: () => AccessibilityFab
+});
+module.exports = __toCommonJS(AccessibilityFab_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_Button = __toESM(require("./Button"));
+var import_FontSizeController = __toESM(require("./theme/FontSizeController"));
+var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
+var import_iconos = require("./iconos");
+function AccessibilityFab({
+  className,
+  fontFamilyControl,
+  labels,
+  showDescriptions = false,
+  themeToggleProps,
+  fontSizeProps
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const [open, setOpen] = import_react.default.useState(false);
+  const reduceMotion = (0, import_framer_motion.useReducedMotion)();
+  const btnRef = import_react.default.useRef(null);
+  const popRef = import_react.default.useRef(null);
+  const text = {
+    title: (_a = labels == null ? void 0 : labels.title) != null ? _a : "Accesibilidad",
+    description: (_b = labels == null ? void 0 : labels.description) != null ? _b : "Ajusta el modo visual y el tama\xF1o del texto",
+    close: (_c = labels == null ? void 0 : labels.close) != null ? _c : "Cerrar accesibilidad",
+    open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
+    appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
+    appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
+    fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
+    fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
+    fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
+    fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
+  };
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape") {
+        setOpen(false);
+        (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      if (popRef.current && path.includes(popRef.current)) return;
+      if (btnRef.current && path.includes(btnRef.current)) return;
+      setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.m.div,
+      {
+        ref: popRef,
+        initial: reduceMotion ? { opacity: 1 } : { opacity: 0, y: 10, scale: 0.98 },
+        animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
+        exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
+        transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
+        className: "w-[min(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
+              showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: () => setOpen(false),
+                className: "grid size-9 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
+                "aria-label": text.close,
+                title: text.close,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
+                showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeToggle.default, { cycle: ["light", "dark"], ...themeToggleProps })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
+                showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FontSizeController.default, { ...fontSizeProps })
+            ] }),
+            fontFamilyControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
+                showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
+              ] }),
+              fontFamilyControl
+            ] }) : null
+          ] })
+        ]
+      }
+    ) : null }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        unstyled: true,
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        className: "group grid size-12 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
+        "aria-label": open ? text.close : text.open,
+        title: open ? text.close : text.title,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
+      }
+    )
+  ] });
+}

package/dist/AccessibilityFab.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  AnimatePresence,
+  LazyMotion,
+  domAnimation,
+  m,
+  useReducedMotion
+} from "framer-motion";
+import Button from "./Button.mjs";
+import FontSizeController from "./theme/FontSizeController.mjs";
+import ThemeToggle from "./theme/ThemeToggle.mjs";
+import { CloseIcon, TextAaIcon } from "./iconos/index.mjs";
+function AccessibilityFab({
+  className,
+  fontFamilyControl,
+  labels,
+  showDescriptions = false,
+  themeToggleProps,
+  fontSizeProps
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const [open, setOpen] = React.useState(false);
+  const reduceMotion = useReducedMotion();
+  const btnRef = React.useRef(null);
+  const popRef = React.useRef(null);
+  const text = {
+    title: (_a = labels == null ? void 0 : labels.title) != null ? _a : "Accesibilidad",
+    description: (_b = labels == null ? void 0 : labels.description) != null ? _b : "Ajusta el modo visual y el tama\xF1o del texto",
+    close: (_c = labels == null ? void 0 : labels.close) != null ? _c : "Cerrar accesibilidad",
+    open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
+    appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
+    appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
+    fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
+    fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
+    fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
+    fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape") {
+        setOpen(false);
+        (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      if (popRef.current && path.includes(popRef.current)) return;
+      if (btnRef.current && path.includes(btnRef.current)) return;
+      setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
+    /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        ref: popRef,
+        initial: reduceMotion ? { opacity: 1 } : { opacity: 0, y: 10, scale: 0.98 },
+        animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
+        exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
+        transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
+        className: "w-[min(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
+              showDescriptions ? /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: () => setOpen(false),
+                className: "grid size-9 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
+                "aria-label": text.close,
+                title: text.close,
+                children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
+                showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
+              ] }),
+              /* @__PURE__ */ jsx(ThemeToggle, { cycle: ["light", "dark"], ...themeToggleProps })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
+                showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
+              ] }),
+              /* @__PURE__ */ jsx(FontSizeController, { ...fontSizeProps })
+            ] }),
+            fontFamilyControl ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
+                showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
+              ] }),
+              fontFamilyControl
+            ] }) : null
+          ] })
+        ]
+      }
+    ) : null }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        unstyled: true,
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        className: "group grid size-12 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
+        "aria-label": open ? text.close : text.open,
+        title: open ? text.close : text.title,
+        children: /* @__PURE__ */ jsx(TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
+      }
+    )
+  ] });
+}
+export {
+  AccessibilityFab as default
+};

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>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     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>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/HeliipLoader.d.mts

@@ -5,7 +5,8 @@ type HeliipLoaderProps = {
     subtitle?: string;
     className?: string;
     compact?: boolean;
+    size?: "sm" | "md" | "lg";
 };
-declare function HeliipLoader({ title, subtitle, className, compact, }: HeliipLoaderProps): React__default.JSX.Element;
+declare function HeliipLoader({ title, subtitle, className, compact, size, }: HeliipLoaderProps): React__default.JSX.Element;
 
 export { type HeliipLoaderProps, HeliipLoader as default };

package/dist/HeliipLoader.d.ts

@@ -5,7 +5,8 @@ type HeliipLoaderProps = {
     subtitle?: string;
     className?: string;
     compact?: boolean;
+    size?: "sm" | "md" | "lg";
 };
-declare function HeliipLoader({ title, subtitle, className, compact, }: HeliipLoaderProps): React__default.JSX.Element;
+declare function HeliipLoader({ title, subtitle, className, compact, size, }: HeliipLoaderProps): React__default.JSX.Element;
 
 export { type HeliipLoaderProps, HeliipLoader as default };

package/dist/HeliipLoader.js

@@ -24,80 +24,26 @@ __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_animations = require("./animations");
+var import_iconos = require("./iconos");
 const cx = (...a) => a.filter(Boolean).join(" ");
 function HeliipLoader({
   title = "Heliip",
   subtitle = "Cargando\u2026",
   className,
-  compact = false
+  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";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: cx(
-        "w-full",
-        "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)]",
-        "shadow-2xl ring-1 ring-black/5",
-        compact ? "p-4" : "p-5",
-        className
-      ),
+      "aria-label": subtitle || title,
+      className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
+      role: "status",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "div",
-            {
-              className: [
-                "relative grid place-items-center",
-                compact ? "h-10 w-10 rounded-2xl" : "h-12 w-12 rounded-2xl",
-                "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)]",
-                "ring-1 ring-[color-mix(in_oklab,var(--primary)_24%,transparent)]"
-              ].join(" "),
-              "aria-hidden": true,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_framer_motion.motion.div,
-                  {
-                    className: "absolute inset-1 rounded-xl border border-[color-mix(in_oklab,var(--primary)_55%,transparent)]",
-                    animate: { rotate: 360 },
-                    transition: { repeat: Infinity, duration: 1.2, ease: "linear" }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_framer_motion.motion.div,
-                  {
-                    className: "h-4 w-4 rounded-full bg-[var(--primary)]",
-                    animate: { scale: [1, 1.08, 1] },
-                    transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("truncate font-semibold tracking-tight", compact ? "text-base" : "text-lg"), children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-0.5 truncate text-[var(--muted)]", compact ? "text-xs" : "text-sm"), children: subtitle })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-4 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--border)_65%,transparent)]", compact ? "h-1.5" : "h-2"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_framer_motion.motion.div,
-          {
-            className: cx("h-full rounded-full bg-[var(--primary)]", compact ? "w-1/3" : "w-2/5"),
-            initial: { x: "-60%" },
-            animate: { x: "160%" },
-            transition: { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
-          }
-        ) }),
-        !compact ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_framer_motion.motion.div,
-          {
-            className: "mt-3 text-xs text-[var(--muted)]",
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: import_animations.microTransition,
-            children: "Esto normalmente toma menos de un segundo."
-          }
-        ) : null
+        /* @__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)("span", { className: "sr-only", children: subtitle || title })
       ]
     }
   );

package/dist/HeliipLoader.mjs

@@ -1,80 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
-import { microTransition } from "./animations.mjs";
+import { SpinnerGapIcon } from "./iconos/index.mjs";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function HeliipLoader({
   title = "Heliip",
   subtitle = "Cargando\u2026",
   className,
-  compact = false
+  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";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(
-        "w-full",
-        "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)]",
-        "shadow-2xl ring-1 ring-black/5",
-        compact ? "p-4" : "p-5",
-        className
-      ),
+      "aria-label": subtitle || title,
+      className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
+      role: "status",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: [
-                "relative grid place-items-center",
-                compact ? "h-10 w-10 rounded-2xl" : "h-12 w-12 rounded-2xl",
-                "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)]",
-                "ring-1 ring-[color-mix(in_oklab,var(--primary)_24%,transparent)]"
-              ].join(" "),
-              "aria-hidden": true,
-              children: [
-                /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    className: "absolute inset-1 rounded-xl border border-[color-mix(in_oklab,var(--primary)_55%,transparent)]",
-                    animate: { rotate: 360 },
-                    transition: { repeat: Infinity, duration: 1.2, ease: "linear" }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    className: "h-4 w-4 rounded-full bg-[var(--primary)]",
-                    animate: { scale: [1, 1.08, 1] },
-                    transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: cx("truncate font-semibold tracking-tight", compact ? "text-base" : "text-lg"), children: title }),
-            /* @__PURE__ */ jsx("div", { className: cx("mt-0.5 truncate text-[var(--muted)]", compact ? "text-xs" : "text-sm"), children: subtitle })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cx("mt-4 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--border)_65%,transparent)]", compact ? "h-1.5" : "h-2"), children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: cx("h-full rounded-full bg-[var(--primary)]", compact ? "w-1/3" : "w-2/5"),
-            initial: { x: "-60%" },
-            animate: { x: "160%" },
-            transition: { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
-          }
-        ) }),
-        !compact ? /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "mt-3 text-xs text-[var(--muted)]",
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: microTransition,
-            children: "Esto normalmente toma menos de un segundo."
-          }
-        ) : null
+        /* @__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("span", { className: "sr-only", children: subtitle || title })
       ]
     }
   );

package/dist/Select.d.mts

@@ -7,6 +7,7 @@ type Option<T extends BaseValue> = {
     disabled?: boolean;
 };
 type Size = "sm" | "md" | "lg";
+type Placement = "bottom" | "top";
 type Props<T extends BaseValue> = {
     value: T | "";
     onChange: (v: T | "") => void;
@@ -25,7 +26,8 @@ type Props<T extends BaseValue> = {
     closeOnSelect?: boolean;
     minWidthClasses?: string;
     fit?: boolean;
+    placement?: Placement;
 };
-declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): React__default.JSX.Element;
+declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, placement, }: Props<T>): React__default.JSX.Element;
 
 export { type Option, ModernSelect as default };

package/dist/Select.d.ts

@@ -7,6 +7,7 @@ type Option<T extends BaseValue> = {
     disabled?: boolean;
 };
 type Size = "sm" | "md" | "lg";
+type Placement = "bottom" | "top";
 type Props<T extends BaseValue> = {
     value: T | "";
     onChange: (v: T | "") => void;
@@ -25,7 +26,8 @@ type Props<T extends BaseValue> = {
     closeOnSelect?: boolean;
     minWidthClasses?: string;
     fit?: boolean;
+    placement?: Placement;
 };
-declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): React__default.JSX.Element;
+declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, placement, }: Props<T>): React__default.JSX.Element;
 
 export { type Option, ModernSelect as default };