@pop-ui/core 0.0.10

package/dist/components/Tab/Tab.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tab } from ".";
+export default {
+    title: "Core/Tab",
+    component: Tab,
+};
+const Template = (args) => _jsx(Tab, { ...args });
+export const defaultTab = Template.bind({});
+defaultTab.args = {
+    tabList: [
+        {
+            title: "tab title 1",
+            value: "default tab 1",
+            body: _jsx(_Fragment, { children: "default tab body 1" }),
+        },
+        {
+            title: "tab title 2",
+            value: "default tab 2",
+            body: _jsx(_Fragment, { children: "default tab body 2" }),
+        },
+        {
+            title: "tab title 3",
+            value: "default tab 3",
+            body: _jsx(_Fragment, { children: "default tab body 3" }),
+        },
+    ],
+    defaultValue: "default tab 1",
+};

package/dist/components/Tab/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- tab props -----
+ ** tabList: {
+      title: string;
+      value: string;
+      body: ReactNode;
+      icon?: ReactNode;
+    }[];
+ ** containerPaddingTop?: "xs" | "sm" | "md" | "lg" | "xl";
+ ** 기타 props는 mantine tabs props 사용: https://v6.mantine.dev/core/tabs/?t=props
+ */
+export const Tab = ({ tabList = [], containerPaddingTop, ...props }) => {
+    return (_jsxs(Tabs, { ...props, children: [_jsx(Tabs.List, { className: styles.tab_title_list, children: tabList?.map((tab, index) => (_jsxs(Tabs.Tab, { value: tab.value, icon: tab.icon, children: [tab.title, _jsx("div", { className: styles.border_bottom })] }, `tab_${index}`))) }), tabList?.map((tab, index) => (_jsx(Tabs.Panel, { value: tab.value, pt: containerPaddingTop, children: tab.body }, `tab_panel_${index}`)))] }));
+};
+export default Tab;

package/dist/components/Table/Table.stories.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from ".";
+export default {
+    title: "Core/Table",
+    component: Table,
+};
+const Template = (args) => _jsx(Table, { ...args });
+export const defaultTable = Template.bind({});
+defaultTable.args = {
+    headerList: ["전기", "불", "물", "풀"],
+    striped: true,
+    draggable: false,
+    tableData: [
+        {
+            electric: { cell: "피츄", sortTarget: "피츄" },
+            fire: { cell: "파이리", sortTarget: "파이리" },
+            water: { cell: "꼬부기", sortTarget: "꼬부기" },
+            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
+        },
+        {
+            electric: { cell: "피카츄", sortTarget: "피카츄" },
+            fire: { cell: "리자드", sortTarget: "리자드" },
+            water: { cell: "어니부기", sortTarget: "어니부기" },
+            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
+        },
+        {
+            electric: { cell: "라이츄", sortTarget: "라이츄" },
+            fire: { cell: "리자몽", sortTarget: "리자몽" },
+            water: { cell: "거북왕", sortTarget: "거북왕" },
+            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
+        },
+        {
+            electric: { cell: "찌리리공", sortTarget: "찌리리공" },
+            fire: { cell: "식스테일", sortTarget: "식스테일" },
+            water: { cell: "갸라도스", sortTarget: "갸라도스" },
+            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
+        },
+    ],
+};
+export const sortableTable = Template.bind({});
+sortableTable.args = {
+    headerList: ["전기", "불", "물", "풀", "순번", "선택(정렬테스트용)"],
+    striped: true,
+    sortable: true,
+    tableData: [
+        {
+            electric: { cell: "피츄", sortTarget: "피츄" },
+            fire: { cell: "파이리", sortTarget: "파이리" },
+            water: { cell: "꼬부기", sortTarget: "꼬부기" },
+            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
+            num: { cell: 1, sortTarget: 1 },
+            select: {
+                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: true }),
+                sortTarget: true,
+            },
+        },
+        {
+            electric: { cell: "피카츄", sortTarget: "피카츄" },
+            fire: { cell: "리자드", sortTarget: "리자드" },
+            water: { cell: "어니부기", sortTarget: "어니부기" },
+            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
+            num: { cell: 2, sortTarget: 2 },
+            select: {
+                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: false }),
+                sortTarget: false,
+            },
+        },
+        {
+            electric: { cell: "라이츄", sortTarget: "라이츄" },
+            fire: { cell: "리자몽", sortTarget: "리자몽" },
+            water: { cell: "거북왕", sortTarget: "거북왕" },
+            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
+            num: { cell: 3, sortTarget: 3 },
+            select: {
+                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: true }),
+                sortTarget: true,
+            },
+        },
+        {
+            electric: { cell: "찌리리공", sortTarget: "찌리리공" },
+            fire: { cell: "식스테일", sortTarget: "식스테일" },
+            water: { cell: "갸라도스", sortTarget: "갸라도스" },
+            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
+            num: { cell: 4, sortTarget: 4 },
+            select: {
+                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: false }),
+                sortTarget: false,
+            },
+        },
+    ],
+};
+export const draggableTable = Template.bind({});
+draggableTable.args = {
+    headerList: ["전기", "불", "물", "풀"],
+    striped: true,
+    sortable: false,
+    draggable: true,
+    onDragEnd: (rows) => {
+        console.log(rows);
+    },
+    tableData: [
+        {
+            electric: { cell: "피츄", sortTarget: "피츄", dndId: 0 },
+            fire: { cell: "파이리", sortTarget: "파이리" },
+            water: { cell: "꼬부기", sortTarget: "꼬부기" },
+            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
+        },
+        {
+            electric: { cell: "피카츄", sortTarget: "피카츄", dndId: 1 },
+            fire: { cell: "리자드", sortTarget: "리자드" },
+            water: { cell: "어니부기", sortTarget: "어니부기" },
+            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
+        },
+        {
+            electric: { cell: "라이츄", sortTarget: "라이츄", dndId: 2 },
+            fire: { cell: "리자몽", sortTarget: "리자몽" },
+            water: { cell: "거북왕", sortTarget: "거북왕" },
+            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
+        },
+        {
+            electric: { cell: "찌리리공", sortTarget: "찌리리공", dndId: 3 },
+            fire: { cell: "식스테일", sortTarget: "식스테일" },
+            water: { cell: "갸라도스", sortTarget: "갸라도스" },
+            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
+        },
+    ],
+};

