@lotte-innovate/ui-component-test 0.1.12 → 0.1.13

package/dist/globals.css

@@ -33607,10 +33607,6 @@ video {
   height: 36px;
 }
 
-.h-\[400px\] {
-  height: 400px;
-}
-
 .h-\[40px\] {
   height: 40px;
 }

package/dist/lib/color/constants.d.ts

@@ -18,3 +18,12 @@ export declare const alphaOptions: {
 };
 export declare const ColorStyle: Record<string, string>;
 export declare const DarkColorStyle: Record<string, string>;
+export declare const chartColorList: {
+    sorting: string[];
+    mixed: string[];
+};
+export declare const chartAlphaColorList: {
+    sorting: string[];
+    mixed: string[];
+};
+export declare const chartColorOptions: IColor[];

package/dist/lib/color/constants.js

@@ -1,3 +1,5 @@
+import { blue, crimson, teal, orange, purple, amber, slate, cyan, red, grass, brown, indigo, plum, yellow, sky, lime, } from './light';
+import { blueA, crimsonA, tealA, orangeA, purpleA, amberA, slateA, cyanA, redA, grassA, brownA, indigoA, plumA, yellowA, skyA, limeA, } from './alpha';
 export var colorOptions = [
     // 'black',
     'slate',
@@ -198,3 +200,97 @@ export var DarkColorStyle = {
     amberDark: 'amberDark-9',
     orangeDark: 'orangeDark-9',
 };
+export var chartColorList = {
+    sorting: [
+        crimson[9],
+        orange[9],
+        amber[9],
+        teal[9],
+        blue[9],
+        purple[9],
+        slate[9],
+        red[9],
+        brown[9],
+        yellow[9],
+        lime[9],
+        grass[9],
+        sky[9],
+        cyan[9],
+        indigo[9],
+        plum[9],
+    ],
+    mixed: [
+        blue[9],
+        crimson[9],
+        teal[9],
+        orange[9],
+        purple[9],
+        amber[9],
+        slate[9],
+        cyan[9],
+        red[9],
+        grass[9],
+        brown[9],
+        indigo[9],
+        plum[9],
+        yellow[9],
+        sky[9],
+        lime[9],
+    ],
+};
+export var chartAlphaColorList = {
+    sorting: [
+        crimsonA[2],
+        orangeA[2],
+        amberA[2],
+        tealA[2],
+        blueA[2],
+        purpleA[2],
+        slateA[2],
+        redA[2],
+        brownA[2],
+        yellowA[2],
+        limeA[2],
+        grassA[2],
+        skyA[2],
+        cyanA[2],
+        indigoA[2],
+        plumA[2],
+    ],
+    mixed: [
+        blueA[2],
+        crimsonA[2],
+        tealA[2],
+        orangeA[2],
+        purpleA[2],
+        amberA[2],
+        slateA[2],
+        cyanA[2],
+        redA[2],
+        grassA[2],
+        brownA[2],
+        indigoA[2],
+        plumA[2],
+        yellowA[2],
+        skyA[2],
+        limeA[2],
+    ],
+};
+export var chartColorOptions = [
+    'blue',
+    'crimson',
+    'teal',
+    'orange',
+    'purple',
+    'amber',
+    'slate',
+    'cyan',
+    'red',
+    'grass',
+    'brown',
+    'indigo',
+    'plum',
+    'yellow',
+    'sky',
+    'lime',
+];

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

@@ -25,7 +25,7 @@ import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { radiusVariants, weightVariants, primaryColorStyle, appearanceStyle, scalingVariants, } from '../../../lib/constants';
-var buttonVariants = cva("inline-flex items-center transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8 justify-center", {
+var buttonVariants = cva("inline-flex items-center w-fit transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8 justify-center", {
     variants: {
         radius: __assign({}, radiusVariants['base']),
         size: {

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

@@ -27,7 +27,7 @@ import Checkbox from '../../../lib/components/Checkbox';
 import { Label } from '../../../lib/components/Label';
 import { cn } from '../../../lib/utils/utils';
 import { scalingVariants } from '../../../lib/constants';
-export var CheckboxCardVariants = cva("flex justify-between space-x-2 min-w-[200px] border border-slate-7 text-slate-12\n    hover:border-slate-8 hover:cursor-pointer aria-disabled:bg-slate-3 aria-disabled:cursor-not-allowed aria-disabled:text-slateA-9\n    dark:border-slateDark-6 dark:text-slateDark-12 dark:hover:border-slateDark-7\n    dark:aria-disabled:bg-slateDark-3 dark:aria-disabled:text-slateDarkA-8", {
+export var CheckboxCardVariants = cva("flex justify-between space-x-2 w-fit min-w-[200px] border border-slate-7 text-slate-12\n    hover:border-slate-8 hover:cursor-pointer aria-disabled:bg-slate-3 aria-disabled:cursor-not-allowed aria-disabled:text-slateA-9\n    dark:border-slateDark-6 dark:text-slateDark-12 dark:hover:border-slateDark-7\n    dark:aria-disabled:bg-slateDark-3 dark:aria-disabled:text-slateDarkA-8", {
     variants: {
         radius: {
             none: 'rounded-none',

package/dist/lib/components/ContextMenu/ContextMenuTrigger.js

@@ -26,6 +26,6 @@ import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { cn } from '../../../lib/utils/utils';
 export var ContextMenuTrigger = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsx(ContextMenuPrimitive.Trigger, __assign({ ref: ref, className: cn("block border-2 border-dashed text-slate-12 dark:text-slateDark-12 rounded text-base \n          select-none py-[45px] w-[300px] text-center", className) }, props, { children: children })));
+    return (_jsx(ContextMenuPrimitive.Trigger, __assign({ ref: ref, className: cn("flex text-slate-12 dark:text-slateDark-12 text-base text-center", className) }, props, { children: children })));
 });
 ContextMenuTrigger.displayName = 'ContextMenuTrigger';

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

@@ -4,7 +4,7 @@ export interface DoughnutChartProps extends VariantProps<typeof doughnutVariants
     datasets: {
         label?: string;
         data: number[];
-        backgroundColor: string[];
+        backgroundColor?: string[];
         borderColor?: string[];
         borderWidth?: number;
         borderDash?: number[];
@@ -15,9 +15,11 @@ export interface DoughnutChartProps extends VariantProps<typeof doughnutVariants
     }[];
     options?: {};
     className?: string;
+    appearance?: 'solid' | 'soft';
+    isColorMixed?: boolean;
 }
 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, ...rest }: DoughnutChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const DoughnutChart: ({ labels, datasets, scaling, className, appearance, isColorMixed, ...rest }: DoughnutChartProps) => import("react/jsx-runtime").JSX.Element;
 export default DoughnutChart;

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

@@ -27,6 +27,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { scalingVariants } from '../../../lib/constants';
+import { chartColorList, chartAlphaColorList } from '../../../lib/color/constants';
 ChartJS.register(ArcElement, Tooltip, Legend, plugins, ChartDataLabels);
 ChartJS.defaults.set('plugins.datalabels', {
     display: false,
@@ -40,7 +41,27 @@ var doughnutVariants = cva('', {
     },
 });
 var DoughnutChart = function (_a) {
-    var labels = _a.labels, datasets = _a.datasets, scaling = _a.scaling, className = _a.className, rest = __rest(_a, ["labels", "datasets", "scaling", "className"]);
+    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"]);
+    if (appearance === 'solid') {
+        if (isColorMixed) {
+            datasets[0].backgroundColor = chartColorList.mixed;
+            datasets[0].borderColor = chartColorList.mixed;
+        }
+        else {
+            datasets[0].backgroundColor = chartColorList.sorting;
+            datasets[0].borderColor = chartColorList.sorting;
+        }
+    }
+    if (appearance === 'soft') {
+        if (isColorMixed) {
+            datasets[0].backgroundColor = chartAlphaColorList.mixed;
+            datasets[0].borderColor = chartColorList.mixed;
+        }
+        else {
+            datasets[0].backgroundColor = chartAlphaColorList.sorting;
+            datasets[0].borderColor = chartColorList.sorting;
+        }
+    }
     return (_jsx(Doughnut, __assign({ data: { labels: labels, datasets: datasets }, className: cn(doughnutVariants({ scaling: scaling }), className) }, rest)));
 };
 export default DoughnutChart;

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

@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { scalingVariants } from '../../../lib/constants';
 import { useMenubarContext } from '.';
-export var menubarContentVariants = cva("p-[5px] bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n  shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n  [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
+export var menubarContentVariants = cva("p-[5px] w-fit bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n  shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n  [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
     variants: {
         radius: {
             none: 'rounded-none',

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

@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { radiusVariants } from '../../../lib/constants';
 import { useMenubarContext } from '.';
-export var menubarSubContentVariants = cva("p-[5px] bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n  shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n  [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
+export var menubarSubContentVariants = cva("p-[5px] w-fit bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n  shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n  [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
     variants: {
         radius: __assign({}, radiusVariants['extra-large']),
         size: {

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

@@ -66,7 +66,7 @@ export var useMenubarContext = function () {
 export var Menubar = 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 = { radius: radius, size: size, scaling: scaling, color: color, appearance: appearance, itemAppearance: itemAppearance };
-    var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), className);
+    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);
     return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx(MenubarPrimitive.Root, __assign({ ref: ref, className: menuClassName }, props, { children: children })) }));
 });
 Menubar.displayName = 'Menubar';

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

@@ -4,7 +4,7 @@ export interface PieChartProps extends VariantProps<typeof PieVariants> {
     datasets: {
         label?: string;
         data: number[];
-        backgroundColor: string[];
+        backgroundColor?: string[];
         borderColor?: string[];
         borderWidth?: number;
         borderDash?: number[];
@@ -15,9 +15,11 @@ export interface PieChartProps extends VariantProps<typeof PieVariants> {
     }[];
     options?: {};
     className?: string;
+    appearance?: 'solid' | 'soft';
+    isColorMixed?: boolean;
 }
 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, ...rest }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const PieChart: ({ labels, datasets, scaling, className, appearance, isColorMixed, ...rest }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default PieChart;

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

@@ -27,6 +27,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { scalingVariants } from '../../../lib/constants';
+import { chartColorList, chartAlphaColorList } from '../../../lib/color/constants';
 ChartJS.register(ArcElement, Tooltip, Legend, plugins, ChartDataLabels);
 ChartJS.defaults.set('plugins.datalabels', {
     display: false,
@@ -40,7 +41,27 @@ var PieVariants = cva('', {
     },
 });
 var PieChart = function (_a) {
-    var labels = _a.labels, datasets = _a.datasets, scaling = _a.scaling, className = _a.className, rest = __rest(_a, ["labels", "datasets", "scaling", "className"]);
+    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"]);
+    if (appearance === 'solid') {
+        if (isColorMixed) {
+            datasets[0].backgroundColor = chartColorList.mixed;
+            datasets[0].borderColor = chartColorList.mixed;
+        }
+        else {
+            datasets[0].backgroundColor = chartColorList.sorting;
+            datasets[0].borderColor = chartColorList.sorting;
+        }
+    }
+    if (appearance === 'soft') {
+        if (isColorMixed) {
+            datasets[0].backgroundColor = chartAlphaColorList.mixed;
+            datasets[0].borderColor = chartColorList.mixed;
+        }
+        else {
+            datasets[0].backgroundColor = chartAlphaColorList.sorting;
+            datasets[0].borderColor = chartColorList.sorting;
+        }
+    }
     return (_jsx(Pie, __assign({ data: { labels: labels, datasets: datasets }, className: cn(PieVariants({ scaling: scaling }), className) }, rest)));
 };
 export default PieChart;

package/dist/lib/constants.d.ts

@@ -7,6 +7,7 @@ export declare const weightOptions: IWeight[];
 export declare const themeOptions: ITheme[];
 export declare const appearanceOptions: IAppearance[];
 export declare const labelPositionList: string[];
+export declare const pointStyleList: (string | boolean)[];
 export declare const radiusVariants: {
     small: {
         none: string;
@@ -174,6 +175,7 @@ export declare const commonArgTypes: {
     };
 };
 export declare const blackText: string[];
+export declare const chartColorStyle: () => Record<string, string>;
 export declare const primaryColorStyle: () => Record<string, string>;
 export declare const bgColorStyle: () => Record<string, string>;
 export declare const textColorStyle: () => Record<string, string>;

package/dist/lib/constants.js

@@ -1,4 +1,5 @@
-import { ColorStyle, DarkColorStyle, colorOptions } from '../lib/color/constants';
+import { ColorStyle, DarkColorStyle, colorOptions, chartColorOptions } from '../lib/color/constants';
+import * as lightColors from '../lib/color/light';
 export var radiusOptions = ['none', 'small', 'medium', 'large', 'full'];
 export var typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 export var scalingOptions = ['90%', '95%', '100%', '105%', '110%'];
@@ -13,8 +14,21 @@ export var appearanceOptions = [
     'solid',
     'surface',
 ];
-//차트 label 위치
+//차트
 export var labelPositionList = ['top', 'bottom', 'left', 'right'];
+export var pointStyleList = [
+    'circle',
+    'cross',
+    'crossRot',
+    'dash',
+    'line',
+    'rect',
+    'rectRounded',
+    'rectRot',
+    'star',
+    'triangle',
+    false,
+];
 export var radiusVariants = {
     // 체크박스
     small: {
@@ -144,6 +158,14 @@ export var commonArgTypes = {
     },
 };
 export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
+export var chartColorStyle = function () {
+    var colorValues = lightColors;
+    var colorMappings = {};
+    chartColorOptions.forEach(function (color) {
+        colorMappings[color] = colorValues[color][9];
+    });
+    return colorMappings;
+};
 export var primaryColorStyle = function () {
     var color = {};
     for (var i in ColorStyle) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "type": "module",
   "files": [