@toss/tds-react-native 1.0.0

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { ReactElement, RefCallback, RefObject } from 'react';
+export type ReactElementWithRef = ReactElement & {
+    ref?: RefObject<any> | RefCallback<any>;
+};
+export type Placement = 'bottom-start' | 'bottom-end';

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

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

package/dist/esm/components/dropdown/utils/mergeRefs.d.ts

@@ -0,0 +1 @@
+export declare function mergeRefs<T = any>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.Ref<T>;

package/dist/esm/components/dropdown/utils/mergeRefs.js

@@ -0,0 +1 @@
+"use strict";export function mergeRefs(...e){return t=>{e.forEach(n=>{typeof n=="function"?n(t):n!=null&&(n.current=t)})}}

package/dist/esm/components/dropdown/utils/transformOriginXY.d.ts

@@ -0,0 +1,34 @@
+/**
+ * x, y 에 기준점을 주면 그에 맞는 translateX, translateY 가 반환됩니다.
+ * react-native 에는 transformOrigin 이 없어 우회하여 구현합니다.
+ *
+ * 예를들어, x=100, y=100인 요소의 x=0.5, y=1 을 기준점으로 갖게하는 translateX, translateY 반환
+ * transform property 순서는 [Y0, X0, <Transform>, X1, Y1]
+ * @example
+ * ```ts
+ * const {translateX, translateY} = transformOriginXY({ x: 0.5, y: 1, width: 100, height: 100 });
+ *
+ *
+ *  <View
+ *    style={{
+ *        transform: [
+ *          { translateY: translateY[0] },
+ *          { translateX: translateX[0] },
+ *          { scale: 1 },
+ *          { translateX: translateX[1] },
+ *          { translateY: translateY[1] }
+ *        ]
+ *    }}
+ *  />
+ * ```
+ * @returns
+ */
+export declare function transformOriginXY({ x, y, width, height }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    translateX: [number, number];
+    translateY: [number, number];
+};

package/dist/esm/components/dropdown/utils/transformOriginXY.js

@@ -0,0 +1 @@
+"use strict";export function transformOriginXY({x:r,y:t,width:a,height:o}){const n={x:.5,y:.5};return{translateX:[a*(r-n.x),a*(n.x-r)],translateY:[o*(t-n.y),o*(n.y-t)]}}