package/dist/components/Table/index.js

@@ -0,0 +1,129 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+import { useCallback, useMemo, useState } from "react";
+import { DragDropContext, Draggable, Droppable, } from "react-beautiful-dnd";
+import ic_sortable from "../../assets/icons/ic_sortable.svg";
+import ic_chevron_up from "../../assets/icons/ic_chevron_up.svg";
+import ic_chevron_down from "../../assets/icons/ic_chevron_down.svg";
+import ic_drag from "../../assets/icons/ic_drag.svg";
+/**
+ * ----- table props -----
+ ** tableId: 드래그앤드롭에 사용하는 고유한 id
+ ** headerList: ReactNode[]인 헤더 리스트
+ ** tableData: {
+      [key:string]: {
+        cell:ReactNode;
+        sortTarget: string | number | boolean;
+        dndId:(사용시, 첫번째 key value에선 필수) string | number;
+        trClassName:(사용시, 첫번째 key value에선 필수) string;
+      }
+    }[]
+ ** sortable: 정렬 가능여부
+ ** draggable: 드래그앤드롭 가능여부
+ ** striped: stripe 스타일 적용 여부
+ ** onDragEnd: 드래그앤드롭 이후, 새로 정렬된 dndId list return
+ ** className: table custom style 적용 필요시 사용
+ */
+export const Table = ({ tableId, headerList, tableData, sortable, draggable = false, striped, onDragEnd, className, }) => {
+    const [rows, setRows] = useState();
+    const [sortedColIndex, setSortedColIndex] = useState();
+    const [sortedDirection, setSortedDirection] = useState();
+    const rowMaker = useCallback((sortedData) => {
+        const tableRows = sortedData?.map((data, index) => {
+            const dataKeys = Object.keys(data);
+            const row = (_jsx(_Fragment, { children: dataKeys.map((key, keyIndex) => (_jsx("td", { className: styles.td_cell, children: data[key].cell }, `table_${tableId || 0}_tr_${index}_col_${keyIndex}`))) }));
+            if (draggable && data[dataKeys[0]]?.dndId === undefined) {
+                console.error("draggable table을 사용할 때엔 tableData의 첫번째 필드에 고유한 dndId를 설정해주세요");
+            }
+            return {
+                row: row,
+                dndId: data[dataKeys[0]]?.dndId,
+                trClassName: data[dataKeys[0]]?.trClassName,
+            };
+        });
+        setRows(tableRows);
+    }, [draggable, tableId]);
+    useMemo(() => {
+        // 테이블 데이터 변경시, sort option 삭제
+        setSortedColIndex(undefined);
+        setSortedDirection(undefined);
+        rowMaker(tableData);
+    }, [rowMaker, tableData]);
+    const sortingHandler = useCallback((colIndex) => {
+        if (tableData) {
+            const copyArr = tableData.slice(0);
+            // 정렬 기준 키
+            const sortBy = Object.keys(copyArr[0])[colIndex];
+            setSortedColIndex(colIndex);
+            let newSortedData;
+            /*
+              정렬 순서
+                1. 내림차순
+                2. 오름차순
+                3. 초기화
+              1, 2, 3을 반복
+            */
+            if (!sortedDirection) {
+                newSortedData = copyArr?.sort((a, b) => String(b[sortBy].sortTarget || b[sortBy].cell).localeCompare(String(a[sortBy].sortTarget || a[sortBy].cell)));
+                setSortedDirection("desc");
+            }
+            else if (sortedDirection === "desc") {
+                newSortedData = copyArr?.sort((a, b) => String(a[sortBy].sortTarget || a[sortBy].cell).localeCompare(String(b[sortBy].sortTarget || b[sortBy].cell)));
+                setSortedDirection("asc");
+            }
+            else {
+                newSortedData = copyArr;
+                setSortedColIndex(undefined);
+                setSortedDirection(undefined);
+            }
+            rowMaker(newSortedData);
+        }
+    }, [rowMaker, sortedDirection, tableData]);
+    const sortableArrow = useCallback((index) => {
+        if (!sortable) {
+            return null;
+        }
+        if (sortedColIndex === index) {
+            if (sortedDirection === "desc") {
+                return _jsx("img", { src: ic_chevron_down, alt: "ic_chevron_down" });
+            }
+            return _jsx("img", { src: ic_chevron_up, alt: "ic_chevron_up" });
+        }
+        else {
+            return _jsx("img", { src: ic_sortable, alt: "ic_sortable" });
+        }
+    }, [sortable, sortedColIndex, sortedDirection]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const reorder = useCallback((list, item, insertIdx) => {
+        const result = Array.from(list);
+        result.splice(insertIdx, 0, item);
+        return result;
+    }, []);
+    const onDragEndHandler = useCallback((result) => {
+        //  영역 밖에 drop한 경우
+        if (!result.destination) {
+            return;
+        }
+        // rows가 존재하지 않는 경우
+        if (!rows) {
+            return;
+        }
+        // reorder 처리를 위한 temp value 선언
+        const duplRows = rows?.slice(0);
+        const [newItem] = duplRows.splice(result.source.index, 1);
+        const items = reorder(duplRows, newItem, result.destination.index);
+        setRows(items);
+        if (onDragEnd) {
+            onDragEnd(items.map((el) => ({ dndId: el?.dndId })));
+        }
+    }, [onDragEnd, reorder, rows]);
+    return (_jsxs("table", { className: `${styles.table} ${className || ""}`, children: [_jsx("thead", { children: _jsxs("tr", { children: [draggable && (_jsx("th", { className: styles.th_cell, style: { padding: 0 } })), headerList?.map((header, index) => (_jsx("th", { className: sortable ? styles.th_cell_sortable : styles.th_cell, onClick: () => {
+                                if (sortable) {
+                                    sortingHandler(index);
+                                }
+                            }, children: _jsxs("div", { children: [header, sortableArrow(index)] }) }, `table_header_col_${index}`)))] }) }), _jsx(DragDropContext, { onDragEnd: onDragEndHandler, children: _jsx(Droppable, { droppableId: `dnd_table_${tableId || 0}_drop_zone`, children: (dropProvided) => (_jsxs("tbody", { ref: dropProvided.innerRef, ...dropProvided.droppableProps, children: [rows?.map((rowData, index) => (_jsx(Draggable, { draggableId: `dnd_table_${tableId || 0}_drag_item_${rowData?.dndId}`, index: index, isDragDisabled: !draggable, children: (dragProvided) => (_createElement("tr", { ...dragProvided.dragHandleProps, ...dragProvided.draggableProps, ref: dragProvided.innerRef, key: `table_${tableId || 0}_tr_${index}`, className: `${striped && index % 2 === 1 ? styles.tr_gray : ""} ${rowData.trClassName}` },
+                                    draggable && (_jsx("td", { className: styles.td_cell, style: { padding: 0 }, children: _jsx("div", { children: _jsx("img", { src: ic_drag, alt: "ic_drag" }) }) })),
+                                    rowData?.row)) }, `dnd_table_${tableId || 0}_drag_item_${rowData?.dndId !== undefined ? rowData.dndId : index}`))), dropProvided.placeholder] })) }) })] }));
+};
+export default Table;

package/dist/components/TextField/TextField.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from ".";
+export default {
+    title: "Core/TextField",
+    component: TextField,
+};
+const Template = (args) => _jsx(TextField, { ...args });
+export const LabelTextField = Template.bind({});
+LabelTextField.args = {
+    label: "label text",
+    labelPosition: "top",
+    size: "md",
+    required: false,
+    disabled: false,
+};
+export const ToolTipTextField = Template.bind({});
+ToolTipTextField.args = {
+    label: "label text",
+    labelPosition: "top",
+    tooltip: "tootip text",
+    tooltipPosition: "top",
+    size: "md",
+    required: false,
+    disabled: false,
+};
+export const Textarea = Template.bind({});
+Textarea.args = {
+    label: "label text",
+    labelPosition: "top",
+    size: "md",
+    required: false,
+    disabled: false,
+    textarea: true,
+    minRows: 4,
+    maxTextCount: 100,
+};

package/dist/components/TextField/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Textarea, 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 styles from "./styles.module.scss";
+import { useCallback, useState } from "react";
+/**
+ * ----- textfield props -----
+ ** label: string, 라벨
+ ** labelPosition: "top" | "left", 라벨 위치
+ ** size: "sm" | "md" | "lg"
+ ** required: boolean, 필수 입력여부
+ ** tooltip: string, 툴팁
+ ** tooltipPosition: "top" | "bottom" | "left" | "right", 툴팁 위치
+ ** description: string, 상세 텍스트
+ ** errorMsg: string, 에러 메시지
+ ** textarea: boolean, textarea element로 사용할지 여부
+ ** minRows: number, textarea element 사용시, height 대신 사용
+ ** maxTextCount: number, 최대 텍스트 제한
+ ** onChange: (event: any) => void
+ ** onClear: () => void
+ ** 기타 props는 mantine input props 사용: https://v6.mantine.dev/core/input/?t=props
+ */
+export const TextField = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, textarea = false, minRows, maxTextCount, onChange, onClear, ...props }) => {
+    const [textCount, setTextCount] = useState(0);
+    let labelStyle = styles.md_label;
+    let textfieldStyle = styles.md_textfield;
+    let tooltipStyle = styles.md_tooltip;
+    if (size === "sm") {
+        labelStyle = styles.sm_label;
+        textfieldStyle = styles.sm_textfield;
+        tooltipStyle = styles.sm_tooltip;
+    }
+    else if (size === "lg") {
+        labelStyle = styles.lg_label;
+        textfieldStyle = styles.lg_textfield;
+        tooltipStyle = styles.lg_tooltip;
+    }
+    const onChangeHandler = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (event) => {
+        if (maxTextCount) {
+            if (event.currentTarget?.value?.length > maxTextCount) {
+                return;
+            }
+            setTextCount(event.currentTarget?.value?.length);
+            if (onChange) {
+                onChange(event);
+            }
+        }
+        if (onChange) {
+            setTextCount(event.currentTarget?.value?.length);
+            onChange(event);
+        }
+    }, [maxTextCount, 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: [_jsxs("div", { className: styles.textfield_wrapper, children: [textarea ? (_jsx(Textarea, { className: styles.textarea, size: size, minRows: minRows, error: errorMsg, onChange: onChangeHandler, disabled: props?.disabled, ...props })) : (_jsx(Input, { className: textfieldStyle, error: errorMsg, onChange: onChangeHandler, rightSection: onClear && textCount > 0 ? (_jsx("div", { className: styles.clear_button, onClick: onClear, children: _jsx("img", { src: ic_input_clear }) })) : undefined, ...props })), maxTextCount && maxTextCount > 0 && (_jsx("span", { className: styles.text_counter, children: `${textCount}/${maxTextCount}` }))] }), description && (_jsx(Input.Description, { className: styles.input_description, children: description })), errorMsg && (_jsx(Input.Error, { className: styles.input_error_msg, children: errorMsg }))] })] }));
+};
+export default TextField;

