@toss/tds-react-native 1.0.0

package/dist/cjs/components/navbar/ReactNavigationHelper/index.d.ts

@@ -0,0 +1,22 @@
+import { BackButton } from './BackButton';
+import { RightTextButton } from './Right';
+import { SubtitleTxt, Title, TitleTxt } from './Title';
+import { HeaderLeft } from './HeaderLeft';
+import { HeaderRight } from './HeaderRight';
+import { HeaderTitle } from './HeaderTitle';
+import { CloseButton } from './CloseButton';
+export declare const ReactNavigationNavbar: {
+    HeaderLeft: typeof HeaderLeft;
+    HeaderRight: typeof HeaderRight;
+    BackButton: typeof BackButton;
+    CloseButton: typeof CloseButton;
+    RightIconButton: import("react").ForwardRefExoticComponent<Pick<import("../../icon").IconProps & import("react").RefAttributes<import("react-native").View>, "accessibilityLabel" | "type" | "name"> & import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").TouchableOpacity>>;
+    RightTextButton: typeof RightTextButton;
+    HeaderTitle: typeof HeaderTitle;
+    TitleTxt: typeof TitleTxt;
+    /**
+     * @description headerTitleAlign: 'center' 과 함께 사용해주세요
+     */
+    DoubleLineTitle: typeof Title;
+    SubtitleTxt: typeof SubtitleTxt;
+};

package/dist/cjs/components/navbar/ReactNavigationHelper/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReactNavigationNavbar=void 0;const BackButton_1=require("./BackButton"),Right_1=require("./Right"),Title_1=require("./Title"),HeaderLeft_1=require("./HeaderLeft"),HeaderRight_1=require("./HeaderRight"),HeaderTitle_1=require("./HeaderTitle"),CloseButton_1=require("./CloseButton");exports.ReactNavigationNavbar={HeaderLeft:HeaderLeft_1.HeaderLeft,HeaderRight:HeaderRight_1.HeaderRight,BackButton:BackButton_1.BackButton,CloseButton:CloseButton_1.CloseButton,RightIconButton:Right_1.RightIconButton,RightTextButton:Right_1.RightTextButton,HeaderTitle:HeaderTitle_1.HeaderTitle,TitleTxt:Title_1.TitleTxt,DoubleLineTitle:Title_1.Title,SubtitleTxt:Title_1.SubtitleTxt};

package/dist/cjs/components/navbar/index.d.ts

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

package/dist/cjs/components/navbar/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./ReactNavigationHelper"),exports);

package/dist/cjs/components/numeric-spinner/NumericSpinner.d.ts

