@deepnoid/ui 0.1.42 → 0.1.43

package/dist/{chunk-K7V4VE7R.mjs → chunk-D7XSWNZ7.mjs}

@@ -1,22 +1,22 @@
 "use client";
+import {
+  useDatePicker
+} from "./chunk-FWJ2ZKH6.mjs";
 import {
   calendar_default
-} from "./chunk-A7RU3FU5.mjs";
+} from "./chunk-X6D7C7QZ.mjs";
 import {
   timePicker_default
-} from "./chunk-BFOK4HVC.mjs";
-import {
-  useDatePicker
-} from "./chunk-FWJ2ZKH6.mjs";
+} from "./chunk-NR7MGDUE.mjs";
 import {
   Icon_default
 } from "./chunk-2TKEWFGH.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/dateTimePicker/dateTimePicker.tsx
 import React, { forwardRef, useCallback, useMemo } from "react";

package/dist/chunk-IET623ED.mjs

@@ -0,0 +1,106 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
+
+// src/components/charts/areaCharts.tsx
+import { forwardRef, useMemo } from "react";
+import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, CartesianGrid } from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AreaChartComponent = forwardRef((originalProps, ref) => {
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
+  const { areaData, color, classNames } = { ...props, ...variantProps };
+  const slots = useMemo(() => areaChartStyle({ ...variantProps }), [variantProps]);
+  const colorHex = (_b = (_a = areaChartStyle.variants.color) == null ? void 0 : _a[color || "primary"]) == null ? void 0 : _b._colorValue;
+  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__ */ jsx("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data: areaData,
+      margin: {
+        top: 20,
+        right: 30,
+        left: 20,
+        bottom: 20
+      },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "colorGradient", 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" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "name",
+            axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+            tickLine: false,
+            tick: { fontSize: 12, fontWeight: 700, fill: "text-body-foreground" },
+            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" },
+            ticks: [0, 20, 40, 60, 80, 100],
+            domain: [0, 100]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: colorHex,
+            strokeWidth: 2,
+            fill: "url(#colorGradient)",
+            dot: /* @__PURE__ */ jsx(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+            activeDot: { r: 7, fill: colorHex }
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+AreaChartComponent.displayName = "AreaChart";
+var areaCharts_default = AreaChartComponent;
+var areaChartStyle = tv({
+  slots: {
+    base: [],
+    color: [],
+    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"]
+  },
+  variants: {
+    color: {
+      primary: {
+        color: ["text-primary-main"],
+        _colorValue: "#3F9CF2"
+      },
+      danger: {
+        color: ["text-danger-main"],
+        _colorValue: "#FF4684"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+export {
+  areaCharts_default
+};

package/dist/{chunk-BPEMHZH3.mjs → chunk-KJMJIFPS.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6PN3DGOE.mjs";
 import {
   checkbox_default
-} from "./chunk-D6QI3DJG.mjs";
+} from "./chunk-YLRYHUTW.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/{chunk-G67WUZO3.mjs → chunk-L2VA3ACH.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  text_button_default
-} from "./chunk-WFMFC7R6.mjs";
 import {
   Icon_default
 } from "./chunk-2TKEWFGH.mjs";
+import {
+  text_button_default
+} from "./chunk-2PKM7SLZ.mjs";
 import {
   tv
 } from "./chunk-4ZJFD3L3.mjs";

package/dist/{chunk-IC25OKBJ.mjs → chunk-LR3SWRB4.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   backdrop_default
-} from "./chunk-LL6F3WDX.mjs";
+} from "./chunk-P5QCU457.mjs";
 import {
   button_default
-} from "./chunk-UB4YBFOT.mjs";
+} from "./chunk-7J3KVOTS.mjs";
 import {
   Icon_default
 } from "./chunk-2TKEWFGH.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useMemo, useEffect } from "react";

package/dist/chunk-LTXJKWHO.mjs

@@ -0,0 +1,107 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
+
+// src/components/charts/circularProgress.tsx
+import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CircularProgress = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
+  const { title, size = 150, color, percentage, unit, classNames } = { ...props, ...variantProps };
+  const slots = useMemo(() => circularProgressStyle({ ...variantProps }), [variantProps]);
+  const data = [
+    {
+      name: title,
+      value: percentage
+    }
+  ];
+  const BAR_SIZE = 24;
+  const OUTER_RADIUS = 88;
+  const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
+  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsxs("div", { className: `relative h-[${size}px] w-[${size}px]`, children: [
+      /* @__PURE__ */ jsxs(
+        RadialBarChart,
+        {
+          width: size,
+          height: size,
+          innerRadius: INNER_RADIUS,
+          outerRadius: OUTER_RADIUS,
+          barSize: BAR_SIZE,
+          data,
+          startAngle: 90,
+          endAngle: -270,
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r: INNER_RADIUS + BAR_SIZE / 2,
+                className: slots.background({ class: classNames == null ? void 0 : classNames.background }),
+                fill: "currentColor"
+              }
+            ),
+            /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
+            /* @__PURE__ */ jsx(
+              RadialBar,
+              {
+                dataKey: "value",
+                cornerRadius: 12,
+                animationDuration: 1e3,
+                className: slots.progress({ class: classNames == null ? void 0 : classNames.progress })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
+        percentage,
+        unit
+      ] }) })
+    ] }),
+    title && /* @__PURE__ */ jsx("p", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title })
+  ] });
+});
+CircularProgress.displayName = "CircularProgress";
+var circularProgress_default = CircularProgress;
+var circularProgressStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "items-center", "gap-[20px]"],
+    background: [],
+    progress: ["transition-all", "duration-1000 ease-out"],
+    text: ["text-xl", "font-bold"],
+    title: ["text-md", "font-bold", "text-center", "text-body-foreground"]
+  },
+  variants: {
+    color: {
+      primary: {
+        background: ["fill-primary-soft"],
+        progress: ["fill-primary-main"],
+        text: ["text-primary-dark"]
+      },
+      secondary: {
+        background: ["fill-secondary-soft"],
+        progress: ["fill-secondary-main"],
+        text: ["text-secondary-dark"]
+      },
+      warning: {
+        background: ["fill-warning-soft"],
+        progress: ["fill-warning-main"],
+        text: ["text-warning-dark"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+export {
+  circularProgress_default
+};

package/dist/{chunk-BFOK4HVC.mjs → chunk-NR7MGDUE.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  listItem_default
-} from "./chunk-RT3S3VVJ.mjs";
 import {
   list_default
-} from "./chunk-HIVPDIEP.mjs";
+} from "./chunk-UFVQPPPW.mjs";
+import {
+  listItem_default
+} from "./chunk-QWIURBUH.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-25QOEKXS.mjs → chunk-O6YBE7V3.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   input_default
-} from "./chunk-GH6CPGFN.mjs";
+} from "./chunk-R62HK726.mjs";
 import {
   button_default
-} from "./chunk-UB4YBFOT.mjs";
+} from "./chunk-7J3KVOTS.mjs";
 import {
   icon_button_default
-} from "./chunk-7TAGGLNY.mjs";
+} from "./chunk-6K3E5BVO.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-P7YYNA6L.mjs → chunk-SBL6IHEW.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6PN3DGOE.mjs";
 import {
   checkbox_default
-} from "./chunk-D6QI3DJG.mjs";
+} from "./chunk-YLRYHUTW.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/{chunk-MCNCHQ33.mjs → chunk-ZSG4NGLK.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-GH6CPGFN.mjs";
+} from "./chunk-R62HK726.mjs";
 import {
   Icon_default
 } from "./chunk-2TKEWFGH.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/components/backdrop/backdrop.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   backdrop_default
