@pop-ui/core 0.0.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 (주)텐핑거스
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
+copies of the Software, and to permit persons to whom the Software is  
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
+SOFTWARE.

package/dist/components/Alert/Alert.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from ".";
+export default {
+    title: "Core/Alert",
+    component: Alert,
+};
+const Template = (args) => _jsx(Alert, { ...args });
+export const defaultAlert = Template.bind({});
+defaultAlert.args = {
+    visible: true,
+    type: "success",
+    variant: "light",
+    title: "alert title",
+    children: "alert content",
+    top: 0,
+    left: 0,
+    right: 0,
+};

package/dist/components/Alert/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert as MantineAlert, } from "@mantine/core";
+import ic_success from "../../assets/icons/ic_success.svg";
+import ic_error from "../../assets/icons/ic_error.svg";
+import styles from "./styles.module.scss";
+/**
+ * ----- alert props -----
+ ** visible: 노출 여부
+ ** type: 'success' | 'error'
+ ** variant: 'fill' | 'light'
+ ** title: alert 타이틀
+ ** 기타 props는 mantine alert props 사용: https://v6.mantine.dev/core/alert/?t=props
+ */
+export const Alert = ({ visible = false, type = "success", variant = "light", top = 48, right = 48, ...props }) => {
+    let typeStyle = styles.light_success;
+    if (variant === "fill") {
+        if (type === "success") {
+            typeStyle = styles.fill_success;
+        }
+        else if (type === "error") {
+            typeStyle = styles.fill_error;
+        }
+    }
+    else {
+        if (type === "success") {
+            typeStyle = styles.light_success;
+        }
+        else if (type === "error") {
+            typeStyle = styles.light_error;
+        }
+    }
+    return visible ? (_jsx(MantineAlert, { className: typeStyle, icon: _jsx("img", { src: type === "success" ? ic_success : ic_error, alt: "alert_icon" }), styles: {
+            title: {
+                marginBottom: !props?.children ? 0 : undefined,
+            },
+        }, pos: "fixed", top: top, right: right, ...props })) : null;
+};
+export default Alert;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from ".";
+export default {
+    title: "Core/Button",
+    component: Button,
+};
+const Template = (args) => _jsx(Button, { ...args });
+export const PrimaryButton = Template.bind({});
+PrimaryButton.args = {
+    children: "데이트팝 Button",
+    styleType: "primary",
+    size: "md",
+    disabled: false,
+};
+export const PrimaryLineButton = Template.bind({});
+PrimaryLineButton.args = {
+    children: "데이트팝 Button",
+    styleType: "primaryline",
+    size: "md",
+    disabled: false,
+};
+export const BasicButton = Template.bind({});
+BasicButton.args = {
+    children: "데이트팝 Button",
+    styleType: "basic",
+    size: "md",
+    disabled: false,
+};
+export const DangerButton = Template.bind({});
+DangerButton.args = {
+    children: "데이트팝 Button",
+    styleType: "danger",
+    size: "md",
+    disabled: false,
+};
+export const SettingButton = Template.bind({});
+SettingButton.args = {
+    children: "데이트팝 Button",
+    styleType: "setting",
+    size: "md",
+    disabled: false,
+};

