@shoplflow/base 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,212 +1,5 @@
-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 };
+export * from './providers';
+export * from './hooks';
+export * from './styles';
+export * from './providers';
+export * from './components';

package/dist/index.mjs

@@ -0,0 +1,112 @@
+import{useEffect as E,useState as no}from"react";var O=({domain:o="SHOPL"})=>{let[t,e]=no(void 0);E(()=>{o&&e(o)},[o]),E(()=>{t&&(document.documentElement.dataset.shoplflow=t?.toLowerCase())},[t])};import{create as ao}from"zustand";var m=ao(o=>({modal:[],addModal:(t,e)=>o(a=>({modal:[...a.modal,{component:t,id:e}]})),removeModal:t=>{let{id:e,deps:a=1}=t||{id:void 0,deps:0},n=!!(e&&String(a)),p=!!e,s=!e&&!a,i=!!String(a)&&!e;if(n)throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");if(p){o(r=>({modal:[...r.modal.filter(l=>l.id!==e)]}));return}if(s||a===1){o(r=>({modal:[...r.modal.slice(0,-1)]}));return}if(i){o(r=>({modal:[...r.modal.slice(0,-a+1)]}));return}}}));var Vt=()=>{let o=m(e=>e.addModal),t=m(e=>e.removeModal);return{addModal:o,removeModal:t}};var Nt=()=>({modal:m(t=>t.modal)});import{useCallback as io,useEffect as po,useRef as so}from"react";var co=(o,t)=>{let e=t??so(null),a=io(n=>{e.current?.parentNode&&!e.current?.contains(n.target)&&o(n.target)},[e,o]);return po(()=>{let n=e.current?.parentNode;if(n)return n.addEventListener("click",a),()=>{n.removeEventListener("click",a)}},[e,a]),{ref:e}},B=co;import{useEffect as lo,useState as mo}from"react";var L=(o,t={trackWidth:!0,trackHeight:!0})=>{let[e,a]=mo({width:0,height:0});return lo(()=>{let n=new ResizeObserver(p=>{p.forEach(s=>{if(s.target===o){let{width:i,height:r}=s.contentRect,d={...e};t.trackWidth&&i!==e.width&&(d.width=i),t.trackHeight&&r!==e.height&&(d.height=r),(d.width!==e.width||d.height!==e.height)&&a(d)}})});return n.observe(o),()=>{n.disconnect()}},[o,t.trackWidth,t.trackHeight,e]),e};var $={initial:{opacity:0},animate:{opacity:1,transition:{duration:.1}},exit:{opacity:0,transition:{duration:.1}}};import fo from"@emotion/styled";import{motion as yo}from"framer-motion";var A=fo(yo.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: rgba(51, 51, 51, 0.6);
+`;import{jsx as ho}from"@emotion/react/jsx-runtime";var uo=({children:o})=>ho(A,{variants:$,initial:"initial",animate:"animate",exit:"exit",children:o}),F=uo;import{createPortal as xo}from"react-dom";import{AnimatePresence as go,motion as Mo}from"framer-motion";import vo from"@emotion/styled";import{Fragment as So,jsx as v}from"@emotion/react/jsx-runtime";var To=vo(Mo.div)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  z-index: 101;
+  padding: 32px 20px;
+  width: 100%;
+  height: 100%;
+`,ko=()=>{let o=m(t=>t.modal);return v(So,{children:xo(v(go,{children:o.map((t,e)=>v(F,{children:v(To,{children:t.component})},e))}),document.body)})},_=ko;import{Fragment as wo,jsx as Po,jsxs as Ro}from"@emotion/react/jsx-runtime";var bo=({children:o,domain:t="SHOPL"})=>(O({domain:t}),Ro(wo,{children:[Po(_,{}),o]})),_o=bo;var Ho="var(--font-weight-regular)",Co="var(--font-weight-medium)",Do="var(--font-weight-bold)",Eo={fontWeightRegular:Ho,fontWeightMedium:Co,fontWeightBold:Do},Oo="var(--border-radius04)",Bo="var(--border-radius06)",Lo="var(--border-radius08)",$o="var(--border-radius12)",Ao="var(--border-radius16)",h={borderRadius04:Oo,borderRadius06:Bo,borderRadius08:Lo,borderRadius12:$o,borderRadius16:Ao},Fo="var(--coolgray300)",zo="var(--coolgray200)",Xo="var(--coolgray100)",Vo="var(--coolgray50)",Io="var(--navy400)",Wo="var(--navy300)",No="var(--neutral0)",Yo="var(--neutral100)",Ko="var(--neutral150)",Zo="var(--neutral200)",Uo="var(--neutral300)",Go="var(--neutral350)",qo="var(--neutral400)",Jo="var(--neutral500)",Qo="var(--neutral600)",jo="var(--neutral700)",oe="var(--neutral400_5)",ee="var(--red300)",te="var(--red200)",re="var(--red100)",ne="var(--ocean300)",ae="var(--ocean200)",ie="var(--ocean100)",pe="var(--purple400)",se="var(--purple300)",de="var(--purple100)",ce="var(--yellow300)",le="var(--yellow200)",me="var(--yellow100)",fe="var(--green300)",ye="var(--green200)",ue="var(--green100)",he="var(--shopl400)",xe="var(--shopl300)",ge="var(--shopl200)",Me="var(--shopl150)",ve="var(--shopl100)",Te="var(--hada400)",ke="var(--hada300)",Se="var(--hada200)",be="var(--hada150)",_e="var(--hada100)",Pe="var(--background)",we="var(--primary100)",Re="var(--primary150)",He="var(--primary200)",Ce="var(--primary300)",De="var(--primary400)",c={coolgray300:Fo,coolgray200:zo,coolgray100:Xo,coolgray50:Vo,navy400:Io,navy300:Wo,neutral0:No,neutral100:Yo,neutral150:Ko,neutral200:Zo,neutral300:Uo,neutral350:Go,neutral400:qo,neutral500:Jo,neutral600:Qo,neutral700:jo,neutral400_5:oe,red300:ee,red200:te,red100:re,ocean300:ne,ocean200:ae,ocean100:ie,purple400:pe,purple300:se,purple100:de,yellow300:ce,yellow200:le,yellow100:me,green300:fe,green200:ye,green100:ue,shopl400:he,shopl300:xe,shopl200:ge,shopl150:Me,shopl100:ve,hada400:Te,hada300:ke,hada200:Se,hada150:be,hada100:_e,background:Pe,primary100:we,primary150:Re,primary200:He,primary300:Ce,primary400:De},Ee="var(--spacing04)",Oe="var(--spacing06)",Be="var(--spacing08)",Le="var(--spacing12)",$e="var(--spacing16)",Ae="var(--spacing20)",Fe="var(--spacing24)",ze="var(--spacing30)",Xe="var(--spacing32)",Ve="var(--spacing40)",P={spacing04:Ee,spacing06:Oe,spacing08:Be,spacing12:Le,spacing16:$e,spacing20:Ae,spacing24:Fe,spacing30:ze,spacing32:Xe,spacing40:Ve},Ie="var(--dropShadow)",w={dropShadow:Ie},We=".heading1_700",Ne=".heading1_400",Ye=".heading2_700",Ke=".heading2_400",Ze=".heading3_700",Ue=".heading3_400",Ge=".title1_700",qe=".title1_400",Je=".title2_700",Qe=".title2_500",je=".title2_400",ot=".body1_700",et=".body1_500",tt=".body1_400",rt=".body2_700",nt=".body2_500",at=".body2_400",it=".body3_400",pt=".body3_500",st=".caption_400",dt={heading1_700:We,heading1_400:Ne,heading2_700:Ye,heading2_400:Ke,heading3_700:Ze,heading3_400:Ue,title1_700:Ge,title1_400:qe,title2_700:Je,title2_500:Qe,title2_400:je,body1_700:ot,body1_500:et,body1_400:tt,body2_700:rt,body2_500:nt,body2_400:at,body3_400:it,body3_500:pt,caption_400:st};import{forwardRef as lt}from"react";import{motion as R}from"framer-motion";import ct from"@emotion/styled";var z=ct.div`
+  display: flex;
+  width: ${({width:o})=>o};
+  height: ${({height:o})=>o};
+  flex-direction: ${({direction:o})=>o};
+  align-items: ${({align:o})=>o};
+  justify-content: ${({justify:o})=>o};
+  gap: ${({spacing:o})=>o&&P[o]};
+  flex-wrap: ${({flexWrap:o})=>o};
+  flex: ${({flex:o})=>o};
+  background: ${({background:o})=>o?c[o]:"transparent"};
+  border-radius: ${({radius:o})=>o&&h[o]};
+  animation: 0.2s all ease-in-out;
+`;import{jsx as ft}from"@emotion/react/jsx-runtime";var H=o=>lt(function({as:e="div",spacing:a=o?.spacing??"spacing08",direction:n=o?.direction??"column",align:p=o?.align??"flex-start",justify:s=o?.justify??"flex-start",width:i=o?.width??"initial",height:r=o?.height??"initial",flexWrap:d=o?.flexWrap??"initial",flex:l=o?.flex??"initial",radius:g=o?.radius,background:b=o?.background,...M},u){return ft(z,{as:e,spacing:a,ref:u,direction:n,align:p,justify:s,width:i,height:r,flexWrap:d,flex:l,background:b,radius:g,...M,children:M.children})}),f=H();f.Vertical=H({direction:"column"});f.Horizontal=H({direction:"row"});var X=R(f);X.Vertical=R(f.Vertical);X.Horizontal=R(f.Horizontal);var mt=f;import{forwardRef as ht}from"react";import{css as T}from"@emotion/react";import yt from"@emotion/styled";var ut=o=>T`
+    display: -webkit-box;
+    line-clamp: ${o};
+    -webkit-line-clamp: ${o};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,V=yt.span`
+  display: ${({display:o})=>o&&o};
+  align-items: center;
+  color: ${({color:o})=>o&&c[o]};
+  ${({lineClamp:o})=>o&&ut(o)};
+  text-align: ${({textAlign:o})=>o&&o};
+  white-space: ${({whiteSpace:o})=>o&&o};
+  ${({textDecorations:o})=>o&&T`
+      text-decoration: ${o};
+    `};
+  ${({opacity:o})=>o&&T`
+      opacity: ${o};
+    `}
+  ${({wordBreak:o})=>o&&T`
+      word-break: ${o};
+    `};
+`;import{jsx as Mt}from"@emotion/react/jsx-runtime";var xt=ht(({children:o,typography:t="body1_400",whiteSpace:e,color:a="neutral700",display:n="inline-block",textAlign:p="inherit",className:s,...i},r)=>Mt(V,{ref:r,whiteSpace:e,className:s?`${t} ${s}`:t,color:a,display:n,textAlign:p,...i,children:o})),gt=xt;import y,{Children as Rt}from"react";import x from"@emotion/styled";import{css as I}from"@emotion/react";var vt=400,Tt=500,kt=560,W=640,St=768,bt=1040,_t=1280,C=o=>{switch(o){case"XXS":return vt;case"XS":return Tt;case"S":return kt;case"M":return W;case"L":return St;case"XL":return bt;case"XXL":return _t;default:return W}},Pt=o=>o?I`
+      padding-top: 16px;
+      padding-bottom: 24px;
+    `:I`
+    padding-top: 24px;
+    padding-bottom: 24px;
+  `,N=x.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${h.borderRadius08};
+  background: ${c.neutral0};
+  box-shadow: ${w.dropShadow};
+  overflow: hidden;
+  flex-grow: 1;
+  height: initial;
+  height: ${({height:o})=>o}px;
+  max-height: 1200px;
+  width: ${({sizeVar:o})=>C(o)}px;
+  max-width: ${({sizeVar:o})=>C(o)}px;
+`,Y=x.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px 12px 24px;
+  gap: 10px;
+`,K=x.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: ${c.neutral0};
+  min-height: ${({height:o})=>o};
+  flex: 1;
+  ${({isIncludeHeader:o})=>Pt(o)}
+`,Z=x.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({sizeVar:o})=>C(o)}px;
+  box-sizing: border-box;
+  padding: 0 24px;
+  overflow: hidden;
+  background: ${c.neutral0};
+`,U=x.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  gap: 12px;
+  background: ${c.neutral0};
+`;var wt=(i=>(i.XXS="XXS",i.XS="XS",i.S="S",i.M="M",i.L="L",i.XL="XL",i.XXL="XXL",i))(wt||{}),k=Symbol("MODAL_HEADER"),G=Symbol("MODAL_BODY"),S=Symbol("MODAL_FOOTER");var q=function(){};import{jsx as Ct}from"@emotion/react/jsx-runtime";var Ht=({children:o,outsideClick:t=q,...e})=>{let a=y.useRef(null);B(t,a);let n=y.Children.toArray(o),p=n.find(r=>{if(!y.isValidElement(r)||r.type[k])return r}),s=n.find(r=>{if(!y.isValidElement(r)||r.type[S])return r}),i=Rt.map(n,r=>y.isValidElement(r)?y.cloneElement(r,{isIncludeHeader:!!p,isIncludeFooter:!!s,sizeVar:e.sizeVar,height:e.height}):r);return Ct(N,{ref:a,...e,children:i})},J=Ht;import{jsx as Dt}from"@emotion/react/jsx-runtime";var Q=({children:o})=>Dt(U,{children:o});Q[S]=!0;var j=Q;import{useCallback as Et,useMemo as Ot}from"react";import Bt from"react-custom-scrollbars-2";import{jsx as D}from"@emotion/react/jsx-runtime";var oo=({children:o,isIncludeHeader:t=!1,isIncludeFooter:e=!1,sizeVar:a,height:n})=>{let{height:p}=L(document.body,{trackHeight:!0}),s=64,i=64,r=64,d=Et(()=>{let u=0;return t&&(u+=s),e&&(u+=i),u},[e,t]),l=Ot(()=>d(),[d]),g=()=>n?n-l:"100%",b=p-r-l,M=1200-r-l;return D(K,{isIncludeHeader:t,height:g(),children:D(Bt,{id:"scrollbar",autoHeight:!n,autoHeightMin:g(),autoHeightMax:p>1200?M:b,autoHide:!0,autoHideTimeout:1e3,autoHideDuration:200,style:{height:"100%",overflow:"hidden"},children:D(Z,{isIncludeHeader:t,sizeVar:a,children:o})})})};oo[G]=!0;var eo=oo;import{jsx as Lt}from"@emotion/react/jsx-runtime";var to=({children:o})=>Lt(Y,{children:o});to[k]=!0;var ro=to;var Ln={Container:J,Header:ro,Body:eo,Footer:j};export{G as MODAL_BODY_KEY,S as MODAL_FOOTER_KEY,k as MODAL_HEADER_KEY,Ln as Modal,_ as ModalProvider,wt as ModalSize,X as MotionStack,_o as ShoplflowProvider,mt as Stack,z as StyledStack,gt as Text,h as borderRadiusTokens,w as boxShadowTokens,c as colorTokens,Eo as fontWeightTokens,P as spacingTokens,dt as typographyTokens,O as useDomain,Vt as useHandleModal,m as useModalStore,Nt as useModalValue,co as useOutsideClick,L as useResizeObserver};

package/dist/providers/ShoplflowProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DomainType } from '../types/Domain';
+export interface ShoplflowProviderProps {
+    domain?: DomainType;
+    children: React.ReactNode;
+}
+declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ShoplflowProvider;

package/dist/providers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ShoplflowProvider } from './ShoplflowProvider';
+export type { ShoplflowProviderProps } from './ShoplflowProvider';
+export { default as ModalProvider } from '../portal/ModalPortal';

package/dist/styles/index.d.ts

@@ -0,0 +1,9 @@
+import { borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, spacingTokens, typographyTokens } from './tokens';
+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;
+export type { ColorTokens, SpacingTokens, BorderRadiusTokens, FontWeightTokens, TypographyTokens, BoxShadowTokens };
+export { colorTokens, spacingTokens, fontWeightTokens, borderRadiusTokens, typographyTokens, boxShadowTokens };

package/dist/styles/tokens.d.ts

@@ -0,0 +1,99 @@
+export declare const fontWeightTokens: {
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightBold: string;
+};
+export declare const borderRadiusTokens: {
+    borderRadius04: string;
+    borderRadius06: string;
+    borderRadius08: string;
+    borderRadius12: string;
+    borderRadius16: string;
+};
+export 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;
+};
+export declare const spacingTokens: {
+    spacing04: string;
+    spacing06: string;
+    spacing08: string;
+    spacing12: string;
+    spacing16: string;
+    spacing20: string;
+    spacing24: string;
+    spacing30: string;
+    spacing32: string;
+    spacing40: string;
+};
+export declare const boxShadowTokens: {
+    dropShadow: string;
+};
+export 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;
+};

