@team-monolith/cds 0.1.0

package/dist/patterns/Grid/EnhancedTableCell.js

@@ -0,0 +1,122 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { flexRender, } from "@tanstack/react-table";
+import { useRef, useState } from "react";
+import { css } from "@emotion/react";
+import DropdownMenu from "../Dropdown/DropdownMenu";
+import { TableCell } from "../Table";
+import styled from "@emotion/styled";
+// 두 Set의 합집합을 구하는 함수
+function union(setA, setB) {
+    var _union = new Set(setA);
+    setB.forEach(function (elem) {
+        _union.add(elem);
+    });
+    return _union;
+}
+/**
+ * Sort, Filter, Resize 등의 기능이 추가된 Cell입니다.
+ */
+export default function EnhancedTableCell(props) {
+    var _a;
+    var table = props.table, header = props.header;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var menuRef = useRef(null);
+    var filterDropdownMenu = null;
+    if (header.column.getCanFilter()) {
+        // 필터 내의 드롭다운 메뉴 아이템 정렬에서 사용할 firstValue 값
+        // 이 값이 number 타입인지, string 타입인지에 따라 아이템 정렬 함수를 다르게 설정합니다.
+        var firstValue = (_a = table
+            .getPreFilteredRowModel()
+            .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(header.column.id);
+        // 한 열에서 중복값이 제거된 고유값들을 받아옵니다.
+        var uniqueValues = header.column.getFacetedUniqueValues().keys();
+        var currentFilterValue_1 = header.column.getFilterValue();
+        // 열의 고유값의 배열과 현재 필터가 걸려있는 값의 배열들을 합집합시킵니다.
+        var filterMenuValues = Array.from(union(new Set(uniqueValues), currentFilterValue_1 !== null && currentFilterValue_1 !== void 0 ? currentFilterValue_1 : new Set()));
+        // 타입에 따라서 필터 메뉴를 오름차순 정렬합니다.
+        var sortedFilterMenuValues = typeof firstValue === "number"
+            ? filterMenuValues.sort(function (a, b) { return Number(a) - Number(b); })
+            : filterMenuValues.sort();
+        /**
+         * val 값에 해당하는 필터를 토글하는 함수
+         * 모든 값이 해제되었을때, 빈 배열이 아닌 undefined 값을 필터 값으로 설정하여야
+         * 필터가 정상적으로 해제됩니다.
+         */
+        var toggleFilterValue_1 = function (val) {
+            if (currentFilterValue_1 === null || currentFilterValue_1 === void 0 ? void 0 : currentFilterValue_1.has(val)) {
+                header.column.setFilterValue(function (old) {
+                    if (!old) {
+                        return;
+                    }
+                    var newFilterValue = new Set(old);
+                    newFilterValue.delete(val);
+                    if (newFilterValue.size === 0) {
+                        return undefined;
+                    }
+                    else {
+                        return newFilterValue;
+                    }
+                });
+            }
+            else {
+                header.column.setFilterValue(function (old) {
+                    if (!old) {
+                        return new Set().add(val);
+                    }
+                    return new Set(old).add(val);
+                });
+            }
+        };
+        filterDropdownMenu = (_jsx(DropdownMenu, { itemsProps: sortedFilterMenuValues.map(function (val) {
+                var _a;
+                return ({
+                    label: val,
+                    checkbox: true,
+                    checkboxProps: {
+                        checked: (_a = currentFilterValue_1 === null || currentFilterValue_1 === void 0 ? void 0 : currentFilterValue_1.has(val)) !== null && _a !== void 0 ? _a : false,
+                        onChange: function (event) { return toggleFilterValue_1(val); },
+                    },
+                    onClick: function () { return toggleFilterValue_1(val); },
+                });
+            }), open: open, anchorEl: menuRef.current, anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: { vertical: "top", horizontal: "right" }, onClose: function () { return setOpen(false); } }));
+    }
+    // 정렬 옵션, 현재 정렬 상태에 따라 TableCell에 전달할 sort 인자를 계산합니다.
+    var sort = header.column.getIsSorted() ||
+        (header.column.getCanSort() ? "none" : undefined);
+    // 필터 옵션, 현재 필터 상태에 따라 TableCell에 전달할 filter 인자를 계산합니다.
+    var isFilterActive = header.column.getIsFiltered() ||
+        (header.column.getCanFilter() ? false : undefined);
+    return (_jsxs(TableCell, __assign({ colSpan: header.colSpan, sort: sort, onSortClick: header.column.getToggleSortingHandler(), isFilterActive: isFilterActive, onFilterClick: function () { return setOpen(true); }, filterButttonRef: menuRef, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          width: ", "px;\n        "], ["\n          width: ", "px;\n        "])), header.getSize()),
+            // Resize 관련 속성
+            header.column.getCanResize() && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            position: relative;\n          "], ["\n            position: relative;\n          "]))),
+        ] }, { children: [header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && (_jsx(Resizer, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })), filterDropdownMenu] })));
+}
+/**
+ * Resize 핸들이 2px일때는 너무 얇아서 클릭이 어렵습니다.
+ * 따라서 4px인 클릭 영역을 먼저 만들고
+ * &::after 가상선택자를 이용하여 2px인 핸들을 그립니다.
+ */
+var Resizer = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: calc(50% - 8px);\n    height: 16px;\n    width: 4px;\n\n    cursor: col-resize;\n    user-select: none;\n    touch-action: none;\n    &::after {\n      position: absolute;\n      background: ", ";\n      content: \"\";\n      width: 2px;\n      height: 100%;\n      left: calc(50% - 2px);\n    }\n  "], ["\n    position: absolute;\n    right: 0;\n    top: calc(50% - 8px);\n    height: 16px;\n    width: 4px;\n\n    cursor: col-resize;\n    user-select: none;\n    touch-action: none;\n    &::after {\n      position: absolute;\n      background: ", ";\n      content: \"\";\n      width: 2px;\n      height: 100%;\n      left: calc(50% - 2px);\n    }\n  "])), theme.color.background.neutralAltActive);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/patterns/Grid/Grid.d.ts

