hazo_ui 3.4.1 → 4.1.1

package/dist/index.cjs

@@ -73,6 +73,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var sonner = require('sonner');
 var client$1 = require('hazo_state/client');
 
@@ -143,6 +144,7 @@ var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPr
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -7458,6 +7460,51 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var Slider = React26__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+var InputAffix = React26__namespace.forwardRef(
+  ({ className, containerClassName, prefix, suffix, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          containerClassName
+        ),
+        children: [
+          prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex select-none items-center pl-3 text-muted-foreground", children: prefix }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type,
+              ref,
+              className: cn(
+                "h-full w-full bg-transparent px-3 py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                prefix != null && "pl-2",
+                suffix != null && "pr-2",
+                className
+              ),
+              ...props
+            }
+          ),
+          suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex select-none items-center pr-3 text-muted-foreground", children: suffix })
+        ]
+      }
+    );
+  }
+);
+InputAffix.displayName = "InputAffix";
 var SkeletonBase = React26__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9736,573 +9783,12 @@ function pick_x_label_indices(length) {
   if (length === 2) return [0, 0, 1];
   return [0, Math.floor(length / 2), length - 1];
 }
-var PAD_LEFT = 38;
-var PAD_RIGHT = 14;
-var PAD_TOP = 12;
+var PAD_LEFT = 32;
+var PAD_RIGHT = 8;
+var PAD_TOP = 10;
 var PAD_BOTTOM = 22;
