@flanksource/clicky-ui 0.2.2 → 0.2.4

package/dist/data/FilterPill.cjs

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const UiAdd = require("../icons/components/UiAdd.cjs");
+const UiRemove = require("../icons/components/UiRemove.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+function bodyClasses(mode) {
+  switch (mode) {
+    case "active":
+      return "bg-primary/10 border-primary/40 text-primary font-medium";
+    case "include":
+      return "bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium";
+    case "exclude":
+      return "bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium";
+    case "neutral":
+    default:
+      return "border-border text-muted-foreground hover:bg-accent";
+  }
+}
+const SLOT_TRANSLATE = {
+  exclude: "translate-x-0",
+  neutral: "translate-x-4",
+  include: "translate-x-8"
+};
+function TristateSwitch({
+  mode,
+  onChange,
+  ariaLabel
+}) {
+  const slot = mode === "exclude" ? "exclude" : mode === "include" ? "include" : "neutral";
+  const bg = slot === "exclude" ? "bg-red-500/80" : slot === "include" ? "bg-green-500/80" : "bg-muted";
+  const region = (next, regionMode) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-tristate-region": regionMode,
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onChange(next);
+      },
+      className: "relative z-10 h-full flex-1 cursor-pointer"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onChange(nextTriStateMode(mode));
+      },
+      className: utils.cn(
+        "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
+        bg
+      ),
+      children: [
+        region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
+        region(nextTriStateMode(mode), "neutral"),
+        region(mode === "include" ? "neutral" : "include", "include"),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: utils.cn(
+              "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
+              SLOT_TRANSLATE[slot]
+            ),
+            children: slot !== "neutral" && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: slot === "exclude" ? UiClose.UiClose : UiCheck.UiCheck,
+                className: utils.cn(
+                  "text-[10px]",
+                  slot === "exclude" && "text-red-600",
+                  slot === "include" && "text-green-600"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FilterPill({
+  mode = "neutral",
+  label,
+  count,
+  icon,
+  badge,
+  onModeChange,
+  onClick,
+  title,
+  togglePosition = "left",
+  className
+}) {
+  const triState = !!onModeChange;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white",
+          badge ?? "bg-muted-foreground"
+        ),
+        children: count
+      }
+    ),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+  ] });
+  if (triState) {
+    const control = /* @__PURE__ */ jsxRuntime.jsx(
+      TristateSwitch,
+      {
+        mode,
+        onChange: onModeChange,
+        ...title ? { ariaLabel: title } : {}
+      }
+    );
+    const labelContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center gap-1.5 select-none", className), title, children: togglePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      labelContent,
+      control
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      control,
+      labelContent
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title,
+      className: utils.cn(
+        "inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors",
+        bodyClasses(mode),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LegacyMarker, { mode }),
+        content
+      ]
+    }
+  );
+}
+function LegacyMarker({ mode }) {
+  if (mode === "include") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-xs" });
+  if (mode === "exclude") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiRemove.UiRemove, className: "text-xs" });
+  if (mode === "active") return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-current" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-current opacity-30" });
+}
+function nextTriStateMode(mode) {
+  if (mode === "include") return "exclude";
+  if (mode === "exclude") return "neutral";
+  return "include";
+}
+function FilterPillGroup({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex items-center gap-1.5 flex-wrap", className), children });
+}
+function FilterSeparator() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-border mx-0.5", children: "|" });
+}
+exports.FilterPill = FilterPill;
+exports.FilterPillGroup = FilterPillGroup;
+exports.FilterSeparator = FilterSeparator;
+//# sourceMappingURL=FilterPill.cjs.map

package/dist/data/FilterPill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={cn(\n        \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n        bg,\n      )}\n    >\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","cn","Icon","UiClose","UiCheck","Fragment","UiAdd","UiRemove"],"mappings":"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"}

package/dist/data/FilterPill.d.ts

@@ -1,10 +1,16 @@
 import { ReactNode } from 'react';
