@tipp/ui 1.0.52 → 1.0.53

package/dist/atoms/popover.d.cts

@@ -0,0 +1 @@
+export { Popover } from '@radix-ui/themes';

package/dist/atoms/popover.d.ts

@@ -0,0 +1 @@
+export { Popover } from '@radix-ui/themes';

package/dist/atoms/progress.d.cts

@@ -0,0 +1 @@
+export { Progress, ProgressProps } from '@radix-ui/themes';

package/dist/atoms/progress.d.ts

@@ -0,0 +1 @@
+export { Progress, ProgressProps } from '@radix-ui/themes';

package/dist/atoms/quote.d.cts

@@ -0,0 +1 @@
+export { Quote, QuoteProps } from '@radix-ui/themes';

package/dist/atoms/quote.d.ts

@@ -0,0 +1 @@
+export { Quote, QuoteProps } from '@radix-ui/themes';

package/dist/atoms/radio-cards.d.cts

@@ -0,0 +1 @@
+export { RadioCards } from '@radix-ui/themes';

package/dist/atoms/radio-cards.d.ts

@@ -0,0 +1 @@
+export { RadioCards } from '@radix-ui/themes';

package/dist/atoms/radio-group.d.cts

@@ -0,0 +1 @@
+export { RadioGroup } from '@radix-ui/themes';

package/dist/atoms/radio-group.d.ts

@@ -0,0 +1 @@
+export { RadioGroup } from '@radix-ui/themes';

package/dist/atoms/radio.d.cts

@@ -0,0 +1 @@
+export { Radio, RadioProps } from '@radix-ui/themes';

package/dist/atoms/radio.d.ts

@@ -0,0 +1 @@
+export { Radio, RadioProps } from '@radix-ui/themes';

package/dist/atoms/scroll-area.d.cts

@@ -0,0 +1 @@
+export { ScrollArea, ScrollAreaProps } from '@radix-ui/themes';

package/dist/atoms/scroll-area.d.ts

@@ -0,0 +1 @@
+export { ScrollArea, ScrollAreaProps } from '@radix-ui/themes';

package/dist/atoms/section.d.cts

@@ -0,0 +1 @@
+export { Section, SectionProps } from '@radix-ui/themes';

package/dist/atoms/section.d.ts

@@ -0,0 +1 @@
+export { Section, SectionProps } from '@radix-ui/themes';

package/dist/atoms/segmented-control.d.cts

@@ -0,0 +1 @@
+export { SegmentedControl } from '@radix-ui/themes';

package/dist/atoms/segmented-control.d.ts

@@ -0,0 +1 @@
+export { SegmentedControl } from '@radix-ui/themes';