@@ -0,0 +1,37 @@
+import { View, ViewProps } from 'react-native';
+export interface NumericSpinnerProps extends ViewProps {
+    /**
+     * `NumericSpinner` 컴포넌트의 크기에요
+     */
+    size: 'tiny' | 'small' | 'medium' | 'large';
+    /**
+     * `NumericSpinner` 컴포넌트에 표시되는 값이에요. 주로 입력값을 컴포넌트 외부에서 관리할 때 `onNumberChange` 속성과 함께 사용해요.
+     *
+     * @default 0
+     */
+    number?: number;
+    /**
+     * 입력할 수 있는 최소값이에요. 설정된 값보다 작은 값은 사용자가 입력할 수 없어요.
+     *
+     * @default 0
+     */
+    minNumber?: number;
+    /**
+     * 입력할 수 있는 최대값이에요. 설정된 값보다 큰 값은 사용자가 입력할 수 없어요.
+     *
+     * @default 999
+     */
+    maxNumber?: number;
+    /**
+     * 이 값이 true일 때 `NumericSpinner` 컴포넌트가 비활성화돼요. 사용자가 버튼을 눌러도 숫자가 변하지 않아요.
+     *
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * 입력값이 변경될 때 호출되는 함수예요. 변경된 숫자 값을 매개변수로 받아 처리해요.
+     * 예를 들어, 입력값이 변경되면 이를 외부 상태에 반영할 때 사용해요.
+     */
+    onNumberChange?: (number: number) => void;
+}
+export declare const NumericSpinner: import("react").ForwardRefExoticComponent<NumericSpinnerProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/numeric-spinner/NumericSpinner.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinner=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),easings_1=require("@toss-design-system/easings"),animated_1=require("../../interactions/animated"),core_1=require("../../core"),generateHapticFeedback_1=require("../../native/generateHapticFeedback"),react_1=require("react"),react_native_1=require("react-native"),NumericSpinnerContainer_1=require("./NumericSpinnerContainer"),NumericSpinnerIconButton_1=require("./NumericSpinnerIconButton"),NumericSpinnerNumberBox_1=require("./NumericSpinnerNumberBox"),useAccelerateInterval_1=require("./useAccelerateInterval"),useButtonLongPress_1=require("./useButtonLongPress"),useWiggleMotion_1=require("./useWiggleMotion"),AnimatedNumericSpinnerContainer=animated_1.Animated.createAnimatedComponent(NumericSpinnerContainer_1.NumericSpinnerContainer),AnimatedNumericSpinnerNumberBox=animated_1.Animated.createAnimatedComponent(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox),AnimatedNumericSpinnerMinusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton),AnimatedNumericSpinnerPlusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton),isNumberInRange=({min:t,max:n,num:e})=>!isNaN(e)&&e>=t&&e<=n;exports.NumericSpinner=(0,react_1.forwardRef)(function({disable:n,number:e=0,minNumber:a=0,maxNumber:s=100,onNumberChange:o,size:i,style:p,...k},S){const R=(0,core_1.useAdaptive)(),{play:u,style:V}=(0,useWiggleMotion_1.useWiggleMotion)(),g=isNumberInRange({max:s,min:a,num:e+1}),m=isNumberInRange({max:s,min:a,num:e-1}),y=(0,react_1.useCallback)(()=>{if(g){const r=e+1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,g,o,u]),E=(0,react_1.useCallback)(()=>{if(m){const r=e-1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,m,o,u]),h=useNumberTextAnimation(),{onPressStart:_,onPressEnd:L}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:E,onPressEnd:h.play}),{onPressStart:j,onPressEnd:M}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:y,onPressEnd:h.play}),c=(0,react_1.useRef)(!1),C=(0,useAccelerateInterval_1.useAccelerateInterval)(y,{startMs:400,interval:.8,minMs:50}),I=(0,useAccelerateInterval_1.useAccelerateInterval)(E,{startMs:400,interval:.8,minMs:50}),X=()=>{c.current!==!0&&(I.startInterval(),c.current=!0)},H=()=>{c.current!==!0&&(C.startInterval(),c.current=!0)},T=()=>{C.stopInterval(),I.stopInterval(),c.current=!1},b=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new animated_1.Animated.Value(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])).current,v=useContainerAnimation({size:i}),F=animated_1.Animated.event([{nativeEvent:{translationX:b}}],{useNativeDriver:!1}),G=r=>{switch(r.nativeEvent.state){case react_native_gesture_handler_1.State.BEGAN:{v.play(),animated_1.Animated.parallel([animated_1.Animated.timing(l,{toValue:50,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}case react_native_gesture_handler_1.State.END:case react_native_gesture_handler_1.State.FAILED:{v.reset(),animated_1.Animated.parallel([animated_1.Animated.spring(b,{toValue:0,useNativeDriver:!1}),animated_1.Animated.timing(l,{toValue:NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i],useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}}},[q,O]=(0,react_1.useState)(0),[f,$]=(0,react_1.useState)(0),[N,z]=(0,react_1.useState)(0),[x,J]=(0,react_1.useState)(0),P=b.interpolate({inputRange:[-N,x],outputRange:[-N,x],extrapolate:"clamp"});P.addListener(({value:r})=>{const K=-N;r===K?X():r===x?H():T()}),(0,react_1.useEffect)(()=>{l.setValue(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])},[l,i]);const d=useNumberBoxAnimation(),A=useLeftIconButtonAnimation(),D=useRightIconButtonAnimation(),W=useLeftIconButtonPlaceholderAnimation(),B=useRightIconButtonPlaceholderAnimation(),w=`${e}`;return n?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${e}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{u()},style:[{alignSelf:"flex-start"},p],...k,children:(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{ref:S,size:i,style:[{opacity:.3},V],pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton,{size:i}),(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox,{style:{borderRadius:8},size:i,"aria-label":w,color:h.style.color,children:e}),(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton,{size:i})]})}):(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{testID:"numeric-spinner",ref:S,onLayout:r=>$(r.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...v.style,transform:[...v.style.transform,...V.transform],position:"relative"},p],size:i,...k,children:[(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerMinusIconButton,{"aria-label":"\uBE7C\uAE30",accessibilityHint:m?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${a}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>z(r.nativeEvent.layout.width),onPress:E,onPressIn:()=>{_(),d.shrink(),A.shrink(),W.shrink()},onPressOut:()=>{L(),d.expand(),A.expand(),W.expand()},disabled:m===!1,style:{zIndex:1,alignSelf:"stretch",...A.style},color:A.style.color,size:i}),(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.PanGestureHandler,{onGestureEvent:F,onHandlerStateChange:G,children:(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerNumberBox,{onLayout:r=>{O(r.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:l,transform:[{translateX:P},...d.style.transform]},size:i,accessibilityRole:"text",accessibilityValue:{text:w},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:h.style.color,children:e})}),(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerPlusIconButton,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:g?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${s}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>J(r.nativeEvent.layout.width),onPress:y,onPressIn:()=>{j(),d.shrink(),D.shrink(),B.shrink()},onPressOut:()=>{M(),d.expand(),D.expand(),B.expand()},disabled:g===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:i}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...W.style}}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...B.style}})]})});const GapBySize={tiny:5,small:6,medium:7,large:8};function useContainerAnimation({size:t}){const n=(0,core_1.useAdaptive)(),e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=e.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),s=e.interpolate({inputRange:[0,100],outputRange:[n.grey100,n.grey200],extrapolate:"clamp"}),o=e.interpolate({inputRange:[0,100],outputRange:[NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[t],50],extrapolate:"clamp"}),i=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:100,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]),p=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]);return{play:i,reset:p,style:{backgroundColor:s,borderRadius:o,transform:[{scale:a}]}}}function useNumberBoxAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[t]),e=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3}).start()},[t]);return{shrink:n,expand:e,style:{transform:[{scale:t}]}}}function useLeftIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useRightIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useLeftIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:-2,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useRightIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:2,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useNumberTextAnimation(){const t=(0,core_1.useAdaptive)(),n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=n.interpolate({inputRange:[0,1],outputRange:[t.grey800,t.blue500]});return{play:(0,react_1.useCallback)(()=>{n.setValue(0),animated_1.Animated.stagger(300,[animated_1.Animated.timing(n,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.basic.ease,duration:easings_1.springEaseWithDuration.basic.duration*1e3})]).start()},[n]),style:{color:e}}}

package/dist/cjs/components/numeric-spinner/NumericSpinnerContainer.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+import { Size } from './type';
+export declare const NumericSpinnerContainerBorderRadiusBySize: Record<Size, number>;
+export interface NumericSpinnerContainerProps extends ViewProps {
+    size: Size;
+    children?: ReactNode;
+    style?: ViewProps['style'];
+}
+export declare const NumericSpinnerContainer: import("react").ForwardRefExoticComponent<NumericSpinnerContainerProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/numeric-spinner/NumericSpinnerContainer.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinnerContainer=exports.NumericSpinnerContainerBorderRadiusBySize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native");exports.NumericSpinnerContainerBorderRadiusBySize={tiny:8,small:10,medium:14,large:16},exports.NumericSpinnerContainer=(0,react_1.forwardRef)(function({size:e,style:r,children:i,...n},t){const a=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:t,style:[styles.container,styles[e],{backgroundColor:a.grey100},r],...n,children:i})});const styles=react_native_1.StyleSheet.create({container:{display:"flex",flexDirection:"row"},tiny:{paddingVertical:3,paddingHorizontal:3,borderRadius:exports.NumericSpinnerContainerBorderRadiusBySize.tiny},small:{paddingVertical:3,paddingHorizontal:3,borderRadius:exports.NumericSpinnerContainerBorderRadiusBySize.small},medium:{paddingVertical:4,paddingHorizontal:4,borderRadius:exports.NumericSpinnerContainerBorderRadiusBySize.medium},large:{paddingVertical:4,paddingHorizontal:4,borderRadius:exports.NumericSpinnerContainerBorderRadiusBySize.large}});

package/dist/cjs/components/numeric-spinner/NumericSpinnerIconButton.d.ts

