@tipp/ui 0.1.13 → 0.1.14

package/dist/chunk-5VZOJQTC.js

@@ -0,0 +1,104 @@
+import {
+  Typo
+} from "./chunk-5U2NU566.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "./chunk-MMAV5BRZ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 2;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    let start = Math.max(1, page - siblingCount);
+    let end = Math.min(count, page + siblingCount);
+    if (start === 1 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (end === count && start > 1) {
+      start += Math.abs(count - end);
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "4",
+    style: { borderRadius: "50%" }
+  };
+  const iconSize = {
+    height: 24,
+    width: 24
+  };
+  const prevDisabled = useMemo(() => {
+    return page - siblingCount <= 1;
+  }, [page]);
+  const nextDisabled = useMemo(() => {
+    return page + siblingCount >= count;
+  }, [count, page]);
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: prevDisabled,
+        onClick: onClickPrev
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize))
+      })
+    ),
+    /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: nextDisabled,
+        onClick: onClickNext
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize))
+      })
+    )
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-5VZOJQTC.js.map

package/dist/chunk-5VZOJQTC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 2;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    let start = Math.max(1, page - siblingCount);\n    let end = Math.min(count, page + siblingCount);\n    if (start === 1 && end < count) {\n      // 남는 sibling만큼 end를 추가\n      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n    } else if (end === count && start > 1) {\n      // 남는 sibling만큼 start를 추가\n      start += Math.abs(count - end);\n    }\n\n    // 1. prev로 보여줄 수 있는 최대 갯수 계산\n    // 2. next로 보여줄 수 있는 최대 갯수 계산\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const onClickPrev = useCallback(() => {\n    setPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const onClickNext = useCallback(() => {\n    setPage((prev) => Math.min(count, prev + 1));\n  }, [count]);\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: '4',\n    style: { borderRadius: '50%' },\n  };\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const prevDisabled = useMemo(() => {\n    return page - siblingCount <= 1;\n  }, [page]);\n\n  const nextDisabled = useMemo(() => {\n    return page + siblingCount >= count;\n  }, [count, page]);\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n      <IconButton\n        disabled={prevDisabled}\n        onClick={onClickPrev}\n        {...moveButtonProps}\n      >\n        <ChevronLeftIcon {...iconSize} />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                setPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton\n        disabled={nextDisabled}\n        onClick={onClickNext}\n        {...moveButtonProps}\n      >\n        <ChevronRightIcon {...iconSize} />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AA+E7D,SAMI,KANJ;AA7DG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,YAAY;AAC3C,QAAI,MAAM,KAAK,IAAI,OAAO,OAAO,YAAY;AAC7C,QAAI,UAAU,KAAK,MAAM,OAAO;AAE9B,YAAM,KAAK,IAAI,OAAO,MAAM,KAAK,IAAI,OAAO,YAAY,IAAI,CAAC;AAAA,IAC/D,WAAW,QAAQ,SAAS,QAAQ,GAAG;AAErC,eAAS,KAAK,IAAI,QAAQ,GAAG;AAAA,IAC/B;AAKA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAAmC;AAAA,IACvC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B;AAEA,QAAM,WAAW;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,oCAAoB,SAAU;AAAA;AAAA,IACjC;AAAA,IACA,oBAAC,QAAK,KAAI,KACP,uBAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,qCAAqB,SAAU;AAAA;AAAA,IAClC;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-63HUW3U7.js

@@ -0,0 +1,33 @@
+// src/atoms/pagination.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, []);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  return /* @__PURE__ */ jsx("div", {});
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-63HUW3U7.js.map

package/dist/chunk-63HUW3U7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, []);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  return <div></div>;\n}\n"],"mappings":";AAAA,SAAgB,WAAW,SAAS,gBAAgB;AA0C3C;AA7BF,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,MAAM,IAAI;AAC5B,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,SAAO,oBAAC,SAAI;AACd;","names":[]}

package/dist/chunk-6J5C2ZMY.js

@@ -0,0 +1,34 @@
+// src/atoms/pagination.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2, 0)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1),
+      0
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  return /* @__PURE__ */ jsx("div", {});
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-6J5C2ZMY.js.map

