@toss/tds-react-native 1.0.0

package/dist/esm/components/navbar/ReactNavigationHelper/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const MAX_FONT_SIZE = 20;
+export declare const MAX_LINE_HEIGHT: number;
+export declare const IOS_LEFT_MARGIN = 10;
+export declare const ANDROID_LEFT_MARGIN = 16;
+export declare const RIGHT_MARGIN = 24;
+export declare const ANDROID_RIGHT없을때_MARGIN = 36;
+/**
+ * react-navigation에서 제공하는 기본 헤더의 horizontal 마진
+ * @see https://github.com/react-navigation/react-navigation/issues/10058
+ */
+export declare const IOS_DEFAULT_MARGIN = 20;
+export declare const ANDROID_DEFAULT_MARGIN = 16;

package/dist/esm/components/navbar/ReactNavigationHelper/constants.js

@@ -0,0 +1 @@
+"use strict";import{fontSizeToLineHeightMap as o}from"../../../constants/index";export const MAX_FONT_SIZE=20,MAX_LINE_HEIGHT=o[MAX_FONT_SIZE],IOS_LEFT_MARGIN=10,ANDROID_LEFT_MARGIN=16,RIGHT_MARGIN=24,ANDROID_RIGHT\uC5C6\uC744\uB54C_MARGIN=36,IOS_DEFAULT_MARGIN=20,ANDROID_DEFAULT_MARGIN=16;

package/dist/esm/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/esm/components/navbar/ReactNavigationHelper/index.js

@@ -0,0 +1 @@
+"use strict";import{BackButton as t}from"./BackButton";import{RightIconButton as e,RightTextButton as o}from"./Right";import{SubtitleTxt as i,Title as r,TitleTxt as m}from"./Title";import{HeaderLeft as a}from"./HeaderLeft";import{HeaderRight as n}from"./HeaderRight";import{HeaderTitle as T}from"./HeaderTitle";import{CloseButton as l}from"./CloseButton";export const ReactNavigationNavbar={HeaderLeft:a,HeaderRight:n,BackButton:t,CloseButton:l,RightIconButton:e,RightTextButton:o,HeaderTitle:T,TitleTxt:m,DoubleLineTitle:r,SubtitleTxt:i};

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

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

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

@@ -0,0 +1 @@
+"use strict";export*from"./ReactNavigationHelper";

package/dist/esm/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/esm/components/numeric-spinner/NumericSpinner.js

