@karakuri-ui/react 0.3.3 → 0.3.5

package/dist/components/ui/chart.mjs

@@ -1,7 +1,8 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const THEMES = { light: "", dark: ".dark" };
 const ChartContext = React.createContext(null);
 function useChart() {
@@ -23,7 +24,7 @@ function Chart({
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [activeDataKey, setActiveDataKey] = React.useState(null);
-  return /* @__PURE__ */ React.createElement(ChartContext.Provider, { value: { config, hoverFade, activeIndex, setActiveIndex, activeDataKey, setActiveDataKey } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config, hoverFade, activeIndex, setActiveIndex, activeDataKey, setActiveDataKey }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "chart",
@@ -52,11 +53,13 @@ function Chart({
         "[&_.recharts-surface]:outline-none",
         className
       ),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(ChartStyle, { id: chartId, config }),
-    /* @__PURE__ */ React.createElement(RechartsPrimitive.ResponsiveContainer, null, children)
-  ));
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
 }
 const CHART_TOOLTIP_KEYFRAME = "@keyframes chart-tooltip-in{from{opacity:0}to{opacity:1}}";
 const ChartStyle = ({ id, config }) => {
@@ -73,7 +76,7 @@ ${colorConfig.map(([key, itemConfig]) => {
 }
 `
   ).join("\n") : "";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -114,12 +117,12 @@ function ChartBar({
     const y = shapeProps.y ?? 0;
     const width = shapeProps.width ?? 0;
     const height = shapeProps.height ?? 0;
-    if (!width || !height || width <= 0 || height <= 0) return /* @__PURE__ */ React.createElement("g", null);
+    if (!width || !height || width <= 0 || height <= 0) return /* @__PURE__ */ jsx("g", {});
     const sw = 2;
     const inset = sw / 2;
     const rx = typeof appliedRadius === "number" ? Math.max(0, appliedRadius - inset) : 0;
     const fadeMultiplier = hoverFade && activeIndex !== null && shapeProps.index !== activeIndex ? CHART_HOVER_FADE_OPACITY : 1;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "rect",
       {
         x: x + inset,
@@ -138,7 +141,7 @@ function ChartBar({
   }, [appliedRadius, fill, hoverFade, activeIndex]);
   const solidHoverShape = React.useCallback((shapeProps) => {
     const opacity = activeIndex === null ? 1 : shapeProps.index === activeIndex ? 1 : CHART_HOVER_FADE_OPACITY;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       RechartsPrimitive.Rectangle,
       {
         ...shapeProps,
@@ -149,7 +152,7 @@ function ChartBar({
   }, [activeIndex]);
   const useOutline = variant === "outline" && !isStacked;
   const needsHoverShape = hoverFade && variant === "solid" && !useOutline;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     RechartsPrimitive.Bar,
     {
       radius: appliedRadius,
@@ -164,7 +167,7 @@ function ChartBar({
   );
 }
 function ChartTooltip(props) {
-  return /* @__PURE__ */ React.createElement(RechartsPrimitive.Tooltip, { animationDuration: 0, ...props });
+  return /* @__PURE__ */ jsx(RechartsPrimitive.Tooltip, { animationDuration: 0, ...props });
 }
 function ChartTooltipContent({
   active,
@@ -191,70 +194,80 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ React.createElement("div", { className: cn("font-semibold", labelClassName) }, labelFormatter(value, payload));
+      return /* @__PURE__ */ jsx("div", { className: cn("font-semibold", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement("div", { className: cn("font-semibold", labelClassName) }, value);
+    return /* @__PURE__ */ jsx("div", { className: cn("font-semibold", labelClassName), children: value });
   }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
   if (!active || !payload?.length) {
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
-      style: { animation: "chart-tooltip-in var(--duration-slow) ease-out" }
-    },
-    !nestLabel ? tooltipLabel : null,
-    /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, payload.filter((item) => item.type !== "none").map((item, index) => {
-      const key = `${nameKey || item.name || item.dataKey || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const indicatorColor = color || item.payload?.fill || item.color;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: item.dataKey,
-          className: cn(
-            "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-text-muted",
-            indicator === "dot" && "items-center"
-          )
-        },
-        formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ React.createElement(React.Fragment, null, itemConfig?.icon ? /* @__PURE__ */ React.createElement(itemConfig.icon, null) : !hideIndicator && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn(
-              "shrink-0 rounded-sm",
-              {
-                "h-2.5 w-2.5": indicator === "dot",
-                "w-1": indicator === "line",
-                "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                "my-0.5": nestLabel && indicator === "dashed"
-              }
-            ),
-            style: {
-              backgroundColor: indicator === "dashed" ? "transparent" : indicatorColor,
-              borderColor: indicatorColor
-            }
-          }
-        ), /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn(
-              "flex flex-1 justify-between leading-none",
-              nestLabel ? "items-end" : "items-center"
-            )
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, nestLabel ? tooltipLabel : null, /* @__PURE__ */ React.createElement("span", { className: "text-text-muted" }, itemConfig?.label || item.name)),
-          item.value && /* @__PURE__ */ React.createElement("span", { className: "font-mono font-semibold text-foreground tabular-nums" }, item.value.toLocaleString())
-        ))
-      );
-    }))
+      style: { animation: "chart-tooltip-in var(--duration-slow) ease-out" },
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload?.fill || item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-text-muted",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 rounded-sm",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      backgroundColor: indicator === "dashed" ? "transparent" : indicatorColor,
+                      borderColor: indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between gap-4 leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: itemConfig?.label || item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-foreground tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            item.dataKey
+          );
+        }) })
+      ]
+    }
   );
 }
 const ChartLegend = RechartsPrimitive.Legend;