package/dist/components/TimePicker/TimePicker.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimePicker } from ".";
+export default {
+    title: "Core/TimePicker",
+    component: TimePicker,
+};
+const Template = (args) => _jsx(TimePicker, { ...args });
+export const defaultTimePicker = Template.bind({});
+defaultTimePicker.args = {
+    size: "md",
+    disabled: false,
+    defaultValue: `${new Date().getHours()}:${new Date().getMinutes()}`,
+};

package/dist/components/TimePicker/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ActionIcon } from "@mantine/core";
+import { TimeInput } from "@mantine/dates";
+import ic_clock from "../../assets/icons/ic_clock.svg";
+import styles from "./styles.module.scss";
+/**
+ * ----- time picker props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** 기타 props는 mantine time input props 사용: https://v6.mantine.dev/dates/time-input/?t=props
+ */
+export const TimePicker = ({ size = "md", ...props }) => {
+    const timeInputRef = useRef(null);
+    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;
+    }
+    return (_jsx(TimeInput, { ref: timeInputRef, className: sizeStyle, size: size, ...props, rightSection: _jsx(ActionIcon, { onClick: () => {
+                if (timeInputRef) {
+                    timeInputRef?.current?.showPicker();
+                }
+            }, children: _jsx("img", { width: iconSize, src: ic_clock, alt: "clock_icon" }) }) }));
+};
+export default TimePicker;

