framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/MultiComboSelect.mjs

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import ComboSelect from "./ComboSelect";
 import Dialog from "./Dialog";
+import Button from "./Button";
 import Badge from "./Badge";
 function MultiComboSelect({
   options,
@@ -66,8 +67,9 @@ function MultiComboSelect({
         return /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
       }),
       enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ jsxs(
-        "button",
+        Button,
         {
+          unstyled: true,
           type: "button",
           className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/10 dark:text-slate-200",
           onClick: () => setDialogOpen(true),
@@ -94,8 +96,9 @@ function MultiComboSelect({
               /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "inline-flex h-8 items-center justify-center rounded-lg border border-slate-300/80 bg-white px-2 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
                 onClick: () => toggle(v),
@@ -105,15 +108,7 @@ function MultiComboSelect({
           ] }, v);
         })
       ] }) }),
-      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-          onClick: () => setDialogOpen(false),
-          children: "Cerrar"
-        }
-      ) })
+      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", className: "shadow-sm", onClick: () => setDialogOpen(false), children: "Cerrar" }) })
     ] })
   ] });
 }

package/dist/OrderButton.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 OrderButton_exports = {};
 __export(OrderButton_exports, {
@@ -23,10 +33,12 @@ __export(OrderButton_exports, {
 });
 module.exports = __toCommonJS(OrderButton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 function OrderButton({ label, active, asc, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
       onClick,
       className: "rounded-xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
       children: [

package/dist/OrderButton.mjs

@@ -1,9 +1,11 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 function OrderButton({ label, active, asc, onClick }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      unstyled: true,
       onClick,
       className: "rounded-xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
       children: [

package/dist/Pagination.d.mts

@@ -6,7 +6,8 @@ type PaginationProps = {
     onPageChange: (p: number) => void;
     maxButtons?: number;
     className?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/Pagination.d.ts

@@ -6,7 +6,8 @@ type PaginationProps = {
     onPageChange: (p: number) => void;
     maxButtons?: number;
     className?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/Pagination.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 Pagination_exports = {};
 __export(Pagination_exports, {
@@ -23,12 +33,14 @@ __export(Pagination_exports, {
 });
 module.exports = __toCommonJS(Pagination_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 function Pagination({
   page,
   totalPages,
   onPageChange,
   maxButtons = 7,
-  className = ""
+  className = "",
+  color = "blue"
 }) {
   const getRange = () => {
     if (totalPages <= maxButtons)
@@ -44,18 +56,43 @@ function Pagination({
     return range2;
   };
   const range = getRange();
+  const ACTIVE = {
+    slate: "bg-slate-600 text-white",
+    gray: "bg-gray-600 text-white",
+    zinc: "bg-zinc-600 text-white",
+    neutral: "bg-neutral-600 text-white",
+    stone: "bg-stone-600 text-white",
+    red: "bg-red-600 text-white",
+    orange: "bg-orange-600 text-white",
+    amber: "bg-amber-600 text-white",
+    yellow: "bg-yellow-500 text-slate-900",
+    lime: "bg-lime-600 text-white",
+    green: "bg-green-600 text-white",
+    emerald: "bg-emerald-600 text-white",
+    teal: "bg-teal-600 text-white",
+    cyan: "bg-cyan-600 text-white",
+    sky: "bg-sky-600 text-white",
+    blue: "bg-blue-600 text-white",
+    indigo: "bg-indigo-600 text-white",
+    violet: "bg-violet-600 text-white",
+    purple: "bg-purple-600 text-white",
+    fuchsia: "bg-fuchsia-600 text-white",
+    pink: "bg-pink-600 text-white",
+    rose: "bg-rose-600 text-white"
+  };
   const Btn = ({
     children,
     active,
     disabled,
     onClick
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
       disabled,
       onClick,
       className: `h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? "bg-blue-600 text-white rounded-2xl shadow-sm" : "rounded-none text-slate-900 hover:bg-white/60"}
+      ${active ? `${ACTIVE[color]} rounded-2xl shadow-sm` : "rounded-none text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children

package/dist/Pagination.mjs

@@ -1,11 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 function Pagination({
   page,
   totalPages,
   onPageChange,
   maxButtons = 7,
-  className = ""
+  className = "",
+  color = "blue"
 }) {
   const getRange = () => {
     if (totalPages <= maxButtons)
@@ -21,18 +23,43 @@ function Pagination({
     return range2;
   };
   const range = getRange();
+  const ACTIVE = {
+    slate: "bg-slate-600 text-white",
+    gray: "bg-gray-600 text-white",
+    zinc: "bg-zinc-600 text-white",
+    neutral: "bg-neutral-600 text-white",
+    stone: "bg-stone-600 text-white",
+    red: "bg-red-600 text-white",
+    orange: "bg-orange-600 text-white",
+    amber: "bg-amber-600 text-white",
+    yellow: "bg-yellow-500 text-slate-900",
+    lime: "bg-lime-600 text-white",
+    green: "bg-green-600 text-white",
+    emerald: "bg-emerald-600 text-white",
+    teal: "bg-teal-600 text-white",
+    cyan: "bg-cyan-600 text-white",
+    sky: "bg-sky-600 text-white",
+    blue: "bg-blue-600 text-white",
+    indigo: "bg-indigo-600 text-white",
+    violet: "bg-violet-600 text-white",
+    purple: "bg-purple-600 text-white",
+    fuchsia: "bg-fuchsia-600 text-white",
+    pink: "bg-pink-600 text-white",
+    rose: "bg-rose-600 text-white"
+  };
   const Btn = ({
     children,
     active,
     disabled,
     onClick
   }) => /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      unstyled: true,
       disabled,
       onClick,
       className: `h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? "bg-blue-600 text-white rounded-2xl shadow-sm" : "rounded-none text-slate-900 hover:bg-white/60"}
+      ${active ? `${ACTIVE[color]} rounded-2xl shadow-sm` : "rounded-none text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children

package/dist/ReviewHistory.js

@@ -35,6 +35,7 @@ __export(ReviewHistory_exports, {
 module.exports = __toCommonJS(ReviewHistory_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Dialog = __toESM(require("./Dialog"));
+var import_Button = __toESM(require("./Button"));
 var import_Badge = __toESM(require("./Badge"));
 function ReviewHistory({
   items,
@@ -59,7 +60,7 @@ function ReviewHistory({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
       ] }, r.id);
     }) }),
-    items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+    items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
 function ReviewHistoryDialog({
@@ -83,14 +84,7 @@ function ReviewHistoryDialog({
         ] }, r.id);
       })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-        onClick: onClose,
-        children: "Cerrar"
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", size: "md", className: "shadow-sm", onClick: onClose, children: "Cerrar" }) })
   ] });
 }
 function formatDateTime(value) {

package/dist/ReviewHistory.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "./Dialog";
+import Button from "./Button";
 import Badge from "./Badge";
 function ReviewHistory({
   items,
@@ -25,7 +26,7 @@ function ReviewHistory({
         /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
       ] }, r.id);
     }) }),
-    items.length > 3 && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+    items.length > 3 && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(Button, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
 function ReviewHistoryDialog({
@@ -49,14 +50,7 @@ function ReviewHistoryDialog({
         ] }, r.id);
       })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-        onClick: onClose,
-        children: "Cerrar"
-      }
-    ) })
+    /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", className: "shadow-sm", onClick: onClose, children: "Cerrar" }) })
   ] });
 }
 function formatDateTime(value) {

package/dist/SearchInput.js

@@ -34,6 +34,7 @@ __export(SearchInput_exports, {
 module.exports = __toCommonJS(SearchInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("./Input"));
 function SearchInput({
   value,
   onChange,
@@ -53,7 +54,7 @@ function SearchInput({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: inputId, className: `relative ${widthClasses} ${className != null ? className : ""}`, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "input",
+      import_Input.default,
       {
         id: inputId,
         type: "search",
@@ -62,54 +63,28 @@ function SearchInput({
         disabled,
         onChange: (e) => onChange(e.target.value),
         placeholder: placeholder != null ? placeholder : "Buscar...",
-        className: [
-          "w-full rounded-2xl border bg-white px-4 py-2.5 text-sm outline-none ring-0",
-          "pr-10",
-          // espacio para el icono
-          "placeholder:text-slate-400",
-          "border-slate-200 focus:border-blue-300 focus:ring-2 focus:ring-blue-200",
-          "dark:border-white/10 dark:bg-[#0e0d0e] dark:focus:border-blue-500 dark:focus:ring-blue-900/40",
-          disabled ? "opacity-60 cursor-not-allowed" : ""
-        ].join(" "),
+        clearable,
         onKeyDown: (e) => {
           if (clearable && !disabled && value && e.key === "Escape") {
             e.preventDefault();
             clear();
           }
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-50",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" })
-        ]
-      }
-    ),
-    clearable && !disabled && value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: clear,
-        className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
-        "aria-label": "Limpiar b\xFAsqueda",
-        title: "Limpiar",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
+        },
+        rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
           {
-            fillRule: "evenodd",
-            d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
-            clipRule: "evenodd"
+            viewBox: "0 0 24 24",
+            className: "h-5 w-5 opacity-50",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" })
+            ]
           }
-        ) })
+        )
       }
     )
   ] });

