@pfct/purple 1.3.4-rc.0

package/dist/library/List/BottomSheetItemList/index.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/List/BottomSheetItemList/index.styled.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.Item = styled_1.default.div `
+	width: 100%;
+	height: 48px;
+	padding: 15px 25px;
+	background-color: ${Colors_1.basicColors.white};
+	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })}
+
+	${({ disabled }) => disabled &&
+    (0, react_1.css) `
+			background-color: ${Colors_1.basicColors.gray50};
+			color: ${Colors_1.basicColors.gray200};
+			cursor: not-allowed;
+		`}
+
+	&:active {
+		background-color: ${Colors_1.basicColors.gray25};
+	}
+`;

package/dist/library/List/index.d.ts

@@ -0,0 +1 @@
+export * from './BottomSheetItemList';

package/dist/library/List/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BottomSheetItemList"), exports);

package/dist/library/Lottie/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import * as Styled from './index.styled';
+interface LottieProps extends Styled.LottieContainerProps {
+    lottieFileSrcPath: string;
+    alterImgSrcOnLoad?: string;
+    viewBox?: {
+        x?: number;
+        y?: number;
+        width: number;
+        height: number;
+    };
+    playOnce?: boolean;
+    autoplay?: boolean;
+}
+declare const Lottie: React.FC<LottieProps>;
+export type { LottieProps };
+export { Lottie };

package/dist/library/Lottie/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lottie = void 0;
+const react_1 = __importStar(require("react"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const lottie_web_1 = __importDefault(require("lottie-web"));
+const hooks_1 = require("../../hooks");
+const uuid_util_1 = require("../../utils/uuid.util");
+const IconWithImage_1 = require("../IconWithImage");
+const Styled = __importStar(require("./index.styled"));
+const Lottie = ({ width, height, viewBox, className, playOnce, autoplay = false, alterImgSrcOnLoad, lottieFileSrcPath: lottieFileName, }) => {
+    const [animationData, setAnimationData] = (0, react_1.useState)(null);
+    const rootElement = (0, react_1.useRef)(null);
+    const elementId = (0, react_1.useRef)((0, uuid_util_1.uuid)());
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    const { ref: wrapperRef, inView } = (0, react_intersection_observer_1.useInView)({
+        /**
+         * 모바일 : 로띠의 높이가 PC와 다르게 작기 때문에 스크롤시 로띠의 play 시작점을 자연스럽게 하기위해 0.4
+         * PC : 로띠의 play 시작점이 lottie 끝에 들어왔을때 play하기 위해 value 0.9
+         */
+        threshold: isMobile ? 0.4 : 0.9,
+        /**
+         * rootMargin을 주어서 lottie inview에 대한 범위를 추가하였습니다.
+         * 모바일, PC의 높이가 달라 다르게 선언하였습니다.
+         */
+        rootMargin: isMobile ? '20% 0% 0% 0%' : '40% 0% 10% 0%',
+    });
+    const viewBoxSize = (0, react_1.useMemo)(() => { var _a, _b; return (viewBox ? `${(_a = viewBox.x) !== null && _a !== void 0 ? _a : 0} ${(_b = viewBox.y) !== null && _b !== void 0 ? _b : 0} ${viewBox.width} ${viewBox.height}` : undefined); }, [viewBox]);
+    const [lottieInstance, setLottieInstance] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        fetch(lottieFileName)
+            .then((res) => res.json())
+            .then((data) => {
+            setAnimationData(data);
+        })
+            .catch(() => {
+            console.info('lottie load 에 실패했습니다.');
+        });
+    }, [lottieFileName]);
+    (0, react_1.useEffect)(() => {
+        if (!rootElement.current || !animationData) {
+            return;
+        }
+        const lottieInstance = lottie_web_1.default.loadAnimation({
+            container: rootElement.current,
+            renderer: 'svg',
+            loop: !Boolean(playOnce),
+            autoplay,
+            animationData,
+            rendererSettings: {
+                viewBoxSize,
+            },
+            name: className,
+        });
+        setLottieInstance(lottieInstance);
+        return () => lottie_web_1.default.destroy(lottieInstance.name);
+    }, [animationData, className, autoplay, playOnce, viewBoxSize]);
+    (0, react_1.useEffect)(() => {
+        if (inView) {
+            lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.goToAndPlay((lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame) > 0.9 * (lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.totalFrames) ? 0 : lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame, true);
+        }
+        else {
+            if (playOnce) {
+                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.stop();
+            }
+            else {
+                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.pause();
+            }
+        }
+    }, [inView, lottieInstance, playOnce]);
+    if (animationData === null && alterImgSrcOnLoad) {
+        return (react_1.default.createElement(Styled.AlterImageWrapper, null,
+            react_1.default.createElement(IconWithImage_1.IconWithImage, { width: width || 0, srcPath: alterImgSrcOnLoad })));
+    }
+    return (react_1.default.createElement(Styled.Wrapper, { ref: wrapperRef },
+        react_1.default.createElement(Styled.Container, { id: elementId.current, className: className, ref: rootElement, width: width, height: height })));
+};
+exports.Lottie = Lottie;