@@ -0,0 +1,17 @@
+import { PressableProps, ViewProps } from 'react-native';
+import { View } from 'react-native';
+import { Size } from './type';
+export interface NumericSpinnerMinusIconButtonProps extends PressableProps {
+    size: Size;
+    disabled?: boolean;
+    style?: ViewProps['style'];
+    color?: string;
+}
+export declare const NumericSpinnerMinusIconButton: import("react").ForwardRefExoticComponent<NumericSpinnerMinusIconButtonProps & import("react").RefAttributes<View>>;
+export interface NumericSpinnerPlusIconButtonProps extends PressableProps {
+    size: Size;
+    disabled?: boolean;
+    style?: ViewProps['style'];
+    color?: string;
+}
+export declare const NumericSpinnerPlusIconButton: import("react").ForwardRefExoticComponent<NumericSpinnerPlusIconButtonProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/numeric-spinner/NumericSpinnerIconButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinnerPlusIconButton=exports.NumericSpinnerMinusIconButton=void 0;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),paragraph_1=require("../paragraph"),react_1=require("react"),react_native_1=require("react-native"),react_native_2=require("react-native");exports.NumericSpinnerMinusIconButton=(0,react_1.forwardRef)(function({size:e,color:i,disabled:t,style:r,...a},c){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_2.Pressable,{ref:c,style:[commonStyles.container,minusButtonStyles[e],r],accessibilityRole:"button","aria-disabled":t,...a,children:(0,jsx_runtime_1.jsx)(paragraph_1.Icon,{typography:e?paragraphIconTypographyBySize[e]:void 0,name:"icn-stepper-minus-line",color:t?n.grey300:i??n.grey700,style:commonStyles.icon})})}),exports.NumericSpinnerPlusIconButton=(0,react_1.forwardRef)(function({size:e,color:i,disabled:t,style:r,...a},c){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_2.Pressable,{ref:c,style:[commonStyles.container,plusButtonStyles[e],r],accessibilityRole:"button","aria-disabled":t,...a,children:(0,jsx_runtime_1.jsx)(paragraph_1.Icon,{typography:e?paragraphIconTypographyBySize[e]:void 0,name:"icn-stepper-plus-line",color:t?n.grey300:i??n.grey700,style:commonStyles.icon})})});const paragraphIconTypographyBySize={tiny:"st13",small:"st13",medium:"t6",large:"t6"},commonStyles=react_native_1.StyleSheet.create({container:{display:"flex",justifyContent:"center",alignItems:"center"},icon:{display:"flex",justifyContent:"center",alignItems:"center",maxHeight:24,maxWidth:24}}),minusButtonStyles=react_native_1.StyleSheet.create({tiny:{paddingLeft:5,paddingRight:6},small:{paddingLeft:9,paddingRight:8},medium:{paddingLeft:8,paddingRight:10},large:{paddingLeft:12,paddingRight:14}}),plusButtonStyles=react_native_1.StyleSheet.create({tiny:{paddingRight:5,paddingLeft:6},small:{paddingRight:9,paddingLeft:8},medium:{paddingRight:8,paddingLeft:10},large:{paddingRight:12,paddingLeft:14}});

package/dist/cjs/components/numeric-spinner/NumericSpinnerNumberBox.d.ts