+import { StaticIconComponent } from './Icon';
 export type FilterMode = "active" | "neutral" | "include" | "exclude";
 export type FilterPillProps = {
+    /** Visual and semantic state for the pill. */
     mode?: FilterMode;
+    /** Primary visible label. */
     label: ReactNode;
+    /** Optional count badge rendered before the label. */
     count?: number;
-    icon?: string;
+    /** Iconify name or imported icon component. */
+    icon?: string | StaticIconComponent;
+    /** Classes for the count badge background. */
     badge?: string;
     /**
      * Tri-state handler. When provided the pill renders as a toggle with a left
@@ -15,13 +21,18 @@ export type FilterPillProps = {
     onModeChange?: (next: FilterMode) => void;
     /** Legacy single-click handler, used when onModeChange is not provided. */
     onClick?: () => void;
+    /** Browser tooltip and accessible label for tri-state controls. */
     title?: string;
+    /** Places the tri-state toggle before or after the label. */
     togglePosition?: "left" | "right";
+    /** Classes applied to the pill root. */
     className?: string;
 };
 export declare function FilterPill({ mode, label, count, icon, badge, onModeChange, onClick, title, togglePosition, className, }: FilterPillProps): import("react/jsx-runtime").JSX.Element;
 export type FilterPillGroupProps = {
+    /** Filter pills or separators to lay out. */
     children: ReactNode;
+    /** Classes applied to the wrapping row. */
     className?: string;
 };
 export declare function FilterPillGroup({ children, className }: FilterPillGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/data/FilterPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2EF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,SAAS,GACV,EAAE,eAAe,2CAiEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAE5E;AAED,wBAAgB,eAAe,4CAM9B"}
+{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmGF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,SAAS,GACV,EAAE,eAAe,2CAmEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAE5E;AAED,wBAAgB,eAAe,4CAM9B"}

package/dist/data/FilterPill.js

@@ -1,6 +1,10 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Icon } from "./Icon.js";
+import { UiAdd } from "../icons/components/UiAdd.js";
+import { UiRemove } from "../icons/components/UiRemove.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
 function bodyClasses(mode) {
   switch (mode) {
     case "active":
@@ -26,7 +30,20 @@ function TristateSwitch({
 }) {
   const slot = mode === "exclude" ? "exclude" : mode === "include" ? "include" : "neutral";
   const bg = slot === "exclude" ? "bg-red-500/80" : slot === "include" ? "bg-green-500/80" : "bg-muted";
-  return /* @__PURE__ */ jsx(
+  const region = (next, regionMode) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-tristate-region": regionMode,
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onChange(next);
+      },
+      className: "relative z-10 h-full flex-1 cursor-pointer"
+    }
+  );
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -41,27 +58,32 @@ function TristateSwitch({
         "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
         bg
       ),
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
-            SLOT_TRANSLATE[slot]
-          ),
-          children: slot !== "neutral" && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: slot === "exclude" ? "codicon:close" : "codicon:check",
-              className: cn(
-                "text-[10px]",
-                slot === "exclude" && "text-red-600",
-                slot === "include" && "text-green-600"
-              )
-            }
-          )
-        }
-      )
+      children: [
+        region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
+        region(nextTriStateMode(mode), "neutral"),
+        region(mode === "include" ? "neutral" : "include", "include"),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
+              SLOT_TRANSLATE[slot]
+            ),
+            children: slot !== "neutral" && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: slot === "exclude" ? UiClose : UiCheck,
+                className: cn(
+                  "text-[10px]",
+                  slot === "exclude" && "text-red-600",
+                  slot === "include" && "text-green-600"
+                )
+              }
+            )
+          }
+        )
+      ]
     }
   );
 }
@@ -89,7 +111,7 @@ function FilterPill({
         children: count
       }
     ),
-    icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-sm" }),
+    icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
     /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
   ] });
   if (triState) {
@@ -129,8 +151,8 @@ function FilterPill({
   );
 }
 function LegacyMarker({ mode }) {
-  if (mode === "include") return /* @__PURE__ */ jsx(Icon, { name: "codicon:add", className: "text-xs" });
-  if (mode === "exclude") return /* @__PURE__ */ jsx(Icon, { name: "codicon:remove", className: "text-xs" });
+  if (mode === "include") return /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "text-xs" });
+  if (mode === "exclude") return /* @__PURE__ */ jsx(Icon, { icon: UiRemove, className: "text-xs" });
   if (mode === "active") return /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-current" });
   return /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-current opacity-30" });
 }

