@shoplflow/base 0.4.0 → 0.6.0

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles/global.css"],"sourcesContent":["/* Generate by scripts/generate-tokens.js */\n/* eslint-disable */\n:root[data-shoplflow] {\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-bold: 700;\n  --border-radius04: 4px;\n  --border-radius06: 6px;\n  --border-radius08: 8px;\n  --border-radius12: 12px;\n  --border-radius16: 16px;\n  --spacing04: 4px;\n  --spacing06: 6px;\n  --spacing08: 8px;\n  --spacing12: 12px;\n  --spacing16: 16px;\n  --spacing20: 20px;\n  --spacing24: 24px;\n  --spacing30: 30px;\n  --spacing32: 32px;\n  --spacing40: 40px;\n  --dropShadow: 0px 8px 16px 0px rgba(0,0,0,0.12);\n}\n:root[data-shoplflow][data-shoplflow=hada] {\n  --coolgray300: #8092aa;\n  --coolgray200: #cdd6e4;\n  --coolgray100: #dce3ee;\n  --coolgray50: #f1f4f6;\n  --navy400: #35485b;\n  --navy300: #406588;\n  --neutral0: #ffffff;\n  --neutral100: #f9f9f9;\n  --neutral150: #f4f4f4;\n  --neutral200: #eaeaea;\n  --neutral300: #dddddd;\n  --neutral350: #cccccc;\n  --neutral400: #999999;\n  --neutral500: #777777;\n  --neutral600: #555555;\n  --neutral700: #333333;\n  --neutral400_5: #9999990d;\n  --red300: #ff6666;\n  --red200: #ff7979;\n  --red100: #f9ebeb;\n  --ocean300: #2f839f;\n  --ocean200: #3eb0b8;\n  --ocean100: #95d6d3;\n  --purple400: #5c68c9;\n  --purple300: #6979f8;\n  --purple100: #eff1ff;\n  --yellow300: #ffbb00;\n  --yellow200: #ffda75;\n  --yellow100: #fff7dd;\n  --green300: #4dc9aa;\n  --green200: #77d5bb;\n  --green100: #d8f2eb;\n  --shopl400: #2d89e4;\n  --shopl300: #3299fe;\n  --shopl200: #84c2fc;\n  --shopl150: #d6e9fb;\n  --shopl100: #eaf5ff;\n  --hada400: #05a77b;\n  --hada300: #02b585;\n  --hada200: #61cbb5;\n  --hada150: #c1e7dd;\n  --hada100: #d9f4ed;\n  --background: #f7f9fd;\n  --primary100: #d9f4ed;\n  --primary150: #c1e7dd;\n  --primary200: #61cbb5;\n  --primary300: #02b585;\n  --primary400: #05a77b;\n  .heading1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 38px;\n    font-size: 32px;\n  }\n  .heading1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 38px;\n    font-size: 32px;\n  }\n  .heading2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 28px;\n    font-size: 24px;\n  }\n  .heading2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 28px;\n    font-size: 24px;\n  }\n  .heading3_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 26px;\n    font-size: 22px;\n  }\n  .heading3_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 26px;\n    font-size: 22px;\n  }\n  .title1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 24px;\n    font-size: 20px;\n  }\n  .title1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 24px;\n    font-size: 20px;\n  }\n  .title2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 22px;\n    font-size: 18px;\n  }\n  .title2_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 22px;\n    font-size: 18px;\n  }\n  .title2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 22px;\n    font-size: 18px;\n  }\n  .body1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 22px;\n    font-size: 16px;\n  }\n  .body1_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 22px;\n    font-size: 16px;\n  }\n  .body1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 22px;\n    font-size: 16px;\n  }\n  .body2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body2_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body3_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 18px;\n    font-size: 13px;\n  }\n  .body3_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 18px;\n    font-size: 13px;\n  }\n  .caption_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 16px;\n    font-size: 12px;\n  }\n}\n:root[data-shoplflow][data-shoplflow=shopl] {\n  --coolgray300: #8092aa;\n  --coolgray200: #cdd6e4;\n  --coolgray100: #dce3ee;\n  --coolgray50: #f1f4f6;\n  --navy400: #35485b;\n  --navy300: #406588;\n  --neutral0: #ffffff;\n  --neutral100: #f9f9f9;\n  --neutral150: #f4f4f4;\n  --neutral200: #eaeaea;\n  --neutral300: #dddddd;\n  --neutral350: #cccccc;\n  --neutral400: #999999;\n  --neutral500: #777777;\n  --neutral600: #555555;\n  --neutral700: #333333;\n  --neutral400_5: #9999990d;\n  --red300: #ff6666;\n  --red200: #ff7979;\n  --red100: #f9ebeb;\n  --ocean300: #2f839f;\n  --ocean200: #3eb0b8;\n  --ocean100: #95d6d3;\n  --purple400: #5c68c9;\n  --purple300: #6979f8;\n  --purple100: #eff1ff;\n  --yellow300: #ffbb00;\n  --yellow200: #ffda75;\n  --yellow100: #fff7dd;\n  --green300: #4dc9aa;\n  --green200: #77d5bb;\n  --green100: #d8f2eb;\n  --shopl400: #2d89e4;\n  --shopl300: #3299fe;\n  --shopl200: #84c2fc;\n  --shopl150: #d6e9fb;\n  --shopl100: #eaf5ff;\n  --hada400: #05a77b;\n  --hada300: #02b585;\n  --hada200: #61cbb5;\n  --hada150: #c1e7dd;\n  --hada100: #d9f4ed;\n  --background: #f6f6f6;\n  --primary100: #eaf5ff;\n  --primary150: #d6e9fb;\n  --primary200: #84c2fc;\n  --primary300: #3299fe;\n  --primary400: #2d89e4;\n  .heading1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 34px;\n    font-size: 28px;\n  }\n  .heading1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 34px;\n    font-size: 28px;\n  }\n  .heading2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 28px;\n    font-size: 24px;\n  }\n  .heading2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 28px;\n    font-size: 24px;\n  }\n  .heading3_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 24px;\n    font-size: 20px;\n  }\n  .heading3_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 24px;\n    font-size: 20px;\n  }\n  .title1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 22px;\n    font-size: 18px;\n  }\n  .title1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 22px;\n    font-size: 18px;\n  }\n  .title2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 20px;\n    font-size: 16px;\n  }\n  .title2_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 20px;\n    font-size: 16px;\n  }\n  .title2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 20px;\n    font-size: 16px;\n  }\n  .body1_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body1_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body1_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 18px;\n    font-size: 14px;\n  }\n  .body2_700 {\n    font-weight: var(--font-weight-bold);\n    line-height: 16px;\n    font-size: 13px;\n  }\n  .body2_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 16px;\n    font-size: 13px;\n  }\n  .body2_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 16px;\n    font-size: 13px;\n  }\n  .body3_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 16px;\n    font-size: 12px;\n  }\n  .body3_500 {\n    font-weight: var(--font-weight-medium);\n    line-height: 16px;\n    font-size: 12px;\n  }\n  .caption_400 {\n    font-weight: var(--font-weight-regular);\n    line-height: 16px;\n    font-size: 12px;\n  }\n}\n"],"mappings":"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c;AACd,gBAAc;AACd,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACA,GAAC;AACC,iBAAa,IAAI;AACjB,iBAAa;AACb,eAAW;AACb;AACF;","names":[]}

package/dist/index.d.cts

@@ -1,212 +0,0 @@
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
-import * as React from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, CSSProperties } from 'react';
-import { CustomDomComponent } from 'framer-motion';
-import * as _emotion_styled from '@emotion/styled';
-import * as _emotion_react from '@emotion/react';
-
-type DomainType = 'SHOPL' | 'HADA';
-
-interface ShoplflowProviderProps {
-    domain?: DomainType;
-    children: React__default.ReactNode;
-}
-declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
-type UseDarkModeProps = {
-    domain?: DomainType;
-};
-declare function useDomain({ domain }: UseDarkModeProps): null;
-
-declare const fontWeightTokens: {
-    fontWeightRegular: string;
-    fontWeightMedium: string;
-    fontWeightBold: string;
-};
-declare const borderRadiusTokens: {
-    borderRadius04: string;
-    borderRadius06: string;
-    borderRadius08: string;
-    borderRadius12: string;
-    borderRadius16: string;
-};
-declare const colorTokens: {
-    coolgray300: string;
-    coolgray200: string;
-    coolgray100: string;
-    coolgray50: string;
-    navy400: string;
-    navy300: string;
-    neutral0: string;
-    neutral100: string;
-    neutral150: string;
-    neutral200: string;
-    neutral300: string;
-    neutral350: string;
-    neutral400: string;
-    neutral500: string;
-    neutral600: string;
-    neutral700: string;
-    neutral400_5: string;
-    red300: string;
-    red200: string;
-    red100: string;
-    ocean300: string;
-    ocean200: string;
-    ocean100: string;
-    purple400: string;
-    purple300: string;
-    purple100: string;
-    yellow300: string;
-    yellow200: string;
-    yellow100: string;
-    green300: string;
-    green200: string;
-    green100: string;
-    shopl400: string;
-    shopl300: string;
-    shopl200: string;
-    shopl150: string;
-    shopl100: string;
-    hada400: string;
-    hada300: string;
-    hada200: string;
-    hada150: string;
-    hada100: string;
-    background: string;
-    primary100: string;
-    primary150: string;
-    primary200: string;
-    primary300: string;
-    primary400: string;
-};
-declare const spacingTokens: {
-    spacing04: string;
-    spacing06: string;
-    spacing08: string;
-    spacing12: string;
-    spacing16: string;
-    spacing20: string;
-    spacing24: string;
-    spacing30: string;
-    spacing32: string;
-    spacing40: string;
-};
-declare const boxShadowTokens: {
-    dropShadow: string;
-};
-declare const typographyTokens: {
-    heading1_700: string;
-    heading1_400: string;
-    heading2_700: string;
-    heading2_400: string;
-    heading3_700: string;
-    heading3_400: string;
-    title1_700: string;
-    title1_400: string;
-    title2_700: string;
-    title2_500: string;
-    title2_400: string;
-    body1_700: string;
-    body1_500: string;
-    body1_400: string;
-    body2_700: string;
-    body2_500: string;
-    body2_400: string;
-    body3_400: string;
-    body3_500: string;
-    caption_400: string;
-};
-
-type ColorTokens = keyof typeof colorTokens;
-type SpacingTokens = keyof typeof spacingTokens;
-type BorderRadiusTokens = keyof typeof borderRadiusTokens;
-type BoxShadowTokens = keyof typeof boxShadowTokens;
-type FontWeightTokens = keyof typeof fontWeightTokens;
-type TypographyTokens = keyof typeof typographyTokens;
-
-type StringElementType = ElementType & string;
-type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
-type RenderConfigProps = {
-    /**
-     * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
-     *
-     * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
-     *
-     * @see https://emotion.sh/docs/styled#as-prop
-     */
-    as?: StringElementType;
-};
-interface ChildrenProps<Children = React__default.ReactNode> {
-    /**
-     * 컴포넌트 내부에 들어갈 children을 설정합니다.
-     */
-    children?: Children;
-}
-
-type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithOutRef<T>;
-type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
-type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithOutRef<T> & StackProps>;
-interface StackProps extends StackOptionProps, ChildrenProps {
-}
-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;
-}
-
-interface StackType extends StackComponentType {
-    Vertical: StackComponentType;
-    Horizontal: StackComponentType;
-}
-declare const Stack: StackType;
-interface MotionStackType extends MotionStackComponentType {
-    Vertical: MotionStackComponentType;
-    Horizontal: MotionStackComponentType;
-}
-declare const MotionStack: MotionStackType;
-
-declare const StyledStack: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & StackOptionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-export { BorderRadiusTokens, BoxShadowTokens, ColorTokens, FontWeightTokens, MotionStack, MotionStackComponentType, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledStack, TypographyTokens, borderRadiusTokens, colorTokens, fontWeightTokens, spacingTokens, typographyTokens, useDomain };