@@ -0,0 +1,17 @@
+import { Animated as ReactNativeAnimated } from 'react-native';
+import { Component, ReactNode } from 'react';
+import { PressableProps, ViewProps } from 'react-native';
+import { Size } from './type';
+export declare const NumericSpinnerNumberBoxBorderRadiusBySize: Record<Size, number>;
+export interface NumericSpinnerNumberBoxProps extends PressableProps {
+    size: Size;
+    children?: ReactNode;
+    style?: ViewProps['style'];
+    color?: ReactNativeAnimated.AnimatedInterpolation<string>;
+}
+/**
+ * @remarks color prop을 style이 아닌 props로 받아서 AnimatedInterpolation을 받을 수 있도록 합니다.
+ */
+export declare class NumericSpinnerNumberBox extends Component<NumericSpinnerNumberBoxProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/cjs/components/numeric-spinner/NumericSpinnerNumberBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinnerNumberBox=exports.NumericSpinnerNumberBoxBorderRadiusBySize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),animated_1=require("../../interactions/animated"),core_1=require("../../core"),paragraph_1=require("../paragraph"),react_1=require("react"),react_native_1=require("react-native"),AnimatedParagraphText=animated_1.Animated.createAnimatedComponent(paragraph_1.Text);exports.NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const NumericSpinnerNumberBoxImpl=(0,react_1.forwardRef)(function({size:e,style:n,children:a,color:s,...d},r){const{colorPreference:c}=(0,core_1.useColorPreference)(),p=c==="light"?colors_1.colors.inverseGrey900:colors_1.colors.inverseGrey300,i="semibold",o=paragraphTypographyBySize[e];return(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{ref:r,style:[styles.container,styles[e],{backgroundColor:p},n],...d,children:[(0,jsx_runtime_1.jsx)(AnimatedParagraphText,{ref:r,fontWeight:i,typography:o,style:{color:s},children:a}),(0,jsx_runtime_1.jsx)(paragraph_1.Text,{fontWeight:i,typography:o,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),styles=react_native_1.StyleSheet.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:colors_1.tds.tRadioIndicatorBackgroundColor,boxShadow:"0px 1px 3px 0px rgba(0, 0, 0, 0.09)",shadowColor:"rgba(0, 0, 0, 0.09)",shadowOffset:{width:0,height:1},shadowOpacity:1,shadowRadius:3,elevation:3},tiny:{paddingVertical:3,paddingHorizontal:5,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.large}}),paragraphTypographyBySize={tiny:"t7",small:"t6",medium:"t5",large:"t5"};class NumericSpinnerNumberBox extends react_1.Component{render(){return(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBoxImpl,{...this.props})}}exports.NumericSpinnerNumberBox=NumericSpinnerNumberBox;

package/dist/cjs/components/numeric-spinner/index.d.ts

@@ -0,0 +1 @@
+export { NumericSpinner, type NumericSpinnerProps } from './NumericSpinner';

package/dist/cjs/components/numeric-spinner/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinner=void 0;var NumericSpinner_1=require("./NumericSpinner");Object.defineProperty(exports,"NumericSpinner",{enumerable:!0,get:function(){return NumericSpinner_1.NumericSpinner}});

package/dist/cjs/components/numeric-spinner/type.d.ts

@@ -0,0 +1 @@
+export type Size = 'tiny' | 'small' | 'medium' | 'large';

package/dist/cjs/components/numeric-spinner/type.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/cjs/components/numeric-spinner/useAccelerateInterval.d.ts

@@ -0,0 +1,11 @@
+type CallbackFn = () => void;
+type Times = {
+    startMs: number;
+    minMs: number;
+    interval: number;
+};
+export declare function useAccelerateInterval(callback: CallbackFn, times: Times): {
+    startInterval: () => void;
+    stopInterval: () => void;
+};
+export {};

package/dist/cjs/components/numeric-spinner/useAccelerateInterval.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useAccelerateInterval=useAccelerateInterval;const react_1=require("react");function useAccelerateInterval(c,u){const e=(0,react_1.useRef)(),r=(0,react_1.useRef)(),n=(0,react_1.useRef)(0);(0,react_1.useEffect)(()=>{r.current=c},[c]),(0,react_1.useEffect)(()=>()=>{e.current&&clearTimeout(e.current)},[]);const t=(0,react_1.useCallback)(({startMs:a,interval:s,minMs:l}=u)=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{r.current&&(r.current(),n.current+=1),t({startMs:a*s,interval:s,minMs:l})},Math.max(a,l))},[u]),o=(0,react_1.useCallback)(()=>{n.current=0,e.current||t()},[t]),f=(0,react_1.useCallback)(()=>{e.current&&(clearInterval(e.current),e.current=void 0)},[]);return{startInterval:o,stopInterval:f}}

package/dist/cjs/components/numeric-spinner/useButtonLongPress.d.ts

@@ -0,0 +1,10 @@
+type UseButtonLongPressParams = {
+    onPressStart?: () => void;
+    onPressing: () => void;
+    onPressEnd?: () => void;
+};
+export declare function useButtonLongPress({ onPressStart: _onPressStart, onPressing, onPressEnd: _onPressEnd, }: UseButtonLongPressParams): {
+    onPressStart: () => void;
+    onPressEnd: () => void;
+};
+export {};

package/dist/cjs/components/numeric-spinner/useButtonLongPress.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useButtonLongPress=useButtonLongPress;const react_1=require("react"),useAccelerateInterval_1=require("./useAccelerateInterval");function useButtonLongPress({onPressStart:e,onPressing:n,onPressEnd:t}){const{startInterval:r,stopInterval:s}=(0,useAccelerateInterval_1.useAccelerateInterval)(n,{startMs:400,interval:.8,minMs:50}),a=(0,react_1.useCallback)(()=>{e&&e(),r()},[e,r]),c=(0,react_1.useCallback)(()=>{t&&t(),s()},[t,s]);return{onPressStart:a,onPressEnd:c}}

package/dist/cjs/components/numeric-spinner/useWiggleMotion.d.ts

@@ -0,0 +1,8 @@
+export declare function useWiggleMotion(): {
+    play: () => void;
+    style: {
+        transform: {
+            translateX: import("react-native").Animated.Value;
+        }[];
+    };
+};

package/dist/cjs/components/numeric-spinner/useWiggleMotion.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useWiggleMotion=useWiggleMotion;const animated_1=require("../../interactions/animated"),react_1=require("react"),react_native_1=require("react-native"),generateHapticFeedback_1=require("../../native/generateHapticFeedback");function useWiggleMotion(){const e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current;return{play:(0,react_1.useCallback)(()=>{(0,generateHapticFeedback_1.generateHapticFeedback)({type:"wiggle"}),animated_1.Animated.sequence([animated_1.Animated.timing(e,{toValue:2,duration:87.5,easing:react_native_1.Easing.linear,useNativeDriver:!1}),animated_1.Animated.timing(e,{toValue:-2,duration:87.5,easing:react_native_1.Easing.linear,useNativeDriver:!1}),animated_1.Animated.timing(e,{toValue:1,duration:87.5,easing:react_native_1.Easing.linear,useNativeDriver:!1}),animated_1.Animated.timing(e,{toValue:-1,duration:87.5,easing:react_native_1.Easing.linear,useNativeDriver:!1}),animated_1.Animated.timing(e,{toValue:0,duration:87.5,easing:react_native_1.Easing.linear,useNativeDriver:!1})]).start()},[e]),style:{transform:[{translateX:e}]}}}

package/dist/cjs/components/paragraph/Paragraph.d.ts

@@ -0,0 +1,10 @@
+import { TypographyKeys } from '../txt';
+import { ReactNode } from 'react';
+import { TextProps } from 'react-native';
+export interface ParagraphProps extends Pick<TextProps, 'style' | 'onTextLayout' | 'numberOfLines'> {
+    typography: TypographyKeys;
+    children: ReactNode;
+    afterText?: ReactNode;
+}
+declare function Paragraph({ children, typography, afterText, ...textProps }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+export { Paragraph };

package/dist/cjs/components/paragraph/Paragraph.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Paragraph=Paragraph;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),ParagraphContext_1=require("./ParagraphContext");function Paragraph({children:r,typography:t,afterText:a,...e}){return(0,jsx_runtime_1.jsx)(ParagraphContext_1.ParagraphContext.Provider,{value:{typography:t},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{flexDirection:"row",alignItems:"center",flex:0},children:[(0,jsx_runtime_1.jsx)(react_native_1.Text,{lineBreakStrategyIOS:"hangul-word",...e,allowFontScaling:!1,style:[{flexShrink:1},e.style],children:r}),a]})})}

package/dist/cjs/components/paragraph/ParagraphBadge/ParagraphBadge.d.ts