package/dist/components/Button/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MantineButton, } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- button props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** styleType: 'primary' | 'primaryline' | 'basic' | 'danger' | 'setting'
+ ** 기타 props는 mantine button props 사용: https://v6.mantine.dev/core/button/?t=props
+ */
+export const Button = ({ children, size = "md", styleType = "primary", ...props }) => {
+    let sizeStyle = styles.md_button;
+    if (size === "sm") {
+        sizeStyle = styles.sm_button;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_button;
+    }
+    let buttonStyle = styles.primary;
+    if (styleType === "basic") {
+        buttonStyle = styles.basic;
+    }
+    else if (styleType === "primaryline") {
+        buttonStyle = styles.primaryline;
+    }
+    else if (styleType === "danger") {
+        buttonStyle = styles.danger;
+    }
+    else if (styleType === "setting") {
+        buttonStyle = styles.setting;
+    }
+    return (_jsx(MantineButton, { type: "button", className: `${buttonStyle} ${sizeStyle}`, ...props, children: children }));
+};
+export default Button;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from ".";
+export default {
+    title: "Core/Checkbox",
+    component: Checkbox,
+};
+const Template = (args) => _jsx(Checkbox, { ...args });
+export const defaultCheckbox = Template.bind({});
+defaultCheckbox.args = {
+    label: "checkbox label",
+    description: "description text",
+    size: "md",
+    disabled: false,
+};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as MantineCheckbox, } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- checkbox props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** 기타 props는 mantine checkbox props 사용: https://v6.mantine.dev/core/checkbox/?t=props
+ */
+export const Checkbox = ({ size = "md", ...props }) => {
+    let sizeStyle = styles.md_checkbox;
+    let sizeNumber = 24;
+    if (size === "sm") {
+        sizeStyle = styles.sm_checkbox;
+        sizeNumber = 18;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_checkbox;
+        sizeNumber = 32;
+    }
+    return (_jsx(MantineCheckbox, { className: sizeStyle, styles: {
+            inner: {
+                width: sizeNumber,
+                height: sizeNumber,
+            },
+        }, ...props }));
+};
+export default Checkbox;

package/dist/components/DatePicker/DatePicker.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from ".";
+export default {
+    title: "Core/DatePicker",
+    component: DatePicker,
+};
+const Template = (args) => _jsx(DatePicker, { ...args });
+export const datePicker = Template.bind({});
+datePicker.args = {
+    size: "md",
+    type: "default",
+    disabled: false,
+    withTime: false,
+};
+export const datetimePicker = Template.bind({});
+datetimePicker.args = {
+    size: "md",
+    disabled: false,
+    withTime: true,
+};
+export const rangePicker = Template.bind({});
+rangePicker.args = {
+    size: "md",
+    type: "range",
+    disabled: false,
+    withTime: false,
+};

package/dist/components/DatePicker/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "dayjs/locale/ko";
+import { DatePickerInput, DateTimePicker, } from "@mantine/dates";
+import ic_calendar from "../../assets/icons/ic_calendar.svg";
+import styles from "./styles.module.scss";
+/**
+ * ----- datepicker props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** type:  'default' | 'multiple' | 'range'
+ ** withTime: 시간 포함 여부
+ ** 기타 props는 mantine datepicker props 사용: https://v6.mantine.dev/dates/date-picker-input/?t=props
+ */
+export const DatePicker = ({ size = "md", type = "default", withTime, ...props }) => {
+    let sizeStyle = styles.md_textfield;
+    let iconSize = 18;
+    if (size === "sm") {
+        sizeStyle = styles.sm_textfield;
+        iconSize = 14;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_textfield;
+        iconSize = 24;
+    }
+    if (withTime) {
+        return (_jsx(DateTimePicker, { placeholder: undefined, onPointerEnterCapture: undefined, onPointerLeaveCapture: undefined, className: sizeStyle, size: size, locale: "ko", firstDayOfWeek: 0, monthLabelFormat: "YYYY년 MM월", valueFormat: "YYYY-MM-DD | a hh:mm", rightSection: _jsx("img", { width: iconSize, src: ic_calendar }), ...props }));
+    }
+    return (_jsx(DatePickerInput, { className: sizeStyle, type: type, size: size, locale: "ko", firstDayOfWeek: 0, monthLabelFormat: "YYYY년 MM월", valueFormat: "YYYY-MM-DD", rightSection: _jsx("img", { width: iconSize, src: ic_calendar }), ...props }));
+};
+export default DatePicker;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from ".";
+export default {
+    title: "Core/Dropdown",
+    component: Dropdown,
+};
+const Template = (args) => _jsx(Dropdown, { ...args });
+export const defaultDropdown = Template.bind({});
+defaultDropdown.args = {
+    label: "label text",
+    labelPosition: "top",
+    size: "md",
+    required: false,
+    disabled: false,
+    data: ["select 1", "select 2", "select 3"],
+};

