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

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

@@ -25,9 +25,14 @@ import { cva } from 'class-variance-authority';
 import { scalingVariants } from '../../../lib/constants';
 import { Radar } from 'react-chartjs-2';
 import { cn } from '../../../lib/utils/utils';
-import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, } from 'chart.js/auto';
-import { chartColorList } from '../../../lib/color/constants';
-ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
+import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, plugins, } from 'chart.js/auto';
+import { chartColorList, chartAlphaColorList } from '../../../lib/color/constants';
+import { useDarkMode } from '../../../lib/utils/useDarkMode';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, plugins, ChartDataLabels);
+ChartJS.defaults.set('plugins.datalabels', {
+    display: false,
+});
 var radarChartVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -37,18 +42,35 @@ var radarChartVariants = cva('', {
     },
 });
 export var RadarChart = function (_a) {
-    var className = _a.className, labels = _a.labels, datasets = _a.datasets, width = _a.width, height = _a.height, scaling = _a.scaling, _b = _a.isColorMixed, isColorMixed = _b === void 0 ? true : _b, props = __rest(_a, ["className", "labels", "datasets", "width", "height", "scaling", "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(Radar, __assign({ data: { labels: labels, datasets: datasets }, className: cn(radarChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
+    var className = _a.className, title = _a.title, legend = _a.legend, datalabels = _a.datalabels, datasets = _a.datasets, labels = _a.labels, width = _a.width, height = _a.height, scaling = _a.scaling, _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", "labels", "width", "height", "scaling", "appearance", "isColorMixed"]);
+    var _d = useDarkMode(true), 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(Radar, __assign({ data: { labels: labels, datasets: datasets }, options: {
+            plugins: {
+                title: title,
+                legend: legend,
+                datalabels: datalabels,
+            },
+            scales: __assign({ r: {
+                    suggestedMin: 50,
+                    suggestedMax: 100,
+                } }, defaultScales.linescale),
+        }, className: cn(radarChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
 };
 RadarChart.displayName = 'RadarChart';
 export default RadarChart;

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

@@ -3,7 +3,6 @@ import { VariantProps } from 'class-variance-authority';
 import { IScaling } from '../../../lib/types';
 export interface RadioProps extends VariantProps<typeof radioVariants> {
     size?: any;
-    color?: any;
     scaling?: IScaling;
     appearance?: 'classic' | 'surface' | 'soft';
 }

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

@@ -39,7 +39,9 @@ var radioVariants = cva('font-normal', {
     },
 });
 export var Radio = React.forwardRef(function (_a, ref) {
-    var value = _a.value, scaling = _a.scaling, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.appearance, appearance = _d === void 0 ? 'surface' : _d, children = _a.children, className = _a.className, props = __rest(_a, ["value", "scaling", "color", "size", "appearance", "children", "className"]);
+    var value = _a.value, scaling = _a.scaling, color = _a.color, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'surface' : _c, children = _a.children, className = _a.className, props = __rest(_a, ["value", "scaling", "color", "size", "appearance", "children", "className"]);
+    if (!color)
+        color = 'red';
     var sizeTheme = '2';
     if (size === 'small')
         sizeTheme = '1';

package/dist/lib/components/RadioCards/RadioCardsItem.js

@@ -26,7 +26,7 @@ import { cva } from 'class-variance-authority';
 import { RadioCards as RadioCardsTheme } from '@radix-ui/themes';
 import { cn } from '../../../lib/utils/utils';
 import { RadioCardsContext } from './RadioCardsRoot';
-export var radioCardsItemVariants = cva('bg-white dark:bg-slateDark-1 text-slateA-12 dark:text-slateDarkA-12 border-slateA-6 dark:border-slateDarkA-6 font-normal disabled:text-slateA-9 dark:disabled:text-slateDarkA-9', {
+export var radioCardsItemVariants = cva('min-w-[200px] bg-white dark:bg-slateDark-1 text-slateA-12 dark:text-slateDarkA-12 border-slateA-6 dark:border-slateDarkA-6 font-normal disabled:text-slateA-9 dark:disabled:text-slateDarkA-9', {
     variants: {
         radius: {
             none: 'rounded-none before:rounded-none after:rounded-none',

package/dist/lib/components/RadioCards/RadioCardsRoot.d.ts

@@ -3,7 +3,6 @@ import { VariantProps } from 'class-variance-authority';
 import { RadioCards as RadioCardsTheme } from '@radix-ui/themes';
 import { radioCardsItemVariants } from './RadioCardsItem';
 export interface RadioCardsProps extends VariantProps<typeof radioCardsVariants>, VariantProps<typeof radioCardsItemVariants> {
-    color?: any;
     appearance?: 'classic' | 'surface';
 }
 declare const radioCardsVariants: (props?: ({

package/dist/lib/components/RadioGroup/RadioGroupRoot.d.ts

@@ -3,7 +3,6 @@ import { RadioGroup as RadioGroupTheme } from '@radix-ui/themes';
 import { VariantProps } from 'class-variance-authority';
 import { IScaling } from '../../../lib/types';
 export interface RadioGroupProps extends VariantProps<typeof radioGroupVariants> {
-    color?: any;
     scaling?: IScaling;
     size?: 'small' | 'medium' | 'large';
     appearance?: 'classic' | 'surface' | 'soft';

package/dist/lib/components/Toggle/ToggleWithText.d.ts

@@ -18,4 +18,4 @@ export declare const IconScaling: {
     large: string;
 };
 export declare const ToggleWithText: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleWithTextProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export default ToggleWithText;

package/dist/lib/components/Toggle/ToggleWithText.js

@@ -55,3 +55,4 @@ export var ToggleWithText = forwardRef(function (_a, ref) {
             }), text] })));
 });
 ToggleWithText.displayName = 'ToggleWithText';
+export default ToggleWithText;

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), "aria-label": "Switch", "aria-labelledby": "Switch" })), 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" })), children] }) }));
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 export default ToggleSwitch;

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

@@ -11,7 +11,6 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 declare const tooltipVariants: (props?: ({
-    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/components/Tooltip/index.js

@@ -26,17 +26,16 @@ import React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
-import { primaryColorStyle, radiusVariants, scalingOptions, weightVariants } from '../../../lib/constants';
+import { primaryColorStyle, radiusVariants, weightVariants } from '../../../lib/constants';
 var tooltipVariants = cva('bg-slate-12 text-slate-1 dark:bg-slateDark-12 dark:text-slateDark-1 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-[4px] px-[9px] py-[6px] text-[12px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]', {
     variants: {
-        scaling: __assign({}, scalingOptions),
         weight: __assign({}, weightVariants),
         radius: __assign({}, radiusVariants['extra-large']),
         color: primaryColorStyle(),
     },
 });
 var Tooltip = React.forwardRef(function (_a, ref) {
-    var content = _a.content, scaling = _a.scaling, weight = _a.weight, color = _a.color, radius = _a.radius, children = _a.children, defaultOpen = _a.defaultOpen, open = _a.open, className = _a.className, side = _a.side, onOpenChange = _a.onOpenChange, props = __rest(_a, ["content", "scaling", "weight", "color", "radius", "children", "defaultOpen", "open", "className", "side", "onOpenChange"]);
+    var content = _a.content, weight = _a.weight, color = _a.color, radius = _a.radius, children = _a.children, defaultOpen = _a.defaultOpen, open = _a.open, className = _a.className, side = _a.side, onOpenChange = _a.onOpenChange, props = __rest(_a, ["content", "weight", "color", "radius", "children", "defaultOpen", "open", "className", "side", "onOpenChange"]);
     if (!side)
         side = 'top';
     if (radius === 'full')
@@ -44,7 +43,7 @@ var Tooltip = React.forwardRef(function (_a, ref) {
     var arrowColor = color
         ? "fill-".concat(color, "-9 dark:fill-").concat(color, "Dark-9")
         : 'fill-slate-12 dark:fill-slateDark-12';
-    return (_jsx(TooltipPrimitive.Provider, { children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { className: "cursor-pointer text-slate-12 dark:text-slateDark-12", asChild: true, children: children }), _jsxs(TooltipPrimitive.Content, __assign({ align: "center" }, props, { side: side, className: cn('mr-2', tooltipVariants({ scaling: scaling, weight: weight, radius: radius, color: color }), className), sideOffset: 5, children: [content, _jsx(TooltipPrimitive.Arrow, { width: 11, height: 5, className: arrowColor })] }))] }) }));
+    return (_jsx(TooltipPrimitive.Provider, { children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { className: "cursor-pointer text-slate-12 dark:text-slateDark-12", asChild: true, children: children }), _jsxs(TooltipPrimitive.Content, __assign({ align: "center" }, props, { side: side, className: cn('mr-2', tooltipVariants({ weight: weight, radius: radius, color: color }), className), sideOffset: 5, children: [content, _jsx(TooltipPrimitive.Arrow, { width: 11, height: 5, className: arrowColor })] }))] }) }));
 });
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

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

@@ -38,6 +38,7 @@ export { default as TextArea } from './TextArea';
 export { default as TextField } from './TextField';
 export { default as Toast } from './Toast';
 export { default as Toggle } from './Toggle';
+export { default as ToggleWithText } from './Toggle/ToggleWithText';
 export { default as ToggleGroup } from './ToggleGroup';
 export { default as ToggleSwitch } from './ToggleSwitch';
 export { default as Tooltip } from './Tooltip';

package/dist/lib/components/index.js

@@ -39,6 +39,7 @@ export { default as TextArea } from './TextArea';
 export { default as TextField } from './TextField';
 export { default as Toast } from './Toast';
 export { default as Toggle } from './Toggle';
+export { default as ToggleWithText } from './Toggle/ToggleWithText';
 export { default as ToggleGroup } from './ToggleGroup';
 export { default as ToggleSwitch } from './ToggleSwitch';
 export { default as Tooltip } from './Tooltip';

package/dist/lib/types.d.ts

@@ -35,6 +35,7 @@ export type IChartLegend = {
         textAlign?: 'left' | 'right' | 'center';
         color?: string;
         usePointStyle?: boolean;
+        pointStyle?: PointStyle;
         pointStyleWidth?: number;
         useBorderRadius?: boolean;
         borderRadius?: number;
@@ -53,6 +54,7 @@ export type IChartDatasets = {
     backgroundColor?: string[] | string;
     borderColor?: string[] | string;
     borderWidth?: number;
+    borderRadius?: number;
     borderDash?: number[];
     borderDashOffset?: number;
     hoverBackgroundColor?: string;
@@ -62,8 +64,18 @@ export type IChartDatasets = {
     offset?: number;
     spacing?: number;
     weight?: number;
+    order?: number;
+    hidden?: boolean;
 };
 export type IChartDataLabels = {
     display?: boolean;
     color?: string;
+    align?: 'start' | 'center' | 'end' | number;
+    backgroundColor?: string | ((context: any) => string);
+    borderColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    font?: object;
+    formatter?: (x: number) => number;
+    padding?: number;
 };

package/dist/lib/utils/useDarkMode.d.ts

@@ -0,0 +1 @@
+export declare const useDarkMode: (isRAxes?: boolean) => any[];

package/dist/lib/utils/useDarkMode.js

@@ -0,0 +1,49 @@
+import { slateA, slateDarkA } from '../../lib/color/alpha';
+import { useEffect, useState } from 'react';
+export var useDarkMode = function (isRAxes) {
+    if (isRAxes === void 0) { isRAxes = false; }
+    var lightmode = {};
+    var darkmode = {};
+    if (isRAxes === true) {
+        lightmode = {
+            r: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            r: { grid: { color: slateDarkA[8] }, ticks: { backdropColor: 'rgba(0, 0, 0, 0)' } },
+        };
+    }
+    else {
+        lightmode = {
+            x: { grid: { color: slateA[8] } },
+            y: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            x: { grid: { color: slateDarkA[8] } },
+            y: { grid: { color: slateDarkA[8] } },
+        };
+    }
+    var _a = useState(checkDarkMode()), isDarkMode = _a[0], setIsDarkMode = _a[1];
+    var _b = useState({
+        linescale: {},
+    }), defaultOptions = _b[0], setDefaultOptions = _b[1];
+    function checkDarkMode() {
+        return document.body.classList.contains('dark');
+    }
+    useEffect(function () {
+        setIsDarkMode(checkDarkMode());
+        setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+        var mutationObserver = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'class') {
+                    setIsDarkMode(checkDarkMode());
+                    setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+                }
+            });
+        });
+        mutationObserver.observe(document.body, { attributes: true });
+        return function () {
+            mutationObserver.disconnect();
+        };
+    }, []);
+    return [isDarkMode, defaultOptions];
+};