@@ -0,0 +1 @@
+"use strict";import{jsx as p,jsxs as _}from"react/jsx-runtime";import{PanGestureHandler as ve,State as q}from"@granite-js/native/react-native-gesture-handler";import{springEaseWithDuration as t}from"@toss-design-system/easings";import{Animated as e}from"../../interactions/animated";import{useAdaptive as h}from"../../core";import{generateHapticFeedback as J}from"../../native/generateHapticFeedback";import{forwardRef as ye,useCallback as u,useEffect as he,useRef as l,useState as m}from"react";import{Pressable as Ne}from"react-native";import{NumericSpinnerContainer as Ve,NumericSpinnerContainerBorderRadiusBySize as L}from"./NumericSpinnerContainer";import{NumericSpinnerMinusIconButton as K,NumericSpinnerPlusIconButton as Q}from"./NumericSpinnerIconButton";import{NumericSpinnerNumberBox as U,NumericSpinnerNumberBoxBorderRadiusBySize as X}from"./NumericSpinnerNumberBox";import{useAccelerateInterval as Y}from"./useAccelerateInterval";import{useButtonLongPress as Z}from"./useButtonLongPress";import{useWiggleMotion as be}from"./useWiggleMotion";const z=e.createAnimatedComponent(Ve),xe=e.createAnimatedComponent(U),ke=e.createAnimatedComponent(K),Be=e.createAnimatedComponent(Q),ee=({min:a,max:r,num:n})=>!isNaN(n)&&n>=a&&n<=r;export const NumericSpinner=ye(function({disable:r,number:n=0,minNumber:i=0,maxNumber:c=100,onNumberChange:d,size:s,style:N,...M},W){const H=h(),{play:g,style:T}=be(),V=ee({max:c,min:i,num:n+1}),b=ee({max:c,min:i,num:n-1}),A=u(()=>{if(V){const o=n+1;J({type:"tickWeak"}),d?.(o);return}g()},[n,V,d,g]),E=u(()=>{if(b){const o=n-1;J({type:"tickWeak"}),d?.(o);return}g()},[n,b,d,g]),x=Ce(),{onPressStart:ne,onPressEnd:ae}=Z({onPressing:E,onPressEnd:x.play}),{onPressStart:re,onPressEnd:ie}=Z({onPressing:A,onPressEnd:x.play}),f=l(!1),G=Y(A,{startMs:400,interval:.8,minMs:50}),j=Y(E,{startMs:400,interval:.8,minMs:50}),se=()=>{f.current!==!0&&(j.startInterval(),f.current=!0)},oe=()=>{f.current!==!0&&(G.startInterval(),f.current=!0)},ue=()=>{G.stopInterval(),j.stopInterval(),f.current=!1},R=l(new e.Value(0)).current,v=l(new e.Value(X[s])).current,k=De({size:s}),le=e.event([{nativeEvent:{translationX:R}}],{useNativeDriver:!1}),ce=o=>{switch(o.nativeEvent.state){case q.BEGAN:{k.play(),e.parallel([e.timing(v,{toValue:50,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}case q.END:case q.FAILED:{k.reset(),e.parallel([e.spring(R,{toValue:0,useNativeDriver:!1}),e.timing(v,{toValue:X[s],useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}}},[O,de]=m(0),[B,pe]=m(0),[I,me]=m(0),[C,ge]=m(0),$=R.interpolate({inputRange:[-I,C],outputRange:[-I,C],extrapolate:"clamp"});$.addListener(({value:o})=>{const fe=-I;o===fe?se():o===C?oe():ue()}),he(()=>{v.setValue(X[s])},[v,s]);const y=Se(),D=Ae(),S=Ee(),w=Re(),P=Ie(),F=`${n}`;return r?p(Ne,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${n}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{g()},style:[{alignSelf:"flex-start"},N],...M,children:_(z,{ref:W,size:s,style:[{opacity:.3},T],pointerEvents:"none",children:[p(K,{size:s}),p(U,{style:{borderRadius:8},size:s,"aria-label":F,color:x.style.color,children:n}),p(Q,{size:s})]})}):_(z,{testID:"numeric-spinner",ref:W,onLayout:o=>pe(o.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...k.style,transform:[...k.style.transform,...T.transform],position:"relative"},N],size:s,...M,children:[p(ke,{"aria-label":"\uBE7C\uAE30",accessibilityHint:b?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${i}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>me(o.nativeEvent.layout.width),onPress:E,onPressIn:()=>{ne(),y.shrink(),D.shrink(),w.shrink()},onPressOut:()=>{ae(),y.expand(),D.expand(),w.expand()},disabled:b===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:s}),p(ve,{onGestureEvent:le,onHandlerStateChange:ce,children:p(xe,{onLayout:o=>{de(o.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:v,transform:[{translateX:$},...y.style.transform]},size:s,accessibilityRole:"text",accessibilityValue:{text:F},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:x.style.color,children:n})}),p(Be,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:V?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${c}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>ge(o.nativeEvent.layout.width),onPress:A,onPressIn:()=>{re(),y.shrink(),S.shrink(),P.shrink()},onPressOut:()=>{ie(),y.expand(),S.expand(),P.expand()},disabled:V===!1,style:{zIndex:1,alignSelf:"stretch",...S.style},color:S.style.color,size:s}),p(e.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...w.style}}),p(e.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...P.style}})]})});const te={tiny:5,small:6,medium:7,large:8};function De({size:a}){const r=h(),n=l(new e.Value(0)).current,i=n.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),c=n.interpolate({inputRange:[0,100],outputRange:[r.grey100,r.grey200],extrapolate:"clamp"}),d=n.interpolate({inputRange:[0,100],outputRange:[L[a],50],extrapolate:"clamp"}),s=u(()=>{e.timing(n,{toValue:100,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]),N=u(()=>{e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]);return{play:s,reset:N,style:{backgroundColor:c,borderRadius:d,transform:[{scale:i}]}}}function Se(){const a=l(new e.Value(1)).current,r=u(()=>{e.timing(a,{toValue:.9,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[a]),n=u(()=>{e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3}).start()},[a]);return{shrink:r,expand:n,style:{transform:[{scale:a}]}}}function Ae(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Ee(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Re(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:-2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ie(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ce(){const a=h(),r=l(new e.Value(0)).current,n=r.interpolate({inputRange:[0,1],outputRange:[a.grey800,a.blue500]});return{play:u(()=>{r.setValue(0),e.stagger(300,[e.timing(r,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.basic.ease,duration:t.basic.duration*1e3})]).start()},[r]),style:{color:n}}}

package/dist/esm/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/esm/components/numeric-spinner/NumericSpinnerContainer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d}from"react/jsx-runtime";import{useAdaptive as l}from"../../core";import{forwardRef as m}from"react";import{StyleSheet as p,View as s}from"react-native";export const NumericSpinnerContainerBorderRadiusBySize={tiny:8,small:10,medium:14,large:16},NumericSpinnerContainer=m(function({size:i,style:e,children:n,...a},o){const t=l();return d(s,{ref:o,style:[r.container,r[i],{backgroundColor:t.grey100},e],...a,children:n})});const r=p.create({container:{display:"flex",flexDirection:"row"},tiny:{paddingVertical:3,paddingHorizontal:3,borderRadius:NumericSpinnerContainerBorderRadiusBySize.tiny},small:{paddingVertical:3,paddingHorizontal:3,borderRadius:NumericSpinnerContainerBorderRadiusBySize.small},medium:{paddingVertical:4,paddingHorizontal:4,borderRadius:NumericSpinnerContainerBorderRadiusBySize.medium},large:{paddingVertical:4,paddingHorizontal:4,borderRadius:NumericSpinnerContainerBorderRadiusBySize.large}});

package/dist/esm/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/esm/components/numeric-spinner/NumericSpinnerIconButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i}from"react/jsx-runtime";import{useAdaptive as s}from"../../core";import{Icon as g}from"../paragraph";import{forwardRef as l}from"react";import{StyleSheet as c}from"react-native";import{Pressable as m}from"react-native";export const NumericSpinnerMinusIconButton=l(function({size:t,color:a,disabled:n,style:o,...d},p){const e=s();return i(m,{ref:p,style:[r.container,f[t],o],accessibilityRole:"button","aria-disabled":n,...d,children:i(g,{typography:t?u[t]:void 0,name:"icn-stepper-minus-line",color:n?e.grey300:a??e.grey700,style:r.icon})})}),NumericSpinnerPlusIconButton=l(function({size:t,color:a,disabled:n,style:o,...d},p){const e=s();return i(m,{ref:p,style:[r.container,h[t],o],accessibilityRole:"button","aria-disabled":n,...d,children:i(g,{typography:t?u[t]:void 0,name:"icn-stepper-plus-line",color:n?e.grey300:a??e.grey700,style:r.icon})})});const u={tiny:"st13",small:"st13",medium:"t6",large:"t6"},r=c.create({container:{display:"flex",justifyContent:"center",alignItems:"center"},icon:{display:"flex",justifyContent:"center",alignItems:"center",maxHeight:24,maxWidth:24}}),f=c.create({tiny:{paddingLeft:5,paddingRight:6},small:{paddingLeft:9,paddingRight:8},medium:{paddingLeft:8,paddingRight:10},large:{paddingLeft:12,paddingRight:14}}),h=c.create({tiny:{paddingRight:5,paddingLeft:6},small:{paddingRight:9,paddingLeft:8},medium:{paddingRight:8,paddingLeft:10},large:{paddingRight:12,paddingLeft:14}});

package/dist/esm/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/esm/components/numeric-spinner/NumericSpinnerNumberBox.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as u}from"react/jsx-runtime";import{colors as a,tds as y}from"@toss-design-system/colors";import{Animated as f}from"../../interactions/animated";import{useColorPreference as x}from"../../core";import{Text as n}from"../paragraph";import{Component as b,forwardRef as S}from"react";import{Pressable as B,StyleSheet as C}from"react-native";const N=f.createAnimatedComponent(n);export const NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const R=S(function({size:e,style:p,children:l,color:m,...c},o){const{colorPreference:g}=x(),h=g==="light"?a.inverseGrey900:a.inverseGrey300,t="semibold",i=w[e];return u(B,{ref:o,style:[d.container,d[e],{backgroundColor:h},p],...c,children:[r(N,{ref:o,fontWeight:t,typography:i,style:{color:m},children:l}),r(n,{fontWeight:t,typography:i,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),d=C.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:y.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:NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.large}}),w={tiny:"t7",small:"t6",medium:"t5",large:"t5"};export class NumericSpinnerNumberBox extends b{render(){return r(R,{...this.props})}}

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

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

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

@@ -0,0 +1 @@
+"use strict";export{NumericSpinner}from"./NumericSpinner";

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

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

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

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/esm/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/esm/components/numeric-spinner/useAccelerateInterval.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as c,useEffect as i,useRef as n}from"react";export function useAccelerateInterval(u,a){const e=n(),r=n(),o=n(0);i(()=>{r.current=u},[u]),i(()=>()=>{e.current&&clearTimeout(e.current)},[]);const t=c(({startMs:l,interval:f,minMs:s}=a)=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{r.current&&(r.current(),o.current+=1),t({startMs:l*f,interval:f,minMs:s})},Math.max(l,s))},[a]),m=c(()=>{o.current=0,e.current||t()},[t]),I=c(()=>{e.current&&(clearInterval(e.current),e.current=void 0)},[]);return{startInterval:m,stopInterval:I}}

package/dist/esm/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/esm/components/numeric-spinner/useButtonLongPress.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as s}from"react";import{useAccelerateInterval as i}from"./useAccelerateInterval";export function useButtonLongPress({onPressStart:t,onPressing:o,onPressEnd:r}){const{startInterval:e,stopInterval:n}=i(o,{startMs:400,interval:.8,minMs:50}),a=s(()=>{t&&t(),e()},[t,e]),c=s(()=>{r&&r(),n()},[r,n]);return{onPressStart:a,onPressEnd:c}}

package/dist/esm/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/esm/components/numeric-spinner/useWiggleMotion.js

@@ -0,0 +1 @@
+"use strict";import{Animated as i}from"../../interactions/animated";import{useCallback as t,useRef as r}from"react";import{Easing as a}from"react-native";import{generateHapticFeedback as n}from"../../native/generateHapticFeedback";export function useWiggleMotion(){const e=r(new i.Value(0)).current;return{play:t(()=>{n({type:"wiggle"}),i.sequence([i.timing(e,{toValue:2,duration:87.5,easing:a.linear,useNativeDriver:!1}),i.timing(e,{toValue:-2,duration:87.5,easing:a.linear,useNativeDriver:!1}),i.timing(e,{toValue:1,duration:87.5,easing:a.linear,useNativeDriver:!1}),i.timing(e,{toValue:-1,duration:87.5,easing:a.linear,useNativeDriver:!1}),i.timing(e,{toValue:0,duration:87.5,easing:a.linear,useNativeDriver:!1})]).start()},[e]),style:{transform:[{translateX:e}]}}}

package/dist/esm/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/esm/components/paragraph/Paragraph.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Text as n,View as o}from"react-native";import{ParagraphContext as s}from"./ParagraphContext";function x({children:l,typography:a,afterText:t,...r}){return e(s.Provider,{value:{typography:a},children:i(o,{style:{flexDirection:"row",alignItems:"center",flex:0},children:[e(n,{lineBreakStrategyIOS:"hangul-word",...r,allowFontScaling:!1,style:[{flexShrink:1},r.style],children:l}),t]})})}export{x as Paragraph};

package/dist/esm/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/esm/components/paragraph/ParagraphBadge/ParagraphBadge.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{colors as o}from"@toss-design-system/colors";import{useColorPreference as u,useTypographyTheme as S}from"../../../core";import{Txt as V}from"../../txt";import r from"hex-to-rgba";import{useContext as z,useMemo as x}from"react";import{View as h}from"react-native";import{ParagraphContext as H}from"../ParagraphContext";import{get\uBCF4\uC815Top as B}from"../utils";import{badgeStyleMap as g,isValidFontSize as R}from"./const";function T({children:t,type:d="blue",badgeStyle:c="fill",marginLeft:p=0,marginRight:b=0,typography:f,style:y,fontWeight:s="semiBold"}){u;const{colorPreference:C}=u(),{typography:i}=S(),{typography:m}=z(H),w=`${d}-${c}`,{backgroundColor:L,color:D}=P(w,C),k=f??m,a=x(()=>{const{fontSize:l}=i[k];return R(l)?{...g[l],top:B({targetHeight:g[l].lineHeight+g[l].paddingVertical*2,fontSize:l})}:(console.error(M),{...g[15],top:B({targetHeight:g[15].lineHeight+g[15].paddingVertical*2,fontSize:l})})},[k,i]);return n(h,{style:[{alignSelf:"flex-start"},y],children:n(h,{style:{paddingHorizontal:a.paddingHorizontal,paddingVertical:a.paddingVertical,borderRadius:a.borderRadius,backgroundColor:L,marginLeft:p??a.margin,marginRight:b??a.margin,top:a.top},children:n(V,{fontWeight:s,color:D,style:{fontSize:a.fontSize,lineHeight:a.lineHeight},children:t})})})}const M="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)";export{T as ParagraphBadge};const e={blueBadgeBackgroundLight:r("#3182f6",.16),blueBadgeBackgroundDark:r("#4593fc",.16),tealBadgeBackgroundLight:r("#00818a",.16),tealBadgeBackgroundDark:r("#269da6",.16),greenBadgeBackgroundLight:r("#02a262",.16),greenBadgeBackgroundDark:r("#15c47e",.16),redBadgeBackgroundLight:r("#f44336",.16),redBadgeBackgroundDark:r("#ef5350",.16),yellowBadgeBackgroundLight:r("#ffb331",.16),yellowBadgeBackgroundDark:r("#ffd158",.16),elephantBadgeBackgroundLight:r("#4e5968",.16),elephantBadgeBackgroundDark:r("#c3c3c6",.16)};function P(t,d){return{"red-fill":{light:{backgroundColor:o.red500,color:o.white},dark:{backgroundColor:o.red500,color:o.white}},"red-weak":{light:{backgroundColor:e.redBadgeBackgroundLight,color:o.red700},dark:{backgroundColor:e.redBadgeBackgroundDark,color:o.red400}},"green-fill":{light:{backgroundColor:o.green600,color:o.white},dark:{backgroundColor:o.green600,color:o.white}},"green-weak":{light:{backgroundColor:e.greenBadgeBackgroundLight,color:o.green700},dark:{backgroundColor:e.greenBadgeBackgroundDark,color:o.green400}},"blue-fill":{light:{backgroundColor:o.blue500,color:o.white},dark:{backgroundColor:o.blue500,color:o.white}},"blue-weak":{light:{backgroundColor:e.blueBadgeBackgroundLight,color:o.blue700},dark:{backgroundColor:e.blueBadgeBackgroundDark,color:o.blue400}},"yellow-fill":{light:{backgroundColor:o.yellow500,color:o.grey800},dark:{backgroundColor:o.yellow500,color:o.grey800}},"yellow-weak":{light:{backgroundColor:e.yellowBadgeBackgroundLight,color:o.yellow900},dark:{backgroundColor:e.yellowBadgeBackgroundDark,color:o.yellow700}},"teal-fill":{light:{backgroundColor:o.teal600,color:o.white},dark:{backgroundColor:o.teal600,color:o.white}},"teal-weak":{light:{backgroundColor:e.tealBadgeBackgroundLight,color:o.teal700},dark:{backgroundColor:e.tealBadgeBackgroundDark,color:o.teal400}},"elephant-fill":{light:{backgroundColor:o.grey700,color:o.white},dark:{backgroundColor:o.grey700,color:o.white}},"elephant-weak":{light:{backgroundColor:e.elephantBadgeBackgroundLight,color:o.grey700},dark:{backgroundColor:e.elephantBadgeBackgroundDark,color:o.inverseGrey700}}}[t][d]}

package/dist/esm/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/esm/components/paragraph/ParagraphBadge/const.js

@@ -0,0 +1 @@
+"use strict";function n(i){return i<56&&i>10}const a={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}};export{n as isValidFontSize,a as badgeStyleMap};

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

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

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

@@ -0,0 +1 @@
+"use strict";export{ParagraphBadge}from"./ParagraphBadge";

package/dist/esm/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/esm/components/paragraph/ParagraphCode.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{colors as n}from"@toss-design-system/colors";import{useAdaptive as g,useTypographyTheme as l,useColorPreference as y}from"../../core";import{Txt as h}from"../txt";import{useContext as u,useMemo as f}from"react";import{StyleSheet as x,View as p}from"react-native";import{ParagraphContext as C}from"./ParagraphContext";import{getLineHeightByFontSize as H}from"./ParagraphText";import{get\uBCF4\uC815Top as T}from"./utils";function S({children:r}){const t=g(),{colorPreference:i}=y(),{typography:a}=l(),{typography:c}=u(C),{fontSize:e,lineHeight:m}=a[c],d=f(()=>({fontSize:e,lineHeight:H(e),color:i==="dark"?n.white:n.grey700}),[e,i]);return o(p,{children:o(p,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:B(e),top:T({targetHeight:m+s*2,fontSize:e})},b.code],children:o(h,{fontWeight:"regular",style:d,children:r})})})}const s=1,b=x.create({code:{paddingHorizontal:4,borderWidth:s}}),B=r=>r<19?4:r<23?5:r<29?6:r<41?8:10;export{S as ParagraphCode};

