framepexls-ui-lib 0.3.4 → 0.3.6

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

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(Checkbox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_framer_motion = require("framer-motion");
+var import_Input = __toESM(require("./Input"));
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
@@ -83,14 +84,15 @@ const Checkbox = import_react.default.forwardRef(
       }
     }, [props.checked]);
     if (unstyled) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: inputRef, id, type: "checkbox", ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { unstyled: true, ref: inputRef, id, type: "checkbox", ...props });
     }
     const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-grid place-items-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
+          import_Input.default,
           {
+            unstyled: true,
             ref: inputRef,
             id: id != null ? id : internalId,
             type: "checkbox",

package/dist/Checkbox.mjs

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useId, useRef } from "react";
 import { motion } from "framer-motion";
+import Input from "./Input";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
@@ -50,14 +51,15 @@ const Checkbox = React.forwardRef(
       }
     }, [props.checked]);
     if (unstyled) {
-      return /* @__PURE__ */ jsx("input", { ref: inputRef, id, type: "checkbox", ...props });
+      return /* @__PURE__ */ jsx(Input, { unstyled: true, ref: inputRef, id, type: "checkbox", ...props });
     }
     const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
     return /* @__PURE__ */ jsxs("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
       /* @__PURE__ */ jsxs("span", { className: "relative inline-grid place-items-center", children: [
         /* @__PURE__ */ jsx(
-          "input",
+          Input,
           {
+            unstyled: true,
             ref: inputRef,
             id: id != null ? id : internalId,
             type: "checkbox",

package/dist/DateTimeField.js

@@ -188,15 +188,12 @@ function DateTimeField({
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const GAP = 8, MARGIN = 8;
-    const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
-    const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
-    let left = anchorRect.left + (anchorRect.width - W) / 2;
+    const W = 360, GAP = 4, MARGIN = 8, H = 420;
+    let left = anchorRect.right - W;
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
-    let top = anchorRect.bottom + GAP;
-    if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
-    const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
-    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
+    let top = anchorRect.top - GAP - H;
+    if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
+    return { position: "fixed", top, left, zIndex: 1e5 };
   })();
   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());
@@ -259,7 +256,7 @@ function DateTimeField({
       ref: popRef,
       style: { ...stylePop, willChange: "transform, opacity" },
       "data-dtf-pop": true,
-      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_CalendarPanel.default,

package/dist/DateTimeField.mjs

@@ -155,15 +155,12 @@ function DateTimeField({
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const GAP = 8, MARGIN = 8;
-    const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
-    const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
-    let left = anchorRect.left + (anchorRect.width - W) / 2;
+    const W = 360, GAP = 4, MARGIN = 8, H = 420;
+    let left = anchorRect.right - W;
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
-    let top = anchorRect.bottom + GAP;
-    if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
-    const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
-    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
+    let top = anchorRect.top - GAP - H;
+    if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
+    return { position: "fixed", top, left, zIndex: 1e5 };
   })();
   const parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -226,7 +223,7 @@ function DateTimeField({
       ref: popRef,
       style: { ...stylePop, willChange: "transform, opacity" },
       "data-dtf-pop": true,
-      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         type !== "time" && /* @__PURE__ */ jsx(
           CalendarPanel,

package/dist/FileButton.d.mts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import Button from './Button.mjs';
+
+type FileButtonProps = React__default.ComponentProps<typeof Button> & {
+    accept?: string;
+    multiple?: boolean;
+    capture?: boolean | string;
+    onFiles: (files: FileList | null, e: React__default.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const FileButton: React__default.ForwardRefExoticComponent<Omit<FileButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { type FileButtonProps, FileButton as default };

package/dist/FileButton.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import Button from './Button.js';
+
+type FileButtonProps = React__default.ComponentProps<typeof Button> & {
+    accept?: string;
+    multiple?: boolean;
+    capture?: boolean | string;
+    onFiles: (files: FileList | null, e: React__default.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const FileButton: React__default.ForwardRefExoticComponent<Omit<FileButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { type FileButtonProps, FileButton as default };

package/dist/FileButton.js

@@ -0,0 +1,77 @@
+"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 FileButton_exports = {};
+__export(FileButton_exports, {
+  default: () => FileButton_default
+});
+module.exports = __toCommonJS(FileButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
+var import_Input = __toESM(require("./Input"));
+const FileButton = import_react.default.forwardRef(
+  ({ accept, multiple, capture, onFiles, children, ...btnProps }, ref) => {
+    const inputRef = import_react.default.useRef(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
+        {
+          ...btnProps,
+          ref,
+          onClick: (e) => {
+            var _a, _b;
+            e.preventDefault();
+            (_a = btnProps.onClick) == null ? void 0 : _a.call(btnProps, e);
+            (_b = inputRef.current) == null ? void 0 : _b.click();
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.default,
+        {
+          unstyled: true,
+          ref: inputRef,
+          type: "file",
+          accept,
+          multiple,
+          ...capture !== void 0 ? { capture } : {},
+          className: "hidden",
+          onChange: (e) => {
+            onFiles == null ? void 0 : onFiles(e.target.files, e);
+            e.target.value = "";
+          }
+        }
+      )
+    ] });
+  }
+);
+FileButton.displayName = "FileButton";
+var FileButton_default = FileButton;

package/dist/FileButton.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Button from "./Button";
+import Input from "./Input";
+const FileButton = React.forwardRef(
+  ({ accept, multiple, capture, onFiles, children, ...btnProps }, ref) => {
+    const inputRef = React.useRef(null);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...btnProps,
+          ref,
+          onClick: (e) => {
+            var _a, _b;
+            e.preventDefault();
+            (_a = btnProps.onClick) == null ? void 0 : _a.call(btnProps, e);
+            (_b = inputRef.current) == null ? void 0 : _b.click();
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          unstyled: true,
+          ref: inputRef,
+          type: "file",
+          accept,
+          multiple,
+          ...capture !== void 0 ? { capture } : {},
+          className: "hidden",
+          onChange: (e) => {
+            onFiles == null ? void 0 : onFiles(e.target.files, e);
+            e.target.value = "";
+          }
+        }
+      )
+    ] });
+  }
+);
+FileButton.displayName = "FileButton";
+var FileButton_default = FileButton;
+export {
+  FileButton_default as default
+};

package/dist/MediaTile.js

@@ -38,6 +38,7 @@ var import_image = __toESM(require("next/image"));
 var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_Dropdown = __toESM(require("./Dropdown"));
+var import_Button = __toESM(require("./Button"));
 function MediaTile({
   imageUrl,
   title,
@@ -63,7 +64,7 @@ function MediaTile({
   };
   const btnSize = menuSize === "lg" ? "h-11 w-11" : menuSize === "sm" ? "h-8 w-8" : "h-9 w-9";
   const iconSize = menuSize === "lg" ? "h-7 w-7" : menuSize === "sm" ? "h-5 w-5" : "h-6 w-6";
-  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
+  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",

package/dist/MediaTile.mjs

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 import { microTransition } from "./animations";
 import Dropdown from "./Dropdown";
+import Button from "./Button";
 function MediaTile({
   imageUrl,
   title,
@@ -30,7 +31,7 @@ function MediaTile({
   };
   const btnSize = menuSize === "lg" ? "h-11 w-11" : menuSize === "sm" ? "h-8 w-8" : "h-9 w-9";
   const iconSize = menuSize === "lg" ? "h-7 w-7" : menuSize === "sm" ? "h-5 w-5" : "h-6 w-6";
-  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ jsx("button", { type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ jsx("div", { ...props });
+  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ jsx(Button, { unstyled: true, type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ jsx("div", { ...props });
   if (loading) {
     return /* @__PURE__ */ jsxs(
       "div",

package/dist/TimePopover.js

@@ -69,11 +69,11 @@ function TimePopover({
   const place = React.useCallback(() => {
     const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
     if (!a) return;
-    const W = 220, Hh = 128, GAP = 8, MARGIN = 8;
+    const W = 220, Hh = 128, GAP = 4, MARGIN = 8;
     let left = Math.min(a.left, window.innerWidth - W - MARGIN);
     left = Math.max(MARGIN, left);
-    let top = a.bottom + GAP;
-    if (top + Hh > window.innerHeight) top = Math.max(MARGIN, a.top - GAP - Hh);
+    let top = a.top - GAP - Hh;
+    if (top < MARGIN) top = Math.max(MARGIN, a.bottom + GAP);
     setPos({ top, left });
   }, [anchorEl]);
   React.useEffect(() => {

package/dist/TimePopover.mjs

@@ -34,11 +34,11 @@ function TimePopover({
   const place = React.useCallback(() => {
     const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
     if (!a) return;
-    const W = 220, Hh = 128, GAP = 8, MARGIN = 8;
+    const W = 220, Hh = 128, GAP = 4, MARGIN = 8;
     let left = Math.min(a.left, window.innerWidth - W - MARGIN);
     left = Math.max(MARGIN, left);
-    let top = a.bottom + GAP;
-    if (top + Hh > window.innerHeight) top = Math.max(MARGIN, a.top - GAP - Hh);
+    let top = a.top - GAP - Hh;
+    if (top < MARGIN) top = Math.max(MARGIN, a.bottom + GAP);
     setPos({ top, left });
   }, [anchorEl]);
   React.useEffect(() => {

package/dist/TimeRangeField.js

@@ -128,15 +128,18 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const GAP = 8, MARGIN = 8;
-    const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
-    const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
-    let left = anchorRect.left + (anchorRect.width - W) / 2;
+    const W = 360, GAP = 2, MARGIN = 8;
+    let left = anchorRect.right - W;
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
-    let top = anchorRect.bottom + GAP;
-    if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
-    const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
-    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
+    const spaceAbove = anchorRect.top - MARGIN;
+    const spaceBelow = window.innerHeight - anchorRect.bottom - MARGIN;
+    const placeAbove = spaceAbove >= spaceBelow;
+    if (placeAbove) {
+      const top2 = Math.max(MARGIN, anchorRect.top - GAP);
+      return { position: "fixed", top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+    }
+    const top = Math.max(MARGIN, anchorRect.bottom + GAP);
+    return { position: "fixed", top, left, zIndex: 1e5 };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;
@@ -149,7 +152,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     setTo(t2);
     onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
   };
-  const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/TimeRangeField.mjs

@@ -95,15 +95,18 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const GAP = 8, MARGIN = 8;
-    const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
-    const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
-    let left = anchorRect.left + (anchorRect.width - W) / 2;
+    const W = 360, GAP = 2, MARGIN = 8;
+    let left = anchorRect.right - W;
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
-    let top = anchorRect.bottom + GAP;
-    if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
-    const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
-    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
+    const spaceAbove = anchorRect.top - MARGIN;
+    const spaceBelow = window.innerHeight - anchorRect.bottom - MARGIN;
+    const placeAbove = spaceAbove >= spaceBelow;
+    if (placeAbove) {
+      const top2 = Math.max(MARGIN, anchorRect.top - GAP);
+      return { position: "fixed", top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+    }
+    const top = Math.max(MARGIN, anchorRect.bottom + GAP);
+    return { position: "fixed", top, left, zIndex: 1e5 };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;
@@ -116,7 +119,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     setTo(t2);
     onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
   };
-  const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
+  const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__PURE__ */ jsx(

package/dist/index.d.mts

@@ -43,6 +43,7 @@ export { default as Tooltip } from './Tooltip.mjs';
 export { default as Link } from './Link.mjs';
 export { ToastProvider, useToast } from './Toast.mjs';
 export { default as StorageUsage, StorageUsageProps } from './StorageUsage.mjs';
+export { default as FileButton, FileButtonProps } from './FileButton.mjs';
 export { a as Animations } from './animations-CHrNeawW.mjs';
 export { default as MotionProvider } from './MotionProvider.mjs';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export { default as Tooltip } from './Tooltip.js';
 export { default as Link } from './Link.js';
 export { ToastProvider, useToast } from './Toast.js';
 export { default as StorageUsage, StorageUsageProps } from './StorageUsage.js';
+export { default as FileButton, FileButtonProps } from './FileButton.js';
 export { a as Animations } from './animations-CHrNeawW.js';
 export { default as MotionProvider } from './MotionProvider.js';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';

package/dist/index.js

@@ -54,6 +54,7 @@ __export(index_exports, {
   Drawer: () => import_Drawer.default,
   Dropdown: () => import_Dropdown.default,
   EmptyState: () => import_EmptyState.default,
+  FileButton: () => import_FileButton.default,
   FiltersMultiSelect: () => import_FiltersMultiSelect.default,
   InfoGrid: () => import_InfoGrid.default,
   Input: () => import_Input.default,
@@ -146,6 +147,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
 var import_Link = __toESM(require("./Link"));
 var import_Toast = require("./Toast");
 var import_StorageUsage = __toESM(require("./StorageUsage"));
+var import_FileButton = __toESM(require("./FileButton"));
 var Animations = __toESM(require("./animations"));
 var import_MotionProvider = __toESM(require("./MotionProvider"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
@@ -187,6 +189,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   Drawer,
   Dropdown,
   EmptyState,
+  FileButton,
   FiltersMultiSelect,
   InfoGrid,
   Input,

package/dist/index.mjs

@@ -46,20 +46,21 @@ import { default as default41 } from "./Tooltip";
 import { default as default42 } from "./Link";
 import { ToastProvider, useToast } from "./Toast";
 import { default as default43 } from "./StorageUsage";
+import { default as default44 } from "./FileButton";
 import * as Animations from "./animations";
-import { default as default44 } from "./MotionProvider";
-import { default as default45 } from "./CalendarPanel";
-import { default as default46 } from "./TimePopover";
+import { default as default45 } from "./MotionProvider";
+import { default as default46 } from "./CalendarPanel";
+import { default as default47 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default47 } from "./TimePanel";
-import { default as default48 } from "./TimeRangeField";
-import { default as default49 } from "./Steps";
+import { default as default48 } from "./TimePanel";
+import { default as default49 } from "./TimeRangeField";
+import { default as default50 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
-import { default as default50 } from "./ColorPicker";
-import { default as default51, useTheme } from "./theme/ThemeProvider";
-import { default as default52 } from "./theme/ThemeScript";
-import { default as default53 } from "./theme/ThemeToggle";
+import { default as default51 } from "./ColorPicker";
+import { default as default52, useTheme } from "./theme/ThemeProvider";
+import { default as default53 } from "./theme/ThemeScript";
+import { default as default54 } from "./theme/ThemeToggle";
 export {
   default3 as ActionIconButton,
   AnimatedBody,
@@ -71,12 +72,12 @@ export {
   default26 as BadgeCluster,
   default27 as Breadcrumb,
   default2 as Button,
-  default45 as CalendarPanel,
+  default46 as CalendarPanel,
   default39 as Card,
   default17 as ChartCard,
   default6 as Checkbox,
   default7 as CheckboxPillsGroup,
-  default50 as ColorPicker,
+  default51 as ColorPicker,
   default11 as ColumnSelector,
   default10 as ComboSelect,
   CtrHorizontalBar,
@@ -86,6 +87,7 @@ export {
   default40 as Drawer,
   default14 as Dropdown,
   default28 as EmptyState,
+  default44 as FileButton,
   default8 as FiltersMultiSelect,
   default16 as InfoGrid,
   default4 as Input,
@@ -96,7 +98,7 @@ export {
   default20 as MediaTile,
   default29 as Money,
   MonthPopover,
-  default44 as MotionProvider,
+  default45 as MotionProvider,
   default37 as MultiComboSelect,
   default34 as OrderButton,
   default15 as Pagination,
@@ -108,19 +110,19 @@ export {
   default21 as Skeleton,
   SortTh,
   default23 as StatCard,
-  default49 as Steps,
+  default50 as Steps,
   StepsNav,
   default43 as StorageUsage,
   Td,
   default5 as Textarea,
   Th,
-  default51 as ThemeProvider,
-  default52 as ThemeScript,
-  default53 as ThemeToggle,
+  default52 as ThemeProvider,
+  default53 as ThemeScript,
+  default54 as ThemeToggle,
   default30 as TimeAgo,
-  default47 as TimePanel,
-  default46 as TimePopover,
-  default48 as TimeRangeField,
+  default48 as TimePanel,
+  default47 as TimePopover,
+  default49 as TimeRangeField,
   ToastProvider,
   default41 as Tooltip,
   TopImpresionesBar,

package/dist/theme/ThemeToggle.js

@@ -1,8 +1,10 @@
 "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)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 ThemeToggle_exports = {};
 __export(ThemeToggle_exports, {
@@ -24,6 +34,7 @@ __export(ThemeToggle_exports, {
 module.exports = __toCommonJS(ThemeToggle_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ThemeProvider = require("./ThemeProvider");
+var import_Button = __toESM(require("../Button"));
 const defaultCycle = ["light", "dark", "system"];
 function ThemeToggle({ cycle = defaultCycle, className, labels }) {
   var _a;
@@ -35,8 +46,9 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
   };
   const text = (_a = labels == null ? void 0 : labels[theme]) != null ? _a : theme === "system" ? "Sistema" : theme === "dark" ? "Oscuro" : "Claro";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
       type: "button",
       onClick: handleClick,
       "aria-label": `Cambiar tema (actual: ${text})`,
@@ -44,7 +56,6 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
       className: [
         "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
         "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
-        // In dark, use the unified surface as the backplate; keep hover as a light overlay
         "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:hover:bg-white/10",
         className != null ? className : ""
       ].join(" "),

package/dist/theme/ThemeToggle.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "./ThemeProvider";
+import Button from "../Button";
 const defaultCycle = ["light", "dark", "system"];
 function ThemeToggle({ cycle = defaultCycle, className, labels }) {
   var _a;
@@ -12,8 +13,9 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
   };
   const text = (_a = labels == null ? void 0 : labels[theme]) != null ? _a : theme === "system" ? "Sistema" : theme === "dark" ? "Oscuro" : "Claro";
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      unstyled: true,
       type: "button",
       onClick: handleClick,
       "aria-label": `Cambiar tema (actual: ${text})`,
@@ -21,7 +23,6 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
       className: [
         "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
         "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
-        // In dark, use the unified surface as the backplate; keep hover as a light overlay
         "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:hover:bg-white/10",
         className != null ? className : ""
       ].join(" "),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",