@@ -0,0 +1,51 @@
+import { FontWeightKeys, TypographyKeys } from '../../txt';
+import { StyleProp, ViewStyle } from 'react-native';
+type Type = 'blue' | 'teal' | 'green' | 'red' | 'yellow' | 'elephant';
+type Style = 'fill' | 'weak';
+export interface ParagraphBadgeProps {
+    /**
+     * `ParagraphBadge` 컴포넌트 내부에 표시될 텍스트를 지정해요.
+     */
+    children: string;
+    /**
+     * `ParagraphBadge` 컴포넌트의 왼쪽 여백을 설정해요.
+     *
+     * @default 0
+     */
+    marginLeft?: number;
+    /**
+     * `ParagraphBadge` 컴포넌트의 오른쪽 여백을 설정해요.
+     *
+     * @default 0
+     */
+    marginRight?: number;
+    /**
+     * `ParagraphBadge` 컴포넌트의 스타일(모양)을 설정해요. 'fill'은 채도가 높은 스타일, 'weak'은 채도가 낮은 스타일이에요.
+     *
+     * @default 'fill'
+     */
+    badgeStyle?: Style;
+    /**
+     * `ParagraphBadge` 컴포넌트의 색상을 설정해요.
+     *
+     * @default 'blue'
+     */
+    type?: Type;
+    /**
+     * `ParagraphBadge` 컴포넌트의 텍스트 스타일을 설정해요. 기본값은 상위 `Paragraph` 컴포넌트의 값을 따라가요.
+     * @default 't5'
+     */
+    typography?: TypographyKeys;
+    /**
+     * `ParagraphBadge` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * `ParagraphBadge` 컴포넌트의 텍스트 굵기를 설정해요.
+     *
+     * @default 'semiBold'
+     */
+    fontWeight?: FontWeightKeys;
+}
+declare function ParagraphBadge({ children, type, badgeStyle, marginLeft, marginRight, typography: typographyKeyProp, style, fontWeight, }: ParagraphBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { ParagraphBadge };

package/dist/cjs/components/paragraph/ParagraphBadge/ParagraphBadge.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphBadge=ParagraphBadge;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../../core"),txt_1=require("../../txt"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("../ParagraphContext"),utils_1=require("../utils"),const_1=require("./const");function ParagraphBadge({children:o,type:a="blue",badgeStyle:l="fill",marginLeft:g=0,marginRight:n=0,typography:d,style:i,fontWeight:u="semiBold"}){core_1.useColorPreference;const{colorPreference:s}=(0,core_1.useColorPreference)(),{typography:t}=(0,core_1.useTypographyTheme)(),{typography:k}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),h=`${a}-${l}`,{backgroundColor:B,color:p}=getBadgeStyleByVariants(h,s),c=d??k,r=(0,react_1.useMemo)(()=>{const{fontSize:e}=t[c];return(0,const_1.isValidFontSize)(e)?{...const_1.badgeStyleMap[e],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[e].lineHeight+const_1.badgeStyleMap[e].paddingVertical*2,fontSize:e})}:(console.error(INVALID_FONTSIZE_ERROR),{...const_1.badgeStyleMap[15],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[15].lineHeight+const_1.badgeStyleMap[15].paddingVertical*2,fontSize:e})})},[c,t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{alignSelf:"flex-start"},i],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingHorizontal:r.paddingHorizontal,paddingVertical:r.paddingVertical,borderRadius:r.borderRadius,backgroundColor:B,marginLeft:g??r.margin,marginRight:n??r.margin,top:r.top},children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:u,color:p,style:{fontSize:r.fontSize,lineHeight:r.lineHeight},children:o})})})}const INVALID_FONTSIZE_ERROR="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)",polishedValues={blueBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#3182f6",.16),blueBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#4593fc",.16),tealBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#00818a",.16),tealBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#269da6",.16),greenBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#02a262",.16),greenBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#15c47e",.16),redBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#f44336",.16),redBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ef5350",.16),yellowBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#ffb331",.16),yellowBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ffd158",.16),elephantBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#4e5968",.16),elephantBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#c3c3c6",.16)};function getBadgeStyleByVariants(o,a){return{"red-fill":{light:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white}},"red-weak":{light:{backgroundColor:polishedValues.redBadgeBackgroundLight,color:colors_1.colors.red700},dark:{backgroundColor:polishedValues.redBadgeBackgroundDark,color:colors_1.colors.red400}},"green-fill":{light:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white}},"green-weak":{light:{backgroundColor:polishedValues.greenBadgeBackgroundLight,color:colors_1.colors.green700},dark:{backgroundColor:polishedValues.greenBadgeBackgroundDark,color:colors_1.colors.green400}},"blue-fill":{light:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white}},"blue-weak":{light:{backgroundColor:polishedValues.blueBadgeBackgroundLight,color:colors_1.colors.blue700},dark:{backgroundColor:polishedValues.blueBadgeBackgroundDark,color:colors_1.colors.blue400}},"yellow-fill":{light:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800},dark:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800}},"yellow-weak":{light:{backgroundColor:polishedValues.yellowBadgeBackgroundLight,color:colors_1.colors.yellow900},dark:{backgroundColor:polishedValues.yellowBadgeBackgroundDark,color:colors_1.colors.yellow700}},"teal-fill":{light:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white}},"teal-weak":{light:{backgroundColor:polishedValues.tealBadgeBackgroundLight,color:colors_1.colors.teal700},dark:{backgroundColor:polishedValues.tealBadgeBackgroundDark,color:colors_1.colors.teal400}},"elephant-fill":{light:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white}},"elephant-weak":{light:{backgroundColor:polishedValues.elephantBadgeBackgroundLight,color:colors_1.colors.grey700},dark:{backgroundColor:polishedValues.elephantBadgeBackgroundDark,color:colors_1.colors.inverseGrey700}}}[o][a]}

package/dist/cjs/components/paragraph/ParagraphBadge/const.d.ts

@@ -0,0 +1,11 @@
+type FontSize = 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56;
+declare function isValidFontSize(fontSize: number): fontSize is FontSize;
+declare const badgeStyleMap: Record<FontSize, {
+    fontSize: number;
+    lineHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius: number;
+    margin: number;
+}>;
+export { isValidFontSize, badgeStyleMap };

package/dist/cjs/components/paragraph/ParagraphBadge/const.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.badgeStyleMap=void 0,exports.isValidFontSize=isValidFontSize;function isValidFontSize(i){return i<56&&i>10}const badgeStyleMap={11:{fontSize:9,lineHeight:9*1.5,paddingHorizontal:6,paddingVertical:3,borderRadius:8,margin:4},12:{fontSize:9,lineHeight:9*1.5,paddingHorizontal:6,paddingVertical:3,borderRadius:8,margin:4},13:{fontSize:9,lineHeight:9*1.5,paddingHorizontal:6,paddingVertical:3,borderRadius:8,margin:4},14:{fontSize:10,lineHeight:10*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:9,margin:4},15:{fontSize:10,lineHeight:10*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:9,margin:4},16:{fontSize:10,lineHeight:10*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:9,margin:5},17:{fontSize:10,lineHeight:10*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:9,margin:5},18:{fontSize:11,lineHeight:11*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:10,margin:6},19:{fontSize:11,lineHeight:11*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:10,margin:6},20:{fontSize:11,lineHeight:11*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:10,margin:6},21:{fontSize:11,lineHeight:11*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:10,margin:6},22:{fontSize:12,lineHeight:12*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:11,margin:6},23:{fontSize:12,lineHeight:12*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:11,margin:6},24:{fontSize:12,lineHeight:12*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:11,margin:6},25:{fontSize:12,lineHeight:12*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:11,margin:6},26:{fontSize:13,lineHeight:13*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:12,margin:6},27:{fontSize:13,lineHeight:13*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:12,margin:7},28:{fontSize:13,lineHeight:13*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:12,margin:7},29:{fontSize:13,lineHeight:13*1.5,paddingHorizontal:7,paddingVertical:3,borderRadius:12,margin:7},30:{fontSize:14,lineHeight:14*1.5,paddingHorizontal:8,paddingVertical:4,borderRadius:13,margin:7},31:{fontSize:14,lineHeight:14*1.5,paddingHorizontal:8,paddingVertical:4,borderRadius:13,margin:7},32:{fontSize:14,lineHeight:14*1.5,paddingHorizontal:8,paddingVertical:4,borderRadius:13,margin:7},33:{fontSize:14,lineHeight:14*1.5,paddingHorizontal:8,paddingVertical:4,borderRadius:13,margin:7},34:{fontSize:14,lineHeight:14*1.5,paddingHorizontal:8,paddingVertical:4,borderRadius:13,margin:7},35:{fontSize:15,lineHeight:15*1.5,paddingHorizontal:9,paddingVertical:4,borderRadius:13,margin:7},36:{fontSize:15,lineHeight:15*1.5,paddingHorizontal:9,paddingVertical:4,borderRadius:13,margin:7},37:{fontSize:15,lineHeight:15*1.5,paddingHorizontal:9,paddingVertical:4,borderRadius:13,margin:7},38:{fontSize:15,lineHeight:15*1.5,paddingHorizontal:9,paddingVertical:4,borderRadius:13,margin:7},39:{fontSize:16,lineHeight:16*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:7},40:{fontSize:16,lineHeight:16*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:7},41:{fontSize:16,lineHeight:16*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},42:{fontSize:16,lineHeight:16*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},43:{fontSize:17,lineHeight:17*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},44:{fontSize:17,lineHeight:17*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},45:{fontSize:17,lineHeight:17*1.5,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},46:{fontSize:17,lineHeight:17,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},47:{fontSize:18,lineHeight:18,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},48:{fontSize:18,lineHeight:18,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},49:{fontSize:18,lineHeight:18,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},50:{fontSize:18,lineHeight:18,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},51:{fontSize:18,lineHeight:18,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},52:{fontSize:19,lineHeight:19,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},53:{fontSize:19,lineHeight:19,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},54:{fontSize:19,lineHeight:19,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},55:{fontSize:19,lineHeight:19,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8},56:{fontSize:20,lineHeight:20,paddingHorizontal:10,paddingVertical:5,borderRadius:14,margin:8}};exports.badgeStyleMap=badgeStyleMap;