package/dist/library/Lottie/index.styled.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface LottieContainerProps {
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & LottieContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AlterImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/Lottie/index.styled.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlterImageWrapper = exports.Container = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Wrapper = styled_1.default.div `
+	width: 100%;
+`;
+exports.Container = styled_1.default.div `
+	/* block 사용시 container div와 lottie svg 사이 미세한 여백이 발생하여 flex 사용*/
+	display: flex;
+
+	${(p) => p.width &&
+    (0, react_1.css) `
+			width: ${p.width}px;
+		`}
+	${(p) => p.height &&
+    (0, react_1.css) `
+			height: ${p.height}px;
+		`}
+`;
+// 대체 이미지
+exports.AlterImageWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;

package/dist/library/Spacing/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SpacingProps {
+    spaceNumber: number;
+}
+declare const Spacing: React.FC<SpacingProps>;
+export { SpacingProps };
+export { Spacing };

package/dist/library/Spacing/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Spacing = ({ spaceNumber }) => {
+    return react_1.default.createElement(Styled.Spacing, { spaceNumber: spaceNumber });
+};
+exports.Spacing = Spacing;

package/dist/library/Spacing/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SpacingProps } from '.';
+type Story = StoryObj<SpacingProps>;
+declare const meta: Meta<SpacingProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/library/Spacing/index.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const __1 = require("../../");
+const meta = {
+    title: 'Library/Spacing',
+    component: _1.Spacing,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.PinkTag, null, "Pink"),
+        react_1.default.createElement(_1.Spacing, Object.assign({}, props)),
+        react_1.default.createElement(__1.BlueTag, null, "Blue"))),
+};
+exports.Story1.storyName = '예제';

package/dist/library/Spacing/index.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Spacing: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    spaceNumber: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/Spacing/index.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Spacing = styled_1.default.div `
+	height: ${(el) => el.spaceNumber}px;
+`;

package/dist/library/index.d.ts

@@ -0,0 +1,4 @@
+export * from './IconWithImage';
+export * from './List';
+export * from './Lottie';
+export * from './Spacing';

package/dist/library/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IconWithImage"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Lottie"), exports);
+__exportStar(require("./Spacing"), exports);

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");

package/dist/types/date.d.ts

@@ -0,0 +1,33 @@
+interface IPurpleDate {
+    year: number;
+    month: number;
+    dateOfMonth: number;
+    today: PurpleDate;
+    indexOfDayOfWeek: number;
+    timestamp: number;
+    isToday: () => boolean;
+    toDateString: (format?: 'YY.MM.DD' | 'YYYY.MM.DD', seperator?: '-' | '.') => string;
+    addMonth: (months: number) => PurpleDate;
+    addYear: (years: number) => PurpleDate;
+}
+declare class PurpleDate implements IPurpleDate {
+    year: number;
+    month: number;
+    private indexOfMonth;
+    dateOfMonth: number;
+    indexOfDayOfWeek: number;
+    timestamp: number;
+    constructor(params?: [year: number, month: number, dateOfMonth: number]);
+    get today(): PurpleDate;
+    isToday: () => boolean;
+    toDateString: IPurpleDate['toDateString'];
+    addMonth: IPurpleDate['addMonth'];
+    addYear: IPurpleDate['addYear'];
+}
+declare const START_DATE: PurpleDate;
+declare const END_DATE: PurpleDate;
+declare const EMPTY_DATE: null;
+type DateOrNullType = typeof EMPTY_DATE | PurpleDate;
+type DateOrNullTypeTupleList = [DateOrNullType, DateOrNullType][];
+export type { IPurpleDate, DateOrNullType, DateOrNullTypeTupleList };
+export { PurpleDate, START_DATE, END_DATE, EMPTY_DATE };

