@toss/tds-react-native 1.0.0

package/dist/esm/components/agreement/types.js

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

package/dist/esm/components/agreement/useAnimatedRotateValue.d.ts

@@ -0,0 +1,12 @@
+import { Animated } from 'react-native';
+export declare function useAnimatedRotateValue(initialValue: number, { min, max }: {
+    min: number;
+    max: number;
+}): {
+    startAnimation: (toValue: number) => {
+        start: () => Promise<boolean>;
+        stop: () => void;
+        reset: () => void;
+    };
+    rotate: Animated.AnimatedInterpolation<string | number>;
+};

package/dist/esm/components/agreement/useAnimatedRotateValue.js

@@ -0,0 +1 @@
+"use strict";import{spring as c}from"@toss-design-system/easings";import{useCallback as f,useRef as g}from"react";import{Animated as o}from"react-native";export function useAnimatedRotateValue(a,{min:e,max:r}){const t=g(new o.Value(a)).current,i=f(s=>{const n=o.spring(t,{toValue:s,...c.quick,useNativeDriver:!0});return{...n,start:()=>new Promise(m=>{n.start(p=>m(p.finished))})}},[t]),u=t.interpolate({inputRange:[e,r],outputRange:[`${e}deg`,`${r}deg`]});return{startAnimation:i,rotate:u}}