@@ -0,0 +1,51 @@
+/** @jsxImportSource @emotion/react */
+import { Cell, ColumnDef, Row, RowData, Table as TableType } from "@tanstack/react-table";
+import React, { RefObject } from "react";
+import { DropdownItemProps } from "../Dropdown/DropdownItem";
+import { TableSize } from "../Table";
+export interface CellClickedEvent<TData> {
+    cell: Cell<TData, any>;
+    table: TableType<TData>;
+}
+export interface SelectedRowMenuOnClickArgs<TData> {
+    rows: Row<TData>[];
+    table: TableType<TData>;
+    setDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface GridApi<TData> {
+    table: TableType<TData>;
+}
+export interface GridProps<TData> {
+    className?: string;
+    component?: React.ElementType;
+    /** Grid API를 담는 Ref 객체 */
+    gridApiRef: RefObject<GridApi<TData>>;
+    /** Table Cell의 크기 옵션*/
+    size: TableSize;
+    /** Table의 fullWidth 여부
+     * @default true */
+    fullWidth?: boolean;
+    /** 행 Data */
+    rowData: TData[];
+    /** 열 정의 객체 */
+    columns: ColumnDef<TData, any>[];
+    /** Table의 열 크기를 resize 할 수 있는지 여부*/
+    resizable?: boolean;
+    /** 한 페이지 당 보여질 row의 갯수. 입력하지 않으면 페이지네이션이 비활성화됩니다. */
+    paginationPageSize?: number;
+    /** Cell을 클릭했을 때 호출되는 콜백 */
+    onCellClicked?: (event: CellClickedEvent<TData>) => void;
+    /** 행 선택 기능 활성화 여부 */
+    enableRowSelection?: boolean;
+    /** 행 선택 기능에서 '선택한 항목을' DropdownMenu 관련 속성 */
+    selectedRowMenuProps?: {
+        items: (Omit<DropdownItemProps, "onClick"> & {
+            onClick: (args: SelectedRowMenuOnClickArgs<TData>) => void;
+        })[];
+    };
+}
+/**
+ * CDS Table과 TanStack Table을 이용하여
+ * data-processing, state-management 등의 로직이 들어있는 컴포넌트입니다.
+ */
+export default function Grid<TData extends RowData>(props: GridProps<TData>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Grid/Grid.js

@@ -0,0 +1,140 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { useImperativeHandle, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import Pagination from "../../components/Pagination";
+import CheckboxInput from "../../components/CheckboxInput";
+import Button from "../../components/Button";
+import DropdownMenu from "../Dropdown/DropdownMenu";
+import { ArrowDropDownFillIcon } from "../../icons/arrows";
+import { Table, TableBody, TableCell, TableHead, TableRow, } from "../Table";
+import EnhancedTableCell from "./EnhancedTableCell";
+// TanStack Table의 기본 Filter 함수들은 단일 Filter 값만 지원하도록 되어있습니다.
+// CDS에서는 여러개 필터값을 선택할 수 있으므로,
+// FilterValue를 Set 형식으로 지정하고, 이 형식에 맞는 Filter 함수를 정의하여
+// 각 columnDef의 인자로 전달하여 적용합니다.
+var MultiFilterFn = function (row, columnId, filterValues) {
+    return filterValues.has(row.getValue(columnId));
+};
+/**
+ * CDS Table과 TanStack Table을 이용하여
+ * data-processing, state-management 등의 로직이 들어있는 컴포넌트입니다.
+ */
+export default function Grid(props) {
+    var _a;
+    var className = props.className, _b = props.component, Component = _b === void 0 ? "div" : _b, gridApiRef = props.gridApiRef, size = props.size, _c = props.fullWidth, fullWidth = _c === void 0 ? true : _c, rowData = props.rowData, columns = props.columns, onCellClicked = props.onCellClicked, resizable = props.resizable, selectedRowMenuProps = props.selectedRowMenuProps, paginationPageSize = props.paginationPageSize, enableRowSelection = props.enableRowSelection;
+    var _d = useState([]), sorting = _d[0], setSorting = _d[1];
+    var _e = useState({}), rowSelection = _e[0], setRowSelection = _e[1];
+    var _f = useState([]), columnFilters = _f[0], setColumnFilters = _f[1];
+    var _g = useState({
+        pageIndex: 0,
+        pageSize: 0,
+    }), pageIndex = _g[0].pageIndex, setPagination = _g[1];
+    var _h = useState(false), selectedRowMenuOpen = _h[0], setSelectedRowMenuOpen = _h[1];
+    // resize가 활성화 되었을 때만 전달되는 Table Option
+    var resizeOption = resizable
+        ? {
+            enableColumnResizing: true,
+            columnResizeMode: "onChange",
+        }
+        : { enableColumnResizing: false };
+    // rowSelection이 활성화 되었을 때만 전달되는 Table Option
+    var rowSelectionOption = enableRowSelection
+        ? {
+            enableRowSelection: true,
+            onRowSelectionChange: setRowSelection,
+        }
+        : {};
+    // rowSelection이 활성화 되었을 때, 다음 column을 가장 처음 열에 추가합니다.
+    var selectColumn = {
+        id: "grid-selectable-column",
+        header: function (_a) {
+            var table = _a.table;
+            return (_jsx(CheckboxInput, { checked: table.getIsAllRowsSelected(), partial: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() }));
+        },
+        cell: function (_a) {
+            var row = _a.row;
+            return (_jsx(CheckboxInput, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), partial: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler() }));
+        },
+        enableResizing: false,
+        enableColumnFilter: false,
+        enableSorting: false,
+        size: 0,
+    };
+    // pagination이 활성화 되었을 때만 전달되는 Table Option
+    var paginationOption = paginationPageSize
+        ? {
+            onPaginationChange: setPagination,
+            getPaginationRowModel: getPaginationRowModel(),
+        }
+        : {};
+    var pagination = {
+        pageIndex: pageIndex,
+        pageSize: paginationPageSize !== null && paginationPageSize !== void 0 ? paginationPageSize : 0,
+    };
+    // 여러 값으로 된 필터를 선택할 수 있도록 filterFn을 교체합니다.
+    var columnWithFilterFn = columns.map(function (colDef) { return (__assign(__assign({}, colDef), { filterFn: MultiFilterFn })); });
+    var table = useReactTable(__assign(__assign(__assign(__assign({ data: rowData, columns: enableRowSelection
+            ? __spreadArray([selectColumn], columnWithFilterFn, true) : columnWithFilterFn, state: {
+            columnFilters: columnFilters,
+            sorting: sorting,
+            rowSelection: rowSelection,
+            pagination: pagination,
+        } }, resizeOption), rowSelectionOption), paginationOption), { getCoreRowModel: getCoreRowModel(), onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), onColumnFiltersChange: setColumnFilters, getFilteredRowModel: getFilteredRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues() }));
+    useImperativeHandle(gridApiRef, function () { return ({
+        table: table,
+    }); });
+    var enablePagination = Boolean(paginationPageSize);
+    var menuRef = useRef(null);
+    // selectedRowMenuProps의 onClick 인자에 rows, table, setDropdownOpen을 전달하여
+    // 콜백 내부에서 접근 가능하게 합니다.
+    var itemProps = (_a = selectedRowMenuProps === null || selectedRowMenuProps === void 0 ? void 0 : selectedRowMenuProps.items.map(function (itemProp) {
+        return __assign(__assign({}, itemProp), { onClick: function () {
+                itemProp.onClick({
+                    rows: table.getSelectedRowModel().flatRows,
+                    table: table,
+                    setDropdownOpen: setSelectedRowMenuOpen,
+                });
+            } });
+    })) !== null && _a !== void 0 ? _a : [];
+    return (_jsxs(Component, __assign({ className: className, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: inline-flex;\n          flex-direction: column;\n        "], ["\n          display: inline-flex;\n          flex-direction: column;\n        "]))),
+            fullWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            width: 100%;\n          "], ["\n            width: 100%;\n          "]))),
+        ] }, { children: [_jsx("div", __assign({ css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          // Table\uC744 div\uC73C\uB85C \uAC10\uC2F8 overflow \uC18D\uC131\uC744 \uCD94\uAC00\uD558\uC5EC \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD558\uAC8C \uD569\uB2C8\uB2E4.\n          // Table \uC790\uCCB4\uC5D0 css\uB97C \uC801\uC6A9\uD558\uBA74 display: table \uC18D\uC131\uC73C\uB85C \uC778\uD574 \uC801\uC6A9\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n          overflow: auto;\n        "], ["\n          // Table\uC744 div\uC73C\uB85C \uAC10\uC2F8 overflow \uC18D\uC131\uC744 \uCD94\uAC00\uD558\uC5EC \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD558\uAC8C \uD569\uB2C8\uB2E4.\n          // Table \uC790\uCCB4\uC5D0 css\uB97C \uC801\uC6A9\uD558\uBA74 display: table \uC18D\uC131\uC73C\uB85C \uC778\uD574 \uC801\uC6A9\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n          overflow: auto;\n        "]))) }, { children: _jsxs(Table, __assign({}, { size: size, fullWidth: fullWidth }, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { children: headerGroup.headers.map(function (header) { return (_jsx(EnhancedTableCell, { table: table, header: header }, header.id)); }) }, headerGroup.id)); }) }), _jsxs(TableBody, { children: [table.getRowModel().rows.length === 0 && (_jsx(TableRow, __assign({ disableHover: true }, { children: _jsx(TableCell, __assign({ colSpan: table.getAllColumns().length, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    text-align: center;\n                  "], ["\n                    text-align: center;\n                  "]))) }, { children: "\uB370\uC774\uD130\uAC00 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })) }))), table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, __assign({ isSelected: row.getIsSelected() }, { children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, __assign({ onClick: function () { return onCellClicked === null || onCellClicked === void 0 ? void 0 : onCellClicked({ cell: cell, table: table }); } }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id)); }) }), row.id)); })] })] })) })), (enableRowSelection || enablePagination) && (_jsxs(TableFooter, __assign({ enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : false, enablePagination: enablePagination }, { children: [enableRowSelection && (_jsxs(_Fragment, { children: [_jsx(Button, { color: "secondary", size: "small", label: "\uC120\uD0DD\uD55C \uD56D\uBAA9\uC744", ref: menuRef, endIcon: _jsx(ArrowDropDownFillIcon, {}), disabled: !(table.getIsAllRowsSelected() ||
+                                    table.getIsSomeRowsSelected()), onClick: function () { return setSelectedRowMenuOpen(true); } }), _jsx(DropdownMenu, { itemsProps: itemProps, open: selectedRowMenuOpen, anchorEl: menuRef.current, onClose: function () { return setSelectedRowMenuOpen(false); } })] })), enablePagination && (_jsx(Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: function (event, page) {
+                            table.setPageIndex(page - 1);
+                        } }))] })))] })));
+}
+var TableFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  ", "\n  margin: 16px 12px;\n"], ["\n  display: flex;\n  align-items: center;\n\n  ", "\n  margin: 16px 12px;\n"])), function (_a) {
+    var enableRowSelection = _a.enableRowSelection, enablePagination = _a.enablePagination;
+    return !enablePagination
+        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          justify-content: flex-start;\n        "], ["\n          justify-content: flex-start;\n        "]))) : enableRowSelection
+        ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/patterns/Grid/index.d.ts