package/dist/data/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  mode?: FilterMode;\n  label: ReactNode;\n  count?: number;\n  icon?: string;\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  title?: string;\n  togglePosition?: \"left\" | \"right\";\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={cn(\n        \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n        bg,\n      )}\n    >\n      <span\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            name={slot === \"exclude\" ? \"codicon:close\" : \"codicon:check\"}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && <Icon name={icon} className=\"text-sm\" />}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon name=\"codicon:add\" className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon name=\"codicon:remove\" className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AA0BA,SAAS,YAAY,MAA0B;AAC7C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAIA,MAAM,iBAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OACJ,SAAS,YAAY,YAAY,SAAS,YAAY,YAAY;AACpE,QAAM,KACJ,SAAS,YAAY,kBAAkB,SAAS,YAAY,oBAAoB;AAElF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,iBAAiB,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,eAAe,IAAI;AAAA,UAAA;AAAA,UAGpB,mBAAS,aACR;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,SAAS,YAAY,kBAAkB;AAAA,cAC7C,WAAW;AAAA,gBACT;AAAA,gBACA,SAAS,aAAa;AAAA,gBACtB,SAAS,aAAa;AAAA,cAAA;AAAA,YACxB;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACF,GAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,UAAU,UACT;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,WAAU,WAAU;AAAA,IAC/C,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GACpC;AAGF,MAAI,UAAU;AACZ,UAAM,UACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACT,GAAI,QAAQ,EAAE,WAAW,UAAU,CAAA;AAAA,MAAC;AAAA,IAAA;AAGzC,UAAM,eACJ,oBAAC,QAAA,EAAK,WAAU,oEACb,UAAA,SACH;AAGF,WACE,oBAAC,QAAA,EAAK,WAAW,GAAG,gDAAgD,SAAS,GAAG,OAC7E,UAAA,mBAAmB,UAClB,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CAEJ;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,gBAAa,MAAY;AAAA,QACzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,aAAa,EAAE,QAA8B;AACpD,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAK,eAAc,WAAU,WAAU;AAC5E,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAK,kBAAiB,WAAU,WAAU;AAC/E,MAAI,SAAS,SAAU,QAAO,oBAAC,QAAA,EAAK,WAAU,mCAAkC;AAChF,SAAO,oBAAC,QAAA,EAAK,WAAU,6CAAA,CAA6C;AACtE;AAEA,SAAS,iBAAiB,MAA8B;AACtD,MAAI,SAAS,UAAW,QAAO;AAC/B,MAAI,SAAS,UAAW,QAAO;AAC/B,SAAO;AACT;AAOO,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AAC7E,6BAAQ,OAAA,EAAI,WAAW,GAAG,uCAAuC,SAAS,GAAI,UAAS;AACzF;AAEO,SAAS,kBAAkB;AAChC,6BACG,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB,UAAA,KAEjD;AAEJ;"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={cn(\n        \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n        bg,\n      )}\n    >\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/Gauge.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const toneClass = {
+  neutral: "text-foreground",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-yellow-600 dark:text-yellow-400",
+  danger: "text-red-600 dark:text-red-400",
+  info: "text-blue-600 dark:text-blue-400"
+};
+function Gauge({
+  label,
+  value,
+  max = 100,
+  tone = "neutral",
+  suffix = "%",
+  icon,
+  subtitle,
+  meta,
+  className
+}) {
+  const pct = max > 0 ? Math.round(value / max * 100) : 0;
+  const displayValue = max === 100 ? value : pct;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
+            icon ? /* @__PURE__ */ jsxRuntime.jsx(GaugeIcon, { icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+          ] }),
+          meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 truncate", children: meta }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: utils.cn("mt-2 text-2xl font-semibold tabular-nums tracking-tight", toneClass[tone]),
+            children: [
+              displayValue,
+              suffix ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-sm opacity-60", children: suffix }) : null
+            ]
+          }
+        ),
+        subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 truncate text-xs text-muted-foreground", children: subtitle }) : null
+      ]
+    }
+  );
+}
+function GaugeIcon({ icon }) {
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, width: 16, height: 16, className: "text-muted-foreground" });
+  }
+  if (react.isValidElement(icon)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.Icon,
+    {
+      icon,
+      width: 16,
+      height: 16,
+      className: "text-muted-foreground"
+    }
+  );
+}
+exports.Gauge = Gauge;
+//# sourceMappingURL=Gauge.cjs.map