package/dist/types/Domain.d.ts

@@ -0,0 +1 @@
+export type DomainType = 'SHOPL' | 'HADA';

package/dist/utils/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist/utils/type/$values.d.ts

@@ -0,0 +1 @@
+export type $Values<T extends object> = T[keyof T];

package/dist/utils/type/ComponentProps.d.ts

@@ -0,0 +1,91 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
+import type React from 'react';
+import type { ColorTokens } from '../../styles';
+export type StringElementType = ElementType & string;
+export type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
+export type RenderConfigProps = {
+    /**
+     * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
+     *
+     * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
+     *
+     * @see https://emotion.sh/docs/styled#as-prop
+     */
+    as?: StringElementType;
+};
+export interface SizeVariantProps<Size> {
+    /**
+     * 컴포넌트의 크기를 설정합니다.
+     */
+    sizeVar?: Size;
+}
+export interface StyleVariantProps<Style> {
+    /**
+     * 컴포넌트의 스타일을 설정합니다.
+     */
+    styleVar?: Style;
+}
+export interface ChildrenProps<Children = React.ReactNode> {
+    /**
+     * 컴포넌트 내부에 들어갈 children을 설정합니다.
+     */
+    children?: Children;
+}
+export interface DisableProps {
+    /**
+     * 비활성화 여부를 설정합니다.
+     */
+    disabled?: boolean;
+}
+export interface ColorTokenProps {
+    /**
+     * 텍스트 혹은 아이콘의 색상을 설정합니다.
+     */
+    color?: ColorTokens;
+}
+export interface BorderColorProps {
+    /**
+     * 테두리의 색상을 설정합니다.
+     */
+    borderColor?: ColorTokens;
+}
+export interface BackgroundColorProps {
+    /**
+     * 배경의 색상을 설정합니다.
+     */
+    background?: ColorTokens;
+}
+export interface IconSourceProps {
+    /**
+     * Icon을 설정합니다.
+     */
+    iconSource?: HTMLOrSVGElement;
+}
+export interface LeftNodeProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactNode를 설정합니다.
+     */
+    leftSource?: ReactNode;
+}
+export interface RightNodeProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactNode를 설정합니다.
+     */
+    rightSource?: ReactNode;
+}
+export interface LeftAndRightNodeProps extends RightNodeProps, LeftNodeProps {
+}
+export interface LeftElementProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactElement를 설정합니다.
+     */
+    leftSource?: ReactElement;
+}
+export interface RightElementProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
+     */
+    rightSource?: ReactElement;
+}
+export interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
+}