@shoplflow/base 0.4.0 → 0.6.0

package/dist/animation/fadeInOut.d.ts

@@ -0,0 +1,17 @@
+export declare const fadeInOut: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+        transition: {
+            duration: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        transition: {
+            duration: number;
+        };
+    };
+};

package/dist/components/BackDrop/BackDrop.d.ts

@@ -0,0 +1,3 @@
+import type { BackDropProps } from './BackDrop.types';
+declare const BackDrop: ({ children }: BackDropProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default BackDrop;

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

@@ -0,0 +1,5 @@
+import type { ChildrenProps } from '../../utils/type/ComponentProps';
+export interface BackDropProps extends ChildrenProps, BackDropOptionProps {
+}
+export interface BackDropOptionProps {
+}

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

@@ -0,0 +1,2 @@
+export * from './BackDrop.types';
+export * from './BackDrop';

package/dist/components/Chips/ChipButton/ChipButton.d.ts

@@ -0,0 +1,3 @@
+import type { ChipButtonProps } from './ChipButton.types';
+declare const ChipButton: ({ styleVar, color, sizeVar, text, onClick, disabled, ...rest }: ChipButtonProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ChipButton;

package/dist/components/Chips/ChipButton/ChipButton.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { TypographyTokens } from '../../../styles';
+import type { ChipButtonProps } from './ChipButton.types';
+export declare const getLineTypographyBySizeVar: (sizeVar: ChipButtonProps['sizeVar']) => TypographyTokens;
+export declare const StyledChipButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChipButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/components/Chips/ChipButton/ChipButton.types.d.ts

@@ -0,0 +1,16 @@
+import type { ColorTokenProps, LeftAndRightElementProps, SizeVariantProps, StyleVariantProps, TextProps, DisableProps, BackgroundColorProps } from '../../../utils/type/ComponentProps';
+import type { $Values } from '@shoplflow/utils';
+import type { HTMLAttributes } from 'react';
+export declare const ChipButtonStyleVariants: {
+    readonly LINE: "LINE";
+};
+export declare const ChipButtonSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+export type ChipButtonStyleVariantType = $Values<typeof ChipButtonStyleVariants>;
+export type ChipButtonSizeVariantType = $Values<typeof ChipButtonSizeVariants>;
+export interface ChipButtonProps extends ChipButtonOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, TextProps, DisableProps, LeftAndRightElementProps, SizeVariantProps<ChipButtonSizeVariantType>, StyleVariantProps<ChipButtonStyleVariantType>, ColorTokenProps, BackgroundColorProps {
+}
+export interface ChipButtonOptionProps {
+}

package/dist/components/Chips/ChipButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ChipButton } from './ChipButton';
+export * from './ChipButton.styled';
+export * from './ChipButton.types';

package/dist/components/Chips/ChipToggle/ChipToggle.d.ts

@@ -0,0 +1,3 @@
+import type { ChipToggleProps } from './ChipToggle.types';
+declare const ChipToggle: ({ text, isSelected, defaultSelected, color, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ChipToggle;

package/dist/components/Chips/ChipToggle/ChipToggle.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ChipToggleProps } from './ChipToggle.types';
+import type { TypographyTokens } from '../../../styles';
+export declare const getLineTypographyBySizeVar: (sizeVar: ChipToggleProps['sizeVar']) => TypographyTokens;
+export declare const StyledChip: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChipToggleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/components/Chips/ChipToggle/ChipToggle.types.d.ts

@@ -0,0 +1,16 @@
+import type { $Values } from '../../../utils/type/$values';
+import type { ColorTokenProps, SizeVariantProps, StyleVariantProps, LeftAndRightElementProps, TextProps, SelectedProps, RadiusBooleanProps, DefaultSelectedProps, DisableProps } from '../../../utils/type/ComponentProps';
+import type { HTMLAttributes } from 'react';
+export declare const ChipToggleStyleVariants: {
+    readonly SOLID: "SOLID";
+};
+export declare const ChipToggleSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+export type ChipToggleStyleVariantType = $Values<typeof ChipToggleStyleVariants>;
+export type ChipToggleSizeVariantType = $Values<typeof ChipToggleSizeVariants>;
+export interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultSelectedProps, ColorTokenProps, StyleVariantProps<ChipToggleStyleVariantType>, SizeVariantProps<ChipToggleSizeVariantType>, LeftAndRightElementProps, RadiusBooleanProps, TextProps, DisableProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
+}
+export interface ChipToggleOptionProps {
+}

package/dist/components/Chips/ChipToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ChipToggle } from './ChipToggle';
+export * from './ChipToggle.styled';
+export * from './ChipToggle.types';

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