package/dist/types/date.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMPTY_DATE = exports.END_DATE = exports.START_DATE = exports.PurpleDate = void 0;
+class PurpleDate {
+    constructor(params) {
+        this.isToday = () => {
+            return (this.today.year === this.year && this.today.month === this.month && this.today.dateOfMonth === this.dateOfMonth);
+        };
+        this.toDateString = (format = 'YYYY.MM.DD', seperator = '.') => {
+            const month = (() => {
+                if (this.month < 10) {
+                    return `0${this.month}`;
+                }
+                else {
+                    return this.month;
+                }
+            })();
+            const dateOfMonth = (() => {
+                if (this.dateOfMonth < 10) {
+                    return `0${this.dateOfMonth}`;
+                }
+                else {
+                    return this.dateOfMonth;
+                }
+            })();
+            switch (format) {
+                case 'YYYY.MM.DD':
+                    return `${this.year}${seperator}${month}${seperator}${dateOfMonth}`;
+                case 'YY.MM.DD':
+                    return `${String(this.year).slice(2, 4)}${seperator}${month}${seperator}${dateOfMonth}`;
+                default:
+                    return '지원되지 않는 형식입니다.';
+            }
+        };
+        this.addMonth = (months) => {
+            // fyi. 윤달, -값 계산등의 버그가 없도록 date 연산에 기대었습니다.
+            const d = new Date(this.year, this.indexOfMonth + months, this.dateOfMonth);
+            // return this;
+            return new PurpleDate([d.getFullYear(), d.getMonth() + 1, d.getDate()]);
+        };
+        this.addYear = (years) => {
+            // fyi. 윤달, -값 계산등의 버그가 없도록 date 연산에 기대었습니다.
+            const d = new Date(this.year + years, this.indexOfMonth, this.dateOfMonth);
+            // return this;
+            return new PurpleDate([d.getFullYear(), d.getMonth() + 1, d.getDate()]);
+        };
+        // TODO: invalid date 검증 필요
+        let d;
+        if (!params) {
+            d = new Date();
+        }
+        else {
+            const [year, month, dateOfMonth] = params;
+            d = new Date(year, month - 1, dateOfMonth); // fyi. date 연산 후 값 사용
+        }
+        this.year = d.getFullYear();
+        this.month = d.getMonth() + 1;
+        this.indexOfMonth = d.getMonth();
+        this.dateOfMonth = d.getDate();
+        this.indexOfDayOfWeek = d.getDay();
+        this.timestamp = Date.parse(`${this.year}-${this.month}-${this.dateOfMonth}`);
+    }
+    get today() {
+        const d = new Date();
+        return new PurpleDate([d.getFullYear(), d.getMonth() + 1, d.getDate()]);
+    }
+}
+exports.PurpleDate = PurpleDate;
+const START_DATE = new PurpleDate([1, 12, 31]);
+exports.START_DATE = START_DATE;
+const END_DATE = new PurpleDate([9999, 12, 31]);
+exports.END_DATE = END_DATE;
+const EMPTY_DATE = null;
+exports.EMPTY_DATE = EMPTY_DATE;

package/dist/types/date.spec.d.ts

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

package/dist/types/date.spec.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const date_1 = require("./date");
+describe('class PurpleDate 는 Date 를 확장하지 않았습니다.', () => {
+    it('instanceof 키워드로 확인하기', () => {
+        const purpleDate = new date_1.PurpleDate();
+        expect(purpleDate instanceof Date).toBe(false);
+    });
+});
+describe('PurpleDate는 추가 메소드가 정의되었습니다.', () => {
+    it('month : new Date().getMonth() + 1 과 동일합니다.', () => {
+        const purpleDate = new date_1.PurpleDate();
+        const date = new Date();
+        expect(purpleDate.month - 1).toBe(date.getMonth());
+    });
+});

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date';
+export * from './react';