package/dist/esm/components/error-page/ErrorPage.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type ErrorPageProps = {
+    statusCode?: number;
+    title?: string;
+    subtitle?: string;
+    onPressRightButton?: () => void;
+    onPressLeftButton?: () => void;
+} & PropsWithChildren;
+export declare const ErrorPage: ({ statusCode, title, subtitle, onPressLeftButton, onPressRightButton, children, }: ErrorPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/error-page/ErrorPage.js

@@ -0,0 +1,2 @@
+"use strict";import{jsx as t,jsxs as h}from"react/jsx-runtime";import{Image as f}from"react-native";import{useAdaptive as b}from"../../core";import{Asset as C}from"../asset";import{Button as i}from"../button";import{FixedBottomCTA as x,FixedBottomCTAProvider as A}from"../fixed-bottom-cta";import{Top as r}from"../top";export const ErrorPage=({statusCode:e=500,title:s,subtitle:o,onPressLeftButton:a,onPressRightButton:u,children:n})=>{const l=b(),{title:m,subtitle:p,image:c}=j(e),d=s??m,g=o??p;return h(A,{children:[t(r,{title:t(r.TitleParagraph,{color:l.grey900,children:d}),subtitle2:t(r.SubtitleParagraph,{children:g}),upper:t(r.UpperAssetContent,{content:t(f,{source:{uri:c},"aria-hidden":!0,style:C.frameShape.CleanW60})})}),n,t(x.Double,{leftButton:t(i,{type:"dark",style:"weak",onPress:a,children:"\uACE0\uAC1D\uC13C\uD130 \uBB38\uC758"}),rightButton:t(i,{type:"primary",style:"fill",onPress:u,children:e===400?"\uB2E4\uC2DC \uC785\uB825\uD558\uAE30":"\uB2EB\uAE30"})})]})};const j=e=>{switch(e){case 404:return{title:"\uC815\uBCF4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694",subtitle:"\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uAC70\uB098, \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F519-return.png"};case 400:return{title:`\uC785\uB825\uD55C \uC815\uBCF4\uB97C 
+\uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694`,subtitle:"\uC815\uD655\uD558\uC9C0 \uC54A\uC740 \uC815\uBCF4\uAC00 \uC788\uC5B4\uC694. \uB9DE\uAC8C \uC785\uB825\uD588\uB294\uB370\uB3C4 \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F519-return.png"};default:return{title:"\uC77C\uC2DC\uC801\uC778 \uC624\uB958\uAC00 \uC0DD\uACBC\uC5B4\uC694",subtitle:"\uBB38\uC81C\uC758 \uC6D0\uC778\uC744 \uCC3E\uC544 \uD574\uACB0\uD558\uACE0 \uC788\uC5B4\uC694. \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F6A7-orange-cone.png"}}};

package/dist/esm/components/error-page/index.d.ts

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

package/dist/esm/components/error-page/index.js

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

package/dist/esm/components/fixed-bottom-cta/FixedBottomCTA.d.ts

@@ -0,0 +1,19 @@
+import { BottomCTADoubleProps, BottomCTASingleProps } from '../bottom-cta';
+export type FixedBottomCTASingleProps = Omit<BottomCTASingleProps, 'display' | 'keyboardStyleEnabled'>;
+export type FixedBottomCTADoubleProps = Omit<BottomCTADoubleProps, 'keyboardStyleEnabled'>;
+/**
+ * FixdBottomCTAConsumer 없이 쓰고 싶은 경우 사용합니다.
+ * 예를들어, FixedBottomCTAConsumer 내에 다른 요소를 넣고 싶은 경우입니다.
+ */
+export declare function FixedBottomCTAWithoutConsumer(props: BottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FixdBottomCTAConsumer 없이 쓰고 싶은 경우 사용합니다.
+ * 예를들어, FixedBottomCTAConsumer 내에 다른 요소를 넣고 싶은 경우입니다.
+ */
+export declare function FixedBottomCTADoubleWithoutConsumer(props: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export declare function FixedBottomCTA(props: FixedBottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FixedBottomCTA {
+    var Double: typeof FixedBottomCTADouble;
+}
+declare function FixedBottomCTADouble(props: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/fixed-bottom-cta/FixedBottomCTA.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{BottomCTA as r,BottomCTAGradient as n}from"../bottom-cta";import{useAdaptive as i}from"../../core";import{FixedBottomCTAConsumer as u}from"./providers/FixedBottomCTAContext";export function FixedBottomCTAWithoutConsumer(t){const e=i();return o(r.Single,{keyboardStyleEnabled:!0,gradient:o(n,{stopColor:e.background}),...t})}export function FixedBottomCTADoubleWithoutConsumer(t){const e=i();return o(r.Double,{keyboardStyleEnabled:!0,gradient:o(n,{stopColor:e.background}),...t})}export function FixedBottomCTA(t){return o(u,{children:o(FixedBottomCTAWithoutConsumer,{...t})})}function d(t){return o(u,{children:o(FixedBottomCTADoubleWithoutConsumer,{...t})})}FixedBottomCTA.Double=d;

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

@@ -0,0 +1,2 @@
+export * from './FixedBottomCTA';
+export { FixedBottomCTAProvider, FixedBottomCTAConsumer } from './providers/FixedBottomCTAContext';

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

@@ -0,0 +1 @@
+"use strict";export*from"./FixedBottomCTA";export{FixedBottomCTAProvider,FixedBottomCTAConsumer}from"./providers/FixedBottomCTAContext";

package/dist/esm/components/fixed-bottom-cta/providers/FixedBottomCTAContext.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ReactElement, ReactNode } from 'react';
+export declare function FixedBottomCTAProvider<WrapperProps = unknown>({ children, wrapper, wrapperProps, }: {
+    children: ReactNode;
+    wrapper?: ComponentType<WrapperProps>;
+    wrapperProps?: WrapperProps;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FixedBottomCTAConsumer({ children }: {
+    children: ReactElement;
+}): null;

package/dist/esm/components/fixed-bottom-cta/providers/FixedBottomCTAContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n,Fragment as f,jsxs as s}from"react/jsx-runtime";import{KeyboardAboveView as T}from"@granite-js/react-native";import{BottomCTAGradient as c}from"../../bottom-cta";import{createContext as A,useCallback as u,useContext as B,useEffect as F,useMemo as h,useState as E}from"react";import{ScrollView as v,View as a}from"react-native";const x=A(null);export function FixedBottomCTAProvider({children:t,wrapper:e=v,wrapperProps:o}){const r=e,[d,l]=E(null),i=u(C=>{l(C)},[]),m=u(()=>{l(null)},[]),p=h(()=>({render:i,cleanup:m}),[i,m]);return s(x.Provider,{value:p,children:[n(r,{style:{flex:1},...o,children:s(f,{children:[t,n(a,{style:{height:c.HEIGHT}})]})}),s(T,{children:[n(a,{style:{marginTop:-(c.HEIGHT-1)}}),d]})]})}export function FixedBottomCTAConsumer({children:t}){const e=B(x);if(e==null)throw new Error("FixedBottomCTAContext \uB294 FixedBottomCTAProvider \uC5D0\uC11C \uC2E4\uD589\uD574\uC57C\uD569\uB2C8\uB2E4.");const{render:o,cleanup:r}=e;return F(()=>(o(t),()=>{r()}),[t,r,o]),null}

package/dist/esm/components/gradient/LinearGradient.d.ts

@@ -0,0 +1,4 @@
+import { GetLinearGradientOption } from '@toss-design-system/color-utils';
+import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+export type LinearGradientProps = GetLinearGradientOption & SvgProps;
+export declare const LinearGradient: import("react").ForwardRefExoticComponent<LinearGradientProps & import("react").RefAttributes<Svg>>;

package/dist/esm/components/gradient/LinearGradient.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n,jsxs as M}from"react/jsx-runtime";import{fixedDecimalRound as D,getLinearGradientRgbaArray as G}from"@toss-design-system/color-utils";import{forwardRef as L,useMemo as f}from"react";import{Defs as S,LinearGradient as R,Rect as j,Stop as C,Svg as I}from"@granite-js/native/react-native-svg";const b=4;export const LinearGradient=L(function({children:d,degree:r="180deg",easing:a,colors:e,positions:o,colorStopCount:i,...g},p){const h=f(()=>G({easing:a,colors:e,positions:o,colorStopCount:i}).map(({rgba:s,position:c})=>{const[l,u,x,y]=s;return{offset:D(c*100,b)+"%",stopColor:`rgb(${l}, ${u}, ${x})`,stopOpacity:y}}),[JSON.stringify(e)]),m=f(()=>O(r),[r]);return M(I,{ref:p,height:"100%",width:"100%",...g,children:[n(S,{children:n(R,{id:"grad",...m,children:h.map((s,c)=>n(C,{...s},c))})}),n(j,{x:0,y:0,width:"100%",height:"100%",fill:"url(#grad)"}),d]})});function w(t){return typeof t=="string"?parseFloat(t.replace("deg","").trim()):t}function O(t){const r=w(t)%360*Math.PI/180,a=.5-.5*Math.sin(r),e=.5+.5*Math.cos(r),o=.5+.5*Math.sin(r),i=.5-.5*Math.cos(r);return{x1:a,y1:e,x2:o,y2:i}}

package/dist/esm/components/gradient/RadialGradient.d.ts

@@ -0,0 +1,16 @@
+import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+type ColorWithOpacity = {
+    value: string;
+    opacity?: number;
+};
+type Option = {
+    colors: Array<ColorWithOpacity | string>;
+    /**
+     * @description 색깔 분포. 색상 배열과 동일한 길이.
+     * [0, 1]
+     */
+    positions?: number[];
+};
+export type RadialGradientProps = Option & SvgProps;
+export declare const RadialGradient: import("react").ForwardRefExoticComponent<Option & SvgProps & import("react").RefAttributes<Svg>>;
+export {};

package/dist/esm/components/gradient/RadialGradient.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as R}from"react/jsx-runtime";import{ensureColorValue as h,extractNumbersFromRGBA as y,fixedDecimalRound as S,getDefaultPosition as C,getRGBAFromColors as G}from"@toss-design-system/color-utils";import{forwardRef as O,useMemo as b}from"react";import{Defs as j,RadialGradient as A,Rect as D,Stop as w,Svg as I}from"@granite-js/native/react-native-svg";const N=4;export const RadialGradient=O(function({children:e,colors:i,positions:a,...n},c){const d=b(()=>{const o=h(i),t=G(o).map(y),s=a??C(o);return t.map((l,p)=>{const f=s[p]??1,[m,g,u,x]=l;return{offset:S(f*100,N)+"%",stopColor:`rgb(${m}, ${g}, ${u})`,stopOpacity:x}})},[JSON.stringify(i)]);return R(I,{ref:c,height:"100%",width:"100%",...n,children:[r(j,{children:r(A,{gradientUnits:"userSpaceOnUse",id:"grad",cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%",children:d.map(({offset:o,stopColor:t,stopOpacity:s})=>r(w,{offset:o,stopColor:t,stopOpacity:s},o))})}),r(D,{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#grad)"}),e]})});

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

@@ -0,0 +1,4 @@
+export { LinearGradient } from './LinearGradient';
+export type { LinearGradientProps } from './LinearGradient';
+export { RadialGradient } from './RadialGradient';
+export type { RadialGradientProps } from './RadialGradient';

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

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

package/dist/esm/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/esm/components/grid-list/GridList.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{StyleSheet as m,View as n}from"react-native";import{MARGIN as s}from"./const";import{GridListContext as a}from"./GridListContext";import{GridListItem as f}from"./GridListItem";function t({children:e,column:i,style:o}){return r(a.Provider,{value:{column:i},children:r(n,{style:[l.container,o],children:e})})}const l=m.create({container:{flexWrap:"wrap",flexDirection:"row",margin:s*-1}});t.Item=f;export default t;

package/dist/esm/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/esm/components/grid-list/GridListContext.js

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

package/dist/esm/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/esm/components/grid-list/GridListItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useAdaptive as a}from"../../core";import{Txt as p}from"../txt";import{isReactText as g}from"../../utils";import{Children as f,useContext as y}from"react";import{StyleSheet as h,TouchableHighlight as u,View as e}from"react-native";import{MARGIN as x}from"./const";import{GridListContext as C}from"./GridListContext";function j({children:i}){const r=a();return t(p,{typography:"st11",color:r.grey900,fontWeight:"medium",style:{textAlign:"center"},children:i})}export function GridListItem({image:i,title:r,style:s,onPress:l}){const n=a(),{column:c}=y(C);return t(e,{style:{flexBasis:`${100/c}%`},children:t(u,{activeOpacity:1,underlayColor:n.grey100,style:[m.itemContainer,{backgroundColor:n.opacity50},s],onPress:l,children:d(e,{children:[t(e,{style:m.itemImageContainer,children:i}),t(e,{children:f.map(r,o=>g(o)?t(j,{children:o}):o)})]})})})}const m=h.create({itemContainer:{margin:x,flex:1,paddingVertical:12,paddingHorizontal:8,borderRadius:9},itemImageContainer:{alignItems:"center",justifyContent:"center",maxHeight:28,marginBottom:6}});

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

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

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

@@ -0,0 +1 @@
+"use strict";export const MARGIN=4;

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

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

package/dist/esm/components/grid-list/index.js

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

package/dist/esm/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/esm/components/grid-list/types.js

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

package/dist/esm/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/esm/components/highlight/Highlight.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{forwardRef as S,useEffect as V,useRef as W}from"react";import{View as n}from"react-native";import{colors as _}from"@toss-design-system/colors";import{useOverlay as k}from"../../core";import{HighlightUI as q}from"./HighlightUI";import{useTimeout as z}from"./hooks";import{useTimestampRef as A}from"./hooks/useTimestampRef";import{mergeRefs as B}from"./utils/mergeRefs";export const Highlight=S(function({open:r,delay:c=0,padding:e=0,paddingLeft:u=e,paddingTop:l=e,paddingRight:h=e,paddingBottom:p=e,message:a,messageColor:g=_.white,messageXAlignment:w,messageYAlignment:R,onPress:o,onExited:v,onTargetPress:x,children:T,closeLockDuration:H=0,...i},I){const j={padding:e,paddingLeft:u,paddingTop:l,paddingRight:h,paddingBottom:p,message:a,messageColor:g,messageXAlignment:w,messageYAlignment:R,onPress:o,onTargetPress:x,...i},m=k(),s=z(),f=W(null),y=A({active:r});return V(()=>{if(r)return s.set(()=>{f.current?.measureInWindow((E,P,U,b)=>{m.open(({isOpen:C,close:D,exit:O})=>t(q,{...j,x:E,y:P,width:U,height:b,open:C,onPress:()=>{new Date().getTime()-y.current>H*1e3&&(o?.(),D())},onExited:()=>{v?.(),O()}}))})},c*1e3),s.clear;m.close()},[r]),t(n,{...i,children:t(n,{ref:B(I,f),removeClippedSubviews:!1,children:T})})});

package/dist/esm/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/esm/components/highlight/HighlightUI.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as c,Fragment as I}from"react/jsx-runtime";import{forwardRef as U}from"react";import{Dimensions as X,StyleSheet as Y,View as _}from"react-native";import{colors as M}from"@toss-design-system/colors";import{useAnimatePresence as T}from"../../utils";import{Message as W,MessageBox as k,PassClickEventThroughHoleOverlay as B,SvgHighlightOverlay as C}from"./components";import{useHighlightUIAnimation as D}from"./hooks";import{addLayoutPadding as L,getElementXAlignment as R,getElementYAlignment as V}from"./utils";export const HighlightUI=U(function({open:y,x:l,y:r,width:s,height:a,padding:e=0,paddingLeft:p=e,paddingTop:u=e,paddingRight:f=e,paddingBottom:A=e,message:t,messageColor:d=M.white,messageXAlignment:v,messageYAlignment:w,onPress:x,onExited:H,onTargetPress:S,...m},E){const n=L({layout:{x:l,y:r,width:s,height:a},padding:{paddingLeft:p,paddingTop:u,paddingRight:f,paddingBottom:A}}),{style:o,enter:j,exit:O}=D(),{width:P,height:b}=X.get("window"),F=v??R({x:l,width:s,parentWidth:P}),g=w??V({y:r,height:a,parentHeight:b}),{presenceState:h}=T(y,{enter:j,exit:O,onExited:H});return h==="invisible"?null:c(I,{children:[c(_,{ref:E,...m,style:[Y.absoluteFill,{pointerEvents:"none"},m.style],children:[i(C,{layout:n,opacity:o.overlayOpacity,holeStep:o.holeStep}),t&&i(k,{layout:n,opacity:o.messageOpacity,yAlignment:g,children:typeof t=="string"?i(W,{layout:n,color:d,xAlignment:F,yAlignment:g,children:t}):t})]}),i(B,{layout:n,onPress:x,onTargetPress:S,style:{pointerEvents:h==="invisible-animation"?"none":"auto"}})]})});

package/dist/esm/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/esm/components/highlight/components/Message.js

@@ -0,0 +1 @@
+"use strict";import{jsx as f}from"react/jsx-runtime";import{Txt as p}from"../../txt";import{useState as l}from"react";import{Dimensions as m}from"react-native";export const Message=({color:r,children:s,layout:o,xAlignment:t,yAlignment:n})=>{const[d,a]=l(null),e=t==="center"?-(d?.width??0)/2+o.x+o.width/2:t==="left"?10:0,i=t==="right"?10:0;return f(p,{onLayout:h=>{a(h.nativeEvent.layout)},color:r,typography:"t6",fontWeight:"bold",textAlign:t,style:{position:"absolute",maxWidth:m.get("window").width-(i+e),left:e,right:i,bottom:n==="top"?0:void 0},children:s})};

package/dist/esm/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/esm/components/highlight/components/MessageBox.js

@@ -0,0 +1 @@
+"use strict";import{jsx as m,jsxs as w}from"react/jsx-runtime";import{useEffect as v,useRef as x}from"react";import{Dimensions as D,Easing as i,View as b}from"react-native";import{bezier as r}from"@toss-design-system/easings";import{Animated as e}from"../../../interactions/animated";import{Asset as u}from"../../asset";import{sToMs as s}from"../utils";const n=12;export const MessageBox=({layout:{x:l,y:a,width:f,height:c},yAlignment:p,opacity:g,children:d})=>{const{height:h}=D.get("window"),o=x(new e.Value(0)).current,t=p==="top";return v(()=>{e.sequence([e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.6)}),e.timing(o,{toValue:t?-5:5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)}),e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)})]).start()},[]),w(e.View,{style:[{position:"absolute",left:0,right:0},t?{bottom:h-a+n,flexDirection:"column-reverse"}:{top:a+c+n,flexDirection:"column"},{transform:[{translateY:o}],opacity:g}],children:[m(u.Icon,{style:{left:l+f/2-n,transform:[{rotateX:t?"180deg":"0deg"}]},frameShape:u.frameShape.CleanW24,name:"icon-arrow-up-sidebar-mono",color:"white"}),m(b,{style:[{position:"relative",width:"100%"}],children:d})]})};

