framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/Card.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-[#0f0d0e]";
+const Card = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: [base, className].filter(Boolean).join(" "),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var Card_default = Card;
+export {
+  Card_default as default
+};

package/dist/CheckboxPillsGroup.d.mts

@@ -22,7 +22,8 @@ type CheckboxPillsGroupProps = {
     withIcon?: boolean;
     maxSelected?: number;
     className?: string;
+    color?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
 };
-declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, color, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
 
 export { type CheckboxPillsGroupProps, type PillsOption, CheckboxPillsGroup as default };

package/dist/CheckboxPillsGroup.d.ts

@@ -22,7 +22,8 @@ type CheckboxPillsGroupProps = {
     withIcon?: boolean;
     maxSelected?: number;
     className?: string;
+    color?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
 };
-declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxPillsGroup({ options, value, onChange, multiple, name, label, emptyText, size, accent, variant, rounded, withIcon, maxSelected, className, color, }: CheckboxPillsGroupProps): react_jsx_runtime.JSX.Element;
 
 export { type CheckboxPillsGroupProps, type PillsOption, CheckboxPillsGroup as default };

package/dist/CheckboxPillsGroup.js

@@ -34,6 +34,7 @@ __export(CheckboxPillsGroup_exports, {
 module.exports = __toCommonJS(CheckboxPillsGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("./Input"));
 const cx = (...a) => a.filter(Boolean).join(" ");
 function toObj(opt) {
   var _a, _b;
@@ -50,27 +51,27 @@ const SIZE = {
   md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
 };
 const ACTIVE_SOFT = {
-  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-rose-50/80 text-rose-700 dark:border-rose-400/40 dark:bg-rose-500/10 dark:text-rose-200",
   sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-violet-50/80 text-violet-700 dark:border-violet-400/40 dark:bg-violet-500/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
   slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
 };
 const ACTIVE_OUTLINE = {
-  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  rose: "border-rose-400 text-rose-700 dark:text-rose-200",
   sky: "border-sky-400 text-sky-700 dark:text-sky-200",
-  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  violet: "border-violet-400 text-violet-700 dark:text-violet-200",
   emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
   indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
   amber: "border-amber-400 text-amber-700 dark:text-amber-200",
   slate: "border-slate-400 text-slate-700 dark:text-slate-200"
 };
 const ACTIVE_GLASS = {
-  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-gradient-to-br from-rose-50 to-rose-50/0 text-rose-700 dark:from-rose-400/10 dark:text-rose-200",
   sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-gradient-to-br from-violet-50 to-violet-50/0 text-violet-700 dark:from-violet-400/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
@@ -96,10 +97,12 @@ function CheckboxPillsGroup({
   rounded = "full",
   withIcon = true,
   maxSelected,
-  className
+  className,
+  color
 }) {
   const opts = import_react.default.useMemo(() => options.map(toObj), [options]);
   const sz = SIZE[size];
+  const selectedAccent = color != null ? color : accent;
   const radius = rounded === "full" ? "rounded-full" : rounded === "2xl" ? "rounded-2xl" : rounded === "md" ? "rounded-md" : "rounded-xl";
   const baseChip = cx(
     "relative inline-flex items-center whitespace-nowrap select-none",
@@ -140,13 +143,14 @@ function CheckboxPillsGroup({
           title: o.title,
           className: cx(
             baseChip,
-            active ? activeClasses(accent, variant) : NEUTRAL,
+            active ? activeClasses(selectedAccent, variant) : NEUTRAL,
             (disabled || !canSelectMore) && !active && "cursor-not-allowed opacity-60"
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
+              import_Input.default,
               {
+                unstyled: true,
                 type: multiple ? "checkbox" : "radio",
                 name: !multiple ? name != null ? name : "pills-group" : void 0,
                 className: "sr-only",
@@ -163,14 +167,14 @@ function CheckboxPillsGroup({
                   className: cx(
                     "grid place-items-center rounded-full",
                     {
-                      rose: "bg-blue-500/10 text-blue-600",
+                      rose: "bg-rose-500/10 text-rose-600",
                       sky: "bg-sky-500/10 text-sky-600",
-                      violet: "bg-blue-500/10 text-blue-600",
+                      violet: "bg-violet-500/10 text-violet-600",
                       emerald: "bg-emerald-500/10 text-emerald-600",
                       indigo: "bg-indigo-500/10 text-indigo-600",
                       amber: "bg-amber-500/10 text-amber-600",
                       slate: "bg-slate-500/10 text-slate-600"
-                    }[accent]
+                    }[selectedAccent]
                   ),
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4 10-10" }) })
                 }

package/dist/CheckboxPillsGroup.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Input from "./Input";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function toObj(opt) {
   var _a, _b;
@@ -17,27 +18,27 @@ const SIZE = {
   md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
 };
 const ACTIVE_SOFT = {
-  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-rose-50/80 text-rose-700 dark:border-rose-400/40 dark:bg-rose-500/10 dark:text-rose-200",
   sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-violet-50/80 text-violet-700 dark:border-violet-400/40 dark:bg-violet-500/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
   slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
 };
 const ACTIVE_OUTLINE = {
-  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  rose: "border-rose-400 text-rose-700 dark:text-rose-200",
   sky: "border-sky-400 text-sky-700 dark:text-sky-200",
-  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  violet: "border-violet-400 text-violet-700 dark:text-violet-200",
   emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
   indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
   amber: "border-amber-400 text-amber-700 dark:text-amber-200",
   slate: "border-slate-400 text-slate-700 dark:text-slate-200"
 };
 const ACTIVE_GLASS = {
-  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-gradient-to-br from-rose-50 to-rose-50/0 text-rose-700 dark:from-rose-400/10 dark:text-rose-200",
   sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-gradient-to-br from-violet-50 to-violet-50/0 text-violet-700 dark:from-violet-400/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
@@ -63,10 +64,12 @@ function CheckboxPillsGroup({
   rounded = "full",
   withIcon = true,
   maxSelected,
-  className
+  className,
+  color
 }) {
   const opts = React.useMemo(() => options.map(toObj), [options]);
   const sz = SIZE[size];
+  const selectedAccent = color != null ? color : accent;
   const radius = rounded === "full" ? "rounded-full" : rounded === "2xl" ? "rounded-2xl" : rounded === "md" ? "rounded-md" : "rounded-xl";
   const baseChip = cx(
     "relative inline-flex items-center whitespace-nowrap select-none",
@@ -107,13 +110,14 @@ function CheckboxPillsGroup({
           title: o.title,
           className: cx(
             baseChip,
-            active ? activeClasses(accent, variant) : NEUTRAL,
+            active ? activeClasses(selectedAccent, variant) : NEUTRAL,
             (disabled || !canSelectMore) && !active && "cursor-not-allowed opacity-60"
           ),
           children: [
             /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
+                unstyled: true,
                 type: multiple ? "checkbox" : "radio",
                 name: !multiple ? name != null ? name : "pills-group" : void 0,
                 className: "sr-only",
@@ -130,14 +134,14 @@ function CheckboxPillsGroup({
                   className: cx(
                     "grid place-items-center rounded-full",
                     {
-                      rose: "bg-blue-500/10 text-blue-600",
+                      rose: "bg-rose-500/10 text-rose-600",
                       sky: "bg-sky-500/10 text-sky-600",
-                      violet: "bg-blue-500/10 text-blue-600",
+                      violet: "bg-violet-500/10 text-violet-600",
                       emerald: "bg-emerald-500/10 text-emerald-600",
                       indigo: "bg-indigo-500/10 text-indigo-600",
                       amber: "bg-amber-500/10 text-amber-600",
                       slate: "bg-slate-500/10 text-slate-600"
-                    }[accent]
+                    }[selectedAccent]
                   ),
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4 10-10" }) })
                 }

package/dist/ColumnSelector.js

@@ -1,7 +1,9 @@
 "use strict";
+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)
@@ -15,6 +17,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 ColumnSelector_exports = {};
 __export(ColumnSelector_exports, {
@@ -23,6 +33,8 @@ __export(ColumnSelector_exports, {
 module.exports = __toCommonJS(ColumnSelector_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("motion/react");
+var import_Button = __toESM(require("./Button"));
+var import_Input = __toESM(require("./Input"));
 function ColumnSelector({
   open,
   onToggleOpen,
@@ -32,8 +44,9 @@ function ColumnSelector({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_Button.default,
       {
+        unstyled: true,
         onClick: (e) => {
           e.stopPropagation();
           onToggleOpen((v) => !v);
@@ -56,8 +69,9 @@ function ColumnSelector({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-slate-800 dark:text-slate-100", children: label }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "input",
+                import_Input.default,
                 {
+                  unstyled: true,
                   type: "checkbox",
                   checked: visible[key],
                   onChange: (e) => setVisible(key, e.target.checked),

package/dist/ColumnSelector.mjs

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
+import Button from "./Button";
+import Input from "./Input";
 function ColumnSelector({
   open,
   onToggleOpen,
@@ -9,8 +11,9 @@ function ColumnSelector({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        unstyled: true,
         onClick: (e) => {
           e.stopPropagation();
           onToggleOpen((v) => !v);
@@ -33,8 +36,9 @@ function ColumnSelector({
             children: [
               /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-800 dark:text-slate-100", children: label }),
               /* @__PURE__ */ jsx(
-                "input",
+                Input,
                 {
+                  unstyled: true,
                   type: "checkbox",
                   checked: visible[key],
                   onChange: (e) => setVisible(key, e.target.checked),

package/dist/ComboSelect.d.mts

@@ -36,9 +36,7 @@ type ComboSelectProps = {
     keepFocusOnSelect?: boolean;
     clearQueryOnSelect?: boolean;
     renderTags?: React__default.ReactNode;
-    /** Si true, las filas pueden tener inputs/botones y el click de fondo dispara onChange */
     interactiveOptions?: boolean;
-    /** 🔹 Nuevo: notifica cambios en el texto de búsqueda */
     onQueryChange?: (q: string) => void;
 };
 declare function ComboSelect({ options, sections, value, onChange, placeholder, disabled, loading, allowClear, searchable, maxItems, className, noResultsText, renderOption, renderSectionHeader, portalTarget, closeOnSelect, keepFocusOnSelect, clearQueryOnSelect, renderTags, interactiveOptions, onQueryChange, }: ComboSelectProps): react_jsx_runtime.JSX.Element;

package/dist/ComboSelect.d.ts

@@ -36,9 +36,7 @@ type ComboSelectProps = {
     keepFocusOnSelect?: boolean;
     clearQueryOnSelect?: boolean;
     renderTags?: React__default.ReactNode;
-    /** Si true, las filas pueden tener inputs/botones y el click de fondo dispara onChange */
     interactiveOptions?: boolean;
-    /** 🔹 Nuevo: notifica cambios en el texto de búsqueda */
     onQueryChange?: (q: string) => void;
 };
 declare function ComboSelect({ options, sections, value, onChange, placeholder, disabled, loading, allowClear, searchable, maxItems, className, noResultsText, renderOption, renderSectionHeader, portalTarget, closeOnSelect, keepFocusOnSelect, clearQueryOnSelect, renderTags, interactiveOptions, onQueryChange, }: ComboSelectProps): react_jsx_runtime.JSX.Element;

package/dist/ComboSelect.js

@@ -36,6 +36,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+var import_Input = __toESM(require("./Input"));
+var import_Button = __toESM(require("./Button"));
 const cx = (...a) => a.filter(Boolean).join(" ");
 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-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus-within:ring-white/10";
 const isFocusableOrInteractive = (el) => {
@@ -66,7 +68,6 @@ function ComboSelect({
   renderTags,
   interactiveOptions = false,
   onQueryChange
-  // 🔹 nuevo
 }) {
   var _a;
   const [query, _setQuery] = import_react.default.useState("");
@@ -360,8 +361,9 @@ function ComboSelect({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx(controlShell, "pr-20 pl-3 py-2 min-h-[44px] flex flex-wrap items-center gap-2"), children: [
           renderTags,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
+            import_Input.default,
             {
+              unstyled: true,
               ref: inputRef,
               role: "combobox",
               "aria-haspopup": "listbox",
@@ -388,8 +390,9 @@ function ComboSelect({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none", children: [
           loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
           allowClear && value != null && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               type: "button",
               title: "Limpiar",
               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-white/5",
@@ -413,8 +416,9 @@ function ComboSelect({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               type: "button",
               title: open ? "Cerrar" : "Abrir",
               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-white/5",

package/dist/ComboSelect.mjs

@@ -3,6 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
 import AvatarSquare from "./AvatarSquare";
+import Input from "./Input";
+import Button from "./Button";
 const cx = (...a) => a.filter(Boolean).join(" ");
 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-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus-within:ring-white/10";
 const isFocusableOrInteractive = (el) => {
@@ -33,7 +35,6 @@ function ComboSelect({
   renderTags,
   interactiveOptions = false,
   onQueryChange
-  // 🔹 nuevo
 }) {
   var _a;
   const [query, _setQuery] = React.useState("");
@@ -327,8 +328,9 @@ function ComboSelect({
         /* @__PURE__ */ jsxs("div", { className: cx(controlShell, "pr-20 pl-3 py-2 min-h-[44px] flex flex-wrap items-center gap-2"), children: [
           renderTags,
           /* @__PURE__ */ jsx(
-            "input",
+            Input,
             {
+              unstyled: true,
               ref: inputRef,
               role: "combobox",
               "aria-haspopup": "listbox",
@@ -355,8 +357,9 @@ function ComboSelect({
         /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none", children: [
           loading && /* @__PURE__ */ jsx("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
           allowClear && value != null && !disabled && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               title: "Limpiar",
               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-white/5",
@@ -380,8 +383,9 @@ function ComboSelect({
             }
           ),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               title: open ? "Cerrar" : "Abrir",
               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-white/5",

package/dist/DateTimeField.d.mts

@@ -4,17 +4,12 @@ import React__default from 'react';
 type PickerMode = "date" | "datetime-local" | "time";
 type DateTimeFieldProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
     type?: PickerMode;
-    /** ISO para date/datetime-local, HH:mm para time; o null */
     value?: string | null;
     min?: string;
     max?: string;
-    /** Cambio por valor (recomendado) */
     onValueChange?: (next: string | null) => void;
-    /** Si true, usa portal (document.body o portalId) */
     portal?: boolean;
-    /** id del contenedor de portal (opcional) */
     portalId?: string;
-    /** muestra botón de limpiar en el Input */
     clearable?: boolean;
 };
 declare function DateTimeField({ type, value, min, max, onValueChange, portal, portalId, clearable, ...inputProps }: DateTimeFieldProps): react_jsx_runtime.JSX.Element;

package/dist/DateTimeField.d.ts

@@ -4,17 +4,12 @@ import React__default from 'react';
 type PickerMode = "date" | "datetime-local" | "time";
 type DateTimeFieldProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
     type?: PickerMode;
-    /** ISO para date/datetime-local, HH:mm para time; o null */
     value?: string | null;
     min?: string;
     max?: string;
-    /** Cambio por valor (recomendado) */
     onValueChange?: (next: string | null) => void;
-    /** Si true, usa portal (document.body o portalId) */
     portal?: boolean;
-    /** id del contenedor de portal (opcional) */
     portalId?: string;
-    /** muestra botón de limpiar en el Input */
     clearable?: boolean;
 };
 declare function DateTimeField({ type, value, min, max, onValueChange, portal, portalId, clearable, ...inputProps }: DateTimeFieldProps): react_jsx_runtime.JSX.Element;

package/dist/DateTimeField.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_Input = __toESM(require("./Input"));
+var import_Button = __toESM(require("./Button"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
 var import_TimePopover = __toESM(require("./TimePopover"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -269,8 +270,9 @@ function DateTimeField({
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 ref: timeBtnRef,
                 type: "button",
                 className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
@@ -282,8 +284,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => {
@@ -299,8 +302,9 @@ function DateTimeField({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               type: "button",
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
               onClick: () => setOpen(false),
@@ -311,8 +315,9 @@ function DateTimeField({
         type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-1.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -324,8 +329,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -338,8 +344,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -353,8 +360,9 @@ function DateTimeField({
             )
           ] }),
           value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               className: "rounded-lg px-2 py-1 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10",
               onClick: () => {
                 emit(null);
@@ -374,8 +382,9 @@ function DateTimeField({
       {
         leftSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, {}),
         rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            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-white/5",
             onClick: (e) => {