package/dist/chunk-6J5C2ZMY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2, 0)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1),\n      0\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  return <div></div>;\n}\n"],"mappings":";AAAA,SAAgB,WAAW,SAAS,gBAAgB;AA2C3C;AA9BF,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,GAAG,CAAC;AAAA,IAC3D;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,MAClD;AAAA,IACF;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,SAAO,oBAAC,SAAI;AACd;","names":[]}

package/dist/chunk-6NRI5L3V.js

@@ -0,0 +1,78 @@
+import {
+  Typo
+} from "./chunk-5U2NU566.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "./chunk-MMAV5BRZ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "large"
+  };
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "1", children: [
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) })),
+    visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }),
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }))
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-6NRI5L3V.js.map

package/dist/chunk-6NRI5L3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\nimport { ButtonProps } from './button';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const onClickPrev = useCallback(() => {\n    setPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const onClickNext = useCallback(() => {\n    setPage((prev) => Math.min(count, prev + 1));\n  }, [count]);\n\n  const moveButtonProps: ButtonProps = {\n    variant: 'ghost',\n    size: 'large',\n  };\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"1\">\n      <IconButton onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon />\n      </IconButton>\n      {visibleItems.map((item) => {\n        return (\n          <button\n            className={`page-button ${item === page ? 'active' : ''}`}\n            key={item}\n            onClick={() => {\n              setPage(item);\n            }}\n            type=\"button\"\n          >\n            <Typo variant=\"body\">{item}</Typo>\n          </button>\n        );\n      })}\n      <IconButton onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AA6D7D,SAEI,KAFJ;AA3CG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAA+B;AAAA,IACnC,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAEA,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA,wBAAC,2CAAW,SAAS,eAAiB,kBAArC,EACC,8BAAC,mBAAgB,IACnB;AAAA,IACC,aAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC;AAAA,IACD,oBAAC,2CAAW,SAAS,eAAiB,kBAArC,EACC,8BAAC,oBAAiB,IACpB;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-73H7QYH7.js

@@ -0,0 +1,53 @@
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "./chunk-MMAV5BRZ.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", onClick: onClickPrev, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
+    visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx("button", { onClick: () => setPage(item), children: item }, item);
+    }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", onClick: onClickNext, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-73H7QYH7.js.map

package/dist/chunk-73H7QYH7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { IconButton } from './icon-button';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const onClickPrev = useCallback(() => {\n    setPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const onClickNext = useCallback(() => {\n    setPage((prev) => Math.min(count, prev + 1));\n  }, [count]);\n\n  return (\n    <div>\n      <IconButton variant=\"ghost\" onClick={onClickPrev}>\n        <ChevronLeftIcon />\n      </IconButton>\n      {visibleItems.map((item) => {\n        return (\n          <button key={item} onClick={() => setPage(item)}>\n            {item}\n          </button>\n        );\n      })}\n      <IconButton variant=\"ghost\" onClick={onClickNext}>\n        <ChevronRightIcon />\n      </IconButton>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AAqD7D,SAEI,KAFJ;AAtCG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,qBAAC,SACC;AAAA,wBAAC,cAAW,SAAQ,SAAQ,SAAS,aACnC,8BAAC,mBAAgB,GACnB;AAAA,IACC,aAAa,IAAI,CAAC,SAAS;AAC1B,aACE,oBAAC,YAAkB,SAAS,MAAM,QAAQ,IAAI,GAC3C,kBADU,IAEb;AAAA,IAEJ,CAAC;AAAA,IACD,oBAAC,cAAW,SAAQ,SAAQ,SAAS,aACnC,8BAAC,oBAAiB,GACpB;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-73IX24MC.js

@@ -0,0 +1,70 @@
+import {
+  Typo
+} from "./chunk-5U2NU566.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "./chunk-MMAV5BRZ.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "1", children: [
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClickPrev, variant: "ghost", size: "4", children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
+    visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }),
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClickNext, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-73IX24MC.js.map

package/dist/chunk-73IX24MC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const onClickPrev = useCallback(() => {\n    setPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const onClickNext = useCallback(() => {\n    setPage((prev) => Math.min(count, prev + 1));\n  }, [count]);\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"1\">\n      <IconButton onClick={onClickPrev} variant=\"ghost\" size=\"4\">\n        <ChevronLeftIcon />\n      </IconButton>\n      {visibleItems.map((item) => {\n        return (\n          <button\n            className={`page-button ${item === page ? 'active' : ''}`}\n            key={item}\n            onClick={() => {\n              setPage(item);\n            }}\n            type=\"button\"\n          >\n            <Typo variant=\"body\">{item}</Typo>\n          </button>\n        );\n      })}\n      <IconButton onClick={onClickNext} variant=\"ghost\">\n        <ChevronRightIcon />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AAuD7D,SAEI,KAFJ;AAtCG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA,wBAAC,cAAW,SAAS,aAAa,SAAQ,SAAQ,MAAK,KACrD,8BAAC,mBAAgB,GACnB;AAAA,IACC,aAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC;AAAA,IACD,oBAAC,cAAW,SAAS,aAAa,SAAQ,SACxC,8BAAC,oBAAiB,GACpB;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-765CE347.js

@@ -0,0 +1,25 @@
+// src/atoms/pagination.tsx
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, []);
+  return /* @__PURE__ */ jsx("div", {});
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-765CE347.js.map

package/dist/chunk-765CE347.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, []);\n\n  return <div></div>;\n}\n"],"mappings":";AAAA,SAAgB,SAAS,gBAAgB;AAgChC;AAnBF,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,MAAM,IAAI;AAC5B,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,CAAC;AAEL,SAAO,oBAAC,SAAI;AACd;","names":[]}

package/dist/chunk-7773FLHD.js

@@ -0,0 +1,36 @@
+// src/atoms/pagination.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2, 0)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1),
+      0
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  return /* @__PURE__ */ jsx("div", { children: visibleItems.map((item) => {
+    return /* @__PURE__ */ jsx("button", { onClick: () => setPage(item), children: item }, item);
+  }) });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-7773FLHD.js.map

package/dist/chunk-7773FLHD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2, 0)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1),\n      0\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  return (\n    <div>\n      {visibleItems.map((item) => {\n        return (\n          <button key={item} onClick={() => setPage(item)}>\n            {item}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAgB,WAAW,SAAS,gBAAgB;AA+C1C;AAlCH,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,GAAG,CAAC;AAAA,IAC3D;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,MAClD;AAAA,IACF;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,SACE,oBAAC,SACE,uBAAa,IAAI,CAAC,SAAS;AAC1B,WACE,oBAAC,YAAkB,SAAS,MAAM,QAAQ,IAAI,GAC3C,kBADU,IAEb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/chunk-7SNHWKKM.js

@@ -0,0 +1,79 @@
+import {
+  Typo
+} from "./chunk-5U2NU566.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "./chunk-MMAV5BRZ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 3;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    const start = Math.max(
+      1,
+      Math.min(page - siblingCount, count - siblingCount * 2)
+    );
+    const end = Math.min(
+      count,
+      Math.max(page + siblingCount, siblingCount * 2 + 1)
+    );
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "4",
+    style: { borderRadius: "50%" }
+  };
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) })),
+    /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }) }),
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }))
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-7SNHWKKM.js.map