package/dist/esm/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/esm/components/highlight/components/PassClickEventThroughHoleOverlay.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Pressable as o,StyleSheet as a}from"react-native";import{getHoleAnimateVariants as h}from"./getHoleAnimateVariants";export const PassClickEventThroughHoleOverlay=({layout:s,onPress:r,onTargetPress:i,style:l})=>{const{default:t}=h(s);return e(o,{onPress:r,style:[a.absoluteFill,l],children:e(o,{onPress:i,style:[{position:"absolute",left:t.x,top:t.y,width:t.width,height:t.height,borderRadius:t.radius}]})})};

package/dist/esm/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/esm/components/highlight/components/SvgHighlightOverlay.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as s}from"react/jsx-runtime";import m,{ClipPath as p,Defs as d,Rect as h}from"@granite-js/native/react-native-svg";import{StyleSheet as f}from"react-native";import{Animated as e}from"../../../interactions/animated";import{useAdaptive as g,useColorPreference as _}from"../../../core";import{SvgHolePath as H}from"./SvgHolePath";const P=e.createAnimatedComponent(m),y=e.createAnimatedComponent(h),o="HIGHLIGHT_SVG_HOLE_CLIP_PATH_ID";export const SvgHighlightOverlay=({layout:r,opacity:i,holeStep:a})=>{const{colorPreference:n}=_(),l=g(),c=n==="dark"?"rgba(33, 33, 38, 0.87)":l.greyOpacity700;return s(P,{width:"100%",height:"100%",style:f.absoluteFill,children:[t(d,{children:t(p,{id:o,children:t(H,{step:a,layout:r})})}),t(y,{x:"0",y:"0",width:"100%",height:"100%",fillOpacity:i,fill:c,clipPath:`url(#${o})`})]})};

package/dist/esm/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/esm/components/highlight/components/SvgHolePath.js

@@ -0,0 +1,4 @@
+"use strict";import{jsx as m}from"react/jsx-runtime";import{Path as s}from"@granite-js/native/react-native-svg";import{Animated as c}from"../../../interactions/animated";import{generateRadiusRectanglePath as h,generateWindowPath as d}from"../utils";import{getHoleAnimateVariants as l}from"./getHoleAnimateVariants";const P=c.createAnimatedComponent(s);export const SvgHolePath=({step:e,layout:a})=>{const t=l(a),o=n(t.initial),i=n(t.default),r=n(t.exit);return m(P,{clipRule:"evenodd",d:e.interpolate({inputRange:[0,1,2],outputRange:[o,i,r]})})};const n=e=>{const a=h(e);return`
+  ${d()}
+  ${a}
+  `};

package/dist/esm/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/esm/components/highlight/components/getHoleAnimateVariants.js

@@ -0,0 +1 @@
+"use strict";import{Dimensions as z}from"react-native";import{calculateOffset as t}from"../utils";export const getHoleAnimateVariants=({x:n,y:s,width:i,height:e})=>{const{width:c,height:x}=z.get("window"),a=i*.9,o=e*.9,r=c*2.5,d=x*1.5;return{initial:{x:t({base:n,prevSize:i,nextSize:a}),y:t({base:s,prevSize:e,nextSize:o}),width:a,height:o,radius:16},default:{x:n,y:s,width:i,height:e,radius:16},exit:{x:t({base:n,prevSize:i,nextSize:r}),y:t({base:s,prevSize:e,nextSize:d}),width:r,height:d,radius:1e3}}};

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

@@ -0,0 +1 @@
+"use strict";export{Message}from"./Message";export{MessageBox}from"./MessageBox";export{PassClickEventThroughHoleOverlay}from"./PassClickEventThroughHoleOverlay";export{SvgHighlightOverlay}from"./SvgHighlightOverlay";

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

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

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

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

package/dist/esm/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/esm/components/highlight/hooks/useHighlightUIAnimation.js

@@ -0,0 +1 @@
+"use strict";import{useRef as o}from"react";import{Platform as u}from"react-native";import{spring as r}from"@toss-design-system/easings";import{Animated as e}from"../../../interactions/animated";export const useHighlightUIAnimation=()=>{const t=u.OS==="android",i=o(new e.Value(t?1:0)).current,a=o(new e.Value(0)).current,n=o(new e.Value(0)).current;return{style:{overlayOpacity:a,holeStep:i,messageOpacity:n},enter:()=>new Promise(s=>e.parallel([...t?[]:[e.spring(i,{...r.basic,toValue:1,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:1,useNativeDriver:!0}),e.spring(n,{...r.quick,toValue:1,useNativeDriver:!0})]).start(()=>{s()})),exit:()=>new Promise(s=>{e.parallel([...t?[]:[e.spring(i,{...r.slow,toValue:2,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:0,useNativeDriver:!0}),e.spring(n,{...r.rapid,toValue:0,useNativeDriver:!0})]).start(()=>{s()})})}};

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

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

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

@@ -0,0 +1 @@
+"use strict";import{useCallback as r,useEffect as s,useRef as i}from"react";export function useTimeout(){const t=i(null),e=r(function(){t.current&&clearTimeout(t.current)},[]),u=r(function(n,o){e(),t.current=setTimeout(n,o)},[e]);return s(()=>e,[e]),{clear:e,set:u}}

package/dist/esm/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/esm/components/highlight/hooks/useTimestampRef.js

@@ -0,0 +1 @@
+"use strict";import{useEffect as r,useRef as f}from"react";export function useTimestampRef({active:t}){const e=f(0);return r(()=>{t?e.current=new Date().getTime():e.current=0},[t]),e}

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

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

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

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

package/dist/esm/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/esm/components/highlight/types.js

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

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

@@ -0,0 +1 @@
+"use strict";export const addLayoutPadding=({layout:o,padding:t})=>{const{x:h,y:d,width:i,height:n}=o,e=i+t.paddingLeft+t.paddingRight,c=n+t.paddingTop+t.paddingBottom,g=h-t.paddingLeft,s=d-t.paddingTop;return{x:g,y:s,width:e,height:c}};

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

@@ -0,0 +1 @@
+"use strict";export const calculateOffset=({base:t,prevSize:e,nextSize:c})=>t-(c-e)/2;

package/dist/esm/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;