framepexls-ui-lib 0.3.5 → 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/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/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.5",
+  "version": "0.3.6",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",