@@ -272,7 +285,7 @@ function ChartLegendContent({
     return null;
   }
   const isVertical = layout === "vertical";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -283,29 +296,31 @@ function ChartLegendContent({
           verticalAlign === "top" ? "pb-3" : "pt-3"
         ],
         className
-      )
-    },
-    payload.filter((item) => item.type !== "none").map((item) => {
-      const key = `${nameKey || item.dataKey || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: item.value,
-          className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-muted"
-        },
-        itemConfig?.icon && !hideIcon ? /* @__PURE__ */ React.createElement(itemConfig.icon, null) : /* @__PURE__ */ React.createElement(
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "h-2 w-2 shrink-0 rounded-sm",
-            style: {
-              backgroundColor: item.color
-            }
-          }
-        ),
-        /* @__PURE__ */ React.createElement("span", { className: "text-foreground" }, itemConfig?.label)
-      );
-    })
+            className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-muted",
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-sm",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: itemConfig?.label })
+            ]
+          },
+          item.value
+        );
+      })
+    }
   );
 }
 function getPayloadConfigFromPayload(config, payload, key) {
@@ -324,10 +339,10 @@ function getPayloadConfigFromPayload(config, payload, key) {
 const CHART_AXIS_TICK_STYLE = { style: { fontSize: "var(--chart-axis-fs)", fill: "var(--color-text-subtle)" } };
 const CHART_XAXIS_PADDING = { left: 16, right: 16 };
 function ChartXAxis({ tick, padding, ...props }) {
-  return /* @__PURE__ */ React.createElement(RechartsPrimitive.XAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, padding: padding ?? CHART_XAXIS_PADDING, ...props });
+  return /* @__PURE__ */ jsx(RechartsPrimitive.XAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, padding: padding ?? CHART_XAXIS_PADDING, ...props });
 }
 function ChartYAxis({ tick, width = "auto", ...props }) {
-  return /* @__PURE__ */ React.createElement(RechartsPrimitive.YAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, width, ...props });
+  return /* @__PURE__ */ jsx(RechartsPrimitive.YAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, width, ...props });
 }
 const CHART_LINE_DASH = "5 5";
 const CHART_DOT_PROPS = { r: 3, strokeWidth: 2 };
@@ -346,7 +361,7 @@ function ChartLine({
   const opacity = isFaded ? CHART_HOVER_FADE_OPACITY : 1;
   const dotProps = showDot ? variant === "dashed" ? { ...CHART_DOT_PROPS, strokeDasharray: "0" } : CHART_DOT_PROPS : false;
   const activeDotProps = showActiveDot ? variant === "dashed" ? { ...CHART_ACTIVE_DOT_PROPS, strokeDasharray: "0" } : CHART_ACTIVE_DOT_PROPS : false;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     RechartsPrimitive.Line,
     {
       type,
@@ -384,24 +399,30 @@ function ChartArea({
   const gradientId = `area-gradient-${String(dataKey)}`;
   const effectiveFill = variant === "gradient" ? `url(#${gradientId})` : fill || stroke;
   const effectiveFillOpacity = variant === "gradient" ? 1 : fillOpacity;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, variant === "gradient" && /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React.createElement("stop", { offset: "5%", stopColor: fill || stroke, stopOpacity: 0.8 }), /* @__PURE__ */ React.createElement("stop", { offset: "95%", stopColor: fill || stroke, stopOpacity: 0 }))), /* @__PURE__ */ React.createElement(
-    RechartsPrimitive.Area,
-    {
-      type,
-      dataKey,
-      stroke,
-      fill: effectiveFill,
-      fillOpacity: effectiveFillOpacity * opacity,
-      strokeWidth: 2,
-      dot: dotProps,
-      activeDot: activeDotProps,
-      strokeOpacity: opacity,
-      ...hoverFade && { isAnimationActive: false },
-      ...hoverFade && { onMouseEnter: () => setActiveDataKey(dataKey) },
-      style: hoverFade ? { transition: "fill-opacity var(--duration-fast) ease-out, stroke-opacity var(--duration-fast) ease-out" } : void 0,
-      ...props
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant === "gradient" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: fill || stroke, stopOpacity: 0.8 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: fill || stroke, stopOpacity: 0 })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.Area,
+      {
+        type,
+        dataKey,
+        stroke,
+        fill: effectiveFill,
+        fillOpacity: effectiveFillOpacity * opacity,
+        strokeWidth: 2,
+        dot: dotProps,
+        activeDot: activeDotProps,
+        strokeOpacity: opacity,
+        ...hoverFade && { isAnimationActive: false },
+        ...hoverFade && { onMouseEnter: () => setActiveDataKey(dataKey) },
+        style: hoverFade ? { transition: "fill-opacity var(--duration-fast) ease-out, stroke-opacity var(--duration-fast) ease-out" } : void 0,
+        ...props
+      }
+    )
+  ] });
 }
 const CHART_PIE_ACTIVE_OFFSET = 8;
 const CHART_PIE_DONUT_INNER_RADIUS = 60;
