@deepnoid/ui 0.1.123 → 0.1.124

package/dist/chunk-QKRCC26D.mjs

@@ -1,155 +0,0 @@
-"use client";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
-
-// src/components/charts/areaChart.tsx
-import { forwardRef, useMemo, useState, useRef, useEffect, useId } from "react";
-import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, CartesianGrid } from "recharts";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var AreaChartComponent = forwardRef((originalProps, ref) => {
-  const uniqueId = useId();
-  const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
-  const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
-  const slots = useMemo(() => areaChartStyle({ ...variantProps }), [variantProps]);
-  const COLOR_MAP = {
-    primary: "#3F9CF2",
-    danger: "#FF4684"
-  };
-  const colorHex = useMemo(() => COLOR_MAP[color], [color]);
-  const [tickPositions, setTickPositions] = useState([]);
-  const tickRef = useRef([]);
-  const CustomTick = ({ x, y, payload }) => {
-    if (x !== void 0) {
-      tickRef.current.push(x);
-    }
-    return /* @__PURE__ */ jsx(
-      "text",
-      {
-        x,
-        y: y + 14,
-        textAnchor: "middle",
-        fontSize: 12,
-        fontWeight: 700,
-        fill: "currentColor",
-        className: "text-body-foreground",
-        children: payload.value
-      }
-    );
-  };
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => {
-      const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
-      const mids = [];
-      for (let i = 0; i < unique.length - 1; i++) {
-        mids.push((unique[i] + unique[i + 1]) / 2);
-      }
-      setTickPositions(mids);
-      tickRef.current = [];
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [data]);
-  const CustomDotWithShadow = (props2) => {
-    const { cx, cy, fill, stroke } = props2;
-    if (cx === void 0 || cy === void 0) return null;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ jsx("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-      AreaChart,
-      {
-        data,
-        margin: { left: -30 },
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "3 3",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: "name",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 35.5, right: 35.5 }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: {
-                fontSize: 12,
-                fontWeight: 700,
-                fill: "text-body-foreground",
-                textAnchor: "middle",
-                dx: -10
-              },
-              ticks: [0, 20, 40, 60, 80, 100],
-              domain: [-6, 110]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Area,
-            {
-              type: "monotone",
-              dataKey: "value",
-              stroke: colorHex,
-              strokeWidth: 2,
-              fill: `url(#colorGradient-${uniqueId})`,
-              dot: /* @__PURE__ */ jsx(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-              activeDot: { r: 7, fill: colorHex }
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-});
-AreaChartComponent.displayName = "AreaChart";
-var areaChart_default = AreaChartComponent;
-var areaChartStyle = tv({
-  slots: {
-    base: ["flex", "flex-col", "gap-[10px]", "select-none"],
-    color: [],
-    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
-    label: ["text-md", "font-bold", "text-body-foreground"]
-  },
-  variants: {
-    color: {
-      primary: {
-        color: ["text-primary-main"]
-      },
-      danger: {
-        color: ["text-danger-main"]
-      }
-    }
-  },
-  defaultVariants: {
-    color: "primary"
-  }
-});
-
-export {
-  areaChart_default
-};