@shoplflow/base 0.25.4 → 0.26.1

package/dist/index.d.cts

@@ -322,11 +322,13 @@ interface StackOptionProps {
      */
     flex?: CSSProperties['flex'];
     /**
-     * background 설정
+     * @deprecated
+     * StackContainer를 사용해주세요.
      */
     background?: ColorTokens;
     /**
-     * border-radius 설정
+     * @deprecated
+     * StackContainer를 사용해주세요.
      */
     radius?: BorderRadiusTokens;
 }
@@ -336,17 +338,91 @@ interface StackType extends StackComponentType {
     Horizontal: StackComponentType;
 }
 declare const Stack: StackType;
-interface MotionStackType extends MotionStackComponentType {
+interface MotionStackType$1 extends MotionStackComponentType {
     Vertical: MotionStackComponentType;
     Horizontal: MotionStackComponentType;
 }
-declare const MotionStack: MotionStackType;
+declare const MotionStack: MotionStackType$1;
 
 declare const StyledStack: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
+declare type StackContainerComponentType = <T extends StringElementType = 'div'>(props: StackContainerGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
+interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
+}
+interface StackContainerOptionProps {
+    /**
+     * 요소들의 align-items 값
+     */
+    align?: CSSProperties['alignItems'];
+    /**
+     * 요소들의 justify-content 값
+     */
+    justify?: CSSProperties['justifyContent'];
+    /**
+     * 요소들의 flex-direction 값
+     * (값: row, column)
+     */
+    direction?: CSSProperties['flexDirection'];
+    /**
+     * 요소들 사이의 간격
+     */
+    spacing?: SpacingTokens;
+    /**
+     * flex-wrap 설정
+     */
+    flexWrap?: CSSProperties['flexWrap'];
+    /**
+     * width 설정
+     */
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    /**
+     * height 설정
+     */
+    height?: CSSProperties['height'];
+    maxHeight?: CSSProperties['maxHeight'];
+    minHeight?: CSSProperties['minHeight'];
+    /**
+     * padding, margin 설정
+     */
+    padding?: CSSProperties['padding'];
+    margin?: CSSProperties['margin'];
+    /**
+     * flex 설정
+     */
+    flex?: CSSProperties['flex'];
+    /**
+     * background 설정
+     */
+    background?: ColorTokens;
+    /**
+     * border-radius 설정
+     */
+    radius?: BorderRadiusTokens;
+}
+
+interface StackContainerType extends StackContainerComponentType {
+    Vertical: StackContainerComponentType;
+    Horizontal: StackContainerComponentType;
+}
+declare const StackContainer: StackContainerType;
+interface MotionStackType extends MotionStackContainerComponentType {
+    Vertical: MotionStackContainerComponentType;
+    Horizontal: MotionStackContainerComponentType;
+}
+declare const MotionStackContainer: MotionStackType;
+
+declare const StyledStackContainer: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 interface TextOptionProps {
     /**
      * 타이포그레피를 설정합니다.
@@ -379,6 +455,7 @@ declare const ModalSize: {
     readonly XL: "XL";
     readonly XXL: "XXL";
     readonly XXXL: "XXXL";
+    readonly FULL: "FULL";
 };
 declare type ModalSizeType = $Values<typeof ModalSize>;
 interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
@@ -999,4 +1076,4 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -322,11 +322,13 @@ interface StackOptionProps {
      */
     flex?: CSSProperties['flex'];
     /**
-     * background 설정
+     * @deprecated
+     * StackContainer를 사용해주세요.
      */
     background?: ColorTokens;
     /**
-     * border-radius 설정
+     * @deprecated
+     * StackContainer를 사용해주세요.
      */
     radius?: BorderRadiusTokens;
 }
@@ -336,17 +338,91 @@ interface StackType extends StackComponentType {
     Horizontal: StackComponentType;
 }
 declare const Stack: StackType;
-interface MotionStackType extends MotionStackComponentType {
+interface MotionStackType$1 extends MotionStackComponentType {
     Vertical: MotionStackComponentType;
     Horizontal: MotionStackComponentType;
 }
-declare const MotionStack: MotionStackType;
+declare const MotionStack: MotionStackType$1;
 
 declare const StyledStack: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
+declare type StackContainerComponentType = <T extends StringElementType = 'div'>(props: StackContainerGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
+interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
+}
+interface StackContainerOptionProps {
+    /**
+     * 요소들의 align-items 값
+     */
+    align?: CSSProperties['alignItems'];
+    /**
+     * 요소들의 justify-content 값
+     */
+    justify?: CSSProperties['justifyContent'];
+    /**
+     * 요소들의 flex-direction 값
+     * (값: row, column)
+     */
+    direction?: CSSProperties['flexDirection'];
+    /**
+     * 요소들 사이의 간격
+     */
+    spacing?: SpacingTokens;
+    /**
+     * flex-wrap 설정
+     */
+    flexWrap?: CSSProperties['flexWrap'];
+    /**
+     * width 설정
+     */
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    /**
+     * height 설정
+     */
+    height?: CSSProperties['height'];
+    maxHeight?: CSSProperties['maxHeight'];
+    minHeight?: CSSProperties['minHeight'];
+    /**
+     * padding, margin 설정
+     */
+    padding?: CSSProperties['padding'];
+    margin?: CSSProperties['margin'];
+    /**
+     * flex 설정
+     */
+    flex?: CSSProperties['flex'];
+    /**
+     * background 설정
+     */
+    background?: ColorTokens;
+    /**
+     * border-radius 설정
+     */
+    radius?: BorderRadiusTokens;
+}
+
+interface StackContainerType extends StackContainerComponentType {
+    Vertical: StackContainerComponentType;
+    Horizontal: StackContainerComponentType;
+}
+declare const StackContainer: StackContainerType;
+interface MotionStackType extends MotionStackContainerComponentType {
+    Vertical: MotionStackContainerComponentType;
+    Horizontal: MotionStackContainerComponentType;
+}
+declare const MotionStackContainer: MotionStackType;
+
+declare const StyledStackContainer: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 interface TextOptionProps {
     /**
      * 타이포그레피를 설정합니다.
@@ -379,6 +455,7 @@ declare const ModalSize: {
     readonly XL: "XL";
     readonly XXL: "XXL";
     readonly XXXL: "XXXL";
+    readonly FULL: "FULL";
 };
 declare type ModalSizeType = $Values<typeof ModalSize>;
 interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
@@ -999,4 +1076,4 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };