framepexls-ui-lib 0.1.4

package/dist/ActionIconButton.d.mts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+declare const ActionIconButton: React__default.ForwardRefExoticComponent<{
+    title?: string;
+    danger?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { ActionIconButton as default };

package/dist/ActionIconButton.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+declare const ActionIconButton: React__default.ForwardRefExoticComponent<{
+    title?: string;
+    danger?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { ActionIconButton as default };

package/dist/ActionIconButton.js

@@ -0,0 +1,71 @@
+"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 ActionIconButton_exports = {};
+__export(ActionIconButton_exports, {
+  default: () => ActionIconButton_default
+});
+module.exports = __toCommonJS(ActionIconButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+const ActionIconButton = import_react.default.forwardRef(
+  ({
+    children,
+    title,
+    danger,
+    loading = false,
+    disabled,
+    size = "md",
+    className = "",
+    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";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        type,
+        title,
+        "aria-label": title,
+        disabled: disabled || loading,
+        className: `${base} ${tone} ${sizeCls} ${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
+      }
+    );
+  }
+);
+ActionIconButton.displayName = "ActionIconButton";
+var ActionIconButton_default = ActionIconButton;

package/dist/ActionIconButton.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+const ActionIconButton = React.forwardRef(
+  ({
+    children,
+    title,
+    danger,
+    loading = false,
+    disabled,
+    size = "md",
+    className = "",
+    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";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        title,
+        "aria-label": title,
+        disabled: disabled || loading,
+        className: `${base} ${tone} ${sizeCls} ${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
+      }
+    );
+  }
+);
+ActionIconButton.displayName = "ActionIconButton";
+var ActionIconButton_default = ActionIconButton;
+export {
+  ActionIconButton_default as default
+};

package/dist/AppTopbar.d.mts

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

package/dist/AppTopbar.d.ts

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

package/dist/AppTopbar.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AppTopbar_exports = {};
+__export(AppTopbar_exports, {
+  default: () => AppTopbar
+});
+module.exports = __toCommonJS(AppTopbar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function AppTopbar({ title, subtitle, secondary, primary }) {
+  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: [
+      secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "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",
+          children: secondary.label
+        }
+      ),
+      primary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "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",
+          children: primary.label
+        }
+      )
+    ] })
+  ] }) }) });
+}

package/dist/AppTopbar.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppTopbar({ title, subtitle, secondary, primary }) {
+  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: [
+      secondary && /* @__PURE__ */ jsx(
+        "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",
+          children: secondary.label
+        }
+      ),
+      primary && /* @__PURE__ */ jsx(
+        "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",
+          children: primary.label
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  AppTopbar as default
+};

package/dist/AvatarSquare.d.mts

@@ -0,0 +1,16 @@
+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;
+};
+declare function AvatarSquare({ size, src, alt, className, radiusClass, }: Props): react_jsx_runtime.JSX.Element;
+
+export { AvatarSquare as default };

package/dist/AvatarSquare.d.ts

@@ -0,0 +1,16 @@
+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;
+};
+declare function AvatarSquare({ size, src, alt, className, radiusClass, }: Props): react_jsx_runtime.JSX.Element;
+
+export { AvatarSquare as default };

package/dist/AvatarSquare.js

@@ -0,0 +1,82 @@
+"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 AvatarSquare_exports = {};
+__export(AvatarSquare_exports, {
+  default: () => AvatarSquare
+});
+module.exports = __toCommonJS(AvatarSquare_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_image = __toESM(require("next/image"));
+function AvatarSquare({
+  size = 32,
+  src,
+  alt = "",
+  className = "",
+  radiusClass = "rounded-xl"
+}) {
+  const [error, setError] = import_react.default.useState(false);
+  const showImg = !!src && !error;
+  const boxStyle = { width: size, height: size };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: boxStyle,
+      className: [
+        "relative shrink-0 overflow-hidden ring-1",
+        radiusClass,
+        "ring-blue-300/40 dark:ring-blue-300/20",
+        className
+      ].join(" "),
+      children: showImg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_image.default,
+        {
+          src,
+          alt,
+          fill: true,
+          className: "object-cover",
+          sizes: `${size}px`,
+          priority: false,
+          onError: () => setError(true),
+          draggable: false
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          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"
+          ].join(" ")
+        }
+      )
+    }
+  );
+}

