@croquiscom/pds 0.30.2 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 0.31.0
+
+### Minor Changes
+
+- 0c8524a: NormalBanner 컴포넌트 추가
+
+## 0.30.3
+
+### Patch Changes
+
+- 6c9d3bc: React 18 업데이트
+
 ## 0.30.2
 
 ### Patch Changes

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

@@ -1,3 +1,3 @@
-export declare type BadgeKind = 'outline' | 'fill';
-export declare type BadgeColor = 'pink' | 'blue' | 'gray' | 'red' | 'green' | 'orange';
-export declare type BadgeSize = 'small' | 'medium' | 'large';
+export type BadgeKind = 'outline' | 'fill';
+export type BadgeColor = 'pink' | 'blue' | 'gray' | 'red' | 'green' | 'orange';
+export type BadgeSize = 'small' | 'medium' | 'large';

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type NormalBannerKind = 'info' | 'error';
+export interface NormalBannerProps {
+    className?: string;
+    /**
+     * @default info
+     */
+    kind?: NormalBannerKind;
+    title: string;
+    message: ReactNode;
+}
+export declare const NormalBanner: ({ className, kind, title, message }: NormalBannerProps) => JSX.Element;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { NormalBannerKind } from './NormalBanner';
+export declare const banner_color_css: Record<NormalBannerKind, string>;
+export declare const banner_background_color_css: Record<NormalBannerKind, string>;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-declare type BottomSheetContentWithCloseAction = (action: {
+type BottomSheetContentWithCloseAction = (action: {
     close(): void;
 }) => ReactNode;
 export interface BottomSheetProps {

package/dist/components/button/ButtonIcon.d.ts

@@ -1,3 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { IconProps } from '../icons/generated';
-export declare const ButtonIcon: ({ size, color, children }: PropsWithChildren<IconProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ButtonIcon extends IconProps {
+    children: ReactElement<IconProps>;
+}
+export declare const ButtonIcon: ({ size, color, children }: PropsWithChildren<ButtonIcon>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,6 +1,6 @@
-export declare type ButtonKind = 'primary' | 'secondary' | 'black';
-export declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export declare type ButtonShape = 'rectangle' | 'circle';
-export declare type IconButtonKind = 'outlined_secondary' | 'outlined_primary' | 'outlined_negative';
-export declare type TextButtonKind = 'text' | 'link';
-export declare type TextButtonSize = Exclude<ButtonSize, 'xsmall' | 'xlarge'>;
+export type ButtonKind = 'primary' | 'secondary' | 'black';
+export type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type ButtonShape = 'rectangle' | 'circle';
+export type IconButtonKind = 'outlined_secondary' | 'outlined_primary' | 'outlined_negative';
+export type TextButtonKind = 'text' | 'link';
+export type TextButtonSize = Exclude<ButtonSize, 'xsmall' | 'xlarge'>;

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

@@ -1,7 +1,7 @@
 /// <reference types="@emotion/react/types/css-prop" />
 import React from 'react';
 import { InputStatus } from '../input/types';
-declare type FormHelperTextElement = keyof Pick<JSX.IntrinsicElements, 'div' | 'p' | 'span'>;
+type FormHelperTextElement = keyof Pick<JSX.IntrinsicElements, 'div' | 'p' | 'span'>;
 export interface FormHelperTextProps extends React.Attributes {
     /**
      * @default span

package/dist/components/index.d.ts

@@ -20,3 +20,4 @@ export * from './notification';
 export * from './bottom-sheet';
 export * from './modal';
 export * from './provider';
+export * from './banner';

package/dist/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { InputAffixProps } from './InputAffix';
 import { InputBaseProps } from './InputBase';
-export declare type InputProps = InputBaseProps & InputAffixProps;
+export type InputProps = InputBaseProps & InputAffixProps;
 export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "width"> & import("./InputBase").InputBaseType & InputAffixProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/InputBase.d.ts

@@ -17,5 +17,5 @@ export interface InputBaseType {
     rightAddon?: InputAffixProps['suffix'];
     width?: CSSValueWithLength;
 }
-export declare type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & InputBaseType;
+export type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & InputBaseType;
 export declare const InputBase: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "width"> & InputBaseType & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/NumericInput.d.ts

@@ -9,5 +9,5 @@ export interface NumericInputBaseType extends InputBaseType, InputAffixProps {
     decimalScale?: number;
     onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare type NumericInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'width'> & NumericInputBaseType;
+export type NumericInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'width'> & NumericInputBaseType;
 export declare const NumericInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "onChange"> & NumericInputBaseType & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-export declare type InputAlignment = 'left' | 'center' | 'right';
-export declare type InputStatus = 'info' | 'success' | 'error';
+export type InputAlignment = 'left' | 'center' | 'right';
+export type InputStatus = 'info' | 'success' | 'error';

package/dist/components/menu/MenuItem.d.ts

@@ -12,7 +12,8 @@ export interface MenuItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
     /** 메뉴 아이템 우측 영역에 렌더링 될 요소 */
     suffix?: ReactElement<IconProps> | ReactNode;
 }
-export declare const MenuIcon: ({ selected, children }: React.PropsWithChildren<{
+export declare const MenuIcon: ({ selected, children, }: React.PropsWithChildren<{
     selected: boolean;
+    children: ReactElement<IconProps>;
 }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/message/MessageManager.d.ts

@@ -30,11 +30,11 @@ export interface MessageContainerProps {
      */
     direction?: MessageDirection;
 }
-declare type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
-declare type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
-export declare type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
+type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
+type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
+export type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
 export declare class MessageManager<T extends MessageComponentTypes> {
-    private container;
+    private root;
     private component;
     private z_index;
     private default_max_count;

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

@@ -6,5 +6,5 @@ export declare const MessagePosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export declare type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
-export declare type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;
+export type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
+export type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;

package/dist/components/modal/Modal.d.ts

@@ -21,6 +21,6 @@ export interface ModalProps extends ModalOverlayBaseProps {
 }
 export declare const MIN_WIDTH = 480;
 export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
-export declare const ModalTitle: import("@emotion/styled").StyledComponent<React.PropsWithChildren<import("../text").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)> & {
+export declare const ModalTitle: import("@emotion/styled").StyledComponent<(import("../text").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)) & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/modal/renderModal.d.ts

@@ -1,2 +1,3 @@
+import { Root } from 'react-dom/client';
 export declare function getFloatingModalPortal(): HTMLElement;
-export declare function removeFloatingModalPortal(target: HTMLElement, unmountDelay?: number): void;
+export declare function removeFloatingModalPortal(target: HTMLElement, root: Root, unmountDelay?: number): void;

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

@@ -1,4 +1,4 @@
-export declare type NotificationKind = 'info' | 'success' | 'error' | 'warning';
+export type NotificationKind = 'info' | 'success' | 'error' | 'warning';
 export declare const NotificationPosition: {
     readonly TOP_RIGHT: "top-right";
     readonly TOP_CENTER: "top-center";
@@ -6,4 +6,4 @@ export declare const NotificationPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export declare type NotificationPosition = typeof NotificationPosition[keyof typeof NotificationPosition];
+export type NotificationPosition = typeof NotificationPosition[keyof typeof NotificationPosition];

package/dist/components/popover/Popover.d.ts

@@ -2,8 +2,8 @@ import React, { ReactElement, ReactNode } from 'react';
 import { Placement } from '../../styles';
 import { OpenerTriggerEvent } from '../tooltip';
 import { HelpTextProps } from '../text/HelpText';
-declare type PopoverContent = ReactElement<HelpTextProps> | ReactNode;
-declare type PopoverWithCloseAction = (action: {
+type PopoverContent = ReactElement<HelpTextProps> | ReactNode;
+type PopoverWithCloseAction = (action: {
     close(): void;
 }) => PopoverContent;
 export interface PopoverProps {

package/dist/components/provider/Provider.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { ko } from '../../locales/ko';
-declare type ProviderConfig = {
+type ProviderConfig = {
     locale: typeof ko;
 };
 export declare const defaultProviderConfig: {
@@ -9,7 +9,7 @@ export declare const defaultProviderConfig: {
 export declare function setContextConfig(config: ProviderConfig): void;
 export declare function getContextConfig(): ProviderConfig;
 export declare const providerContext: React.Context<ProviderConfig>;
-export declare type ProviderProps = ProviderConfig;
+export type ProviderProps = ProviderConfig;
 export declare const useProviderConfig: () => ProviderConfig;
 export declare const Provider: ({ children, ...props }: PropsWithChildren<ProviderProps>) => JSX.Element;
 export {};

package/dist/components/radio/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type AlignType = 'horizontal' | 'vertical';
-export declare type RadioItemType = 'default' | 'box';
+export type AlignType = 'horizontal' | 'vertical';
+export type RadioItemType = 'default' | 'box';
 interface RadioItem<RadioValue> {
     label: React.ReactNode;
     value: RadioValue;

package/dist/components/stack/HStack.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StackProps } from './types';
-declare type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
+type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
 export interface HStackProps extends StackProps {
     alignment?: VerticalAlignment;
 }

package/dist/components/stack/VStack.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StackProps } from './types';
-declare type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
+type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
 export interface VStackProps extends StackProps {
     alignment?: HorizontalAlignment;
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SizeProps, SpaceProps } from '../../styles';
 import { CSSValueWithLength } from '../../styles';
-export declare type StackAlignment = 'stretch' | 'flex-start' | 'center' | 'flex-end';
+export type StackAlignment = 'stretch' | 'flex-start' | 'center' | 'flex-end';
 export interface StackProps extends SizeProps, SpaceProps {
     className?: string;
     children?: React.ReactNode;

package/dist/components/switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import React, { ButtonHTMLAttributes } from 'react';
-export declare type SwitchSize = 'small' | 'large';
+export type SwitchSize = 'small' | 'large';
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      *  @default true

package/dist/components/text/BaseText.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="@emotion/react/types/css-prop" />
 import React from 'react';
 import { Typography } from '../../foundation';
-declare type Alignment = 'center' | 'leading' | 'trailing';
-declare type TextElement = keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'li'>;
+type Alignment = 'center' | 'leading' | 'trailing';
+type TextElement = keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'li'>;
 export interface BaseTextProps extends React.Attributes {
     alignment?: Alignment;
     /**

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

@@ -1,6 +1,6 @@
 import { MessageDirection } from '../message';
-export declare type ToastSize = 'large' | 'medium';
-export declare type ToastKind = 'info' | 'success' | 'error';
+export type ToastSize = 'large' | 'medium';
+export type ToastKind = 'info' | 'success' | 'error';
 export declare const ToastPosition: {
     readonly TOP_RIGHT: "top-right";
     readonly TOP_CENTER: "top-center";
@@ -8,5 +8,5 @@ export declare const ToastPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export declare type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
-export declare type ToastDirection = MessageDirection;
+export type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
+export type ToastDirection = MessageDirection;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
 import { Placement } from '../../styles';
 import { TooltipBaseProps } from './TooltipBase';
-export declare type OpenerTriggerEvent = 'hover' | 'click' | 'none';
-declare type TooltipContentWithCloseAction = (action: {
+export type OpenerTriggerEvent = 'hover' | 'click' | 'none';
+type TooltipContentWithCloseAction = (action: {
     close(): void;
 }) => ReactNode;
 export interface TooltipProps extends TooltipBaseProps {

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

@@ -1,2 +1,2 @@
-export declare type TooltipSize = 'small' | 'medium' | 'large';
-export declare type TooltipKind = 'brand' | 'primary' | 'negative';
+export type TooltipSize = 'small' | 'medium' | 'large';
+export type TooltipKind = 'brand' | 'primary' | 'negative';

package/dist/foundation/shapes.d.ts

@@ -1,5 +1,5 @@
-export declare type CornerRadiusSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export declare type ShadowScale = 'low' | 'medium' | 'high';
+export type CornerRadiusSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type ShadowScale = 'low' | 'medium' | 'high';
 interface Shapes {
     border_radius: Record<CornerRadiusSize, string>;
     shadow: Record<ShadowScale, string>;

package/dist/foundation/typography.d.ts

@@ -1,5 +1,5 @@
-declare type TypographyUsageWithSize = 'Heading_24' | 'Heading_20' | 'Heading_18' | 'Heading_17' | 'Heading_15' | 'Body_14' | 'Body_13' | 'Body_12' | 'Caption_11' | 'Caption_10';
-declare type TypographyWeight = 'Bold' | 'SemiBold' | 'Medium' | 'Regular';
-export declare type Typography = `${TypographyUsageWithSize}_${TypographyWeight}`;
+type TypographyUsageWithSize = 'Heading_24' | 'Heading_20' | 'Heading_18' | 'Heading_17' | 'Heading_15' | 'Body_14' | 'Body_13' | 'Body_12' | 'Caption_11' | 'Caption_10';
+type TypographyWeight = 'Bold' | 'SemiBold' | 'Medium' | 'Regular';
+export type Typography = `${TypographyUsageWithSize}_${TypographyWeight}`;
 export declare const text_styles: Record<Typography, string>;
 export {};