@lotte-innovate/ui-component-test 0.0.16 → 0.0.17

package/dist/constants.js

@@ -1,569 +0,0 @@
-import { ColorStyle, DarkColorStyle, colorOptions } from 'color/constants';
-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%'];
-export var sizeOptions = ['x-small', 'small', 'medium', 'large', 'x-large'];
-export var weightOptions = ['regular', 'medium', 'semibold', 'bold'];
-export var themeOptions = ['light', 'dark'];
-export var appearanceOptions = [
-    'classic',
-    'ghost',
-    'outline',
-    'soft',
-    'solid',
-    'surface',
-];
-//차트 label 위치
-export var labelPositionList = ['top', 'bottom', 'left', 'right'];
-export var radiusVariants = {
-    // 체크박스
-    small: {
-        none: 'rounded-none',
-        small: 'rounded-[3px]',
-        medium: 'rounded',
-        large: 'rounded',
-        full: 'rounded',
-    },
-    // 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션
-    base: {
-        none: 'rounded-none',
-        small: 'rounded-[3px]',
-        medium: 'rounded', // 4px
-        large: 'rounded-md', // 6px
-        full: 'rounded-full',
-    },
-    // 배너
-    large: {
-        none: 'rounded-none',
-        small: 'rounded',
-        medium: 'rounded-lg', // 8px
-        large: 'rounded-xl', // 12px
-        full: 'rounded-2xl', // 16px
-    },
-    // 다이얼로그, 바텀시트, 그리드, 카드
-    'extra-large': {
-        none: 'rounded-none',
-        small: 'rounded',
-        medium: 'rounded-lg',
-        large: 'rounded-xl',
-        full: 'rounded-xl',
-    },
-    // Dropdown, Context Menu 아이템
-    'menu-item': {
-        none: 'rounded-none',
-        small: 'rounded-[1px]',
-        medium: 'rounded-sm',
-        large: 'rounded',
-        full: 'rounded',
-    },
-};
-export var weightVariants = {
-    regular: 'font-normal', // 400
-    medium: 'font-medium', // 500
-    semibold: 'font-semibold', // 600
-    bold: 'font-bold', // 700
-};
-export var scalingVariants = {
-    '90%': 'scale-90',
-    '95%': 'scale-95',
-    '100%': 'scale-100',
-    '105%': 'scale-105',
-    '110%': 'scale-110',
-};
-// 스토리북 공통 argTypes 설정
-export var commonArgTypes = {
-    typoSize: {
-        table: {
-            category: 'Theme Props',
-            type: { summary: '1 ~ 9' },
-        },
-        control: { type: 'select' },
-        options: typoSizeOptions,
-        defaultValue: { summary: '3' },
-    },
-    scaling: {
-        table: {
-            category: 'Theme Props',
-            type: { summary: scalingOptions.join(' | ') },
-        },
-        control: { type: 'select' },
-        options: scalingOptions,
-        defaultValue: { summary: '100%' },
-    },
-    weight: {
-        table: {
-            category: 'Theme Props',
-            type: { summary: weightOptions.join(' | ') },
-        },
-        options: weightOptions,
-        control: { type: 'select' },
-        defaultValue: { summary: 'medium' },
-    },
-    radius: {
-        table: {
-            category: 'Theme Props',
-            type: { summary: radiusOptions.join(' | ') },
-        },
-        options: radiusOptions,
-        control: { type: 'select' },
-        defaultValue: { summary: 'medium' },
-    },
-    color: {
-        table: {
-            category: 'Theme Props',
-            type: { summary: 'colorVariants' },
-        },
-        options: colorOptions,
-        control: { type: 'select' },
-        defaultValue: { summary: 'red' },
-    },
-    basicText: {
-        table: {
-            category: 'Props',
-            type: { summary: 'string' },
-        },
-        control: 'text',
-    },
-    appearance: {
-        table: {
-            category: 'Props',
-            type: { summary: appearanceOptions.join(' | ') },
-        },
-        options: appearanceOptions,
-        control: { type: 'select' },
-        defaultValue: { summary: 'solid' },
-    },
-    size: {
-        table: {
-            category: 'Props',
-            type: { summary: sizeOptions.join(' | ') },
-        },
-        control: { type: 'select' },
-        options: sizeOptions,
-        defaultValue: { summary: 'medium' },
-    },
-};
-export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
-export var primaryColorStyle = function () {
-    var color = {};
-    for (var i in ColorStyle) {
-        var darkColor = "".concat(i, "Dark");
-        color[i] = blackText.includes(i)
-            ? "bg-".concat(ColorStyle[i], " text-slate-12 dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-12")
-            : "bg-".concat(ColorStyle[i], " text-white dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-1");
-    }
-    return color;
-};
-export var bgColorStyle = function () {
-    var color = {};
-    for (var i in ColorStyle) {
-        var darkColor = "".concat(i, "Dark");
-        color[i] = "bg-".concat(ColorStyle[i], " dark:bg-").concat(DarkColorStyle[darkColor]);
-    }
-    return color;
-};
-export var textColorStyle = function () {
-    var color = {};
-    for (var i in ColorStyle) {
-        var darkColor = "".concat(i, "Dark");
-        color[i] = "text-".concat(ColorStyle[i], " dark:text-").concat(DarkColorStyle[darkColor]);
-    }
-    return color;
-};
-var makeClassName = function (type, isClickable) {
-    var className = '';
-    className += "".concat(type.light.default, " ").concat(type.dark.default);
-    if (isClickable) {
-        className += " ".concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
-    }
-    return className;
-};
-export var appearanceStyle = function (type, color, isClickable) {
-    if (isClickable === void 0) { isClickable = true; }
-    var darkColor = "".concat(color, "Dark");
-    var classic = {
-        light: {
-            default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 text-white shadow-button-classic"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white"),
-            active: "active:bg-".concat(color, "-9 active:border-").concat(color, "-9 active:text-white"),
-            disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:text-slateDark-1 dark:shadow-button-dark-classic"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1"),
-            active: "dark:active:bg-".concat(darkColor, "-9 dark:active:border-").concat(darkColor, "-9 dark:active:text-slateDark-1"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var solid = {
-        light: {
-            default: "bg-".concat(color, "-9 border-none text-white"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white"),
-            active: "active:bg-".concat(color, "-10 active:border-none active:text-white active:opacity-[.92]"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "-9 dark:text-slateDark-1"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1"),
-            active: "dark:active:bg-".concat(darkColor, "-10 dark:active:text-slateDark-1 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var soft = {
-        light: {
-            default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11"),
-            active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var surface = {
-        light: {
-            default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
-            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11 active:opacity-[.92]"),
-            disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var outline = {
-        light: {
-            default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
-            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
-            disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:border-".concat(darkColor, "A-8 dark:bg-transparent dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 ",
-        },
-    };
-    var ghost = {
-        light: {
-            default: "bg-transparent border-none text-".concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11"),
-            active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
-            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:text-slateDarkA-8",
-        },
-    };
-    switch (type) {
-        case 'classic':
-            return makeClassName(classic, isClickable);
-        case 'solid':
-            return makeClassName(solid, isClickable);
-        case 'soft':
-            return makeClassName(soft, isClickable);
-        case 'surface':
-            return makeClassName(surface, isClickable);
-        case 'outline':
-            return makeClassName(outline, isClickable);
-        case 'ghost':
-            return makeClassName(ghost, isClickable);
-        default:
-            return '';
-    }
-};
-export var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
-    if (isClickable === void 0) { isClickable = true; }
-    if (stateOn === void 0) { stateOn = ''; }
-    var darkColor = "".concat(color, "Dark");
-    var classic = {
-        light: {
-            default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 text-white shadow-button-classic"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-").concat(color, "-9 ").concat(stateOn, "hover:text-white"),
-            active: "".concat(stateOn, "bg-").concat(color, "-9 ").concat(stateOn, "border-").concat(color, "-9 ").concat(stateOn, "text-white"),
-            disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:text-slateDark-1"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "-9 ").concat(stateOn, "dark:hover:text-slateDark-1"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-9 dark:").concat(stateOn, "border-").concat(darkColor, "-9 dark:").concat(stateOn, "text-slateDark-1"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var solid = {
-        light: {
-            default: "bg-".concat(color, "-9 border-none text-white"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-white"),
-            active: "".concat(stateOn, "bg-").concat(color, "-10 ").concat(stateOn, "border-none ").concat(stateOn, "text-white ").concat(stateOn, "opacity-[.92]"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "-9 dark:text-slateDark-1"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:text-slateDark-1"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-10 dark:").concat(stateOn, "text-slateDark-1 dark:").concat(stateOn, "opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8",
-        },
-    };
-    var soft = {
-        light: {
-            default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-4 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
-            active: "".concat(stateOn, "bg-").concat(color, "A-5 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-4 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-5 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var surface = {
-        light: {
-            default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
-            active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
-            disable: "disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var outline = {
-        light: {
-            default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
-            active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11"),
-            disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:border-".concat(darkColor, "A-8 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
-            disable: "dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var ghost = {
-        light: {
-            default: "bg-transparent border-none text-".concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-3 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
-            active: "".concat(stateOn, "bg-").concat(color, "A-4 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
-            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-3 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-4 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
-            disable: "dark:disabled:text-slateDarkA-8",
-        },
-    };
-    switch (type) {
-        case 'classic':
-            return makeClassName(classic, isClickable);
-        case 'solid':
-            return makeClassName(solid, isClickable);
-        case 'soft':
-            return makeClassName(soft, isClickable);
-        case 'surface':
-            return makeClassName(surface, isClickable);
-        case 'outline':
-            return makeClassName(outline, isClickable);
-        case 'ghost':
-            return makeClassName(ghost, isClickable);
-        default:
-            return '';
-    }
-};
-export var menuItemAppearanceStyle = function (type, color) {
-    var appearanceStyle = '';
-    if (type === 'solid') {
-        appearanceStyle = "hover:bg-".concat(color, "-9 dark:hover:bg-").concat(color, "Dark-9 ");
-        appearanceStyle += blackText.includes(color)
-            ? "hover:text-slateA-11 dark:hover:text-white"
-            : "hover:text-white dark:hover:text-white";
-    }
-    if (type === 'soft') {
-        appearanceStyle = "hover:bg-".concat(color, "A-4 dark:hover-bg-").concat(color, "DarkA-4");
-    }
-    if (type === 'ghost') {
-        appearanceStyle = "hover:bg-".concat(color, "-3 dark:hover:bg-").concat(color, "Dark-3");
-    }
-    return appearanceStyle;
-};
-export var switchCheckedApperanceStyle = function (type, color) {
-    var softStyle = "data-[state=checked]:bg-".concat(color, "A-3  data-[state=unchecked]:bg-").concat(color, "A-2 ");
-    var surfaceStyle = "data-[state=checked]:bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 data-[state=unchecked]:bg-slateA-2 data-[state=unchecked]:bg-slateA-6 ");
-    var classicStyle = "data-[state=checked]:bg-".concat(color, "-9 text-white border border-solid border-").concat(color, "-9 shadow-custom-1 shadow-custom-2 shadow-custom-3 data-[state=unchecked]:border-slate-4 data-[state=unchecked]:bg-slateA-3 data-[state=unchecked]:text-slateA-8");
-    switch (type) {
-        case 'classic':
-            return classicStyle;
-        case 'soft':
-            return softStyle;
-        case 'surface':
-            return surfaceStyle;
-        default:
-            return '';
-    }
-};
-export var checkboxAppearanceStyle = function (type, color, indeterminate) {
-    var darkColor = "".concat(color, "Dark");
-    var surface = {
-        light: {
-            default: "border data-[state=unchecked]:bg-transparent data-[state=unchecked]:border-slateA-7\n        data-[state=checked]:bg-".concat(color, "-9 data-[state=checked]:border-none data-[state=checked]:text-slate-1"),
-            hover: "hover:data-[state=unchecked]:bg-transparent hover:data-[state=unchecked]:border-slateA-8\n        hover:data-[state=checked]:bg-".concat(color, "-10 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-white"),
-            active: "active:data-[state=unchecked]:bg-transparent active:data-[state=unchecked]:border-slateA-9\n        active:data-[state=checked]:bg-".concat(color, "-10 active:data-[state=checked]:border-none active:data-[state=checked]:text-white"),
-            disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-slateA-6\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-slateA-6 disabled:data-[state=checked]:text-slateA-8",
-        },
-        dark: {
-            default: "dark:data-[state=unchecked]:border-slateDarkA-7\n        dark:data-[state=checked]:bg-".concat(darkColor, "-9 dark:data-[state=checked]:text-#111113"),
-            hover: "dark:hover:data-[state=unchecked]:border-slateDarkA-8\n        dark:hover:data-[state=checked]:bg-".concat(darkColor, "-10 dark:hover:data-[state=checked]:text-#111113"),
-            active: "dark:active:data-[state=unchecked]:border-slateDarkA-9\n        dark:active:data-[state=checked]:bg-".concat(darkColor, "-10 dark:active:data-[state=checked]:text-#111113"),
-            disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3 dark:disabled:data-[state=unchecked]:border-slateDarkA-6\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:border-slateDarkA-6 dark:disabled:data-[state=checked]:text-slateDarkA-8",
-        },
-    };
-    var soft = {
-        light: {
-            default: "data-[state=unchecked]:bg-".concat(color, "A-5 data-[state=unchecked]:border-none\n        data-[state=checked]:bg-").concat(color, "A-5 data-[state=checked]:border-none data-[state=checked]:text-").concat(color, "-11"),
-            hover: "hover:data-[state=unchecked]:bg-".concat(color, "A-6 hover:data-[state=unchecked]:border-none\n        hover:data-[state=checked]:bg-").concat(color, "A-6 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-").concat(color, "-11"),
-            active: "active:data-[state=unchecked]:bg-".concat(color, "A-7 active:data-[state=unchecked]:border-none\n        active:data-[state=checked]:bg-").concat(color, "A-7 active:data-[state=checked]:border-none active:data-[state=checked]:text-").concat(color, "-11"),
-            disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-none\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-none disabled:data-[state=checked]:text-slateA-8",
-        },
-        dark: {
-            default: "dark:data-[state=unchecked]:bg-".concat(darkColor, "A-5\n        dark:data-[state=checked]:bg-").concat(darkColor, "A-5 dark:data-[state=checked]:text-").concat(darkColor, "-11"),
-            hover: "dark:hover:data-[state=unchecked]:bg-".concat(darkColor, "A-6\n        dark:hover:data-[state=checked]:bg-").concat(darkColor, "A-6 dark:hover:data-[state=checked]:text-").concat(darkColor, "-11"),
-            active: "dark:active:data-[state=unchecked]:bg-".concat(darkColor, "A-7\n        dark:active:data-[state=checked]:bg-").concat(darkColor, "A-7 dark:active:data-[state=checked]:text-").concat(darkColor, "-11"),
-            disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:text-slateDarkA-8",
-        },
-    };
-    var indeterminateSurface = {
-        light: {
-            default: "border bg-".concat(color, "A-2 border-").concat(color, "A-7 text-").concat(color, "A-11"),
-            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
-            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
-            disable: "disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var indeterminateSoft = {
-        light: {
-            default: "border bg-transparent border-".concat(color, "A-6 text-").concat(color, "A-11"),
-            hover: "hover:bg-transparent hover:border-".concat(color, "A-6 hover:text-").concat(color, "A-11"),
-            active: "active:bg-transparent active:border-".concat(color, "A-6 active:text-").concat(color, "A-11"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:border-".concat(darkColor, "A-6 dark:text-").concat(darkColor, "A-11"),
-            hover: "dark:hover:border-".concat(darkColor, "A-6 dark:hover:text-").concat(darkColor, "A-11"),
-            active: "dark:active:border-".concat(darkColor, "A-6 dark:active:text-").concat(darkColor, "A-11"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    switch (type) {
-        case 'classic':
-            return indeterminate
-                ? makeClassName(indeterminateSurface, true)
-                : "".concat(makeClassName(surface, true), " data-[state=checked]:shadow-checkbox-classic data-[state=unchecked]:shadow-checkbox-classic\n          dark:data-[state=checked]:shadow-checkbox-classic dark:data-[state=unchecked]:shadow-checkbox-classic");
-        case 'soft':
-            return indeterminate ? makeClassName(indeterminateSoft, true) : makeClassName(soft, true);
-        case 'surface':
-            return indeterminate
-                ? makeClassName(indeterminateSurface, true)
-                : makeClassName(surface, true);
-        default:
-            return makeClassName(surface, true);
-    }
-};
-export var selectAppearanceStyle = function (type, color) {
-    var darkColor = "".concat(color, "Dark");
-    var surface = {
-        light: {
-            default: "bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12",
-            hover: "hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10",
-            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-slateA-10 active:opacity-[.92]"),
-            disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-[#111113] dark:border dark:data-placeholder:border-slateDarkA-7 dark:data-placeholder:text-slateDarkA-9 dark:border-slateDarkA-7 dark:text-slateDarkA-12",
-            hover: "dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10",
-            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border dark:active:border-").concat(darkColor, "A-8 dark:active:text-slateDarkA-10 dark:active:opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var classic = {
-        light: {
-            default: "bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12",
-            hover: "hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10",
-            active: "active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10",
-            disable: "disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12",
-            hover: "dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10",
-            active: "dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10",
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var soft = {
-        light: {
-            default: "bg-".concat(color, "A-3 border-none data-placeholder:text-").concat(color, "A-12/[.5] text-").concat(color, "A-12"),
-            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-12/[.5]"),
-            active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
-            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-".concat(darkColor, "A-3 dark:border-none dark:data-placeholder:text-").concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12 "),
-            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
-            active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
-            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8",
-        },
-    };
-    var ghost = {
-        light: {
-            default: "bg-transparent border-none data-placeholder:text-".concat(color, "A-12/[.5] text-").concat(color, "A-12"),
-            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-1/[.5]"),
-            active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
-            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
-        },
-        dark: {
-            default: "dark:bg-transparent dark:border-none dark:data-placeholder:text-".concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12"),
-            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
-            active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
-            disable: "dark:disabled:text-slateDarkA-8 dark:disabled:border-none",
-        },
-    };
-    var makeClassName = function (type) {
-        var className = '';
-        className += "".concat(type.light.default, " ").concat(type.dark.default, "  ").concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
-        return className;
-    };
-    switch (type) {
-        case 'classic':
-            return makeClassName(classic);
-        case 'soft':
-            return makeClassName(soft);
-        case 'surface':
-            return makeClassName(surface);
-        case 'ghost':
-            return makeClassName(ghost);
-        default:
-            return '';
-    }
-};

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-export * from './Typography';

package/dist/index.js

@@ -1,2 +0,0 @@
-export * from './components';
-export * from './Typography';

package/dist/types.d.ts

@@ -1,11 +0,0 @@
-export type IRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
-export type IScaling = '90%' | '95%' | '100%' | '105%' | '110%';
-export type IWeight = 'regular' | 'medium' | 'semibold' | 'bold';
-export type ITheme = 'light' | 'dark';
-export type ITypoSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-export type ISize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-export type IAppearance = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
-export type PointStyle = 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle' | false;
-export type IColor = 'slate' | 'olive' | 'sand' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'brown' | 'bronze' | 'gold' | 'sky' | 'mint' | 'lime' | 'yellow' | 'amber' | 'orange' | 'black' | 'white';
-export type IDarkColor = 'blackDark' | 'whiteDark' | 'slateDark' | 'oliveDark' | 'sandDark' | 'tomatoDark' | 'redDark' | 'rubyDark' | 'crimsonDark' | 'pinkDark' | 'plumDark' | 'purpleDark' | 'violetDark' | 'irisDark' | 'indigoDark' | 'blueDark' | 'cyanDark' | 'tealDark' | 'jadeDark' | 'greenDark' | 'grassDark' | 'brownDark' | 'bronzeDark' | 'goldDark' | 'skyDark' | 'mintDark' | 'limeDark' | 'yellowDark' | 'amberDark' | 'orangeDark' | 'slateDarkA' | 'oliveDarkA' | 'sandDarkA' | 'tomatoDarkA' | 'redDarkA' | 'rubyDarkA' | 'crimsonDarkA' | 'pinkDarkA' | 'plumDarkA' | 'purpleDarkA' | 'violetDarkA' | 'irisDarkA' | 'indigoDarkA' | 'blueDarkA' | 'cyanDarkA' | 'tealDarkA' | 'jadeDarkA' | 'greenDarkA' | 'grassDarkA' | 'brownDarkA' | 'bronzeDarkA' | 'goldDarkA' | 'skyDarkA' | 'mintDarkA' | 'limeDarkA' | 'yellowDarkA' | 'amberDarkA' | 'orangeDarkA';
-export type IAlphaColor = 'slateA' | 'oliveA' | 'sandA' | 'tomatoA' | 'redA' | 'rubyA' | 'crimsonA' | 'pinkA' | 'plumA' | 'purpleA' | 'violetA' | 'irisA' | 'indigoA' | 'blueA' | 'cyanA' | 'tealA' | 'jadeA' | 'greenA' | 'grassA' | 'brownA' | 'bronzeA' | 'goldA' | 'skyA' | 'mintA' | 'limeA' | 'yellowA' | 'amberA' | 'orangeA';

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/utils.d.ts

@@ -1,3 +0,0 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
-export declare function textColorFormat(colors: Record<string, Record<string, string>>): Record<string, string>;

package/dist/utils/utils.js

@@ -1,27 +0,0 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-// tailwind를 merge할 때 발생할 수 있는 클래스 충돌 문제 해결
-export function cn() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    return twMerge(clsx(inputs));
-}
-export function textColorFormat(colors) {
-    var _a;
-    var formatcolors = {};
-    for (var _i = 0, _b = Object.entries(colors); _i < _b.length; _i++) {
-        var _c = _b[_i], cn_1 = _c[0], c = _c[1];
-        var colorName = cn_1.toLowerCase();
-        for (var _d = 0, _e = Object.entries(c); _d < _e.length; _d++) {
-            var _f = _e[_d], radixScale = _f[0], value = _f[1];
-            var scale = (_a = radixScale.match(/\d+$/)) === null || _a === void 0 ? void 0 : _a[0];
-            if (!scale) {
-                continue;
-            }
-            formatcolors["".concat(cn_1).concat(scale)] = "text-".concat(colorName, "-").concat(scale);
-        }
-    }
-    return formatcolors;
-}