@pfct/purple 1.3.4-npm-test.1

package/dist/storybook/extend-color-type.stories.js

@@ -0,0 +1,401 @@
+"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.Story1 = exports.BasicChipsComponent = exports.FillTabComponent = exports.TextTabComponent = void 0;
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const meta = {
+    title: 'Page/ColorType',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const Section = styled_1.default.div `
+	margin: 0 auto;
+	max-width: 1200px;
+	padding: 20px;
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	th,
+	td {
+		width: 25%; /* 100%를 4개의 열로 나누어 균등하게 분배 */
+		border: 1px solid #ddd;
+		padding: 8px;
+	}
+`;
+const TextTabComponent = (props) => {
+    const [value, setValue] = (0, react_1.useState)('2');
+    const commonProps = Object.assign(Object.assign({}, props), { type: 'fixed', value, onChange: setValue, list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '라벨3', value: '3' },
+        ] });
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "TextTabs"),
+        react_1.default.createElement(__1.TextTabs, Object.assign({}, commonProps))));
+};
+exports.TextTabComponent = TextTabComponent;
+const FillTabComponent = (props) => {
+    const [value, setValue] = (0, react_1.useState)('2');
+    const commonProps = Object.assign(Object.assign({}, props), { value, onChange: setValue, list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '라벨3', value: '3' },
+        ] });
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "FillTabs"),
+        react_1.default.createElement(__1.FillTabs, Object.assign({}, commonProps))));
+};
+exports.FillTabComponent = FillTabComponent;
+const BasicChipsComponent = (props) => {
+    const [value, setValue] = (0, react_1.useState)(['1']);
+    const commonProps = Object.assign(Object.assign({}, props), { value, onChange: setValue, list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '라벨3', value: '3' },
+        ] });
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "BasicChips"),
+        react_1.default.createElement(__1.BasicChips, Object.assign({}, commonProps))));
+};
+exports.BasicChipsComponent = BasicChipsComponent;
+const ModalComponent = (props) => {
+    const [visible1, setVisible1] = (0, react_1.useState)(false);
+    const [visible2, setVisible2] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "Modal"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "DOUBLE_BUTTON.LEFT=DEFAULT"),
+                react_1.default.createElement("th", null, "DOUBLE_BUTTON.LEFT=COLOR")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("div", { style: { width: '200px' } },
+                        react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", onClick: () => {
+                                setVisible1((prev) => !prev);
+                            } }, "\uBAA8\uB2EC \uC624\uD508"))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("div", { style: { width: '200px' } },
+                        react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", onClick: () => {
+                                setVisible2((prev) => !prev);
+                            } }, "\uBAA8\uB2EC \uC624\uD508"))))),
+        react_1.default.createElement(__1.Modal, { visible: visible1, onMaskClick: () => {
+                setVisible1(false);
+            } },
+            react_1.default.createElement(__1.Modal.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: `서브타이틀을 입력해주세요` }),
+            react_1.default.createElement(__1.Modal.Body, null,
+                react_1.default.createElement(__1.Modal.Comment, null, "\uC124\uBA85\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694"),
+                react_1.default.createElement(__1.Modal.UnderLineMiniButton, { text: "\uBBF8\uB2C8\uBC84\uD2BC" })),
+            react_1.default.createElement(__1.Modal.DoubleButton, { purpose: "main", colorType: props.colorType, left: {
+                    children: '취소',
+                    onClick: () => {
+                        setVisible1(false);
+                    },
+                }, right: {
+                    children: '확인',
+                    onClick: () => {
+                        setVisible1(false);
+                    },
+                } }, "\uD655\uC778")),
+        react_1.default.createElement(__1.Modal, { visible: visible2, onMaskClick: () => {
+                setVisible2(false);
+            } },
+            react_1.default.createElement(__1.Modal.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: `서브타이틀을 입력해주세요` }),
+            react_1.default.createElement(__1.Modal.Body, null,
+                react_1.default.createElement(__1.Modal.Comment, null, "\uC124\uBA85\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694"),
+                react_1.default.createElement(__1.Modal.UnderLineMiniButton, { text: "\uBBF8\uB2C8\uBC84\uD2BC" })),
+            react_1.default.createElement(__1.Modal.DoubleButton, { purpose: "sub", colorType: props.colorType, left: {
+                    children: '취소',
+                    onClick: () => {
+                        setVisible2(false);
+                    },
+                }, right: {
+                    children: '확인',
+                    onClick: () => {
+                        setVisible2(false);
+                    },
+                } }, "\uD655\uC778"))));
+};
+const ProgressBarComponent = (props) => {
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "ProgressBar"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "progress=20")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", { style: { position: 'relative', height: '50px' } },
+                    react_1.default.createElement(__1.ProgressBar, { progress: 20, colorType: props.colorType }))))));
+};
+const SingleButtonComponent = (props) => {
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "SingleButton"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "purpose=main, enabled"),
+                react_1.default.createElement("th", null, "purpose=sub, enabled"),
+                react_1.default.createElement("th", null, "purpose=main, disabled"),
+                react_1.default.createElement("th", null, "purpose=sub, disabled")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main" }, "\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "sub" }, "\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", disabled: true }, "\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "sub", disabled: true }, "\uBC84\uD2BC"))))));
+};
+const BoxMiniButtonComponent = (props) => {
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "BoxMiniButton"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "enabled"),
+                react_1.default.createElement("th", null, "disabled")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.BoxMiniButton, { colorType: props.colorType }, "\uBBF8\uB2C8\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.BoxMiniButton, { colorType: props.colorType, disabled: true }, "\uBBF8\uB2C8\uBC84\uD2BC"))))));
+};
+const IconMiniButtonComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        size: 's',
+        icon: react_1.default.createElement(__1.ChevronRightSIcon, null),
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "IconMiniButton"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "enabled"),
+                react_1.default.createElement("th", null, "disabled")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.IconMiniButton, Object.assign({}, commonProps), "\uBBF8\uB2C8\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.IconMiniButton, Object.assign({}, commonProps, { disabled: true }), "\uBBF8\uB2C8\uBC84\uD2BC"))))));
+};
+const UnderLineMiniButtonComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        size: 's',
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "UnderLineMiniButton"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "enabled"),
+                react_1.default.createElement("th", null, "disabled")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.UnderLineMiniButton, Object.assign({}, commonProps), "\uBBF8\uB2C8\uBC84\uD2BC")),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.UnderLineMiniButton, Object.assign({}, commonProps, { disabled: true }), "\uBBF8\uB2C8\uBC84\uD2BC"))))));
+};
+const RadioButtonComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        onChange: () => {
+            console.log('handleChange');
+        },
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "RadioButton"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Default, Active=On"),
+                react_1.default.createElement("th", null, "Default, Active=Off"),
+                react_1.default.createElement("th", null, "Disabled, Active=On"),
+                react_1.default.createElement("th", null, "Disabled, Active=Off")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "1", value: "1", checked: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "2", value: "2", checked: false }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "3", value: "3", checked: true, disabled: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "4", value: "4", checked: false, disabled: true })))))));
+};
+const FillCheckBoxComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        onChange: () => {
+            console.log('handleChange');
+        },
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "FillCheckBox"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Default, Active=On"),
+                react_1.default.createElement("th", null, "Default, Active=Off"),
+                react_1.default.createElement("th", null, "Disabled, Active=On"),
+                react_1.default.createElement("th", null, "Disabled, Active=Off")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: false }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: true, disabled: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: false, disabled: true })))))));
+};
+const LineCheckBoxComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        onChange: () => {
+            console.log('handleChange');
+        },
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "LineCheckBox"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Default, Active=On"),
+                react_1.default.createElement("th", null, "Default, Active=Off"),
+                react_1.default.createElement("th", null, "Disabled, Active=On"),
+                react_1.default.createElement("th", null, "Disabled, Active=Off")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: false }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: true, disabled: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: false, disabled: true })))))));
+};
+const CheckMarkComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        onChange: () => {
+            console.log('handleChange');
+        },
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "CheckMark"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Default, Active=On"),
+                react_1.default.createElement("th", null, "Default, Active=Off"),
+                react_1.default.createElement("th", null, "Disabled, Active=On"),
+                react_1.default.createElement("th", null, "Disabled, Active=Off")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: false }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: true, disabled: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: false, disabled: true })))))));
+};
+const SwitchComponent = (props) => {
+    const commonProps = {
+        colorType: props.colorType,
+        onChange: () => {
+            console.log('handleChange');
+        },
+    };
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "Switch"),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Default, Active=On"),
+                react_1.default.createElement("th", null, "Default, Active=Off"),
+                react_1.default.createElement("th", null, "Disabled, Active=On"),
+                react_1.default.createElement("th", null, "Disabled, Active=Off")),
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: false }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: true, disabled: true }))),
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: false, disabled: true })))))));
+};
+const RangeDatePickerComponent = (props) => {
+    const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 3, 18]));
+    const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 4, 13]));
+    const [displayDate, setDisplayDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 3, 1]));
+    const hookProps = (0, __1.useRangeDatePicker)({
+        colorType: props.colorType,
+        disabledDates: [
+            [new __1.PurpleDate([2024, 3, 20]), new __1.PurpleDate([2024, 3, 20])],
+            [new __1.PurpleDate([2024, 3, 8]), new __1.PurpleDate([2024, 3, 10])],
+        ],
+        selectedStartDate,
+        selectedEndDate,
+        displayDate,
+        onUpdateSelectedStartDate: setSelectedStartDate,
+        onUpdateSelectedEndDate: setSelectedEndDate,
+        onUpdateDisplayDate: setDisplayDate,
+    });
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement("h3", null, "RangeDatePicker"),
+        react_1.default.createElement(__1.BaseDatePicker, Object.assign({}, hookProps))));
+};
+const Component = (props) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ProgressBarComponent, Object.assign({}, props)),
+        react_1.default.createElement(ModalComponent, Object.assign({}, props)),
+        react_1.default.createElement(SingleButtonComponent, Object.assign({}, props)),
+        react_1.default.createElement(BoxMiniButtonComponent, Object.assign({}, props)),
+        react_1.default.createElement(IconMiniButtonComponent, Object.assign({}, props)),
+        react_1.default.createElement(UnderLineMiniButtonComponent, Object.assign({}, props)),
+        react_1.default.createElement(RadioButtonComponent, Object.assign({}, props)),
+        react_1.default.createElement(FillCheckBoxComponent, Object.assign({}, props)),
+        react_1.default.createElement(LineCheckBoxComponent, Object.assign({}, props)),
+        react_1.default.createElement(CheckMarkComponent, Object.assign({}, props)),
+        react_1.default.createElement(SwitchComponent, Object.assign({}, props)),
+        react_1.default.createElement(exports.TextTabComponent, Object.assign({}, props)),
+        react_1.default.createElement(exports.FillTabComponent, Object.assign({}, props)),
+        react_1.default.createElement(exports.BasicChipsComponent, Object.assign({}, props)),
+        react_1.default.createElement(RangeDatePickerComponent, Object.assign({}, props))));
+};
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
+    args: {
+        colorType: 'gray',
+    },
+    argTypes: {
+        colorType: {
+            options: __1.ColorTypeArray,
+            control: { type: 'select' },
+        },
+    },
+};
+exports.Story1.storyName = '컴포넌트 모음집';