package/dist/atoms/select.d.cts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { Select as Select$1 } from '@radix-ui/themes';
+
+type ContentProps = Select$1.ContentProps & {
+    isNavigation?: boolean;
+};
+declare const Select: {
+    Content: react.ForwardRefExoticComponent<Select$1.ContentProps & {
+        isNavigation?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Root: react.FC<Select$1.RootProps>;
+    Trigger: react.ForwardRefExoticComponent<Select$1.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Item: react.ForwardRefExoticComponent<Select$1.ItemProps & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Select$1.GroupProps & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<Select$1.LabelProps & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<Select$1.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { type ContentProps, Select };

package/dist/atoms/select.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { Select as Select$1 } from '@radix-ui/themes';
+
+type ContentProps = Select$1.ContentProps & {
+    isNavigation?: boolean;
+};
+declare const Select: {
+    Content: react.ForwardRefExoticComponent<Select$1.ContentProps & {
+        isNavigation?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Root: react.FC<Select$1.RootProps>;
+    Trigger: react.ForwardRefExoticComponent<Select$1.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Item: react.ForwardRefExoticComponent<Select$1.ItemProps & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Select$1.GroupProps & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<Select$1.LabelProps & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<Select$1.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { type ContentProps, Select };

package/dist/atoms/separator.d.cts

@@ -0,0 +1 @@
+export { Separator, SeparatorProps } from '@radix-ui/themes';

package/dist/atoms/separator.d.ts

@@ -0,0 +1 @@
+export { Separator, SeparatorProps } from '@radix-ui/themes';

package/dist/atoms/skeleton.d.cts

@@ -0,0 +1 @@
+export { Skeleton, SkeletonProps } from '@radix-ui/themes';

package/dist/atoms/skeleton.d.ts

@@ -0,0 +1 @@
+export { Skeleton, SkeletonProps } from '@radix-ui/themes';

package/dist/atoms/spinner.d.cts

@@ -0,0 +1 @@
+export { Spinner, SpinnerProps } from '@radix-ui/themes';

package/dist/atoms/spinner.d.ts

@@ -0,0 +1 @@
+export { Spinner, SpinnerProps } from '@radix-ui/themes';

package/dist/atoms/strong.d.cts

@@ -0,0 +1 @@
+export { Strong, StrongProps } from '@radix-ui/themes';

package/dist/atoms/strong.d.ts

@@ -0,0 +1 @@
+export { Strong, StrongProps } from '@radix-ui/themes';

package/dist/atoms/switch.d.cts

@@ -0,0 +1 @@
+export { Switch, SwitchProps } from '@radix-ui/themes';

package/dist/atoms/switch.d.ts

@@ -0,0 +1 @@
+export { Switch, SwitchProps } from '@radix-ui/themes';

package/dist/atoms/tab-nav.d.cts

@@ -0,0 +1 @@
+export { TabNav } from '@radix-ui/themes';

package/dist/atoms/tab-nav.d.ts

@@ -0,0 +1 @@
+export { TabNav } from '@radix-ui/themes';

package/dist/atoms/tabs.d.cts

@@ -0,0 +1 @@
+export { Tabs } from '@radix-ui/themes';

package/dist/atoms/tabs.d.ts

@@ -0,0 +1 @@
+export { Tabs } from '@radix-ui/themes';

package/dist/atoms/text-area.d.cts

@@ -0,0 +1 @@
+export { TextArea, TextAreaProps } from '@radix-ui/themes';

package/dist/atoms/text-area.d.ts

@@ -0,0 +1 @@
+export { TextArea, TextAreaProps } from '@radix-ui/themes';

package/dist/atoms/text-field.d.cts

@@ -0,0 +1 @@
+export { TextField } from '@radix-ui/themes';

package/dist/atoms/text-field.d.ts

@@ -0,0 +1 @@
+export { TextField } from '@radix-ui/themes';

package/dist/atoms/toast.d.cts

@@ -0,0 +1,6 @@
+import { ToastContainerProps } from 'react-toastify';
+export { toast } from 'react-toastify';
+
+declare function ToastContainer(props: ToastContainerProps): React.ReactElement;
+
+export { ToastContainer };

package/dist/atoms/toast.d.ts

@@ -0,0 +1,6 @@
+import { ToastContainerProps } from 'react-toastify';
+export { toast } from 'react-toastify';
+
+declare function ToastContainer(props: ToastContainerProps): React.ReactElement;
+
+export { ToastContainer };

package/dist/atoms/tooltip.d.cts

@@ -0,0 +1 @@
+export { Tooltip, TooltipProps } from '@radix-ui/themes';

package/dist/atoms/tooltip.d.ts

@@ -0,0 +1 @@
+export { Tooltip, TooltipProps } from '@radix-ui/themes';

package/dist/atoms/typo.d.cts

@@ -0,0 +1,9 @@
+import { TextProps } from '@radix-ui/themes';
+import react__default from 'react';
+
+type TypoProps = TextProps & {
+    variant?: 'body' | 'caption' | 'subtitle';
+};
+declare const Typo: react__default.ForwardRefExoticComponent<TypoProps & react__default.RefAttributes<HTMLSpanElement>>;
+
+export { Typo, type TypoProps };

package/dist/atoms/typo.d.ts

@@ -0,0 +1,9 @@
+import { TextProps } from '@radix-ui/themes';
+import react__default from 'react';
+
+type TypoProps = TextProps & {
+    variant?: 'body' | 'caption' | 'subtitle';
+};
+declare const Typo: react__default.ForwardRefExoticComponent<TypoProps & react__default.RefAttributes<HTMLSpanElement>>;
+
+export { Typo, type TypoProps };

package/dist/charts/chart-default-props.d.cts

@@ -0,0 +1,85 @@
+declare const EchartDefaultProps: {
+    readonly opts: {
+        readonly renderer: "svg";
+    };
+    readonly theme: {
+        version: number;
+        themeName: string;
+        theme: {
+            seriesCnt: string;
+            backgroundColor: string;
+            titleColor: string;
+            subtitleColor: string;
+            textColorShow: boolean;
+            textColor: string;
+            markTextColor: string;
+            color: string[];
+            borderColor: string;
+            borderWidth: number;
+            visualMapColor: string[];
+            legendTextColor: string;
+            kColor: string;
+            kColor0: string;
+            kBorderColor: string;
+            kBorderColor0: string;
+            kBorderWidth: number;
+            lineWidth: number;
+            symbolSize: number;
+            symbol: string;
+            symbolBorderWidth: number;
+            lineSmooth: boolean;
+            graphLineWidth: number;
+            graphLineColor: string;
+            mapLabelColor: string;
+            mapLabelColorE: string;
+            mapBorderColor: string;
+            mapBorderColorE: string;
+            mapBorderWidth: number;
+            mapBorderWidthE: number;
+            mapAreaColor: string;
+            mapAreaColorE: string;
+            axes: {
+                type: string;
+                name: string;
+                axisLineShow: boolean;
+                axisLineColor: string;
+                axisTickShow: boolean;
+                axisTickColor: string;
+                axisLabelShow: boolean;
+                axisLabelColor: string;
+                splitLineShow: boolean;
+                splitLineColor: string[];
+                splitAreaShow: boolean;
+                splitAreaColor: string[];
+            }[];
+            axisSeperateSetting: boolean;
+            toolboxColor: string;
+            toolboxEmphasisColor: string;
+            tooltipAxisColor: string;
+            tooltipAxisWidth: number;
+            timelineLineColor: string;
+            timelineLineWidth: number;
+            timelineItemColor: string;
+            timelineItemColorE: string;
+            timelineCheckColor: string;
+            timelineCheckBorderColor: string;
+            timelineItemBorderWidth: number;
+            timelineControlColor: string;
+            timelineControlBorderColor: string;
+            timelineControlBorderWidth: number;
+            timelineLabelColor: string;
+        };
+    };
+    readonly option: {
+        readonly textStyle: {
+            readonly fontFamily: "Noto Sans KR";
+        };
+        readonly tooltip: {
+            readonly textStyle: {
+                readonly fontSize: 16;
+            };
+        };
+    };
+};
+
+export { EchartDefaultProps };

package/dist/charts/chart-default-props.d.ts

@@ -0,0 +1,85 @@
+declare const EchartDefaultProps: {
+    readonly opts: {
+        readonly renderer: "svg";
+    };
+    readonly theme: {
+        version: number;
+        themeName: string;
+        theme: {
+            seriesCnt: string;
+            backgroundColor: string;
+            titleColor: string;
+            subtitleColor: string;
+            textColorShow: boolean;
+            textColor: string;
+            markTextColor: string;
+            color: string[];
+            borderColor: string;
+            borderWidth: number;
+            visualMapColor: string[];
+            legendTextColor: string;
+            kColor: string;
+            kColor0: string;
+            kBorderColor: string;
+            kBorderColor0: string;
+            kBorderWidth: number;
+            lineWidth: number;
+            symbolSize: number;
+            symbol: string;
+            symbolBorderWidth: number;
+            lineSmooth: boolean;
+            graphLineWidth: number;
+            graphLineColor: string;
+            mapLabelColor: string;
+            mapLabelColorE: string;
+            mapBorderColor: string;
+            mapBorderColorE: string;
+            mapBorderWidth: number;
+            mapBorderWidthE: number;
+            mapAreaColor: string;
+            mapAreaColorE: string;
+            axes: {
+                type: string;
+                name: string;
+                axisLineShow: boolean;
+                axisLineColor: string;
+                axisTickShow: boolean;
+                axisTickColor: string;
+                axisLabelShow: boolean;
+                axisLabelColor: string;
+                splitLineShow: boolean;
+                splitLineColor: string[];
+                splitAreaShow: boolean;
+                splitAreaColor: string[];
+            }[];
+            axisSeperateSetting: boolean;
+            toolboxColor: string;
+            toolboxEmphasisColor: string;
+            tooltipAxisColor: string;
+            tooltipAxisWidth: number;
+            timelineLineColor: string;
+            timelineLineWidth: number;
+            timelineItemColor: string;
+            timelineItemColorE: string;
+            timelineCheckColor: string;
+            timelineCheckBorderColor: string;
+            timelineItemBorderWidth: number;
+            timelineControlColor: string;
+            timelineControlBorderColor: string;
+            timelineControlBorderWidth: number;
+            timelineLabelColor: string;
+        };
+    };
+    readonly option: {
+        readonly textStyle: {
+            readonly fontFamily: "Noto Sans KR";
+        };
+        readonly tooltip: {
+            readonly textStyle: {
+                readonly fontSize: 16;
+            };
+        };
+    };
+};
+
+export { EchartDefaultProps };

package/dist/charts/horizontal-bar-chart.d.cts

@@ -0,0 +1,17 @@
+import react__default from 'react';
+
+interface HorizontalBarChartProps {
+    /** 100% 바가 뜻하는 전체 값 */
+    total: number;
+    /** 화면에 채워져보이는 값 */
+    value: number;
+    /** 배경 색상 */
+    backgroundColor?: string;
+    /** 바의 색상 */
+    barColor?: string;
+    /** 바의 높이 */
+    height?: number;
+}
+declare function HorizontalBarChart(props: HorizontalBarChartProps): react__default.ReactNode;
+
+export { HorizontalBarChart, type HorizontalBarChartProps };

package/dist/charts/horizontal-bar-chart.d.ts

@@ -0,0 +1,17 @@
+import react__default from 'react';
+
+interface HorizontalBarChartProps {
+    /** 100% 바가 뜻하는 전체 값 */
+    total: number;
+    /** 화면에 채워져보이는 값 */
+    value: number;
+    /** 배경 색상 */
+    backgroundColor?: string;
+    /** 바의 색상 */
+    barColor?: string;
+    /** 바의 높이 */
+    height?: number;
+}
+declare function HorizontalBarChart(props: HorizontalBarChartProps): react__default.ReactNode;
+
+export { HorizontalBarChart, type HorizontalBarChartProps };

package/dist/charts/index.d.cts

@@ -0,0 +1,3 @@
+export { HorizontalBarChart, HorizontalBarChartProps } from './horizontal-bar-chart.cjs';
+export { EchartDefaultProps } from './chart-default-props.cjs';
+import 'react';

package/dist/charts/index.d.ts

@@ -0,0 +1,3 @@
+export { HorizontalBarChart, HorizontalBarChartProps } from './horizontal-bar-chart.js';
+export { EchartDefaultProps } from './chart-default-props.js';
+import 'react';

package/dist/chunk-7A7J457W.js

@@ -0,0 +1,63 @@
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-AQX7DQLI.js";
+
+// src/molecules/navigation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Navigation({
+  items,
+  fontColor,
+  backgroundColor,
+  activeKey
+}) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "column",
+      gap: "4",
+      pr: "3",
+      style: {
+        color: fontColor || "var(--white-a12)",
+        backgroundColor: backgroundColor || "var(--black-a12)"
+      },
+      children: items == null ? void 0 : items.map((item) => {
+        const { key, title, icon, itemRender, onClick, children } = item;
+        return /* @__PURE__ */ jsxs(Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+            icon,
+            /* @__PURE__ */ jsx(Typo, { variant: "subtitle", children: title })
+          ] }),
+          children == null ? void 0 : children.map((menu) => {
+            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
+                ml: "37px",
+                onClick: menu.onClick,
+                size: "large",
+                style: {
+                  color: "var(--white-a12)",
+                  height: "32px",
+                  paddingLeft: "var(--space-2)"
+                },
+                children: menu.title
+              },
+              menu.key
+            );
+          })
+        ] }, key);
+      })
+    }
+  );
+}
+
+export {
+  Navigation
+};
+//# sourceMappingURL=chunk-7A7J457W.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/navigation.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Flex, Typo } from '../atoms';\n\ninterface Item {\n  itemRender?: (item: Item) => React.ReactNode;\n  key: string;\n  onClick?: () => void;\n  title: string;\n  icon?: React.ReactNode;\n  children?: Item[];\n}\n\nexport interface NavigationProps {\n  items?: Item[];\n  fontColor?: string;\n  backgroundColor?: string;\n  activeKey?: string;\n}\n\nexport function Navigation({\n  items,\n  fontColor,\n  backgroundColor,\n  activeKey,\n}: NavigationProps): React.ReactNode {\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      pr=\"3\"\n      style={{\n        color: fontColor || 'var(--white-a12)',\n        backgroundColor: backgroundColor || 'var(--black-a12)',\n      }}\n    >\n      {items?.map((item) => {\n        const { key, title, icon, itemRender, onClick, children } = item;\n        return (\n          <Flex direction=\"column\" key={key} onClick={onClick}>\n            {itemRender ? (\n              itemRender(item)\n            ) : (\n              <Flex align=\"center\" gap=\"3\" height=\"36px\" pl=\"4\" pr=\"4\">\n                {icon}\n                <Typo variant=\"subtitle\">{title}</Typo>\n              </Flex>\n            )}\n            {children?.map((menu) => {\n              return menu.itemRender ? (\n                menu.itemRender(menu)\n              ) : (\n                <Button\n                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}\n                  key={menu.key}\n                  ml=\"37px\"\n                  onClick={menu.onClick}\n                  size=\"large\"\n                  style={{\n                    color: 'var(--white-a12)',\n                    height: '32px',\n                    paddingLeft: 'var(--space-2)',\n                  }}\n                >\n                  {menu.title}\n                </Button>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA0Cc,SAEE,KAFF;AAvBP,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,OAAO,aAAa;AAAA,QACpB,iBAAiB,mBAAmB;AAAA,MACtC;AAAA,MAEC,yCAAO,IAAI,CAAC,SAAS;AACpB,cAAM,EAAE,KAAK,OAAO,MAAM,YAAY,SAAS,SAAS,IAAI;AAC5D,eACE,qBAAC,QAAK,WAAU,UAAmB,SAChC;AAAA,uBACC,WAAW,IAAI,IAEf,qBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,QAAO,QAAO,IAAG,KAAI,IAAG,KAClD;AAAA;AAAA,YACD,oBAAC,QAAK,SAAQ,YAAY,iBAAM;AAAA,aAClC;AAAA,UAED,qCAAU,IAAI,CAAC,SAAS;AACvB,mBAAO,KAAK,aACV,KAAK,WAAW,IAAI,IAEpB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,0BAA0B,cAAc,KAAK,MAAM,WAAW,EAAE;AAAA,gBAE3E,IAAG;AAAA,gBACH,SAAS,KAAK;AAAA,gBACd,MAAK;AAAA,gBACL,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,aAAa;AAAA,gBACf;AAAA,gBAEC,eAAK;AAAA;AAAA,cAVD,KAAK;AAAA,YAWZ;AAAA,UAEJ;AAAA,aA5B4B,GA6B9B;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-CNQ7RNNY.js

