@croquiscom/pds 0.37.1 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 0.38.0
+
+### Minor Changes
+
+- 49ea915: Pagination 컴포넌트 추가
+
 ## 0.37.1
 
 ### Patch Changes

package/dist/components/index.d.ts

@@ -24,3 +24,4 @@ export * from './banner';
 export * from './tabs';
 export * from './date-picker';
 export * from './time-picker';
+export * from './pagination';

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLUListElement> {
+    disabled?: boolean;
+    totalPages: number;
+    currentPage: number;
+    /**
+     * @desc 현재페이지 기준 좌/우 표시할 페이지 버튼 갯수
+     * @default 4
+     */
+    siblingCount?: number;
+    /**
+     * @desc 맨처음/맨끝 표시할 페이지 버튼 갯수
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** @default true */
+    showArrowButton?: boolean;
+    onChangePage?: (page: number) => void;
+}
+export declare const Pagination: ({ disabled, totalPages, currentPage, siblingCount, boundaryCount, showArrowButton, onChangePage, }: PaginationProps) => JSX.Element;

package/dist/components/pagination/Pagination.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ disabled, totalPages, currentPage, siblingCount, boundaryCount, showArrowButton, onChangePage, }: import("./Pagination").PaginationProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const HideArrowButton: any;
+export declare const CustomSiblingCount: any;
+export declare const CustomBoundaryCount: any;
+export declare const MinWidthExample: any;

package/dist/components/pagination/PaginationArrow.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type PaginationArrowPosition = 'prev' | 'next';
+export interface PaginationArrowProps {
+    /** @default prev */
+    position?: PaginationArrowPosition;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare const PaginationArrow: ({ position, disabled, onClick }: {
+    position?: string;
+    disabled: any;
+    onClick: any;
+}) => JSX.Element;
+export {};

package/dist/components/pagination/PaginationItem.d.ts

@@ -0,0 +1,10 @@
+import React, { LiHTMLAttributes } from 'react';
+export interface PaginationItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    label?: string | number;
+    disabled?: boolean;
+    selected?: boolean;
+    /** @default false */
+    isNumberOutOfRange?: boolean;
+    onClick?: () => void;
+}
+export declare const PaginationItem: React.ForwardRefExoticComponent<PaginationItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/pagination/styles.d.ts

@@ -0,0 +1,39 @@
+export declare const pagination_base_css: import("@emotion/utils").SerializedStyles;
+export declare const pagination_item_css: import("@emotion/utils").SerializedStyles;
+export declare const pagination_button_css: import("@emotion/utils").SerializedStyles;
+export declare const pagination_button_default_style: {
+    color: string;
+    backgroundColor: string;
+    '&:hover': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&:active': {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare const pagination_button_disabled_style: {
+    backgroundColor: string;
+    color: string;
+    '&:hover, &:active': {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare const pagination_button_selected_style: {
+    backgroundColor: string;
+    color: string;
+    '&:hover, &:active': {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare const pagination_button_selected_disabled_style: {
+    backgroundColor: string;
+    color: string;
+    '&:hover, &:active': {
+        backgroundColor: string;
+        color: string;
+    };
+};