sales-frontend-components 0.0.4 → 0.0.6

package/dist/data-table/data-table.module.scss

@@ -0,0 +1,109 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+// 🎨 루트 컨테이너 및 스크롤
+.root {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid colors(border-neutral_3);
+  border-bottom: none;
+  // height가 지정되면 sticky 모드로 동작
+  &.sticky {
+    overflow: auto; // 이 컨테이너가 스크롤을 가짐
+    border-bottom: 1px solid colors(border-neutral_3);
+  }
+}
+
+// 🎨 기본 테이블 레이아웃
+.table {
+  width: 100%;
+  color: colors(text-body_1);
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  @include apply-typography(body3);
+}
+
+// 🎨 테이블 헤더
+.table-head {
+  color: colors(text-body_2);
+  background-color: colors(surface-neutral_1); // 스크롤 시 아래 내용이 비치지 않도록 배경색 지정
+  // Sticky 헤더 스타일
+  &.sticky th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  @include apply-typography(body4);
+}
+
+// 🎨 테이블 셀 공통 스타일
+.table-head-cell {
+  position: relative; // 리사이징 핸들 위치의 기준
+  height: 40px;
+  text-align: center;
+  // ✅ box-shadow로 위쪽 테두리까지 추가
+  box-shadow:
+    inset 0 1px 0 colors(border-neutral_3),
+    inset 0 -1px 0 colors(border-neutral_3);
+
+  // 리사이징 중일 때 시각적 피드백
+  &.is-resizing {
+    color: colors(text-body_1);
+    background-color: colors(surface-neutral_3);
+  }
+}
+
+.table-head-cell,
+.table-data-cell {
+  // 너비를 초과하는 텍스트는 말줄임표로 표시
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // ✅ 세로선 추가
+  border-right: 1px solid colors(border-neutral_3);
+  // ✅ box-shadow로 아래쪽 테두리 대체
+  box-shadow: inset 0 -1px 0 colors(border-neutral_3);
+  // ✅ 마지막 셀의 오른쪽 세로선 제거
+  &:last-child {
+    border-right: none;
+  }
+}
+
+// 🎨 리사이징 핸들 스타일
+.resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px; // 핸들 너비 (실제로는 투명)
+  height: 100%;
+  touch-action: none; // 모바일 터치 이벤트 제어
+  cursor: col-resize; // 커서 모양 변경
+  user-select: none; // 드래그 중 텍스트 선택 방지
+
+  // 핸들 오른쪽에 구분선 효과 추가
+  // &::after {
+  //   position: absolute;
+  //   top: 25%;
+  //   right: 2px;
+  //   width: 1px;
+  //   height: 50%;
+  //   content: '';
+  //   background-color: #c0c0c0;
+  //   transition: background-color 0.2s ease;
+  // }
+
+  // 핸들에 호버하거나, 부모 th가 리사이징 중일 때 구분선 강조
+  // &:hover::after,
+  // :global(.is-resizing) &::after {
+  //   background-color: #2979ff; // 활성화 색상
+  // }
+}
+
+// 🎨 피드백 메시지 셀 (Loading, No Data 등)
+.feedback-cell {
+  padding: 48px;
+  color: #757575;
+  text-align: center;
+}

package/dist/index.cjs.js

