@pfct/purple 1.3.4-rc.0

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+// fyi. control간 컬러 공유 가능
+const checkMarkColorStyle = (colorType) => {
+    const defaultOffContainerColor = Colors_1.basicColors.gray100;
+    const disabledOffContainerColor = Colors_1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray900,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = checkMarkColorStyle;

package/dist/utils/GenerateColorStyle/control/radio-button.d.ts

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

package/dist/utils/GenerateColorStyle/control/radio-button.js

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

package/dist/utils/GenerateColorStyle/control/switch.d.ts

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

package/dist/utils/GenerateColorStyle/control/switch.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+const switchColorStyle = (colorType) => {
+    const defaultOnInnerCircleColor = Colors_1.basicColors.white;
+    const defaultOffContainerColor = Colors_1.basicColors.gray100;
+    const defaultOffInnerCircleColor = Colors_1.semanticColors.controlSwitchEnabledOffInnerCircle;
+    const disabledOnInnerCircleColor = Colors_1.semanticColors.controlSwitchDisabledOnInnerCircle;
+    const disabledOffContainerColor = Colors_1.basicColors.gray50;
+    const disabledOffInnerCircleColor = Colors_1.semanticColors.controlSwitchDisabledOffInnerCircle;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.semanticColors.controlGraySwitchEnabledOnContainer,
+                        innerCircleColor: defaultOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        innerCircleColor: defaultOffInnerCircleColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                        innerCircleColor: disabledOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        innerCircleColor: disabledOffInnerCircleColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                        innerCircleColor: defaultOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        innerCircleColor: defaultOffInnerCircleColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                        innerCircleColor: disabledOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        innerCircleColor: disabledOffInnerCircleColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = switchColorStyle;

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

@@ -0,0 +1,13 @@
+import { ColorType } from '.';
+type CommonDatePickerColorStyleProps = {
+    textColor: string;
+    focusedTextColor: string;
+    disabledTextColor: string;
+    hoverContainerColor: string;
+};
+export type DatepickerColorStyleProps = CommonDatePickerColorStyleProps & {
+    focusedContainerColor: string;
+    rangeContainerColor: string;
+};
+declare const datepickerColorStyle: (colorType: ColorType) => DatepickerColorStyleProps;
+export default datepickerColorStyle;

package/dist/utils/GenerateColorStyle/datepicker.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const commonMiniButtonColorStyle = {
+    textColor: Colors_1.basicColors.gray900,
+    focusedTextColor: Colors_1.basicColors.white,
+    disabledTextColor: Colors_1.basicColors.gray100,
+    hoverContainerColor: Colors_1.basicColors.gray50,
+};
+const datepickerColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { focusedContainerColor: Colors_1.basicColors.gray900, rangeContainerColor: Colors_1.basicColors.gray50 });
+        default:
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { focusedContainerColor: Colors_1.basicColors[`${colorType}400`], rangeContainerColor: Colors_1.basicColors[`${colorType}50`] });
+    }
+};
+exports.default = datepickerColorStyle;

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

@@ -0,0 +1,17 @@
+import { ColorTypeArray, PurposeArray, StateArray, StatusArray, ColorType, PurposeType, StateType, StatusType } from './common/type';
+import { SingleButtonColorStyleParams, SingleButtonColorStyleProps } from './single-button';
+import { MiniButtonColorStyleProps } from './mini-button';
+import { DatepickerColorStyleProps } from './datepicker';
+import { SwitchColorStyleProps } from './control/switch';
+import { RadioButtonColorStyleProps } from './control/radio-button';
+import { CheckBoxColorStyleProps } from './control/check-box';
+import { CheckMarkColorStyleProps } from './control/check-mark';
+export { ColorTypeArray, PurposeArray, StateArray, StatusArray };
+export type { ColorType, PurposeType, StateType, StatusType, SingleButtonColorStyleParams, SingleButtonColorStyleProps, MiniButtonColorStyleProps, DatepickerColorStyleProps, SwitchColorStyleProps, RadioButtonColorStyleProps, CheckBoxColorStyleProps, CheckMarkColorStyleProps, };
+export { default as singleButtonColorStyle } from './single-button';
+export { default as miniButtonColorStyle } from './mini-button';
+export { default as datepickerColorStyle } from './datepicker';
+export { default as switchColorStyle } from './control/switch';
+export { default as radioButtonColorStyle } from './control/radio-button';
+export { default as checkBoxColorStyle } from './control/check-box';
+export { default as checkMarkColorStyle } from './control/check-mark';