package/dist/AvatarSquare.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Image from "next/image";
+function AvatarSquare({
+  size = 32,
+  src,
+  alt = "",
+  className = "",
+  radiusClass = "rounded-xl"
+}) {
+  const [error, setError] = React.useState(false);
+  const showImg = !!src && !error;
+  const boxStyle = { width: size, height: size };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: boxStyle,
+      className: [
+        "relative shrink-0 overflow-hidden ring-1",
+        radiusClass,
+        "ring-blue-300/40 dark:ring-blue-300/20",
+        className
+      ].join(" "),
+      children: showImg ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src,
+          alt,
+          fill: true,
+          className: "object-cover",
+          sizes: `${size}px`,
+          priority: false,
+          onError: () => setError(true),
+          draggable: false
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          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"
+          ].join(" ")
+        }
+      )
+    }
+  );
+}
+export {
+  AvatarSquare as default
+};

package/dist/Badge.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
+declare function Badge({ tone, children, onClick, title, className, }: {
+    tone?: Tone;
+    children: React__default.ReactNode;
+    onClick?: (e: React__default.MouseEvent) => void;
+    title?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { type Tone, Badge as default };

package/dist/Badge.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
+declare function Badge({ tone, children, onClick, title, className, }: {
+    tone?: Tone;
+    children: React__default.ReactNode;
+    onClick?: (e: React__default.MouseEvent) => void;
+    title?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { type Tone, Badge as default };

package/dist/Badge.js

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Badge_exports = {};
+__export(Badge_exports, {
+  default: () => Badge
+});
+module.exports = __toCommonJS(Badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const tones = {
+  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
+  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
+  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200",
+  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200",
+  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200",
+  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
+  violet: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
+  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200",
+  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200",
+  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200",
+  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
+  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
+};
+function Badge({
+  tone = "slate",
+  children,
+  onClick,
+  title,
+  className = ""
+}) {
+  const clickable = typeof onClick === "function";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      title,
+      onClick,
+      className: [
+        "inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold truncate",
+        tones[tone],
+        clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
+        className
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" }),
+        children
+      ]
+    }
+  );
+}

package/dist/Badge.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+const tones = {
+  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
+  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
+  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200",
+  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200",
+  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200",
+  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
+  violet: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
+  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200",
+  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200",
+  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200",
+  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
+  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
+};
+function Badge({
+  tone = "slate",
+  children,
+  onClick,
+  title,
+  className = ""
+}) {
+  const clickable = typeof onClick === "function";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      title,
+      onClick,
+      className: [
+        "inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold truncate",
+        tones[tone],
+        clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
+        className
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" }),
+        children
+      ]
+    }
+  );
+}
+export {
+  Badge as default
+};

package/dist/BadgeCluster.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tone } from './Badge.mjs';
+import 'react';
+
+type Item = {
+    label: string;
+    tone: Tone;
+};
+declare function BadgeCluster({ items, max, align, className, usePortal, }: {
+    items: Item[];
+    max?: number;
+    align?: "left" | "right";
+    className?: string;
+    usePortal?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { BadgeCluster as default };

package/dist/BadgeCluster.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tone } from './Badge.js';
+import 'react';
+
+type Item = {
+    label: string;
+    tone: Tone;
+};
+declare function BadgeCluster({ items, max, align, className, usePortal, }: {
+    items: Item[];
+    max?: number;
+    align?: "left" | "right";
+    className?: string;
+    usePortal?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { BadgeCluster as default };