@toss/tds-react-native 1.0.0

package/dist/cjs/components/agreement/AgreementButton.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxProps } from '../checkbox';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface AgreementButtonProps extends Pick<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function AgreementButton({ children, style, checked: _checked, defaultChecked, onCheckedChange, }: AgreementButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/agreement/AgreementButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AgreementButton=AgreementButton;const jsx_runtime_1=require("react/jsx-runtime"),checkbox_1=require("../checkbox"),core_1=require("../../core"),txt_1=require("../txt"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),const_1=require("./const");function AgreementButton({children:c,style:o,checked:i,defaultChecked:a=!1,onCheckedChange:t}){const e=(0,core_1.useAdaptive)(),[l,r]=(0,react_1.useState)(!1),[u,s]=(0,utils_1.useControlled)({controlledValue:i,defaultValue:a}),d=(0,react_1.useCallback)(n=>{t?.(n),s(n)},[t,s]);return(0,jsx_runtime_1.jsx)(checkbox_1.Checkbox.Line,{checked:u,size:24,style:[{backgroundColor:l?e.opacity200:e.grey100,...styles.pressableContainer},o],onCheckedChange:d,onPressIn:()=>r(!0),onPressOut:()=>r(!1),children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"st8",fontWeight:"semiBold",color:e.grey800,style:styles.txt,children:c})})}const styles=react_native_1.StyleSheet.create({pressableContainer:{borderRadius:16,paddingLeft:const_1.PADDING_LEFT,paddingRight:const_1.PADDING_RIGHT,paddingVertical:16,marginHorizontal:20,marginVertical:10},txt:{marginLeft:8}});

package/dist/cjs/components/agreement/AgreementDescription.d.ts