package/dist/data/Gauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gauge.cjs","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          <span className=\"truncate\">{label}</span>\n        </span>\n        {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n      </div>\n      <span\n        className={cn(\"mt-2 text-2xl font-semibold tabular-nums tracking-tight\", toneClass[tone])}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon","isValidElement"],"mappings":";;;;;;AAkBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAOE,2BAAAA,IAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,UAAA,GACpC;AAAA,UACC,OAAOA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,GAC9D;AAAA,QACAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA,GAAG,2DAA2D,UAAU,IAAI,CAAC;AAAA,YAEvF,UAAA;AAAA,cAAA;AAAA,cACA,SAASC,2BAAAA,IAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAA4D;AAC/E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAOA,+BAACC,KAAAA,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AACA,MAAIC,MAAAA,eAAe,IAAI,GAAG;AACxB,WACEF,2BAAAA,IAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAAA,EAEJ;AAEA,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;;"}

package/dist/data/Gauge.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { StaticIconComponent } from './Icon';
 export type GaugeTone = "neutral" | "success" | "warning" | "danger" | "info";
 export type GaugeProps = {
     label: ReactNode;
@@ -6,7 +7,7 @@ export type GaugeProps = {
     max?: number;
     tone?: GaugeTone;
     suffix?: string;
-    icon?: string | ReactNode;
+    icon?: string | StaticIconComponent | ReactNode;
     subtitle?: ReactNode;
     meta?: ReactNode;
     className?: string;

package/dist/data/Gauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.d.ts","sourceRoot":"","sources":["../../src/data/Gauge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,GAAS,EACT,IAAgB,EAChB,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,UAAU,2CA4BZ"}
+{"version":3,"file":"Gauge.d.ts","sourceRoot":"","sources":["../../src/data/Gauge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,GAAS,EACT,IAAgB,EAChB,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,UAAU,2CA4BZ"}

package/dist/data/Gauge.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "./Icon.js";
 const toneClass = {
@@ -55,7 +56,18 @@ function GaugeIcon({ icon }) {
   if (typeof icon === "string") {
     return /* @__PURE__ */ jsx(Icon, { name: icon, width: 16, height: 16, className: "text-muted-foreground" });
   }
-  return /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon });
+  if (isValidElement(icon)) {
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon });
+  }
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      icon,
+      width: 16,
+      height: 16,
+      className: "text-muted-foreground"
+    }
+  );
 }
 export {
   Gauge

package/dist/data/Gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.js","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          <span className=\"truncate\">{label}</span>\n        </span>\n        {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n      </div>\n      <span\n        className={cn(\"mt-2 text-2xl font-semibold tabular-nums tracking-tight\", toneClass[tone])}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n\n  return (\n    <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n      {icon}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AAkBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAO,oBAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACpC,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,UAAA,GACpC;AAAA,UACC,OAAO,oBAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,GAC9D;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,2DAA2D,UAAU,IAAI,CAAC;AAAA,YAEvF,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACC,oBAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAAsC;AACzD,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,oBAAC,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AAEA,SACE,oBAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAEJ;"}
+{"version":3,"file":"Gauge.js","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          <span className=\"truncate\">{label}</span>\n        </span>\n        {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n      </div>\n      <span\n        className={cn(\"mt-2 text-2xl font-semibold tabular-nums tracking-tight\", toneClass[tone])}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAO,oBAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACpC,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,UAAA,GACpC;AAAA,UACC,OAAO,oBAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,GAC9D;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,2DAA2D,UAAU,IAAI,CAAC;AAAA,YAEvF,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACC,oBAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAA4D;AAC/E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,oBAAC,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AACA,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,oBAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}