@tipp/ui 0.1.13 → 0.1.15

package/dist/chunk-Y3WJXHKK.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, { className: "tipp-pagination", gap: "1", children: [
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClickPrev, variant: "ghost", 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-Y3WJXHKK.js.map

package/dist/chunk-Y3WJXHKK.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 className=\"tipp-pagination\" gap={'1'}>\n      <IconButton onClick={onClickPrev} variant=\"ghost\">\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,WAAU,mBAAkB,KAAK,KACrC;AAAA,wBAAC,cAAW,SAAS,aAAa,SAAQ,SACxC,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-Y4SUCU7P.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", 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-Y4SUCU7P.js.map

package/dist/chunk-Y4SUCU7P.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\">\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,SACxC,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-YJZYXEDZ.js

@@ -0,0 +1,37 @@
+// 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)
+    );
+    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]);
+  console.log({ visibleItems });
+  return /* @__PURE__ */ jsx("div", { children: visibleItems.map((item) => {
+    return /* @__PURE__ */ jsx("button", { onClick: () => setPage(item), children: item }, item);
+  }) });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-YJZYXEDZ.js.map

package/dist/chunk-YJZYXEDZ.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)\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  console.log({ visibleItems });\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;AAgD1C;AAnCH,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,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;AACf,UAAQ,IAAI,EAAE,aAAa,CAAC;AAE5B,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-YN2Q37JR.js

@@ -0,0 +1,15 @@
+// src/atoms/pagination.tsx
+import { jsx } from "react/jsx-runtime";
+function Pagination({
+  page,
+  defaultPage,
+  onChange
+}) {
+  const siblingCount = 5;
+  return /* @__PURE__ */ jsx("div", {});
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-YN2Q37JR.js.map

package/dist/chunk-YN2Q37JR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface PaginationProps {\n  page?: number;\n  defaultPage?: number;\n  onChange: (page: number) => void;\n}\n\nexport function Pagination({\n  page,\n  defaultPage,\n  onChange,\n}: PaginationProps): React.ReactNode {\n  const siblingCount = 5;\n  return <div></div>;\n}\n"],"mappings":";AAcS;AANF,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,eAAe;AACrB,SAAO,oBAAC,SAAI;AACd;","names":[]}

package/dist/chunk-YSIYF52H.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.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-YSIYF52H.js.map

package/dist/chunk-YSIYF52H.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.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,aAAO,KAAK,IAAI,OAAO,YAAY,IAAI;AAAA,IACzC,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-Z52HTVUL.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.abs(page - siblingCount);
+    } else if (end === count && start > 1) {
+      start += Math.abs(page - siblingCount);
+    }
+    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-Z52HTVUL.js.map

package/dist/chunk-Z52HTVUL.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.abs(page - siblingCount);\n    } else if (end === count && start > 1) {\n      // 남는 sibling만큼 start를 추가\n      start += Math.abs(page - siblingCount);\n    }\n\n    // 1. prev로 보여줄 수 있는 최대 갯수 계산\n    // 2. next로 보여줄 수 있는 최대 갯수 계산\n\n    // (1), 2, 3, 4\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;AAiF7D,SAMI,KANJ;AA/DG,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,aAAO,KAAK,IAAI,OAAO,YAAY;AAAA,IACrC,WAAW,QAAQ,SAAS,QAAQ,GAAG;AAErC,eAAS,KAAK,IAAI,OAAO,YAAY;AAAA,IACvC;AAOA,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-ZFOBOYTS.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, { className: "tipp-pagination", children: [
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClickPrev, variant: "ghost", 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-ZFOBOYTS.js.map

package/dist/chunk-ZFOBOYTS.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 className=\"tipp-pagination\">\n      <IconButton onClick={onClickPrev} variant=\"ghost\">\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,WAAU,mBACd;AAAA,wBAAC,cAAW,SAAS,aAAa,SAAQ,SACxC,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/hooks/use-pagination.cjs

@@ -0,0 +1,41 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/use-pagination.ts
+var use_pagination_exports = {};
+__export(use_pagination_exports, {
+  usePagination: () => usePagination
+});
+module.exports = __toCommonJS(use_pagination_exports);
+var usePagination = __toESM(require("react-use-pagination"), 1);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePagination
+});
+//# sourceMappingURL=use-pagination.cjs.map

package/dist/hooks/use-pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-pagination.ts"],"sourcesContent":["export * as usePagination from 'react-use-pagination';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA+B;","names":[]}

package/dist/hooks/use-pagination.d.cts

@@ -0,0 +1,2 @@
+import * as reactUsePagination from 'react-use-pagination';
+export { reactUsePagination as usePagination };

package/dist/hooks/use-pagination.d.ts

@@ -0,0 +1,2 @@
+import * as reactUsePagination from 'react-use-pagination';
+export { reactUsePagination as usePagination };

package/dist/hooks/use-pagination.js

@@ -0,0 +1,8 @@
+import "../chunk-N552FDTV.js";
+
+// src/hooks/use-pagination.ts
+import * as usePagination from "react-use-pagination";
+export {
+  usePagination
+};
+//# sourceMappingURL=use-pagination.js.map

package/dist/hooks/use-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-pagination.ts"],"sourcesContent":["export * as usePagination from 'react-use-pagination';\n"],"mappings":";;;AAAA,YAAY,mBAAmB;","names":[]}

package/dist/icon.cjs

@@ -23,6 +23,8 @@ __export(icon_exports, {
   BookmarkFilledIcon: () => import_react_icons.BookmarkFilledIcon,
   BookmarkIcon: () => import_react_icons.BookmarkIcon,
   ChatBubbleIcon: () => import_react_icons.ChatBubbleIcon,
+  ChevronLeftIcon: () => import_react_icons.ChevronLeftIcon,
+  ChevronRightIcon: () => import_react_icons.ChevronRightIcon,
   DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
   ExclamationTriangleIcon: () => import_react_icons.ExclamationTriangleIcon,
   ExitIcon: () => import_react_icons.ExitIcon,
@@ -38,6 +40,8 @@ var import_react_icons = require("@radix-ui/react-icons");
   BookmarkFilledIcon,
   BookmarkIcon,
   ChatBubbleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
   DotsHorizontalIcon,
   ExclamationTriangleIcon,
   ExitIcon,

package/dist/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWO;","names":[]}
+{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAaO;","names":[]}

package/dist/icon.d.cts

@@ -1,3 +1,3 @@
-export { BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PlusIcon } from '@radix-ui/react-icons';
+export { BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PlusIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';

package/dist/icon.d.ts

@@ -1,3 +1,3 @@
-export { BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PlusIcon } from '@radix-ui/react-icons';
+export { BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PlusIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';