framepexls-ui-lib 0.1.12 → 0.1.14

package/dist/Badge.d.mts

@@ -3,8 +3,9 @@ import React__default from 'react';
 
 type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
 type Size = "sm" | "md" | "lg";
-declare function Badge({ tone, size, children, onClick, title, className, }: {
+declare function Badge({ tone, color, size, children, onClick, title, className, }: {
     tone?: Tone;
+    color?: Tone;
     size?: Size;
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent) => void;

package/dist/Badge.d.ts

@@ -3,8 +3,9 @@ import React__default from 'react';
 
 type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
 type Size = "sm" | "md" | "lg";
-declare function Badge({ tone, size, children, onClick, title, className, }: {
+declare function Badge({ tone, color, size, children, onClick, title, className, }: {
     tone?: Tone;
+    color?: Tone;
     size?: Size;
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent) => void;

package/dist/Badge.js

@@ -44,6 +44,7 @@ const sizeClasses = {
 };
 function Badge({
   tone = "slate",
+  color,
   size = "md",
   children,
   onClick,
@@ -53,6 +54,7 @@ function Badge({
   var _a;
   const clickable = typeof onClick === "function";
   const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
+  const chosenTone = color != null ? color : tone;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "span",
     {
@@ -60,7 +62,7 @@ function Badge({
       onClick,
       className: [
         "inline-flex items-center rounded-full font-semibold truncate",
-        tones[tone],
+        tones[chosenTone],
         sz.wrap,
         sz.gap,
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",

package/dist/Badge.mjs

@@ -21,6 +21,7 @@ const sizeClasses = {
 };
 function Badge({
   tone = "slate",
+  color,
   size = "md",
   children,
   onClick,
@@ -30,6 +31,7 @@ function Badge({
   var _a;
   const clickable = typeof onClick === "function";
   const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
+  const chosenTone = color != null ? color : tone;
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -37,7 +39,7 @@ function Badge({
       onClick,
       className: [
         "inline-flex items-center rounded-full font-semibold truncate",
-        tones[tone],
+        tones[chosenTone],
         sz.wrap,
         sz.gap,
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",

package/dist/BadgeCluster.js

@@ -37,13 +37,13 @@ var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_react2 = require("motion/react");
 var import_Badge = __toESM(require("./Badge"));
+var import_Button = __toESM(require("./Button"));
 function BadgeCluster({
   items,
   max = 3,
   align = "left",
   className = "",
   usePortal = true
-  // 👈 por defecto evita clipping
 }) {
   const show = items.slice(0, max);
   const rest = items.slice(max);
@@ -95,7 +95,6 @@ function BadgeCluster({
       ].join(" "),
       style: usePortal && pos ? {
         top: pos.top,
-        // si alineas a la derecha, ancla por la derecha del botón
         left: align === "right" ? void 0 : pos.left,
         right: align === "right" ? Math.max(window.innerWidth - pos.left, 0) : void 0
       } : void 0,
@@ -106,8 +105,9 @@ function BadgeCluster({
     show.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: it.tone, children: it.label }, `${it.label}-${i}`)),
     rest.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           ref: btnRef,
           type: "button",
           onClick: () => setOpen((v) => !v),

package/dist/BadgeCluster.mjs

@@ -4,13 +4,13 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "motion/react";
 import Badge from "./Badge";
+import Button from "./Button";
 function BadgeCluster({
   items,
   max = 3,
   align = "left",
   className = "",
   usePortal = true
-  // 👈 por defecto evita clipping
 }) {
   const show = items.slice(0, max);
   const rest = items.slice(max);
@@ -62,7 +62,6 @@ function BadgeCluster({
       ].join(" "),
       style: usePortal && pos ? {
         top: pos.top,
-        // si alineas a la derecha, ancla por la derecha del botón
         left: align === "right" ? void 0 : pos.left,
         right: align === "right" ? Math.max(window.innerWidth - pos.left, 0) : void 0
       } : void 0,
@@ -73,8 +72,9 @@ function BadgeCluster({
     show.map((it, i) => /* @__PURE__ */ jsx(Badge, { tone: it.tone, children: it.label }, `${it.label}-${i}`)),
     rest.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
-        "button",
+        Button,
         {
+          unstyled: true,
           ref: btnRef,
           type: "button",
           onClick: () => setOpen((v) => !v),

package/dist/Button.d.mts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
-type ButtonProps = {
+declare const Button: React__default.ForwardRefExoticComponent<{
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     size?: "sm" | "md" | "lg";
     loading?: boolean;
     leftIcon?: React__default.ReactNode;
@@ -15,7 +15,6 @@ type ButtonProps = {
     icon?: React__default.ReactNode;
     noPaddingX?: boolean;
     unstyled?: boolean;
-} & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, unstyled, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 
 export { Button as default };

package/dist/Button.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
-type ButtonProps = {
+declare const Button: React__default.ForwardRefExoticComponent<{
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     size?: "sm" | "md" | "lg";
     loading?: boolean;
     leftIcon?: React__default.ReactNode;
@@ -15,7 +15,6 @@ type ButtonProps = {
     icon?: React__default.ReactNode;
     noPaddingX?: boolean;
     unstyled?: boolean;
-} & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, unstyled, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 
 export { Button as default };

package/dist/Button.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,16 +18,26 @@ 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 Button_exports = {};
 __export(Button_exports, {
-  default: () => Button
+  default: () => Button_default
 });
 module.exports = __toCommonJS(Button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button({
+var import_react = __toESM(require("react"));
+const Button = import_react.default.forwardRef(({
   children,
   variant = "primary",
+  color,
   size = "md",
   loading = false,
   disabled,
@@ -41,11 +53,12 @@ function Button({
   noPaddingX = false,
   unstyled = false,
   ...rest
-}) {
+}, ref) => {
   if (unstyled) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
+        ref,
         type,
         disabled: disabled || loading,
         "aria-pressed": active ? true : void 0,
@@ -57,21 +70,93 @@ function Button({
   }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
   const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
+  const SOLID = {
+    slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
+    gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",
+    zinc: "bg-zinc-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-zinc-500",
+    neutral: "bg-neutral-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-neutral-500",
+    stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
+    red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
+    orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
+    amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
+    yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
+    lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
+    green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",
+    emerald: "bg-emerald-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-emerald-500",
+    teal: "bg-teal-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-teal-500",
+    cyan: "bg-cyan-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-cyan-500",
+    sky: "bg-sky-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-sky-500",
+    blue: "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500",
+    indigo: "bg-indigo-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-indigo-500",
+    violet: "bg-violet-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-violet-500",
+    purple: "bg-purple-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-purple-500",
+    fuchsia: "bg-fuchsia-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-fuchsia-500",
+    pink: "bg-pink-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-pink-500",
+    rose: "bg-rose-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-rose-500"
+  };
+  const OUTLINE = {
+    slate: "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10",
+    gray: "border border-gray-300/80 bg-transparent text-gray-700 hover:bg-gray-50 active:scale-[.98] dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/10",
+    zinc: "border border-zinc-300/80 bg-transparent text-zinc-700 hover:bg-zinc-50 active:scale-[.98] dark:border-white/10 dark:text-zinc-200 dark:hover:bg-white/10",
+    neutral: "border border-neutral-300/80 bg-transparent text-neutral-700 hover:bg-neutral-50 active:scale-[.98] dark:border-white/10 dark:text-neutral-200 dark:hover:bg-white/10",
+    stone: "border border-stone-300/80 bg-transparent text-stone-700 hover:bg-stone-50 active:scale-[.98] dark:border-white/10 dark:text-stone-200 dark:hover:bg-white/10",
+    red: "border border-red-300/80 bg-transparent text-red-700 hover:bg-red-50 active:scale-[.98] dark:border-white/10 dark:text-red-300 dark:hover:bg-white/10",
+    orange: "border border-orange-300/80 bg-transparent text-orange-700 hover:bg-orange-50 active:scale-[.98] dark:border-white/10 dark:text-orange-300 dark:hover:bg-white/10",
+    amber: "border border-amber-300/80 bg-transparent text-amber-700 hover:bg-amber-50 active:scale-[.98] dark:border-white/10 dark:text-amber-300 dark:hover:bg-white/10",
+    yellow: "border border-yellow-300/80 bg-transparent text-yellow-700 hover:bg-yellow-50 active:scale-[.98] dark:border-white/10 dark:text-yellow-300 dark:hover:bg-white/10",
+    lime: "border border-lime-300/80 bg-transparent text-lime-700 hover:bg-lime-50 active:scale-[.98] dark:border-white/10 dark:text-lime-300 dark:hover:bg-white/10",
+    green: "border border-green-300/80 bg-transparent text-green-700 hover:bg-green-50 active:scale-[.98] dark:border-white/10 dark:text-green-300 dark:hover:bg-white/10",
+    emerald: "border border-emerald-300/80 bg-transparent text-emerald-700 hover:bg-emerald-50 active:scale-[.98] dark:border-white/10 dark:text-emerald-300 dark:hover:bg-white/10",
+    teal: "border border-teal-300/80 bg-transparent text-teal-700 hover:bg-teal-50 active:scale-[.98] dark:border-white/10 dark:text-teal-300 dark:hover:bg-white/10",
+    cyan: "border border-cyan-300/80 bg-transparent text-cyan-700 hover:bg-cyan-50 active:scale-[.98] dark:border-white/10 dark:text-cyan-300 dark:hover:bg-white/10",
+    sky: "border border-sky-300/80 bg-transparent text-sky-700 hover:bg-sky-50 active:scale-[.98] dark:border-white/10 dark:text-sky-300 dark:hover:bg-white/10",
+    blue: "border border-blue-300/80 bg-transparent text-blue-700 hover:bg-blue-50 active:scale-[.98] dark:border-white/10 dark:text-blue-300 dark:hover:bg-white/10",
+    indigo: "border border-indigo-300/80 bg-transparent text-indigo-700 hover:bg-indigo-50 active:scale-[.98] dark:border-white/10 dark:text-indigo-300 dark:hover:bg-white/10",
+    violet: "border border-violet-300/80 bg-transparent text-violet-700 hover:bg-violet-50 active:scale-[.98] dark:border-white/10 dark:text-violet-300 dark:hover:bg-white/10",
+    purple: "border border-purple-300/80 bg-transparent text-purple-700 hover:bg-purple-50 active:scale-[.98] dark:border-white/10 dark:text-purple-300 dark:hover:bg-white/10",
+    fuchsia: "border border-fuchsia-300/80 bg-transparent text-fuchsia-700 hover:bg-fuchsia-50 active:scale-[.98] dark:border-white/10 dark:text-fuchsia-300 dark:hover:bg-white/10",
+    pink: "border border-pink-300/80 bg-transparent text-pink-700 hover:bg-pink-50 active:scale-[.98] dark:border-white/10 dark:text-pink-300 dark:hover:bg-white/10",
+    rose: "border border-rose-300/80 bg-transparent text-rose-700 hover:bg-rose-50 active:scale-[.98] dark:border-white/10 dark:text-rose-300 dark:hover:bg-white/10"
+  };
+  const GHOST = {
+    slate: "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10",
+    gray: "bg-transparent text-gray-700 hover:bg-gray-50 active:scale-[.98] dark:text-gray-200 dark:hover:bg-white/10",
+    zinc: "bg-transparent text-zinc-700 hover:bg-zinc-50 active:scale-[.98] dark:text-zinc-200 dark:hover:bg-white/10",
+    neutral: "bg-transparent text-neutral-700 hover:bg-neutral-50 active:scale-[.98] dark:text-neutral-200 dark:hover:bg-white/10",
+    stone: "bg-transparent text-stone-700 hover:bg-stone-50 active:scale-[.98] dark:text-stone-200 dark:hover:bg-white/10",
+    red: "bg-transparent text-red-700 hover:bg-red-50 active:scale-[.98] dark:text-red-300 dark:hover:bg-white/10",
+    orange: "bg-transparent text-orange-700 hover:bg-orange-50 active:scale-[.98] dark:text-orange-300 dark:hover:bg-white/10",
+    amber: "bg-transparent text-amber-700 hover:bg-amber-50 active:scale-[.98] dark:text-amber-300 dark:hover:bg-white/10",
+    yellow: "bg-transparent text-yellow-700 hover:bg-yellow-50 active:scale-[.98] dark:text-yellow-300 dark:hover:bg-white/10",
+    lime: "bg-transparent text-lime-700 hover:bg-lime-50 active:scale-[.98] dark:text-lime-300 dark:hover:bg-white/10",
+    green: "bg-transparent text-green-700 hover:bg-green-50 active:scale-[.98] dark:text-green-300 dark:hover:bg-white/10",
+    emerald: "bg-transparent text-emerald-700 hover:bg-emerald-50 active:scale-[.98] dark:text-emerald-300 dark:hover:bg-white/10",
+    teal: "bg-transparent text-teal-700 hover:bg-teal-50 active:scale-[.98] dark:text-teal-300 dark:hover:bg-white/10",
+    cyan: "bg-transparent text-cyan-700 hover:bg-cyan-50 active:scale-[.98] dark:text-cyan-300 dark:hover:bg-white/10",
+    sky: "bg-transparent text-sky-700 hover:bg-sky-50 active:scale-[.98] dark:text-sky-300 dark:hover:bg-white/10",
+    blue: "bg-transparent text-blue-700 hover:bg-blue-50 active:scale-[.98] dark:text-blue-300 dark:hover:bg-white/10",
+    indigo: "bg-transparent text-indigo-700 hover:bg-indigo-50 active:scale-[.98] dark:text-indigo-300 dark:hover:bg-white/10",
+    violet: "bg-transparent text-violet-700 hover:bg-violet-50 active:scale-[.98] dark:text-violet-300 dark:hover:bg-white/10",
+    purple: "bg-transparent text-purple-700 hover:bg-purple-50 active:scale-[.98] dark:text-purple-300 dark:hover:bg-white/10",
+    fuchsia: "bg-transparent text-fuchsia-700 hover:bg-fuchsia-50 active:scale-[.98] dark:text-fuchsia-300 dark:hover:bg-white/10",
+    pink: "bg-transparent text-pink-700 hover:bg-pink-50 active:scale-[.98] dark:text-pink-300 dark:hover:bg-white/10",
+    rose: "bg-transparent text-rose-700 hover:bg-rose-50 active:scale-[.98] dark:text-rose-300 dark:hover:bg-white/10"
+  };
   const variantClass = (() => {
     switch (variant) {
       case "primary":
-        return "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
+        return color ? SOLID[color] : "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
       case "secondary":
         return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
       case "outline":
-        return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? OUTLINE[color] : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
       case "ghost":
-        return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? GHOST[color] : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
       case "danger":
-        return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
+        return color ? SOLID[color] : "bg-rose-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-rose-500";
     }
   })();
-  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
   const hasChildren = children !== void 0 && children !== null && children !== false;
   const showText = hasChildren && !iconOnly;
   const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
@@ -81,6 +166,7 @@ function Button({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
+      ref,
       type,
       disabled: disabled || loading,
       "aria-pressed": active ? true : void 0,
@@ -105,4 +191,6 @@ function Button({
       ]
     }
   );
-}
+});
+Button.displayName = "Button";
+var Button_default = Button;

package/dist/Button.mjs

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Button({
+import React from "react";
+const Button = React.forwardRef(({
   children,
   variant = "primary",
+  color,
   size = "md",
   loading = false,
   disabled,
@@ -18,11 +20,12 @@ function Button({
   noPaddingX = false,
   unstyled = false,
   ...rest
-}) {
+}, ref) => {
   if (unstyled) {
     return /* @__PURE__ */ jsx(
       "button",
       {
+        ref,
         type,
         disabled: disabled || loading,
         "aria-pressed": active ? true : void 0,
@@ -34,21 +37,93 @@ function Button({
   }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
   const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
+  const SOLID = {
+    slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
+    gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",
+    zinc: "bg-zinc-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-zinc-500",
+    neutral: "bg-neutral-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-neutral-500",
+    stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
+    red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
+    orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
+    amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
+    yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
+    lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
+    green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",
+    emerald: "bg-emerald-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-emerald-500",
+    teal: "bg-teal-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-teal-500",
+    cyan: "bg-cyan-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-cyan-500",
+    sky: "bg-sky-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-sky-500",
+    blue: "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500",
+    indigo: "bg-indigo-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-indigo-500",
+    violet: "bg-violet-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-violet-500",
+    purple: "bg-purple-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-purple-500",
+    fuchsia: "bg-fuchsia-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-fuchsia-500",
+    pink: "bg-pink-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-pink-500",
+    rose: "bg-rose-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-rose-500"
+  };
+  const OUTLINE = {
+    slate: "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10",
+    gray: "border border-gray-300/80 bg-transparent text-gray-700 hover:bg-gray-50 active:scale-[.98] dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/10",
+    zinc: "border border-zinc-300/80 bg-transparent text-zinc-700 hover:bg-zinc-50 active:scale-[.98] dark:border-white/10 dark:text-zinc-200 dark:hover:bg-white/10",
+    neutral: "border border-neutral-300/80 bg-transparent text-neutral-700 hover:bg-neutral-50 active:scale-[.98] dark:border-white/10 dark:text-neutral-200 dark:hover:bg-white/10",
+    stone: "border border-stone-300/80 bg-transparent text-stone-700 hover:bg-stone-50 active:scale-[.98] dark:border-white/10 dark:text-stone-200 dark:hover:bg-white/10",
+    red: "border border-red-300/80 bg-transparent text-red-700 hover:bg-red-50 active:scale-[.98] dark:border-white/10 dark:text-red-300 dark:hover:bg-white/10",
+    orange: "border border-orange-300/80 bg-transparent text-orange-700 hover:bg-orange-50 active:scale-[.98] dark:border-white/10 dark:text-orange-300 dark:hover:bg-white/10",
+    amber: "border border-amber-300/80 bg-transparent text-amber-700 hover:bg-amber-50 active:scale-[.98] dark:border-white/10 dark:text-amber-300 dark:hover:bg-white/10",
+    yellow: "border border-yellow-300/80 bg-transparent text-yellow-700 hover:bg-yellow-50 active:scale-[.98] dark:border-white/10 dark:text-yellow-300 dark:hover:bg-white/10",
+    lime: "border border-lime-300/80 bg-transparent text-lime-700 hover:bg-lime-50 active:scale-[.98] dark:border-white/10 dark:text-lime-300 dark:hover:bg-white/10",
+    green: "border border-green-300/80 bg-transparent text-green-700 hover:bg-green-50 active:scale-[.98] dark:border-white/10 dark:text-green-300 dark:hover:bg-white/10",
+    emerald: "border border-emerald-300/80 bg-transparent text-emerald-700 hover:bg-emerald-50 active:scale-[.98] dark:border-white/10 dark:text-emerald-300 dark:hover:bg-white/10",
+    teal: "border border-teal-300/80 bg-transparent text-teal-700 hover:bg-teal-50 active:scale-[.98] dark:border-white/10 dark:text-teal-300 dark:hover:bg-white/10",
+    cyan: "border border-cyan-300/80 bg-transparent text-cyan-700 hover:bg-cyan-50 active:scale-[.98] dark:border-white/10 dark:text-cyan-300 dark:hover:bg-white/10",
+    sky: "border border-sky-300/80 bg-transparent text-sky-700 hover:bg-sky-50 active:scale-[.98] dark:border-white/10 dark:text-sky-300 dark:hover:bg-white/10",
+    blue: "border border-blue-300/80 bg-transparent text-blue-700 hover:bg-blue-50 active:scale-[.98] dark:border-white/10 dark:text-blue-300 dark:hover:bg-white/10",
+    indigo: "border border-indigo-300/80 bg-transparent text-indigo-700 hover:bg-indigo-50 active:scale-[.98] dark:border-white/10 dark:text-indigo-300 dark:hover:bg-white/10",
+    violet: "border border-violet-300/80 bg-transparent text-violet-700 hover:bg-violet-50 active:scale-[.98] dark:border-white/10 dark:text-violet-300 dark:hover:bg-white/10",
+    purple: "border border-purple-300/80 bg-transparent text-purple-700 hover:bg-purple-50 active:scale-[.98] dark:border-white/10 dark:text-purple-300 dark:hover:bg-white/10",
+    fuchsia: "border border-fuchsia-300/80 bg-transparent text-fuchsia-700 hover:bg-fuchsia-50 active:scale-[.98] dark:border-white/10 dark:text-fuchsia-300 dark:hover:bg-white/10",
+    pink: "border border-pink-300/80 bg-transparent text-pink-700 hover:bg-pink-50 active:scale-[.98] dark:border-white/10 dark:text-pink-300 dark:hover:bg-white/10",
+    rose: "border border-rose-300/80 bg-transparent text-rose-700 hover:bg-rose-50 active:scale-[.98] dark:border-white/10 dark:text-rose-300 dark:hover:bg-white/10"
+  };
+  const GHOST = {
+    slate: "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10",
+    gray: "bg-transparent text-gray-700 hover:bg-gray-50 active:scale-[.98] dark:text-gray-200 dark:hover:bg-white/10",
+    zinc: "bg-transparent text-zinc-700 hover:bg-zinc-50 active:scale-[.98] dark:text-zinc-200 dark:hover:bg-white/10",
+    neutral: "bg-transparent text-neutral-700 hover:bg-neutral-50 active:scale-[.98] dark:text-neutral-200 dark:hover:bg-white/10",
+    stone: "bg-transparent text-stone-700 hover:bg-stone-50 active:scale-[.98] dark:text-stone-200 dark:hover:bg-white/10",
+    red: "bg-transparent text-red-700 hover:bg-red-50 active:scale-[.98] dark:text-red-300 dark:hover:bg-white/10",
+    orange: "bg-transparent text-orange-700 hover:bg-orange-50 active:scale-[.98] dark:text-orange-300 dark:hover:bg-white/10",
+    amber: "bg-transparent text-amber-700 hover:bg-amber-50 active:scale-[.98] dark:text-amber-300 dark:hover:bg-white/10",
+    yellow: "bg-transparent text-yellow-700 hover:bg-yellow-50 active:scale-[.98] dark:text-yellow-300 dark:hover:bg-white/10",
+    lime: "bg-transparent text-lime-700 hover:bg-lime-50 active:scale-[.98] dark:text-lime-300 dark:hover:bg-white/10",
+    green: "bg-transparent text-green-700 hover:bg-green-50 active:scale-[.98] dark:text-green-300 dark:hover:bg-white/10",
+    emerald: "bg-transparent text-emerald-700 hover:bg-emerald-50 active:scale-[.98] dark:text-emerald-300 dark:hover:bg-white/10",
+    teal: "bg-transparent text-teal-700 hover:bg-teal-50 active:scale-[.98] dark:text-teal-300 dark:hover:bg-white/10",
+    cyan: "bg-transparent text-cyan-700 hover:bg-cyan-50 active:scale-[.98] dark:text-cyan-300 dark:hover:bg-white/10",
+    sky: "bg-transparent text-sky-700 hover:bg-sky-50 active:scale-[.98] dark:text-sky-300 dark:hover:bg-white/10",
+    blue: "bg-transparent text-blue-700 hover:bg-blue-50 active:scale-[.98] dark:text-blue-300 dark:hover:bg-white/10",
+    indigo: "bg-transparent text-indigo-700 hover:bg-indigo-50 active:scale-[.98] dark:text-indigo-300 dark:hover:bg-white/10",
+    violet: "bg-transparent text-violet-700 hover:bg-violet-50 active:scale-[.98] dark:text-violet-300 dark:hover:bg-white/10",
+    purple: "bg-transparent text-purple-700 hover:bg-purple-50 active:scale-[.98] dark:text-purple-300 dark:hover:bg-white/10",
+    fuchsia: "bg-transparent text-fuchsia-700 hover:bg-fuchsia-50 active:scale-[.98] dark:text-fuchsia-300 dark:hover:bg-white/10",
+    pink: "bg-transparent text-pink-700 hover:bg-pink-50 active:scale-[.98] dark:text-pink-300 dark:hover:bg-white/10",
+    rose: "bg-transparent text-rose-700 hover:bg-rose-50 active:scale-[.98] dark:text-rose-300 dark:hover:bg-white/10"
+  };
   const variantClass = (() => {
     switch (variant) {
       case "primary":
-        return "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
+        return color ? SOLID[color] : "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
       case "secondary":
         return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
       case "outline":
-        return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? OUTLINE[color] : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
       case "ghost":
-        return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? GHOST[color] : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
       case "danger":
-        return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
+        return color ? SOLID[color] : "bg-rose-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-rose-500";
     }
   })();
-  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
   const hasChildren = children !== void 0 && children !== null && children !== false;
   const showText = hasChildren && !iconOnly;
   const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
@@ -58,6 +133,7 @@ function Button({
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ref,
       type,
       disabled: disabled || loading,
       "aria-pressed": active ? true : void 0,
@@ -82,7 +158,9 @@ function Button({
       ]
     }
   );
-}
+});
+Button.displayName = "Button";
+var Button_default = Button;
 export {
-  Button as default
+  Button_default as default
 };

package/dist/CalendarPanel.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 CalendarPanel_exports = {};
 __export(CalendarPanel_exports, {
@@ -23,6 +33,7 @@ __export(CalendarPanel_exports, {
 });
 module.exports = __toCommonJS(CalendarPanel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 const dow = ["D", "L", "M", "M", "J", "V", "S"];
@@ -66,16 +77,20 @@ function CalendarPanel({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
+            type: "button",
             className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
             onClick: () => onCursorChange(new Date(year, month - 1, 1)),
             children: "\u25C0"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
+            type: "button",
             className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
             onClick: () => onCursorChange(new Date(year, month + 1, 1)),
             children: "\u25B6"
@@ -91,8 +106,10 @@ function CalendarPanel({
       const disabled = !withinBounds(d);
       const key = d.toISOString().slice(0, 10);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
+          type: "button",
           disabled,
           onClick: () => !disabled && onPick(d),
           className: [

package/dist/CalendarPanel.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 const dow = ["D", "L", "M", "M", "J", "V", "S"];
@@ -43,16 +44,20 @@ function CalendarPanel({
       /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
+            type: "button",
             className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
             onClick: () => onCursorChange(new Date(year, month - 1, 1)),
             children: "\u25C0"
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
+            type: "button",
             className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
             onClick: () => onCursorChange(new Date(year, month + 1, 1)),
             children: "\u25B6"
@@ -68,8 +73,10 @@ function CalendarPanel({
       const disabled = !withinBounds(d);
       const key = d.toISOString().slice(0, 10);
       return /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
+          type: "button",
           disabled,
           onClick: () => !disabled && onPick(d),
           className: [

package/dist/Card.d.mts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+type Props = React__default.HTMLAttributes<HTMLDivElement>;
+declare const Card: React__default.ForwardRefExoticComponent<Props & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Card as default };

package/dist/Card.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+type Props = React__default.HTMLAttributes<HTMLDivElement>;
+declare const Card: React__default.ForwardRefExoticComponent<Props & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Card as default };