package/dist/components/Toggle/Toggle.stories.js

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

package/dist/components/Toggle/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch } from "@mantine/core";
+import styles from "./styles.module.scss";
+import { useCallback, useState } from "react";
+/**
+ * ----- toggle props -----
+ ** size: 'sm' | 'md' | 'lg'
+ ** labelPosition: 'left' | 'right', 라벨 위치
+ ** disabled: boolean
+ ** onChange: (event) => void
+ ** 기타 props는 mantine switch props 사용: https://v6.mantine.dev/core/switch/?t=props
+ */
+export const Toggle = ({ size = "md", labelPosition = "right", disabled, onChange, ...props }) => {
+    const [isChecked, setIsChecked] = useState(props?.checked || false);
+    let sizeStyle = styles.md_toggle;
+    let trackWidth = 50;
+    if (size === "sm") {
+        sizeStyle = styles.sm_toggle;
+        trackWidth = 38;
+    }
+    else if (size === "lg") {
+        sizeStyle = styles.lg_toggle;
+        trackWidth = 67;
+    }
+    const onChangeHandler = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (event) => {
+        if (onChange) {
+            onChange(event);
+        }
+        setIsChecked(event?.target?.checked);
+    }, [onChange]);
+    return (_jsx(Switch, { className: sizeStyle, size: size, labelPosition: labelPosition, disabled: disabled, onChange: onChangeHandler, styles: () => ({
+            track: {
+                backgroundColor: !disabled && isChecked ? "#0fd3d8 !important" : undefined,
+                borderColor: !disabled && isChecked ? "#0fd3d8 !important" : undefined,
+                width: trackWidth,
+            },
+        }), ...props }));
+};
+export default Toggle;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from ".";
+export default {
+    title: "Core/Tooltip",
+    component: Tooltip,
+};
+const Template = (args) => _jsx(Tooltip, { ...args });
+export const defaultTooltip = Template.bind({});
+defaultTooltip.args = {
+    title: "tooltip title",
+    content: "tooltip content content content content content content content content content content content",
+    maw: 220,
+    multiline: true,
+    position: "top",
+    children: (_jsx("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 280,
+            height: 50,
+            background: "#e0e0e0",
+            fontSize: 25,
+        }, children: "hover me" })),
+};