package/dist/cjs/components/paragraph/ParagraphBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { ParagraphBadge } from './ParagraphBadge';
+export type { ParagraphBadgeProps } from './ParagraphBadge';

package/dist/cjs/components/paragraph/ParagraphBadge/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphBadge=void 0;var ParagraphBadge_1=require("./ParagraphBadge");Object.defineProperty(exports,"ParagraphBadge",{enumerable:!0,get:function(){return ParagraphBadge_1.ParagraphBadge}});

package/dist/cjs/components/paragraph/ParagraphCode.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface ParagraphCodeProps {
+    children: ReactNode;
+}
+declare function ParagraphCode({ children }: ParagraphCodeProps): import("react/jsx-runtime").JSX.Element;
+export { ParagraphCode };

package/dist/cjs/components/paragraph/ParagraphCode.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphCode=ParagraphCode;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("./ParagraphContext"),ParagraphText_1=require("./ParagraphText"),utils_1=require("./utils");function ParagraphCode({children:e}){const t=(0,core_1.useAdaptive)(),{colorPreference:o}=(0,core_1.useColorPreference)(),{typography:s}=(0,core_1.useTypographyTheme)(),{typography:n}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),{fontSize:r,lineHeight:a}=s[n],i=(0,react_1.useMemo)(()=>({fontSize:r,lineHeight:(0,ParagraphText_1.getLineHeightByFontSize)(r),color:o==="dark"?colors_1.colors.white:colors_1.colors.grey700}),[r,o]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:getBorderRadiusByFontSize(r),top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:a+BORDER_WIDTH*2,fontSize:r})},styles.code],children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:"regular",style:i,children:e})})})}const BORDER_WIDTH=1,styles=react_native_1.StyleSheet.create({code:{paddingHorizontal:4,borderWidth:BORDER_WIDTH}}),getBorderRadiusByFontSize=e=>e<19?4:e<23?5:e<29?6:e<41?8:10;

package/dist/cjs/components/paragraph/ParagraphContext.d.ts

@@ -0,0 +1,5 @@
+import { TypographyKeys } from '../txt';
+export interface ParagraphContext {
+    typography: TypographyKeys;
+}
+export declare const ParagraphContext: import("react").Context<ParagraphContext>;

package/dist/cjs/components/paragraph/ParagraphContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphContext=void 0;const react_1=require("react");exports.ParagraphContext=(0,react_1.createContext)({typography:"t5"});

package/dist/cjs/components/paragraph/ParagraphIcon.d.ts

@@ -0,0 +1,7 @@
+import { IconProps } from '../icon';
+import { TypographyKeys } from '../txt';
+export interface ParagraphIconProps extends IconProps {
+    typography?: TypographyKeys;
+}
+declare function ParagraphIcon({ size: _size, typography: typographyProp, ...props }: ParagraphIconProps): import("react/jsx-runtime").JSX.Element;
+export { ParagraphIcon };

package/dist/cjs/components/paragraph/ParagraphIcon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphIcon=ParagraphIcon;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),icon_1=require("../icon"),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("./ParagraphContext");function ParagraphIcon({size:e,typography:o,...a}){const{typography:t}=(0,core_1.useTypographyTheme)(),{typography:r}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),n=(0,react_1.useMemo)(()=>e??getIconSizeByFontSize(t[o??r].fontSize),[e,t,o,r]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{width:n,maxHeight:react_native_1.Platform.OS==="ios"?t[r].lineHeight:t[r].fontSize},children:(0,jsx_runtime_1.jsx)(icon_1.Icon,{size:n,...a})})}const getIconSizeByFontSize=e=>Math.round(1.16*(e-11)+12);

package/dist/cjs/components/paragraph/ParagraphLink.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphTextProps } from './ParagraphText';
+interface ParagraphLinkProps extends Pick<ParagraphTextProps, 'children' | 'onPress'> {
+    fontWeight: 'medium' | 'bold';
+    color?: string;
+}
+declare function ParagraphLink({ color, fontWeight, ...props }: ParagraphLinkProps): import("react/jsx-runtime").JSX.Element;
+export { ParagraphLink };

package/dist/cjs/components/paragraph/ParagraphLink.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphLink=ParagraphLink;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("./ParagraphContext"),ParagraphText_1=require("./ParagraphText");function ParagraphLink({color:e,fontWeight:n,...s}){const r=(0,core_1.useAdaptive)(),{typography:o}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),[i,t]=(0,react_1.useState)(!1),p=(0,react_1.useCallback)(()=>t(!0),[]),a=(0,react_1.useCallback)(()=>t(!1),[]);return(0,jsx_runtime_1.jsx)(ParagraphText_1.ParagraphText,{typography:o,fontWeight:n,color:e??r.grey700,style:[{backgroundColor:i?e??r.grey200:"transparent"},styles.link],onResponderGrant:p,onResponderRelease:a,onResponderTerminate:a,suppressHighlighting:!0,...s})}const styles=react_native_1.StyleSheet.create({link:{textDecorationLine:"underline"}});

package/dist/cjs/components/paragraph/ParagraphText.d.ts

@@ -0,0 +1,11 @@
+import { TxtProps, TypographyKeys } from '../txt';
+import { GestureResponderHandlers, Text } from 'react-native';
+export interface ParagraphTextProps extends Pick<TxtProps, 'children' | 'fontWeight' | 'color' | 'suppressHighlighting' | 'style' | 'onPress' | 'onPressIn' | 'onPressOut' | 'onLayout'>, GestureResponderHandlers {
+    /**
+     * @default 부모 Paragraph의 typography
+     */
+    typography?: TypographyKeys;
+}
+declare const ParagraphText: import("react").ForwardRefExoticComponent<ParagraphTextProps & import("react").RefAttributes<Text>>;
+export declare const getLineHeightByFontSize: (fontSize: number) => number;
+export { ParagraphText };

package/dist/cjs/components/paragraph/ParagraphText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphText=exports.getLineHeightByFontSize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),ParagraphContext_1=require("./ParagraphContext"),ParagraphText=(0,react_1.forwardRef)(function({typography:o,style:a,...n},s){const{typography:t}=(0,core_1.useTypographyTheme)(),{typography:p}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),r=o??p,i=(0,react_1.useMemo)(()=>({lineHeight:(0,exports.getLineHeightByFontSize)(t[r].fontSize),fontSize:t[r].fontSize}),[r,t]);return(0,jsx_runtime_1.jsx)(txt_1.Txt,{ref:s,style:[i,a],...n})});exports.ParagraphText=ParagraphText;const getLineHeightByFontSize=e=>e<16?Math.floor(e*1.5):e<27?Math.floor(e*1.4):e<39?Math.floor(e*1.3):Math.floor(e*1.2);exports.getLineHeightByFontSize=getLineHeightByFontSize;

package/dist/cjs/components/paragraph/index.d.ts

@@ -0,0 +1,10 @@
+export { Paragraph as Root } from './Paragraph';
+export { ParagraphText as Text } from './ParagraphText';
+export { ParagraphIcon as Icon } from './ParagraphIcon';
+export { ParagraphLink as Link } from './ParagraphLink';
+export { ParagraphBadge as Badge } from './ParagraphBadge';
+export { ParagraphCode as Code } from './ParagraphCode';
+export type { ParagraphProps } from './Paragraph';
+export type { ParagraphTextProps } from './ParagraphText';
+export type { ParagraphBadgeProps } from './ParagraphBadge';
+export type { ParagraphIconProps } from './ParagraphIcon';

package/dist/cjs/components/paragraph/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Code=exports.Badge=exports.Link=exports.Icon=exports.Text=exports.Root=void 0;var Paragraph_1=require("./Paragraph");Object.defineProperty(exports,"Root",{enumerable:!0,get:function(){return Paragraph_1.Paragraph}});var ParagraphText_1=require("./ParagraphText");Object.defineProperty(exports,"Text",{enumerable:!0,get:function(){return ParagraphText_1.ParagraphText}});var ParagraphIcon_1=require("./ParagraphIcon");Object.defineProperty(exports,"Icon",{enumerable:!0,get:function(){return ParagraphIcon_1.ParagraphIcon}});var ParagraphLink_1=require("./ParagraphLink");Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return ParagraphLink_1.ParagraphLink}});var ParagraphBadge_1=require("./ParagraphBadge");Object.defineProperty(exports,"Badge",{enumerable:!0,get:function(){return ParagraphBadge_1.ParagraphBadge}});var ParagraphCode_1=require("./ParagraphCode");Object.defineProperty(exports,"Code",{enumerable:!0,get:function(){return ParagraphCode_1.ParagraphCode}});

package/dist/cjs/components/paragraph/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * ParagaphText와 다른 Paragraph 요소들간에 vertical align을 맞추기 위한 보정값
+ */
+export declare const get보정Top: ({ targetHeight, fontSize }: {
+    targetHeight: number;
+    fontSize: number;
+}) => number;

package/dist/cjs/components/paragraph/utils.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.get\uBCF4\uC815Top=void 0;const get\uBCF4\uC815Top=({targetHeight:e,fontSize:t})=>(e-t)/2;exports.get\uBCF4\uC815Top=get\uBCF4\uC815Top;

package/dist/cjs/components/post/Header.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { Text, ViewProps } from 'react-native';
+import { TxtProps, TypographyKeys } from '../txt';
+export interface HeaderPublicProps extends TxtProps {
+    /**
+     * 텍스트의 타이포그래피 스타일을 지정해요.
+     * 각 스타일은 텍스트의 크기, 굵기, 간격 등을 다르게 설정해서 다양한 화면 환경과 디자인 요구를 만족해요.
+     *
+     * `t1` ~ `t7`: 주로 본문 텍스트에 사용하는 크기와 굵기 스타일이에요.
+     * `st1` ~ `st13`: 서브 타이틀 또는 부가적인 텍스트에 적합한 스타일이에요. 예를 들어, `st1`은 작은 본문이나 설명 텍스트에 적합하고, `st10`은 강조 텍스트에 사용하기 좋아요.
+     * @default "t2"
+     */
+    typography?: TypographyKeys;
+    /**
+     * 컴포넌트 하단의 여백을 결정해요.
+     */
+    paddingBottom?: number;
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export type PostH1Props = HeaderPublicProps;
+export declare const PostH1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeaderPublicProps & import("react").RefAttributes<Text>>>;
+export type PostH2Props = HeaderPublicProps;
+export declare const PostH2: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeaderPublicProps & import("react").RefAttributes<Text>>>;
+export type PostH3Props = HeaderPublicProps;
+export declare const PostH3: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeaderPublicProps & import("react").RefAttributes<Text>>>;
+export type PostH4Props = HeaderPublicProps;
+export declare const PostH4: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeaderPublicProps & import("react").RefAttributes<Text>>>;

package/dist/cjs/components/post/Header.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostH4=exports.PostH3=exports.PostH2=exports.PostH1=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),core_1=require("../../core"),txt_1=require("../txt"),HeaderPrototype=(0,react_1.forwardRef)(function({headerType:t,typography:e,paddingBottom:r=paddingByHeaderType[t].bottom,children:s,color:n,style:p,...i},f){const d=(0,core_1.useAdaptive)(),a=(0,react_1.useMemo)(()=>({paddingTop:paddingByHeaderType[t].top,paddingRight:paddingByHeaderType[t].right,paddingBottom:r,paddingLeft:paddingByHeaderType[t].left}),[r,t]);return(0,jsx_runtime_1.jsx)(txt_1.Txt,{role:"heading",ref:f,typography:typographyByHeaderType[t],fontWeight:"bold",color:n??d.grey700,style:[a,p],...i,children:s})}),paddingByHeaderType={h1:{top:16,right:24,bottom:24,left:24},h2:{top:16,right:24,bottom:24,left:24},h3:{top:8,right:24,bottom:16,left:24},h4:{top:8,right:24,bottom:16,left:24}},typographyByHeaderType={h1:"t2",h2:"t3",h3:"st8",h4:"t5"};exports.PostH1=(0,react_1.memo)((0,react_1.forwardRef)(function(t,e){return(0,jsx_runtime_1.jsx)(HeaderPrototype,{headerType:"h1",...t,ref:e})})),exports.PostH2=(0,react_1.memo)((0,react_1.forwardRef)(function(t,e){return(0,jsx_runtime_1.jsx)(HeaderPrototype,{headerType:"h2",...t,ref:e})})),exports.PostH3=(0,react_1.memo)((0,react_1.forwardRef)(function(t,e){return(0,jsx_runtime_1.jsx)(HeaderPrototype,{headerType:"h3",...t,ref:e})})),exports.PostH4=(0,react_1.memo)((0,react_1.forwardRef)(function(t,e){return(0,jsx_runtime_1.jsx)(HeaderPrototype,{headerType:"h4",...t,ref:e})}));

