@lotte-innovate/ui-component-test 0.1.33 → 0.1.35

package/dist/lib/Typography/Text/index.js

@@ -26,7 +26,7 @@ import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
 import { textColorStyle, weightVariants } from '../../../lib/constants';
 import { cn } from '../../../lib/utils/utils';
-var textVariants = cva('text', {
+var textVariants = cva('', {
     variants: {
         weight: __assign({ light: 'font-light' }, weightVariants),
         color: textColorStyle(),

package/dist/lib/color/dark.js

@@ -63,7 +63,7 @@ export var redDark = {
     6: '#72232d',
     7: '#8c333a',
     8: '#b54548',
-    9: '#e5484d',
+    9: '#da291c',
     10: '#ec5d5e',
     11: '#ff9592',
     12: '#ffd1d9',

package/dist/lib/color/light.js

@@ -64,9 +64,9 @@ export var red = {
     6: '#fdbdbe',
     7: '#f4a9aa',
     8: '#eb8e90',
-    9: '#e5484d',
-    10: '#dc3e42',
-    11: '#ce2c31',
+    9: '#da291c',
+    10: '#b52217',
+    11: '#881a11',
     12: '#641723',
 };
 export var ruby = {

package/dist/lib/components/AlertDialog/AlertDialogAction.js

@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
-export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal", {
+export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal w-fit", {
     variants: {
         radius: {
             none: 'rounded-none',
@@ -37,10 +37,10 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
             full: 'rounded-full',
         },
         size: {
-            small: 'text-xs h-[24px] px-2',
-            medium: 'text-sm h-[32px] px-3',
-            large: 'text-sm h-[32px] px-3',
-            'x-large': 'text-base h-[40px] px-4',
+            small: 'text-xs min-w-[40px] h-[24px] px-2',
+            medium: 'text-sm min-w-[50px] h-[32px] px-3',
+            large: 'text-sm min-w-[50px] h-[32px] px-3',
+            'x-large': 'text-base min-w-[62px] h-[40px] px-4',
         },
         weight: __assign({}, weightVariants),
         color: primaryColorStyle(),

package/dist/lib/components/AlertDialog/AlertDialogCancel.js

@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, weightVariants } from '../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
-export var alertDialogCancelVariants = cva("inline-flex justify-center items-center outline-none", {
+export var alertDialogCancelVariants = cva("inline-flex justify-center items-center outline-none w-fit", {
     variants: {
         radius: {
             none: 'rounded-none',
@@ -37,10 +37,10 @@ export var alertDialogCancelVariants = cva("inline-flex justify-center items-cen
             full: 'rounded-full',
         },
         size: {
-            small: 'text-xs h-[24px] px-2 mr-2',
-            medium: 'text-sm h-[32px] px-3 mr-2',
-            large: 'text-sm h-[32px] px-3 mr-3',
-            'x-large': 'text-base h-[40px] px-4 mr-3',
+            small: 'text-xs min-w-[40px] h-[24px] px-2 mr-2',
+            medium: 'text-sm min-w-[50px] h-[32px] px-3 mr-2',
+            large: 'text-sm min-w-[50px] h-[32px] px-3 mr-3',
+            'x-large': 'text-base min-w-[62px] h-[40px] px-4 mr-3',
         },
         weight: __assign({}, weightVariants),
     },

package/dist/lib/components/AlertDialog/AlertDialogTrigger.js

@@ -44,7 +44,7 @@ var buttonVariants = cva("inline-flex items-center transition-colors focus:outli
         scaling: '100%',
         weight: 'medium',
         color: 'red',
-        size: 'large',
+        size: 'medium',
     },
 });
 export var AlertDialogTrigger = forwardRef(function (_a, ref) {

package/dist/lib/components/Avatar/index.d.ts

@@ -9,6 +9,7 @@ export interface AvatarProps extends VariantProps<typeof AvatarVariants> {
     ariaLabel?: string;
     ariaLabelledby?: string;
     title?: string;
+    delayMs?: number;
 }
 declare const AvatarVariants: (props?: ({
     radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;

package/dist/lib/components/Avatar/index.js

@@ -50,9 +50,9 @@ var AvatarVariants = cva('font-medium', {
     },
 });
 var Avatar = forwardRef(function (_a, ref) {
-    var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title"]);
+    var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, _d = _a.delayMs, delayMs = _d === void 0 ? 300 : _d, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title", "delayMs"]);
     var imgAltText = alt || ariaLabel || fallbackText || 'Avatar Image';
-    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className) }, props, { ref: ref, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full object-cover border-none", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: 300, "aria-hidden": "true", children: fallbackText })] })));
+    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className) }, props, { ref: ref, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full border-none object-cover", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: delayMs, "aria-hidden": "true", children: fallbackText })] })));
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/lib/components/Badge/index.js

@@ -25,7 +25,7 @@ import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, weightVariants, } from '../../../lib/constants';
-var BadgeVariants = cva('inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+var BadgeVariants = cva('inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
         size: {

package/dist/lib/components/BarChart/index.d.ts

@@ -1,71 +1,27 @@
 import { VariantProps } from 'class-variance-authority';
-import { PointStyle } from '../../../lib/types';
+import { IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface BorderRadius {
     topLeft: number;
     topRight: number;
     bottomLeft: number;
     bottomRight: number;
 }
+type IBarchartDataset = IChartDatasets & {
+    data: {
+        x: number;
+        y: number;
+        r: number;
+    }[];
+    barThickness?: number;
+    barPercentage?: number;
+};
 export interface BarChartProps extends VariantProps<typeof barChartVariants> {
     labels?: string[];
     isColorMixed?: boolean;
     appearance?: 'solid' | 'soft';
-    title?: {
-        text?: string | string[];
-        display?: boolean;
-        position?: 'top' | 'right' | 'bottom' | 'left';
-        align?: 'start' | 'center' | 'end';
-        font?: {
-            size?: number;
-            weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-            lineHeight?: number;
-        };
-    };
-    legend?: {
-        display?: boolean;
-        align?: 'start' | 'center' | 'end';
-        position?: 'top' | 'right' | 'bottom' | 'left';
-        maxHeight?: number;
-        maxWidth?: number;
-        fullSize?: boolean;
-        reverse?: boolean;
-        labels?: {
-            boxWidth?: number;
-            boxHeight?: number;
-            padding?: number;
-            textAlign?: 'left' | 'right' | 'center';
-            color?: string;
-            usePointStyle?: boolean;
-            pointStyleWidth?: number;
-            useBorderRadius?: boolean;
-            borderRadius?: number;
-        };
-        rtl?: boolean;
-        textDirection?: 'rtl' | 'ltr';
-        title?: {
-            color?: string;
-            display?: boolean;
-            padding?: number;
-            text?: string;
-        };
-    };
-    datasets: {
-        label: string;
-        data: {
-            x: number;
-            y: number;
-            r: number;
-        }[];
-        backgroundColor?: string[];
-        borderColor?: string[];
-        borderWidth?: number;
-        hoverBackgroundColor?: string;
-        hoverBorderColor?: string;
-        hoverBorderWidth?: number;
-        pointStyle?: PointStyle;
-        barThickness?: number;
-        barPercentage?: number;
-    }[];
+    title?: IChartTitle;
+    legend?: IChartLegend;
+    datasets: IBarchartDataset[];
     indexAxis?: 'x' | 'y';
     className?: string;
     width?: string | number;

package/dist/lib/components/BarChart/index.js

@@ -27,6 +27,7 @@ import { scalingVariants } from '../../../lib/constants';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { chartAlphaColorList, chartColorList } from '../../../lib/color/constants';
+import { useDarkMode } from '../../../lib/utils/useDarkMode';
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
 var barChartVariants = cva('', {
     variants: {
@@ -38,6 +39,7 @@ var barChartVariants = cva('', {
 });
 var BarChart = function (_a) {
     var className = _a.className, title = _a.title, datasets = _a.datasets, labels = _a.labels, scaling = _a.scaling, legend = _a.legend, width = _a.width, height = _a.height, indexAxis = _a.indexAxis, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "datasets", "labels", "scaling", "legend", "width", "height", "indexAxis", "appearance", "isColorMixed"]);
+    var _d = useDarkMode(), isDark = _d[0], defaultScales = _d[1];
     datasets.forEach(function (dataset, index) {
         if (!dataset.backgroundColor) {
             if (isColorMixed) {
@@ -54,6 +56,7 @@ var BarChart = function (_a) {
                 legend: legend,
             },
             indexAxis: indexAxis,
+            scales: __assign({}, defaultScales.linescale),
         }, className: cn(barChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
 };
 BarChart.displayName = 'BarChart';

package/dist/lib/components/BubbleChart/index.d.ts

@@ -1,35 +1,28 @@
-import { PointStyle } from '../../../lib/types';
 import { VariantProps } from 'class-variance-authority';
-export interface BubbleChartProps extends VariantProps<typeof bubbleChartVariants> {
-    datasets: {
-        label: string;
-        data: {
-            x: number;
-            y: number;
-            r: number;
-        }[];
-        backgroundColor?: string;
-        borderColor?: string;
-        borderWidth?: number;
-        hoverBackgroundColor?: string;
-        hoverBorderColor?: string;
-        hoverBorderWidth?: number;
-        pointStyle?: PointStyle;
-        rotation?: number;
-        radius?: number;
-        order?: number;
+import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
+type IBubbleChartDataset = IChartDatasets & {
+    data: {
+        x: number;
+        y: number;
+        r: number;
     }[];
-    options?: {};
+};
+export interface BubbleChartProps extends VariantProps<typeof bubbleChartVariants> {
+    appearance?: 'solid' | 'soft';
+    isColorMixed?: boolean;
     className?: string;
+    title?: IChartTitle;
+    legend?: IChartLegend;
+    datasets: IBubbleChartDataset[];
+    datalabels?: IChartDataLabels;
     width?: string | number;
     height?: string | number;
-    isColorMixed?: boolean;
 }
 declare const bubbleChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const BubbleChart: {
-    ({ className, datasets, scaling, width, height, isColorMixed, ...props }: BubbleChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, title, legend, datalabels, datasets, scaling, width, height, appearance, isColorMixed, ...props }: BubbleChartProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default BubbleChart;

package/dist/lib/components/BubbleChart/index.js

@@ -22,12 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Bubble } from 'react-chartjs-2';
-import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js/auto';
+import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend, plugins, } from 'chart.js/auto';
 import { scalingVariants } from '../../../lib/constants';
 import { cva } from 'class-variance-authority';
-import { chartColorList } from '../../../lib/color/constants';
+import { chartColorList, chartAlphaColorList } from '../../../lib/color/constants';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useDarkMode } from '../../../lib/utils/useDarkMode';
 import { cn } from '../../../lib/utils/utils';
-ChartJS.register(LinearScale, PointElement, Tooltip, Legend);
+ChartJS.register(LinearScale, PointElement, Tooltip, Legend, plugins, ChartDataLabels);
+ChartJS.defaults.set('plugins.datalabels', {
+    display: false,
+});
 var bubbleChartVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -37,18 +42,32 @@ var bubbleChartVariants = cva('', {
     },
 });
 export var BubbleChart = function (_a) {
-    var className = _a.className, datasets = _a.datasets, scaling = _a.scaling, width = _a.width, height = _a.height, _b = _a.isColorMixed, isColorMixed = _b === void 0 ? true : _b, props = __rest(_a, ["className", "datasets", "scaling", "width", "height", "isColorMixed"]);
-    if (isColorMixed) {
-        datasets.forEach(function (dataset, index) {
-            dataset.backgroundColor = chartColorList.mixed[index];
-        });
-    }
-    else {
-        datasets.forEach(function (dataset, index) {
-            dataset.backgroundColor = chartColorList.sorting[index];
-        });
-    }
-    return (_jsx(Bubble, __assign({ data: { datasets: datasets }, className: cn(bubbleChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
+    var className = _a.className, title = _a.title, legend = _a.legend, datalabels = _a.datalabels, datasets = _a.datasets, scaling = _a.scaling, width = _a.width, height = _a.height, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "legend", "datalabels", "datasets", "scaling", "width", "height", "appearance", "isColorMixed"]);
+    var _d = useDarkMode(), isDark = _d[0], defaultScales = _d[1];
+    var getChartColor = function (isColorMixed, appearance) {
+        if (appearance === 'solid') {
+            return isColorMixed ? chartColorList.mixed : chartColorList.sorting;
+        }
+        if (appearance === 'soft') {
+            return isColorMixed ? chartAlphaColorList.mixed : chartAlphaColorList.sorting;
+        }
+    };
+    datasets.forEach(function (dataset, index) {
+        var ChartColor = getChartColor(isColorMixed, appearance);
+        var BorderColor = getChartColor(isColorMixed, 'solid');
+        if (!ChartColor || !BorderColor)
+            return;
+        dataset.backgroundColor = ChartColor[index];
+        dataset.borderColor = BorderColor[index];
+    });
+    return (_jsx(Bubble, __assign({ data: { datasets: datasets }, options: {
+            plugins: {
+                title: title,
+                legend: legend,
+                datalabels: datalabels,
+            },
+            scales: __assign({}, defaultScales.linescale),
+        }, className: cn(bubbleChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
 };
 BubbleChart.displayName = 'BubbleChart';
 export default BubbleChart;

package/dist/lib/components/Callout/CalloutIcon.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Callout as CalloutTheme } from '@radix-ui/themes';
 import { VariantProps } from 'class-variance-authority';
 export interface CalloutIconProps extends VariantProps<typeof calloutIconVariants> {
     iconType?: 'danger' | 'success' | 'warning' | 'information';
@@ -8,5 +9,5 @@ declare const calloutIconVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     color?: "danger" | "warning" | "success" | "information" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const CalloutIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & CalloutIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CalloutIcon: React.ForwardRefExoticComponent<Omit<CalloutTheme.IconProps & React.RefAttributes<HTMLDivElement>, "ref"> & CalloutIconProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/lib/components/Callout/CalloutRoot.js

@@ -36,10 +36,10 @@ var calloutVariants = cva('flex w-fit max-w-[600px]', {
         },
         scaling: __assign({}, scalingVariants),
         color: {
-            danger: 'bg-red-3 dark:bg-redDark-3',
-            warning: 'bg-amber-3 dark:bg-amberDark-3',
-            success: 'bg-green-3 dark:bg-greenDark-3',
-            information: 'bg-sky-3 dark:bg-skyDark-3',
+            danger: 'bg-redA-3 dark:bg-redDarkA-3',
+            warning: 'bg-amberA-3 dark:bg-amberDarkA-3',
+            success: 'bg-greenA-3 dark:bg-greenDarkA-3',
+            information: 'bg-skyA-3 dark:bg-skyDarkA-3',
         },
     },
     defaultVariants: {

package/dist/lib/components/Callout/CalloutText.js

@@ -25,7 +25,7 @@ import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { useCalloutContext } from './CalloutRoot';
-export var calloutTextVariants = cva('break-words font-normal text-slate-12 dark:text-slateDark-12 ', {
+export var calloutTextVariants = cva('break-words font-normal text-slate-12 dark:text-slateDark-12', {
     variants: {
         size: {
             small: 'text-sm',

package/dist/lib/components/Callout/index.d.ts

@@ -2,6 +2,6 @@
 declare const Callout: {
     Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("./CalloutRoot").CalloutProps & import("react").RefAttributes<HTMLDivElement>>;
     Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("./CalloutText").CalloutTextProps & import("react").RefAttributes<HTMLParagraphElement>>;
-    Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("./CalloutIcon").CalloutIconProps & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/callout").IconProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./CalloutIcon").CalloutIconProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default Callout;

package/dist/lib/components/CheckboxGroup/CheckboxGroupRoot.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { CheckboxGroup as CheckboxGroupTheme } from '@radix-ui/themes';
 import { CheckboxVariants } from '../../../lib/components/Checkbox';
 import { VariantProps } from 'class-variance-authority';
 import { IAppearance, IColor } from '../../../lib/types';
@@ -12,5 +13,5 @@ export declare const CheckboxGroupVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const useCheckboxGroupContext: () => CheckboxGroupRootProps;
-export declare const CheckboxGroupRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & CheckboxGroupRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroupRoot: React.ForwardRefExoticComponent<Omit<CheckboxGroupTheme.RootProps & React.RefAttributes<HTMLDivElement>, "ref"> & CheckboxGroupRootProps & React.RefAttributes<HTMLDivElement>>;
 export default CheckboxGroupRoot;

package/dist/lib/components/CheckboxGroup/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const CheckboxGroup: {
-    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("./CheckboxGroupRoot").CheckboxGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/checkbox-group").RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./CheckboxGroupRoot").CheckboxGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-checkbox").CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../../lib/components/Checkbox").CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default CheckboxGroup;

package/dist/lib/components/DoughnutChart/index.d.ts

@@ -1,25 +1,22 @@
 import { VariantProps } from 'class-variance-authority';
+import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface DoughnutChartProps extends VariantProps<typeof doughnutVariants> {
     labels?: string[];
-    datasets: {
-        label?: string;
-        data: number[];
-        backgroundColor?: string[];
-        borderColor?: string[];
-        borderWidth?: number;
-        borderDash?: number[];
-        borderDashOffset?: number;
-        offset?: number;
-        spacing?: number;
-        weight?: number;
-    }[];
-    options?: {};
-    className?: string;
     appearance?: 'solid' | 'soft';
     isColorMixed?: boolean;
+    className?: string;
+    title?: IChartTitle;
+    legend?: IChartLegend;
+    datasets: IChartDatasets[] & {
+        data: number[];
+    }[];
+    datalabels?: IChartDataLabels;
 }
 declare const doughnutVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const DoughnutChart: ({ labels, datasets, scaling, className, appearance, isColorMixed, ...rest }: DoughnutChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const DoughnutChart: {
+    ({ labels, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: DoughnutChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default DoughnutChart;

package/dist/lib/components/DoughnutChart/index.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Doughnut } from 'react-chartjs-2';
-import { Chart as ChartJS, ArcElement, Tooltip, Legend, plugins } from 'chart.js';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, plugins } from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
@@ -41,7 +41,7 @@ var doughnutVariants = cva('', {
     },
 });
 var DoughnutChart = function (_a) {
-    var labels = _a.labels, datasets = _a.datasets, scaling = _a.scaling, className = _a.className, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, rest = __rest(_a, ["labels", "datasets", "scaling", "className", "appearance", "isColorMixed"]);
+    var labels = _a.labels, title = _a.title, legend = _a.legend, datasets = _a.datasets, datalabels = _a.datalabels, scaling = _a.scaling, className = _a.className, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, rest = __rest(_a, ["labels", "title", "legend", "datasets", "datalabels", "scaling", "className", "appearance", "isColorMixed"]);
     var getChartColor = function (isColorMixed, appearance) {
         if (appearance === 'solid') {
             return isColorMixed ? chartColorList.mixed : chartColorList.sorting;
@@ -53,6 +53,13 @@ var DoughnutChart = function (_a) {
     datasets.forEach(function (dataset, index) {
         datasets[index] = __assign(__assign({}, dataset), { backgroundColor: getChartColor(isColorMixed, appearance), borderColor: getChartColor(isColorMixed, 'solid') });
     });
-    return (_jsx(Doughnut, __assign({ data: { labels: labels, datasets: datasets }, className: cn(doughnutVariants({ scaling: scaling }), className) }, rest)));
+    return (_jsx(Doughnut, __assign({ data: { labels: labels, datasets: datasets }, options: {
+            plugins: {
+                title: title,
+                legend: legend,
+                datalabels: datalabels,
+            },
+        }, className: cn(doughnutVariants({ scaling: scaling }), className) }, rest)));
 };
+DoughnutChart.displayName = 'DoughnutChart';
 export default DoughnutChart;

package/dist/lib/components/LineChart/index.d.ts

@@ -1,67 +1,23 @@
 import { VariantProps } from 'class-variance-authority';
-import { PointStyle } from '../../../lib/types';
+import { IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface BorderRadius {
     topLeft: number;
     topRight: number;
     bottomLeft: number;
     bottomRight: number;
 }
+type ILinechartDataset = IChartDatasets & {
+    data: any;
+    barThickness?: number;
+    barPercentage?: number;
+};
 export interface LineChartProps extends VariantProps<typeof lineChartVariants> {
     labels?: string[];
     isColorMixed?: boolean;
     appearance?: 'solid' | 'soft';
-    title?: {
-        text?: string | string[];
-        display?: boolean;
-        position?: 'top' | 'right' | 'bottom' | 'left';
-        align?: 'start' | 'center' | 'end';
-        font?: {
-            size?: number;
-            weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-            lineHeight?: number;
-        };
-    };
-    legend?: {
-        display?: boolean;
-        align?: 'start' | 'center' | 'end';
-        position?: 'top' | 'right' | 'bottom' | 'left';
-        maxHeight?: number;
-        maxWidth?: number;
-        fullSize?: boolean;
-        reverse?: boolean;
-        labels?: {
-            boxWidth?: number;
-            boxHeight?: number;
-            padding?: number;
-            textAlign?: 'left' | 'right' | 'center';
-            color?: string;
-            usePointStyle?: boolean;
-            pointStyleWidth?: number;
-            useBorderRadius?: boolean;
-            borderRadius?: number;
-        };
-        rtl?: boolean;
-        textDirection?: 'rtl' | 'ltr';
-        title?: {
-            color?: string;
-            display?: boolean;
-            padding?: number;
-            text?: string;
-        };
-    };
-    datasets: {
-        label: string;
-        data: any;
-        backgroundColor?: string | string[];
-        borderColor?: string | string[];
-        borderWidth?: number;
-        hoverBackgroundColor?: string;
-        hoverBorderColor?: string;
-        hoverBorderWidth?: number;
-        pointStyle?: PointStyle;
-        barThickness?: number;
-        barPercentage?: number;
-    }[];
+    title?: IChartTitle;
+    legend?: IChartLegend;
+    datasets: ILinechartDataset[];
     scales?: {
         x?: {
             min?: number;

package/dist/lib/components/LineChart/index.js

@@ -27,6 +27,7 @@ import { scalingVariants } from '../../../lib/constants';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { chartAlphaColorList, chartColorList } from '../../../lib/color/constants';
+import { useDarkMode } from '../../../lib/utils/useDarkMode';
 ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Legend);
 var lineChartVariants = cva('', {
     variants: {
@@ -38,6 +39,7 @@ var lineChartVariants = cva('', {
 });
 var LineChart = function (_a) {
     var className = _a.className, title = _a.title, datasets = _a.datasets, labels = _a.labels, scaling = _a.scaling, legend = _a.legend, width = _a.width, height = _a.height, indexAxis = _a.indexAxis, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, scales = _a.scales, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "datasets", "labels", "scaling", "legend", "width", "height", "indexAxis", "appearance", "scales", "isColorMixed"]);
+    var _d = useDarkMode(), isDark = _d[0], defaultScales = _d[1];
     var colorset = isColorMixed ? chartColorList.mixed : chartColorList.sorting;
     var colorAlphaset = isColorMixed ? chartAlphaColorList.mixed : chartAlphaColorList.sorting;
     datasets.forEach(function (dataset, index) {
@@ -52,7 +54,7 @@ var LineChart = function (_a) {
                 legend: legend,
             },
             indexAxis: indexAxis,
-            scales: scales,
+            scales: __assign(__assign({}, defaultScales.linescale), scales),
         }, className: cn(lineChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
 };
 LineChart.displayName = 'LineChart';

package/dist/lib/components/Menubar/MenubarMenu.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const MenubarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+export declare const MenubarMenu: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarMenuProps & {
+    __scopeMenubar?: import("@radix-ui/react-context").Scope;
+} & React.RefAttributes<never>>;

package/dist/lib/components/Menubar/MenubarRoot.js

@@ -54,7 +54,7 @@ export var useMenubarContext = function () {
 export var MenubarRoot = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'ghost' : _c, _d = _a.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance", "itemAppearance"]);
     var contextValue = useMemo(function () { return ({ radius: radius, size: size, scaling: scaling, color: color, appearance: appearance, itemAppearance: itemAppearance }); }, [radius, size, scaling, color, appearance, itemAppearance]);
-    var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), 'w-fit', className);
+    var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), className);
     return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx(MenubarPrimitive.Root, __assign({ ref: ref, className: menuClassName }, props, { children: children })) }));
 });
 MenubarRoot.displayName = 'Menubar.Root';