package/dist/components/Tooltip/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as MantineTooltip, } from "@mantine/core";
+import styles from "./styles.module.scss";
+/**
+ * ----- tooltip props -----
+ ** title: string
+ ** content: string
+ ** 기타 props는 mantine tooltip props 사용: https://v6.mantine.dev/core/tooltip/?t=props
+ */
+export const Tooltip = ({ title, content, maw = 280, multiline = true, ...props }) => {
+    return (_jsx(MantineTooltip, { ...props, maw: maw, multiline: multiline, label: _jsxs("div", { className: styles.tooltip_body, children: [title && _jsx("span", { className: styles.tooltip_title, children: title }), _jsx("span", { className: styles.tooltip_content, children: content })] }) }));
+};
+export default Tooltip;

package/dist/components/index.js

@@ -0,0 +1,17 @@
+export { default as Button } from "./Button";
+export { TextField } from "./TextField";
+export { SearchBar } from "./SearchBar";
+export { Dropdown } from "./Dropdown";
+export { Checkbox } from "./Checkbox";
+export { Radio } from "./Radio";
+export { Toggle } from "./Toggle";
+export { DatePicker } from "./DatePicker";
+export { TimePicker } from "./TimePicker";
+export { Pagination } from "./Pagination";
+export { Tab } from "./Tab";
+export { SegmentButton } from "./SegmentButton";
+export { Alert } from "./Alert";
+export { Tooltip } from "./Tooltip";
+export { Table } from "./Table";
+export { Modal } from "./Modal";
+export { ImageUploader } from "./ImageUploader";