@lotte-innovate/ui-component-test 0.1.32 → 0.1.34

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/Avatar/index.js

@@ -52,7 +52,7 @@ 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 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: 300, "aria-hidden": "true", children: fallbackText })] })));
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

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/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/PieChart/index.d.ts

@@ -1,25 +1,22 @@
 import { VariantProps } from 'class-variance-authority';
+import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface PieChartProps extends VariantProps<typeof PieVariants> {
     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 PieVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const PieChart: ({ labels, datasets, scaling, className, appearance, isColorMixed, ...rest }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const PieChart: {
+    ({ labels, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default PieChart;

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

@@ -41,7 +41,7 @@ var PieVariants = cva('', {
     },
 });
 var PieChart = 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 PieChart = function (_a) {
     datasets.forEach(function (dataset, index) {
         datasets[index] = __assign(__assign({}, dataset), { backgroundColor: getChartColor(isColorMixed, appearance), borderColor: getChartColor(isColorMixed, 'solid') });
     });
-    return (_jsx(Pie, __assign({ data: { labels: labels, datasets: datasets }, className: cn(PieVariants({ scaling: scaling }), className) }, rest)));
+    return (_jsx(Pie, __assign({ data: { labels: labels, datasets: datasets }, options: {
+            plugins: {
+                title: title,
+                legend: legend,
+                datalabels: datalabels,
+            },
+        }, className: cn(PieVariants({ scaling: scaling }), className) }, rest)));
 };
+PieChart.displayName = 'PieChart';
 export default PieChart;

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

@@ -45,7 +45,7 @@ export var Root = React.forwardRef(function (_a, ref) {
 });
 Root.displayName = 'Select.Root';
 export var Trigger = React.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.appearance, appearance = _b === void 0 ? 'surface' : _b, color = _a.color, size = _a.size, radius = _a.radius, children = _a.children, className = _a.className, props = __rest(_a, ["appearance", "color", "size", "radius", "children", "className"]);
+    var _b = _a.appearance, appearance = _b === void 0 ? 'classic' : _b, color = _a.color, size = _a.size, radius = _a.radius, children = _a.children, className = _a.className, props = __rest(_a, ["appearance", "color", "size", "radius", "children", "className"]);
     if (!color)
         color = 'red';
     return (_jsx(SelectTheme.Trigger, __assign({ ref: forwardedRef, variant: appearance, radius: radius, className: cn(selectVariants({ radius: radius }), selectAppearanceStyle(appearance, color), className) }, props, { children: children })));

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

@@ -65,7 +65,7 @@ export var ToggleSwitch = React.forwardRef(function (_a, forwardedRef) {
         sizeTheme = '1';
     if (size === 'large')
         sizeTheme = '3';
-    return (_jsx(Theme, { className: "flex", accentColor: color, hasBackground: false, children: _jsxs(Text, { as: "label", className: cn('flex items-center', SwitchLabelVariants({ size: size, scaling: scaling })), children: [_jsx(SwitchTheme, __assign({ ref: forwardedRef }, switchProps, { variant: appearance, radius: radius, size: sizeTheme, color: color, className: cn(toggleSwitchVariants({ scaling: scaling, radius: radius, size: size }), className) })), children] }) }));
+    return (_jsx(Theme, { className: "flex", accentColor: color, hasBackground: false, children: _jsxs(Text, { as: "label", className: cn('flex items-center', SwitchLabelVariants({ size: size, scaling: scaling })), children: [_jsx(SwitchTheme, __assign({ ref: forwardedRef }, switchProps, { variant: appearance, radius: radius, size: sizeTheme, color: color, className: cn(toggleSwitchVariants({ scaling: scaling, radius: radius, size: size }), className), "aria-label": "Switch", "aria-labelledby": "Switch" })), children] }) }));
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 export default ToggleSwitch;

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

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 declare const tooltipVariants: (props?: ({
-    scaling?: number | typeof Symbol.iterator | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | typeof Symbol.unscopables | "map" | "filter" | "fill" | "values" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
+    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | "map" | "filter" | "fill" | "values" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
     weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
     radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;

package/dist/lib/constants.d.ts

@@ -173,6 +173,52 @@ export declare const commonArgTypes: {
             summary: string;
         };
     };
+    isColorMixed: {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        description: string;
+        control: string;
+        defaultValue: {
+            summary: string;
+        };
+    };
+    chartAppearance: {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        options: string[];
+        control: string;
+        defaultValue: {
+            summary: string;
+        };
+        description: string;
+    };
+    datasets: {
+        name: string;
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    labels: {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
 };
 export declare const chartColorStyle: () => Record<string, string>;
 export declare const chartTitleArgTypes: {
@@ -381,6 +427,37 @@ export declare const chartLegendArgTypes: {
             summary: string;
         };
     };
+    'legend.labels.usePointStyle': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        defaultValue: {
+            summary: string;
+        };
+    };
+    'legend.labels.pointStyle': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        options: (string | boolean)[];
+        defaultValue: {
+            summary: string;
+        };
+    };
 };
 export declare const chartDatasetsArgsTypes: {
     'datasets[n].data': {
@@ -491,6 +568,80 @@ export declare const chartDatasetsArgsTypes: {
             };
         };
     };
+    'datasets[n].borderDash': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].borderDashOffset': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].offset': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].weight': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+};
+export declare const chartDatalabelsArgsTypes: {
+    datalabels: {
+        table: {
+            disable: boolean;
+        };
+    };
+    'datalabels.display': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        defaultValue: {
+            summary: boolean;
+        };
+    };
+    'datalabels.color': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        options: string[];
+        defaultValue: {
+            summary: string;
+        };
+    };
 };
 export declare const blackText: string[];
 export declare const primaryColorStyle: () => Record<string, string>;