package/dist/SearchInput.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Input from "./Input";
 function SearchInput({
   value,
   onChange,
@@ -20,7 +21,7 @@ function SearchInput({
   return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: `relative ${widthClasses} ${className != null ? className : ""}`, children: [
     label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
         id: inputId,
         type: "search",
@@ -29,54 +30,28 @@ function SearchInput({
         disabled,
         onChange: (e) => onChange(e.target.value),
         placeholder: placeholder != null ? placeholder : "Buscar...",
-        className: [
-          "w-full rounded-2xl border bg-white px-4 py-2.5 text-sm outline-none ring-0",
-          "pr-10",
-          // espacio para el icono
-          "placeholder:text-slate-400",
-          "border-slate-200 focus:border-blue-300 focus:ring-2 focus:ring-blue-200",
-          "dark:border-white/10 dark:bg-[#0e0d0e] dark:focus:border-blue-500 dark:focus:ring-blue-900/40",
-          disabled ? "opacity-60 cursor-not-allowed" : ""
-        ].join(" "),
+        clearable,
         onKeyDown: (e) => {
           if (clearable && !disabled && value && e.key === "Escape") {
             e.preventDefault();
             clear();
           }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-50",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
-          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" })
-        ]
-      }
-    ),
-    clearable && !disabled && value && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: clear,
-        className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
-        "aria-label": "Limpiar b\xFAsqueda",
-        title: "Limpiar",
-        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-          "path",
+        },
+        rightSlot: /* @__PURE__ */ jsxs(
+          "svg",
           {
-            fillRule: "evenodd",
-            d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
-            clipRule: "evenodd"
+            viewBox: "0 0 24 24",
+            className: "h-5 w-5 opacity-50",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" })
+            ]
           }
-        ) })
+        )
       }
     )
   ] });

