@tipp/ui 1.6.6 → 1.6.7

package/dist/chunk-NE7UF6BI.js

@@ -0,0 +1,169 @@
+import {
+  Avatar
+} from "./chunk-3SSSCLJ5.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  CheckIcon
+} from "./chunk-RZICGWT6.js";
+
+// src/molecules/stepper.tsx
+import { createContext, Children, useContext, useMemo } from "react";
+import { Separator } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StepContext = createContext({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: Children.map(children, (child, index) => {
+        return /* @__PURE__ */ jsx(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = useContext(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ jsx(
+    Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = useMemo(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ jsx(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = useContext(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-NE7UF6BI.js.map

package/dist/chunk-NE7UF6BI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children?: React.ReactElement | React.ReactElement[];\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === activeStep,\n              completed: index < activeStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector =\n    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }} variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-NTBVSA6A.js

@@ -0,0 +1,192 @@
+import {
+  Row
+} from "./chunk-PCWEW2UL.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Pagination
+} from "./chunk-UO4RGP6A.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  TriangleArrowDownIcon
+} from "./chunk-BSTJBBEX.js";
+import {
+  TriangleArrowUpIcon
+} from "./chunk-NDUKDKGB.js";
+
+// src/molecules/expand-table/index.tsx
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getSortedRowModel,
+  createColumnHelper,
+  getPaginationRowModel
+} from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExpandTable(props) {
+  const {
+    data,
+    columns,
+    ExpandComp,
+    placeholder,
+    onRowClick,
+    tableStyle,
+    showPagination,
+    isLoading,
+    pageIndex = 0,
+    pageSize = 10,
+    siblingCount = 2,
+    getRowStyle,
+    getCellStyle
+  } = props;
+  const defaultAlign = "left";
+  const [pagination, setPagination] = useState({
+    pageIndex: pageIndex || 0,
+    pageSize: pageSize || 9999
+  });
+  const [sorting, setSorting] = useState([]);
+  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
+    data: data || [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+      pagination
+    },
+    onSortingChange: setSorting,
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination
+  });
+  const gridTemplateColumns = useMemo(() => {
+    return columns.map((col) => {
+      var _a;
+      if ((_a = col.meta) == null ? void 0 : _a.autoSize)
+        return "1fr";
+      return `${col.size || 150}px`;
+    }).join(" ");
+  }, [columns]);
+  const rowModels = getRowModel();
+  const onChangePagination = useCallback(
+    (page) => {
+      setPageIndex(page - 1);
+    },
+    [setPageIndex]
+  );
+  const helpCompRender = useCallback(
+    (rowLength) => {
+      if (isLoading) {
+        return /* @__PURE__ */ jsx(
+          Flex,
+          {
+            align: "center",
+            height: "100%",
+            justify: "center",
+            p: "5",
+            width: "100%",
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        );
+      }
+      if (rowLength === 0) {
+        return /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
+      }
+      return null;
+    },
+    [isLoading, placeholder]
+  );
+  const pageCount = useMemo(() => {
+    if (!data)
+      return 0;
+    return Math.ceil(data.length / pageSize);
+  }, [data, pageSize]);
+  return /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "tr",
+        style: { gridTemplateColumns },
+        children: headerGroup.headers.map((header) => {
+          var _a;
+          const sortable = header.column.getCanSort();
+          const sortedState = header.column.getIsSorted();
+          const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
+          return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: header.column.getToggleSortingHandler(),
+              style: sortable ? { cursor: "pointer" } : { cursor: "default" },
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(Typo, { as: "div", variant: "body", children: flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }),
+                sortable ? /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    direction: "column",
+                    style: { marginLeft: "var(--space-2)" },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        TriangleArrowUpIcon,
+                        {
+                          color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TriangleArrowDownIcon,
+                        {
+                          color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      )
+                    ]
+                  }
+                ) : null
+              ]
+            }
+          ) }, header.id);
+        })
+      },
+      headerGroup.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+      return /* @__PURE__ */ jsx(
+        Row,
+        {
+          ExpandComp,
+          defaultAlign,
+          getCellStyle,
+          getRowStyle,
+          gridTemplateColumns,
+          onRowClick,
+          row
+        },
+        `row_${row.id}`
+      );
+    }) }),
+    showPagination ? /* @__PURE__ */ jsx(Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        count: pageCount,
+        onChange: onChangePagination,
+        page: pagination.pageIndex + 1,
+        siblingCount
+      }
+    ) }) : null
+  ] });
+}
+
+export {
+  createColumnHelper,
+  ExpandTable
+};
+//# sourceMappingURL=chunk-NTBVSA6A.js.map