package/dist/utils/GenerateColorStyle/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkMarkColorStyle = exports.checkBoxColorStyle = exports.radioButtonColorStyle = exports.switchColorStyle = exports.datepickerColorStyle = exports.miniButtonColorStyle = exports.singleButtonColorStyle = exports.StatusArray = exports.StateArray = exports.PurposeArray = exports.ColorTypeArray = void 0;
+const type_1 = require("./common/type");
+Object.defineProperty(exports, "ColorTypeArray", { enumerable: true, get: function () { return type_1.ColorTypeArray; } });
+Object.defineProperty(exports, "PurposeArray", { enumerable: true, get: function () { return type_1.PurposeArray; } });
+Object.defineProperty(exports, "StateArray", { enumerable: true, get: function () { return type_1.StateArray; } });
+Object.defineProperty(exports, "StatusArray", { enumerable: true, get: function () { return type_1.StatusArray; } });
+var single_button_1 = require("./single-button");
+Object.defineProperty(exports, "singleButtonColorStyle", { enumerable: true, get: function () { return __importDefault(single_button_1).default; } });
+var mini_button_1 = require("./mini-button");
+Object.defineProperty(exports, "miniButtonColorStyle", { enumerable: true, get: function () { return __importDefault(mini_button_1).default; } });
+var datepicker_1 = require("./datepicker");
+Object.defineProperty(exports, "datepickerColorStyle", { enumerable: true, get: function () { return __importDefault(datepicker_1).default; } });
+var switch_1 = require("./control/switch");
+Object.defineProperty(exports, "switchColorStyle", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });
+var radio_button_1 = require("./control/radio-button");
+Object.defineProperty(exports, "radioButtonColorStyle", { enumerable: true, get: function () { return __importDefault(radio_button_1).default; } });
+var check_box_1 = require("./control/check-box");
+Object.defineProperty(exports, "checkBoxColorStyle", { enumerable: true, get: function () { return __importDefault(check_box_1).default; } });
+var check_mark_1 = require("./control/check-mark");
+Object.defineProperty(exports, "checkMarkColorStyle", { enumerable: true, get: function () { return __importDefault(check_mark_1).default; } });

package/dist/utils/GenerateColorStyle/mini-button.d.ts

@@ -0,0 +1,14 @@
+import { ColorType } from '.';
+type CommonMiniButtonColorStyleProps = {
+    hoverContainerColor: string;
+    focusedContainerColor: string;
+    disabledTextColor: string;
+};
+type ExtraMiniButtonColorStyleProps = {
+    textColor: string;
+    iconColor: string;
+    iconDisabledColor: string;
+};
+export type MiniButtonColorStyleProps = CommonMiniButtonColorStyleProps & ExtraMiniButtonColorStyleProps;
+declare const miniButtonColorStyle: (colorType: ColorType) => MiniButtonColorStyleProps;
+export default miniButtonColorStyle;

package/dist/utils/GenerateColorStyle/mini-button.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const commonMiniButtonColorStyle = {
+    hoverContainerColor: Colors_1.basicColors.gray50,
+    focusedContainerColor: Colors_1.basicColors.gray100,
+    disabledTextColor: Colors_1.basicColors.gray200,
+};
+const miniButtonColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { textColor: Colors_1.basicColors.gray400, iconColor: Colors_1.basicColors.gray200, iconDisabledColor: Colors_1.basicColors.gray50 });
+        default:
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { textColor: Colors_1.basicColors[`${colorType}400`], iconColor: Colors_1.basicColors[`${colorType}400`], iconDisabledColor: Colors_1.basicColors.gray200 });
+    }
+};
+exports.default = miniButtonColorStyle;

package/dist/utils/GenerateColorStyle/single-button.d.ts

@@ -0,0 +1,15 @@
+import { ColorType, PurposeType } from './common/type';
+export type SingleButtonColorStyleProps = {
+    textColor: string;
+    disabledTextColor: string;
+    defaultContainerColor: string;
+    hoverContainerColor: string;
+    focusedContainerColor: string;
+    disabledContainerColor: string;
+};
+export type SingleButtonColorStyleParams = {
+    colorType: ColorType;
+    purpose: PurposeType;
+};
+declare const singleButtonColorStyle: ({ colorType, purpose }: SingleButtonColorStyleParams) => SingleButtonColorStyleProps;
+export default singleButtonColorStyle;

