@geomak/ui 6.4.0 → 6.5.0

package/dist/index.cjs

@@ -1550,6 +1550,108 @@ function Breadcrumbs({
     ] }, entry === "ellipsis" ? "ellipsis" : entry.index);
   }) }) });
 }
+var TONE = {
+  neutral: {
+    solid: "bg-foreground-secondary text-background",
+    soft: "bg-surface-raised text-foreground-secondary",
+    outline: "border border-border text-foreground-secondary",
+    dot: "bg-foreground-secondary"
+  },
+  accent: {
+    solid: "bg-accent text-accent-fg",
+    soft: "bg-accent/10 text-accent",
+    outline: "border border-accent text-accent",
+    dot: "bg-accent"
+  },
+  success: {
+    solid: "bg-status-success text-white",
+    soft: "bg-status-success/12 text-status-success",
+    outline: "border border-status-success text-status-success",
+    dot: "bg-status-success"
+  },
+  warning: {
+    solid: "bg-status-warning text-white",
+    soft: "bg-status-warning/15 text-status-warning",
+    outline: "border border-status-warning text-status-warning",
+    dot: "bg-status-warning"
+  },
+  error: {
+    solid: "bg-status-error text-white",
+    soft: "bg-status-error/12 text-status-error",
+    outline: "border border-status-error text-status-error",
+    dot: "bg-status-error"
+  },
+  info: {
+    solid: "bg-status-info text-white",
+    soft: "bg-status-info/12 text-status-info",
+    outline: "border border-status-info text-status-info",
+    dot: "bg-status-info"
+  }
+};
+var SIZE2 = {
+  sm: "h-[18px] px-1.5 text-[11px] gap-1 rounded-full",
+  md: "h-5 px-2 text-xs gap-1 rounded-full"
+};
+function Badge({
+  children,
+  tone = "neutral",
+  variant = "soft",
+  size = "md",
+  icon,
+  count,
+  max = 99,
+  dot = false,
+  showZero = false,
+  className = "",
+  style
+}) {
+  const isIndicator = dot || count != null;
+  const hidden = !dot && count != null && count === 0 && !showZero;
+  const display2 = count != null && count > max ? `${max}+` : count;
+  if (!isIndicator) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: [
+          "inline-flex items-center font-medium select-none whitespace-nowrap leading-none",
+          SIZE2[size],
+          TONE[tone][variant],
+          className
+        ].filter(Boolean).join(" "),
+        style,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+  const indicator = dot ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: ["inline-block rounded-full", size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", TONE[tone].dot, className].filter(Boolean).join(" "),
+      style: children ? void 0 : style,
+      "aria-hidden": children ? true : void 0
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: [
+        "inline-flex items-center justify-center rounded-full font-semibold leading-none tabular-nums",
+        size === "sm" ? "h-4 min-w-4 px-1 text-[10px]" : "h-[18px] min-w-[18px] px-1.5 text-[11px]",
+        TONE[tone].solid,
+        className
+      ].filter(Boolean).join(" "),
+      style: children ? void 0 : style,
+      children: display2
+    }
+  );
+  if (!children) return hidden ? null : indicator;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", style, children: [
+    children,
+    !hidden && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex", children: indicator })
+  ] });
+}
 var NotificationContext = React14.createContext({
   open: () => void 0,
   close: () => void 0
@@ -5626,7 +5728,7 @@ function TextArea({
     }
   );
 }
-var SIZE2 = {
+var SIZE3 = {
   sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
   md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
   lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
@@ -5648,7 +5750,7 @@ function SegmentedControl({
   errorMessage,
   "aria-label": ariaLabel
 }) {
-  const sz = SIZE2[size];
+  const sz = SIZE3[size];
   const groupId = React14.useId();
   const errorId = React14.useId();
   const hasError = errorMessage != null;
@@ -7269,6 +7371,7 @@ exports.Accordion = Accordion_default;
 exports.AppShell = AppShell;
 exports.AutoComplete = AutoComplete;
 exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;