package/dist/esm/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/esm/components/paragraph/ParagraphContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const ParagraphContext=t({typography:"t5"});

package/dist/esm/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/esm/components/paragraph/ParagraphIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{useTypographyTheme as p}from"../../core";import{Icon as a}from"../icon";import{useContext as s,useMemo as h}from"react";import{Platform as y,View as f}from"react-native";import{ParagraphContext as c}from"./ParagraphContext";function g({size:o,typography:e,...m}){const{typography:t}=p(),{typography:r}=s(c),i=h(()=>o??u(t[e??r].fontSize),[o,t,e,r]);return n(f,{style:{width:i,maxHeight:y.OS==="ios"?t[r].lineHeight:t[r].fontSize},children:n(a,{size:i,...m})})}const u=o=>Math.round(1.16*(o-11)+12);export{g as ParagraphIcon};

package/dist/esm/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/esm/components/paragraph/ParagraphLink.js

@@ -0,0 +1 @@
+"use strict";import{jsx as l}from"react/jsx-runtime";import{useAdaptive as m}from"../../core";import{useCallback as s,useContext as u,useState as y}from"react";import{StyleSheet as c}from"react-native";import{ParagraphContext as f}from"./ParagraphContext";import{ParagraphText as h}from"./ParagraphText";function d({color:e,fontWeight:n,...a}){const r=m(),{typography:p}=u(f),[i,t]=y(!1),g=s(()=>t(!0),[]),o=s(()=>t(!1),[]);return l(h,{typography:p,fontWeight:n,color:e??r.grey700,style:[{backgroundColor:i?e??r.grey200:"transparent"},x.link],onResponderGrant:g,onResponderRelease:o,onResponderTerminate:o,suppressHighlighting:!0,...a})}const x=c.create({link:{textDecorationLine:"underline"}});export{d as ParagraphLink};

