framepexls-ui-lib 0.1.12 → 0.1.14

package/dist/ActionIconButton.d.mts

@@ -5,6 +5,7 @@ declare const ActionIconButton: React__default.ForwardRefExoticComponent<{
     danger?: boolean;
     loading?: boolean;
     size?: "sm" | "md" | "lg";
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     className?: string;
 } & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 

package/dist/ActionIconButton.d.ts

@@ -5,6 +5,7 @@ declare const ActionIconButton: React__default.ForwardRefExoticComponent<{
     danger?: boolean;
     loading?: boolean;
     size?: "sm" | "md" | "lg";
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     className?: string;
 } & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 

package/dist/ActionIconButton.js

@@ -34,6 +34,7 @@ __export(ActionIconButton_exports, {
 module.exports = __toCommonJS(ActionIconButton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 const ActionIconButton = import_react.default.forwardRef(
   ({
     children,
@@ -43,26 +44,28 @@ const ActionIconButton = import_react.default.forwardRef(
     disabled,
     size = "md",
     className = "",
+    color,
     type = "button",
     ...rest
   }, ref) => {
-    const sizeCls = size === "sm" ? "h-8 w-8" : size === "lg" ? "h-10 w-10" : "h-9 w-9";
-    const base = "inline-flex items-center justify-center rounded-xl border transition hover:scale-105 active:scale-95 focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
-    const tone = danger ? "border-blue-200/70 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800/50 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 dark:text-blue-200" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 dark:text-slate-200";
+    const widthCls = size === "sm" ? "w-9" : size === "lg" ? "w-11" : "w-10";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_Button.default,
       {
         ref,
         type,
         title,
         "aria-label": title,
         disabled: disabled || loading,
-        className: `${base} ${tone} ${sizeCls} ${className}`,
+        loading,
+        size,
+        color,
+        variant: danger ? "danger" : "secondary",
+        iconOnly: true,
+        noPaddingX: true,
+        className: `${widthCls} ${className}`,
         ...rest,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 animate-spin", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 0 0-9-9", className: "opacity-90" })
-        ] }) : children
+        children
       }
     );
   }

package/dist/ActionIconButton.mjs

@@ -1,6 +1,7 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 const ActionIconButton = React.forwardRef(
   ({
     children,
@@ -10,26 +11,28 @@ const ActionIconButton = React.forwardRef(
     disabled,
     size = "md",
     className = "",
+    color,
     type = "button",
     ...rest
   }, ref) => {
-    const sizeCls = size === "sm" ? "h-8 w-8" : size === "lg" ? "h-10 w-10" : "h-9 w-9";
-    const base = "inline-flex items-center justify-center rounded-xl border transition hover:scale-105 active:scale-95 focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
-    const tone = danger ? "border-blue-200/70 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800/50 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 dark:text-blue-200" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 dark:text-slate-200";
+    const widthCls = size === "sm" ? "w-9" : size === "lg" ? "w-11" : "w-10";
     return /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
         ref,
         type,
         title,
         "aria-label": title,
         disabled: disabled || loading,
-        className: `${base} ${tone} ${sizeCls} ${className}`,
+        loading,
+        size,
+        color,
+        variant: danger ? "danger" : "secondary",
+        iconOnly: true,
+        noPaddingX: true,
+        className: `${widthCls} ${className}`,
         ...rest,
-        children: loading ? /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 animate-spin", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),
-          /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", className: "opacity-90" })
-        ] }) : children
+        children
       }
     );
   }

package/dist/AppTopbar.d.mts

@@ -1,17 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type TopbarAction = {
+    label: string;
+    onClick?: () => void;
+};
 type Props = {
     title: string;
     subtitle?: string;
-    primary?: {
-        label: string;
-        onClick?: () => void;
-    };
-    secondary?: {
-        label: string;
-        onClick?: () => void;
-    };
+    primary?: TopbarAction;
+    secondary?: TopbarAction;
+    actions?: TopbarAction[];
 };
-declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.d.ts

@@ -1,17 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type TopbarAction = {
+    label: string;
+    onClick?: () => void;
+};
 type Props = {
     title: string;
     subtitle?: string;
-    primary?: {
-        label: string;
-        onClick?: () => void;
-    };
-    secondary?: {
-        label: string;
-        onClick?: () => void;
-    };
+    primary?: TopbarAction;
+    secondary?: TopbarAction;
+    actions?: TopbarAction[];
 };
-declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.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 AppTopbar_exports = {};
 __export(AppTopbar_exports, {
@@ -23,26 +33,42 @@ __export(AppTopbar_exports, {
 });
 module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function AppTopbar({ title, subtitle, secondary, primary }) {
+var import_Button = __toESM(require("./Button"));
+function AppTopbar({ title, subtitle, secondary, primary, actions }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500", children: subtitle })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
+        {
+          onClick: a.onClick,
+          variant: "secondary",
+          size: "sm",
+          className: "shadow-sm",
+          children: a.label
+        },
+        `action-${idx}-${a.label}`
+      )),
       secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
           onClick: secondary.onClick,
-          className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+          variant: "secondary",
+          size: "sm",
+          className: "shadow-sm",
           children: secondary.label
         }
       ),
       primary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
           onClick: primary.onClick,
-          className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700",
+          variant: "danger",
+          size: "sm",
+          className: "shadow-sm",
           children: primary.label
         }
       )

package/dist/AppTopbar.mjs

@@ -1,25 +1,41 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AppTopbar({ title, subtitle, secondary, primary }) {
+import Button from "./Button";
+function AppTopbar({ title, subtitle, secondary, primary, actions }) {
   return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: subtitle })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: a.onClick,
+          variant: "secondary",
+          size: "sm",
+          className: "shadow-sm",
+          children: a.label
+        },
+        `action-${idx}-${a.label}`
+      )),
       secondary && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
           onClick: secondary.onClick,
-          className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+          variant: "secondary",
+          size: "sm",
+          className: "shadow-sm",
           children: secondary.label
         }
       ),
       primary && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
           onClick: primary.onClick,
-          className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700",
+          variant: "danger",
+          size: "sm",
+          className: "shadow-sm",
           children: primary.label
         }
       )

package/dist/AvatarGroup.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    sources: Array<string | null | undefined>;
+    max?: number;
+    size?: number;
+    overlap?: boolean;
+    radiusClass?: string;
+    className?: string;
+    showCounter?: boolean;
+};
+declare function AvatarGroup({ sources, max, size, overlap, radiusClass, className, showCounter, }: Props): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup as default };

package/dist/AvatarGroup.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    sources: Array<string | null | undefined>;
+    max?: number;
+    size?: number;
+    overlap?: boolean;
+    radiusClass?: string;
+    className?: string;
+    showCounter?: boolean;
+};
+declare function AvatarGroup({ sources, max, size, overlap, radiusClass, className, showCounter, }: Props): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup as default };

package/dist/AvatarGroup.js

@@ -0,0 +1,77 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AvatarGroup_exports = {};
+__export(AvatarGroup_exports, {
+  default: () => AvatarGroup
+});
+module.exports = __toCommonJS(AvatarGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+function AvatarGroup({
+  sources,
+  max = 3,
+  size = 28,
+  overlap = true,
+  radiusClass = "rounded-xl",
+  className = "",
+  showCounter = true
+}) {
+  const imgs = (sources || []).filter(Boolean);
+  const visible = imgs.slice(0, Math.max(0, max));
+  const rest = Math.max(0, imgs.length - visible.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: ["flex items-center", className].join(" "),
+      "aria-label": "Grupo de avatares",
+      children: [
+        visible.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: i > 0 && overlap ? "-ml-2" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { src, size, radiusClass }) }, `${src}-${i}`)),
+        showCounter && rest > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: [
+              overlap && visible.length > 0 ? "-ml-2" : "",
+              "grid place-items-center",
+              radiusClass,
+              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
+            ].join(" "),
+            style: { width: size, height: size },
+            "aria-label": `+${rest}`,
+            title: `+${rest}`,
+            children: [
+              "+",
+              rest
+            ]
+          }
+        )
+      ]
+    }
+  );
+}