package/dist/components/Dropdown/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Select, Tooltip } from "@mantine/core";
+import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
+import ic_chevron_up from "../../assets/icons/ic_chevron_up.svg";
+import ic_chevron_down from "../../assets/icons/ic_chevron_down.svg";
+import styles from "./styles.module.scss";
+import { useState } from "react";
+/**
+ * ----- dropdown props -----
+ ** label: string, 라벨
+ ** labelPosition: 'top' | 'left', 라벨위치
+ ** size: 'sm' | 'md' | 'lg'
+ ** tooltip: string, 툴팁
+ ** tooltipPosition: 'top' | 'bottom' | 'left' | 'right', 툴팁 위치
+ ** description: string, 상세 설명
+ ** errorMsg: string, 에러 메시지
+ ** 기타 props는 mantine select props 사용: https://v6.mantine.dev/core/select/?t=props
+ */
+export const Dropdown = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    let labelStyle = styles.md_label;
+    let selectStyle = styles.md_textfield;
+    let tooltipStyle = styles.md_tooltip;
+    let chevronSize = 18;
+    if (size === "sm") {
+        labelStyle = styles.sm_label;
+        selectStyle = styles.sm_textfield;
+        tooltipStyle = styles.sm_tooltip;
+        chevronSize = 14;
+    }
+    else if (size === "lg") {
+        labelStyle = styles.lg_label;
+        selectStyle = styles.lg_textfield;
+        tooltipStyle = styles.lg_tooltip;
+        chevronSize = 24;
+    }
+    return (_jsxs("div", { className: labelPosition === "top"
+            ? styles.top_label_textfield
+            : styles.left_label_textfield, children: [_jsxs("div", { children: [label && (_jsx(Input.Label, { required: required, className: labelStyle, children: label })), tooltip && (_jsx(Tooltip, { label: tooltip, position: tooltipPosition, children: _jsx("img", { className: tooltipStyle, src: ic_tooltip, alt: "tooltip_icon" }) }))] }), _jsxs("div", { children: [_jsx(Select, { ...props, size: size, error: errorMsg, className: selectStyle, rightSection: isOpen ? (_jsx("img", { width: chevronSize, src: ic_chevron_up })) : (_jsx("img", { width: chevronSize, src: ic_chevron_down })), onDropdownOpen: () => setIsOpen(true), onDropdownClose: () => setIsOpen(false), styles: () => ({
+                            item: {
+                                "&[data-selected]": {
+                                    "&, &:hover": {
+                                        backgroundColor: "#e7e7e7",
+                                        color: "#000000",
+                                    },
+                                },
+                            },
+                        }) }), description && (_jsx(Input.Description, { className: styles.input_description, children: description })), errorMsg && (_jsx(Input.Error, { className: styles.input_error_msg, children: errorMsg }))] })] }));
+};
+export default Dropdown;

package/dist/components/ImageUploader/ImageUploader.stories.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImageUploader } from ".";
+export default {
+    title: "Core/ImageUploader",
+    component: ImageUploader,
+};
+const Template = (args) => (_jsx(ImageUploader, { ...args }));
+export const defaultImageUploader = Template.bind({});
+defaultImageUploader.args = {};