-var AXIS_LABEL_COLOR = "#8b949e";
-var GRIDLINE_COLOR = "#2a3441";
-function compute_geometry(data, width, height) {
-  const vals = data.filter((v) => v !== null && !Number.isNaN(v));
-  if (vals.length === 0) return null;
-  const mn = Math.min(...vals);
-  const mx = Math.max(...vals);
-  const rng = mx - mn || mx * 0.1 + 1;
-  const y_min = Math.max(0, mn - rng * 0.1);
-  const y_max = mx + rng * 0.1;
-  const y_rng = y_max - y_min || 1;
-  const plot_w = width - PAD_LEFT - PAD_RIGHT;
-  const plot_h = height - PAD_TOP - PAD_BOTTOM;
-  return {
-    vbox_w: width,
-    vbox_h: height,
-    y_min,
-    y_max,
-    cx: (i) => data.length <= 1 ? PAD_LEFT + plot_w / 2 : PAD_LEFT + i * plot_w / (data.length - 1),
-    cy: (v) => PAD_TOP + (1 - (v - y_min) / y_rng) * plot_h
-  };
-}
-function build_paths(data, g) {
-  let line_d = "";
-  let first_idx = -1;
-  data.forEach((v, i) => {
-    if (v === null || Number.isNaN(v)) return;
-    if (first_idx === -1) first_idx = i;
-    line_d += `${line_d ? " L" : "M"}${g.cx(i).toFixed(1)},${g.cy(v).toFixed(1)}`;
-  });
-  const last_idx = data.length - 1;
-  const last_v = data[last_idx];
-  const area_d = line_d && last_v !== null && last_v !== void 0 && !Number.isNaN(last_v) ? `${line_d} L${g.cx(last_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} L${g.cx(first_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} Z` : "";
-  return { line_d, area_d };
-}
-function LineChart({
-  data,
-  dates,
-  color: color2,
-  width = 360,
-  height = 130,
-  unit = "",
-  showTooltip = true,
-  className
-}) {
-  const geo = compute_geometry(data, width, height);
-  const svg_ref = React26__namespace.useRef(null);
-  const [hover_idx, set_hover_idx] = React26__namespace.useState(null);
-  const handle_mouse_move = React26__namespace.useCallback(
-    (e) => {
-      if (!geo) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      if (rect.width === 0) return;
-      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
-      const plot_w = geo.vbox_w - PAD_LEFT - PAD_RIGHT;
-      if (vbox_x < PAD_LEFT || vbox_x > geo.vbox_w - PAD_RIGHT) {
-        set_hover_idx(null);
-        return;
-      }
-      const ratio = (vbox_x - PAD_LEFT) / plot_w;
-      const idx = Math.round(ratio * (data.length - 1));
-      const clamped = Math.max(0, Math.min(data.length - 1, idx));
-      let resolved = clamped;
-      if (data[resolved] === null || Number.isNaN(data[resolved])) {
-        for (let step = 1; step < data.length; step += 1) {
-          const left_i = clamped - step;
-          const right_i = clamped + step;
-          if (left_i >= 0 && data[left_i] !== null && !Number.isNaN(data[left_i])) {
-            resolved = left_i;
-            break;
-          }
-          if (right_i < data.length && data[right_i] !== null && !Number.isNaN(data[right_i])) {
-            resolved = right_i;
-            break;
-          }
-        }
-      }
-      set_hover_idx(resolved);
-    },
-    [geo, data]
-  );
-  const handle_mouse_leave = React26__namespace.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
-        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
-      }
-    );
-  }
-  const { line_d, area_d } = build_paths(data, geo);
-  const x_label_idx = pick_x_label_indices(data.length);
-  const last_idx = data.length - 1;
-  const last_v = data[last_idx];
-  const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
-  const hover_v = hover_idx !== null ? data[hover_idx] : null;
-  const hover_has_v = hover_v !== null && hover_v !== void 0 && !Number.isNaN(hover_v);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref: svg_ref,
-      viewBox: `0 0 ${width} ${height}`,
-      onMouseMove: showTooltip ? handle_mouse_move : void 0,
-      onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
-      className: cn("cls_hazo_chart", className),
-      style: {
-        width: "100%",
-        height: "auto",
-        display: "block",
-        maxHeight: `${height + 10}px`,
-        cursor: showTooltip ? "crosshair" : "default"
-      },
-      children: [
-        [0, 1, 2].map((i) => {
-          const y = PAD_TOP + i / 2 * (geo.vbox_h - PAD_TOP - PAD_BOTTOM);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "line",
-            {
-              x1: PAD_LEFT,
-              x2: geo.vbox_w - PAD_RIGHT,
-              y1: y,
-              y2: y,
-              stroke: GRIDLINE_COLOR,
-              strokeWidth: 0.5,
-              strokeDasharray: "2,3"
-            },
-            i
-          );
-        }),
-        area_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: area_d, fill: color2, fillOpacity: 0.12, stroke: "none" }),
-        line_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.8, fill: "none" }),
-        /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(geo.y_max) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: PAD_LEFT - 4,
-            y: PAD_TOP + (geo.vbox_h - PAD_TOP - PAD_BOTTOM) / 2 + 3,
-            textAnchor: "end",
-            fill: AXIS_LABEL_COLOR,
-            fontSize: 9,
-            children: format_num((geo.y_max + geo.y_min) / 2)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: PAD_LEFT - 4,
-            y: geo.vbox_h - PAD_BOTTOM + 3,
-            textAnchor: "end",
-            fill: AXIS_LABEL_COLOR,
-            fontSize: 9,
-            children: format_num(geo.y_min)
-          }
-        ),
-        x_label_idx.map((idx, k) => {
-          const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
-          const x_pos = geo.cx(idx);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "text",
-            {
-              x: x_pos,
-              y: geo.vbox_h - 6,
-              textAnchor: anchor,
-              fill: AXIS_LABEL_COLOR,
-              fontSize: 9,
-              children: dates[idx] ?? ""
-            },
-            `x_${k}`
-          );
-        }),
-        has_last && hover_idx === null && (() => {
-          const x = geo.cx(last_idx);
-          const y = geo.cy(last_v);
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "line",
-              {
-                x1: x,
-                x2: PAD_LEFT,
-                y1: y,
-                y2: y,
-                stroke: color2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,2",
-                opacity: 0.4
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3.5, fill: color2, stroke: color2, strokeWidth: 2, fillOpacity: 0.3 }),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 2, fill: color2 }),
-            /* @__PURE__ */ jsxRuntime.jsxs("text", { x: x - 6, y: y - 6, textAnchor: "end", fill: color2, fontSize: 10, fontWeight: 700, children: [
-              format_num(last_v),
-              unit
-            ] })
-          ] });
-        })(),
-        showTooltip && hover_idx !== null && hover_has_v && (() => {
-          const x = geo.cx(hover_idx);
-          const y = geo.cy(hover_v);
-          const label = `${format_num(hover_v)}${unit}`;
-          const date = dates[hover_idx] ?? "";
-          const bubble_text_w = Math.max(label.length, date.length) * 5.5 + 12;
-          const bubble_w = Math.max(bubble_text_w, 40);
-          const bubble_h = 26;
-          const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT;
-          const bubble_x = flip ? x - bubble_w - 6 : x + 6;
-          const bubble_y = Math.max(PAD_TOP, Math.min(y - bubble_h / 2, geo.vbox_h - PAD_BOTTOM - bubble_h));
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "line",
-              {
-                x1: x,
-                x2: x,
-                y1: PAD_TOP,
-                y2: geo.vbox_h - PAD_BOTTOM,
-                stroke: color2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,2",
-                opacity: 0.6
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3, fill: color2 }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "rect",
-              {
-                x: bubble_x,
-                y: bubble_y,
-                width: bubble_w,
-                height: bubble_h,
-                rx: 3,
-                fill: "#0d1117",
-                stroke: color2,
-                strokeWidth: 0.5,
-                fillOpacity: 0.92
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                x: bubble_x + bubble_w / 2,
-                y: bubble_y + 11,
-                textAnchor: "middle",
-                fill: color2,
-                fontSize: 10,
-                fontWeight: 700,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                x: bubble_x + bubble_w / 2,
-                y: bubble_y + 22,
-                textAnchor: "middle",
-                fill: AXIS_LABEL_COLOR,
-                fontSize: 8,
-                children: date
-              }
-            )
-          ] });
-        })()
-      ]
-    }
-  );
-}
-var PAD_LEFT2 = 38;
-var PAD_RIGHT2 = 14;
-var PAD_TOP2 = 12;
-var PAD_BOTTOM2 = 22;
-var AXIS_LABEL_COLOR2 = "#8b949e";
-var GRIDLINE_COLOR2 = "#2a3441";
-function compute_geometry2(series, width, height) {
-  const all_vals = [];
-  let n = 0;
-  for (const s of series) {
-    n = Math.max(n, s.data.length);
-    for (const v of s.data) if (v !== null && !Number.isNaN(v)) all_vals.push(v);
-  }
-  if (all_vals.length === 0 || n === 0) return null;
-  const mn = Math.min(...all_vals);
-  const mx = Math.max(...all_vals);
-  const rng = mx - mn || mx * 0.1 + 1;
-  const y_min = Math.max(0, mn - rng * 0.05);
-  const y_max = mx + rng * 0.05;
-  const y_rng = y_max - y_min || 1;
-  const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
-  const plot_h = height - PAD_TOP2 - PAD_BOTTOM2;
-  return {
-    vbox_w: width,
-    vbox_h: height,
-    y_min,
-    y_max,
-    point_count: n,
-    cx: (i) => n <= 1 ? PAD_LEFT2 + plot_w / 2 : PAD_LEFT2 + i * plot_w / (n - 1),
-    cy: (v) => PAD_TOP2 + (1 - (v - y_min) / y_rng) * plot_h
-  };
-}
-function MultiLineChart({
-  series,
-  dates,
-  width = 360,
-  height = 140,
-  showTooltip = true,
-  showLegend = true,
-  className
-}) {
-  const geo = compute_geometry2(series, width, height);
-  const [hover_idx, set_hover_idx] = React26__namespace.useState(null);
-  const handle_mouse_move = React26__namespace.useCallback(
-    (e) => {
-      if (!geo) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      if (rect.width === 0) return;
-      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
-      const plot_w = geo.vbox_w - PAD_LEFT2 - PAD_RIGHT2;
-      if (vbox_x < PAD_LEFT2 || vbox_x > geo.vbox_w - PAD_RIGHT2) {
-        set_hover_idx(null);
-        return;
-      }
-      const ratio = (vbox_x - PAD_LEFT2) / plot_w;
-      const idx = Math.round(ratio * (geo.point_count - 1));
-      set_hover_idx(Math.max(0, Math.min(geo.point_count - 1, idx)));
-    },
-    [geo]
-  );
-  const handle_mouse_leave = React26__namespace.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
-        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
-      }
-    );
-  }
-  const x_label_idx = pick_x_label_indices(geo.point_count);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_chart_wrapper", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        onMouseMove: showTooltip ? handle_mouse_move : void 0,
-        onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
-        className: "cls_hazo_chart cls_hazo_chart_multi",
-        style: {
-          width: "100%",
-          height: "auto",
-          display: "block",
-          maxHeight: `${height + 10}px`,
-          cursor: showTooltip ? "crosshair" : "default"
-        },
-        children: [
-          [0, 1, 2].map((i) => {
-            const y = PAD_TOP2 + i / 2 * (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "line",
-              {
-                x1: PAD_LEFT2,
-                x2: geo.vbox_w - PAD_RIGHT2,
-                y1: y,
-                y2: y,
-                stroke: GRIDLINE_COLOR2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,3"
-              },
-              i
-            );
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 - 4, y: PAD_TOP2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_max) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "text",
-            {
-              x: PAD_LEFT2 - 4,
-              y: PAD_TOP2 + (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2) / 2 + 3,
-              textAnchor: "end",
-              fill: AXIS_LABEL_COLOR2,
-              fontSize: 9,
-              children: format_num((geo.y_max + geo.y_min) / 2)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 - 4, y: geo.vbox_h - PAD_BOTTOM2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_min) }),
-          x_label_idx.map((idx, k) => {
-            const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                x: geo.cx(idx),
-                y: geo.vbox_h - 6,
-                textAnchor: anchor,
-                fill: AXIS_LABEL_COLOR2,
-                fontSize: 9,
-                children: dates[idx] ?? ""
-              },
-              `x_${k}`
-            );
-          }),
-          series.map((s, s_idx) => {
-            let d = "";
-            s.data.forEach((v, i) => {
-              if (v === null || Number.isNaN(v)) return;
-              d += `${d ? " L" : "M"}${geo.cx(i).toFixed(1)},${geo.cy(v).toFixed(1)}`;
-            });
-            const last_idx = s.data.length - 1;
-            const last_v = s.data[last_idx];
-            const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
-            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-              d && /* @__PURE__ */ jsxRuntime.jsx("path", { d, stroke: s.color, strokeWidth: 1.7, fill: "none" }),
-              has_last && hover_idx === null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: geo.cx(last_idx),
-                    cy: geo.cy(last_v),
-                    r: 3,
-                    fill: s.color,
-                    fillOpacity: 0.3,
-                    stroke: s.color,
-                    strokeWidth: 1.5
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "text",
-                  {
-                    x: geo.cx(last_idx) - 5,
-                    y: geo.cy(last_v) - 5,
-                    textAnchor: "end",
-                    fill: s.color,
-                    fontSize: 9,
-                    fontWeight: 700,
-                    children: format_num(last_v)
-                  }
-                )
-              ] })
-            ] }, `series_${s_idx}`);
-          }),
-          showTooltip && hover_idx !== null && (() => {
-            const x = geo.cx(hover_idx);
-            const items = series.map((s) => ({
-              label: s.label,
-              color: s.color,
-              value: s.data[hover_idx] ?? null
-            })).filter((it) => it.value !== null && !Number.isNaN(it.value));
-            if (items.length === 0) return null;
-            const bubble_w = 70;
-            const row_h = 12;
-            const bubble_h = items.length * row_h + 18;
-            const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT2;
-            const bubble_x = flip ? x - bubble_w - 6 : x + 6;
-            const bubble_y = Math.max(PAD_TOP2, Math.min(PAD_TOP2 + 5, geo.vbox_h - PAD_BOTTOM2 - bubble_h));
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "line",
-                {
-                  x1: x,
-                  x2: x,
-                  y1: PAD_TOP2,
-                  y2: geo.vbox_h - PAD_BOTTOM2,
-                  stroke: AXIS_LABEL_COLOR2,
-                  strokeWidth: 0.5,
-                  strokeDasharray: "2,2",
-                  opacity: 0.6
-                }
-              ),
-              items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: x,
-                  cy: geo.cy(it.value),
-                  r: 3,
-                  fill: it.color
-                },
-                `hd_${it.label}`
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: bubble_x,
-                  y: bubble_y,
-                  width: bubble_w,
-                  height: bubble_h,
-                  rx: 3,
-                  fill: "#0d1117",
-                  stroke: AXIS_LABEL_COLOR2,
-                  strokeWidth: 0.5,
-                  fillOpacity: 0.92
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("text", { x: bubble_x + 6, y: bubble_y + 10, fill: AXIS_LABEL_COLOR2, fontSize: 8, children: dates[hover_idx] ?? "" }),
-              items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "rect",
-                  {
-                    x: bubble_x + 6,
-                    y: bubble_y + 14 + i * row_h,
-                    width: 6,
-                    height: 6,
-                    fill: it.color
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "text",
-                  {
-                    x: bubble_x + 16,
-                    y: bubble_y + 20 + i * row_h,
-                    fill: it.color,
-                    fontSize: 9,
-                    fontWeight: 600,
-                    children: format_num(it.value)
-                  }
-                )
-              ] }, `row_${i}`))
-            ] });
-          })()
-        ]
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "cls_hazo_chart_legend",
-        style: {
-          display: "flex",
-          gap: "12px",
-          justifyContent: "center",
-          marginTop: "4px",
-          fontSize: "10px",
-          color: AXIS_LABEL_COLOR2,
-          flexWrap: "wrap"
-        },
-        children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            style: { display: "inline-flex", alignItems: "center", gap: "4px" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "i",
-                {
-                  style: {
-                    display: "inline-block",
-                    width: "8px",
-                    height: "8px",
-                    background: s.color,
-                    borderRadius: "1px"
-                  }
-                }
-              ),
-              s.label
-            ]
-          },
-          s.label
-        ))
-      }
-    )
-  ] });
-}
-var PAD_LEFT3 = 32;
-var PAD_RIGHT3 = 8;
-var PAD_TOP3 = 10;
-var PAD_BOTTOM3 = 22;
 var BAR_GAP_RATIO = 0.25;