-} from "../../chunk-LL6F3WDX.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+} from "../../chunk-P5QCU457.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   backdrop_default as default

package/dist/components/backdrop/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-SE5TU755.mjs";
 import {
   backdrop_default
-} from "../../chunk-LL6F3WDX.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+} from "../../chunk-P5QCU457.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   backdrop_default as Backdrop

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,21 +1,21 @@
 "use client";
 import {
   breadcrumb_default
-} from "../../chunk-G67WUZO3.mjs";
+} from "../../chunk-L2VA3ACH.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-LPZOH3RP.mjs";
-import "../../chunk-UB4YBFOT.mjs";
-import "../../chunk-7TAGGLNY.mjs";
+import "../../chunk-7J3KVOTS.mjs";
+import "../../chunk-6K3E5BVO.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
-import "../../chunk-WFMFC7R6.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
-import "../../chunk-2SDYFOZL.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+import "../../chunk-2PKM7SLZ.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-2SDYFOZL.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   breadcrumb_default as default

package/dist/components/breadcrumb/index.mjs

@@ -2,21 +2,21 @@
 import "../../chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "../../chunk-G67WUZO3.mjs";
+} from "../../chunk-L2VA3ACH.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-LPZOH3RP.mjs";
-import "../../chunk-UB4YBFOT.mjs";
-import "../../chunk-7TAGGLNY.mjs";
+import "../../chunk-7J3KVOTS.mjs";
+import "../../chunk-6K3E5BVO.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
-import "../../chunk-WFMFC7R6.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
-import "../../chunk-2SDYFOZL.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+import "../../chunk-2PKM7SLZ.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-2SDYFOZL.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   breadcrumb_default as Breadcrumb