package/dist/utils/GenerateColorStyle/single-button.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("../../core");
+const mainButtonColorStyle = (colorType) => {
+    let textColor;
+    let disabledTextColor;
+    let defaultContainerColor;
+    let hoverContainerColor;
+    let focusedContainerColor;
+    let disabledContainerColor;
+    switch (colorType) {
+        case 'gray':
+        default:
+            textColor = core_1.basicColors.white;
+            disabledTextColor = core_1.basicColors.white;
+            break;
+    }
+    switch (colorType) {
+        case 'gray':
+            defaultContainerColor = core_1.basicColors.gray900;
+            hoverContainerColor = core_1.basicColors.gray700;
+            focusedContainerColor = core_1.basicColors.gray800;
+            disabledContainerColor = core_1.basicColors.gray100;
+            break;
+        default:
+            defaultContainerColor = core_1.basicColors[`${colorType}400`];
+            hoverContainerColor = core_1.basicColors[`${colorType}500`];
+            focusedContainerColor = core_1.basicColors[`${colorType}600`];
+            disabledContainerColor = core_1.basicColors[`${colorType}100`];
+            break;
+    }
+    return {
+        textColor,
+        disabledTextColor,
+        defaultContainerColor,
+        hoverContainerColor,
+        focusedContainerColor,
+        disabledContainerColor,
+    };
+};
+const subButtonColorStyle = (colorType) => {
+    let textColor;
+    let disabledTextColor;
+    let defaultContainerColor;
+    let hoverContainerColor;
+    let focusedContainerColor;
+    let disabledContainerColor;
+    switch (colorType) {
+        case 'gray':
+            textColor = core_1.basicColors.gray700;
+            break;
+        default:
+            textColor = core_1.basicColors[`${colorType}400`];
+            break;
+    }
+    switch (colorType) {
+        default:
+            disabledTextColor = core_1.semanticColorsMethod.buttonSubDisabledText(colorType);
+    }
+    switch (colorType) {
+        case 'gray':
+        default:
+            defaultContainerColor = core_1.basicColors[`${colorType}50`];
+            hoverContainerColor = core_1.basicColors[`${colorType}100`];
+            focusedContainerColor = core_1.basicColors[`${colorType}200`];
+            disabledContainerColor = core_1.basicColors[`${colorType}50`];
+    }
+    return {
+        textColor,
+        disabledTextColor,
+        defaultContainerColor,
+        hoverContainerColor,
+        focusedContainerColor,
+        disabledContainerColor,
+    };
+};
+const singleButtonColorStyle = ({ colorType, purpose }) => {
+    switch (purpose) {
+        case 'main':
+            return mainButtonColorStyle(colorType);
+        case 'sub':
+            return subButtonColorStyle(colorType);
+    }
+};
+exports.default = singleButtonColorStyle;

package/dist/utils/format.util.d.ts

@@ -0,0 +1,3 @@
+export declare const numberAccept: RegExp;
+export declare const extractNumber: (val: string) => string;
+export declare const formatKoreaCurrency: (val: string) => string;

package/dist/utils/format.util.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatKoreaCurrency = exports.extractNumber = exports.numberAccept = void 0;
+exports.numberAccept = /[\d]+/g;
+const extractNumber = (val) => (val.match(exports.numberAccept) || []).join('');
+exports.extractNumber = extractNumber;
+const formatKoreaCurrency = (val) => {
+    if (!val) {
+        return val;
+    }
+    const parsed = (0, exports.extractNumber)(val);
+    const number = Number.parseFloat(parsed);
+    return number.toLocaleString('kr-KO');
+};
+exports.formatKoreaCurrency = formatKoreaCurrency;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './media.util';
+export * from './format.util';
+export * from './GenerateColorStyle';

package/dist/utils/index.js

@@ -0,0 +1,19 @@
+"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("./media.util"), exports);
+__exportStar(require("./format.util"), exports);
+__exportStar(require("./GenerateColorStyle"), exports);

package/dist/utils/media.util.d.ts

@@ -0,0 +1,9 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const MediaQuerySize: {
+    Mobile: number;
+    PC: number;
+};
+export declare const Smaller: (style: SerializedStyles) => SerializedStyles;
+export declare const Larger: (style: SerializedStyles) => SerializedStyles;
+export declare const Between: (style: SerializedStyles) => SerializedStyles;
+export declare const BetweenPcAndMobile: (PcStyle: SerializedStyles, MobileStyle: SerializedStyles) => SerializedStyles;

package/dist/utils/media.util.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BetweenPcAndMobile = exports.Between = exports.Larger = exports.Smaller = exports.MediaQuerySize = void 0;
+const react_1 = require("@emotion/react");
+exports.MediaQuerySize = {
+    Mobile: 768,
+    PC: 1024,
+};
+const Smaller = (style) => (0, react_1.css) `
+	@media (max-width: ${exports.MediaQuerySize.Mobile}px) {
+		${style}
+	}
+`;
+exports.Smaller = Smaller;
+const Larger = (style) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) {
+		${style}
+	}
+`;
+exports.Larger = Larger;
+const Between = (style) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) and (max-width: ${exports.MediaQuerySize.PC + 30}px) {
+		${style}
+	}
+`;
+exports.Between = Between;
+const BetweenPcAndMobile = (PcStyle, MobileStyle) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) {
+		${PcStyle}
+	}
+	@media (max-width: ${exports.MediaQuerySize.Mobile}px) {
+		${MobileStyle}
+	}
+`;
+exports.BetweenPcAndMobile = BetweenPcAndMobile;

package/dist/utils/uuid.util.d.ts

@@ -0,0 +1 @@
+export declare const uuid: () => string;

package/dist/utils/uuid.util.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uuid = void 0;
+// uuidv4
+const uuid = () => {
+    return (String([1e7]) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (ch) => {
+        const c = Number(ch);
+        return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
+    });
+};
+exports.uuid = uuid;