@@ -0,0 +1,2 @@
+export * from './ChipToggle';
+export * from './ChipButton';

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { ModalContainerProps } from './Modal.types';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ModalContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BodyContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isIncludeHeader: boolean;
+    height: string | number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalBodyContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isIncludeHeader: boolean;
+    sizeVar: ModalContainerProps['sizeVar'];
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FooterContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import type { ChildrenProps, SizeVariantProps } from '../../utils/type/ComponentProps';
+import type { $Values } from '../../utils/type/$values';
+export declare enum ModalSize {
+    XXS = "XXS",
+    XS = "XS",
+    S = "S",
+    M = "M",
+    L = "L",
+    XL = "XL",
+    XXL = "XXL"
+}
+export type ModalSizeType = $Values<typeof ModalSize>;
+export interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
+    children?: React.ReactNode | React.ReactNode[];
+}
+export interface ModalContainerOptionProps {
+    /**
+     * 모달의 높이를 설정합니다.
+     */
+    height?: number;
+    /**
+     * 모달의 외부를 클릭했을 때 실행되는 함수입니다.
+     * @param args
+     */
+    outsideClick?: (args?: any) => void;
+}
+export interface ModalHeaderProps extends ModalHeaderOptionProps, ChildrenProps {
+}
+export interface ModalHeaderOptionProps {
+}
+export declare const MODAL_HEADER_KEY: unique symbol;
+export interface ModalHeaderType extends React.FC<ModalHeaderProps> {
+    [MODAL_HEADER_KEY]?: boolean;
+}
+export interface ModalBodyProps extends ModalBodyOptionProps, ChildrenProps {
+}
+export interface ModalBodyOptionProps {
+    isIncludeHeader?: boolean;
+    isIncludeFooter?: boolean;
+    height?: number;
+    sizeVar?: ModalSizeType;
+}
+export declare const MODAL_BODY_KEY: unique symbol;
+export interface ModalBodyType extends React.FC<ModalBodyProps> {
+    [MODAL_BODY_KEY]?: boolean;
+}
+export interface ModalFooterProps extends ModalFooterOptionProps, ChildrenProps {
+}
+export interface ModalFooterOptionProps {
+}
+export declare const MODAL_FOOTER_KEY: unique symbol;
+export interface ModalFooterType extends React.FC<ModalBodyProps> {
+    [MODAL_FOOTER_KEY]?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import type { ModalBodyType } from './Modal.types';
+declare const ModalBody: ModalBodyType;
+export default ModalBody;

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

@@ -0,0 +1,3 @@
+import type { ModalContainerProps } from './Modal.types';
+declare const ModalContainer: ({ children, outsideClick, ...rest }: ModalContainerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ModalContainer;

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

@@ -0,0 +1,3 @@
+import type { ModalFooterType } from './Modal.types';
+declare const ModalFooter: ModalFooterType;
+export default ModalFooter;

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

@@ -0,0 +1,3 @@
+import type { ModalHeaderType } from './Modal.types';
+declare const ModalHeader: ModalHeaderType;
+export default ModalHeader;

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

@@ -0,0 +1,7 @@
+export declare const Modal: {
+    Container: ({ children, outsideClick, ...rest }: import("./Modal.types").ModalContainerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    Header: import("./Modal.types").ModalHeaderType;
+    Body: import("./Modal.types").ModalBodyType;
+    Footer: import("./Modal.types").ModalFooterType;
+};
+export * from './Modal.types';

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,12 @@
+import type { MotionStackComponentType, StackComponentType } from './Stack.types';
+interface StackType extends StackComponentType {
+    Vertical: StackComponentType;
+    Horizontal: StackComponentType;
+}
+export declare const Stack: StackType;
+interface MotionStackType extends MotionStackComponentType {
+    Vertical: MotionStackComponentType;
+    Horizontal: MotionStackComponentType;
+}
+export declare const MotionStack: MotionStackType;
+export default Stack;

package/dist/components/Stack/Stack.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { StackOptionProps } from './Stack.types';
+export declare const StyledStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StackOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactElement } from 'react';
+import type { CustomDomComponent } from 'framer-motion';
+import type { BorderRadiusTokens, ColorTokens, SpacingTokens } from '../../styles';
+import type { ChildrenProps, HTMLPropsWithOutRef, RenderConfigProps, StringElementType } from '../../utils/type/ComponentProps';
+export type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithOutRef<T>;
+export type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+export type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithOutRef<T> & StackProps>;
+export interface StackProps extends StackOptionProps, ChildrenProps {
+}
+export interface StackOptionProps {
+    /**
+     * 요소들의 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'];
+    /**
+     * height 설정
+     */
+    height?: CSSProperties['height'];
+    /**
+     * flex 설정
+     */
+    flex?: CSSProperties['flex'];
+    /**
+     * background 설정
+     */
+    background?: ColorTokens;
+    /**
+     * border-radius 설정
+     */
+    radius?: BorderRadiusTokens;
+}

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

@@ -0,0 +1,4 @@
+export { default as Stack } from './Stack';
+export * from './Stack';
+export * from './Stack.types';
+export * from './Stack.styled';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TextProps } from './Text.types';
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export default Text;

package/dist/components/Text/Text.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { TextOptionProps } from './Text.types';
+export declare const StyledText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TextOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,23 @@
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { ColorTokens, TypographyTokens } from '../../styles';
+import type { ChildrenProps, RenderConfigProps } from '../../utils/type/ComponentProps';
+export interface TextOptionProps {
+    /**
+     * 타이포그레피를 설정합니다.
+     */
+    typography?: TypographyTokens;
+    color?: ColorTokens;
+    /**
+     * 텍스트를 몇 줄까지 보여줄지를 설정합니다.
+     */
+    lineClamp?: number;
+    whiteSpace?: CSSProperties['whiteSpace'];
+    display?: CSSProperties['display'];
+    textAlign?: CSSProperties['textAlign'];
+    textOverflow?: CSSProperties['textOverflow'];
+    textDecorations?: CSSProperties['textDecoration'];
+    opacity?: CSSProperties['opacity'];
+    wordBreak?: CSSProperties['wordBreak'];
+}
+export interface TextProps extends TextOptionProps, ChildrenProps, RenderConfigProps, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+}

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