package/dist/tailwind.config.js

@@ -27,16 +27,14 @@ var darkClasses = [];
 var colorScale = Array.from({ length: 12 }, function (_, i) { return (i + 1).toString(); });
 var allColorOptions = [colorOptions, alphaColorOptions];
 var generateClasses = function (colorList, colorScale) {
-    var classPrefixes = ['accent', 'fill', 'border', 'outline', 'bg', 'text'];
+    var classPrefixes = ['fill', 'border', 'bg', 'text'];
     return colorList.flatMap(function (color) {
         return colorScale.flatMap(function (scale) { return classPrefixes.map(function (prefix) { return "".concat(prefix, "-").concat(color, "-").concat(scale); }); });
     });
 };
 var generateDarkClasses = function (colorList, colorScale) {
     var classPrefixes = [
-        'dark:accent',
         'dark:fill',
-        'dark:outline',
         'dark:border',
         'dark:bg',
         'dark:text',
@@ -46,7 +44,6 @@ var generateDarkClasses = function (colorList, colorScale) {
         'dark:active:bg',
         'dark:active:border',
         'dark:active:text',
-        'dark:before:checked:bg',
         'dark:data-[state=on]:bg',
         'dark:data-[state=open]:bg',
         'dark:data-[state=on]:text',
@@ -69,7 +66,7 @@ var config = {
         './src/stories/**/*.{js,ts,jsx,tsx,mdx,zip}',
         './src/**/*.{js,ts,jsx,tsx,mdx,zip}',
     ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], classes, true), classes.map(function (cls) { return "hover:".concat(cls); }), true), classes.map(function (cls) { return "active:".concat(cls); }), true), classes.map(function (cls) { return "before:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=checked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=unchecked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:hover:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), classes.map(function (cls) { return "after:checked:".concat(cls); }), true), classes.map(function (cls) { return "before:checked:".concat(cls); }), true), darkClasses, true),
+    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], classes, true), classes.map(function (cls) { return "hover:".concat(cls); }), true), classes.map(function (cls) { return "active:".concat(cls); }), true), classes.map(function (cls) { return "before:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=checked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=unchecked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), darkClasses, true),
     theme: {
         extend: {
             fontFamily: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "private": false,
   "type": "module",
   "files": [
@@ -76,8 +76,8 @@
     "@radix-ui/themes": "^3.1.1",
     "@stitches/core": "^1.2.8",
     "@stitches/react": "^1.2.8",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addons": "^7.6.17",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
     "chart.js": "^4.4.4",
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
@@ -102,14 +102,14 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^1.2.25",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-links": "^8.0.4",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/blocks": "^8.0.4",
-    "@storybook/nextjs": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/test": "^8.0.4",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/nextjs": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@storybook/theming": "^8.2.4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -123,7 +123,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "rimraf": "^6.0.1",
-    "storybook": "^8.2.6",
+    "storybook": "^8.3.5",
     "tailwindcss": "^3.3.0",
     "tsc-alias": "^1.8.10",
     "typescript": "^5"