@@ -0,0 +1,7 @@
+import { TxtProps } from '../txt';
+import { Indent } from './types';
+interface AgreementDescriptionProps extends Pick<TxtProps, 'children' | 'style'> {
+    indent: Indent;
+}
+export declare function AgreementDescription({ children, indent, style, ...props }: AgreementDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/agreement/AgreementDescription.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AgreementDescription=AgreementDescription;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),react_native_1=require("react-native"),const_1=require("./const");function AgreementDescription({children:e,indent:t,style:r,...n}){const i=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t7",color:i.grey500,style:[{paddingLeft:const_1.PADDING_LEFT+const_1.INDENT_WIDTH*t},styles.txt,r],...n,children:e})}const styles=react_native_1.StyleSheet.create({txt:{paddingRight:const_1.PADDING_RIGHT,paddingVertical:6}});

package/dist/cjs/components/agreement/AgreementField.d.ts

@@ -0,0 +1,36 @@
+import { CheckboxProps } from '../checkbox';
+import { ComponentProps, ReactNode } from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import BaseAgreementField, { BaseAgreementFieldProps } from './BaseAgreementField';
+type AgreementFieldType = 'big-bold' | 'medium-bold' | 'medium-regular';
+interface AgreementFieldProps extends Pick<BaseAgreementFieldProps, 'indent' | 'withBorder'> {
+    children?: ReactNode;
+    type: AgreementFieldType;
+    addonText?: ReactNode;
+    arrow?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @description 모든 터치영역 클릭 이벤트
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * @description Link, Collapse Area 터치영역 클릭 이벤트
+     */
+    onActionPress?: PressableProps['onPress'];
+}
+declare function AgreementField({ children, type, addonText, arrow, indent, withBorder, style, onPress, onActionPress, }: AgreementFieldProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AgreementField {
+    var AddonText: ({ color, style, ...props }: Omit<import("../txt").TxtProps, "typography">) => import("react/jsx-runtime").JSX.Element;
+    var Arrow: ({ color, type, open, style, }: {
+        color?: string | undefined;
+        style?: StyleProp<ViewStyle>;
+        open?: boolean;
+        type?: "link" | "collapsible";
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export interface CheckboxAgreementFieldProps extends AgreementFieldProps, Pick<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
+}
+declare function CheckboxAgreementField({ children, checked: _checked, defaultChecked, type, addonText, arrow, indent, withBorder, style, onCheckedChange, onPress, onActionPress, }: CheckboxAgreementFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const marginTopMap: Record<AgreementFieldType, number>;
+export declare const contentTextPropsMap: Record<AgreementFieldType, Pick<ComponentProps<typeof BaseAgreementField.ContentText>, 'size' | 'fontWeight'>>;
+export { CheckboxAgreementField, AgreementField };

package/dist/cjs/components/agreement/AgreementField.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.contentTextPropsMap=exports.marginTopMap=void 0,exports.CheckboxAgreementField=CheckboxAgreementField,exports.AgreementField=AgreementField;const jsx_runtime_1=require("react/jsx-runtime"),checkbox_1=require("../checkbox"),pressable_effect_1=require("../../interactions/pressable-effect"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),BaseAgreementField_1=__importDefault(require("./BaseAgreementField"));function AgreementField({children:e,type:s,addonText:o,arrow:t,indent:r,withBorder:a,style:x,onPress:i,onActionPress:l}){const c=exports.contentTextPropsMap[s],d=(0,react_1.useCallback)(u=>{i?.(u),l?.(u)},[i,l]);return(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect,{underlay:(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect.Underlay,{style:touchEffectUnderlayStyleMap[s]}),style:[{flex:1},x],onPress:i!=null||l!=null?d:void 0,children:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default,{content:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default.ContentText,{...c,style:styles.contentText,children:e}),indent:r,withBorder:a,right:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{marginTop:exports.marginTopMap[s]},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.rightContainer,children:[o!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.addonTextContainer,{marginRight:t==null?8:4}],children:o}):null,t]})})})})}function CheckboxAgreementField({children:e,checked:s,defaultChecked:o=!1,type:t,addonText:r,arrow:a,indent:x,withBorder:i,style:l,onCheckedChange:c,onPress:d,onActionPress:u}){const b=exports.contentTextPropsMap[t],[g,h]=(0,utils_1.useControlled)({controlledValue:s,defaultValue:o}),f=(0,react_1.useCallback)(n=>{c?.(n),h(n)},[c,h]),{opacityAnim:j,scaleAnim:y,startPressInAnim:m,startPressOutAnim:p}=(0,pressable_effect_1.usePressAnim)({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:0}});return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{flex:1},l],children:(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:{transform:[{scale:y}]},children:[(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect.Underlay,{style:[touchEffectUnderlayStyleMap[t],{opacity:j}]}),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:n=>{d?.(n),f(!g)},onPressIn:m,onPressOut:p,children:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default,{left:(0,jsx_runtime_1.jsx)(checkbox_1.Checkbox.Line,{size:24,checked:g,onPress:n=>{d?.(n),f(!g)},onPressIn:m,onPressOut:p,style:{marginTop:exports.marginTopMap[t],marginRight:8,alignItems:"flex-start"}}),content:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default.ContentText,{...b,style:styles.contentText,children:e}),indent:x,withBorder:i,right:a!=null?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{style:{paddingLeft:16,paddingRight:16},onPress:n=>{u?.(n)},onPressIn:m,onPressOut:p,children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{marginTop:exports.marginTopMap[t]},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.rightContainer,children:[r!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.addonTextContainer,{marginRight:4}],children:r}):null,a]})})}):(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{marginTop:exports.marginTopMap[t]},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.rightContainer,children:r!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.addonTextContainer,{marginRight:8}],children:r}):null})})})})]})})}exports.marginTopMap={"big-bold":18,"medium-bold":6,"medium-regular":6},exports.contentTextPropsMap={"big-bold":{size:"big",fontWeight:"bold"},"medium-bold":{size:"medium",fontWeight:"bold"},"medium-regular":{size:"medium",fontWeight:"regular"}};const touchEffectUnderlayStyleMap={"big-bold":{borderRadius:12,marginVertical:4,marginHorizontal:6},"medium-bold":{borderRadius:8,marginVertical:0,marginHorizontal:6},"medium-regular":{borderRadius:8,marginVertical:0,marginHorizontal:6}},styles=react_native_1.StyleSheet.create({contentText:{flex:1},rightContainer:{flexDirection:"row",alignItems:"center"},addonTextContainer:{marginLeft:8}});AgreementField.AddonText=BaseAgreementField_1.default.AddonText,AgreementField.Arrow=BaseAgreementField_1.default.Arrow;