package/dist/chunk-NTBVSA6A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n  ColumnDef,\n  SortingState,\n  RowData,\n  Row as RowType,\n  PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n  getSortedRowModel,\n  createColumnHelper,\n  getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Flex, Pagination, Spinner, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n  /** 렌더할 데이터 배열  */\n  data?: Datum[];\n  /** 테이블 컬럼의 메타 데이터 */\n  columns: ColumnDef<Datum>[];\n  /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n  ExpandComp?: ExpandComp<Datum>;\n  /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n  placeholder?: React.ReactNode;\n  /** 행 클릭 시 실행할 콜백 */\n  onRowClick?: OnRowClick<Datum>;\n  getRowStyle?: (data: Datum) => CSSProperties;\n  getCellStyle?: (data: Datum) => CSSProperties;\n  tableStyle?: CSSProperties;\n  isLoading?: boolean;\n\n  /** pagination - 표시 유무 */\n  showPagination?: boolean;\n  /** pagination - 현재 선택된 페이지, 0부터 시작 */\n  pageIndex?: number;\n  /** pagination - 한 페이지에 표시될 컬럼 개수 */\n  pageSize?: number;\n  /** pagination -  */\n  siblingCount?: number;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n  props: ExpandTableProps<Datum>\n): React.ReactNode {\n  const {\n    data,\n    columns,\n    ExpandComp,\n    placeholder,\n    onRowClick,\n    tableStyle,\n    showPagination,\n    isLoading,\n    pageIndex = 0,\n    pageSize = 10,\n    siblingCount = 2,\n    getRowStyle,\n    getCellStyle,\n  } = props;\n  const defaultAlign = 'left';\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: pageIndex || 0,\n    pageSize: pageSize || 9999,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({\n    data: data || [],\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n      pagination,\n    },\n    onSortingChange: setSorting,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n  });\n\n  const gridTemplateColumns = useMemo<string>(() => {\n    return columns\n      .map((col) => {\n        if (col.meta?.autoSize) return '1fr';\n        return `${col.size || 150}px`;\n      })\n      .join(' ');\n  }, [columns]);\n\n  const rowModels = getRowModel();\n\n  const onChangePagination = useCallback(\n    (page: number) => {\n      setPageIndex(page - 1);\n    },\n    [setPageIndex]\n  );\n\n  const helpCompRender = useCallback(\n    (rowLength: number) => {\n      if (isLoading) {\n        return (\n          <Flex\n            align=\"center\"\n            height=\"100%\"\n            justify=\"center\"\n            p=\"5\"\n            width=\"100%\"\n          >\n            <Spinner />\n          </Flex>\n        );\n      }\n      if (rowLength === 0) {\n        return (\n          <div className=\"tr\" key=\"expand_placeholder\">\n            <Flex align=\"center\" justify=\"center\">\n              {placeholder || (\n                <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n                  데이터가 없습니다\n                </Typo>\n              )}\n            </Flex>\n          </div>\n        );\n      }\n      return null;\n    },\n    [isLoading, placeholder]\n  );\n\n  const pageCount = useMemo(() => {\n    if (!data) return 0;\n    return Math.ceil(data.length / pageSize);\n  }, [data, pageSize]);\n\n  return (\n    <div className=\"expand-table\" style={tableStyle}>\n      <div className=\"thead\">\n        {getHeaderGroups().map((headerGroup) => (\n          <div\n            className=\"tr\"\n            key={headerGroup.id}\n            style={{ gridTemplateColumns }}\n          >\n            {headerGroup.headers.map((header) => {\n              const sortable = header.column.getCanSort();\n              const sortedState = header.column.getIsSorted();\n              const justifyContent =\n                header.column.columnDef.meta?.align || defaultAlign;\n\n              return (\n                <div className={`${justifyContent} th`} key={header.id}>\n                  <button\n                    onClick={header.column.getToggleSortingHandler()}\n                    style={\n                      sortable ? { cursor: 'pointer' } : { cursor: 'default' }\n                    }\n                    type=\"button\"\n                  >\n                    <Typo as=\"div\" variant=\"body\">\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                    </Typo>\n                    {sortable ? (\n                      <Flex\n                        direction=\"column\"\n                        style={{ marginLeft: 'var(--space-2)' }}\n                      >\n                        <TriangleArrowUpIcon\n                          color={\n                            sortedState === 'asc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                        <TriangleArrowDownIcon\n                          color={\n                            sortedState === 'desc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                      </Flex>\n                    ) : null}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      <div className=\"tbody\">\n        {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n        {helpCompRender(rowModels.rows.length) ||\n          rowModels.rows.map((row) => {\n            return (\n              <Row\n                ExpandComp={ExpandComp}\n                defaultAlign={defaultAlign}\n                getCellStyle={getCellStyle}\n                getRowStyle={getRowStyle}\n                gridTemplateColumns={gridTemplateColumns}\n                key={`row_${row.id}`}\n                onRowClick={onRowClick}\n                row={row}\n              />\n            );\n          })}\n      </div>\n\n      {showPagination ? (\n        <Flex justify=\"end\" pt=\"3\" width=\"100%\">\n          <Pagination\n            count={pageCount}\n            onChange={onChangePagination}\n            page={pagination.pageIndex + 1}\n            siblingCount={siblingCount}\n          />\n        </Flex>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-OD6EJ426.js

@@ -0,0 +1,62 @@
+import {
+  DatePicker
+} from "./chunk-2QMAWQMN.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-U7JPP7WJ.js";
+import {
+  CalendarIcon
+} from "./chunk-RZICGWT6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/molecules/date-picker/date-picker-button.tsx
+import { useMemo } from "react";
+import { format } from "date-fns";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DatePickerButton(props) {
+  const _a = props, { size, placeholder, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "placeholder", "format", "disabled"]);
+  const buttonProps = useMemo(() => {
+    const variant = "outline";
+    const color = "gray";
+    return { size, color, variant, disabled };
+  }, [disabled, size]);
+  const selectFormat = useMemo(() => {
+    if (formatProps)
+      return formatProps;
+    return (date) => date ? format(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : placeholder;
+  }, [formatProps, placeholder]);
+  const className = useMemo(() => {
+    return clsx(
+      "date-picker-button",
+      (disabled || props.readOnly) && "disabled"
+    );
+  }, [disabled, props.readOnly]);
+  return /* @__PURE__ */ jsx(Box, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
+    DatePicker,
+    __spreadProps(__spreadValues({
+      customInput: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className, type: "button" }, buttonProps), { children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "between", width: "100%", children: [
+        rest.selected ? selectFormat(rest.selected) : placeholder,
+        /* @__PURE__ */ jsx(CalendarIcon, {})
+      ] }) })),
+      wrapperClassName: "full-width"
+    }, rest), {
+      disabled
+    })
+  ) });
+}
+
+export {
+  DatePickerButton
+};
+//# sourceMappingURL=chunk-OD6EJ426.js.map