@@ -0,0 +1,23 @@
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/atoms/field-error-wrapper.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldErrorWrapper({
+  children,
+  error
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+    children,
+    error ? /* @__PURE__ */ jsx(Typo, { color: "red", variant: "caption", children: error }) : null
+  ] });
+}
+
+export {
+  FieldErrorWrapper
+};
+//# sourceMappingURL=chunk-CNQ7RNNY.js.map

package/dist/chunk-CNQ7RNNY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/field-error-wrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface FieldErrorWrapperProps {\n  children?: React.ReactNode;\n  error?: React.ReactNode;\n}\n\nexport function FieldErrorWrapper({\n  children,\n  error,\n}: FieldErrorWrapperProps): JSX.Element {\n  return (\n    <Flex direction=\"column\" gap=\"1\">\n      {children}\n      {error ? (\n        <Typo color=\"red\" variant=\"caption\">\n          {error}\n        </Typo>\n      ) : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;AAcI,SAGI,KAHJ;AALG,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAAwC;AACtC,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B;AAAA;AAAA,IACA,QACC,oBAAC,QAAK,OAAM,OAAM,SAAQ,WACvB,iBACH,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/chunk-FUSEDVWI.js

@@ -0,0 +1,130 @@
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "./chunk-TSVWEPRP.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, siblingCount = 2 } = props;
+  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 (page - siblingCount <= 0 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (page + siblingCount > count && start > 1) {
+      start = Math.max(1, start - (page + siblingCount - count));
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page, siblingCount]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const prev = useMemo(() => {
+    const p = page - 1;
+    return p < 1 ? void 0 : p;
+  }, [page]);
+  const next = useMemo(() => {
+    const n = page + 1;
+    return n > count ? void 0 : n;
+  }, [count, page]);
+  const onClickPrev = useCallback(() => {
+    prev && setPage(prev);
+  }, [prev]);
+  const onClickNext = useCallback(() => {
+    next && setPage(next);
+  }, [next]);
+  const doublePrev = useMemo(() => {
+    if (!visibleItems.length)
+      return;
+    return Math.max(0, visibleItems[0] - 1);
+  }, [visibleItems]);
+  const onClickDoublePrev = useCallback(() => {
+    doublePrev && setPage(doublePrev);
+  }, [doublePrev]);
+  const doubleNext = useMemo(() => {
+    if (!visibleItems.length)
+      return;
+    const n = visibleItems[visibleItems.length - 1] + 1;
+    if (n > count)
+      return;
+    return Math.min(count, n);
+  }, [count, visibleItems]);
+  const onClickDoubleNext = useCallback(() => {
+    doubleNext && setPage(doubleNext);
+  }, [doubleNext]);
+  const iconSize = {
+    height: 24,
+    width: 24
+  };
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "3",
+    style: { borderRadius: "50%" }
+  };
+  if (!page)
+    return null;
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doublePrev,
+        onClick: onClickDoublePrev
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+      })
+    ),
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !prev, 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: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doubleNext,
+        onClick: onClickDoubleNext
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, __spreadValues({}, iconSize))
+      })
+    )
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-FUSEDVWI.js.map