@tipp/ui 1.0.13 → 1.0.14

package/src/atoms/pagination.tsx

@@ -1,108 +1,108 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '../icon';
-import type { IconButtonProps } from './icon-button';
-import { IconButton } from './icon-button';
-import { Flex } from './flex';
-import { Typo } from './typo';
-
-export interface PaginationProps {
-  /** 현재 선택된 페이지 */
-  page?: number;
-  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */
-  defaultPage?: number;
-  /** 선택한 페이지 변경 이벤트 cb */
-  onChange?: (page: number) => void;
-  /** 전체 페이지의 수 */
-  count?: number;
-}
-
-export function Pagination(props: PaginationProps): React.ReactNode {
-  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 (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]);
-
-  useEffect(() => {
-    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: IconButtonProps = {
-    variant: 'ghost',
-    size: '3',
-    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 (
-    <Flex align="center" className="tipp-pagination" gap="4">
-      <IconButton
-        disabled={prevDisabled}
-        onClick={onClickPrev}
-        {...moveButtonProps}
-      >
-        <ChevronLeftIcon {...iconSize} />
-      </IconButton>
-      <Flex gap="1">
-        {visibleItems.map((item) => {
-          return (
-            <button
-              className={`page-button ${item === page ? 'active' : ''}`}
-              key={item}
-              onClick={() => {
-                setPage(item);
-              }}
-              type="button"
-            >
-              <Typo variant="body">{item}</Typo>
-            </button>
-          );
-        })}
-      </Flex>
-      <IconButton
-        disabled={nextDisabled}
-        onClick={onClickNext}
-        {...moveButtonProps}
-      >
-        <ChevronRightIcon {...iconSize} />
-      </IconButton>
-    </Flex>
-  );
-}
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '../icon';
+import type { IconButtonProps } from './icon-button';
+import { IconButton } from './icon-button';
+import { Flex } from './flex';
+import { Typo } from './typo';
+
+export interface PaginationProps {
+  /** 현재 선택된 페이지 */
+  page?: number;
+  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */
+  defaultPage?: number;
+  /** 선택한 페이지 변경 이벤트 cb */
+  onChange?: (page: number) => void;
+  /** 전체 페이지의 수 */
+  count?: number;
+}
+
+export function Pagination(props: PaginationProps): React.ReactNode {
+  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 (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]);
+
+  useEffect(() => {
+    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: IconButtonProps = {
+    variant: 'ghost',
+    size: '3',
+    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 (
+    <Flex align="center" className="tipp-pagination" gap="4">
+      <IconButton
+        disabled={prevDisabled}
+        onClick={onClickPrev}
+        {...moveButtonProps}
+      >
+        <ChevronLeftIcon {...iconSize} />
+      </IconButton>
+      <Flex gap="1">
+        {visibleItems.map((item) => {
+          return (
+            <button
+              className={`page-button ${item === page ? 'active' : ''}`}
+              key={item}
+              onClick={() => {
+                setPage(item);
+              }}
+              type="button"
+            >
+              <Typo variant="body">{item}</Typo>
+            </button>
+          );
+        })}
+      </Flex>
+      <IconButton
+        disabled={nextDisabled}
+        onClick={onClickNext}
+        {...moveButtonProps}
+      >
+        <ChevronRightIcon {...iconSize} />
+      </IconButton>
+    </Flex>
+  );
+}

package/src/atoms/popover.tsx

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

package/src/atoms/progress.tsx

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

package/src/atoms/quote.tsx

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

package/src/atoms/radio-cards.tsx

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

package/src/atoms/radio-group.tsx

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

package/src/atoms/radio.tsx

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

package/src/atoms/scroll-area.tsx

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

package/src/atoms/section.tsx

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

package/src/atoms/segmented-control.tsx

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

package/src/atoms/select.tsx

@@ -1 +1 @@
-export { Select } from '@radix-ui/themes';
+export { Select } from '@radix-ui/themes';

package/src/atoms/separator.tsx

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

package/src/atoms/skeleton.tsx

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

package/src/atoms/spinner.tsx

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

package/src/atoms/strong.tsx

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

package/src/atoms/switch.tsx

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

package/src/atoms/tab-nav.tsx

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

package/src/atoms/tabs.tsx

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

package/src/atoms/text-area.tsx

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

package/src/atoms/text-field.tsx

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

package/src/atoms/toast.tsx

@@ -0,0 +1,23 @@
+import { Cross1Icon } from '@radix-ui/react-icons';
+import type { ToastContainerProps } from 'react-toastify';
+import { ToastContainer as ToastifyToastContainer } from 'react-toastify';
+
+export { toast } from 'react-toastify';
+
+export function ToastContainer(props: ToastContainerProps): React.ReactNode {
+  return (
+    <ToastifyToastContainer
+      autoClose={5000}
+      closeButton={<Cross1Icon />}
+      closeOnClick
+      draggable
+      hideProgressBar
+      newestOnTop
+      pauseOnFocusLoss
+      pauseOnHover
+      position="bottom-right"
+      rtl={false}
+      {...props}
+    />
+  );
+}

package/src/atoms/tooltip.tsx

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

package/src/atoms/typo.tsx

@@ -1,34 +1,34 @@
-import type { TextProps as RadixTextProps } from '@radix-ui/themes';
-import { Text as RadixText } from '@radix-ui/themes';
-import React, { useMemo, forwardRef } from 'react';
-
-export type TypoProps = RadixTextProps & {
-  variant?: 'body' | 'caption' | 'subtitle';
-};
-
-export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
-  (props: TypoProps, ref): React.ReactNode => {
-    const { size, variant, children, ...rest } = props;
-
-    const radixSize = useMemo<RadixTextProps['size']>(() => {
-      if (size !== undefined) return size;
-      switch (variant) {
-        case 'caption':
-          return '1';
-        case 'subtitle':
-          return '3';
-        case 'body':
-        default:
-          return '2';
-      }
-    }, [size, variant]);
-
-    return (
-      <RadixText {...rest} ref={ref} size={radixSize}>
-        {children}
-      </RadixText>
-    );
-  }
-);
-
-Typo.displayName = 'Typo';
+import type { TextProps as RadixTextProps } from '@radix-ui/themes';
+import { Text as RadixText } from '@radix-ui/themes';
+import React, { useMemo, forwardRef } from 'react';
+
+export type TypoProps = RadixTextProps & {
+  variant?: 'body' | 'caption' | 'subtitle';
+};
+
+export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
+  (props: TypoProps, ref): React.ReactNode => {
+    const { size, variant, children, ...rest } = props;
+
+    const radixSize = useMemo<RadixTextProps['size']>(() => {
+      if (size !== undefined) return size;
+      switch (variant) {
+        case 'caption':
+          return '1';
+        case 'subtitle':
+          return '3';
+        case 'body':
+        default:
+          return '2';
+      }
+    }, [size, variant]);
+
+    return (
+      <RadixText {...rest} ref={ref} size={radixSize}>
+        {children}
+      </RadixText>
+    );
+  }
+);
+
+Typo.displayName = 'Typo';