@inf-monkeys-tech/monkeys-design 1.0.56 → 1.0.60

package/dist/components/workbench/index.js

@@ -11352,6 +11352,22 @@ function WorkbenchAssetGallery({
     }
   ) });
 }
+
+// src/components/workbench/workbenchVisualizationTone.ts
+var toneVariable = {
+  primary: "--radar-series-one",
+  secondary: "--radar-series-two",
+  accent: "--radar-series-three",
+  muted: "--radar-series-four"
+};
+var toneFallback = {
+  primary: "var(--primary)",
+  secondary: "var(--secondary-foreground)",
+  accent: "var(--accent-foreground)",
+  muted: "var(--muted-foreground)"
+};
+var workbenchVisualizationToneColor = (tone) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}))`;
+var workbenchVisualizationToneColorWithAlpha = (tone, alpha) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}) / ${alpha})`;
 var radarWorkspaceStyle = {
   backgroundColor: "hsl(var(--radar-canvas, var(--background)))",
   color: "hsl(var(--foreground))"
@@ -11516,24 +11532,166 @@ function WorkbenchRadarInspectorSection({
     }
   );
 }
+function assertValidRadarFilterRowProps(props) {
+  const { disclosure, onSelect } = props;
+  const invalid = !disclosure && !onSelect || disclosure?.mode === "integrated" && (Boolean(onSelect) || props.selected !== void 0) || disclosure?.mode === "separate" && !onSelect;
+  if (invalid) {
+    throw new Error("Invalid WorkbenchRadarFilterRow props.");
+  }
+}
+function WorkbenchRadarFilterRow(props) {
+  assertValidRadarFilterRowProps(props);
+  const {
+    label,
+    value,
+    icon,
+    selected,
+    disabled = false,
+    tone,
+    onSelect,
+    disclosure,
+    className
+  } = props;
+  const isSelected = selected ?? false;
+  const selectedClasses = isSelected ? void 0 : "monkeys-workbench-radar-filter-row--idle";
+  const disabledClasses = disabled ? "monkeys-workbench-radar-filter-disabled" : void 0;
+  const resolvedTone = tone ?? "primary";
+  const toneColor = workbenchVisualizationToneColor(resolvedTone);
+  const style = {
+    "--workbench-radar-filter-tone": toneColor,
+    "--tw-ring-color": tone ? toneColor : "hsl(var(--ring))",
+    ...isSelected || tone ? {
+      backgroundColor: workbenchVisualizationToneColorWithAlpha(
+        resolvedTone,
+        isSelected ? 0.14 : 0.08
+      ),
+      borderColor: toneColor
+    } : {}
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "flex size-4 shrink-0 items-center justify-center",
+          tone ? "text-[var(--workbench-radar-filter-tone)]" : "text-muted-foreground"
+        ),
+        "aria-hidden": "true",
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: label }),
+    hasRenderableNode(value) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: value }) : null
+  ] });
+  const disclosureIcon = disclosure ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "text-lg leading-none transition-transform motion-reduce:transition-none",
+        disclosure.expanded && "rotate-90"
+      ),
+      children: "\u203A"
+    }
+  ) : null;
+  if (disclosure?.mode === "separate") {
+    const disclosureLabel2 = disclosure.expanded ? disclosure.collapseLabel : disclosure.expandLabel;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-monkeys-component": "workbench-radar-filter-row",
+        className: cn(
+          "monkeys-workbench-radar-filter-row monkeys-workbench-radar-filter-row--separate",
+          selectedClasses,
+          disabledClasses,
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": selected,
+              disabled,
+              onClick: onSelect,
+              className: cn(
+                "monkeys-workbench-radar-filter-control monkeys-workbench-radar-filter-row__action",
+                disabledClasses
+              ),
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": disclosure.expanded,
+              "aria-controls": disclosure.controls,
+              "aria-label": disclosureLabel2,
+              disabled,
+              onClick: disclosure.onToggle,
+              className: cn(
+                "monkeys-workbench-radar-filter-row__disclosure",
+                disabledClasses
+              ),
+              children: disclosureIcon
+            }
+          )
+        ]
+      }
+    );
+  }
+  const integratedDisclosure = disclosure?.mode === "integrated" ? disclosure : void 0;
+  const disclosureLabel = integratedDisclosure ? integratedDisclosure.expanded ? integratedDisclosure.collapseLabel : integratedDisclosure.expandLabel : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-monkeys-component": "workbench-radar-filter-row",
+      "aria-label": disclosureLabel,
+      "aria-pressed": integratedDisclosure ? void 0 : selected,
+      "aria-expanded": integratedDisclosure?.expanded,
+      "aria-controls": integratedDisclosure?.controls,
+      disabled,
+      onClick: integratedDisclosure?.onToggle ?? onSelect,
+      className: cn(
+        "monkeys-workbench-radar-filter-control monkeys-workbench-radar-filter-row",
+        selectedClasses,
+        disabledClasses,
+        className
+      ),
+      style,
+      children: [
+        content,
+        integratedDisclosure ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 text-muted-foreground", children: disclosureIcon }) : null
+      ]
+    }
+  );
+}
 function WorkbenchRadarFilterChip({
   label,
   value,
   icon,
   selected = false,
+  disabled = false,
   onSelect,
   className
 }) {
-  const Comp = onSelect ? "button" : "div";
+  const interactive = Boolean(onSelect) || disabled;
+  const Comp = interactive ? "button" : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Comp,
     {
-      type: onSelect ? "button" : void 0,
-      "aria-pressed": onSelect ? selected : void 0,
+      type: interactive ? "button" : void 0,
+      "aria-pressed": onSelect && !disabled ? selected : void 0,
+      disabled: interactive ? disabled : void 0,
       onClick: onSelect,
       className: cn(
-        "flex min-h-9 min-w-0 items-center gap-2 rounded-full border px-3 text-xs font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "flex min-w-0 items-center border text-xs font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "monkeys-workbench-radar-filter-control rounded-full",
         selected ? "border-primary bg-primary/20 text-primary" : "border-border bg-background/40 text-foreground hover:border-primary/60 hover:bg-primary/10",
+        disabled && "cursor-not-allowed opacity-50",
         className
       ),
       children: [
@@ -11554,20 +11712,6 @@ var getDomain2 = (values, min, max) => {
 };
 var scale2 = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
 var clamp5 = (value, min, max) => Math.min(max, Math.max(min, value));
-var toneVariable = {
-  primary: "--radar-series-one",
-  secondary: "--radar-series-two",
-  accent: "--radar-series-three",
-  muted: "--radar-series-four"
-};
-var toneFallback = {
-  primary: "var(--primary)",
-  secondary: "var(--secondary-foreground)",
-  accent: "var(--accent-foreground)",
-  muted: "var(--muted-foreground)"
-};
-var toneColor = (tone) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}))`;
-var toneColorWithAlpha = (tone, alpha) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}) / ${alpha})`;
 var activatePoint2 = (event, point, onPointSelect) => {
   if (!onPointSelect || event.key !== "Enter" && event.key !== " ") return;
   event.preventDefault();
@@ -11742,12 +11886,12 @@ function WorkbenchRadarMatrix({
                 const radius = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
                 const fontSize = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
                 const pointStyle = {
-                  fill: toneColor(tone),
+                  fill: workbenchVisualizationToneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
                 };
                 const labelStyle = {
-                  fill: toneColor(tone),
-                  filter: `drop-shadow(0 0 0.65rem ${toneColorWithAlpha(tone, 0.72)})`
+                  fill: workbenchVisualizationToneColor(tone),
+                  filter: `drop-shadow(0 0 0.65rem ${workbenchVisualizationToneColorWithAlpha(tone, 0.72)})`
                 };
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "g",
@@ -11767,7 +11911,7 @@ function WorkbenchRadarMatrix({
                           r: radius + 10,
                           fill: "none",
                           strokeWidth: "2",
-                          style: { stroke: toneColorWithAlpha(tone, 0.48) }
+                          style: { stroke: workbenchVisualizationToneColorWithAlpha(tone, 0.48) }
                         }
                       ) : null,
                       /* @__PURE__ */ jsxRuntime.jsx("circle", { r: radius, strokeWidth: "1.25", style: pointStyle }),
@@ -11845,7 +11989,7 @@ function WorkbenchRadarMatrix({
                     cx: clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
                     cy: clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
-                    style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
+                    style: { fill: workbenchVisualizationToneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },
                   point.id
                 )),
@@ -11868,7 +12012,7 @@ function WorkbenchRadarMatrix({
         legend.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 hidden -translate-x-1/2 items-center gap-4 rounded-full border border-border bg-card/95 px-4 py-2 text-xs font-semibold shadow-xl md:flex", children: legend.map((item) => {
           const tone = item.tone || "muted";
           return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: toneColor(tone) } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: workbenchVisualizationToneColor(tone) } }),
             item.label
           ] }, item.id);
         }) }) : null
@@ -11898,6 +12042,7 @@ exports.WorkbenchMasonryLayout = WorkbenchMasonryLayout;
 exports.WorkbenchMetricGrid = WorkbenchMetricGrid;
 exports.WorkbenchPageSkeleton = WorkbenchPageSkeleton;
 exports.WorkbenchRadarFilterChip = WorkbenchRadarFilterChip;
+exports.WorkbenchRadarFilterRow = WorkbenchRadarFilterRow;
 exports.WorkbenchRadarInspectorSection = WorkbenchRadarInspectorSection;
 exports.WorkbenchRadarMatrix = WorkbenchRadarMatrix;
 exports.WorkbenchRadarNavigation = WorkbenchRadarNavigation;