package/dist/components/ImageUploader/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Dropzone, IMAGE_MIME_TYPE, } from "@mantine/dropzone";
+import styles from "./styles.module.scss";
+import ic_image_colored from "../../assets/icons/ic_image_colored.svg";
+import ic_cancel_circle from "../../assets/icons/ic_cancel_circle.svg";
+/**
+ * ----- image uploader props -----
+ ** width: number
+ ** height: number
+ ** defaultMsg: ReactNode, placeholder 대체
+ ** file: string | FileWithPath
+ ** showClearButton: boolean, 업로드 파일 clear 버튼 노출 여부
+ ** onClear: () => void, 업로드 파일 clear시 실행될 함수
+ ** 기타 props는 mantine dropzone props 사용: https://v6.mantine.dev/others/dropzone/?t=props
+ */
+export const ImageUploader = ({ width, height, defaultMsg = "이미지 업로드", file, onDrop, showClearButton, onClear, ...props }) => {
+    const [fileData, setFileData] = useState(file);
+    const handleFileDataClear = useCallback(() => {
+        setFileData(undefined);
+        if (onClear) {
+            onClear();
+        }
+    }, [onClear]);
+    return (_jsxs("div", { className: styles.image_uploader_wrapper, children: [showClearButton && fileData ? (_jsx("div", { className: styles.file_clear_button, onClick: handleFileDataClear, children: _jsx("img", { src: ic_cancel_circle, alt: "clear_file_data" }) })) : null, _jsx(Dropzone, { ...props, maxFiles: 1, className: styles.image_uploader, accept: IMAGE_MIME_TYPE, onDrop: (e) => {
+                    setFileData(e[0]);
+                    if (onDrop) {
+                        onDrop(e);
+                    }
+                }, style: {
+                    width,
+                    height,
+                }, children: _jsx(_Fragment, { children: fileData ? (_jsx("img", { className: styles.preview, src: typeof fileData === "string"
+                            ? fileData
+                            : URL.createObjectURL(fileData), alt: `파일명: ${typeof fileData === "string" ? fileData : fileData.name}`, title: `파일명: ${typeof fileData === "string" ? fileData : fileData.name}` })) : (_jsxs("div", { children: [_jsx("img", { src: ic_image_colored, alt: "ic_image_colored" }), _jsx("span", { children: defaultMsg })] })) }) })] }));
+};
+export default ImageUploader;

package/dist/components/Modal/Modal.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from ".";
+export default {
+    title: "Core/Modal",
+    component: Modal,
+};
+const Template = (args) => _jsx(Modal, { ...args });
+export const defaultModal = Template.bind({});
+defaultModal.args = {
+    children: "test",
+    opened: true,
+    centered: false,
+};

package/dist/components/Modal/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as MantineModal, } from "@mantine/core";
+/**
+ * ----- modal props -----
+ ** size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ ** width: number
+ ** 기타 props는 mantine modal props 사용: https://v6.mantine.dev/core/modal/?t=props
+ */
+export const Modal = ({ size = "md", width, withCloseButton = false, ...props }) => {
+    let sizeNumber = 768;
+    if (size === "xs") {
+        sizeNumber = 360;
+    }
+    else if (size === "sm") {
+        sizeNumber = 544;
+    }
+    else if (size === "lg") {
+        sizeNumber = 1000;
+    }
+    else if (size === "xl") {
+        sizeNumber = 1200;
+    }
+    return (_jsx(MantineModal, { size: width || sizeNumber, withCloseButton: withCloseButton, ...props }));
+};
+export default Modal;

package/dist/components/Pagination/Pagination.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from ".";
+export default {
+    title: "Core/Pagination",
+    component: Pagination,
+};
+const Template = (args) => _jsx(Pagination, { ...args });
+export const defaultPagination = Template.bind({});
+defaultPagination.args = {
+    currentPageIdx: 0,
+    rowsPerPage: 10,
+    totalLength: 50,
+    paginationSize: 5,
+};

