@lotte-innovate/ui-component-test 0.1.44 → 0.1.45

package/dist/lib/color/constants.js

@@ -1,6 +1,7 @@
 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',
     'olive',
     'sand',
@@ -29,6 +30,7 @@ export var colorOptions = [
     'yellow',
     'amber',
     'orange',
+    // 'white',
 ];
 export var alphaColorOptions = [
     'slateA',

package/dist/lib/color/light.js

@@ -1,3 +1,4 @@
+// 기본 그레이 색상
 export var slate = {
     1: '#fcfcfd',
     2: '#f9f9fb',

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VariantProps } from 'class-variance-authority';
 import { IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface BorderRadius {
@@ -31,7 +32,7 @@ declare const barChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const BarChart: {
-    ({ className, title, datasets, labels, scaling, legend, width, height, indexAxis, appearance, isColorMixed, ...props }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, title, datasets, labels, scaling, legend, width, height, indexAxis, appearance, isColorMixed, ...props }: BarChartProps): import("react").JSX.Element;
     displayName: string;
 };
 export default BarChart;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 type IBubbleChartDataset = IChartDatasets & {
@@ -22,7 +23,7 @@ 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, title, legend, datalabels, datasets, scaling, width, height, appearance, isColorMixed, ...props }: BubbleChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, title, legend, datalabels, datasets, scaling, width, height, appearance, isColorMixed, ...props }: BubbleChartProps): React.JSX.Element;
     displayName: string;
 };
 export default BubbleChart;

package/dist/lib/components/Dialog/DialogRoot.d.ts

@@ -10,6 +10,6 @@ export interface DialogProps extends VariantProps<typeof dialogContentVariants>,
 }
 export declare const DialogContext: React.Context<DialogProps>;
 export declare const DialogRoot: {
-    ({ children, radius, size, scaling, color, ...props }: ComponentPropsWithoutRef<typeof DialogTheme.Root> & DialogProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, radius, size, scaling, color, ...props }: ComponentPropsWithoutRef<typeof DialogTheme.Root> & DialogProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const Dialog: {
     Root: {
-        ({ children, radius, size, scaling, color, ...props }: import("@radix-ui/themes/dist/cjs/components/dialog").RootProps & import("./DialogRoot").DialogProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, radius, size, scaling, color, ...props }: import("@radix-ui/themes/dist/cjs/components/dialog").RootProps & import("./DialogRoot").DialogProps): import("react").JSX.Element;
         displayName: string;
     };
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/dialog").TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface DoughnutChartProps extends VariantProps<typeof doughnutVariants> {
@@ -16,7 +17,7 @@ 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, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: DoughnutChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ labels, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: DoughnutChartProps): React.JSX.Element;
     displayName: string;
 };
 export default DoughnutChart;

package/dist/lib/components/DropdownMenu/DropdownMenuRoot.d.ts

