@croquiscom/pds 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 0.38.0
+
+### Minor Changes
+
+- 49ea915: Pagination 컴포넌트 추가
+
+## 0.37.1
+
+### Patch Changes
+
+- fc20524: FormLabel width값 커스텀 가능하도록 수정
+
 ## 0.37.0
 
 ### Minor Changes

package/dist/components/form/FormField.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode, PropsWithChildren } from 'react';
 import { HelpTextProps } from '../text';
+import { CSSValueWithLength } from '../../styles';
 export interface FormFieldProps {
     className?: string;
     label?: string;
     rightAddon?: ReactNode;
     required?: boolean;
     helper?: HelpTextProps;
+    labelWidth?: CSSValueWithLength;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;
+export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;

package/dist/components/form/FormField.stories.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FormField } from './FormField';
-declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
+export declare const LabelWith: any;
 export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;

package/dist/components/form/FormLabel.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, LabelHTMLAttributes } from 'react';
 import { HelpTextProps } from '../text';
+import { CSSValueWithLength } from '../../styles';
 export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     /** @default false */
     required?: boolean;
@@ -7,5 +8,6 @@ export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     helper?: HelpTextProps;
     /** 라벨 우측 렌더링될 Addon 요소 */
     rightAddon?: ReactNode;
+    width?: CSSValueWithLength;
 }
 export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/form/FormLabel.stories.d.ts

@@ -4,5 +4,6 @@ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./
 export default _default;
 export declare const Base: any;
 export declare const Required: any;
+export declare const Width: any;
 export declare const Help: any;
 export declare const HelpWithRequired: any;

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;
+    };
+};