package/dist/chunk-OD6EJ426.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/date-picker/date-picker-button.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { format } from 'date-fns';\nimport { clsx } from 'clsx';\nimport type { ButtonProps } from '../../atoms';\nimport { Box, Button, Flex } from '../../atoms';\nimport { CalendarIcon } from '../../icon';\nimport type { DatePickerProps } from '.';\nimport { DatePicker } from '.';\n\nexport type DatePickerButtonProps = DatePickerProps & {\n  placeholder?: React.ReactNode;\n  format?: (date: Date) => string;\n  size?: ButtonProps['size'];\n};\n\nexport function DatePickerButton(\n  props: DatePickerButtonProps\n): React.ReactElement {\n  const { size, placeholder, format: formatProps, disabled, ...rest } = props;\n\n  const buttonProps = useMemo(() => {\n    const variant: ButtonProps['variant'] = 'outline';\n    const color: ButtonProps['color'] = 'gray';\n    return { size, color, variant, disabled };\n  }, [disabled, size]);\n\n  const selectFormat = useMemo(() => {\n    if (formatProps) return formatProps;\n    return (date?: Date) =>\n      date ? format(date, 'yyyy년 MM월 dd일') : placeholder;\n  }, [formatProps, placeholder]);\n\n  const className = useMemo(() => {\n    return clsx(\n      'date-picker-button',\n      (disabled || props.readOnly) && 'disabled'\n    );\n  }, [disabled, props.readOnly]);\n\n  return (\n    <Box p=\"0\" width=\"100%\">\n      <DatePicker\n        customInput={\n          <Button className={className} type=\"button\" {...buttonProps}>\n            <Flex align=\"center\" gap=\"3\" justify=\"between\" width=\"100%\">\n              {rest.selected ? selectFormat(rest.selected) : placeholder}\n              <CalendarIcon />\n            </Flex>\n          </Button>\n        }\n        wrapperClassName=\"full-width\"\n        {...rest}\n        disabled={disabled}\n      />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AA0CT,SAEE,KAFF;AA7BL,SAAS,iBACd,OACoB;AACpB,QAAsE,YAA9D,QAAM,aAAa,QAAQ,aAAa,SAlBlD,IAkBwE,IAAT,iBAAS,IAAT,CAArD,QAAM,eAAa,UAAqB;AAEhD,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,UAAkC;AACxC,UAAM,QAA8B;AACpC,WAAO,EAAE,MAAM,OAAO,SAAS,SAAS;AAAA,EAC1C,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AAAa,aAAO;AACxB,WAAO,CAAC,SACN,OAAO,OAAO,MAAM,8BAAe,IAAI;AAAA,EAC3C,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO;AAAA,MACL;AAAA,OACC,YAAY,MAAM,aAAa;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,QAAQ,CAAC;AAE7B,SACE,oBAAC,OAAI,GAAE,KAAI,OAAM,QACf;AAAA,IAAC;AAAA;AAAA,MACC,aACE,oBAAC,uCAAO,WAAsB,MAAK,YAAa,cAA/C,EACC,+BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,WAAU,OAAM,QAClD;AAAA,aAAK,WAAW,aAAa,KAAK,QAAQ,IAAI;AAAA,QAC/C,oBAAC,gBAAa;AAAA,SAChB,IACF;AAAA,MAEF,kBAAiB;AAAA,OACb,OAVL;AAAA,MAWC;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/chunk-PEBU5ITQ.js

@@ -0,0 +1,169 @@
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  CheckIcon
+} from "./chunk-RZICGWT6.js";
+import {
+  Avatar
+} from "./chunk-JYJA2PMG.js";
+
+// src/molecules/stepper.tsx
+import { createContext, Children, useContext, useMemo } from "react";
+import { Separator } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StepContext = createContext({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: Children.map(children, (child, index) => {
+        return /* @__PURE__ */ jsx(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = useContext(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ jsx(
+    Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = useMemo(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ jsx(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = useContext(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-PEBU5ITQ.js.map

package/dist/chunk-PEBU5ITQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children?: React.ReactElement | React.ReactElement[];\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === activeStep,\n              completed: index < activeStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector =\n    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }} variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n"],"mappings":"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","names":[]}