package/dist/components/button/button.mjs

@@ -1,15 +1,15 @@
 "use client";
 import {
   button_default
-} from "../../chunk-UB4YBFOT.mjs";
+} from "../../chunk-7J3KVOTS.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-2SDYFOZL.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   button_default as default

package/dist/components/button/icon-button.mjs

@@ -1,15 +1,15 @@
 "use client";
 import {
   icon_button_default
-} from "../../chunk-7TAGGLNY.mjs";
+} from "../../chunk-6K3E5BVO.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-2SDYFOZL.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   icon_button_default as default

package/dist/components/button/index.mjs

@@ -5,22 +5,22 @@ import {
 } from "../../chunk-LPZOH3RP.mjs";
 import {
   button_default
-} from "../../chunk-UB4YBFOT.mjs";
+} from "../../chunk-7J3KVOTS.mjs";
 import {
   icon_button_default
-} from "../../chunk-7TAGGLNY.mjs";
+} from "../../chunk-6K3E5BVO.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
-import {
-  text_button_default
-} from "../../chunk-WFMFC7R6.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
-import "../../chunk-2SDYFOZL.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+import {
+  text_button_default
+} from "../../chunk-2PKM7SLZ.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-2SDYFOZL.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   button_default as Button,

package/dist/components/button/text-button.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   text_button_default
-} from "../../chunk-WFMFC7R6.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
+} from "../../chunk-2PKM7SLZ.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   text_button_default as default

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

@@ -0,0 +1,66 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+type AreaData = {
+    name: string;
+    value: number;
+};
+type Props = {
+    areaData?: AreaData[];
+    classNames?: SlotsToClasses<AreaChartSlots>;
+};
+type AreaChartProps = Props & AreaChartVariantProps;
+declare const AreaChartComponent: react.ForwardRefExoticComponent<Props & AreaChartVariantProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const areaChartStyle: tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, undefined, {
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, undefined, unknown, unknown, undefined>>;
+type AreaChartVariantProps = VariantProps<typeof areaChartStyle>;
+type AreaChartSlots = keyof ReturnType<typeof areaChartStyle>;
+
+export { type AreaChartProps, AreaChartComponent as default };

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

@@ -0,0 +1,66 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+type AreaData = {
+    name: string;
+    value: number;
+};
+type Props = {
+    areaData?: AreaData[];
+    classNames?: SlotsToClasses<AreaChartSlots>;
+};
+type AreaChartProps = Props & AreaChartVariantProps;
+declare const AreaChartComponent: react.ForwardRefExoticComponent<Props & AreaChartVariantProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const areaChartStyle: tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, undefined, {
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            color: string[];
+            _colorValue: string;
+        };
+        danger: {
+            color: string[];
+            _colorValue: string;
+        };
+    };
+}, {
+    base: never[];
+    color: never[];
+    axis: string[];
+}, undefined, unknown, unknown, undefined>>;
+type AreaChartVariantProps = VariantProps<typeof areaChartStyle>;
+type AreaChartSlots = keyof ReturnType<typeof areaChartStyle>;
+
+export { type AreaChartProps, AreaChartComponent as default };