@@ -421,7 +442,7 @@ function ChartPie({
   ...props
 }) {
   const resolvedInnerRadius = innerRadius ?? (variant === "donut" ? CHART_PIE_DONUT_INNER_RADIUS : 0);
-  const activeShapeConfig = showActiveShape ? (props2) => /* @__PURE__ */ React.createElement(
+  const activeShapeConfig = showActiveShape ? (props2) => /* @__PURE__ */ jsx(
     RechartsPrimitive.Sector,
     {
       ...props2,
@@ -438,26 +459,29 @@ function ChartPie({
     const my = cy + (outerRadius + CHART_PIE_LABEL_RADIAL) * Math.sin(-midAngle * RADIAN);
     const isRight = mx > cx;
     const ex = mx + (isRight ? CHART_PIE_LABEL_HORIZ : -CHART_PIE_LABEL_HORIZ);
-    return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
-      "polyline",
-      {
-        points: `${sx},${sy} ${mx},${my} ${ex},${my}`,
-        fill: "none",
-        stroke: fill,
-        strokeWidth: 1,
-        strokeOpacity: 0.5
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "text",
-      {
-        x: ex + (isRight ? 4 : -4),
-        y: my,
-        textAnchor: isRight ? "start" : "end",
-        dominantBaseline: "central",
-        style: { fontSize: "var(--font-size-xs)", fill: "var(--color-text-muted)" }
-      },
-      getDisplayText(entry)
-    ));
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: `${sx},${sy} ${mx},${my} ${ex},${my}`,
+          fill: "none",
+          stroke: fill,
+          strokeWidth: 1,
+          strokeOpacity: 0.5
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: ex + (isRight ? 4 : -4),
+          y: my,
+          textAnchor: isRight ? "start" : "end",
+          dominantBaseline: "central",
+          style: { fontSize: "var(--font-size-xs)", fill: "var(--color-text-muted)" },
+          children: getDisplayText(entry)
+        }
+      )
+    ] });
   } : labelMode === "inside" ? (entry) => {
     const angle = Math.abs(entry.endAngle - entry.startAngle);
     if (angle < CHART_PIE_SKIP_ANGLE) return null;
@@ -467,19 +491,19 @@ function ChartPie({
     const radius = ir + (or - ir) * ratio;
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "text",
       {
         x,
         y,
         textAnchor: "middle",
         dominantBaseline: "central",
-        style: { fontSize: "var(--font-size-xs)", fill: "white", fontWeight: 600 }
-      },
-      getDisplayText(entry)
+        style: { fontSize: "var(--font-size-xs)", fill: "white", fontWeight: 600 },
+        children: getDisplayText(entry)
+      }
     );
   } : false;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     RechartsPrimitive.Pie,
     {
       innerRadius: resolvedInnerRadius,