package/dist/Select.js

@@ -34,6 +34,7 @@ __export(Select_exports, {
 module.exports = __toCommonJS(Select_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
@@ -162,8 +163,9 @@ function ModernSelect({
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           ref: btnRef,
           id: selectId,
           type: "button",
@@ -202,8 +204,9 @@ function ModernSelect({
         }
       ),
       clearable && value !== "" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           onClick: clear,
           className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",

package/dist/Select.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
@@ -129,8 +130,9 @@ function ModernSelect({
     label && /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           ref: btnRef,
           id: selectId,
           type: "button",
@@ -169,8 +171,9 @@ function ModernSelect({
         }
       ),
       clearable && value !== "" && !disabled && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           type: "button",
           onClick: clear,
           className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",

package/dist/Sidebar.d.mts

@@ -23,13 +23,12 @@ type SidebarProps = {
     user?: SidebarUser;
     userMenuSlot?: React__default.ReactNode;
     onBrandClick?: () => void;
-    /** LocalStorage key para persistir colapsado */
     collapsedKey?: string;
-    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
     brandInitials?: string;
     brandTitle?: string;
     brandSubtitle?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, color, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };

package/dist/Sidebar.d.ts

@@ -23,13 +23,12 @@ type SidebarProps = {
     user?: SidebarUser;
     userMenuSlot?: React__default.ReactNode;
     onBrandClick?: () => void;
-    /** LocalStorage key para persistir colapsado */
     collapsedKey?: string;
-    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
     brandInitials?: string;
     brandTitle?: string;
     brandSubtitle?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, color, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };