@toss/tds-react-native 1.0.0

package/dist/cjs/components/grid-list/GridList.d.ts

@@ -0,0 +1,18 @@
+import { GridListItem } from './GridListItem';
+import { GridListProps } from './types';
+/**
+ *
+ * @example
+ * <GridList column={3}>
+ *   <GridList.Item
+ *     image={<Icon name="icn-bank-toss" />}
+ *     title="토스"
+ *     onPress={() => null}
+ *   />
+ * </GridList>
+ */
+declare function GridList({ children, column, style }: GridListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GridList {
+    var Item: typeof GridListItem;
+}
+export default GridList;

package/dist/cjs/components/grid-list/GridList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),const_1=require("./const"),GridListContext_1=require("./GridListContext"),GridListItem_1=require("./GridListItem");function GridList({children:e,column:t,style:r}){return(0,jsx_runtime_1.jsx)(GridListContext_1.GridListContext.Provider,{value:{column:t},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.container,r],children:e})})}const styles=react_native_1.StyleSheet.create({container:{flexWrap:"wrap",flexDirection:"row",margin:const_1.MARGIN*-1}});GridList.Item=GridListItem_1.GridListItem,exports.default=GridList;

package/dist/cjs/components/grid-list/GridListContext.d.ts

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

package/dist/cjs/components/grid-list/GridListContext.js

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

package/dist/cjs/components/grid-list/GridListItem.d.ts

@@ -0,0 +1,2 @@
+import { GridListItemProps } from './types';
+export declare function GridListItem({ image, title, style, onPress }: GridListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/grid-list/GridListItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.GridListItem=GridListItem;const jsx_runtime_1=require("react/jsx-runtime"),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"),GridListContext_1=require("./GridListContext");function GridListTitle({children:e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"st11",color:t.grey900,fontWeight:"medium",style:{textAlign:"center"},children:e})}function GridListItem({image:e,title:t,style:n,onPress:s}){const r=(0,core_1.useAdaptive)(),{column:o}=(0,react_1.useContext)(GridListContext_1.GridListContext);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flexBasis:`${100/o}%`},children:(0,jsx_runtime_1.jsx)(react_native_1.TouchableHighlight,{activeOpacity:1,underlayColor:r.grey100,style:[styles.itemContainer,{backgroundColor:r.opacity50},n],onPress:s,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.itemImageContainer,children:e}),(0,jsx_runtime_1.jsx)(react_native_1.View,{children:react_1.Children.map(t,i=>(0,utils_1.isReactText)(i)?(0,jsx_runtime_1.jsx)(GridListTitle,{children:i}):i)})]})})})}const styles=react_native_1.StyleSheet.create({itemContainer:{margin:const_1.MARGIN,flex:1,paddingVertical:12,paddingHorizontal:8,borderRadius:9},itemImageContainer:{alignItems:"center",justifyContent:"center",maxHeight:28,marginBottom:6}});

package/dist/cjs/components/grid-list/const.d.ts

@@ -0,0 +1 @@
+export declare const MARGIN = 4;

package/dist/cjs/components/grid-list/const.js

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

package/dist/cjs/components/grid-list/index.d.ts

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

package/dist/cjs/components/grid-list/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.GridList=void 0;var GridList_1=require("./GridList");Object.defineProperty(exports,"GridList",{enumerable:!0,get:function(){return __importDefault(GridList_1).default}});

package/dist/cjs/components/grid-list/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { StyleProp, TouchableHighlightProps, ViewStyle } from 'react-native';
+export type GridListColumn = 1 | 2 | 3;
+export interface GridListProps {
+    children: ReactNode | ReactNode[];
+    column: 1 | 2 | 3;
+    style?: StyleProp<ViewStyle>;
+}
+export interface GridListItemProps {
+    /**
+     * maxHeight: 28
+     */
+    image: ReactNode;
+    title: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onPress?: TouchableHighlightProps['onPress'];
+}

package/dist/cjs/components/grid-list/types.js

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

package/dist/cjs/components/highlight/Highlight.d.ts

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+import type { HighlightProps } from './types';
+export declare const Highlight: import("react").ForwardRefExoticComponent<HighlightProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/highlight/Highlight.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Highlight=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),HighlightUI_1=require("./HighlightUI"),hooks_1=require("./hooks"),useTimestampRef_1=require("./hooks/useTimestampRef"),mergeRefs_1=require("./utils/mergeRefs");exports.Highlight=(0,react_1.forwardRef)(function({open:r,delay:n=0,padding:e=0,paddingLeft:u=e,paddingTop:l=e,paddingRight:h=e,paddingBottom:f=e,message:a,messageColor:m=colors_1.colors.white,messageXAlignment:g,messageYAlignment:_,onPress:t,onExited:R,onTargetPress:q,children:v,closeLockDuration:x=0,...s},w){const j={padding:e,paddingLeft:u,paddingTop:l,paddingRight:h,paddingBottom:f,message:a,messageColor:m,messageXAlignment:g,messageYAlignment:_,onPress:t,onTargetPress:q,...s},i=(0,core_1.useOverlay)(),o=(0,hooks_1.useTimeout)(),c=(0,react_1.useRef)(null),p=(0,useTimestampRef_1.useTimestampRef)({active:r});return(0,react_1.useEffect)(()=>{if(r)return o.set(()=>{c.current?.measureInWindow((H,T,I,y)=>{i.open(({isOpen:U,close:d,exit:k})=>(0,jsx_runtime_1.jsx)(HighlightUI_1.HighlightUI,{...j,x:H,y:T,width:I,height:y,open:U,onPress:()=>{new Date().getTime()-p.current>x*1e3&&(t?.(),d())},onExited:()=>{R?.(),k()}}))})},n*1e3),o.clear;i.close()},[r]),(0,jsx_runtime_1.jsx)(react_native_1.View,{...s,children:(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:(0,mergeRefs_1.mergeRefs)(w,c),removeClippedSubviews:!1,children:v})})});

package/dist/cjs/components/highlight/HighlightUI.d.ts

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+import type { HighlightUIProps } from './types';
+export declare const HighlightUI: import("react").ForwardRefExoticComponent<HighlightUIProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/highlight/HighlightUI.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUI=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),colors_1=require("@toss-design-system/colors"),utils_1=require("../../utils"),components_1=require("./components"),hooks_1=require("./hooks"),utils_2=require("./utils");exports.HighlightUI=(0,react_1.forwardRef)(function({open:g,x:s,y:o,width:r,height:l,padding:e=0,paddingLeft:h=e,paddingTop:m=e,paddingRight:y=e,paddingBottom:p=e,message:t,messageColor:d=colors_1.colors.white,messageXAlignment:v,messageYAlignment:x,onPress:_,onExited:A,onTargetPress:j,...a},w){const n=(0,utils_2.addLayoutPadding)({layout:{x:s,y:o,width:r,height:l},padding:{paddingLeft:h,paddingTop:m,paddingRight:y,paddingBottom:p}}),{style:i,enter:q,exit:H}=(0,hooks_1.useHighlightUIAnimation)(),{width:f,height:S}=react_native_1.Dimensions.get("window"),E=v??(0,utils_2.getElementXAlignment)({x:s,width:r,parentWidth:f}),c=x??(0,utils_2.getElementYAlignment)({y:o,height:l,parentHeight:S}),{presenceState:u}=(0,utils_1.useAnimatePresence)(g,{enter:q,exit:H,onExited:A});return u==="invisible"?null:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:w,...a,style:[react_native_1.StyleSheet.absoluteFill,{pointerEvents:"none"},a.style],children:[(0,jsx_runtime_1.jsx)(components_1.SvgHighlightOverlay,{layout:n,opacity:i.overlayOpacity,holeStep:i.holeStep}),t&&(0,jsx_runtime_1.jsx)(components_1.MessageBox,{layout:n,opacity:i.messageOpacity,yAlignment:c,children:typeof t=="string"?(0,jsx_runtime_1.jsx)(components_1.Message,{layout:n,color:d,xAlignment:E,yAlignment:c,children:t}):t})]}),(0,jsx_runtime_1.jsx)(components_1.PassClickEventThroughHoleOverlay,{layout:n,onPress:_,onTargetPress:j,style:{pointerEvents:u==="invisible-animation"?"none":"auto"}})]})});

package/dist/cjs/components/highlight/components/Message.d.ts

@@ -0,0 +1,10 @@
+import type { Layout, XAlignmentValue, YAlignmentValue } from '../types';
+type MessageProps = {
+    color: string;
+    children: string;
+    layout: Layout;
+    xAlignment: XAlignmentValue;
+    yAlignment: YAlignmentValue;
+};
+export declare const Message: ({ color, children, layout, xAlignment, yAlignment }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/highlight/components/Message.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Message=void 0;const jsx_runtime_1=require("react/jsx-runtime"),txt_1=require("../../txt"),react_1=require("react"),react_native_1=require("react-native"),Message=({color:s,children:i,layout:e,xAlignment:t,yAlignment:n})=>{const[a,c]=(0,react_1.useState)(null),o=t==="center"?-(a?.width??0)/2+e.x+e.width/2:t==="left"?10:0,r=t==="right"?10:0;return(0,jsx_runtime_1.jsx)(txt_1.Txt,{onLayout:u=>{c(u.nativeEvent.layout)},color:s,typography:"t6",fontWeight:"bold",textAlign:t,style:{position:"absolute",maxWidth:react_native_1.Dimensions.get("window").width-(r+o),left:o,right:r,bottom:n==="top"?0:void 0},children:i})};exports.Message=Message;

package/dist/cjs/components/highlight/components/MessageBox.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout, YAlignmentValue } from '../types';
+type MessageBoxProps = {
+    layout: Layout;
+    yAlignment: YAlignmentValue;
+    opacity: ReactNativeAnimated.Value;
+    children: ReactNode;
+};
+export declare const MessageBox: ({ layout: { x, y, width, height }, yAlignment, opacity, children }: MessageBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/highlight/components/MessageBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageBox=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),easings_1=require("@toss-design-system/easings"),animated_1=require("../../../interactions/animated"),asset_1=require("../../asset"),utils_1=require("../utils"),HORIZONTAL_PADDING=12,MessageBox=({layout:{x:i,y:s,width:r,height:n},yAlignment:o,opacity:a,children:u})=>{const{height:c}=react_native_1.Dimensions.get("window"),t=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=o==="top";return(0,react_1.useEffect)(()=>{animated_1.Animated.sequence([animated_1.Animated.timing(t,{toValue:e?5:-5,useNativeDriver:!0,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:(0,utils_1.sToMs)(.6)}),animated_1.Animated.timing(t,{toValue:e?-5:5,useNativeDriver:!0,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:(0,utils_1.sToMs)(.8)}),animated_1.Animated.timing(t,{toValue:e?5:-5,useNativeDriver:!0,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:(0,utils_1.sToMs)(.8)})]).start()},[]),(0,jsx_runtime_1.jsxs)(animated_1.Animated.View,{style:[{position:"absolute",left:0,right:0},e?{bottom:c-s+HORIZONTAL_PADDING,flexDirection:"column-reverse"}:{top:s+n+HORIZONTAL_PADDING,flexDirection:"column"},{transform:[{translateY:t}],opacity:a}],children:[(0,jsx_runtime_1.jsx)(asset_1.Asset.Icon,{style:{left:i+r/2-HORIZONTAL_PADDING,transform:[{rotateX:e?"180deg":"0deg"}]},frameShape:asset_1.Asset.frameShape.CleanW24,name:"icon-arrow-up-sidebar-mono",color:"white"}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{position:"relative",width:"100%"}],children:u})]})};exports.MessageBox=MessageBox;

package/dist/cjs/components/highlight/components/PassClickEventThroughHoleOverlay.d.ts

@@ -0,0 +1,10 @@
+import { type ViewProps } from 'react-native';
+import type { Layout } from '../types';
+type PassClickEventThroughHoleOverlayProps = {
+    layout: Layout;
+    onPress?: () => void;
+    onTargetPress?: () => void;
+    style: ViewProps['style'];
+};
+export declare const PassClickEventThroughHoleOverlay: ({ layout, onPress, onTargetPress, style, }: PassClickEventThroughHoleOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/highlight/components/PassClickEventThroughHoleOverlay.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PassClickEventThroughHoleOverlay=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),getHoleAnimateVariants_1=require("./getHoleAnimateVariants"),PassClickEventThroughHoleOverlay=({layout:t,onPress:s,onTargetPress:r,style:a})=>{const{default:e}=(0,getHoleAnimateVariants_1.getHoleAnimateVariants)(t);return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:s,style:[react_native_1.StyleSheet.absoluteFill,a],children:(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:r,style:[{position:"absolute",left:e.x,top:e.y,width:e.width,height:e.height,borderRadius:e.radius}]})})};exports.PassClickEventThroughHoleOverlay=PassClickEventThroughHoleOverlay;

package/dist/cjs/components/highlight/components/SvgHighlightOverlay.d.ts

@@ -0,0 +1,9 @@
+import { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout } from '../types';
+type SvgHighlightOverlayProps = {
+    layout: Layout;
+    opacity: ReactNativeAnimated.Value;
+    holeStep: ReactNativeAnimated.Value;
+};
+export declare const SvgHighlightOverlay: ({ layout, opacity, holeStep }: SvgHighlightOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/highlight/components/SvgHighlightOverlay.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.SvgHighlightOverlay=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),react_native_1=require("react-native"),animated_1=require("../../../interactions/animated"),core_1=require("../../../core"),SvgHolePath_1=require("./SvgHolePath"),AnimatedSvg=animated_1.Animated.createAnimatedComponent(react_native_svg_1.default),AnimatedRect=animated_1.Animated.createAnimatedComponent(react_native_svg_1.Rect),SVG_HOLE_CLIP_PATH_ID="HIGHLIGHT_SVG_HOLE_CLIP_PATH_ID",SvgHighlightOverlay=({layout:i,opacity:e,holeStep:n})=>{const{colorPreference:t}=(0,core_1.useColorPreference)(),r=(0,core_1.useAdaptive)(),a=t==="dark"?"rgba(33, 33, 38, 0.87)":r.greyOpacity700;return(0,jsx_runtime_1.jsxs)(AnimatedSvg,{width:"100%",height:"100%",style:react_native_1.StyleSheet.absoluteFill,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsx)(react_native_svg_1.ClipPath,{id:SVG_HOLE_CLIP_PATH_ID,children:(0,jsx_runtime_1.jsx)(SvgHolePath_1.SvgHolePath,{step:n,layout:i})})}),(0,jsx_runtime_1.jsx)(AnimatedRect,{x:"0",y:"0",width:"100%",height:"100%",fillOpacity:e,fill:a,clipPath:`url(#${SVG_HOLE_CLIP_PATH_ID})`})]})};exports.SvgHighlightOverlay=SvgHighlightOverlay;

package/dist/cjs/components/highlight/components/SvgHolePath.d.ts

@@ -0,0 +1,8 @@
+import { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout } from '../types';
+type Props = {
+    step: ReactNativeAnimated.Value;
+    layout: Layout;
+};
+export declare const SvgHolePath: ({ step, layout }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/highlight/components/SvgHolePath.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SvgHolePath=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),animated_1=require("../../../interactions/animated"),utils_1=require("../utils"),getHoleAnimateVariants_1=require("./getHoleAnimateVariants"),AnimatedPath=animated_1.Animated.createAnimatedComponent(react_native_svg_1.Path),SvgHolePath=({step:e,layout:a})=>{const t=(0,getHoleAnimateVariants_1.getHoleAnimateVariants)(a),n=generateHolePath(t.initial),i=generateHolePath(t.default),r=generateHolePath(t.exit);return(0,jsx_runtime_1.jsx)(AnimatedPath,{clipRule:"evenodd",d:e.interpolate({inputRange:[0,1,2],outputRange:[n,i,r]})})};exports.SvgHolePath=SvgHolePath;const generateHolePath=e=>{const a=(0,utils_1.generateRadiusRectanglePath)(e);return`
+  ${(0,utils_1.generateWindowPath)()}
+  ${a}
+  `};

package/dist/cjs/components/highlight/components/getHoleAnimateVariants.d.ts

@@ -0,0 +1,24 @@
+import type { Layout } from '../types';
+export declare const getHoleAnimateVariants: ({ x, y, width, height }: Layout) => {
+    initial: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    default: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    exit: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+};

package/dist/cjs/components/highlight/components/getHoleAnimateVariants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getHoleAnimateVariants=void 0;const react_native_1=require("react-native"),utils_1=require("../utils"),getHoleAnimateVariants=({x:i,y:a,width:e,height:t})=>{const{width:c,height:l}=react_native_1.Dimensions.get("window"),s=e*.9,n=t*.9,r=c*2.5,o=l*1.5;return{initial:{x:(0,utils_1.calculateOffset)({base:i,prevSize:e,nextSize:s}),y:(0,utils_1.calculateOffset)({base:a,prevSize:t,nextSize:n}),width:s,height:n,radius:16},default:{x:i,y:a,width:e,height:t,radius:16},exit:{x:(0,utils_1.calculateOffset)({base:i,prevSize:e,nextSize:r}),y:(0,utils_1.calculateOffset)({base:a,prevSize:t,nextSize:o}),width:r,height:o,radius:1e3}}};exports.getHoleAnimateVariants=getHoleAnimateVariants;

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

@@ -0,0 +1,4 @@
+export { Message } from './Message';
+export { MessageBox } from './MessageBox';
+export { PassClickEventThroughHoleOverlay } from './PassClickEventThroughHoleOverlay';
+export { SvgHighlightOverlay } from './SvgHighlightOverlay';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SvgHighlightOverlay=exports.PassClickEventThroughHoleOverlay=exports.MessageBox=exports.Message=void 0;var Message_1=require("./Message");Object.defineProperty(exports,"Message",{enumerable:!0,get:function(){return Message_1.Message}});var MessageBox_1=require("./MessageBox");Object.defineProperty(exports,"MessageBox",{enumerable:!0,get:function(){return MessageBox_1.MessageBox}});var PassClickEventThroughHoleOverlay_1=require("./PassClickEventThroughHoleOverlay");Object.defineProperty(exports,"PassClickEventThroughHoleOverlay",{enumerable:!0,get:function(){return PassClickEventThroughHoleOverlay_1.PassClickEventThroughHoleOverlay}});var SvgHighlightOverlay_1=require("./SvgHighlightOverlay");Object.defineProperty(exports,"SvgHighlightOverlay",{enumerable:!0,get:function(){return SvgHighlightOverlay_1.SvgHighlightOverlay}});

package/dist/cjs/components/highlight/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useHighlightUIAnimation } from './useHighlightUIAnimation';
+export { useTimeout } from './useTimeout';

package/dist/cjs/components/highlight/hooks/index.js

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

package/dist/cjs/components/highlight/hooks/useHighlightUIAnimation.d.ts

@@ -0,0 +1,9 @@
+export declare const useHighlightUIAnimation: () => {
+    style: {
+        overlayOpacity: import("react-native").Animated.Value;
+        holeStep: import("react-native").Animated.Value;
+        messageOpacity: import("react-native").Animated.Value;
+    };
+    enter: () => Promise<void>;
+    exit: () => Promise<void>;
+};

package/dist/cjs/components/highlight/hooks/useHighlightUIAnimation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useHighlightUIAnimation=void 0;const react_1=require("react"),react_native_1=require("react-native"),easings_1=require("@toss-design-system/easings"),animated_1=require("../../../interactions/animated"),useHighlightUIAnimation=()=>{const e=react_native_1.Platform.OS==="android",t=(0,react_1.useRef)(new animated_1.Animated.Value(e?1:0)).current,i=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,r=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current;return{style:{overlayOpacity:i,holeStep:t,messageOpacity:r},enter:()=>new Promise(n=>animated_1.Animated.parallel([...e?[]:[animated_1.Animated.spring(t,{...easings_1.spring.basic,toValue:1,useNativeDriver:!0})],animated_1.Animated.spring(i,{...easings_1.spring.basic,toValue:1,useNativeDriver:!0}),animated_1.Animated.spring(r,{...easings_1.spring.quick,toValue:1,useNativeDriver:!0})]).start(()=>{n()})),exit:()=>new Promise(n=>{animated_1.Animated.parallel([...e?[]:[animated_1.Animated.spring(t,{...easings_1.spring.slow,toValue:2,useNativeDriver:!0})],animated_1.Animated.spring(i,{...easings_1.spring.basic,toValue:0,useNativeDriver:!0}),animated_1.Animated.spring(r,{...easings_1.spring.rapid,toValue:0,useNativeDriver:!0})]).start(()=>{n()})})}};exports.useHighlightUIAnimation=useHighlightUIAnimation;

package/dist/cjs/components/highlight/hooks/useTimeout.d.ts

@@ -0,0 +1,4 @@
+export declare function useTimeout(): {
+    clear: () => void;
+    set: (fn: () => void, delay: number) => void;
+};

package/dist/cjs/components/highlight/hooks/useTimeout.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTimeout=useTimeout;const react_1=require("react");function useTimeout(){const t=(0,react_1.useRef)(null),e=(0,react_1.useCallback)(function(){t.current&&clearTimeout(t.current)},[]),u=(0,react_1.useCallback)(function(c,s){e(),t.current=setTimeout(c,s)},[e]);return(0,react_1.useEffect)(()=>e,[e]),{clear:e,set:u}}

package/dist/cjs/components/highlight/hooks/useTimestampRef.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 현재 타임스탬프를 관리합니다
+ * `active` 상태가 true일 때 타임스탬프를 현재 시간으로 업데이트하고,
+ * false일 때 타임스탬프를 0으로 초기화합니다.
+ */
+export declare function useTimestampRef({ active }: {
+    active: boolean;
+}): import("react").MutableRefObject<number>;

package/dist/cjs/components/highlight/hooks/useTimestampRef.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTimestampRef=useTimestampRef;const react_1=require("react");function useTimestampRef({active:t}){const e=(0,react_1.useRef)(0);return(0,react_1.useEffect)(()=>{t?e.current=new Date().getTime():e.current=0},[t]),e}

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

@@ -0,0 +1,2 @@
+export { Highlight } from './Highlight';
+export type { HighlightProps } from './types';

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

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

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

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export type Layout = Pick<HighlightUIProps, 'x' | 'y' | 'width' | 'height'>;
+export type XAlignmentValue = 'left' | 'center' | 'right';
+export type YAlignmentValue = 'top' | 'bottom';
+export interface HighlightUIProps extends ViewProps {
+    /**
+     * @description 하이라이트 open 여부
+     */
+    open: boolean;
+    /**
+     * @description 하이라이팅 대상의 x 위치
+     */
+    x: number;
+    /**
+     * @description 하이라이팅 대상의 y 위치
+     */
+    y: number;
+    /**
+     * @description 하이라이팅 대상의 너비
+     */
+    width: number;
+    /**
+     * @description 하이라이팅 대상의 높이
+     */
+    height: number;
+    /**
+     * @description 하이라이트 내부 padding
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * @description 하이라이트 내부 left padding
+     * @default padding
+     */
+    paddingLeft?: number;
+    /**
+     * @description 하이라이트 내부 right padding
+     * @default padding
+     */
+    paddingRight?: number;
+    /**
+     * @description 하이라이트 내부 top padding
+     * @default padding
+     */
+    paddingTop?: number;
+    /**
+     * @description 하이라이트 내부 bottom padding
+     * @default padding
+     */
+    paddingBottom?: number;
+    /**
+     * @description 하이라이트 외부 영역에 표시할 메시지
+     */
+    message?: ReactNode;
+    /**
+     * @default colors.white
+     * @description 하이라이트 외부 영역에 표시할 메시지 색상
+     */
+    messageColor?: string;
+    /**
+     * @description 하이라이트 외부 영역에 표시할 메시지의 x축 정렬
+     */
+    messageXAlignment?: XAlignmentValue;
+    /**
+     * @description 하이라이트 외부 영역에 표시할 메시지의 y축 정렬
+     */
+    messageYAlignment?: YAlignmentValue;
+    /**
+     * @description 하이라이트 외부 영역을 터치했을 때 호출되는 콜백
+     */
+    onPress?: () => void;
+    /**
+     * @description 하이라이트가 닫히는 애니메이션이 종료되었을 때 호출되는 콜백
+     */
+    onExited?: () => void;
+    /**
+     * @description 하이라이트 내부 영역을 터치했을 때 호출되는 콜백
+     */
+    onTargetPress?: () => void;
+}
+export interface HighlightProps extends Pick<HighlightUIProps, 'open' | 'padding' | 'paddingLeft' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'message' | 'messageColor' | 'messageXAlignment' | 'messageYAlignment' | 'onPress' | 'onExited' | 'onTargetPress'>, ViewProps {
+    /**
+     * @description 하이라이트 시작 지연 시간 (단위: s)
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * @description 하이라이트의 닫힘 지연 시간 (단위: s)
+     */
+    closeLockDuration?: number;
+}

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

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

package/dist/cjs/components/highlight/utils/addLayoutPadding.d.ts

@@ -0,0 +1,17 @@
+import type { Layout } from '../types';
+type AddLayoutPaddingProps = {
+    layout: Layout;
+    padding: {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+    };
+};
+export declare const addLayoutPadding: ({ layout, padding }: AddLayoutPaddingProps) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export {};

package/dist/cjs/components/highlight/utils/addLayoutPadding.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.addLayoutPadding=void 0;const addLayoutPadding=({layout:d,padding:t})=>{const{x:o,y:e,width:i,height:n}=d,s=i+t.paddingLeft+t.paddingRight,a=n+t.paddingTop+t.paddingBottom,h=o-t.paddingLeft,r=e-t.paddingTop;return{x:h,y:r,width:s,height:a}};exports.addLayoutPadding=addLayoutPadding;

package/dist/cjs/components/highlight/utils/calculateOffset.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @returns base - (nextSize - prevSize) / 2
+ */
+export declare const calculateOffset: ({ base, prevSize, nextSize }: {
+    base: number;
+    prevSize: number;
+    nextSize: number;
+}) => number;

package/dist/cjs/components/highlight/utils/calculateOffset.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calculateOffset=void 0;const calculateOffset=({base:e,prevSize:t,nextSize:s})=>e-(s-t)/2;exports.calculateOffset=calculateOffset;

package/dist/cjs/components/highlight/utils/generateSvgPath.d.ts

@@ -0,0 +1,8 @@
+import type { Layout } from '../types';
+export declare const generateRadiusRectanglePath: ({ x, y, width, height, radius }: Layout & {
+    radius: number;
+}) => string;
+export declare const generateWindowPath: () => string;
+export declare const generateOverlayPath: ({ width, height, x, y, radius }: Layout & {
+    radius: number;
+}) => string;

package/dist/cjs/components/highlight/utils/generateSvgPath.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.generateOverlayPath=exports.generateWindowPath=exports.generateRadiusRectanglePath=void 0;const react_native_1=require("react-native"),{width:windowWidth,height:windowHeight}=react_native_1.Dimensions.get("window"),generateRadiusRectanglePath=({x:$,y:t,width:o,height:n,radius:e})=>{const a=Math.min(e,o/2),c=Math.min(e,n/2);return`
+  M ${$} ${t+c} 
+  Q ${$} ${t} ${$+a} ${t}
+  L ${$+o-a} ${t}
+  Q ${$+o} ${t} ${$+o} ${t+c}
+  L ${$+o} ${t+n-c}
+  Q ${$+o} ${t+n} ${$+o-a} ${t+n}
+  L ${$+a} ${t+n}
+  Q ${$} ${t+n} ${$} ${t+n-c}
+  Z
+`};exports.generateRadiusRectanglePath=generateRadiusRectanglePath;const generateWindowPath=()=>`
+  M 0 0
+  L ${windowWidth} 0
+  L ${windowWidth} ${windowHeight}
+  L 0 ${windowHeight}
+  Z
+  `;exports.generateWindowPath=generateWindowPath;const generateOverlayPath=({width:$,height:t,x:o,y:n,radius:e})=>`M${windowWidth},${windowHeight}H0V0H${windowWidth}V${windowHeight}ZM${o+e},${n}a${e},${e},0,0,0-${e},${e}V${t+n-e}a${e},${e},0,0,0,${e},${e}H${$+o-e}a${e},${e},0,0,0,${e}-${e}V${n+e}a${e},${e},0,0,0-${e}-${e}Z`;exports.generateOverlayPath=generateOverlayPath;

package/dist/cjs/components/highlight/utils/getElementAlignment.d.ts

@@ -0,0 +1,10 @@
+export declare function getElementXAlignment({ x, width, parentWidth }: {
+    x: number;
+    width: number;
+    parentWidth: number;
+}): "right" | "left" | "center";
+export declare function getElementYAlignment({ y, height, parentHeight }: {
+    y: number;
+    height: number;
+    parentHeight: number;
+}): "top" | "bottom";

package/dist/cjs/components/highlight/utils/getElementAlignment.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getElementXAlignment=getElementXAlignment,exports.getElementYAlignment=getElementYAlignment;function getElementXAlignment({x:n,width:r,parentWidth:o}){const e=n+r/2,t=o/2;return Math.abs(e-t)<=10?"center":e<t?"left":"right"}function getElementYAlignment({y:n,height:r,parentHeight:o}){const e=n+r/2,t=o/2;return e>=t?"top":"bottom"}

package/dist/cjs/components/highlight/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { addLayoutPadding } from './addLayoutPadding';
+export { calculateOffset } from './calculateOffset';
+export { generateOverlayPath, generateRadiusRectanglePath, generateWindowPath } from './generateSvgPath';
+export { getElementXAlignment, getElementYAlignment } from './getElementAlignment';
+export { sToMs } from './sToMs';

package/dist/cjs/components/highlight/utils/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sToMs=exports.getElementYAlignment=exports.getElementXAlignment=exports.generateWindowPath=exports.generateRadiusRectanglePath=exports.generateOverlayPath=exports.calculateOffset=exports.addLayoutPadding=void 0;var addLayoutPadding_1=require("./addLayoutPadding");Object.defineProperty(exports,"addLayoutPadding",{enumerable:!0,get:function(){return addLayoutPadding_1.addLayoutPadding}});var calculateOffset_1=require("./calculateOffset");Object.defineProperty(exports,"calculateOffset",{enumerable:!0,get:function(){return calculateOffset_1.calculateOffset}});var generateSvgPath_1=require("./generateSvgPath");Object.defineProperty(exports,"generateOverlayPath",{enumerable:!0,get:function(){return generateSvgPath_1.generateOverlayPath}}),Object.defineProperty(exports,"generateRadiusRectanglePath",{enumerable:!0,get:function(){return generateSvgPath_1.generateRadiusRectanglePath}}),Object.defineProperty(exports,"generateWindowPath",{enumerable:!0,get:function(){return generateSvgPath_1.generateWindowPath}});var getElementAlignment_1=require("./getElementAlignment");Object.defineProperty(exports,"getElementXAlignment",{enumerable:!0,get:function(){return getElementAlignment_1.getElementXAlignment}}),Object.defineProperty(exports,"getElementYAlignment",{enumerable:!0,get:function(){return getElementAlignment_1.getElementYAlignment}});var sToMs_1=require("./sToMs");Object.defineProperty(exports,"sToMs",{enumerable:!0,get:function(){return sToMs_1.sToMs}});

package/dist/cjs/components/highlight/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { ForwardedRef, LegacyRef, MutableRefObject, Ref } from 'react';
+export declare function mergeRefs<T = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | ForwardedRef<T>>): Ref<T>;

package/dist/cjs/components/highlight/utils/mergeRefs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeRefs=mergeRefs;function mergeRefs(...r){return t=>{r.forEach(e=>{typeof e=="function"?e(t):e!=null&&(e.current=t)})}}

package/dist/cjs/components/highlight/utils/sToMs.d.ts

@@ -0,0 +1 @@
+export declare const sToMs: (s: number) => number;

package/dist/cjs/components/highlight/utils/sToMs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sToMs=void 0;const sToMs=s=>s*1e3;exports.sToMs=sToMs;

package/dist/cjs/components/icon/Icon.d.ts

@@ -0,0 +1,12 @@
+import { View, ViewProps } from 'react-native';
+export interface IconProps extends Pick<ViewProps, 'accessibilityLabel' | 'accessible' | 'style'> {
+    size?: number;
+    color?: string;
+    /** @default default */
+    type?: 'default' | 'circle';
+    name: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<View>> & {
+    prefetchIcon: (name: string) => Promise<void>;
+};
+export default _default;

package/dist/cjs/components/icon/Icon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),react_1=require("react"),react_native_1=require("react-native"),useCachedData_1=require("./useCachedData"),ICON_URL_PREFIX="https://static.toss.im/icons/svg",cache={},isUnsupportedTag=e=>e.includes("<pattern")?{isUnsupported:!0,tagName:"pattern"}:{isUnsupported:!1},Icon=(0,react_1.forwardRef)(function({name:t,color:r,size:n=24,accessible:a,accessibilityLabel:o,type:u="default",style:i},l){const{data:s,showFallback:d}=(0,useCachedData_1.useCachedData)(cache,t,fetchIcon,[t]),c=isUnsupportedTag(s??"");if(c.isUnsupported&&__DEV__)throw new Error(`\uC544\uC774\uCF58 \uB9AC\uC18C\uC2A4\uC5D0 \uBBF8\uC9C0\uC6D0\uB418\uB294 \uD0DC\uADF8\uAC00 \uC788\uC5B4 \uC548\uC804\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. #request-\uADF8\uB798\uD53D \uCC44\uB110\uC5D0 \uB300\uCCB4 \uC544\uC774\uCF58\uC744 \uC694\uCCAD \uD574\uC8FC\uC138\uC694. (\uC544\uC774\uCF58\uBA85: ${t}, \uBBF8\uC9C0\uC6D0 \uD0DC\uADF8: ${c.tagName})`);const f=(0,react_1.useMemo)(()=>{if(s===void 0)return;const p=/fill="#[0-9a-fA-F]{6}"/g,h=/stroke="#[0-9a-fA-F]{6}"/g;return r!==void 0?s.replace(p,`fill="${r}"`).replace(h,`stroke="${r}"`):s},[s,r]);return(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:l,style:[u==="circle"?{borderRadius:n/2,overflow:"hidden"}:void 0,{width:n,aspectRatio:1},...Array.isArray(i)?i:[i]],accessibilityRole:"image",accessibilityLabel:o,accessible:a,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.SvgXml,{width:"100%",height:"100%",color:r,fill:r,xml:f??null}),d?(0,jsx_runtime_1.jsx)(react_native_svg_1.SvgUri,{width:"100%",height:"100%",uri:getIconUrl(t),style:{backgroundColor:"yellow"}}):null]})});async function fetchIcon(e){return(await fetch(getIconUrl(e))).text()}function getIconUrl(e){const t=e.startsWith("icn-")||e.startsWith("icon-")?e:`icn-${e}`;return`${ICON_URL_PREFIX}/${t}.svg`}exports.default=Object.assign(Icon,{prefetchIcon:async e=>{const t=await fetchIcon(e);cache[e]=t}});

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

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

package/dist/cjs/components/icon/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.Icon=void 0;var Icon_1=require("./Icon");Object.defineProperty(exports,"Icon",{enumerable:!0,get:function(){return __importDefault(Icon_1).default}});

package/dist/cjs/components/icon/private/SvgIcon.d.ts

@@ -0,0 +1,21 @@
+import { SvgProps } from '@granite-js/native/react-native-svg';
+import { Component } from 'react';
+export interface SvgIconProps extends SvgProps {
+    size?: number;
+    color?: string;
+    /** @default default */
+    type?: 'default' | 'circle';
+    name: string;
+}
+/**
+ * @remarks react-native의 createAnimatedComponent가 functional component를
+ * animating 하지 못하는 이슈가 있어서 class로 wrapping 합니다
+ */
+declare class SvgIconClass extends Component<SvgIconProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare const SvgIcon: typeof SvgIconClass & {
+    Root: typeof SvgIconClass;
+    prefetchIcon: (name: string) => Promise<void>;
+};
+export {};

package/dist/cjs/components/icon/private/SvgIcon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SvgIcon=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),react_1=require("react"),useCachedData_1=require("../useCachedData"),ICON_URL_PREFIX="https://static.toss.im/icons/svg",cache={},fillAttributesRe=/fill="#[0-9a-fA-F]{6}"/g,strokeAttributesRe=/stroke="#[0-9a-fA-F]{6}"/g,Icon=(0,react_1.forwardRef)(function({name:t,color:n,size:c=24,accessible:d,accessibilityLabel:f,type:p="default",children:i,...h},a){const{data:s,showFallback:x}=(0,useCachedData_1.useCachedData)(cache,t,fetchIcon,[t]),r=(0,react_1.useMemo)(()=>s===void 0?null:n!==void 0?(0,react_native_svg_1.parse)(s.replace(fillAttributesRe,"").replace(strokeAttributesRe,"")):(0,react_native_svg_1.parse)(s),[s,n]),g=(0,react_1.useMemo)(()=>s===void 0||n===void 0?{}:{fill:s.match(fillAttributesRe)?n:void 0,stroke:s.match(strokeAttributesRe)?n:void 0},[s,n]),o={width:c,height:c,accessibilityRole:"image",accessibilityLabel:f,accessible:d,...g,...h};if(r==null)return(0,jsx_runtime_1.jsx)(react_native_svg_1.Svg,{ref:a,...o,children:i});if(x)return(0,jsx_runtime_1.jsx)(react_native_svg_1.SvgUri,{uri:getIconUrl(t),...o,children:i});const[,,u=c,l=c]=(r.props.viewBox??"").split(" ").map(Number);if(p==="circle"){const v=u/2,j=l/2,_=Math.min(u,l)/2;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{ref:a,...r.props,...o,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsx)(react_native_svg_1.ClipPath,{id:"clip",children:(0,jsx_runtime_1.jsx)(react_native_svg_1.Circle,{cx:v,cy:j,r:_})})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.G,{clipPath:"url(#clip)",children:r.children}),i]})}return(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{ref:a,...r.props,...o,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.G,{children:r.children}),i]})});async function fetchIcon(e){return(await fetch(getIconUrl(e))).text()}function getIconUrl(e){const t=e.startsWith("icn-")||e.startsWith("icon-")?e:`icn-${e}`;return`${ICON_URL_PREFIX}/${t}.svg`}class SvgIconClass extends react_1.Component{render(){return(0,jsx_runtime_1.jsx)(Icon,{...this.props})}}exports.SvgIcon=Object.assign(SvgIconClass,{Root:SvgIconClass,prefetchIcon:async e=>{const t=await fetchIcon(e);cache[e]=t}});