@@ -0,0 +1,2 @@
+export { default as Text } from './Text';
+export * from './Text.types';

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Stack';
+export * from './Text';
+export * from './Modal';
+export * from './BackDrop';
+export * from './Chips';

package/dist/{index.css → global.css}

@@ -1,4 +1,6 @@
-/* src/styles/global.css */
+* {
+  box-sizing: border-box;
+}
 :root[data-shoplflow] {
   --font-weight-regular: 400;
   --font-weight-medium: 500;
@@ -8,6 +10,7 @@
   --border-radius08: 8px;
   --border-radius12: 12px;
   --border-radius16: 16px;
+  --border-radius20: 20px;
   --spacing04: 4px;
   --spacing06: 6px;
   --spacing08: 8px;
@@ -320,4 +323,3 @@
     font-size: 12px;
   }
 }
-/*# sourceMappingURL=index.css.map */

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useDomain';
+export * from './useHandleModal';
+export * from './useModalValue';
+export * from './useModalStore';
+export * from './useOutsideClick';
+export * from './useResizeObserver';

package/dist/hooks/useDomain.d.ts

@@ -0,0 +1,6 @@
+import type { DomainType } from '../types/Domain';
+type UseDomainProps = {
+    domain?: DomainType;
+};
+export declare const useDomain: ({ domain }: UseDomainProps) => void;
+export {};

package/dist/hooks/useHandleModal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useHandleModal: () => {
+    addModal: (modal: import("react").ReactNode, id?: string | undefined) => void;
+    removeModal: (props?: import("./useModalStore").RemoveModalProps | undefined) => void;
+};

package/dist/hooks/useModalStore.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type ModalStateType = {
+    component: ReactNode;
+    id?: string;
+};
+export type RemoveModalProps = {
+    id?: string;
+    deps?: number;
+};
+export type UseModalStore = {
+    modal: ModalStateType[];
+    addModal: (modal: ReactNode, id?: string) => void;
+    removeModal: (props?: RemoveModalProps) => void;
+};
+export declare const useModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UseModalStore>>;

package/dist/hooks/useModalValue.d.ts

@@ -0,0 +1,3 @@
+export declare const useModalValue: () => {
+    modal: import("./useModalStore").ModalStateType[];
+};

package/dist/hooks/useOnToggle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * toggle 기능을 추상화한 hook입니다.
+ * selected, defaultSelected를 받아서 토글을 관리하는 hook입니다.
+ * selected가 있으면 controlled, 없으면 uncontrolled로 동작합니다.
+ * defaultSelected가 있으면 초기값으로 설정됩니다.
+ * @param {boolean} selected
+ * @param {boolean} defaultSelected
+ * @return {[boolean, (() => void)]}
+ */
+export type UseOnToggle = (selected?: boolean, defaultSelected?: boolean) => [boolean, () => void];
+export declare const useOnToggle: UseOnToggle;

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+/**
+ * @description
+ * outsideClick 이벤트를 감지하는 hook
+ * return되는 ref를 컴포넌트에 적용하거나 외부에서 생성한 ref를 기준으로 부모 요소를 클릭하는 경우 outsideClick 함수를 실행합니다.
+ * 외부에서 생성한 ref를 사용할 경우 initialRef를 통해 ref를 전달해야 합니다.
+ *
+ * @param onClickOutside
+ * @param initialRef
+ */
+export declare const useOutsideClick: <T extends HTMLElement>(onClickOutside: (target: EventTarget | null) => void, initialRef?: React.RefObject<T> | undefined) => {
+    ref: React.RefObject<T>;
+};
+export default useOutsideClick;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,9 @@
+type ResizeOptions = {
+    trackWidth?: boolean;
+    trackHeight?: boolean;
+};
+export declare const useResizeObserver: <T extends HTMLElement>(element: T, options?: ResizeOptions) => {
+    width: number;
+    height: number;
+};
+export {};