package/dist/cjs/components/post/Hr.d.ts

@@ -0,0 +1,12 @@
+import { ViewProps } from 'react-native';
+export interface PostHrProps {
+    /**
+     * 컴포넌트 하단의 여백을 결정해요.
+     */
+    paddingBottom?: number;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export declare function PostHr({ paddingBottom, style }: PostHrProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/post/Hr.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostHr=PostHr;const jsx_runtime_1=require("react/jsx-runtime"),border_1=require("../border");function PostHr({paddingBottom:e=24,style:r}){return(0,jsx_runtime_1.jsx)(border_1.Border,{type:"padding24",style:[{paddingBottom:e},r]})}

package/dist/cjs/components/post/List/PostLi.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native/types/index';
+export interface PostLiProps {
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 텍스트 색상을 지정해요.
+     */
+    color?: string;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export declare function PostLi(props: PostLiProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PostLi {
+    var displayName: string;
+}

package/dist/cjs/components/post/List/PostLi.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostLi=PostLi;const jsx_runtime_1=require("react/jsx-runtime"),constants_1=require("../constants"),PostListProvider_1=require("./PostListProvider"),PostOl_1=require("./PostOl"),PostUl_1=require("./PostUl");function PostLi(t){const{listType:s}=(0,PostListProvider_1.usePostList)();return s==="ol"?(0,jsx_runtime_1.jsx)(PostOl_1.PostOlLi,{...t}):(0,jsx_runtime_1.jsx)(PostUl_1.PostUlLi,{...t})}PostLi.displayName=constants_1.POST_LI;

package/dist/cjs/components/post/List/PostList.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { TypographyKeys } from '../../txt/index';
+type ListType = 'ol' | 'ul';
+export interface PostListProps {
+    typography?: TypographyKeys;
+    children: ReactNode;
+    style?: ViewProps['style'];
+    paddingBottom?: number;
+    listType: ListType;
+}
+export declare function PostList({ listType, typography, paddingBottom, style, children, }: PostListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/post/List/PostList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostList=PostList;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),prevent_font_scaling_1=require("../../../extensions/prevent-font-scaling"),constants_1=require("../constants"),PostListProvider_1=require("./PostListProvider"),DEFAULT_GAP=8;function PostList({listType:r,typography:n="t5",paddingBottom:t=paddingByListType[r].bottom,style:e,children:o}){return(0,jsx_runtime_1.jsx)(prevent_font_scaling_1.PreventFontScaling,{limit:160,children:(0,jsx_runtime_1.jsx)(PostListProvider_1.PostListProvider,{listType:r,typography:n,children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{paddingTop:paddingByListType[r].top,paddingRight:paddingByListType[r].right,paddingBottom:t,paddingLeft:paddingByListType[r].left},e],children:r==="ol"?(0,jsx_runtime_1.jsx)(PostOLListRenderer,{children:o}):(0,jsx_runtime_1.jsx)(PostULListRenderer,{children:o})})})})}function PostOLListRenderer({children:r}){let n=0,t=0;return(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:react_1.Children.toArray(r).filter(react_1.isValidElement).map(e=>{const o=e.type?.displayName,s=t===0?0:DEFAULT_GAP;return o===constants_1.POST_LI?(n=n+1,t++,(0,react_1.cloneElement)(e,{order:n,...e.props,style:{marginTop:s,...e.props.style}})):o===constants_1.POST_OL?(0,react_1.cloneElement)(e,{...e.props,paddingBottom:e.props?.paddingBottom??0,style:{marginTop:s,...e.props.style}}):e})})}function PostULListRenderer({children:r}){let n=0;return(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:react_1.Children.toArray(r).filter(react_1.isValidElement).map(t=>{const e=t.type?.displayName,o=n===0?0:DEFAULT_GAP;return e===constants_1.POST_UL?(n++,(0,react_1.cloneElement)(t,{paddingBottom:t.props?.paddingBottom??0,...t.props,style:{marginTop:o,...t.props.style}})):e===constants_1.POST_LI?(n++,(0,react_1.cloneElement)(t,{...t.props,style:{marginTop:o,...t.props.style}})):t})})}const paddingByListType={ol:{top:0,right:24,bottom:24,left:16},ul:{top:0,right:24,bottom:24,left:24}};

package/dist/cjs/components/post/List/PostListProvider.d.ts

@@ -0,0 +1,15 @@
+import { TypographyKeys } from '../../txt';
+import { ReactNode } from 'react';
+type ListType = 'ol' | 'ul';
+export type PostList = {
+    listType: ListType;
+    typography?: TypographyKeys;
+};
+interface Props {
+    listType: ListType;
+    typography?: TypographyKeys;
+    children?: ReactNode;
+}
+export declare function PostListProvider({ listType, typography, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function usePostList(): PostList;
+export {};

package/dist/cjs/components/post/List/PostListProvider.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostListProvider=PostListProvider,exports.usePostList=usePostList;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PostListContext=(0,react_1.createContext)({listType:"ul"});function PostListProvider({listType:t,typography:e,children:r}){return(0,jsx_runtime_1.jsx)(PostListContext.Provider,{value:{listType:t,typography:e},children:r})}function usePostList(){return(0,react_1.useContext)(PostListContext)}