package/dist/components/Pagination/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import chevron_left from "../../assets/icons/ic_chevron_left.svg";
+import chevron_right from "../../assets/icons/ic_chevron_right.svg";
+import style from "./style.module.scss";
+/**
+ * ----- pagination props -----
+ ** currentPageIdx: 0부터 시작, 현재 page index
+ ** rowsPerPage: 한 페이지에 보이는 아이템 개수
+ ** totalLength: 페이지네이션 사용할 data의 총 개수
+ ** paginationSize: 페이지네이션 숫자 노출 수 default: 5 (1~5)
+ ** onPageChange: (page: number) => void
+ */
+export const Pagination = ({ currentPageIdx, rowsPerPage, totalLength, paginationSize, onPageChange, ...props }) => {
+    const [currentIdx, setCurrentIdx] = useState(currentPageIdx);
+    const [maxPageRows, setMaxPageRows] = useState(50);
+    const [totalrows, setTotalRows] = useState(1);
+    const [paginationLength, setPaginationLength] = useState(5);
+    useMemo(() => {
+        setCurrentIdx(currentPageIdx);
+        setMaxPageRows(rowsPerPage || 50);
+        setTotalRows(totalLength || 1);
+        setPaginationLength(paginationSize || 5);
+    }, [currentPageIdx, rowsPerPage, totalLength, paginationSize]);
+    const onClickPrev = () => {
+        if (onPageChange) {
+            onPageChange(currentIdx - ((currentIdx % paginationLength) + 1));
+        }
+        setCurrentIdx((prev) => prev - ((prev % paginationLength) + 1));
+    };
+    const onClickNext = () => {
+        if (onPageChange) {
+            onPageChange(currentIdx + paginationLength - (currentIdx % paginationLength));
+        }
+        setCurrentIdx((prev) => prev + paginationLength - (prev % paginationLength));
+    };
+    return (_jsxs("div", { ...props, className: style.pagination, children: [currentIdx >= paginationLength ? (_jsx("button", { className: style.arrow, onClick: onClickPrev, children: _jsx("img", { src: chevron_left, alt: "prev" }) })) : null, new Array(paginationLength).fill(0).map((_v, index) => {
+                const indexNumber = Math.floor(currentIdx / paginationLength) * paginationLength +
+                    index +
+                    1;
+                if (indexNumber > Math.ceil(totalrows / maxPageRows)) {
+                    return;
+                }
+                return (_jsx("button", { className: currentIdx === indexNumber - 1
+                        ? style.page_index_active
+                        : style.page_index, onClick: () => {
+                        setCurrentIdx(indexNumber - 1);
+                        if (onPageChange) {
+                            onPageChange(indexNumber - 1);
+                        }
+                    }, children: indexNumber }, `pagination_${index}`));
+            }), Math.floor(currentIdx / paginationLength) * paginationLength +
+                paginationLength <
+                Math.ceil(totalrows / maxPageRows) ? (_jsx("button", { className: style.arrow, onClick: onClickNext, children: _jsx("img", { src: chevron_right, alt: "next" }) })) : null] }));
+};
+export default Pagination;

package/dist/components/Radio/Radio.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from ".";
+export default {
+    title: "Core/Radio",
+    component: Radio,
+};
+const Template = (args) => _jsx(Radio, { ...args });
+export const defaultRadio = Template.bind({});
+defaultRadio.args = {
+    label: "radio label",
+    description: "description text",
+    size: "md",
+    disabled: false,
+};

package/dist/components/Radio/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as MantineRadio, } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- radio props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** 기타 props는 mantine radio props 사용: https://v6.mantine.dev/core/radio/?t=props
+ */
+export const Radio = ({ size = "md", ...props }) => {
+    let sizeStyle = styles.md_radio;
+    if (size === "sm") {
+        sizeStyle = styles.sm_radio;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_radio;
+    }
+    return _jsx(MantineRadio, { className: sizeStyle, size: size, ...props });
+};
+export default Radio;

package/dist/components/SearchBar/SearchBar.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchBar } from ".";
+export default {
+    title: "Core/SearchBar",
+    component: SearchBar,
+};
+const Template = (args) => _jsx(SearchBar, { ...args });
+export const defaultSearchBar = Template.bind({});
+defaultSearchBar.args = {
+    label: "label text",
+    labelPosition: "top",
+    size: "md",
+    required: false,
+    disabled: false,
+    data: ["select 1", "select 2", "select 3"],
+};