package/dist/esm/components/amount-top/AmountTop.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+export interface AmountTopProps {
+    topPadding?: 0 | 64 | 80;
+    bottomPadding?: 0 | 16 | 24;
+    horizontalPadding?: 0 | 24;
+    subTitle: ReactNode;
+    title: ReactNode;
+    button?: ReactNode;
+}
+declare function AmountTop({ topPadding, bottomPadding, horizontalPadding, subTitle, title, button: originalButton, }: AmountTopProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AmountTop {
+    var SubTitle: (props: {
+        children: string;
+        onPress?: PressableProps["onPress"];
+        underline?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export default AmountTop;

package/dist/esm/components/amount-top/AmountTop.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{cloneElement as h}from"react";import{Pressable as p,View as r}from"react-native";import{useAdaptive as m}from"../../core";import{isReactText as x}from"../../utils";import{Txt as u}from"../txt";function l({topPadding:d=64,bottomPadding:e=0,horizontalPadding:o=24,subTitle:i,title:n,button:s}){const f=m(),c=s!=null?h(s,{size:"medium"}):null;return a(r,{style:{paddingTop:d,paddingBottom:e,paddingHorizontal:o},children:[typeof i=="string"?t(l.SubTitle,{children:i}):i,a(r,{style:{flexDirection:"row",alignItems:"flex-end"},children:[t(r,{style:{flex:1,marginTop:7},accessibilityRole:"header",accessible:!0,children:x(n)?t(u,{typography:"t1",fontWeight:"semiBold",color:f.grey900,children:n}):n}),c!=null&&t(r,{children:c})]})]})}l.SubTitle=function(e){const o=m(),i=e.underline??e.onPress!==void 0,n=t(u,{typography:"st11",color:o.grey800,style:i?{textDecorationLine:"underline"}:void 0,children:e.children});return e.onPress!==void 0?t(p,{onPress:e.onPress,children:n}):n};export default l;

package/dist/esm/components/amount-top/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AmountTop } from './AmountTop';
+export type { AmountTopProps } from './AmountTop';

package/dist/esm/components/amount-top/index.js

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

package/dist/esm/components/asset/Asset.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { AssetUnion, LegacyFrameShape } from './types';
+export interface AssetProps {
+    resource: ReactElement;
+    frame: LegacyFrameShape;
+    union?: AssetUnion;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * @description <Asset.Frame /> 을 사용해주세요.
+ */
+export declare const Asset: ({ resource, frame, union, style }: AssetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/asset/Asset.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useMemo as r}from"react";import{StyleSheet as n,View as s}from"react-native";import{AssetContext as c}from"./blocks/AssetContext";export const Asset=({resource:h,frame:e,union:t,style:l})=>{const d=r(()=>({width:e.width,height:e.height,borderRadius:e.radius,backgroundColor:e.color}),[e]),a=r(()=>t?.type==="overlap"?{shadowColor:t.color,shadowOffset:{width:e?.overlap?.x??0,height:e?.overlap?.y??0},shadowOpacity:1,shadowRadius:e?.overlap?.blur??0}:{},[e,t]);return o(c.Provider,{value:{shape:e},children:o(s,{style:[i.frameContainer,a,l],children:o(s,{style:[d,i.frame],children:h})})})};const i=n.create({frameContainer:{},frame:{overflow:"hidden",justifyContent:"center"}});

package/dist/esm/components/asset/Icon.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { ContentIcon } from './blocks/ContentIcon';
+import { AssetCommonType } from './types';
+type Props = AssetCommonType & ComponentProps<typeof ContentIcon>;
+export declare function Icon({ frameShape, backgroundColor, style, overlap, acc, accPosition, ...iconProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/Icon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{ContentIcon as p}from"./blocks/ContentIcon";import{Frame as s}from"./blocks/Frame";export function Icon({frameShape:r={},backgroundColor:t="transparent",style:n,overlap:a,acc:c,accPosition:e,...m}){return o(s,{shape:r,backgroundColor:t,style:n,overlap:a,acc:c,accPosition:e,content:o(p,{...m})})}

package/dist/esm/components/asset/Image.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { ContentImage } from './blocks/ContentImage';
+import { AssetCommonType } from './types';
+type Props = AssetCommonType & ComponentProps<typeof ContentImage>;
+export declare function Image({ frameShape, backgroundColor, style, overlap, acc, accPosition, ...imageProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/Image.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{ContentImage as p}from"./blocks/ContentImage";import{Frame as s}from"./blocks/Frame";export function Image({frameShape:r={},backgroundColor:t="transparent",style:a,overlap:e,acc:n,accPosition:m,...c}){return o(s,{shape:r,backgroundColor:t,style:a,overlap:e,acc:n,accPosition:m,content:o(p,{...c})})}

package/dist/esm/components/asset/Lottie.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { ContentLottie } from './blocks/ContentLottie';
+import { AssetCommonType } from './types';
+type Props = AssetCommonType & ComponentProps<typeof ContentLottie>;
+export declare function Lottie({ frameShape, backgroundColor, style, overlap, acc, accPosition, ...lottieProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/Lottie.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{ContentLottie as m}from"./blocks/ContentLottie";import{Frame as p}from"./blocks/Frame";export function Lottie({frameShape:t={},backgroundColor:r="transparent",style:e,overlap:n,acc:a,accPosition:i,...c}){return o(p,{shape:t,backgroundColor:r,style:e,overlap:n,acc:a,accPosition:i,content:o(m,{...c})})}

package/dist/esm/components/asset/Resource/ResourceText.d.ts

@@ -0,0 +1,7 @@
+import { TxtProps } from '../../txt';
+type Size = 24 | 19 | 17 | 15 | 13 | 11;
+interface ResourceTextProps extends TxtProps {
+    size: Size;
+}
+export declare function ResourceText({ children, color, size, style, ...restProps }: ResourceTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/Resource/ResourceText.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Txt as i}from"../../txt";export function ResourceText({children:t,color:o,size:e,style:r,...s}){return n(i,{fontWeight:"bold",typography:c[e],color:o,style:[{textAlign:"center"},r],...s,children:t})}const c={24:"st5",19:"st8",17:"t5",15:"t6",13:"t7",11:"st13"};

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { Frame } from './blocks/Frame';
+import { ResourceText } from './Resource/ResourceText';
+import { AssetCommonType } from './types';
+type TextProps = ComponentProps<typeof ResourceText>;
+type FrameProps = ComponentProps<typeof Frame>;
+type BaseProps = TextProps & AssetCommonType;
+type Props = BaseProps & {
+    frameShape: FrameProps['shape'];
+};
+export declare function Text({ frameShape, backgroundColor, color, size, children, ...frameProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/Text.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Frame as a}from"./blocks/Frame";import{ResourceText as c}from"./Resource/ResourceText";export function Text({frameShape:o,backgroundColor:e="transparent",color:t,size:n,children:m,...s}){return r(a,{...s,shape:o,backgroundColor:e,content:r(c,{size:n,color:t,children:m})})}

package/dist/esm/components/asset/blocks/AssetContext.d.ts

@@ -0,0 +1,5 @@
+import type { FrameShapeType } from '../types';
+export interface AssetContext {
+    shape: FrameShapeType;
+}
+export declare const AssetContext: import("react").Context<AssetContext>;

package/dist/esm/components/asset/blocks/AssetContext.js

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

package/dist/esm/components/asset/blocks/ContentIcon.d.ts

@@ -0,0 +1,8 @@
+import { IconProps } from '../../icon';
+import { AssetResourceScale, AssetResourceScaleType } from '../types';
+interface IconResourceProps extends Pick<IconProps, 'name' | 'color' | 'accessibilityLabel' | 'style'> {
+    scale?: AssetResourceScale;
+    scaleType?: AssetResourceScaleType;
+}
+export declare function ContentIcon({ name, color, scale, accessibilityLabel, scaleType, style, }: IconResourceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/blocks/ContentIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Icon as f}from"../../icon";import{useContext as p,useMemo as u}from"react";import{View as x}from"react-native";import{AssetContext as l}from"./AssetContext";export function ContentIcon({name:i,color:s,scale:m=1,accessibilityLabel:a,scaleType:n="fit",style:c}){const{shape:t}=p(l),h=u(()=>{const e=t?.width??0,o=t?.height??0;if(Math.max(e,o)!==0)return n==="crop"?Math.max(e,o):Math.min(e,o)},[t,n]);return r(x,{style:{alignItems:"center"},children:r(f,{name:i,color:s,size:h,accessibilityLabel:a,style:[{transform:[{scale:m}]},c]})})}

package/dist/esm/components/asset/blocks/ContentImage.d.ts

@@ -0,0 +1,10 @@
+import { Image } from '@granite-js/react-native';
+import { ComponentProps } from 'react';
+import { AssetResourceScale, AssetResourceScaleType } from '../types';
+type ImageProps = ComponentProps<typeof Image>;
+interface ImageResourceProps extends Pick<ImageProps, 'source' | 'accessibilityLabel' | 'style'> {
+    scale?: AssetResourceScale;
+    scaleType?: AssetResourceScaleType;
+}
+export declare function ContentImage({ source, scale, scaleType, accessibilityLabel, style }: ImageResourceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/blocks/ContentImage.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Image as a}from"@granite-js/react-native";export function ContentImage({source:i,scale:r=1,scaleType:o="fit",accessibilityLabel:t,style:e}){return n(a,{source:i,style:[{width:void 0,height:void 0,flex:1,transform:[{scale:r}]},...Array.isArray(e)?e:[e]],resizeMode:s[o],accessibilityRole:"image",accessibilityLabel:t})}const s={crop:"cover",fit:"contain"};

package/dist/esm/components/asset/blocks/ContentLottie.d.ts

@@ -0,0 +1,10 @@
+import { Lottie } from '@granite-js/react-native';
+import { ComponentProps } from 'react';
+import { AssetResourceScale, AssetResourceScaleType } from '../types';
+type LottieProps = Omit<ComponentProps<typeof Lottie>, 'height' | 'resizeMode' | 'autoSize'>;
+interface Props extends LottieProps {
+    scale?: AssetResourceScale;
+    scaleType?: AssetResourceScaleType;
+}
+export declare function ContentLottie({ scale, scaleType, style, ...lottieProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/asset/blocks/ContentLottie.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Lottie as n}from"@granite-js/react-native";export function ContentLottie({scale:t=1,scaleType:o="fit",style:e,...i}){return r(n,{width:"100%",height:"100%",style:[{position:"absolute",flex:1,transform:[{scale:t}]},e],resizeMode:o==="fit"?"contain":"cover",...i})}

package/dist/esm/components/asset/blocks/Frame.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { View, ViewProps } from 'react-native';
+import { FrameAccPositionType, FrameShapeType } from '../types';
+interface Props extends ViewProps {
+    content: ReactNode;
+    shape: FrameShapeType;
+    backgroundColor?: string;
+    acc?: ReactNode;
+    accPosition?: FrameAccPositionType;
+    /**
+     * @TODO Android 에서 boxShadow 구현 필요
+     */
+    overlap?: {
+        color: string;
+    } | null;
+    color?: string;
+}
+export declare const Frame: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>;
+export {};

package/dist/esm/components/asset/blocks/Frame.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as k}from"react/jsx-runtime";import{colors as A}from"@toss-design-system/colors";import{useAdaptive as F}from"../../../core";import{forwardRef as O,useMemo as c}from"react";import{StyleSheet as _,View as n}from"react-native";import{AssetContext as B}from"./AssetContext";export const Frame=O(function({shape:t={},content:y,backgroundColor:b,overlap:e,accPosition:o="bottom-right",acc:i,color:L,style:x,...v},j){const C=F(),d=b??C.grey100,S=c(()=>({width:t.width,height:t.height,borderRadius:t.radius,backgroundColor:d}),[d,t]),R=c(()=>e==null?{}:{shadowOffset:{width:t?.overlap?.x??0,height:t?.overlap?.y??0},shadowOpacity:1,shadowRadius:t?.overlap?.blur??0,shadowColor:e?.color??A.blue500},[e,t]),l=t.acc?.x??0,s=t.acc?.y??0,u=t.acc?.width??0,f=t.acc?.height??0,a=o?.includes("top")?s:void 0,m=o?.includes("right")?l:void 0,h=o?.includes("bottom")?s:void 0,g=o?.includes("left")?l:void 0,p=c(()=>({top:a,right:m,bottom:h,left:g,width:u,height:f}),[h,f,g,m,a,u]);return r(B.Provider,{value:{shape:t},children:k(n,{ref:j,style:[R,x],...v,children:[r(n,{style:[w.frame,S],children:y}),i!=null?r(n,{style:[w.acc,p],children:i}):void 0]})})});const w=_.create({frame:{justifyContent:"center",overflow:"hidden"},acc:{position:"absolute"}});

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

@@ -0,0 +1,22 @@
+import { Frame } from './blocks/Frame';
+import { ContentIcon } from './blocks/ContentIcon';
+import { ContentImage } from './blocks/ContentImage';
+import { ContentLottie } from './blocks/ContentLottie';
+import { Icon } from './Icon';
+import { Image } from './Image';
+import { Lottie } from './Lottie';
+import { Text } from './Text';
+import { frameShape } from './presets/frameShape';
+interface CompoundComposition {
+    Frame: typeof Frame;
+    ContentIcon: typeof ContentIcon;
+    ContentImage: typeof ContentImage;
+    ContentLottie: typeof ContentLottie;
+    Icon: typeof Icon;
+    Image: typeof Image;
+    Lottie: typeof Lottie;
+    Text: typeof Text;
+    frameShape: typeof frameShape;
+}
+export declare const Asset: (({ resource, frame, union, style }: import("./Asset").AssetProps) => import("react/jsx-runtime").JSX.Element) & CompoundComposition;
+export { frameShape } from './presets/frameShape';

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

@@ -0,0 +1 @@
+"use strict";import{Asset as o}from"./Asset";import{Frame as t}from"./blocks/Frame";import{ContentIcon as m}from"./blocks/ContentIcon";import{ContentImage as r}from"./blocks/ContentImage";import{ContentLottie as e}from"./blocks/ContentLottie";import{Icon as p}from"./Icon";import{Image as f}from"./Image";import{Lottie as i}from"./Lottie";import{Text as n}from"./Text";import{frameShape as s}from"./presets/frameShape";export const Asset=Object.assign(o,{Frame:t,ContentIcon:m,ContentImage:r,ContentLottie:e,Icon:p,Image:f,Lottie:i,Text:n,frameShape:s});export{frameShape}from"./presets/frameShape";

package/dist/esm/components/asset/presets/accPosition.d.ts

@@ -0,0 +1,6 @@
+export declare const accPosition: {
+    readonly TopLeft: "top-left";
+    readonly TopRight: "top-right";
+    readonly BottomLeft: "bottom-left";
+    readonly BottomRight: "bottom-right";
+};

package/dist/esm/components/asset/presets/accPosition.js

@@ -0,0 +1 @@
+"use strict";export const accPosition={TopLeft:"top-left",TopRight:"top-right",BottomLeft:"bottom-left",BottomRight:"bottom-right"};

package/dist/esm/components/asset/presets/frameShape.d.ts

@@ -0,0 +1,2 @@
+import type { FrameShapeKeys, FrameShapeType } from '../types';
+export declare const frameShape: Record<FrameShapeKeys, FrameShapeType>;

package/dist/esm/components/asset/presets/frameShape.js

@@ -0,0 +1 @@
+"use strict";export const frameShape={SquareLarge:{width:60,height:60,radius:12,acc:{width:20,height:20,x:-5,y:-5},overlap:{x:7,y:7,blur:0,spread:-1}},SquareMedium:{width:52,height:52,radius:12,acc:{width:16,height:16,x:-4,y:-4},overlap:{x:6,y:6,blur:0,spread:-1}},SquareSmall:{width:40,height:40,radius:10,acc:{width:14,height:14,x:-3,y:-3},overlap:{x:5,y:5,blur:0,spread:-1}},RectangleLarge:{width:100,height:68,radius:10,acc:{width:22,height:22,x:-5,y:-5},overlap:{x:7,y:7,blur:0,spread:-1}},RectangleMedium:{width:80,height:54,radius:10,acc:{width:20,height:20,x:-5,y:-5},overlap:{x:6,y:6,blur:0,spread:-1}},CardLarge:{width:40,height:64,radius:6,acc:{width:18,height:18,x:-4,y:-4},overlap:{x:6,y:6,blur:0,spread:-1}},CardMedium:{width:32,height:50,radius:4,acc:{width:16,height:16,x:-3,y:-3},overlap:{x:5,y:5,blur:0,spread:-1}},CardSmall:{width:28,height:44,radius:3,acc:{width:16,height:16,x:-3,y:-3},overlap:{x:5,y:5,blur:0,spread:-1}},CircleLarge:{width:60,height:60,radius:9999,acc:{width:20,height:20,x:-2,y:-2},overlap:{x:6,y:8,blur:0,spread:-1}},CircleMedium:{width:40,height:40,radius:9999,acc:{width:16,height:16,x:-2,y:-2},overlap:{x:5,y:7,blur:0,spread:-1}},CircleSmall:{width:32,height:32,radius:9999,acc:{width:14,height:14,x:-2,y:-2},overlap:{x:4,y:6,blur:0,spread:-1}},CleanH20:{width:20,height:20},CleanH24:{width:24,height:24},CleanH28:{width:28,height:28},CleanW20:{width:20,height:20},CleanW24:{width:24,height:24},CleanW32:{width:32,height:32},CleanW40:{width:40,height:40},CleanW60:{width:60,height:60},CleanW80:{width:80,height:80},CleanW120:{width:120,height:120},CleanW200:{width:200,height:200}};

package/dist/esm/components/asset/types.d.ts

@@ -0,0 +1,62 @@
+import { DimensionValue, ViewProps } from 'react-native';
+/**
+ * AssetFrame
+ */
+export type FrameOverlapShape = {
+    x?: number;
+    y?: number;
+    blur?: number;
+};
+export type LegacyFrameShape = {
+    width?: number;
+    height?: number;
+    radius?: number;
+    color?: string;
+    overlap?: FrameOverlapShape;
+};
+/**
+ * AssetResource
+ */
+export type AssetResourceScale = number;
+export type AssetResourceScaleType = 'crop' | 'fit';
+/**
+ * AssetUnion
+ */
+interface AssetOverlapUnion {
+    type: 'overlap';
+    color: string;
+}
+export type AssetUnion = AssetOverlapUnion;
+export type ScaleType = 'fit' | 'crop';
+export type FrameAccShapeType = {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    x?: DimensionValue;
+    y?: DimensionValue;
+};
+export type FrameOverlapShapeType = {
+    x?: number;
+    y?: number;
+    blur?: number;
+    spread?: string | number;
+};
+export type FrameShapeType = {
+    width?: number;
+    height?: number;
+    radius?: number;
+    acc?: FrameAccShapeType;
+    overlap?: FrameOverlapShapeType;
+};
+export type FrameShapeKeys = 'SquareLarge' | 'SquareMedium' | 'SquareSmall' | 'RectangleLarge' | 'RectangleMedium' | 'CardLarge' | 'CardMedium' | 'CardSmall' | 'CircleLarge' | 'CircleMedium' | 'CircleSmall' | 'CleanH20' | 'CleanH24' | 'CleanH28' | 'CleanW20' | 'CleanW24' | 'CleanW32' | 'CleanW40' | 'CleanW60' | 'CleanW80' | 'CleanW120' | 'CleanW200';
+export type AssetCommonType = {
+    frameShape?: FrameShapeType;
+    backgroundColor?: string;
+    style?: ViewProps['style'];
+    acc?: React.ReactNode;
+    accPosition?: FrameAccPositionType;
+    overlap?: {
+        color: string;
+    } | null;
+};
+export type FrameAccPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export {};

package/dist/esm/components/asset/types.js

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

package/dist/esm/components/badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import type { ParagraphBadgeProps } from '../paragraph';
+import { TypographyKeys } from '../txt';
+type Size = 'large' | 'medium' | 'small' | 'tiny';
+export interface BadgeProps extends Omit<ParagraphBadgeProps, 'typography'> {
+    /**
+     * `Badge` 컴포넌트의 크기를 지정해요.
+     * @default 'small'
+     */
+    size?: Size;
+}
+declare function Badge({ size, fontWeight: fontWeightProp, ...restProps }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const sizeVariant: Record<Size, TypographyKeys>;
+export default Badge;

package/dist/esm/components/badge/Badge.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Badge as i}from"../paragraph";function n({size:t="small",fontWeight:a,...o}){const e=a??t==="tiny"?"semibold":"bold";return r(i,{typography:sizeVariant[t],fontWeight:e,...o})}export const sizeVariant={tiny:"t5",small:"t3",medium:"t2",large:"t1"};export default n;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';

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

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

package/dist/esm/components/board-row/BoardRow.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface BoardRowProps {
+    /**
+     * `BoardRow` 컴포넌트의 헤더 영역에 표시될 제목이에요.
+     */
+    title: string;
+    /**
+     * `BoardRow` 컴포넌트 헤더 영역의 `title` 앞에 표시할 아이콘이에요.
+     * 주로 `BoardRow.QIcon` 컴포넌트를 사용해요.
+     */
+    icon?: ReactNode;
+    /**
+     * `BoardRow` 컴포넌트의 콘텐츠 영역에 표시될 내용이에요.
+     * 주로 `Txt` 혹은 `Post` 컴포넌트로 감싼 요소를 사용해요.
+     */
+    contents?: ReactNode;
+}
+declare function BoardRow({ title, icon, contents }: BoardRowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BoardRow {
+    var QuestionIcon: () => import("react/jsx-runtime").JSX.Element;
+    var QIcon: () => import("react/jsx-runtime").JSX.Element;
+}
+export default BoardRow;

package/dist/esm/components/board-row/BoardRow.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as i}from"react/jsx-runtime";import{colors as l}from"@toss-design-system/colors";import{useState as m}from"react";import{Pressable as u,View as t}from"react-native";import{useAdaptive as f}from"../../core";import{Border as y}from"../border";import{Icon as s}from"../icon";import{Txt as a}from"../txt";function n({title:d,icon:c,contents:g}){const[e,p]=m(!1),r=f();return i(t,{style:{flexDirection:"column"},children:[i(u,{accessibilityRole:"button",accessibilityState:{expanded:e},onPress:()=>{p(!e)},style:{paddingLeft:24,paddingTop:16,paddingBottom:15,paddingRight:16,flexDirection:"row"},children:[c,o(a,{fontWeight:"regular",color:e?l.blue500:r.grey700,typography:"t5",children:d}),o(t,{style:{flex:1}}),o(s,{name:"icn-arrow-rightwards",color:r.grey400,size:24,style:{transform:[{rotate:e?"90deg":"0deg"}]}})]}),e?null:o(y,{type:"padding24",style:{backgroundColor:r.grey200}}),e?o(t,{children:o(t,{style:{paddingHorizontal:24,paddingVertical:16,backgroundColor:r.greyBackground},children:g})}):null]})}n.QuestionIcon=h,n.QIcon=x;function h(){return o(t,{style:{paddingRight:16},children:o(s,{name:"icon-question-gray-fill",size:24})})}function x(){return o(a,{style:{fontSize:19,color:l.blue500,marginRight:8,lineHeight:23},children:"Q"})}export default n;

package/dist/esm/components/board-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BoardRow } from './BoardRow';
+export type { BoardRowProps } from './BoardRow';

package/dist/esm/components/board-row/index.js

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

package/dist/esm/components/border/Border.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { View } from 'react-native';
+export type BorderType = 'full' | 'padding24' | 'height16';
+interface BaseProps {
+    type?: BorderType;
+    height?: number | undefined;
+}
+interface HairlineProps extends BaseProps {
+    type: 'full' | 'padding24';
+    height?: undefined;
+}
+interface SpaceProps extends BaseProps {
+    type: 'height16';
+    height?: number;
+}
+type Props = (HairlineProps | SpaceProps) & ComponentProps<typeof View>;
+declare function Border({ type, style, height, ...restProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default Border;

package/dist/esm/components/border/Border.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i}from"react/jsx-runtime";import{useAdaptive as d}from"../../core";import{StyleSheet as l,View as e}from"react-native";function h({type:t="full",style:r,height:n,...o}){const a=d();return t==="full"?i(e,{style:[{width:"100%",height:l.hairlineWidth,backgroundColor:a.greyOpacity300},r],...o}):t==="padding24"?i(e,{style:[{paddingLeft:24},r],...o,children:i(u,{})}):i(e,{style:[{width:"100%",height:n??16,backgroundColor:a.greyBackground}],...o})}function u({style:t,...r}){const n=d();return i(e,{style:[{height:l.hairlineWidth,backgroundColor:n.greyOpacity300},t],...r})}export default h;

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

@@ -0,0 +1,2 @@
+export { default as Border } from './Border';
+export type { BorderType } from './Border';

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

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

package/dist/esm/components/bottom-cta/AccessoryText.d.ts

@@ -0,0 +1,2 @@
+import { TxtProps } from '../txt';
+export declare function AccessoryText(props: TxtProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/bottom-cta/AccessoryText.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as e}from"../../core";import{Txt as p}from"../txt";export function AccessoryText(o){const r=e();return t(p,{typography:"t6",color:r.grey600,...o})}

package/dist/esm/components/bottom-cta/BottomCTA.d.ts

@@ -0,0 +1,7 @@
+import BottomCTADouble from './BottomCTADouble';
+import BottomCTASingle from './BottomCTASingle';
+export declare const BottomCTA: {
+    Single: typeof BottomCTASingle;
+    Double: typeof BottomCTADouble;
+};
+export { BottomCTAGradient as BottomCTAGradient } from './BottomCTAGradient';

package/dist/esm/components/bottom-cta/BottomCTA.js

@@ -0,0 +1 @@
+"use strict";import o from"./BottomCTADouble";import t from"./BottomCTASingle";export const BottomCTA={Single:t,Double:o};export{BottomCTAGradient}from"./BottomCTAGradient";

package/dist/esm/components/bottom-cta/BottomCTADouble.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { CommonProps } from './types';
+type DoubleProps = {
+    leftButton: ReactElement;
+    rightButton: ReactElement;
+};
+export type BottomCTADoubleProps = CommonProps & DoubleProps;
+/**
+ *
+ * @example
+ * <BottomCTA.Double
+ *   leftButton={<Button>버튼</Button>}
+ *   rightButton={<Button>버튼</Button>}
+ * />
+ */
+declare function BottomCTADouble({ gradient: _gradient, topAccessory, bottomAccessory, containerStyle, keyboardStyleEnabled, ...props }: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export default BottomCTADouble;

package/dist/esm/components/bottom-cta/BottomCTADouble.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useAdaptive as B}from"../../core";import{isReactText as s}from"../../utils";import{useMemo as g}from"react";import{StyleSheet as C,View as t}from"react-native";import{AccessoryText as c}from"./AccessoryText";import{BottomCTAGradient as T}from"./BottomCTAGradient";import{useBottomCTAContainerStyle as b}from"./useBottomCTAContainerStyle";function j({gradient:o,topAccessory:n,bottomAccessory:i,containerStyle:f,keyboardStyleEnabled:p=!1,...l}){const a=B(),m=b({type:"double",keyboardStyleEnabled:p}),y=g(()=>e(T,{stopColor:a.layeredBackground}),[a.layeredBackground]),h=o!==null,x=o??y;return d(t,{style:[f,r.containerStyle,m],children:[h?x:null,n&&e(t,{style:r.topAccessory,children:s(n)?e(c,{children:n}):n}),d(t,{style:r.double,children:[e(u,{children:l.leftButton}),e(u,{children:l.rightButton})]}),i&&e(t,{style:r.bottomAccessory,children:s(i)?e(c,{children:i}):i})]})}function u(o){return e(t,{style:r.doubleButtonWrapper,children:o.children})}const r=C.create({containerStyle:{overflow:"hidden"},topAccessory:{marginBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessory:{marginTop:16,display:"flex",flexDirection:"row",justifyContent:"center"},double:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonWrapper:{minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});export default j;

package/dist/esm/components/bottom-cta/BottomCTAGradient.d.ts

@@ -0,0 +1,7 @@
+export declare function BottomCTAGradient({ stopColor }: {
+    stopColor: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomCTAGradient {
+    var TopMargin: () => import("react/jsx-runtime").JSX.Element;
+    var HEIGHT: number;
+}

package/dist/esm/components/bottom-cta/BottomCTAGradient.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as n}from"react/jsx-runtime";import s,{Defs as a,LinearGradient as f,Rect as p,Stop as e}from"@granite-js/native/react-native-svg";import{View as c}from"react-native";export function BottomCTAGradient({stopColor:r}){return n(s,{height:o,pointerEvents:"none",style:{transform:[{scaleX:1.5}]},children:[t(a,{children:n(f,{id:i,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[t(e,{offset:0,stopColor:r,stopOpacity:0}),t(e,{offset:.75,stopColor:r})]})}),t(p,{x:"0",y:"0",width:"100%",height:o,fill:`url(#${i})`})]})}function l(){return t(c,{style:{marginTop:-(o-1)}})}const i="tds-rn-bottom-cta-gradient",o=37;BottomCTAGradient.TopMargin=l,BottomCTAGradient.HEIGHT=o;

package/dist/esm/components/bottom-cta/BottomCTASingle.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { Button } from '../button';
+import { CommonProps } from './types';
+type ButtonProps = ComponentProps<typeof Button>;
+export type BottomCTASingleProps = CommonProps & ButtonProps;
+/**
+ *
+ * @example
+ * <BottomCTA.Single
+ *    type="dark"
+ *    style="weak"
+ *    onPress={() => {
+ *      // ...
+ *    }}
+ *  확인
+ * </BottomCTA.Single>
+ */
+declare function BottomCTASingle({ gradient: _gradient, topAccessory, bottomAccessory, containerStyle, keyboardStyleEnabled, display: displayFromProps, ...props }: BottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+export default BottomCTASingle;

package/dist/esm/components/bottom-cta/BottomCTASingle.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useMemo as B}from"react";import{StyleSheet as C,View as r}from"react-native";import{useAdaptive as k}from"../../core";import{isReactText as c,KeyboardStatusLevel as j,useKeyboardStatusLevel as w}from"../../utils";import{Button as T}from"../button";import{containerStylesBySize as v}from"../button/Button";import{AccessoryText as u}from"./AccessoryText";import{BottomCTAGradient as R}from"./BottomCTAGradient";import{useBottomCTAContainerStyle as W}from"./useBottomCTAContainerStyle";function z({gradient:l,topAccessory:e,bottomAccessory:o,containerStyle:m,keyboardStyleEnabled:s=!1,display:y="block",...a}){const i=k(),f=B(()=>t(R,{stopColor:i.layeredBackground}),[i.layeredBackground]),p=l!==null,S=l??f,b=w()>=j.WillShow,d=s?b?"full":"block":y,h=W({type:"single",keyboardStyleEnabled:s}),g=d==="block"?v.big.borderRadius:0;return x(r,{style:[n.containerStyle,h,m],children:[p?S:null,e&&t(r,{style:n.topAccessory,children:c(e)?t(u,{children:e}):e}),t(r,{style:a.disabled&&{backgroundColor:i.background,borderRadius:g},children:t(T,{display:d,size:"big",...a})}),o&&t(r,{style:n.bottomAccessory,children:c(o)?t(u,{children:o}):o})]})}const n=C.create({containerStyle:{overflow:"hidden"},topAccessory:{marginBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessory:{marginTop:16,display:"flex",flexDirection:"row",justifyContent:"center"}});export default z;

package/dist/esm/components/bottom-cta/constants.d.ts

@@ -0,0 +1,2 @@
+/** @description iOS 의 노치디자인 하단 SafeArea 값 */
+export declare const IOS_NOTCH_SAFE_AREA_BOTTOM = 34;

package/dist/esm/components/bottom-cta/constants.js

@@ -0,0 +1 @@
+"use strict";export const IOS_NOTCH_SAFE_AREA_BOTTOM=34;

package/dist/esm/components/bottom-cta/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BottomCTA';
+export type { BottomCTADoubleProps } from './BottomCTADouble';
+export { BottomCTAGradient } from './BottomCTAGradient';
+export type { BottomCTASingleProps } from './BottomCTASingle';
+export * from './useBottomCTAContainerStyle';

package/dist/esm/components/bottom-cta/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./BottomCTA";export{BottomCTAGradient}from"./BottomCTAGradient";export*from"./useBottomCTAContainerStyle";

package/dist/esm/components/bottom-cta/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type CommonProps = {
+    topAccessory?: ReactNode;
+    bottomAccessory?: ReactNode;
+    /**
+     * @description BottomCTA 의 gradient 를 지정합니다. null 을 주면 gradient 를 없앱니다.
+     * @default `<BottomCTAGradient stopColor={adaptive.layeredBackground} />`
+     */
+    gradient?: ReactNode;
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * @default false;
+     * @description 키보드가 올라왔을 때 스타일을 변경할 것인지 여부
+     */
+    keyboardStyleEnabled?: boolean;
+};

package/dist/esm/components/bottom-cta/types.js

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

package/dist/esm/components/bottom-cta/useBottomCTAContainerStyle.d.ts

@@ -0,0 +1,11 @@
+import { ViewStyle } from 'react-native';
+interface Props {
+    type: 'single' | 'double';
+    keyboardStyleEnabled: boolean;
+}
+/**
+ * @name useBottomCTAContainerStyle
+ * @description BottomCTA 의 하단 스타일
+ */
+export declare function useBottomCTAContainerStyle({ type, keyboardStyleEnabled }: Props): ViewStyle;
+export {};

package/dist/esm/components/bottom-cta/useBottomCTAContainerStyle.js

@@ -0,0 +1 @@
+"use strict";import{KeyboardStatusLevel as n,useKeyboardStatusLevel as i,useSafeAreaBottom as r}from"../../utils";export function useBottomCTAContainerStyle({type:t="single",keyboardStyleEnabled:o=!1}){const e=r()??0,a=i()>=n.WillShow;return o&&a?t==="single"?{paddingHorizontal:0,paddingBottom:0}:{paddingHorizontal:20,paddingBottom:18}:{paddingHorizontal:20,paddingBottom:Math.max(e,18)}}

package/dist/esm/components/bottom-info/BottomInfo.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface BottomInfoProps {
+    children?: ReactNode | ReactNode[];
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ *
+ * @example
+ *
+ * // with Post
+ * <BottomInfo>
+ *   <PostUl horizontalPadding={0}>
+ *     <PostUl.Li size="small" indent={0} marginBottom={8}>
+ *       리스트
+ *     </PostUl.Li>
+ *     <PostUl.Li size="small" indent={0} marginBottom={0}>
+ *       리스트
+ *     </PostUl.Li>
+ *   </PostUl>
+ * </BottomInfo>
+ */
+declare function BottomInfo({ children, style }: BottomInfoProps): import("react/jsx-runtime").JSX.Element;
+export default BottomInfo;

package/dist/esm/components/bottom-info/BottomInfo.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Children as i}from"react";import{StyleSheet as m,View as a}from"react-native";import{useAdaptive as p}from"../../core";import{isReactText as s}from"../../utils";import{Txt as c}from"../txt";function f({children:r,style:e}){const n=p();return o(a,{style:[{backgroundColor:n.greyBackground},d.container,e],children:i.map(r,t=>s(t)?o(c,{children:t}):t)})}const d=m.create({container:{padding:24}});export default f;

package/dist/esm/components/bottom-info/index.d.ts

@@ -0,0 +1 @@
+export { default as BottomInfo } from './BottomInfo';