@@ -0,0 +1,331 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var styles = require('./data-table/data-table.module.scss');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var salesFrontendDesignSystem = require('sales-frontend-design-system');
+var styles$1 = require('./step-indicator/step-indicator.module.scss');
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var bind = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredBind;
+
+function requireBind () {
+	if (hasRequiredBind) return bind.exports;
+	hasRequiredBind = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue.call(this, arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return this && this[arg] || arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(this, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, this && this[key] || key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (bind));
+	return bind.exports;
+}
+
+var bindExports = requireBind();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
+
+const cx$1 = classNames.bind(styles);
+const DataTable = ({
+  table,
+  height,
+  isError,
+  isLoading,
+  msgText,
+  className
+}) => {
+  const isSticky = !!height;
+  const { columnSizing } = table.getState();
+  return (
+    // 1. Sticky 헤더를 위한 스크롤 컨테이너
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$1("root", { sticky: isSticky }), style: { height }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        className: cx$1("table", className),
+        style: {
+          // minWidth: table.getCenterTotalSize() // 테이블 전체 너비를 컬럼 너비의 합으로 설정
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cx$1("table-head", { sticky: isSticky }), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cx$1("table-row"), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "th",
+            {
+              colSpan: header.colSpan,
+              className: cx$1("table-head-cell", {
+                "is-resizing": header.column.getIsResizing()
+                // 3. 리사이징 중일 때 클래스 추가
+              }),
+              style: header.column.columnDef.size ? { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() } : void 0,
+              children: [
+                header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    onMouseDown: header.getResizeHandler(),
+                    onTouchStart: header.getResizeHandler(),
+                    className: cx$1("resize-handle")
+                  }
+                )
+              ]
+            },
+            header.id
+          )) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cx$1("table-body"), children: !isLoading && !isError && table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cx$1("table-row"), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: cx$1("table-data-cell"),
+              style: cell.column.columnDef.size ? {
+                width: cell.column.getSize(),
+                minWidth: cell.column.getSize(),
+                maxWidth: cell.column.getSize()
+              } : void 0,
+              children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          )) }, row.id)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$1("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
+        ]
+      }
+    ) })
+  );
+};
+
+const useTable = ({
+  data,
+  columns,
+  defaultColumn = { size: 150, enableResizing: true },
+  initialState,
+  onSortingChange,
+  enableRowSelection,
+  enableColumnResizing,
+  mode = "SSR",
+  debug
+}) => {
+  const [sorting, setSorting] = React.useState(initialState?.sorting || []);
+  const [rowSelection, setRowSelection] = React.useState(initialState?.rowSelection || {});
+  const [pagination, setPagination] = React.useState(initialState?.pagination || {});
+  const [columnVisibility, setColumnVisibility] = React.useState(initialState?.columnVisibility || {});
+  const getOption = (mode2) => {
+    if (mode2 === "SSR") {
+      return {
+        manualSorting: true,
+        manualPagination: true,
+        onSortingChange
+      };
+    } else {
+      return {
+        getPaginationRowModel: reactTable.getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting
+      };
+    }
+  };
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    columnResizeMode: "onChange",
+    defaultColumn,
+    enableColumnResizing,
+    enableRowSelection,
+    initialState,
+    state: {
+      sorting,
+      rowSelection,
+      pagination,
+      columnVisibility
+    },
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    ...getOption(mode),
+    debugTable: debug,
+    debugHeaders: debug,
+    debugColumns: debug
+  });
+  return table;
+};
+
+const FormDatePicker = ({
+  name,
+  control,
+  disabled,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const baseProps = {
+    ...props,
+    id: field.name,
+    defaultValue: field.value,
+    disabled: field.disabled,
+    error: fieldState.invalid,
+    onBlur: field.onBlur
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.DatePicker, { ...baseProps });
+};
+
+const FormSegmentGroup = ({
+  name,
+  control,
+  disabled,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.SegmentGroup,
+    {
+      ...props,
+      tabIndex: 0,
+      id: field.name,
+      ref: field.ref,
+      defaultValue: field.value,
+      disabled: field.disabled,
+      error: fieldState.invalid,
+      onBlur: field.onBlur,
+      onValueChange: (selected) => {
+        field.onChange(selected);
+        props.onValueChange?.(selected);
+      }
+    }
+  );
+};
+
+const FormTextField = ({
+  name,
+  control,
+  disabled,
+  error,
+  onBlur,
+  onChange,
+  rootProps,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.FormField.TextField,
+    {
+      ...props,
+      id: field.name,
+      size: "medium",
+      autoComplete: "off",
+      name: field.name,
+      value: field.value ?? "",
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onChange: (e) => {
+        field.onChange(e);
+        onChange?.(e);
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      rootProps: {
+        ...rootProps,
+        onClear: () => {
+          field.onChange("");
+          rootProps?.onClear?.();
+        }
+      }
+    }
+  );
+};
+
+const cx = classNames.bind(styles$1);
+const StepIndicator = ({ items, currentIndex = 0, defaultValue = "", dotCount = 3 }) => {
+  const [current, setCurrent] = React.useState(currentIndex);
+  React.useEffect(() => {
+    items.map((item, idx) => {
+      if (item.value === defaultValue) {
+        setCurrent(idx);
+      }
+    });
+  }, [items, defaultValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("stepper-layout"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("circle", (defaultValue === item.value || current === idx) && "active"), children: item.isCompleted || idx < current ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("completed") }) : ++idx }),
+      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("dot") }, `dot-${idx}-${dotIdx}`))
+    ] }, `num-${idx}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
+  ] });
+};
+
+exports.DataTable = DataTable;
+exports.FormDatePicker = FormDatePicker;
+exports.FormSegmentGroup = FormSegmentGroup;
+exports.FormTextField = FormTextField;
+exports.StepIndicator = StepIndicator;
+exports.useTable = useTable;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/data-table/data-table.tsx","../src/data-table/use-table.ts","../src/form/form-date-picker.tsx","../src/form/form-segment.tsx","../src/form/form-text-field.tsx","../src/step-indicator/step-indicator.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import { flexRender, type RowData } from '@tanstack/react-table';\nimport classNames from 'classnames/bind';\nimport styles from './data-table.module.scss';\nimport { DataTableProps } from './data-table.types';\n\nconst cx = classNames.bind(styles);\n\n// isResizing 클래스를 동적으로 추가하기 위해 onMouseDown에서 상태를 직접 관리할 수도 있지만,\n// table.getState()를 사용하는 것이 더 간단하고 직관적입니다.\nexport const DataTable = <T extends RowData>({\n  table,\n  height,\n  isError,\n  isLoading,\n  msgText,\n  className\n}: DataTableProps<T>) => {\n  // sticky prop은 이제 height 유무로 판단\n  const isSticky = !!height;\n  const { columnSizing } = table.getState();\n\n  return (\n    // 1. Sticky 헤더를 위한 스크롤 컨테이너\n    <div className={cx('root', { sticky: isSticky })} style={{ height: height }}>\n      {/* 2. table-layout: fixed와 너비 100%를 위해 table 태그에 스타일 적용 */}\n      <table\n        className={cx('table', className)}\n        style={\n          {\n            // minWidth: table.getCenterTotalSize() // 테이블 전체 너비를 컬럼 너비의 합으로 설정\n          }\n        }\n      >\n        <thead className={cx('table-head', { sticky: isSticky })}>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <tr key={headerGroup.id} className={cx('table-row')}>\n              {headerGroup.headers.map((header) => (\n                <th\n                  key={header.id}\n                  colSpan={header.colSpan}\n                  className={cx('table-head-cell', {\n                    'is-resizing': header.column.getIsResizing() // 3. 리사이징 중일 때 클래스 추가\n                  })}\n                  style={\n                    header.column.columnDef.size\n                      ? { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() } // 4. TanStack이 계산한 너비를 직접 적용\n                      : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n\n                  {/* 5. 컬럼 리사이징 핸들 */}\n                  {header.column.getCanResize() && (\n                    <div\n                      onMouseDown={header.getResizeHandler()}\n                      onTouchStart={header.getResizeHandler()}\n                      className={cx('resize-handle')}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n\n        <tbody className={cx('table-body')}>\n          {/* ... 기존 tbody 내용은 동일 ... */}\n          {!isLoading && !isError && table.getRowModel().rows.length > 0 ? (\n            table.getRowModel().rows.map((row) => (\n              <tr key={row.id} className={cx('table-row')}>\n                {row.getVisibleCells().map((cell) => (\n                  <td\n                    key={cell.id}\n                    className={cx('table-data-cell')}\n                    style={\n                      cell.column.columnDef.size\n                        ? {\n                            width: cell.column.getSize(),\n                            minWidth: cell.column.getSize(),\n                            maxWidth: cell.column.getSize()\n                          }\n                        : undefined\n                    }\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </td>\n                ))}\n              </tr>\n            ))\n          ) : (\n            <tr>\n              <td className={cx('feedback-cell')} colSpan={table.getVisibleLeafColumns().length}>\n                {isLoading ? <div>Loading...</div> : <div>{msgText || (isError ? 'Error' : 'No data')}</div>}\n              </td>\n            </tr>\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n","'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type TableOptions,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\n\ntype RenderingMode = 'CSR' | 'SSR';\n\nexport const useTable = <TData extends RowData>({\n  data,\n  columns,\n  defaultColumn = { size: 150, enableResizing: true },\n  initialState,\n  onSortingChange,\n  enableRowSelection,\n  enableColumnResizing,\n  mode = 'SSR',\n  debug\n}: Pick<\n  TableOptions<TData>,\n  | 'data'\n  | 'columns'\n  | 'initialState'\n  | 'onSortingChange'\n  | 'enableRowSelection'\n  | 'enableColumnResizing'\n  | 'defaultColumn'\n> & {\n  mode?: RenderingMode;\n  debug?: boolean;\n}) => {\n  const [sorting, setSorting] = React.useState(initialState?.sorting || []);\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>(initialState?.rowSelection || {});\n  const [pagination, setPagination] = React.useState((initialState?.pagination as PaginationState) || {});\n  const [columnVisibility, setColumnVisibility] = React.useState(initialState?.columnVisibility || {});\n\n  const getOption = (mode: RenderingMode): Partial<TableOptions<TData>> => {\n    if (mode === 'SSR') {\n      return {\n        manualSorting: true,\n        manualPagination: true,\n        onSortingChange\n      };\n    } else {\n      return {\n        getPaginationRowModel: getPaginationRowModel(),\n        onPaginationChange: setPagination,\n        onSortingChange: setSorting\n      };\n    }\n  };\n\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: 'onChange',\n    defaultColumn,\n    enableColumnResizing,\n    enableRowSelection,\n    initialState,\n    state: {\n      sorting,\n      rowSelection,\n      pagination,\n      columnVisibility\n    },\n    onRowSelectionChange: setRowSelection,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    ...getOption(mode),\n\n    debugTable: debug,\n    debugHeaders: debug,\n    debugColumns: debug\n  });\n\n  return table;\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { DatePicker, type DatePickerProps } from 'sales-frontend-design-system';\n\nexport const FormDatePicker = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & DatePickerProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  const baseProps: DatePickerProps = {\n    ...props,\n    id: field.name,\n    defaultValue: field.value,\n    disabled: field.disabled,\n    error: fieldState.invalid,\n    onBlur: field.onBlur\n  };\n\n  // if (props.mode === 'range') {\n  //   return (\n  //     <DatePicker\n  //       {...baseProps}\n  //       onValueChange={(selected: IPeriodDate) => {\n  //         if (props.mode === 'range') {\n  //         }\n  //         field.onChange(selected);\n  //         // props.onValueChange?.(selected);\n  //       }}\n  //     />\n  //   );\n  // }\n\n  return <DatePicker {...baseProps} />;\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { SegmentGroup, type SegmentGroupProps } from 'sales-frontend-design-system';\n\nexport const FormSegmentGroup = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & SegmentGroupProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  return (\n    <SegmentGroup\n      {...props}\n      tabIndex={0}\n      id={field.name}\n      ref={field.ref}\n      defaultValue={field.value}\n      disabled={field.disabled}\n      error={fieldState.invalid}\n      onBlur={field.onBlur}\n      onValueChange={(selected) => {\n        field.onChange(selected);\n        props.onValueChange?.(selected);\n      }}\n    />\n  );\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { FormField } from 'sales-frontend-design-system';\n\nexport const FormTextField = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  error,\n  onBlur,\n  onChange,\n  rootProps,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & FormField.ITextFieldProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  return (\n    <FormField.TextField\n      {...props}\n      id={field.name}\n      size=\"medium\"\n      autoComplete=\"off\"\n      name={field.name}\n      value={field.value ?? ''}\n      disabled={field.disabled}\n      error={fieldState.invalid || error}\n      onChange={(e) => {\n        field.onChange(e);\n        onChange?.(e);\n      }}\n      onBlur={(e) => {\n        field.onBlur();\n        onBlur?.(e);\n      }}\n      rootProps={{\n        ...rootProps,\n        onClear: () => {\n          field.onChange('');\n          rootProps?.onClear?.();\n        }\n      }}\n    />\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames/bind';\nimport styles from './step-indicator.module.scss';\nimport type { IStepIndicatorProps } from './step-indicator.types';\n\nconst cx = classNames.bind(styles);\n\nexport const StepIndicator = ({ items, currentIndex = 0, defaultValue = '', dotCount = 3 }: IStepIndicatorProps) => {\n  const [current, setCurrent] = React.useState(currentIndex);\n\n  React.useEffect(() => {\n    items.map((item, idx) => {\n      if (item.value === defaultValue) {\n        setCurrent(idx);\n      }\n    });\n  }, [items, defaultValue]);\n\n  return (\n    <div className={cx('stepper-layout')}>\n      <div className={cx('stepper')}>\n        {items.map((item, idx) => (\n          <React.Fragment key={`num-${idx}`}>\n            <div className={cx('circle', (defaultValue === item.value || current === idx) && 'active')}>\n              {item.isCompleted || idx < current ? <span className={cx('completed')} /> : ++idx}\n            </div>\n\n            {/* 다음 단계가 있을 때만 dot 렌더링 */}\n            {idx < items.length &&\n              Array.from({ length: dotCount }).map((_, dotIdx) => (\n                <span key={`dot-${idx}-${dotIdx}`} className={cx('dot')} />\n              ))}\n          </React.Fragment>\n        ))}\n      </div>\n\n      <ul className={cx('step-labels')}>\n        {items.map((item, idx) => (\n          <li key={`label-${idx}`} className={cx((defaultValue === item.value || current === idx) && 'active')}>\n            <span>{item.label ?? item.value}</span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"],"names":["cx","jsx","jsxs","flexRender","useState","mode","getPaginationRowModel","useReactTable","getCoreRowModel","getSortedRowModel","useController","DatePicker","SegmentGroup","FormField","styles"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -1,8 +1,53 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RowData, Table, TableOptions } from '@tanstack/react-table';
+import { FieldValues, UseControllerProps } from 'react-hook-form';
+import { DatePickerProps, SegmentGroupProps, FormField } from 'sales-frontend-design-system';
 
-interface Props {
-    test: string;
+type DataTableProps<T extends RowData> = {
+    table: Table<T>;
+    height?: string;
+    isError?: boolean;
+    isLoading?: boolean;
+    msgText?: React.ReactNode;
+    className?: string;
+};
+
+declare const DataTable: <T extends RowData>({ table, height, isError, isLoading, msgText, className }: DataTableProps<T>) => react_jsx_runtime.JSX.Element;
+
+type RenderingMode = 'CSR' | 'SSR';
+declare const useTable: <TData extends RowData>({ data, columns, defaultColumn, initialState, onSortingChange, enableRowSelection, enableColumnResizing, mode, debug }: Pick<TableOptions<TData>, "data" | "columns" | "initialState" | "onSortingChange" | "enableRowSelection" | "enableColumnResizing" | "defaultColumn"> & {
+    mode?: RenderingMode;
+    debug?: boolean;
+}) => any;
+
+declare const FormDatePicker: <TFormValues extends FieldValues>({ name, control, disabled, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & DatePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const FormSegmentGroup: <TFormValues extends FieldValues>({ name, control, disabled, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & SegmentGroupProps) => react_jsx_runtime.JSX.Element;
+
+declare const FormTextField: <TFormValues extends FieldValues>({ name, control, disabled, error, onBlur, onChange, rootProps, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & FormField.ITextFieldProps) => react_jsx_runtime.JSX.Element;
+
+interface IStepItems {
+    /** Step의 고유 식별 값 */
+    value: string;
+    /** Step에 시각적으로 표시될 텍스트 라벨 */
+    label?: string;
+    /** 완료상태 여부 */
+    isCompleted?: boolean;
+    /** Step에 해당하는 컴포넌트 */
+    component?: React.ReactNode;
 }
-declare const Hello: ({ test }: Props) => react_jsx_runtime.JSX.Element;
+interface IStepIndicatorProps {
+    /** 각 단계에 대한 정보 (텍스트, 상태 등)를 담은 배열 */
+    items: IStepItems[];
+    /** 현재 선택된 단계의 인덱스 (외부 제어용) */
+    currentIndex?: number;
+    /** 컴포넌트가 최초 마운트될 때 기본으로 선택될 값 (value 기준) */
+    defaultValue?: string;
+    /** 표시할 dot의 총 개수 (items 배열과 별개로 시각적 표시만 조절할 때 사용) */
+    dotCount?: number;
+}
+
+declare const StepIndicator: ({ items, currentIndex, defaultValue, dotCount }: IStepIndicatorProps) => react_jsx_runtime.JSX.Element;
 
-export { Hello };
+export { DataTable, FormDatePicker, FormSegmentGroup, FormTextField, StepIndicator, useTable };
+export type { DataTableProps, IStepIndicatorProps, IStepItems };

package/dist/index.esm.js

@@ -0,0 +1,324 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
+import styles from './data-table/data-table.module.scss';
+import React, { useState } from 'react';
+import { useController } from 'react-hook-form';
+import { DatePicker, SegmentGroup, FormField } from 'sales-frontend-design-system';
+import styles$1 from './step-indicator/step-indicator.module.scss';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var bind = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredBind;
+
+function requireBind () {
+	if (hasRequiredBind) return bind.exports;
+	hasRequiredBind = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue.call(this, arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return this && this[arg] || arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(this, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, this && this[key] || key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (bind));
+	return bind.exports;
+}
+
+var bindExports = requireBind();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
+
+const cx$1 = classNames.bind(styles);
+const DataTable = ({
+  table,
+  height,
+  isError,
+  isLoading,
+  msgText,
+  className
+}) => {
+  const isSticky = !!height;
+  const { columnSizing } = table.getState();
+  return (
+    // 1. Sticky 헤더를 위한 스크롤 컨테이너
+    /* @__PURE__ */ jsx("div", { className: cx$1("root", { sticky: isSticky }), style: { height }, children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: cx$1("table", className),
+        style: {
+          // minWidth: table.getCenterTotalSize() // 테이블 전체 너비를 컬럼 너비의 합으로 설정
+        },
+        children: [
+          /* @__PURE__ */ jsx("thead", { className: cx$1("table-head", { sticky: isSticky }), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: cx$1("table-row"), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxs(
+            "th",
+            {
+              colSpan: header.colSpan,
+              className: cx$1("table-head-cell", {
+                "is-resizing": header.column.getIsResizing()
+                // 3. 리사이징 중일 때 클래스 추가
+              }),
+              style: header.column.columnDef.size ? { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() } : void 0,
+              children: [
+                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanResize() && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onMouseDown: header.getResizeHandler(),
+                    onTouchStart: header.getResizeHandler(),
+                    className: cx$1("resize-handle")
+                  }
+                )
+              ]
+            },
+            header.id
+          )) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx("tbody", { className: cx$1("table-body"), children: !isLoading && !isError && table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", { className: cx$1("table-row"), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cx$1("table-data-cell"),
+              style: cell.column.columnDef.size ? {
+                width: cell.column.getSize(),
+                minWidth: cell.column.getSize(),
+                maxWidth: cell.column.getSize()
+              } : void 0,
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          )) }, row.id)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: cx$1("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
+        ]
+      }
+    ) })
+  );
+};
+
+const useTable = ({
+  data,
+  columns,
+  defaultColumn = { size: 150, enableResizing: true },
+  initialState,
+  onSortingChange,
+  enableRowSelection,
+  enableColumnResizing,
+  mode = "SSR",
+  debug
+}) => {
+  const [sorting, setSorting] = React.useState(initialState?.sorting || []);
+  const [rowSelection, setRowSelection] = useState(initialState?.rowSelection || {});
+  const [pagination, setPagination] = React.useState(initialState?.pagination || {});
+  const [columnVisibility, setColumnVisibility] = React.useState(initialState?.columnVisibility || {});
+  const getOption = (mode2) => {
+    if (mode2 === "SSR") {
+      return {
+        manualSorting: true,
+        manualPagination: true,
+        onSortingChange
+      };
+    } else {
+      return {
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting
+      };
+    }
+  };
+  const table = useReactTable({
+    data,
+    columns,
+    columnResizeMode: "onChange",
+    defaultColumn,
+    enableColumnResizing,
+    enableRowSelection,
+    initialState,
+    state: {
+      sorting,
+      rowSelection,
+      pagination,
+      columnVisibility
+    },
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...getOption(mode),
+    debugTable: debug,
+    debugHeaders: debug,
+    debugColumns: debug
+  });
+  return table;
+};
+
+const FormDatePicker = ({
+  name,
+  control,
+  disabled,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  const baseProps = {
+    ...props,
+    id: field.name,
+    defaultValue: field.value,
+    disabled: field.disabled,
+    error: fieldState.invalid,
+    onBlur: field.onBlur
+  };
+  return /* @__PURE__ */ jsx(DatePicker, { ...baseProps });
+};
+
+const FormSegmentGroup = ({
+  name,
+  control,
+  disabled,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  return /* @__PURE__ */ jsx(
+    SegmentGroup,
+    {
+      ...props,
+      tabIndex: 0,
+      id: field.name,
+      ref: field.ref,
+      defaultValue: field.value,
+      disabled: field.disabled,
+      error: fieldState.invalid,
+      onBlur: field.onBlur,
+      onValueChange: (selected) => {
+        field.onChange(selected);
+        props.onValueChange?.(selected);
+      }
+    }
+  );
+};
+
+const FormTextField = ({
+  name,
+  control,
+  disabled,
+  error,
+  onBlur,
+  onChange,
+  rootProps,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  return /* @__PURE__ */ jsx(
+    FormField.TextField,
+    {
+      ...props,
+      id: field.name,
+      size: "medium",
+      autoComplete: "off",
+      name: field.name,
+      value: field.value ?? "",
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onChange: (e) => {
+        field.onChange(e);
+        onChange?.(e);
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      rootProps: {
+        ...rootProps,
+        onClear: () => {
+          field.onChange("");
+          rootProps?.onClear?.();
+        }
+      }
+    }
+  );
+};
+
+const cx = classNames.bind(styles$1);
+const StepIndicator = ({ items, currentIndex = 0, defaultValue = "", dotCount = 3 }) => {
+  const [current, setCurrent] = React.useState(currentIndex);
+  React.useEffect(() => {
+    items.map((item, idx) => {
+      if (item.value === defaultValue) {
+        setCurrent(idx);
+      }
+    });
+  }, [items, defaultValue]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("stepper-layout"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: cx("circle", (defaultValue === item.value || current === idx) && "active"), children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx("completed") }) : ++idx }),
+      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx("dot") }, `dot-${idx}-${dotIdx}`))
+    ] }, `num-${idx}`)) }),
+    /* @__PURE__ */ jsx("ul", { className: cx("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: cx((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
+  ] });
+};
+
+export { DataTable, FormDatePicker, FormSegmentGroup, FormTextField, StepIndicator, useTable };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/data-table/data-table.tsx","../src/data-table/use-table.ts","../src/form/form-date-picker.tsx","../src/form/form-segment.tsx","../src/form/form-text-field.tsx","../src/step-indicator/step-indicator.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import { flexRender, type RowData } from '@tanstack/react-table';\nimport classNames from 'classnames/bind';\nimport styles from './data-table.module.scss';\nimport { DataTableProps } from './data-table.types';\n\nconst cx = classNames.bind(styles);\n\n// isResizing 클래스를 동적으로 추가하기 위해 onMouseDown에서 상태를 직접 관리할 수도 있지만,\n// table.getState()를 사용하는 것이 더 간단하고 직관적입니다.\nexport const DataTable = <T extends RowData>({\n  table,\n  height,\n  isError,\n  isLoading,\n  msgText,\n  className\n}: DataTableProps<T>) => {\n  // sticky prop은 이제 height 유무로 판단\n  const isSticky = !!height;\n  const { columnSizing } = table.getState();\n\n  return (\n    // 1. Sticky 헤더를 위한 스크롤 컨테이너\n    <div className={cx('root', { sticky: isSticky })} style={{ height: height }}>\n      {/* 2. table-layout: fixed와 너비 100%를 위해 table 태그에 스타일 적용 */}\n      <table\n        className={cx('table', className)}\n        style={\n          {\n            // minWidth: table.getCenterTotalSize() // 테이블 전체 너비를 컬럼 너비의 합으로 설정\n          }\n        }\n      >\n        <thead className={cx('table-head', { sticky: isSticky })}>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <tr key={headerGroup.id} className={cx('table-row')}>\n              {headerGroup.headers.map((header) => (\n                <th\n                  key={header.id}\n                  colSpan={header.colSpan}\n                  className={cx('table-head-cell', {\n                    'is-resizing': header.column.getIsResizing() // 3. 리사이징 중일 때 클래스 추가\n                  })}\n                  style={\n                    header.column.columnDef.size\n                      ? { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() } // 4. TanStack이 계산한 너비를 직접 적용\n                      : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n\n                  {/* 5. 컬럼 리사이징 핸들 */}\n                  {header.column.getCanResize() && (\n                    <div\n                      onMouseDown={header.getResizeHandler()}\n                      onTouchStart={header.getResizeHandler()}\n                      className={cx('resize-handle')}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n\n        <tbody className={cx('table-body')}>\n          {/* ... 기존 tbody 내용은 동일 ... */}\n          {!isLoading && !isError && table.getRowModel().rows.length > 0 ? (\n            table.getRowModel().rows.map((row) => (\n              <tr key={row.id} className={cx('table-row')}>\n                {row.getVisibleCells().map((cell) => (\n                  <td\n                    key={cell.id}\n                    className={cx('table-data-cell')}\n                    style={\n                      cell.column.columnDef.size\n                        ? {\n                            width: cell.column.getSize(),\n                            minWidth: cell.column.getSize(),\n                            maxWidth: cell.column.getSize()\n                          }\n                        : undefined\n                    }\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </td>\n                ))}\n              </tr>\n            ))\n          ) : (\n            <tr>\n              <td className={cx('feedback-cell')} colSpan={table.getVisibleLeafColumns().length}>\n                {isLoading ? <div>Loading...</div> : <div>{msgText || (isError ? 'Error' : 'No data')}</div>}\n              </td>\n            </tr>\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n","'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type TableOptions,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\n\ntype RenderingMode = 'CSR' | 'SSR';\n\nexport const useTable = <TData extends RowData>({\n  data,\n  columns,\n  defaultColumn = { size: 150, enableResizing: true },\n  initialState,\n  onSortingChange,\n  enableRowSelection,\n  enableColumnResizing,\n  mode = 'SSR',\n  debug\n}: Pick<\n  TableOptions<TData>,\n  | 'data'\n  | 'columns'\n  | 'initialState'\n  | 'onSortingChange'\n  | 'enableRowSelection'\n  | 'enableColumnResizing'\n  | 'defaultColumn'\n> & {\n  mode?: RenderingMode;\n  debug?: boolean;\n}) => {\n  const [sorting, setSorting] = React.useState(initialState?.sorting || []);\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>(initialState?.rowSelection || {});\n  const [pagination, setPagination] = React.useState((initialState?.pagination as PaginationState) || {});\n  const [columnVisibility, setColumnVisibility] = React.useState(initialState?.columnVisibility || {});\n\n  const getOption = (mode: RenderingMode): Partial<TableOptions<TData>> => {\n    if (mode === 'SSR') {\n      return {\n        manualSorting: true,\n        manualPagination: true,\n        onSortingChange\n      };\n    } else {\n      return {\n        getPaginationRowModel: getPaginationRowModel(),\n        onPaginationChange: setPagination,\n        onSortingChange: setSorting\n      };\n    }\n  };\n\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: 'onChange',\n    defaultColumn,\n    enableColumnResizing,\n    enableRowSelection,\n    initialState,\n    state: {\n      sorting,\n      rowSelection,\n      pagination,\n      columnVisibility\n    },\n    onRowSelectionChange: setRowSelection,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    ...getOption(mode),\n\n    debugTable: debug,\n    debugHeaders: debug,\n    debugColumns: debug\n  });\n\n  return table;\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { DatePicker, type DatePickerProps } from 'sales-frontend-design-system';\n\nexport const FormDatePicker = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & DatePickerProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  const baseProps: DatePickerProps = {\n    ...props,\n    id: field.name,\n    defaultValue: field.value,\n    disabled: field.disabled,\n    error: fieldState.invalid,\n    onBlur: field.onBlur\n  };\n\n  // if (props.mode === 'range') {\n  //   return (\n  //     <DatePicker\n  //       {...baseProps}\n  //       onValueChange={(selected: IPeriodDate) => {\n  //         if (props.mode === 'range') {\n  //         }\n  //         field.onChange(selected);\n  //         // props.onValueChange?.(selected);\n  //       }}\n  //     />\n  //   );\n  // }\n\n  return <DatePicker {...baseProps} />;\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { SegmentGroup, type SegmentGroupProps } from 'sales-frontend-design-system';\n\nexport const FormSegmentGroup = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & SegmentGroupProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  return (\n    <SegmentGroup\n      {...props}\n      tabIndex={0}\n      id={field.name}\n      ref={field.ref}\n      defaultValue={field.value}\n      disabled={field.disabled}\n      error={fieldState.invalid}\n      onBlur={field.onBlur}\n      onValueChange={(selected) => {\n        field.onChange(selected);\n        props.onValueChange?.(selected);\n      }}\n    />\n  );\n};\n","import { useController, type FieldValues, type UseControllerProps } from 'react-hook-form';\nimport { FormField } from 'sales-frontend-design-system';\n\nexport const FormTextField = <TFormValues extends FieldValues>({\n  name,\n  control,\n  disabled,\n  error,\n  onBlur,\n  onChange,\n  rootProps,\n  ...props\n}: Pick<UseControllerProps<TFormValues>, 'name' | 'control' | 'disabled'> & FormField.ITextFieldProps) => {\n  const { field, fieldState } = useController({ name, control, disabled });\n\n  return (\n    <FormField.TextField\n      {...props}\n      id={field.name}\n      size=\"medium\"\n      autoComplete=\"off\"\n      name={field.name}\n      value={field.value ?? ''}\n      disabled={field.disabled}\n      error={fieldState.invalid || error}\n      onChange={(e) => {\n        field.onChange(e);\n        onChange?.(e);\n      }}\n      onBlur={(e) => {\n        field.onBlur();\n        onBlur?.(e);\n      }}\n      rootProps={{\n        ...rootProps,\n        onClear: () => {\n          field.onChange('');\n          rootProps?.onClear?.();\n        }\n      }}\n    />\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames/bind';\nimport styles from './step-indicator.module.scss';\nimport type { IStepIndicatorProps } from './step-indicator.types';\n\nconst cx = classNames.bind(styles);\n\nexport const StepIndicator = ({ items, currentIndex = 0, defaultValue = '', dotCount = 3 }: IStepIndicatorProps) => {\n  const [current, setCurrent] = React.useState(currentIndex);\n\n  React.useEffect(() => {\n    items.map((item, idx) => {\n      if (item.value === defaultValue) {\n        setCurrent(idx);\n      }\n    });\n  }, [items, defaultValue]);\n\n  return (\n    <div className={cx('stepper-layout')}>\n      <div className={cx('stepper')}>\n        {items.map((item, idx) => (\n          <React.Fragment key={`num-${idx}`}>\n            <div className={cx('circle', (defaultValue === item.value || current === idx) && 'active')}>\n              {item.isCompleted || idx < current ? <span className={cx('completed')} /> : ++idx}\n            </div>\n\n            {/* 다음 단계가 있을 때만 dot 렌더링 */}\n            {idx < items.length &&\n              Array.from({ length: dotCount }).map((_, dotIdx) => (\n                <span key={`dot-${idx}-${dotIdx}`} className={cx('dot')} />\n              ))}\n          </React.Fragment>\n        ))}\n      </div>\n\n      <ul className={cx('step-labels')}>\n        {items.map((item, idx) => (\n          <li key={`label-${idx}`} className={cx((defaultValue === item.value || current === idx) && 'active')}>\n            <span>{item.label ?? item.value}</span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"],"names":["cx","mode","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;AAEA,EAAA,CAAC,YAAY;;AAGb,GAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc;;GAE9B,SAAS,UAAU,IAAI;IACtB,IAAI,OAAO,GAAG,EAAE;;AAElB,IAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,KAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC;KACtB,IAAI,GAAG,EAAE;AACZ,MAAI,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAC9D;AACA;;AAEA,IAAE,OAAO,OAAO;AAChB;;AAEA,GAAC,SAAS,UAAU,EAAE,GAAG,EAAE;IACzB,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;KACvD,OAAO,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG;AAClC;;AAEA,IAAE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC/B,KAAG,OAAO,EAAE;AACZ;;AAEA,IAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;KACvB,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC;AACrC;;IAEE,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;AACxG,KAAG,OAAO,GAAG,CAAC,QAAQ,EAAE;AACxB;;IAEE,IAAI,OAAO,GAAG,EAAE;;AAElB,IAAE,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACvB,KAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC1C,MAAI,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;AAC5D;AACA;;AAEA,IAAE,OAAO,OAAO;AAChB;;AAEA,GAAC,SAAS,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtC,IAAI,CAAC,QAAQ,EAAE;AACjB,KAAG,OAAO,KAAK;AACf;AACA;IACE,IAAI,KAAK,EAAE;AACb,KAAG,OAAO,KAAK,GAAG,GAAG,GAAG,QAAQ;AAChC;AACA;IACE,OAAO,KAAK,GAAG,QAAQ;AACzB;;GAEC,IAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,IAAE,UAAU,CAAC,OAAO,GAAG,UAAU;AACjC,IAAE,iBAAiB,UAAU;AAC7B,IAAE,MAKM;AACR,IAAE,MAAM,CAAC,UAAU,GAAG,UAAU;AAChC;AACA,GAAC,EAAE,EAAA;;;;;;;;ACvEH,MAAMA,IAAA,GAAK,UAAW,CAAA,IAAA,CAAK,MAAM,CAAA;AAI1B,MAAM,YAAY,CAAoB;AAAA,EAC3C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAyB,KAAA;AAEvB,EAAM,MAAA,QAAA,GAAW,CAAC,CAAC,MAAA;AACnB,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAA,KAAA,CAAM,QAAS,EAAA;AAExC,EAAA;AAAA;AAAA,oBAEG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAAA,IAAA,CAAG,MAAQ,EAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,EAAG,KAAO,EAAA,EAAE,QAEzD,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWA,IAAG,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,QAChC,KACE,EAAA;AAAA;AAAA,SAEA;AAAA,QAGF,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAAA,IAAA,CAAG,YAAc,EAAA,EAAE,QAAQ,QAAS,EAAC,CACpD,EAAA,QAAA,EAAA,KAAA,CAAM,eAAgB,EAAA,CAAE,IAAI,CAAC,WAAA,qBAC3B,GAAA,CAAA,IAAA,EAAA,EAAwB,SAAW,EAAAA,IAAA,CAAG,WAAW,CAAA,EAC/C,QAAY,EAAA,WAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MACxB,qBAAA,IAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cAEC,SAAS,MAAO,CAAA,OAAA;AAAA,cAChB,SAAA,EAAWA,KAAG,iBAAmB,EAAA;AAAA,gBAC/B,aAAA,EAAe,MAAO,CAAA,MAAA,CAAO,aAAc;AAAA;AAAA,eAC5C,CAAA;AAAA,cACD,OACE,MAAO,CAAA,MAAA,CAAO,UAAU,IACpB,GAAA,EAAE,OAAO,MAAO,CAAA,OAAA,EAAW,EAAA,QAAA,EAAU,OAAO,OAAQ,EAAA,EAAG,UAAU,MAAO,CAAA,OAAA,IACxE,GAAA,MAAA;AAAA,cAGL,QAAA,EAAA;AAAA,gBAAO,MAAA,CAAA,aAAA,GAAgB,OAAO,UAAW,CAAA,MAAA,CAAO,OAAO,SAAU,CAAA,MAAA,EAAQ,MAAO,CAAA,UAAA,EAAY,CAAA;AAAA,gBAG5F,MAAA,CAAO,MAAO,CAAA,YAAA,EACb,oBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAA,EAAa,OAAO,gBAAiB,EAAA;AAAA,oBACrC,YAAA,EAAc,OAAO,gBAAiB,EAAA;AAAA,oBACtC,SAAA,EAAWA,KAAG,eAAe;AAAA;AAAA;AAC/B;AAAA,aAAA;AAAA,YAnBG,MAAO,CAAA;AAAA,WAsBf,CAAA,EAAA,EAzBM,WAAY,CAAA,EA0BrB,CACD,CACH,EAAA,CAAA;AAAA,0BAEC,GAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAAA,IAAA,CAAG,YAAY,CAE9B,EAAA,QAAA,EAAA,CAAC,SAAa,IAAA,CAAC,WAAW,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA,CAAK,SAAS,CAC3D,GAAA,KAAA,CAAM,WAAY,EAAA,CAAE,IAAK,CAAA,GAAA,CAAI,CAAC,GAAA,yBAC3B,IAAgB,EAAA,EAAA,SAAA,EAAWA,IAAG,CAAA,WAAW,GACvC,QAAI,EAAA,GAAA,CAAA,eAAA,EAAkB,CAAA,GAAA,CAAI,CAAC,IAC1B,qBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cAEC,SAAA,EAAWA,KAAG,iBAAiB,CAAA;AAAA,cAC/B,KACE,EAAA,IAAA,CAAK,MAAO,CAAA,SAAA,CAAU,IAClB,GAAA;AAAA,gBACE,KAAA,EAAO,IAAK,CAAA,MAAA,CAAO,OAAQ,EAAA;AAAA,gBAC3B,QAAA,EAAU,IAAK,CAAA,MAAA,CAAO,OAAQ,EAAA;AAAA,gBAC9B,QAAA,EAAU,IAAK,CAAA,MAAA,CAAO,OAAQ;AAAA,eAEhC,GAAA,MAAA;AAAA,cAGL,qBAAW,IAAK,CAAA,MAAA,CAAO,UAAU,IAAM,EAAA,IAAA,CAAK,YAAY;AAAA,aAAA;AAAA,YAZpD,IAAK,CAAA;AAAA,WAcb,CAAA,EAAA,EAjBM,GAAI,CAAA,EAkBb,CACD,CAED,mBAAA,GAAA,CAAC,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAWA,IAAG,CAAA,eAAe,GAAG,OAAS,EAAA,KAAA,CAAM,qBAAsB,EAAA,CAAE,MACxE,EAAA,QAAA,EAAA,SAAA,mBAAa,GAAA,CAAA,KAAA,EAAA,EAAI,wBAAU,CAAS,mBAAA,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,OAAA,KAAY,OAAU,GAAA,OAAA,GAAU,SAAW,CAAA,EAAA,CAAA,EACxF,GACF,CAEJ,EAAA;AAAA;AAAA;AAAA,KAEJ,EAAA;AAAA;AAEJ;;ACnFO,MAAM,WAAW,CAAwB;AAAA,EAC9C,IAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA,EAAE,IAAM,EAAA,GAAA,EAAK,gBAAgB,IAAK,EAAA;AAAA,EAClD,YAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,oBAAA;AAAA,EACA,IAAO,GAAA,KAAA;AAAA,EACP;AACF,CAYM,KAAA;AACJ,EAAM,MAAA,CAAC,SAAS,UAAU,CAAA,GAAI,MAAM,QAAS,CAAA,YAAA,EAAc,OAAW,IAAA,EAAE,CAAA;AACxE,EAAM,MAAA,CAAC,cAAc,eAAe,CAAA,GAAI,SAA4B,YAAc,EAAA,YAAA,IAAgB,EAAE,CAAA;AACpG,EAAM,MAAA,CAAC,YAAY,aAAa,CAAA,GAAI,MAAM,QAAU,CAAA,YAAA,EAAc,UAAkC,IAAA,EAAE,CAAA;AACtG,EAAM,MAAA,CAAC,kBAAkB,mBAAmB,CAAA,GAAI,MAAM,QAAS,CAAA,YAAA,EAAc,gBAAoB,IAAA,EAAE,CAAA;AAEnG,EAAM,MAAA,SAAA,GAAY,CAACC,KAAsD,KAAA;AACvE,IAAA,IAAIA,UAAS,KAAO,EAAA;AAClB,MAAO,OAAA;AAAA,QACL,aAAe,EAAA,IAAA;AAAA,QACf,gBAAkB,EAAA,IAAA;AAAA,QAClB;AAAA,OACF;AAAA,KACK,MAAA;AACL,MAAO,OAAA;AAAA,QACL,uBAAuB,qBAAsB,EAAA;AAAA,QAC7C,kBAAoB,EAAA,aAAA;AAAA,QACpB,eAAiB,EAAA;AAAA,OACnB;AAAA;AACF,GACF;AAEA,EAAA,MAAM,QAAQ,aAAc,CAAA;AAAA,IAC1B,IAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAkB,EAAA,UAAA;AAAA,IAClB,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA;AAAA,MACL,OAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,oBAAsB,EAAA,eAAA;AAAA,IACtB,wBAA0B,EAAA,mBAAA;AAAA,IAC1B,iBAAiB,eAAgB,EAAA;AAAA,IACjC,mBAAmB,iBAAkB,EAAA;AAAA,IACrC,GAAG,UAAU,IAAI,CAAA;AAAA,IAEjB,UAAY,EAAA,KAAA;AAAA,IACZ,YAAc,EAAA,KAAA;AAAA,IACd,YAAc,EAAA;AAAA,GACf,CAAA;AAED,EAAO,OAAA,KAAA;AACT;;ACpFO,MAAM,iBAAiB,CAAkC;AAAA,EAC9D,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAgG,KAAA;AAC9F,EAAM,MAAA,EAAE,OAAO,UAAW,EAAA,GAAI,cAAc,EAAE,IAAA,EAAM,OAAS,EAAA,QAAA,EAAU,CAAA;AAEvE,EAAA,MAAM,SAA6B,GAAA;AAAA,IACjC,GAAG,KAAA;AAAA,IACH,IAAI,KAAM,CAAA,IAAA;AAAA,IACV,cAAc,KAAM,CAAA,KAAA;AAAA,IACpB,UAAU,KAAM,CAAA,QAAA;AAAA,IAChB,OAAO,UAAW,CAAA,OAAA;AAAA,IAClB,QAAQ,KAAM,CAAA;AAAA,GAChB;AAgBA,EAAO,uBAAA,GAAA,CAAC,UAAY,EAAA,EAAA,GAAG,SAAW,EAAA,CAAA;AACpC;;AChCO,MAAM,mBAAmB,CAAkC;AAAA,EAChE,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAkG,KAAA;AAChG,EAAM,MAAA,EAAE,OAAO,UAAW,EAAA,GAAI,cAAc,EAAE,IAAA,EAAM,OAAS,EAAA,QAAA,EAAU,CAAA;AAEvE,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAU,EAAA,CAAA;AAAA,MACV,IAAI,KAAM,CAAA,IAAA;AAAA,MACV,KAAK,KAAM,CAAA,GAAA;AAAA,MACX,cAAc,KAAM,CAAA,KAAA;AAAA,MACpB,UAAU,KAAM,CAAA,QAAA;AAAA,MAChB,OAAO,UAAW,CAAA,OAAA;AAAA,MAClB,QAAQ,KAAM,CAAA,MAAA;AAAA,MACd,aAAA,EAAe,CAAC,QAAa,KAAA;AAC3B,QAAA,KAAA,CAAM,SAAS,QAAQ,CAAA;AACvB,QAAA,KAAA,CAAM,gBAAgB,QAAQ,CAAA;AAAA;AAChC;AAAA,GACF;AAEJ;;ACxBO,MAAM,gBAAgB,CAAkC;AAAA,EAC7D,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA0G,KAAA;AACxG,EAAM,MAAA,EAAE,OAAO,UAAW,EAAA,GAAI,cAAc,EAAE,IAAA,EAAM,OAAS,EAAA,QAAA,EAAU,CAAA;AAEvE,EACE,uBAAA,GAAA;AAAA,IAAC,SAAU,CAAA,SAAA;AAAA,IAAV;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAI,KAAM,CAAA,IAAA;AAAA,MACV,IAAK,EAAA,QAAA;AAAA,MACL,YAAa,EAAA,KAAA;AAAA,MACb,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,KAAA,EAAO,MAAM,KAAS,IAAA,EAAA;AAAA,MACtB,UAAU,KAAM,CAAA,QAAA;AAAA,MAChB,KAAA,EAAO,WAAW,OAAW,IAAA,KAAA;AAAA,MAC7B,QAAA,EAAU,CAAC,CAAM,KAAA;AACf,QAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAChB,QAAA,QAAA,GAAW,CAAC,CAAA;AAAA,OACd;AAAA,MACA,MAAA,EAAQ,CAAC,CAAM,KAAA;AACb,QAAA,KAAA,CAAM,MAAO,EAAA;AACb,QAAA,MAAA,GAAS,CAAC,CAAA;AAAA,OACZ;AAAA,MACA,SAAW,EAAA;AAAA,QACT,GAAG,SAAA;AAAA,QACH,SAAS,MAAM;AACb,UAAA,KAAA,CAAM,SAAS,EAAE,CAAA;AACjB,UAAA,SAAA,EAAW,OAAU,IAAA;AAAA;AACvB;AACF;AAAA,GACF;AAEJ;;ACpCA,MAAM,EAAA,GAAK,UAAW,CAAA,IAAA,CAAKC,QAAM,CAAA;AAEpB,MAAA,aAAA,GAAgB,CAAC,EAAE,KAAO,EAAA,YAAA,GAAe,GAAG,YAAe,GAAA,EAAA,EAAI,QAAW,GAAA,CAAA,EAA6B,KAAA;AAClH,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,YAAY,CAAA;AAEzD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAM,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,GAAQ,KAAA;AACvB,MAAI,IAAA,IAAA,CAAK,UAAU,YAAc,EAAA;AAC/B,QAAA,UAAA,CAAW,GAAG,CAAA;AAAA;AAChB,KACD,CAAA;AAAA,GACA,EAAA,CAAC,KAAO,EAAA,YAAY,CAAC,CAAA;AAExB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,gBAAgB,CACjC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAS,CACzB,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAM,EAAA,GAAA,qBACf,IAAA,CAAA,KAAA,CAAM,UAAN,EACC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,EAAG,CAAA,QAAA,EAAA,CAAW,iBAAiB,IAAK,CAAA,KAAA,IAAS,OAAY,KAAA,GAAA,KAAQ,QAAQ,CAAA,EACtF,eAAK,WAAe,IAAA,GAAA,GAAM,OAAU,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,WAAW,CAAA,EAAG,CAAK,GAAA,EAAE,GAChF,EAAA,CAAA;AAAA,MAGC,GAAA,GAAM,KAAM,CAAA,MAAA,IACX,KAAM,CAAA,IAAA,CAAK,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAE,GAAI,CAAA,CAAC,GAAG,MACvC,qBAAA,GAAA,CAAC,MAAkC,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,KAAK,CAA3C,EAAA,EAAA,CAAA,IAAA,EAAO,GAAG,CAAA,CAAA,EAAI,MAAM,CAAA,CAA0B,CAC1D;AAAA,KAAA,EAAA,EATgB,CAAO,IAAA,EAAA,GAAG,CAU/B,CAAA,CACD,CACH,EAAA,CAAA;AAAA,oBAEC,GAAA,CAAA,IAAA,EAAA,EAAG,SAAW,EAAA,EAAA,CAAG,aAAa,CAC5B,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAM,EAAA,GAAA,qBACf,GAAA,CAAA,IAAA,EAAA,EAAwB,WAAW,EAAI,CAAA,CAAA,YAAA,KAAiB,IAAK,CAAA,KAAA,IAAS,OAAY,KAAA,GAAA,KAAQ,QAAQ,CAAA,EACjG,8BAAC,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,KAAS,IAAA,IAAA,CAAK,OAAM,CADzB,EAAA,EAAA,CAAA,MAAA,EAAS,GAAG,CAAA,CAErB,CACD,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;","x_google_ignoreList":[0]}

package/dist/step-indicator/step-indicator.module.scss

@@ -0,0 +1,65 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+.stepper-layout {
+  display: flex;
+  gap: padding(medium);
+
+  .stepper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding: padding(medium) padding(zero);
+
+    .circle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+
+      @include apply-typography(body3);
+
+      color: colors(text-body_0);
+      background-color: colors(text-neutral_2);
+      border-radius: radius-basic(full);
+
+      .completed {
+        width: 20px;
+        height: 20px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 6.29289C16.0976 6.68342 16.0976 7.31658 15.7071 7.70711L9.70711 13.7071C9.31658 14.0976 8.68342 14.0976 8.29289 13.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L9 11.5858L14.2929 6.29289C14.6834 5.90237 15.3166 5.90237 15.7071 6.29289Z' fill='white'/%3E%3C/svg%3E");
+      }
+
+      &.active {
+        background-color: colors(text-body_1);
+      }
+    }
+
+    .dot {
+      width: 2px;
+      height: 2px;
+      background-color: colors(text-neutral_2);
+      border-radius: radius-basic(full);
+    }
+  }
+
+  .step-labels {
+    display: flex;
+    flex-direction: column;
+    gap: padding(xsmall);
+    color: colors(text-neutral_1);
+
+    @include apply-typography(subtitle3);
+
+    li {
+      padding: padding(medium) padding(large);
+      border: 2px solid colors(border-neutral_3);
+      border-radius: radius-basic(medium);
+    }
+
+    li.active {
+      color: colors(text-body);
+      border: 2px solid colors(border-neutral_6);
+    }
+  }
+}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "sales-frontend-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "private": false,
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -12,7 +13,7 @@
     ".": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "default": "./dist/index.esm.js"
       },
       "require": {
         "types": "./dist/index.d.ts",
@@ -21,28 +22,48 @@
     }
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.8.0",
+    "@hookform/resolvers": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@tanstack/react-table": "^8.0.0",
     "@types/node": "^22.14.0",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.1",
+    "concurrently": "^9.1.2",
+    "copyfiles": "^2.4.1",
+    "esbuild": "^0.25.3",
     "react": "^19.1.0",
+    "react-hook-form": "^7.58.1",
+    "rollup": "^4.40.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.86.3",
-    "tsup": "^8.4.0",
     "typescript": "5.8.2",
-    "sales-frontend-typescript-config": "0.0.1",
-    "eslint-config-sales-frontend-eslint-config-v8": "^0.0.4",
-    "sales-frontend-design-system": "0.0.2"
+    "zod": "^3.25.67",
+    "eslint-config-sales-frontend-eslint-config-v8": "^0.0.5",
+    "sales-frontend-typescript-config": "0.0.2",
+    "sales-frontend-design-system": "0.0.5"
   },
   "peerDependencies": {
+    "@tanstack/react-table": "^8.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "sales-frontend-design-system": ">=0.0.0"
+    "react-hook-form": "^7.58.1",
+    "sales-frontend-design-system": "^0.0.5"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit",
-    "storybook": "tsup --watch",
-    "build": "tsup",
+    "storybook": "concurrently \"rollup -c -w\" \"pnpm copy-scss:watch\"",
+    "copy-scss": "copyfiles -u 1 'src/**/*.scss' dist",
+    "copy-scss:watch": "copyfiles -w -u 1 'src/**/*.scss' dist",
+    "build": "rollup -c && pnpm copy-scss",
     "release": "pnpm publish"
   }
 }