package/dist/components/SearchBar/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Input, Tooltip } from "@mantine/core";
+import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
+import ic_input_clear from "../../assets/icons/ic_input_clear.svg";
+import ic_search from "../../assets/icons/ic_search.svg";
+import styles from "./styles.module.scss";
+import { useCallback, useState } from "react";
+/**
+ * ----- search bar props -----
+ ** label?: string, 라벨
+ ** labelPosition?: "top" | "left", 라벨 위치
+ ** size?: "sm" | "md" | "lg"
+ ** tooltip?: string, 툴팁
+ ** tooltipPosition?: "top" | "bottom" | "left" | "right", 툴팁 위치
+ ** description?: string, 상세 텍스트
+ ** errorMsg?: string, 에러 메시지
+ ** onChange?: (event: any) => void
+ ** onClear?: () => void, clear button 노출시 필요
+ ** 기타 props는 mantine autocomplete props 사용: https://v6.mantine.dev/core/autocomplete/?t=props
+ */
+export const SearchBar = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, onChange, onClear, ...props }) => {
+    const [textCount, setTextCount] = useState(0);
+    let labelStyle = styles.md_label;
+    let searchBarStyle = styles.md_textfield;
+    let tooltipStyle = styles.md_tooltip;
+    if (size === "sm") {
+        labelStyle = styles.sm_label;
+        searchBarStyle = styles.sm_textfield;
+        tooltipStyle = styles.sm_tooltip;
+    }
+    else if (size === "lg") {
+        labelStyle = styles.lg_label;
+        searchBarStyle = styles.lg_textfield;
+        tooltipStyle = styles.lg_tooltip;
+    }
+    const onChangeHandler = useCallback((value) => {
+        if (onChange) {
+            setTextCount(value?.length);
+            onChange(value);
+        }
+    }, [onChange]);
+    return (_jsxs("div", { className: labelPosition === "top"
+            ? styles.top_label_textfield
+            : styles.left_label_textfield, children: [_jsxs("div", { children: [label && (_jsx(Input.Label, { required: required, className: labelStyle, children: label })), tooltip && (_jsx(Tooltip, { label: tooltip, position: tooltipPosition, children: _jsx("img", { className: tooltipStyle, src: ic_tooltip, alt: "tooltip_icon" }) }))] }), _jsxs("div", { children: [_jsx("div", { className: styles.textfield_wrapper, children: _jsx(Autocomplete, { ...props, size: size, error: errorMsg, className: searchBarStyle, onChange: onChangeHandler, icon: _jsx("img", { src: ic_search }), iconWidth: 48, rightSection: onClear && textCount > 0 ? (_jsx("div", { className: styles.clear_button, onClick: onClear, children: _jsx("img", { src: ic_input_clear }) })) : undefined }) }), description && (_jsx(Input.Description, { className: styles.input_description, children: description })), errorMsg && (_jsx(Input.Error, { className: styles.input_error_msg, children: errorMsg }))] })] }));
+};
+export default SearchBar;

package/dist/components/SegmentButton/SegmentButton.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentButton } from ".";
+export default {
+    title: "Core/SegmentButton",
+    component: SegmentButton,
+};
+const Template = (args) => (_jsx(SegmentButton, { ...args }));
+export const defaultSegmentButton = Template.bind({});
+defaultSegmentButton.args = {
+    data: ["data1", "data2", "data3"],
+    size: "md",
+    radius: 6,
+    disabled: false,
+};

package/dist/components/SegmentButton/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentedControl } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- segment button props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** radius: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ ** 기타 props는 mantine segmented control props 사용: https://v6.mantine.dev/core/segmented-control/?t=props
+ */
+export const SegmentButton = ({ size = "md", radius = 6, ...props }) => {
+    let sizeStyle = styles.md_segment_button;
+    if (size === "sm") {
+        sizeStyle = styles.sm_segment_button;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_segment_button;
+    }
+    return (_jsx(SegmentedControl, { className: sizeStyle, size: size, radius: radius, styles: {
+            control: {
+                borderWidth: "0 !important",
+            },
+        }, ...props }));
+};
+export default SegmentButton;