-var AXIS_LABEL_COLOR3 = "#8b949e";
+var AXIS_LABEL_COLOR = "#8b949e";
 function StackedBars({
   bars,
   width = 360,
@@ -10312,11 +9798,11 @@ function StackedBars({
 }) {
   const totals = bars.map((b) => b.segments.reduce((sum, s) => sum + s.value, 0));
   const y_max = Math.max(0, ...totals) || 1;
-  const plot_w = width - PAD_LEFT3 - PAD_RIGHT3;
-  const plot_h = height - PAD_TOP3 - PAD_BOTTOM3;
+  const plot_w = width - PAD_LEFT - PAD_RIGHT;
+  const plot_h = height - PAD_TOP - PAD_BOTTOM;
   const slot_w = bars.length > 0 ? plot_w / bars.length : 0;
   const bar_w = slot_w * (1 - BAR_GAP_RATIO);
-  const x_for = (i) => PAD_LEFT3 + i * slot_w + (slot_w - bar_w) / 2;
+  const x_for = (i) => PAD_LEFT + i * slot_w + (slot_w - bar_w) / 2;
   const x_label_idx = pick_x_label_indices(bars.length);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -10326,14 +9812,14 @@ function StackedBars({
       style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` },
       children: [
         showYAxis && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT3 - 4, y: PAD_TOP3 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR3, fontSize: 9, children: format_num(y_max) }),
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(y_max) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
-              x: PAD_LEFT3 - 4,
-              y: PAD_TOP3 + plot_h / 2 + 3,
+              x: PAD_LEFT - 4,
+              y: PAD_TOP + plot_h / 2 + 3,
               textAnchor: "end",
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: format_num(y_max / 2)
             }
@@ -10341,17 +9827,17 @@ function StackedBars({
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
-              x: PAD_LEFT3 - 4,
-              y: height - PAD_BOTTOM3 + 3,
+              x: PAD_LEFT - 4,
+              y: height - PAD_BOTTOM + 3,
               textAnchor: "end",
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: "0"
             }
           )
         ] }),
         bars.map((bar, i) => {
-          let cursor_y = height - PAD_BOTTOM3;
+          let cursor_y = height - PAD_BOTTOM;
           return /* @__PURE__ */ jsxRuntime.jsx("g", { children: bar.segments.map((seg, s_idx) => {
             if (seg.value <= 0) return null;
             const seg_h = seg.value / y_max * plot_h;
@@ -10379,7 +9865,7 @@ function StackedBars({
               x: x_pos,
               y: height - 6,
               textAnchor: anchor,
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: bars[idx]?.label ?? ""
             },
@@ -10428,6 +9914,219 @@ function DateRangeSelector({
     }
   );
 }
+var PAD_LEFT2 = 80;
+var PAD_RIGHT2 = 72;
+var PAD_TOP2 = 12;
+var PAD_BOTTOM2 = 12;
+var ROW_H = 44;
+var LABEL_H = 14;
+var BAR_H = 22;
+var AXIS_LABEL_COLOR2 = "#8b949e";
+var GRIDLINE_COLOR = "#2a3441";
+function step_total(step) {
+  if (step.value !== void 0) return step.value;
+  if (step.segments) return step.segments.reduce((s, g) => s + g.value, 0);
+  return 0;
+}
+function FunnelChart({
+  steps,
+  width = 360,
+  height,
+  color: color2 = "#3b82f6",
+  valueFormat,
+  showDropoff = true,
+  showTooltip = true,
+  className
+}) {
+  const [hover_idx, set_hover_idx] = React26__namespace.useState(null);
+  const fmt = valueFormat ?? format_num;
+  const totals = steps.map(step_total);
+  const value_max = Math.max(1, ...totals);
+  const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
+  const vbox_h = height ?? PAD_TOP2 + steps.length * ROW_H + PAD_BOTTOM2;
+  const handle_mouse_move = React26__namespace.useCallback(
+    (e) => {
+      if (steps.length === 0) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (rect.height === 0) return;
+      const vbox_y = (e.clientY - rect.top) / rect.height * vbox_h;
+      const row_idx = Math.floor((vbox_y - PAD_TOP2) / ROW_H);
+      if (row_idx < 0 || row_idx >= steps.length) {
+        set_hover_idx(null);
+        return;
+      }
+      set_hover_idx(row_idx);
+    },
+    [steps.length, vbox_h]
+  );
+  const handle_mouse_leave = React26__namespace.useCallback(() => set_hover_idx(null), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${vbox_h}`,
+      onMouseMove: showTooltip ? handle_mouse_move : void 0,
+      onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
+      className: cn("cls_hazo_chart cls_hazo_chart_funnel", className),
+      style: {
+        width: "100%",
+        height: "auto",
+        display: "block",
+        cursor: showTooltip ? "crosshair" : "default"
+      },
+      children: [
+        steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: PAD_LEFT2 + plot_w / 2,
+            x2: PAD_LEFT2 + plot_w / 2,
+            y1: PAD_TOP2,
+            y2: PAD_TOP2 + steps.length * ROW_H,
+            stroke: GRIDLINE_COLOR,
+            strokeWidth: 0.5,
+            strokeDasharray: "2,3"
+          }
+        ),
+        steps.map((step, i) => {
+          const total = totals[i];
+          const bar_w = total / value_max * plot_w;
+          const bar_x = PAD_LEFT2 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP2 + i * ROW_H + LABEL_H;
+          const pct_first = i === 0 ? 100 : Math.round(total / (totals[0] || 1) * 100);
+          const value_label = i === 0 ? `${fmt(total)} (100%)` : `${fmt(total)} (${pct_first}%)`;
+          const dropoff = i > 0 ? totals[i - 1] - total : 0;
+          const label_x = bar_x + bar_w + 6;
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: PAD_LEFT2 - 6,
+                y: bar_y + BAR_H / 2 + 4,
+                textAnchor: "end",
+                fill: AXIS_LABEL_COLOR2,
+                fontSize: 9,
+                children: step.label
+              }
+            ),
+            step.segments ? (() => {
+              let cursor_x = bar_x;
+              return step.segments.map((seg, s_idx) => {
+                const seg_w = seg.value / value_max * plot_w;
+                const x = cursor_x;
+                cursor_x += seg_w;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x,
+                    y: bar_y,
+                    width: seg_w,
+                    height: BAR_H,
+                    fill: seg.color
+                  },
+                  `seg_${s_idx}`
+                );
+              });
+            })() : /* @__PURE__ */ jsxRuntime.jsx("rect", { x: bar_x, y: bar_y, width: bar_w, height: BAR_H, fill: color2 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: label_x,
+                y: bar_y + BAR_H / 2,
+                textAnchor: "start",
+                fill: color2,
+                fontSize: 9,
+                dominantBaseline: "middle",
+                children: value_label
+              }
+            ),
+            showDropoff && i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: label_x,
+                y: bar_y + BAR_H / 2 + 10,
+                textAnchor: "start",
+                fill: AXIS_LABEL_COLOR2,
+                fontSize: 8,
+                children: `\u2212${fmt(dropoff)}`
+              }
+            )
+          ] }, `step_${i}`);
+        }),
+        showTooltip && hover_idx !== null && (() => {
+          const i = hover_idx;
+          const step = steps[i];
+          const total = totals[i];
+          const pct_first = i === 0 ? 100 : Math.round(total / (totals[0] || 1) * 100);
+          const pct_prev = i === 0 ? 100 : Math.round(total / (totals[i - 1] || 1) * 100);
+          const dropoff = i > 0 ? totals[i - 1] - total : 0;
+          const bar_w = total / value_max * plot_w;
+          const bar_x = PAD_LEFT2 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP2 + i * ROW_H + LABEL_H;
+          const bubble_anchor_y = bar_y + BAR_H / 2;
+          const lines = [
+            { text: step.label, accent: true },
+            { text: `Total: ${fmt(total)}`, accent: false },
+            { text: `% of first: ${pct_first}%`, accent: false }
+          ];
+          if (i > 0) {
+            lines.push({ text: `% of prev: ${pct_prev}%`, accent: false });
+            lines.push({ text: `Drop-off: \u2212${fmt(dropoff)}`, accent: false });
+          }
+          if (step.segments) {
+            step.segments.forEach((seg) => {
+              lines.push({ text: `${seg.label}: ${fmt(seg.value)}`, accent: false });
+            });
+          }
+          const line_h = 13;
+          const pad_v = 8;
+          const bubble_w = 120;
+          const bubble_h = lines.length * line_h + pad_v * 2;
+          const right_x = bar_x + bar_w + 6;
+          const left_x = bar_x - bubble_w - 6;
+          const fits_right = right_x + bubble_w <= width - 4;
+          const fits_left = left_x >= 4;
+          let bubble_x;
+          let bubble_y;
+          if (fits_right || fits_left) {
+            bubble_x = fits_right ? right_x : left_x;
+            bubble_y = Math.max(4, Math.min(bubble_anchor_y - bubble_h / 2, vbox_h - bubble_h - 4));
+          } else {
+            bubble_x = Math.min(Math.max(bar_x + bar_w / 2 - bubble_w / 2, 4), width - bubble_w - 4);
+            const below_y = bar_y + BAR_H + 6;
+            bubble_y = below_y + bubble_h <= vbox_h - 4 ? below_y : Math.max(4, bar_y - bubble_h - 6);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: bubble_x,
+                y: bubble_y,
+                width: bubble_w,
+                height: bubble_h,
+                rx: 3,
+                fill: "#0d1117",
+                stroke: color2,
+                strokeWidth: 0.5,
+                fillOpacity: 0.92
+              }
+            ),
+            lines.map((line, k) => /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: bubble_x + 7,
+                y: bubble_y + pad_v + k * line_h + line_h * 0.75,
+                fill: line.accent ? color2 : AXIS_LABEL_COLOR2,
+                fontSize: line.accent ? 10 : 8,
+                fontWeight: line.accent ? 700 : 400,
+                children: line.text
+              },
+              k
+            ))
+          ] });
+        })()
+      ]
+    }
+  );
+}
 
 // src/assets/celebration-chime.mp3
 var celebration_chime_default = "data:text/plain;charset=utf-8,";
@@ -10954,6 +10653,7 @@ exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;
+exports.FunnelChart = FunnelChart;
 exports.HazoContextProvider = HazoContextProvider;
 exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
 exports.HazoUiDialog = HazoUiDialog;
@@ -10985,12 +10685,11 @@ exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
+exports.InputAffix = InputAffix;
 exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
-exports.LineChart = LineChart;
 exports.LoadingTimeout = LoadingTimeout;
 exports.MarkdownEditor = MarkdownEditor;
-exports.MultiLineChart = MultiLineChart;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
@@ -11021,6 +10720,7 @@ exports.SkeletonBar = SkeletonBar;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonGroup = SkeletonGroup;
 exports.SkeletonRect = SkeletonRect;
+exports.Slider = Slider;
 exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
 exports.StackedBars = StackedBars;