package/dist/AvatarGroup.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import AvatarSquare from "./AvatarSquare";
+function AvatarGroup({
+  sources,
+  max = 3,
+  size = 28,
+  overlap = true,
+  radiusClass = "rounded-xl",
+  className = "",
+  showCounter = true
+}) {
+  const imgs = (sources || []).filter(Boolean);
+  const visible = imgs.slice(0, Math.max(0, max));
+  const rest = Math.max(0, imgs.length - visible.length);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["flex items-center", className].join(" "),
+      "aria-label": "Grupo de avatares",
+      children: [
+        visible.map((src, i) => /* @__PURE__ */ jsx("div", { className: i > 0 && overlap ? "-ml-2" : void 0, children: /* @__PURE__ */ jsx(AvatarSquare, { src, size, radiusClass }) }, `${src}-${i}`)),
+        showCounter && rest > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [
+              overlap && visible.length > 0 ? "-ml-2" : "",
+              "grid place-items-center",
+              radiusClass,
+              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
+            ].join(" "),
+            style: { width: size, height: size },
+            "aria-label": `+${rest}`,
+            title: `+${rest}`,
+            children: [
+              "+",
+              rest
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AvatarGroup as default
+};

package/dist/AvatarSquare.d.mts

@@ -2,15 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Props = {
     size?: number;
-    /** URL de la imagen */
     src?: string | null;
-    /** Texto alternativo para la imagen */
     alt?: string;
-    /** Clases extra para ajustar estilos */
     className?: string;
-    /** Radio del borde (por si quieres otra forma) */
     radiusClass?: 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 AvatarSquare({ size, src, alt, className, radiusClass, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarSquare({ size, src, alt, className, radiusClass, color, }: Props): react_jsx_runtime.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.d.ts

@@ -2,15 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Props = {
     size?: number;
-    /** URL de la imagen */
     src?: string | null;
-    /** Texto alternativo para la imagen */
     alt?: string;
-    /** Clases extra para ajustar estilos */
     className?: string;
-    /** Radio del borde (por si quieres otra forma) */
     radiusClass?: 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 AvatarSquare({ size, src, alt, className, radiusClass, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarSquare({ size, src, alt, className, radiusClass, color, }: Props): react_jsx_runtime.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.js

@@ -40,11 +40,60 @@ function AvatarSquare({
   src,
   alt = "",
   className = "",
-  radiusClass = "rounded-xl"
+  radiusClass = "rounded-xl",
+  color = "blue"
 }) {
   const [error, setError] = import_react.default.useState(false);
   const showImg = !!src && !error;
   const boxStyle = { width: size, height: size };
+  const RING = {
+    slate: "ring-slate-300/40 dark:ring-slate-300/20",
+    gray: "ring-gray-300/40 dark:ring-gray-300/20",
+    zinc: "ring-zinc-300/40 dark:ring-zinc-300/20",
+    neutral: "ring-neutral-300/40 dark:ring-neutral-300/20",
+    stone: "ring-stone-300/40 dark:ring-stone-300/20",
+    red: "ring-red-300/40 dark:ring-red-300/20",
+    orange: "ring-orange-300/40 dark:ring-orange-300/20",
+    amber: "ring-amber-300/40 dark:ring-amber-300/20",
+    yellow: "ring-yellow-300/40 dark:ring-yellow-300/20",
+    lime: "ring-lime-300/40 dark:ring-lime-300/20",
+    green: "ring-green-300/40 dark:ring-green-300/20",
+    emerald: "ring-emerald-300/40 dark:ring-emerald-300/20",
+    teal: "ring-teal-300/40 dark:ring-teal-300/20",
+    cyan: "ring-cyan-300/40 dark:ring-cyan-300/20",
+    sky: "ring-sky-300/40 dark:ring-sky-300/20",
+    blue: "ring-blue-300/40 dark:ring-blue-300/20",
+    indigo: "ring-indigo-300/40 dark:ring-indigo-300/20",
+    violet: "ring-violet-300/40 dark:ring-violet-300/20",
+    purple: "ring-purple-300/40 dark:ring-purple-300/20",
+    fuchsia: "ring-fuchsia-300/40 dark:ring-fuchsia-300/20",
+    pink: "ring-pink-300/40 dark:ring-pink-300/20",
+    rose: "ring-rose-300/40 dark:ring-rose-300/20"
+  };
+  const GRADIENT = {
+    slate: "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900/20 dark:to-slate-800/20",
+    gray: "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900/20 dark:to-gray-800/20",
+    zinc: "bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900/20 dark:to-zinc-800/20",
+    neutral: "bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-900/20 dark:to-neutral-800/20",
+    stone: "bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900/20 dark:to-stone-800/20",
+    red: "bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/20 dark:to-red-800/20",
+    orange: "bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/20 dark:to-orange-800/20",
+    amber: "bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-900/20 dark:to-amber-800/20",
+    yellow: "bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900/20 dark:to-yellow-800/20",
+    lime: "bg-gradient-to-br from-lime-100 to-lime-200 dark:from-lime-900/20 dark:to-lime-800/20",
+    green: "bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/20 dark:to-green-800/20",
+    emerald: "bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/20 dark:to-emerald-800/20",
+    teal: "bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/20 dark:to-teal-800/20",
+    cyan: "bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/20 dark:to-cyan-800/20",
+    sky: "bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-900/20 dark:to-sky-800/20",
+    blue: "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20",
+    indigo: "bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900/20 dark:to-indigo-800/20",
+    violet: "bg-gradient-to-br from-violet-100 to-violet-200 dark:from-violet-900/20 dark:to-violet-800/20",
+    purple: "bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/20 dark:to-purple-800/20",
+    fuchsia: "bg-gradient-to-br from-fuchsia-100 to-fuchsia-200 dark:from-fuchsia-900/20 dark:to-fuchsia-800/20",
+    pink: "bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/20 dark:to-pink-800/20",
+    rose: "bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900/20 dark:to-rose-800/20"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -52,7 +101,7 @@ function AvatarSquare({
       className: [
         "relative shrink-0 overflow-hidden ring-1",
         radiusClass,
-        "ring-blue-300/40 dark:ring-blue-300/20",
+        RING[color],
         className
       ].join(" "),
       children: showImg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -73,7 +122,7 @@ function AvatarSquare({
           className: [
             "h-full w-full",
             radiusClass,
-            "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20"
+            GRADIENT[color]
           ].join(" ")
         }
       )

package/dist/AvatarSquare.mjs

@@ -7,11 +7,60 @@ function AvatarSquare({
   src,
   alt = "",
   className = "",
-  radiusClass = "rounded-xl"
+  radiusClass = "rounded-xl",
+  color = "blue"
 }) {
   const [error, setError] = React.useState(false);
   const showImg = !!src && !error;
   const boxStyle = { width: size, height: size };
+  const RING = {
+    slate: "ring-slate-300/40 dark:ring-slate-300/20",
+    gray: "ring-gray-300/40 dark:ring-gray-300/20",
+    zinc: "ring-zinc-300/40 dark:ring-zinc-300/20",
+    neutral: "ring-neutral-300/40 dark:ring-neutral-300/20",
+    stone: "ring-stone-300/40 dark:ring-stone-300/20",
+    red: "ring-red-300/40 dark:ring-red-300/20",
+    orange: "ring-orange-300/40 dark:ring-orange-300/20",
+    amber: "ring-amber-300/40 dark:ring-amber-300/20",
+    yellow: "ring-yellow-300/40 dark:ring-yellow-300/20",
+    lime: "ring-lime-300/40 dark:ring-lime-300/20",
+    green: "ring-green-300/40 dark:ring-green-300/20",
+    emerald: "ring-emerald-300/40 dark:ring-emerald-300/20",
+    teal: "ring-teal-300/40 dark:ring-teal-300/20",
+    cyan: "ring-cyan-300/40 dark:ring-cyan-300/20",
+    sky: "ring-sky-300/40 dark:ring-sky-300/20",
+    blue: "ring-blue-300/40 dark:ring-blue-300/20",
+    indigo: "ring-indigo-300/40 dark:ring-indigo-300/20",
+    violet: "ring-violet-300/40 dark:ring-violet-300/20",
+    purple: "ring-purple-300/40 dark:ring-purple-300/20",
+    fuchsia: "ring-fuchsia-300/40 dark:ring-fuchsia-300/20",
+    pink: "ring-pink-300/40 dark:ring-pink-300/20",
+    rose: "ring-rose-300/40 dark:ring-rose-300/20"
+  };
+  const GRADIENT = {
+    slate: "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900/20 dark:to-slate-800/20",
+    gray: "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900/20 dark:to-gray-800/20",
+    zinc: "bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900/20 dark:to-zinc-800/20",
+    neutral: "bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-900/20 dark:to-neutral-800/20",
+    stone: "bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900/20 dark:to-stone-800/20",
+    red: "bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/20 dark:to-red-800/20",
+    orange: "bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/20 dark:to-orange-800/20",
+    amber: "bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-900/20 dark:to-amber-800/20",
+    yellow: "bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900/20 dark:to-yellow-800/20",
+    lime: "bg-gradient-to-br from-lime-100 to-lime-200 dark:from-lime-900/20 dark:to-lime-800/20",
+    green: "bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/20 dark:to-green-800/20",
+    emerald: "bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/20 dark:to-emerald-800/20",
+    teal: "bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/20 dark:to-teal-800/20",
+    cyan: "bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/20 dark:to-cyan-800/20",
+    sky: "bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-900/20 dark:to-sky-800/20",
+    blue: "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20",
+    indigo: "bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900/20 dark:to-indigo-800/20",
+    violet: "bg-gradient-to-br from-violet-100 to-violet-200 dark:from-violet-900/20 dark:to-violet-800/20",
+    purple: "bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/20 dark:to-purple-800/20",
+    fuchsia: "bg-gradient-to-br from-fuchsia-100 to-fuchsia-200 dark:from-fuchsia-900/20 dark:to-fuchsia-800/20",
+    pink: "bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/20 dark:to-pink-800/20",
+    rose: "bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900/20 dark:to-rose-800/20"
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -19,7 +68,7 @@ function AvatarSquare({
       className: [
         "relative shrink-0 overflow-hidden ring-1",
         radiusClass,
-        "ring-blue-300/40 dark:ring-blue-300/20",
+        RING[color],
         className
       ].join(" "),
       children: showImg ? /* @__PURE__ */ jsx(
@@ -40,7 +89,7 @@ function AvatarSquare({
           className: [
             "h-full w-full",
             radiusClass,
-            "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20"
+            GRADIENT[color]
           ].join(" ")
         }
       )