package/dist/types/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date"), exports);
+__exportStar(require("./react"), exports);

package/dist/types/react.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type PropsWithChildren<ComponentProps = unknown> = ComponentProps & {
+    readonly children: ReactNode;
+};
+export type ReactFCWithChildren<ComponentProps = unknown> = React.FC<PropsWithChildren<ComponentProps>>;

package/dist/types/react.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/GenerateColorStyle/common/type.d.ts

@@ -0,0 +1,8 @@
+export declare const ColorTypeArray: readonly ["pink", "blue", "lime", "gray", "purple", "red", "green", "yellow"];
+export type ColorType = (typeof ColorTypeArray)[number];
+export declare const PurposeArray: readonly ["main", "sub"];
+export type PurposeType = (typeof PurposeArray)[number];
+export declare const StateArray: readonly ["default", "disabled", "hover", "focused"];
+export type StateType = (typeof StateArray)[number];
+export declare const StatusArray: readonly ["on", "off"];
+export type StatusType = (typeof StatusArray)[number];

package/dist/utils/GenerateColorStyle/common/type.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusArray = exports.StateArray = exports.PurposeArray = exports.ColorTypeArray = void 0;
+exports.ColorTypeArray = ['pink', 'blue', 'lime', 'gray', 'purple', 'red', 'green', 'yellow'];
+exports.PurposeArray = ['main', 'sub'];
+exports.StateArray = ['default', 'disabled', 'hover', 'focused'];
+exports.StatusArray = ['on', 'off'];

package/dist/utils/GenerateColorStyle/control/check-box.d.ts

@@ -0,0 +1,10 @@
+import { ColorType, StatusType } from '../common/type';
+type State = 'default' | 'disabled';
+type ColorStyleByState = {
+    containerColor: string;
+    borderColor: string;
+    iconColor: string;
+};
+export type CheckBoxColorStyleProps = Record<State, Record<StatusType, ColorStyleByState>>;
+declare const checkBoxColorStyle: (colorType: ColorType) => CheckBoxColorStyleProps;
+export default checkBoxColorStyle;

package/dist/utils/GenerateColorStyle/control/check-box.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+const checkBoxColorStyle = (colorType) => {
+    const defaultOnBorderColor = 'transparent';
+    const defaultOffContainerColor = 'transparent';
+    const defaultOffBorderColor = Colors_1.basicColors.gray100;
+    const defaultOffIconColor = Colors_1.basicColors.gray100;
+    const disabledOnBorderColor = 'transparent';
+    const disabledOffContainerColor = Colors_1.basicColors.gray25;
+    const disabledOffBorderColor = Colors_1.basicColors.gray50;
+    const disabledOffIconColor = Colors_1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray900,
+                        borderColor: defaultOnBorderColor,
+                        iconColor: Colors_1.basicColors.gray900,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                        iconColor: defaultOffIconColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                        borderColor: disabledOnBorderColor,
+                        iconColor: Colors_1.basicColors.gray200,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                        iconColor: disabledOffIconColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                        borderColor: defaultOnBorderColor,
+                        iconColor: Colors_1.basicColors[`${colorType}400`],
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                        iconColor: defaultOffIconColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                        borderColor: disabledOnBorderColor,
+                        iconColor: Colors_1.basicColors[`${colorType}100`],
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                        iconColor: disabledOffIconColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = checkBoxColorStyle;

package/dist/utils/GenerateColorStyle/control/check-mark.d.ts

@@ -0,0 +1,8 @@
+import { ColorType, StatusType } from '../common/type';
+type State = 'default' | 'disabled';
+type ColorStyleByState = {
+    containerColor: string;
+};
+export type CheckMarkColorStyleProps = Record<State, Record<StatusType, ColorStyleByState>>;
+declare const checkMarkColorStyle: (colorType: ColorType) => CheckMarkColorStyleProps;
+export default checkMarkColorStyle;