package/dist/chunk-7SNHWKKM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0 } = props;\n  const siblingCount = 3;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    const start = Math.max(\n      1,\n      Math.min(page - siblingCount, count - siblingCount * 2)\n    );\n    const end = Math.min(\n      count,\n      Math.max(page + siblingCount, siblingCount * 2 + 1)\n    );\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const onClickPrev = useCallback(() => {\n    setPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const onClickNext = useCallback(() => {\n    setPage((prev) => Math.min(count, prev + 1));\n  }, [count]);\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: '4',\n    style: { borderRadius: '50%' },\n  };\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n      <IconButton onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                setPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AA8D7D,SAEI,KAFJ;AA5CG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,QAAQ,eAAe,CAAC;AAAA,IACxD;AACA,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,MACA,KAAK,IAAI,OAAO,cAAc,eAAe,IAAI,CAAC;AAAA,IACpD;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAAmC;AAAA,IACvC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B;AAEA,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA,wBAAC,2CAAW,SAAS,eAAiB,kBAArC,EACC,8BAAC,mBAAgB,IACnB;AAAA,IACA,oBAAC,QAAK,KAAI,KACP,uBAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC,GACH;AAAA,IACA,oBAAC,2CAAW,SAAS,eAAiB,kBAArC,EACC,8BAAC,oBAAiB,IACpB;AAAA,KACF;AAEJ;","names":[]}