@deepnoid/ui 0.1.48 → 0.1.50

package/dist/components/charts/{areaCharts.d.mts → areaChart.d.mts}

@@ -8,7 +8,8 @@ type AreaData = {
     value: number;
 };
 type Props = {
-    areaData?: AreaData[];
+    data?: AreaData[];
+    label?: string;
     classNames?: SlotsToClasses<AreaChartSlots>;
 };
 type AreaChartProps = Props & AreaChartVariantProps;
@@ -24,9 +25,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, undefined, {
     color: {
         primary: {
@@ -37,9 +39,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
         primary: {
@@ -50,9 +53,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type AreaChartVariantProps = VariantProps<typeof areaChartStyle>;
 type AreaChartSlots = keyof ReturnType<typeof areaChartStyle>;

package/dist/components/charts/{areaCharts.d.ts → areaChart.d.ts}

@@ -8,7 +8,8 @@ type AreaData = {
     value: number;
 };
 type Props = {
-    areaData?: AreaData[];
+    data?: AreaData[];
+    label?: string;
     classNames?: SlotsToClasses<AreaChartSlots>;
 };
 type AreaChartProps = Props & AreaChartVariantProps;
@@ -24,9 +25,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, undefined, {
     color: {
         primary: {
@@ -37,9 +39,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
         primary: {
@@ -50,9 +53,10 @@ declare const areaChartStyle: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: never[];
+    base: string[];
     color: never[];
     axis: string[];
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type AreaChartVariantProps = VariantProps<typeof areaChartStyle>;
 type AreaChartSlots = keyof ReturnType<typeof areaChartStyle>;

package/dist/components/charts/{areaCharts.js → areaChart.js}

@@ -99,12 +99,12 @@ var require_plugin = __commonJS({
   }
 });
 
-// src/components/charts/areaCharts.tsx
-var areaCharts_exports = {};
-__export(areaCharts_exports, {
-  default: () => areaCharts_default
+// src/components/charts/areaChart.tsx
+var areaChart_exports = {};
+__export(areaChart_exports, {
+  default: () => areaChart_default
 });
-module.exports = __toCommonJS(areaCharts_exports);
+module.exports = __toCommonJS(areaChart_exports);
 var import_react = require("react");
 
 // src/utils/tailwind-variants.ts
@@ -324,7 +324,7 @@ var tv = (0, import_tailwind_variants.createTV)({
   }
 });
 
-// src/components/charts/areaCharts.tsx
+// src/components/charts/areaChart.tsx
 var import_recharts = require("recharts");
 
 // src/utils/props.ts
@@ -347,12 +347,12 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/charts/areaCharts.tsx
+// src/components/charts/areaChart.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   const uniqueId = (0, import_react.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
-  const { areaData, color = "primary", classNames } = { ...props, ...variantProps };
+  const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
   const slots = (0, import_react.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
@@ -390,7 +390,7 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       tickRef.current = [];
     });
     return () => cancelAnimationFrame(raf);
-  }, [areaData]);
+  }, [data]);
   const CustomDotWithShadow = (props2) => {
     const { cx, cy, fill, stroke } = props2;
     if (cx === void 0 || cy === void 0) return null;
@@ -399,68 +399,72 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.AreaChart, { data: areaData, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_recharts.CartesianGrid,
-      {
-        vertical: true,
-        horizontal: false,
-        strokeDasharray: "3 3",
-        className: "stroke-neutral-light",
-        verticalPoints: tickPositions
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_recharts.XAxis,
-      {
-        dataKey: "name",
-        axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-        tickLine: false,
-        tick: CustomTick,
-        padding: { left: 35.5, right: 35.5 }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_recharts.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: [-10, 110]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_recharts.Area,
-      {
-        type: "monotone",
-        dataKey: "value",
-        stroke: colorHex,
-        strokeWidth: 2,
-        fill: `url(#colorGradient-${uniqueId})`,
-        dot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-        activeDot: { r: 7, fill: colorHex }
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.AreaChart, { data, margin: { left: -30 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.CartesianGrid,
+        {
+          vertical: true,
+          horizontal: false,
+          strokeDasharray: "3 3",
+          className: "stroke-neutral-light",
+          verticalPoints: tickPositions
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.XAxis,
+        {
+          dataKey: "name",
+          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+          tickLine: false,
+          tick: CustomTick,
+          padding: { left: 35.5, right: 35.5 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.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__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.Area,
+        {
+          type: "monotone",
+          dataKey: "value",
+          stroke: colorHex,
+          strokeWidth: 2,
+          fill: `url(#colorGradient-${uniqueId})`,
+          dot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+          activeDot: { r: 7, fill: colorHex }
+        }
+      )
+    ] }) })
+  ] });
 });
 AreaChartComponent.displayName = "AreaChart";
-var areaCharts_default = AreaChartComponent;
+var areaChart_default = AreaChartComponent;
 var areaChartStyle = tv({
   slots: {
-    base: [],
+    base: ["flex", "flex-col", "gap-[10px]"],
     color: [],
-    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"]
+    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
+    label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {
     color: {

package/dist/components/charts/{areaCharts.mjs → areaChart.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
-  areaCharts_default
-} from "../../chunk-VYLYF6G5.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+  areaChart_default
+} from "../../chunk-ZOENHWSZ.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
-  areaCharts_default as default
+  areaChart_default as default
 };

package/dist/components/charts/barChart.d.mts

@@ -0,0 +1,33 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+type BarData = {
+    name: string;
+    avg: number;
+    high: number;
+    low: number;
+};
+type Props = {
+    data?: BarData[];
+    label?: string;
+    classNames?: SlotsToClasses<barChartSlots>;
+};
+type barChartProps = Props & barChartVariantProps;
+declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const barChartStyle: tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, {}, {
+    base: string[];
+    label: string[];
+}, tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type barChartVariantProps = VariantProps<typeof barChartStyle>;
+type barChartSlots = keyof ReturnType<typeof barChartStyle>;
+
+export { type barChartProps, BarChartComponent as default };

package/dist/components/charts/barChart.d.ts

@@ -0,0 +1,33 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+type BarData = {
+    name: string;
+    avg: number;
+    high: number;
+    low: number;
+};
+type Props = {
+    data?: BarData[];
+    label?: string;
+    classNames?: SlotsToClasses<barChartSlots>;
+};
+type barChartProps = Props & barChartVariantProps;
+declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const barChartStyle: tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, {}, {
+    base: string[];
+    label: string[];
+}, tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type barChartVariantProps = VariantProps<typeof barChartStyle>;
+type barChartSlots = keyof ReturnType<typeof barChartStyle>;
+
+export { type barChartProps, BarChartComponent as default };