package/dist/esm/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/esm/components/paragraph/ParagraphText.js

@@ -0,0 +1 @@
+"use strict";import{jsx as f}from"react/jsx-runtime";import{useTypographyTheme as g}from"../../core";import{Txt as s}from"../txt";import{forwardRef as m,useContext as i,useMemo as u}from"react";import{ParagraphContext as x}from"./ParagraphContext";const l=m(function({typography:e,style:a,...p},y){const{typography:t}=g(),{typography:h}=i(x),o=e??h,n=u(()=>({lineHeight:getLineHeightByFontSize(t[o].fontSize),fontSize:t[o].fontSize}),[o,t]);return f(s,{ref:y,style:[n,a],...p})});export const getLineHeightByFontSize=r=>r<16?Math.floor(r*1.5):r<27?Math.floor(r*1.4):r<39?Math.floor(r*1.3):Math.floor(r*1.2);export{l as ParagraphText};

package/dist/esm/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/esm/components/paragraph/index.js

@@ -0,0 +1 @@
+"use strict";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";

package/dist/esm/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/esm/components/paragraph/utils.js

@@ -0,0 +1 @@
+"use strict";export const get\uBCF4\uC815Top=({targetHeight:t,fontSize:e})=>(t-e)/2;

package/dist/esm/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/esm/components/post/Header.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,memo as p,useMemo as u}from"react";import{useAdaptive as H}from"../../core";import{Txt as l}from"../txt";const i=e(function({headerType:t,typography:o,paddingBottom:f=s[t].bottom,children:h,color:d,style:a,...c},g){const m=H(),y=u(()=>({paddingTop:s[t].top,paddingRight:s[t].right,paddingBottom:f,paddingLeft:s[t].left}),[f,t]);return r(l,{role:"heading",ref:g,typography:P[t],fontWeight:"bold",color:d??m.grey700,style:[y,a],...c,children:h})}),s={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}},P={h1:"t2",h2:"t3",h3:"st8",h4:"t5"};export const PostH1=p(e(function(t,o){return r(i,{headerType:"h1",...t,ref:o})})),PostH2=p(e(function(t,o){return r(i,{headerType:"h2",...t,ref:o})})),PostH3=p(e(function(t,o){return r(i,{headerType:"h3",...t,ref:o})})),PostH4=p(e(function(t,o){return r(i,{headerType:"h4",...t,ref:o})}));