package/dist/cjs/components/icon/private/index.d.ts

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

package/dist/cjs/components/icon/private/index.js

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

package/dist/cjs/components/icon/useCachedData.d.ts

@@ -0,0 +1,4 @@
+export declare function useCachedData<T>(cache: Record<string, any>, cacheKey: string, promise: (...inputs: any) => Promise<T>, inputs?: any[]): {
+    data: T | undefined;
+    showFallback: boolean;
+};

package/dist/cjs/components/icon/useCachedData.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useCachedData=useCachedData;const react_1=require("react"),request={};function useCachedData(e,t,n,a=[]){const[o,u]=(0,react_1.useState)(e[t]),[i,r]=(0,react_1.useState)(!1);return(0,react_1.useEffect)(()=>{if(e[t]!=null){u(e[t]),r(!1);return}let s=!1;async function l(){request[t]===void 0&&(request[t]=n(...a));try{const f=await request[t];s||(e[t]=f,u(e[t]),r(!1))}catch{s||r(!0)}}return l(),()=>{s=!0}},[n,a]),{data:o,showFallback:i}}function getCacheKeyfromInputs(e){return e.map(t=>JSON.stringify(t)).join(",")}

package/dist/cjs/components/icon-button/IconButton.d.ts

@@ -0,0 +1,21 @@
+import { ImageProps as SvgImageProps } from '@granite-js/native/react-native-svg';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+type Variant = 'fill' | 'clear' | 'border';
+type Asset = {
+    source: SvgImageProps['href'];
+    name?: never;
+} | {
+    source?: never;
+    name: string;
+};
+interface IconButtonBaseProps extends PressableProps {
+    color?: string;
+    bgColor?: string;
+    variant?: Variant;
+    iconSize?: number;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export type IconButtonProps = IconButtonBaseProps & Asset;
+export declare const IconButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<View>>>;
+export {};

package/dist/cjs/components/icon-button/IconButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IconButton=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),easings_1=require("@toss-design-system/easings"),animated_1=require("../../interactions/animated"),color_utils_1=require("@toss-design-system/color-utils"),core_1=require("../../core"),private_1=require("../icon/private"),generateHapticFeedback_1=require("../../native/generateHapticFeedback"),react_1=require("react"),react_native_1=require("react-native"),AnimatedSvg=animated_1.Animated.createAnimatedComponent(react_native_svg_1.Svg),AnimatedRect=animated_1.Animated.createAnimatedComponent(react_native_svg_1.Rect),AnimatedPressable=animated_1.Animated.createAnimatedComponent(react_native_1.Pressable),IconButtonImpl=(0,react_1.forwardRef)(function({source:d,name:g,color:r,bgColor:h,variant:t="clear",label:A,iconSize:o=24,children:y,style:x,onPressIn:p,onPressOut:m,...C},k){const f=(0,core_1.useAdaptive)(),c=h??f.greyOpacity100,R={borderWidth:1,borderStyle:"solid",borderColor:f.greyOpacity100},n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,i=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,_=n.interpolate({inputRange:[0,1],outputRange:[c,(0,color_utils_1.getNextColorValue)({color:c})]}),a=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,V=a.interpolate({inputRange:[0,1],outputRange:["transparent",c]}),u=r!=null,s=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,q=s.interpolate({inputRange:[0,1],outputRange:[r??"grey",r?(0,color_utils_1.getNextColorValue)({color:r}):"grey"]}),v=(0,react_1.useCallback)(()=>{animated_1.Animated.spring(i,{toValue:.9,useNativeDriver:!1,...easings_1.spring.rapid}).start(),t==="fill"?animated_1.Animated.timing(n,{toValue:1,useNativeDriver:!1,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:500}).start():animated_1.Animated.spring(a,{toValue:1,useNativeDriver:!1,...easings_1.spring.rapid}).start(),u&&animated_1.Animated.spring(s,{toValue:1,useNativeDriver:!1,...easings_1.spring.rapid}).start()},[n,a,s,i,t,u]),b=(0,react_1.useCallback)(()=>{animated_1.Animated.spring(i,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick}).start(),t==="fill"?animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:500}).start():animated_1.Animated.spring(a,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick}).start(),u&&animated_1.Animated.spring(s,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick}).start()},[n,a,s,i,t,u]),w=(0,react_1.useCallback)(l=>{v(),p?.(l),(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"})},[v,p]),I=(0,react_1.useCallback)(l=>{b(),m?.(l)},[m,b]);return(0,jsx_runtime_1.jsx)(AnimatedPressable,{ref:k,style:[{borderRadius:getRadius(o),transform:[{scale:i}],padding:getPaddingFromSize(o),backgroundColor:t==="fill"?_:V,...t==="border"?R:void 0},x],onPressIn:w,onPressOut:I,accessible:!0,accessibilityRole:"button",accessibilityLabel:A,...C,children:(0,jsx_runtime_1.jsx)(AnimatedSvg,{height:o,width:o,viewBox:"0 0 100 100",children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(react_native_svg_1.Mask,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[d!==void 0&&(0,jsx_runtime_1.jsx)(react_native_svg_1.Image,{href:d,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),g!==void 0&&(0,jsx_runtime_1.jsx)(private_1.SvgIcon,{name:g,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"})]}),(0,jsx_runtime_1.jsx)(AnimatedRect,{x:"0",y:"0",width:"100%",height:"100%",mask:"url(#mask)",fill:r&&q}),y]})})})});exports.IconButton=(0,react_1.memo)(IconButtonImpl);function getPaddingFromSize(e){return 18<=e&&e<=20?9:e/2}function getRadius(e){return e<=16?6:e<=20?8:12}