package/dist/cjs/components/agreement/AgreementGroup.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native';
+import { CheckboxAgreementFieldProps } from './AgreementField';
+import { Indent } from './types';
+type AgreementGroupProps = ViewProps & {
+    indent: Indent;
+};
+type AgreementGroupItemProps = Pick<CheckboxAgreementFieldProps, 'children' | 'type' | 'style' | 'checked' | 'defaultChecked' | 'onCheckedChange' | 'onPress' | 'onActionPress'>;
+declare function AgreementGroup({ style, indent, ...props }: AgreementGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function AgreementGroupItem({ children, type, style, checked: _checked, defaultChecked, onCheckedChange, onPress, onActionPress, }: AgreementGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export { AgreementGroup, AgreementGroupItem };

package/dist/cjs/components/agreement/AgreementGroup.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AgreementGroup=AgreementGroup,exports.AgreementGroupItem=AgreementGroupItem;const jsx_runtime_1=require("react/jsx-runtime"),checkbox_1=require("../checkbox"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),AgreementField_1=require("./AgreementField"),BaseAgreementField_1=__importDefault(require("./BaseAgreementField")),const_1=require("./const");function AgreementGroup({style:e,indent:r,...n}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{paddingLeft:const_1.PADDING_LEFT+const_1.INDENT_WIDTH*r,marginHorizontal:-ITEM_GAP},styles.groupContainer,e],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.group],...n})})}function AgreementGroupItem({children:e,type:r,style:n,checked:c,defaultChecked:a=!1,onCheckedChange:s,onPress:u,onActionPress:l}){const d=AgreementField_1.contentTextPropsMap[r],[o,i]=(0,utils_1.useControlled)({controlledValue:c,defaultValue:a}),p=(0,react_1.useCallback)(t=>{s?.(t),i(t)},[s,i]);return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{style:[styles.groupItem,n],onPress:t=>{u?.(t),l?.(t),p(!o)},children:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default,{left:(0,jsx_runtime_1.jsx)(checkbox_1.Checkbox.Line,{size:24,checked:o,style:{marginTop:AgreementField_1.marginTopMap[r],marginRight:8,alignItems:"flex-start"}}),content:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default.ContentText,{...d,children:e}),withBorder:!1,indent:0,style:{paddingLeft:ITEM_GAP,paddingRight:ITEM_GAP}})})}const ITEM_GAP=12,styles=react_native_1.StyleSheet.create({groupContainer:{paddingRight:const_1.PADDING_RIGHT},group:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around"},groupItem:{minWidth:"33.3%",flexGrow:1}});

package/dist/cjs/components/agreement/BaseAgreementField.d.ts

@@ -0,0 +1,32 @@
+import { Icon } from '../icon';
+import { TxtProps } from '../txt';
+import { ComponentProps, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { Indent } from './types';
+export interface BaseAgreementFieldProps {
+    left?: ReactNode;
+    content: ReactNode;
+    right?: ReactNode;
+    indent: Indent;
+    withBorder: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function BaseAgreementField({ left, content, right, indent, withBorder, style }: BaseAgreementFieldProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BaseAgreementField {
+    var ContentText: typeof BaseAgreementFieldContentText;
+    var Arrow: typeof BaseAgreementFieldArrow;
+    var AddonText: typeof BaseAgreementFieldAddonText;
+}
+type BaseAgreementFieldContentTextSize = 'big' | 'medium';
+declare function BaseAgreementFieldContentText({ size, color, style, ...props }: Omit<TxtProps, 'typography'> & {
+    size: BaseAgreementFieldContentTextSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BaseAgreementFieldAddonText({ color, style, ...props }: Omit<TxtProps, 'typography'>): import("react/jsx-runtime").JSX.Element;
+type IconProps = ComponentProps<typeof Icon>;
+declare function BaseAgreementFieldArrow({ color, type, open, style, }: {
+    color?: IconProps['color'];
+    style?: StyleProp<ViewStyle>;
+    open?: boolean;
+    type?: 'link' | 'collapsible';
+}): import("react/jsx-runtime").JSX.Element;
+export default BaseAgreementField;

package/dist/cjs/components/agreement/BaseAgreementField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),border_1=require("../border"),icon_1=require("../icon"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native"),const_1=require("./const"),useAnimatedRotateValue_1=require("./useAnimatedRotateValue");function BaseAgreementField({left:e,content:t,right:r,indent:n,withBorder:o,style:s}){return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{paddingLeft:const_1.PADDING_LEFT+const_1.INDENT_WIDTH*n},styles.container,s],children:[e,t,r]}),o?(0,jsx_runtime_1.jsx)(border_1.Border,{type:"padding24",style:styles.border}):null]})}function BaseAgreementFieldContentText({size:e,color:t,style:r,...n}){const o=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:typographyMap[e],color:t??o.grey700,style:[{paddingVertical:paddingMap[e]},r],...n})}const typographyMap={big:"t4",medium:"t6"},paddingMap={big:16,medium:6};function BaseAgreementFieldAddonText({color:e,style:t,...r}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t7",color:e,style:t,...r})}class ClassIcon extends react_1.Component{render(){return(0,jsx_runtime_1.jsx)(icon_1.Icon,{...this.props})}}const AnimatedIcon=react_native_1.Animated.createAnimatedComponent(ClassIcon);function BaseAgreementFieldArrow({color:e,type:t="link",open:r=!1,style:n}){const o=(0,core_1.useAdaptive)(),s=(0,react_1.useCallback)(()=>t==="collapsible"?r?-90:90:0,[r,t]),{rotate:a,startAnimation:i}=(0,useAnimatedRotateValue_1.useAnimatedRotateValue)(s(),{min:-90,max:90});return(0,react_1.useEffect)(()=>{i(s()).start()},[s,i]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:n,children:(0,jsx_runtime_1.jsx)(AnimatedIcon,{name:"icon-arrow-right-mono",color:e??o.grey400,style:{transform:[{rotate:a}]}})})}const styles=react_native_1.StyleSheet.create({container:{flexDirection:"row",paddingRight:const_1.PADDING_RIGHT},content:{flex:1},border:{marginBottom:16}});exports.default=BaseAgreementField,BaseAgreementField.ContentText=BaseAgreementFieldContentText,BaseAgreementField.Arrow=BaseAgreementFieldArrow,BaseAgreementField.AddonText=BaseAgreementFieldAddonText;

package/dist/cjs/components/agreement/Collapsible/AgreementCollapsibleTrigger.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+export declare function AgreementCollapsibleTrigger({ children }: {
+    children: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/agreement/Collapsible/AgreementCollapsibleTrigger.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AgreementCollapsibleTrigger=AgreementCollapsibleTrigger;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../../core"),react_1=require("react"),BaseAgreementField_1=__importDefault(require("../BaseAgreementField")),useAnimatedRotateValue_1=require("../useAnimatedRotateValue"),CollapsibleContext_1=require("./CollapsibleContext"),CollapsibleTrigger_1=require("./CollapsibleTrigger");function AgreementCollapsibleTrigger({children:e}){const{open:r,onTrigger:i}=(0,react_1.useContext)(CollapsibleContext_1.CollapsibleContext),n=(0,core_1.useAdaptive)(),t=(0,react_1.useMemo)(()=>()=>r?90:0,[r]),{rotate:a,startAnimation:s}=(0,useAnimatedRotateValue_1.useAnimatedRotateValue)(t(),{min:0,max:90});(0,react_1.useEffect)(()=>{s(t()).start()},[t,s]);const l={arrow:(0,jsx_runtime_1.jsx)(BaseAgreementField_1.default.Arrow,{color:r?n.grey600:void 0,style:{transform:[{rotate:a}]}}),onActionPress:o=>{e.props.onActionPress?.(o),i()},onPress:o=>{e.props.onPress?.(o)}};return(0,jsx_runtime_1.jsx)(CollapsibleTrigger_1.CollapsibleTrigger,{overrideProps:l,children:e})}

package/dist/cjs/components/agreement/Collapsible/Collapsible.d.ts

@@ -0,0 +1,14 @@
+export interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface CollapsibleRef {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<CollapsibleRef>>;

package/dist/cjs/components/agreement/Collapsible/Collapsible.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Collapsible=void 0;const jsx_runtime_1=require("react/jsx-runtime"),utils_1=require("../../../utils"),react_1=require("react"),CollapsibleContext_1=require("./CollapsibleContext");exports.Collapsible=(0,react_1.forwardRef)(function({children:s,open:o,defaultOpen:i=!1,onOpenChange:l},u){const[e,t]=(0,utils_1.useControlled)({controlledValue:o,defaultValue:i}),r=(0,react_1.useCallback)(()=>{l?.(!e),t(!e)},[e,l]);return(0,react_1.useImperativeHandle)(u,()=>({isOpen:e,toggle:r,close:()=>{l?.(!1),t(!1)},open:()=>{l?.(!0),t(!0)}}),[l,e]),(0,jsx_runtime_1.jsx)(CollapsibleContext_1.CollapsibleContext.Provider,{value:{open:e,onTrigger:r},children:s})});

package/dist/cjs/components/agreement/Collapsible/CollapsibleContent.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export declare function CollapsibleContent({ children, style, }: PropsWithChildren<{
+    style?: StyleProp<ViewStyle>;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/agreement/Collapsible/CollapsibleContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsibleContent=CollapsibleContent;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native"),CollapsibleContext_1=require("./CollapsibleContext"),INITIAL_HEIGHT=0;function CollapsibleContent({children:i,style:r}){const{open:n}=(0,react_1.useContext)(CollapsibleContext_1.CollapsibleContext),s=(0,react_1.useRef)(INITIAL_HEIGHT),e=(0,react_1.useRef)(new react_native_1.Animated.Value(INITIAL_HEIGHT)).current,t=(0,react_1.useCallback)(()=>{react_native_1.Animated.spring(e,{toValue:n?s.current:INITIAL_HEIGHT,...easings_1.spring.quick,useNativeDriver:!1}).start()},[e,n]);return(0,react_1.useEffect)(()=>{t()},[t]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.outerContainer,{height:e},r],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.innerContainer,onLayout:o=>{s.current=o.nativeEvent.layout.height,t()},children:i})})}const styles=react_native_1.StyleSheet.create({outerContainer:{overflow:"hidden"},innerContainer:{position:"absolute",top:0,left:0,width:"100%"}});

package/dist/cjs/components/agreement/Collapsible/CollapsibleContext.d.ts

@@ -0,0 +1,5 @@
+export interface CollapsibleContext {
+    open: boolean;
+    onTrigger: () => void;
+}
+export declare const CollapsibleContext: import("react").Context<CollapsibleContext>;

package/dist/cjs/components/agreement/Collapsible/CollapsibleContext.js

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

package/dist/cjs/components/agreement/Collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export declare function CollapsibleTrigger<T>({ children, overrideProps }: PropsWithChildren<{
+    overrideProps: T;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/agreement/Collapsible/CollapsibleTrigger.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsibleTrigger=CollapsibleTrigger;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),CollapsibleContext_1=require("./CollapsibleContext");function CollapsibleTrigger({children:e,overrideProps:r}){const{onTrigger:t}=(0,react_1.useContext)(CollapsibleContext_1.CollapsibleContext);return(0,react_1.isValidElement)(e)?(0,react_1.cloneElement)(e,{...e.props,onPress:o=>{e.props.onPress?.(o),t?.()},...r}):(console.error("ReactElement expected as children of CollapsibleTrigger"),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:e}))}

package/dist/cjs/components/agreement/Collapsible/index.d.ts

@@ -0,0 +1,5 @@
+export { Collapsible } from './Collapsible';
+export type { CollapsibleRef, CollapsibleProps } from './Collapsible';
+export { AgreementCollapsibleTrigger } from './AgreementCollapsibleTrigger';
+export { CollapsibleContent } from './CollapsibleContent';
+export { CollapsibleTrigger } from './CollapsibleTrigger';

package/dist/cjs/components/agreement/Collapsible/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsibleTrigger=exports.CollapsibleContent=exports.AgreementCollapsibleTrigger=exports.Collapsible=void 0;var Collapsible_1=require("./Collapsible");Object.defineProperty(exports,"Collapsible",{enumerable:!0,get:function(){return Collapsible_1.Collapsible}});var AgreementCollapsibleTrigger_1=require("./AgreementCollapsibleTrigger");Object.defineProperty(exports,"AgreementCollapsibleTrigger",{enumerable:!0,get:function(){return AgreementCollapsibleTrigger_1.AgreementCollapsibleTrigger}});var CollapsibleContent_1=require("./CollapsibleContent");Object.defineProperty(exports,"CollapsibleContent",{enumerable:!0,get:function(){return CollapsibleContent_1.CollapsibleContent}});var CollapsibleTrigger_1=require("./CollapsibleTrigger");Object.defineProperty(exports,"CollapsibleTrigger",{enumerable:!0,get:function(){return CollapsibleTrigger_1.CollapsibleTrigger}});

package/dist/cjs/components/agreement/const.d.ts

@@ -0,0 +1,3 @@
+export declare const PADDING_RIGHT = 16;
+export declare const PADDING_LEFT = 24;
+export declare const INDENT_WIDTH = 16;

package/dist/cjs/components/agreement/const.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.INDENT_WIDTH=exports.PADDING_LEFT=exports.PADDING_RIGHT=void 0,exports.PADDING_RIGHT=16,exports.PADDING_LEFT=24,exports.INDENT_WIDTH=16;

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

@@ -0,0 +1,28 @@
+import { AgreementButton } from './AgreementButton';
+import { AgreementDescription } from './AgreementDescription';
+import { AgreementField, CheckboxAgreementField } from './AgreementField';
+import { AgreementGroup, AgreementGroupItem } from './AgreementGroup';
+import { default as BaseAgreementField } from './BaseAgreementField';
+import { AgreementCollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export type { CollapsibleRef } from './Collapsible';
+export declare const Agreement: {
+    BaseField: typeof BaseAgreementField;
+    Field: typeof AgreementField;
+    CheckboxField: typeof CheckboxAgreementField;
+    Description: typeof AgreementDescription;
+    Button: typeof AgreementButton;
+    Arrow: ({ color, type, open, style, }: {
+        color?: string | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        open?: boolean;
+        type?: "link" | "collapsible";
+    }) => import("react/jsx-runtime").JSX.Element;
+    AddonText: ({ color, style, ...props }: Omit<import("../txt").TxtProps, "typography">) => import("react/jsx-runtime").JSX.Element;
+    Collapsible: import("react").ForwardRefExoticComponent<import("./Collapsible").CollapsibleProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<import("./Collapsible").CollapsibleRef>>;
+    CollapsibleTrigger: typeof AgreementCollapsibleTrigger;
+    CollapsibleContent: typeof CollapsibleContent;
+    Group: typeof AgreementGroup;
+    GroupItem: typeof AgreementGroupItem;
+};

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Agreement=void 0;const AgreementButton_1=require("./AgreementButton"),AgreementDescription_1=require("./AgreementDescription"),AgreementField_1=require("./AgreementField"),AgreementGroup_1=require("./AgreementGroup"),BaseAgreementField_1=__importDefault(require("./BaseAgreementField")),Collapsible_1=require("./Collapsible");exports.Agreement={BaseField:BaseAgreementField_1.default,Field:AgreementField_1.AgreementField,CheckboxField:AgreementField_1.CheckboxAgreementField,Description:AgreementDescription_1.AgreementDescription,Button:AgreementButton_1.AgreementButton,Arrow:AgreementField_1.AgreementField.Arrow,AddonText:AgreementField_1.AgreementField.AddonText,Collapsible:Collapsible_1.Collapsible,CollapsibleTrigger:Collapsible_1.AgreementCollapsibleTrigger,CollapsibleContent:Collapsible_1.CollapsibleContent,Group:AgreementGroup_1.AgreementGroup,GroupItem:AgreementGroup_1.AgreementGroupItem};

package/dist/cjs/components/agreement/types.d.ts

@@ -0,0 +1 @@
+export type Indent = 0 | 1 | 2;

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

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

package/dist/cjs/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/cjs/components/agreement/useAnimatedRotateValue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useAnimatedRotateValue=useAnimatedRotateValue;const easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native");function useAnimatedRotateValue(a,{min:t,max:r}){const e=(0,react_1.useRef)(new react_native_1.Animated.Value(a)).current,s=(0,react_1.useCallback)(u=>{const n=react_native_1.Animated.spring(e,{toValue:u,...easings_1.spring.quick,useNativeDriver:!0});return{...n,start:()=>new Promise(o=>{n.start(c=>o(c.finished))})}},[e]),i=e.interpolate({inputRange:[t,r],outputRange:[`${t}deg`,`${r}deg`]});return{startAnimation:s,rotate:i}}

package/dist/cjs/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/cjs/components/amount-top/AmountTop.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),utils_1=require("../../utils"),txt_1=require("../txt");function AmountTop({topPadding:i=64,bottomPadding:e=0,horizontalPadding:r=24,subTitle:n,title:t,button:s}){const c=(0,core_1.useAdaptive)(),o=s!=null?(0,react_1.cloneElement)(s,{size:"medium"}):null;return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{paddingTop:i,paddingBottom:e,paddingHorizontal:r},children:[typeof n=="string"?(0,jsx_runtime_1.jsx)(AmountTop.SubTitle,{children:n}):n,(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{flexDirection:"row",alignItems:"flex-end"},children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flex:1,marginTop:7},accessibilityRole:"header",accessible:!0,children:(0,utils_1.isReactText)(t)?(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t1",fontWeight:"semiBold",color:c.grey900,children:t}):t}),o!=null&&(0,jsx_runtime_1.jsx)(react_native_1.View,{children:o})]})]})}AmountTop.SubTitle=function(e){const r=(0,core_1.useAdaptive)(),n=e.underline??e.onPress!==void 0,t=(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"st11",color:r.grey800,style:n?{textDecorationLine:"underline"}:void 0,children:e.children});return e.onPress!==void 0?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:e.onPress,children:t}):t},exports.default=AmountTop;

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

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

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AmountTop=void 0;var AmountTop_1=require("./AmountTop");Object.defineProperty(exports,"AmountTop",{enumerable:!0,get:function(){return __importDefault(AmountTop_1).default}});

package/dist/cjs/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/cjs/components/asset/Asset.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Asset=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),AssetContext_1=require("./blocks/AssetContext"),Asset=({resource:s,frame:e,union:t,style:r})=>{const o=(0,react_1.useMemo)(()=>({width:e.width,height:e.height,borderRadius:e.radius,backgroundColor:e.color}),[e]),i=(0,react_1.useMemo)(()=>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(0,jsx_runtime_1.jsx)(AssetContext_1.AssetContext.Provider,{value:{shape:e},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.frameContainer,i,r],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[o,styles.frame],children:s})})})};exports.Asset=Asset;const styles=react_native_1.StyleSheet.create({frameContainer:{},frame:{overflow:"hidden",justifyContent:"center"}});

package/dist/cjs/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/cjs/components/asset/Icon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Icon=Icon;const jsx_runtime_1=require("react/jsx-runtime"),ContentIcon_1=require("./blocks/ContentIcon"),Frame_1=require("./blocks/Frame");function Icon({frameShape:e={},backgroundColor:t="transparent",style:n,overlap:o,acc:r,accPosition:c,...s}){return(0,jsx_runtime_1.jsx)(Frame_1.Frame,{shape:e,backgroundColor:t,style:n,overlap:o,acc:r,accPosition:c,content:(0,jsx_runtime_1.jsx)(ContentIcon_1.ContentIcon,{...s})})}

package/dist/cjs/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/cjs/components/asset/Image.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Image=Image;const jsx_runtime_1=require("react/jsx-runtime"),ContentImage_1=require("./blocks/ContentImage"),Frame_1=require("./blocks/Frame");function Image({frameShape:e={},backgroundColor:t="transparent",style:r,overlap:n,acc:o,accPosition:s,...a}){return(0,jsx_runtime_1.jsx)(Frame_1.Frame,{shape:e,backgroundColor:t,style:r,overlap:n,acc:o,accPosition:s,content:(0,jsx_runtime_1.jsx)(ContentImage_1.ContentImage,{...a})})}

package/dist/cjs/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/cjs/components/asset/Lottie.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Lottie=Lottie;const jsx_runtime_1=require("react/jsx-runtime"),ContentLottie_1=require("./blocks/ContentLottie"),Frame_1=require("./blocks/Frame");function Lottie({frameShape:e={},backgroundColor:t="transparent",style:o,overlap:r,acc:n,accPosition:s,...c}){return(0,jsx_runtime_1.jsx)(Frame_1.Frame,{shape:e,backgroundColor:t,style:o,overlap:r,acc:n,accPosition:s,content:(0,jsx_runtime_1.jsx)(ContentLottie_1.ContentLottie,{...c})})}

package/dist/cjs/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/cjs/components/asset/Resource/ResourceText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ResourceText=ResourceText;const jsx_runtime_1=require("react/jsx-runtime"),txt_1=require("../../txt");function ResourceText({children:t,color:e,size:r,style:s,...o}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:"bold",typography:SizeMap[r],color:e,style:[{textAlign:"center"},s],...o,children:t})}const SizeMap={24:"st5",19:"st8",17:"t5",15:"t6",13:"t7",11:"st13"};

package/dist/cjs/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/cjs/components/asset/Text.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Text=Text;const jsx_runtime_1=require("react/jsx-runtime"),Frame_1=require("./blocks/Frame"),ResourceText_1=require("./Resource/ResourceText");function Text({frameShape:e,backgroundColor:r="transparent",color:t,size:s,children:o,...c}){return(0,jsx_runtime_1.jsx)(Frame_1.Frame,{...c,shape:e,backgroundColor:r,content:(0,jsx_runtime_1.jsx)(ResourceText_1.ResourceText,{size:s,color:t,children:o})})}

package/dist/cjs/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/cjs/components/asset/blocks/AssetContext.js

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

package/dist/cjs/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/cjs/components/asset/blocks/ContentIcon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContentIcon=ContentIcon;const jsx_runtime_1=require("react/jsx-runtime"),icon_1=require("../../icon"),react_1=require("react"),react_native_1=require("react-native"),AssetContext_1=require("./AssetContext");function ContentIcon({name:r,color:i,scale:o=1,accessibilityLabel:c,scaleType:s="fit",style:a}){const{shape:e}=(0,react_1.useContext)(AssetContext_1.AssetContext),u=(0,react_1.useMemo)(()=>{const t=e?.width??0,n=e?.height??0;if(Math.max(t,n)!==0)return s==="crop"?Math.max(t,n):Math.min(t,n)},[e,s]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{alignItems:"center"},children:(0,jsx_runtime_1.jsx)(icon_1.Icon,{name:r,color:i,size:u,accessibilityLabel:c,style:[{transform:[{scale:o}]},a]})})}

package/dist/cjs/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/cjs/components/asset/blocks/ContentImage.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContentImage=ContentImage;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("@granite-js/react-native");function ContentImage({source:t,scale:r=1,scaleType:i="fit",accessibilityLabel:n,style:e}){return(0,jsx_runtime_1.jsx)(react_native_1.Image,{source:t,style:[{width:void 0,height:void 0,flex:1,transform:[{scale:r}]},...Array.isArray(e)?e:[e]],resizeMode:resizeModeMap[i],accessibilityRole:"image",accessibilityLabel:n})}const resizeModeMap={crop:"cover",fit:"contain"};

package/dist/cjs/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/cjs/components/asset/blocks/ContentLottie.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContentLottie=ContentLottie;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("@granite-js/react-native");function ContentLottie({scale:t=1,scaleType:e="fit",style:r,...i}){return(0,jsx_runtime_1.jsx)(react_native_1.Lottie,{width:"100%",height:"100%",style:[{position:"absolute",flex:1,transform:[{scale:t}]},r],resizeMode:e==="fit"?"contain":"cover",...i})}

package/dist/cjs/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/cjs/components/asset/blocks/Frame.js

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

package/dist/cjs/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/cjs/components/asset/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.frameShape=exports.Asset=void 0;const Asset_1=require("./Asset"),Frame_1=require("./blocks/Frame"),ContentIcon_1=require("./blocks/ContentIcon"),ContentImage_1=require("./blocks/ContentImage"),ContentLottie_1=require("./blocks/ContentLottie"),Icon_1=require("./Icon"),Image_1=require("./Image"),Lottie_1=require("./Lottie"),Text_1=require("./Text"),frameShape_1=require("./presets/frameShape");exports.Asset=Object.assign(Asset_1.Asset,{Frame:Frame_1.Frame,ContentIcon:ContentIcon_1.ContentIcon,ContentImage:ContentImage_1.ContentImage,ContentLottie:ContentLottie_1.ContentLottie,Icon:Icon_1.Icon,Image:Image_1.Image,Lottie:Lottie_1.Lottie,Text:Text_1.Text,frameShape:frameShape_1.frameShape});var frameShape_2=require("./presets/frameShape");Object.defineProperty(exports,"frameShape",{enumerable:!0,get:function(){return frameShape_2.frameShape}});

package/dist/cjs/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/cjs/components/asset/presets/accPosition.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.accPosition=void 0,exports.accPosition={TopLeft:"top-left",TopRight:"top-right",BottomLeft:"bottom-left",BottomRight:"bottom-right"};

package/dist/cjs/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/cjs/components/asset/presets/frameShape.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.frameShape=void 0,exports.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}};