package/dist/esm/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/esm/components/post/Hr.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{Border as e}from"../border";export function PostHr({paddingBottom:r=24,style:o}){return t(e,{type:"padding24",style:[{paddingBottom:r},o]})}

package/dist/esm/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/esm/components/post/List/PostLi.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{POST_LI as i}from"../constants";import{usePostList as m}from"./PostListProvider";import{PostOlLi as s}from"./PostOl";import{PostUlLi as f}from"./PostUl";export function PostLi(o){const{listType:r}=m();return r==="ol"?t(s,{...o}):t(f,{...o})}PostLi.displayName=i;

package/dist/esm/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/esm/components/post/List/PostList.js

@@ -0,0 +1 @@
+"use strict";import{jsx as p,Fragment as i}from"react/jsx-runtime";import{Children as f,cloneElement as s,isValidElement as d}from"react";import{View as y}from"react-native";import{PreventFontScaling as u}from"../../../extensions/prevent-font-scaling";import{POST_LI as g,POST_OL as L,POST_UL as P}from"../constants";import{PostListProvider as T}from"./PostListProvider";const l=8;export function PostList({listType:r,typography:e="t5",paddingBottom:t=m[r].bottom,style:o,children:n}){return p(u,{limit:160,children:p(T,{listType:r,typography:e,children:p(y,{style:[{paddingTop:m[r].top,paddingRight:m[r].right,paddingBottom:t,paddingLeft:m[r].left},o],children:r==="ol"?p(_,{children:n}):p(x,{children:n})})})})}function _({children:r}){let e=0,t=0;return p(i,{children:f.toArray(r).filter(d).map(o=>{const n=o.type?.displayName,a=t===0?0:l;return n===g?(e=e+1,t++,s(o,{order:e,...o.props,style:{marginTop:a,...o.props.style}})):n===L?s(o,{...o.props,paddingBottom:o.props?.paddingBottom??0,style:{marginTop:a,...o.props.style}}):o})})}function x({children:r}){let e=0;return p(i,{children:f.toArray(r).filter(d).map(t=>{const o=t.type?.displayName,n=e===0?0:l;return o===P?(e++,s(t,{paddingBottom:t.props?.paddingBottom??0,...t.props,style:{marginTop:n,...t.props.style}})):o===g?(e++,s(t,{...t.props,style:{marginTop:n,...t.props.style}})):t})})}const m={ol:{top:0,right:24,bottom:24,left:16},ul:{top:0,right:24,bottom:24,left:24}};

package/dist/esm/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/esm/components/post/List/PostListProvider.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s}from"react/jsx-runtime";import{createContext as i,useContext as n}from"react";const t=i({listType:"ul"});export function PostListProvider({listType:o,typography:e,children:r}){return s(t.Provider,{value:{listType:o,typography:e},children:r})}export function usePostList(){return n(t)}