@croquiscom/pds 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @croquiscom/pds
 
+## 1.1.0
+
+### Minor Changes
+
+- 5c3586e: DatePicker, DateRangePicker displayMode 지원 추가
+
+  ## BreakPoint
+
+  - bottomSheet, popover 두가지 타입으로 달력이 오픈될 요소를 선택할 수 있도록 추가되었습니다.
+
+- ea8ea32: NormalBanner size 추가
+
+  ## BreakPoint
+
+  - Title 속성이 optional로 변경되었습니다.
+
+## 1.0.1
+
+### Patch Changes
+
+- 601813a: Table Cell 스타일 커스텀 기능 추가
+
 ## 1.0.0
 
 ### Major Changes

package/dist/components/banner/NormalBanner.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { IconProps } from '../icons/generated';
 export type NormalBannerKind = 'neutral' | 'info' | 'error' | 'success';
+export type NormalBannerSize = 'small' | 'medium';
 export interface NormalBannerProps {
     className?: string;
     /**
@@ -8,12 +9,17 @@ export interface NormalBannerProps {
      */
     kind?: NormalBannerKind;
     /**
-     * 타이블 좌측에 렌더링 될 아이콘 요소
+     * @default medium
+     */
+    size?: NormalBannerSize;
+    /**
+     * title 좌측에 렌더링 될 아이콘 요소
+     *  - title이 없을 경우 렌더되지 않습니다.
      *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
-     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 16으로 고정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 banner size 'medium'일경우 16, 'small'일경우 12로 고정됩니다.
      */
     iconComponent?: React.ComponentType<IconProps>;
-    title: string;
+    title?: string;
     message?: ReactNode;
 }
-export declare const NormalBanner: ({ className, kind, iconComponent, title, message }: NormalBannerProps) => JSX.Element;
+export declare const NormalBanner: ({ className, kind, size, iconComponent, title, message, }: NormalBannerProps) => JSX.Element;

package/dist/components/banner/NormalBanner.stories.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ className, kind, iconComponent, title, message }: import("./NormalBanner").NormalBannerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, kind, size, iconComponent, title, message, }: import("./NormalBanner").NormalBannerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
+export declare const NoTitle: any;
 export declare const Kind: () => JSX.Element;
+export declare const Size: () => JSX.Element;
 export declare const CustomIcon: () => JSX.Element;

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -1,7 +1,11 @@
 import { ReactNode } from 'react';