@@ -0,0 +1,3 @@
+import Grid from "./Grid";
+export type { GridProps, GridApi, CellClickedEvent } from "./Grid";
+export default Grid;

package/dist/patterns/Grid/index.js

@@ -0,0 +1,2 @@
+import Grid from "./Grid";
+export default Grid;

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "../../components/Button";
+export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+    value: string;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlButton(props: SegmentedControlButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -0,0 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import Button from "../../components/Button";
+import shadows from "../../foundation/shadows";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlButton(props) {
+    var context = useContext(SegmentedControlGroupPropsContext);
+    var isActive = context.multiSelect ? context.value.includes(props.value) : context.value === props.value;
+    return (_jsx(StyledButton, __assign({}, props, { isActive: isActive, color: isActive ? "primary" : "textNeutral", size: context.size, onClick: function () {
+            var _a, _b;
+            (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
+            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+        } })));
+}
+var StyledButton = styled(Button, {
+    shouldForwardProp: function (prop) { return prop !== "isActive"; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "box-shadow: ".concat(shadows.shadow04, ";");
+});
+var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { ButtonSize } from "../../components/Button";
+import { SquareButtonSize } from "../../components/SquareButton";
+export type SegmentedControlGroupProps = {
+    className?: string;
+    component?: React.ElementType;
+    children?: React.ReactNode;
+    /** 컴포넌트 크기 */
+    size: ButtonSize | SquareButtonSize;
+    /** 전체 너비 유무 */
+    fullWidth?: boolean;
+} & ({
+    /** 중복 선택 가능 유무 */
+    multiSelect?: false;
+    /** 선택된 값 */
+    value: string | undefined;
+    onChange?: (newValue: string) => void;
+} | {
+    multiSelect: true;
+    value: string[];
+    onChange?: (newValue: string[]) => void;
+});
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlGroup(props: SegmentedControlGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlGroup(props) {
+    var _a = props.component, Component = _a === void 0 ? "div" : _a, className = props.className, children = props.children, fullWidth = props.fullWidth, multiSelect = props.multiSelect;
+    var theme = useTheme();
+    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "], ["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
+                    var _a, _b, _c;
+                    if (multiSelect) {
+                        if (props.value.includes(newValue)) {
+                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.value.filter(function (value) { return value !== newValue; }));
+                        }
+                        else {
+                            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __spreadArray(__spreadArray([], props.value, true), [newValue], false));
+                        }
+                    }
+                    else {
+                        (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue);
+                    }
+                } }) }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SegmentedControlGroupProps } from "./SegmentedControlGroup";
+export declare const SegmentedControlGroupPropsContext: import("react").Context<SegmentedControlGroupProps & {
+    onClick?: ((newValue: string) => void) | undefined;
+}>;

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+export var SegmentedControlGroupPropsContext = createContext({
+    value: undefined,
+    size: "medium",
+});

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -0,0 +1,8 @@
+import { SquareButtonProps } from "../../components/SquareButton";
+export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
+    value: string;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlSquareButton(props: SegmentedControlSquareButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import SquareButton from "../../components/SquareButton";
+import shadows from "../../foundation/shadows";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlSquareButton(props) {
+    var context = useContext(SegmentedControlGroupPropsContext);
+    var isActive = context.multiSelect
+        ? context.value.includes(props.value)
+        : context.value === props.value;
+    return (_jsx(StyledSquareButton, __assign({}, props, { isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: function () {
+            var _a;
+            if (context.onClick) {
+                context.onClick(props.value);
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        } })));
+}
+var StyledSquareButton = styled(SquareButton, {
+    shouldForwardProp: function (prop) { return prop !== "isActive"; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "box-shadow: ".concat(shadows.shadow04, ";");
+});
+var templateObject_1;

package/dist/patterns/SegmentedControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SegmentedControlGroup';
+export * from './SegmentedControlButton';
+export * from './SegmentedControlSquareButton';

package/dist/patterns/SegmentedControl/index.js

@@ -0,0 +1,3 @@
+export * from './SegmentedControlGroup';
+export * from './SegmentedControlButton';
+export * from './SegmentedControlSquareButton';

package/dist/patterns/Table/Table.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type TableSize = "large" | "medium" | "small";
+export interface TableProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 `TableHead`와 `TableBody`로 구성됩니다. */
+    children?: React.ReactNode;
+    /** Table Row 사이즈 */
+    size: TableSize;
+    /** fullWidth 여부 */
+    fullWidth?: boolean;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-91732&t=07ngLzGHuU3xxg4S-0)
+ */
+export default function Table(props: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/Table.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { RESET_TABLE } from "../../utils/reset";
+import TableSizeContext from "./TableSizeContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-91732&t=07ngLzGHuU3xxg4S-0)
+ */
+export default function Table(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "table" : _a, children = props.children, size = props.size, fullWidth = props.fullWidth;
+    var theme = useTheme();
+    return (_jsx(Component, __assign({ className: className, css: [
+            RESET_TABLE,
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-collapse: separate;\n\n          background: ", ";\n          border: 1px solid ", ";\n          color: ", ";\n          border-radius: 4px;\n        "], ["\n          border-collapse: separate;\n\n          background: ", ";\n          border: 1px solid ", ";\n          color: ", ";\n          border-radius: 4px;\n        "])), theme.color.background.neutralBase, theme.color.background.neutralAlt, theme.color.foreground.neutralBase),
+            fullWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            width: 100%;\n          "], ["\n            width: 100%;\n          "]))),
+        ] }, { children: _jsx(TableSizeContext.Provider, __assign({ value: { size: size } }, { children: children })) })));
+}
+var templateObject_1, templateObject_2;

package/dist/patterns/Table/TableBody.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface TableBodyProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 TableRow로 구성됩니다. */
+    children?: React.ReactNode;
+}
+export default function TableBody(props: TableBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableBody.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import TableVariantContext from "./TableVariantContext";
+export default function TableBody(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "tbody" : _a, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-row-group;\n        "], ["\n          display: table-row-group;\n        "]))),
+        ] }, { children: _jsx(TableVariantContext.Provider, __assign({ value: { variant: "body" } }, { children: children })) })));
+}
+var templateObject_1;