package/dist/style/common.d.ts

@@ -0,0 +1 @@
+export declare const scrollStyle: import("@emotion/react").SerializedStyles;

package/dist/style/common.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollStyle = void 0;
+const react_1 = require("@emotion/react");
+exports.scrollStyle = (0, react_1.css) `
+	overflow-x: auto;
+`;
+/* TODO: 논의 후 scroll-bar 숨길지 말지 결정 필요 */
+/* &::-webkit-scrollbar {
+        display: none;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none; */

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/types/select-props.d.ts

@@ -0,0 +1,7 @@
+import { SelectItemProps } from '../components';
+type SingleSelectProps<T = string> = {
+    value: T;
+    list: SelectItemProps<T>[];
+    onChange: (value: T) => void;
+};
+export type { SingleSelectProps };

package/dist/types/select-props.js

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

package/dist/utils/GenerateColorStyle/chip.d.ts

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

package/dist/utils/GenerateColorStyle/chip.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("../../core");
+const chipColorStyle = (colorType) => {
+    const defaultOnContainerColor = core_1.basicColors[`${colorType}400`];
+    const defaultOnBorderColor = 'transparent';
+    const defaultOnTextColor = core_1.basicColors.white;
+    const defaultOnIconColor = core_1.basicColors.white;
+    const disabledOnContainerColor = core_1.basicColors[`${colorType}100`];
+    const disabledOnBorderColor = 'transparent';
+    const disabledOnTextColor = core_1.basicColors.white;
+    const disabledOnIconColor = core_1.basicColors.white;
+    switch (colorType) {
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: defaultOnContainerColor,
+                        borderColor: defaultOnBorderColor,
+                        textColor: defaultOnTextColor,
+                        iconColor: defaultOnIconColor,
+                    },
+                    off: {
+                        containerColor: core_1.basicColors.white,
+                        borderColor: core_1.basicColors.gray50,
+                        textColor: core_1.semanticColors.chipDefaultText,
+                        iconColor: core_1.basicColors.gray300,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: disabledOnContainerColor,
+                        borderColor: disabledOnBorderColor,
+                        textColor: disabledOnTextColor,
+                        iconColor: disabledOnIconColor,
+                    },
+                    off: {
+                        containerColor: core_1.basicColors.white,
+                        borderColor: core_1.basicColors.gray25,
+                        textColor: core_1.basicColors.gray100,
+                        iconColor: core_1.basicColors.gray100,
+                    },
+                },
+            };
+    }
+};
+exports.default = chipColorStyle;