-type BottomSheetContentWithCloseAction = (action: {
+import { SpaceProps } from '../../styles';
+export type BottomSheetContentWithCloseAction = (action: {
     close(): void;
 }) => ReactNode;
+export interface BottomSheetContentProps extends SpaceProps {
+    maxHeight?: number;
+}
 export interface BottomSheetProps {
     className?: string;
     opened?: boolean;
@@ -13,6 +17,12 @@ export interface BottomSheetProps {
     title?: ReactNode;
     subTitle?: ReactNode;
     content?: ReactNode | BottomSheetContentWithCloseAction;
+    /**
+     * 콘텐츠 영역 space, maxHeight 속성 커스텀이 가능합니다.
+     *  - [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)
+     *  - maxHeight
+     */
+    contentProps?: BottomSheetContentProps;
     /**
      * outside 영역 클릭시 닫힘 사용 여부
      * @default true
@@ -30,5 +40,6 @@ export interface BottomSheetProps {
     canDragClose?: boolean;
     onClose?: () => void;
 }
-export declare const BottomSheet: ({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, onClose, }: BottomSheetProps) => JSX.Element;
-export {};
+export declare const MIN_BOTTOM_SHEET_Y = 44;
+export declare const HANDLE_AREA_HEIGHT = 28;
+export declare const BottomSheet: ({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, contentProps, onClose, }: BottomSheetProps) => JSX.Element;

package/dist/components/bottom-sheet/BottomSheet.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { BottomSheet } from './BottomSheet';
-declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, contentProps, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const MaxHeight: ComponentStory<typeof BottomSheet>;

package/dist/components/date-picker/Caption.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Locale } from 'date-fns';
 import { CaptionProps } from 'react-day-picker';
+import { DisplayMode } from './DatePicker';
 export declare const captionColor: (disabled: boolean) => string;
-export declare const CAPTION_SIZE = 24;
 export interface DatePickerCaptionProps extends CaptionProps {
     /**
      * @default false
@@ -11,5 +11,6 @@ export interface DatePickerCaptionProps extends CaptionProps {
     className?: string;
     currentMonth?: Date;
     locale: Locale;
+    displayMode: DisplayMode;
 }
-export declare const Caption: ({ multipleMonths, currentMonth: controlledMonth, className, locale, ...props }: DatePickerCaptionProps) => JSX.Element;
+export declare const Caption: ({ multipleMonths, currentMonth: controlledMonth, displayMode, className, locale, ...props }: DatePickerCaptionProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { Matcher } from 'react-day-picker';
 import { CSSValueWithLength } from '../../styles';
-export type displayTimeFormat = 'hourMinute' | 'hourMinuteSecond';
+export type DisplayTimeFormat = 'hourMinute' | 'hourMinuteSecond';
+export type DisplayMode = 'popover' | 'bottomSheet';
 export declare const DATE_FORMAT = "yyyy.MM.dd";
 export declare const DATE_HOUR_MINUTE_FORMAT = "yyyy.MM.dd HH:mm";
 export declare const DATE_HOUR_MINUTE_SECOND_FORMAT = "yyyy.MM.dd HH:mm:ss";
@@ -29,6 +30,12 @@ export interface DatePickerBaseProps {
      * @default 1035
      */
     zIndex?: number;
+    /**
+     * 달력이 노출되는 모드를 지정할 수 있습니다.
+     *   - 'bottomSheet'일 경우 Footer 영역(취소/확인)은 고정 노출됩니다.
+     * @default popover
+     */
+    displayMode?: DisplayMode;
 }
 export interface DatePickerProps extends DatePickerBaseProps {
     /**
@@ -52,7 +59,7 @@ export interface DatePickerProps extends DatePickerBaseProps {
      *  - 'hourMinuteSecond' 일 경우 yyyy.MM.dd HH:mm:ss
      *  - showTimePicker 속성이 true일 경우 displayTimeFormat은 hourMinute으로 적용됩니다.
      */
-    displayTimeFormat?: displayTimeFormat;
+    displayTimeFormat?: DisplayTimeFormat;
     /**
      * 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
      * @default false
@@ -65,4 +72,4 @@ export interface DatePickerProps extends DatePickerBaseProps {
     showFooter?: boolean;
     onChange?: (value: Date | null) => void;
 }
-export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;
+export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, displayMode, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, displayMode, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
@@ -12,3 +12,4 @@ export declare const ShowTimePicker: any;
 export declare const ShowTimeHourMinute: any;
 export declare const ShowTimeHourMinuteSecond: any;
 export declare const DisableDays: any;
+export declare const BottomSheetPicker: any;

package/dist/components/date-picker/DatePickerMask.d.ts

@@ -0,0 +1,261 @@
+/// <reference types="react" />
+export declare const DatePickerMask: import("@emotion/styled").StyledComponent<{
+    id?: string;
+    color?: string;
+    translate?: "yes" | "no";
+    hidden?: boolean;
+    slot?: string;
+    title?: string;
+    dir?: string;
+    accessKey?: string;
+    draggable?: boolean | "false" | "true";
+    lang?: string;
+    className?: string;
+    prefix?: string;
+    role?: import("react").AriaRole;
+    children?: import("react").ReactNode;
+    contentEditable?: "inherit" | (boolean | "false" | "true");
+    inputMode?: "search" | "numeric" | "none" | "url" | "text" | "decimal" | "tel" | "email";
+    nonce?: string;
+    tabIndex?: number;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    contextMenu?: string;
+    placeholder?: string;
+    spellCheck?: boolean | "false" | "true";
+    radioGroup?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    is?: string;
+    "aria-activedescendant"?: string;
+    "aria-atomic"?: boolean | "false" | "true";
+    "aria-autocomplete"?: "inline" | "both" | "none" | "list";
+    "aria-busy"?: boolean | "false" | "true";
+    "aria-checked"?: boolean | "false" | "mixed" | "true";
+    "aria-colcount"?: number;
+    "aria-colindex"?: number;
+    "aria-colspan"?: number;
+    "aria-controls"?: string;
+    "aria-current"?: boolean | "location" | "time" | "false" | "page" | "true" | "step" | "date";
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    "aria-disabled"?: boolean | "false" | "true";
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-errormessage"?: string;
+    "aria-expanded"?: boolean | "false" | "true";
+    "aria-flowto"?: string;
+    "aria-grabbed"?: boolean | "false" | "true";
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "false" | "listbox" | "true" | "tree";
+    "aria-hidden"?: boolean | "false" | "true";
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-keyshortcuts"?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-level"?: number;
+    "aria-live"?: "off" | "assertive" | "polite";
+    "aria-modal"?: boolean | "false" | "true";
+    "aria-multiline"?: boolean | "false" | "true";
+    "aria-multiselectable"?: boolean | "false" | "true";
+    "aria-orientation"?: "horizontal" | "vertical";
+    "aria-owns"?: string;
+    "aria-placeholder"?: string;
+    "aria-posinset"?: number;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true";
+    "aria-readonly"?: boolean | "false" | "true";
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-required"?: boolean | "false" | "true";
+    "aria-roledescription"?: string;
+    "aria-rowcount"?: number;
+    "aria-rowindex"?: number;
+    "aria-rowspan"?: number;
+    "aria-selected"?: boolean | "false" | "true";
+    "aria-setsize"?: number;
+    "aria-sort"?: "none" | "other" | "ascending" | "descending";
+    "aria-valuemax"?: number;
+    "aria-valuemin"?: number;
+    "aria-valuenow"?: number;
+    "aria-valuetext"?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement>;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement>;
+    onChange?: import("react").FormEventHandler<HTMLDivElement>;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onInput?: import("react").FormEventHandler<HTMLDivElement>;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onReset?: import("react").FormEventHandler<HTMLDivElement>;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement>;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onError?: import("react").ReactEventHandler<HTMLDivElement>;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement>;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement>;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement>;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement>;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement>;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement>;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement>;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement>;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement>;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement>;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement>;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement>;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement>;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement>;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    position: 'top' | 'bottom';
+}, {}, {}>;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -37,9 +37,10 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
     customDatePreset?: DatePreset;
     /**
      * 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
+     *   - displayMode 'bottomSheet'인 경우 numberOfMonths는 1로 고정입니다.
      * @default 2
      */
     numberOfMonths?: number;
     onChange?: (start: Dates['from'], end: Dates['to']) => void;
 }
-export declare const DateRangePicker: ({ width, error, disabled, className, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;
+export declare const DateRangePicker: ({ width, error, disabled, className, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
@@ -13,3 +13,4 @@ export declare const MaxRange: any;
 export declare const WithDatePreset: any;
 export declare const WithRadioGroupDatePreset: any;
 export declare const WithAllDatePreset: any;
+export declare const BottomSheetPicker: any;

package/dist/components/date-picker/DayPickerBase.d.ts

@@ -1,3 +1,7 @@
-export declare const DayPickerBase: import("@emotion/styled").StyledComponent<(import("react-day-picker").DayPickerDefaultProps | import("react-day-picker").DayPickerSingleProps | import("react-day-picker").DayPickerMultipleProps | import("react-day-picker").DayPickerRangeProps) & {
+import { DisplayMode } from './DatePicker';
+export declare const DayPickerBase: import("@emotion/styled").StyledComponent<((import("react-day-picker").DayPickerDefaultProps | import("react-day-picker").DayPickerSingleProps | import("react-day-picker").DayPickerMultipleProps | import("react-day-picker").DayPickerRangeProps) & {
     theme?: import("@emotion/react").Theme;
+}) & {
+    cellSize: number;
+    displayMode: DisplayMode;
 }, {}, {}>;

package/dist/components/date-picker/hooks/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const POPOVER_CELL_SIZE = 32;
+export declare const BOTTOM_SHEET_CELL_SIZE = 49;
+export declare const BOTTOM_SHEET_CAPTION_HEIGHT = 72;
+export declare const BOTTOM_SHEET_FOOTER_HEIGHT = 90;
+export declare const MIN_SATE_PADDING_TOP = 40;
+export declare const BOTTOM_SHEET_TABLE_MARGIN: number;

package/dist/components/date-picker/hooks/useDatePickerAttributes.d.ts

@@ -0,0 +1,25 @@
+import { CSSObject } from '@emotion/react';
+import { DisplayMode } from '../DatePicker';
+import { Typography } from '../../../foundation';
+import { ButtonProps } from '../../button';
+import { VStackProps, HStackProps } from '../../stack';
+interface DatePickerAttributes {
+    maxHeight: number;
+    cellSize: number;
+    caption: {
+        kind: Typography;
+        arrowSize: number;
+        style?: CSSObject;
+    };
+    footer: {
+        button: Partial<ButtonProps>;
+        container: Partial<HStackProps & VStackProps> & {
+            style?: CSSObject;
+        };
+        description?: {
+            kind: Typography;
+        };
+    };
+}
+export declare function useDatePickerAttributes(displayMode: DisplayMode): DatePickerAttributes;
+export {};

package/dist/components/date-picker/hooks/useScrollMask.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export declare function useScrollMask({ opened, scrollWrapperRef, calendarRef, }: {
+    opened: boolean;
+    calendarRef: RefObject<HTMLElement>;
+    scrollWrapperRef: RefObject<HTMLElement>;
+}): {
+    mask: {
+        topMask: number;
+        bottomMask: number;
+    };
+    maskPosition: {
+        top: number;
+        bottom: number;
+    };
+    handleScroll: import("lodash").DebouncedFunc<() => void>;
+};

package/dist/components/date-picker/styles.d.ts

@@ -1,4 +1,6 @@
 export declare const date_picker_base_css: import("@emotion/utils").SerializedStyles;
+export declare const popover_picker_css: import("@emotion/utils").SerializedStyles;
+export declare const bottom_sheet_picker_css: import("@emotion/utils").SerializedStyles;
 export declare const caption_button_css: import("@emotion/utils").SerializedStyles;
 export declare const range_input_default_style: {
     border: string;

package/dist/components/table/Table.d.ts

@@ -55,8 +55,9 @@ export interface TableProps<DataType> {
      */
     noDataText?: ReactNode;
     /**
-     * 테이블 로우 호버 스타일 사용 유무, 스펙아웃될 예정입니다.
-     *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props
+     * 테이블 로우 호버 스타일 사용 유무
+     *   - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.
+     *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다.
      * @default true
      */
     cellHoverStyle?: boolean;

package/dist/components/table/Table.stories.d.ts

@@ -10,6 +10,7 @@ export declare const Base: any;
 export declare const ColumnAlignAndWidth: any;
 export declare const CustomColumnCell: any;
 export declare const CustomRowCell: any;
+export declare const CustomRowCellStyle: any;
 export declare const Loading: any;
 export declare const NoData: any;
 export declare const CustomNoDataText: any;

package/dist/components/table/storybook-helper/sampleData.d.ts

@@ -22,3 +22,4 @@ export declare const RowSpanRows: TableRowsType<DataType>;
 export declare const fixedColumns: TableColumnsType<DataType>;
 export declare const selectionRows: TableRowsType<DataType>;
 export declare const sortColumns: TableColumnsType<DataType>;
+export declare const customRowStyleColumns: TableColumnsType<DataType>;

package/dist/components/table/types.d.ts

@@ -1,4 +1,5 @@
 import { Key, ReactNode, TdHTMLAttributes } from 'react';
+import { CSSObject } from '@emotion/styled';
 import { CSSValueWithLength } from '../../styles';
 export type SortDirection = 'asc' | 'desc' | 'default';
 export type ColumnAlign = 'left' | 'right' | 'center';
@@ -7,10 +8,12 @@ export type Scroll = {
     y?: CSSValueWithLength;
 };
 export type CellValue<Value = any> = Value;
-export type RowSelectState<DataType> = ((row: DataType) => boolean) | Array<Key> | null;
-export type CellAttributesProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & {
+export type CellAttributes = {
     hidden?: boolean;
+    style?: CSSObject;
 };
+export type RowSelectState<DataType> = ((row: DataType) => boolean) | Array<Key> | null;
+export type CellAttributesProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & CellAttributes;
 export type CellProps<DataType> = ({ row, value, index, }: {
     row: DataType;
     value: CellValue<any>;

package/dist/hooks/useResize.d.ts

@@ -1 +1,4 @@
-export declare function useResize(delay?: number): number[];
+export declare function useResize(delay?: number): {
+    windowWidth: number;
+    windowHeight: number;
+};