@@ -10,6 +10,6 @@ export interface DropdownMenuProps extends VariantProps<typeof dropdownMenuConte
 }
 export declare const DropdownMenuContext: React.Context<DropdownMenuProps>;
 export declare const DropdownMenuRoot: {
-    ({ children, radius, size, scaling, color, appearance, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> & DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, radius, size, scaling, color, appearance, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> & DropdownMenuProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const DropdownMenu: {
     Root: {
-        ({ children, radius, size, scaling, color, appearance, ...props }: import("@radix-ui/react-dropdown-menu").DropdownMenuProps & import("./DropdownMenuRoot").DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, radius, size, scaling, color, appearance, ...props }: import("@radix-ui/react-dropdown-menu").DropdownMenuProps & import("./DropdownMenuRoot").DropdownMenuProps): import("react").JSX.Element;
         displayName: string;
     };
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./DropdownMenuTrigger").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/HoverCard/HoverCardRoot.d.ts

@@ -6,6 +6,6 @@ export interface HoverCardProps extends VariantProps<typeof hoverCardContentVari
 }
 export declare const HoverCardContext: React.Context<HoverCardProps>;
 export declare const HoverCardRoot: {
-    ({ children, radius, size, scaling, weight, color, ...props }: ComponentPropsWithoutRef<typeof HoverCardTheme.Root> & HoverCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, radius, size, scaling, weight, color, ...props }: ComponentPropsWithoutRef<typeof HoverCardTheme.Root> & HoverCardProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const HoverCard: {
     Root: {
-        ({ children, radius, size, scaling, weight, color, ...props }: import("@radix-ui/themes/dist/cjs/components/hover-card").RootProps & import("./HoverCardRoot").HoverCardProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, radius, size, scaling, weight, color, ...props }: import("@radix-ui/themes/dist/cjs/components/hover-card").RootProps & import("./HoverCardRoot").HoverCardProps): import("react").JSX.Element;
         displayName: string;
     };
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/hover-card").TriggerProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VariantProps } from 'class-variance-authority';
 import { IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface BorderRadius {
@@ -37,7 +38,7 @@ declare const lineChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const LineChart: {
-    ({ className, title, datasets, labels, scaling, legend, width, height, indexAxis, appearance, scales, isColorMixed, ...props }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, title, datasets, labels, scaling, legend, width, height, indexAxis, appearance, scales, isColorMixed, ...props }: LineChartProps): import("react").JSX.Element;
     displayName: string;
 };
 export default LineChart;

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"), 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 })) }));
 });
 MenubarRoot.displayName = 'Menubar.Root';

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

@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, scalingVariants } from '../../../lib/constants';
 import { useMenubarContext } from './MenubarRoot';
-export var menubarTriggerVariants = cva("flex items-center justify-between gap-[2px] outline-none select-none leading-none py-1 px-3 \n    font-medium truncate w-fit", {
+export var menubarTriggerVariants = cva("flex items-center justify-between gap-[2px] outline-none select-none leading-none py-1 px-3 font-medium", {
     variants: {
         size: {
             small: 'text-xs',

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 export interface PieChartProps extends VariantProps<typeof PieVariants> {
@@ -16,7 +17,7 @@ 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, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ labels, title, legend, datasets, datalabels, scaling, className, appearance, isColorMixed, ...rest }: PieChartProps): React.JSX.Element;
     displayName: string;
 };
 export default PieChart;

package/dist/lib/components/Popover/PopoverRoot.d.ts

@@ -7,6 +7,6 @@ export interface PopoverProps extends VariantProps<typeof popoverContentVariants
 }
 export declare const PopoverContext: React.Context<PopoverProps>;
 export declare const PopoverRoot: {
-    ({ children, radius, size, scaling, ...props }: ComponentPropsWithoutRef<typeof PopoverTheme.Root> & PopoverProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, radius, size, scaling, ...props }: ComponentPropsWithoutRef<typeof PopoverTheme.Root> & PopoverProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const Popover: {
     Root: {
-        ({ children, radius, size, scaling, ...props }: import("@radix-ui/themes/dist/cjs/components/popover").RootProps & import("./PopoverRoot").PopoverProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, radius, size, scaling, ...props }: import("@radix-ui/themes/dist/cjs/components/popover").RootProps & import("./PopoverRoot").PopoverProps): import("react").JSX.Element;
         displayName: string;
     };
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/popover").TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IChartDataLabels, IChartDatasets, IChartLegend, IChartTitle } from '../../../lib/types';
 type IRadarChartDataset = IChartDatasets & {
@@ -26,7 +27,7 @@ declare const radarChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const RadarChart: {
-    ({ className, title, legend, datalabels, datasets, labels, width, height, scaling, appearance, isColorMixed, ...props }: RadarChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, title, legend, datalabels, datasets, labels, width, height, scaling, appearance, isColorMixed, ...props }: RadarChartProps): React.JSX.Element;
     displayName: string;
 };
 export default RadarChart;

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

@@ -29,6 +29,7 @@ import { Theme, Slider as SliderTheme } from '@radix-ui/themes';
 var sliderVariants = cva('relative flex items-center select-none touch-none w-[200px] h-5', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
+        // color: bgColorStyle(),
     },
 });
 export var Slider = React.forwardRef(function (_a, forwardedRef) {

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

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// your-tooltip.jsx
 import React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';

package/dist/lib/components/index.js

@@ -1,3 +1,4 @@
+// Component
 export { default as Accordion } from './Accordion';
 export { default as AlertDialog } from './AlertDialog';
 export { default as AspectRatio } from './AspectRatio';
@@ -42,6 +43,7 @@ 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';
+// Chart
 export { default as BarChart } from './BarChart';
 export { default as BubbleChart } from './BubbleChart';
 export { default as RadarChart } from './RadarChart';

package/dist/lib/constants.js

@@ -14,6 +14,7 @@ export var appearanceOptions = [
     'solid',
     'surface',
 ];
+//차트
 export var labelPositionList = ['top', 'bottom', 'left', 'right'];
 export var pointStyleList = [
     'circle',
@@ -29,6 +30,7 @@ export var pointStyleList = [
     false,
 ];
 export var radiusVariants = {
+    // 체크박스
     small: {
         none: 'rounded-none',
         small: 'rounded-[3px]',
@@ -36,20 +38,23 @@ export var radiusVariants = {
         large: 'rounded',
         full: 'rounded',
     },
+    // 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션
     base: {
         none: 'rounded-none',
         small: 'rounded-[3px]',
-        medium: 'rounded',
-        large: 'rounded-md',
+        medium: 'rounded', // 4px
+        large: 'rounded-md', // 6px
         full: 'rounded-full',
     },
+    // 배너
     large: {
         none: 'rounded-none',
         small: 'rounded',
-        medium: 'rounded-lg',
-        large: 'rounded-xl',
-        full: 'rounded-2xl',
+        medium: 'rounded-lg', // 8px
+        large: 'rounded-xl', // 12px
+        full: 'rounded-2xl', // 16px
     },
+    // 다이얼로그, 바텀시트, 그리드, 카드
     'extra-large': {
         none: 'rounded-none',
         small: 'rounded',
@@ -57,6 +62,7 @@ export var radiusVariants = {
         large: 'rounded-xl',
         full: 'rounded-xl',
     },
+    // Dropdown, Context Menu 아이템
     'menu-item': {
         none: 'rounded-none',
         small: 'rounded-[1px]',
@@ -66,10 +72,10 @@ export var radiusVariants = {
     },
 };
 export var weightVariants = {
-    regular: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
+    regular: 'font-normal', // 400
+    medium: 'font-medium', // 500
+    semibold: 'font-semibold', // 600
+    bold: 'font-bold', // 700
 };
 export var scalingVariants = {
     '90%': 'scale-90',
@@ -78,6 +84,7 @@ export var scalingVariants = {
     '105%': 'scale-105',
     '110%': 'scale-110',
 };
+// 스토리북 공통 argTypes 설정
 export var commonArgTypes = {
     typoSize: {
         table: {

package/dist/lib/utils/utils.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+// tailwind를 merge할 때 발생할 수 있는 클래스 충돌 문제 해결
 export function cn() {
     var inputs = [];
     for (var _i = 0; _i < arguments.length; _i++) {

package/dist/tailwind.config.js

@@ -27,14 +27,16 @@ 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 = ['fill', 'border', 'bg', 'text'];
+    var classPrefixes = ['accent', 'fill', 'border', 'outline', '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',
@@ -44,6 +46,7 @@ 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',
@@ -66,7 +69,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([], 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),
+    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),
     theme: {
         extend: {
             fontFamily: {
@@ -77,6 +80,7 @@ var config = {
                 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
             },
             colors: __assign(__assign(__assign({ danger: '#C40006', warning: '#AB6400', success: '#00713F', information: '#00749E' }, formatColors(lightColors)), formatColors(darkColors)), formatColors(alphaColors)),
+            // radix tailwind
             keyframes: {
                 overlayShow: {
                     from: { opacity: '0' },
@@ -119,6 +123,10 @@ var config = {
     ],
     darkMode: 'class',
 };
+/**
+ * tailwind 방식으로 변경
+ * ex) bg-yellow-3
+ */
 function formatColors(colors) {
     var formatcolors = {};
     for (var _i = 0, _a = Object.entries(colors); _i < _a.length; _i++) {