@toss/tds-react-native 1.2.1 → 1.3.1

package/dist/esm/components/dialog/AlertDialog.js

@@ -1 +1 @@
-"use strict";import{jsx as e,Fragment as h,jsxs as x}from"react/jsx-runtime";import{colors as g}from"@toss/tds-colors";import{useCallback as p,useEffect as y}from"react";import{View as b}from"react-native";import{useHideAccessibility as D}from"../../core/contexts/HideAccessibility";import{TextButton as j}from"../text-button";import v from"./BaseDialog";import{DialogBodyTxt as A,DialogHeaderTxt as B}from"./BaseDialogContents";function E({open:o,title:t,description:i,content:n,buttonText:m="\uD655\uC778",closeOnDimmerClick:s,onClose:l,onExited:c,onButtonPress:a,onEntered:d,...f}){const r=D(),u=p(async()=>{a?.(),l()},[a,l]);return y(()=>(o?r.activate():r.inactivate(),r.inactivate),[r,o]),e(v,{open:o,header:t!=null?e(B,{children:t}):void 0,body:i!=null||n!=null?x(h,{children:[i!=null?e(A,{children:i}):null,n]}):void 0,footer:e(b,{style:{alignSelf:"flex-end"},children:e(j,{color:g.blue500,onPress:u,typography:"t5",fontWeight:"medium",children:m})}),closeOnDimmerClick:s,onClose:l,onExited:c,onEntered:d,...f})}export default E;
+"use strict";import{jsx as e,Fragment as h,jsxs as x}from"react/jsx-runtime";import{colors as g}from"@toss/tds-colors";import{useCallback as p,useEffect as y}from"react";import{View as b}from"react-native";import{useHideAccessibility as D}from"../../core/contexts/HideAccessibility.js";import{TextButton as j}from"../text-button/index.js";import v from"./BaseDialog.js";import{DialogBodyTxt as A,DialogHeaderTxt as B}from"./BaseDialogContents.js";function E({open:o,title:t,description:i,content:n,buttonText:m="\uD655\uC778",closeOnDimmerClick:s,onClose:l,onExited:c,onButtonPress:a,onEntered:d,...f}){const r=D(),u=p(async()=>{a?.(),l()},[a,l]);return y(()=>(o?r.activate():r.inactivate(),r.inactivate),[r,o]),e(v,{open:o,header:t!=null?e(B,{children:t}):void 0,body:i!=null||n!=null?x(h,{children:[i!=null?e(A,{children:i}):null,n]}):void 0,footer:e(b,{style:{alignSelf:"flex-end"},children:e(j,{color:g.blue500,onPress:u,typography:"t5",fontWeight:"medium",children:m})}),closeOnDimmerClick:s,onClose:l,onExited:c,onEntered:d,...f})}export default E;

package/dist/esm/components/dialog/BaseDialog.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
-import { AccessibilityProps, View } from 'react-native';
+import type { ReactElement } from 'react';
+import type { AccessibilityProps } from 'react-native';
+import { View } from 'react-native';
 export interface BaseDialogProps extends AccessibilityProps {
     open: boolean;
     header?: ReactElement;

package/dist/esm/components/dialog/BaseDialog.js

@@ -1 +1 @@
-"use strict";import{Fragment as C,jsx as n,jsxs as N}from"react/jsx-runtime";import{spring as i}from"@toss/tds-easings";import{forwardRef as b,useCallback as l,useRef as c}from"react";import{Animated as e,StyleSheet as k,View as P}from"react-native";import{useAnimatePresence as S,useWiggleAnim as q}from"../../utils";import{DialogContent as O,DialogOverlay as _}from"./BaseDialogContents";const F=()=>{},R=b(({open:p,header:m,body:u,footer:y,closeOnDimmerClick:g,onClose:f,onExited:d,onEntered:v=F,...w},V)=>{const o=c(new e.Value(t.content.close.opacity)).current,s=c(new e.Value(t.content.close.scale)).current,r=c(new e.Value(t.dimmer.close.opacity)).current,x=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.open.opacity,useNativeDriver:!0,...i.quick}),e.spring(s,{toValue:t.content.open.scale,useNativeDriver:!0,...i.quick}),e.spring(r,{toValue:t.dimmer.open.opacity,useNativeDriver:!0,...i.quick})]).start(()=>{a()})}),[o,s,r]),A=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.close.opacity,useNativeDriver:!0,...i.rapid}),e.spring(r,{toValue:t.dimmer.close.opacity,useNativeDriver:!0,...i.rapid})]).start(()=>{a()})}),[o,r]),{presenceState:D}=S(p,{enter:x,exit:A,onExited:d,onEntered:v}),{startWiggle:h,style:j}=q({direction:"x",type:"small"});return D==="invisible"?n(C,{}):N(P,{ref:V,style:W.container,...w,children:[n(_,{style:{opacity:r},onPress:g?f:h}),n(e.View,{style:[{opacity:o,transform:[{scale:s},...j.transform]}],children:n(O,{header:m,body:u,footer:y})})]})});export default R;const t={dimmer:{open:{opacity:.2},close:{opacity:0}},content:{open:{opacity:1,scale:1},close:{opacity:0,scale:.8}}},W=k.create({container:{flex:1,justifyContent:"center",alignItems:"center",position:"absolute",width:"100%",height:"100%"}});
+"use strict";import{Fragment as C,jsx as n,jsxs as N}from"react/jsx-runtime";import{spring as i}from"@toss/tds-easings";import{forwardRef as b,useCallback as l,useRef as c}from"react";import{Animated as e,StyleSheet as k,View as P}from"react-native";import{useAnimatePresence as S,useWiggleAnim as q}from"../../utils/index.js";import{DialogContent as O,DialogOverlay as _}from"./BaseDialogContents.js";const F=()=>{},R=b(({open:p,header:m,body:u,footer:y,closeOnDimmerClick:g,onClose:f,onExited:d,onEntered:v=F,...w},V)=>{const o=c(new e.Value(t.content.close.opacity)).current,s=c(new e.Value(t.content.close.scale)).current,r=c(new e.Value(t.dimmer.close.opacity)).current,x=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.open.opacity,useNativeDriver:!0,...i.quick}),e.spring(s,{toValue:t.content.open.scale,useNativeDriver:!0,...i.quick}),e.spring(r,{toValue:t.dimmer.open.opacity,useNativeDriver:!0,...i.quick})]).start(()=>{a()})}),[o,s,r]),A=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.close.opacity,useNativeDriver:!0,...i.rapid}),e.spring(r,{toValue:t.dimmer.close.opacity,useNativeDriver:!0,...i.rapid})]).start(()=>{a()})}),[o,r]),{presenceState:D}=S(p,{enter:x,exit:A,onExited:d,onEntered:v}),{startWiggle:h,style:j}=q({direction:"x",type:"small"});return D==="invisible"?n(C,{}):N(P,{ref:V,style:W.container,...w,children:[n(_,{style:{opacity:r},onPress:g?f:h}),n(e.View,{style:[{opacity:o,transform:[{scale:s},...j.transform]}],children:n(O,{header:m,body:u,footer:y})})]})});export default R;const t={dimmer:{open:{opacity:.2},close:{opacity:0}},content:{open:{opacity:1,scale:1},close:{opacity:0,scale:.8}}},W=k.create({container:{flex:1,justifyContent:"center",alignItems:"center",position:"absolute",width:"100%",height:"100%"}});

package/dist/esm/components/dialog/BaseDialogContents.d.ts

@@ -1,6 +1,7 @@
-import { ComponentProps, ReactElement } from 'react';
-import { Animated, PressableProps } from 'react-native';
-import { TxtProps } from '../txt';
+import type { ComponentProps, ReactElement } from 'react';
+import type { PressableProps } from 'react-native';
+import { Animated } from 'react-native';
+import type { TxtProps } from '../txt/index.js';
 declare function DialogOverlay({ color, style, onPress, }: {
     color?: string;
     style?: ComponentProps<typeof Animated.View>['style'];

package/dist/esm/components/dialog/BaseDialogContents.js

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as g}from"@toss/tds-colors";import{Animated as p,Dimensions as y,Pressable as h,ScrollView as u,StyleSheet as m,useWindowDimensions as f,View as r}from"react-native";import{useAdaptive as a}from"../../core";import{Txt as c}from"../txt";function w({color:o,style:t,onPress:i}){const{width:l,height:d}=f();return e(h,{onPress:i,style:[{width:l,height:d},n.overlayPressable],children:e(p.View,{style:[{backgroundColor:o??g.black},n.overlay,t]})})}function v({header:o,body:t,footer:i}){const l=a();return s(r,{style:[{backgroundColor:l.floatBackground},n.content],children:[s(u,{style:n.contentScrollView,children:[o!=null?e(r,{children:o}):null,t!=null?e(r,{style:n.contentBody,children:t}):null]}),e(r,{style:n.contentFooter,children:i})]})}function x({...o}){const t=a();return e(c,{color:t.grey800,fontWeight:"bold",typography:"t4",...o})}function b({...o}){const t=a();return e(c,{color:t.grey700,fontWeight:"medium",typography:"t6",...o})}const n=m.create({overlayPressable:{position:"absolute",top:0,left:0},overlay:{width:"100%",height:"100%"},content:{width:312,paddingTop:22,paddingHorizontal:22,paddingBottom:16,borderRadius:24},contentScrollView:{maxHeight:y.get("window").height*.7},contentBody:{marginTop:8},contentFooter:{marginTop:20}});export{b as DialogBodyTxt,v as DialogContent,x as DialogHeaderTxt,w as DialogOverlay};
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as g}from"@toss/tds-colors";import{Animated as p,Dimensions as y,Pressable as h,ScrollView as u,StyleSheet as m,useWindowDimensions as f,View as r}from"react-native";import{useAdaptive as a}from"../../core/index.js";import{Txt as c}from"../txt/index.js";function w({color:o,style:t,onPress:i}){const{width:l,height:d}=f();return e(h,{onPress:i,style:[{width:l,height:d},n.overlayPressable],children:e(p.View,{style:[{backgroundColor:o??g.black},n.overlay,t]})})}function v({header:o,body:t,footer:i}){const l=a();return s(r,{style:[{backgroundColor:l.floatBackground},n.content],children:[s(u,{style:n.contentScrollView,children:[o!=null?e(r,{children:o}):null,t!=null?e(r,{style:n.contentBody,children:t}):null]}),e(r,{style:n.contentFooter,children:i})]})}function x({...o}){const t=a();return e(c,{color:t.grey800,fontWeight:"bold",typography:"t4",...o})}function b({...o}){const t=a();return e(c,{color:t.grey700,fontWeight:"medium",typography:"t6",...o})}const n=m.create({overlayPressable:{position:"absolute",top:0,left:0},overlay:{width:"100%",height:"100%"},content:{width:312,paddingTop:22,paddingHorizontal:22,paddingBottom:16,borderRadius:24},contentScrollView:{maxHeight:y.get("window").height*.7},contentBody:{marginTop:8},contentFooter:{marginTop:20}});export{b as DialogBodyTxt,v as DialogContent,x as DialogHeaderTxt,w as DialogOverlay};

package/dist/esm/components/dialog/ConfirmDialog.d.ts

@@ -1,7 +1,8 @@
-import { ComponentProps, ReactElement, ReactNode } from 'react';
-import { AccessibilityProps, View } from 'react-native';
-import { Button } from '../button';
-import { BaseDialogProps } from './BaseDialog';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { AccessibilityProps } from 'react-native';
+import { View } from 'react-native';
+import { Button } from '../button/index.js';
+import type { BaseDialogProps } from './BaseDialog.js';
 export interface ConfirmDialogProps extends Pick<BaseDialogProps, 'open' | 'closeOnDimmerClick' | 'onClose' | 'onExited' | 'onEntered'>, AccessibilityProps {
     title: ReactNode;
     description?: ReactNode;

package/dist/esm/components/dialog/ConfirmDialog.js

@@ -1 +1 @@
-"use strict";import{jsx as t,Fragment as p,jsxs as l}from"react/jsx-runtime";import{Children as b,forwardRef as B,useEffect as D}from"react";import{StyleSheet as w,View as u}from"react-native";import{useHideAccessibility as y}from"../../core/contexts/HideAccessibility";import{Button as C}from"../button";import j from"./BaseDialog";import{DialogBodyTxt as v,DialogHeaderTxt as T}from"./BaseDialogContents";const E=B(({open:e,title:o,description:r,content:i,leftButton:a,rightButton:c,closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x},g)=>{const n=y();return D(()=>(e?n.activate():n.inactivate(),n.inactivate),[n,e]),t(j,{ref:g,open:e,header:o!=null?t(T,{children:o}):void 0,body:r!=null||i!=null?l(p,{children:[r!=null?t(v,{children:r}):null,i]}):void 0,footer:l(DoubleButton,{children:[a,c]}),closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x})});export function DoubleButton(e){const o=b.count(e.children);if(o!==2)throw new Error(`There should be 2 children in DoubleButton. Given children: ${o}`);return t(u,{style:d.doubleButton,children:e.children})}function I(e){return t(u,{style:d.doubleButtonItem,children:t(C,{size:"large",viewStyle:[{flexGrow:1}],...e})})}const G=Object.assign(E,{Button:I}),d=w.create({doubleButton:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonItem:{flexDirection:"row",minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});export default G;
+"use strict";import{jsx as t,Fragment as p,jsxs as l}from"react/jsx-runtime";import{Children as b,forwardRef as B,useEffect as D}from"react";import{StyleSheet as w,View as u}from"react-native";import{useHideAccessibility as y}from"../../core/contexts/HideAccessibility.js";import{Button as C}from"../button/index.js";import j from"./BaseDialog.js";import{DialogBodyTxt as v,DialogHeaderTxt as T}from"./BaseDialogContents.js";const E=B(({open:e,title:o,description:r,content:i,leftButton:a,rightButton:c,closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x},g)=>{const n=y();return D(()=>(e?n.activate():n.inactivate(),n.inactivate),[n,e]),t(j,{ref:g,open:e,header:o!=null?t(T,{children:o}):void 0,body:r!=null||i!=null?l(p,{children:[r!=null?t(v,{children:r}):null,i]}):void 0,footer:l(DoubleButton,{children:[a,c]}),closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x})});export function DoubleButton(e){const o=b.count(e.children);if(o!==2)throw new Error(`There should be 2 children in DoubleButton. Given children: ${o}`);return t(u,{style:d.doubleButton,children:e.children})}function I(e){return t(u,{style:d.doubleButtonItem,children:t(C,{size:"large",viewStyle:[{flexGrow:1}],...e})})}const G=Object.assign(E,{Button:I}),d=w.create({doubleButton:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonItem:{flexDirection:"row",minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});export default G;

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

@@ -1,5 +1,5 @@
-export { default as AlertDialog } from './AlertDialog';
-export { default as BaseDialog } from './BaseDialog';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export type { AlertDialogProps } from './AlertDialog';
-export type { ConfirmDialogProps } from './ConfirmDialog';
+export { default as AlertDialog } from './AlertDialog.js';
+export { default as BaseDialog } from './BaseDialog.js';
+export { default as ConfirmDialog } from './ConfirmDialog.js';
+export type { AlertDialogProps } from './AlertDialog.js';
+export type { ConfirmDialogProps } from './ConfirmDialog.js';

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

@@ -1 +1 @@
-"use strict";export{default as AlertDialog}from"./AlertDialog";export{default as BaseDialog}from"./BaseDialog";export{default as ConfirmDialog}from"./ConfirmDialog";
+"use strict";export{default as AlertDialog}from"./AlertDialog.js";export{default as BaseDialog}from"./BaseDialog.js";export{default as ConfirmDialog}from"./ConfirmDialog.js";

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { DropdownItem } from './DropdownItem';
+import type { ReactNode } from 'react';
+import { DropdownItem } from './DropdownItem.js';
 interface Props {
     title?: string;
     children?: ReactNode;

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

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as i}from"@toss/tds-colors";import{Platform as p,View as n}from"react-native";import{useAdaptive as l,useColorPreference as c}from"../../../core";import*as f from"../../paragraph";import{useDropdown as m}from"../contexts/DropdownContext";import{DropdownItem as h}from"./DropdownItem";export function Dropdown({title:o,children:r}){const t=l(),{colorPreference:a}=c(),{dropdownBaseRef:d}=m();return s(n,{ref:d,style:{width:240,backgroundColor:t.floatBackground,paddingVertical:12,borderRadius:16,shadowColor:a==="light"?p.OS==="ios"?i.greyOpacity300:void 0:i.greyOpacity900,shadowOffset:{width:0,height:16},shadowOpacity:1,shadowRadius:60,elevation:40},children:[o!=null?e(g,{children:e(f.Text,{fontWeight:"bold",typography:"st8",color:t.grey800,children:o})}):void 0,r]})}function g({style:o,...r}){return e(n,{style:[{paddingVertical:12,paddingHorizontal:24,flexDirection:"row",alignItems:"center"},o],...r})}Dropdown.Item=h;
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as i}from"@toss/tds-colors";import{Platform as p,View as n}from"react-native";import{useAdaptive as l,useColorPreference as c}from"../../../core/index.js";import*as f from"../../paragraph/index.js";import{useDropdown as m}from"../contexts/DropdownContext.js";import{DropdownItem as h}from"./DropdownItem.js";export function Dropdown({title:o,children:r}){const t=l(),{colorPreference:a}=c(),{dropdownBaseRef:d}=m();return s(n,{ref:d,style:{width:240,backgroundColor:t.floatBackground,paddingVertical:12,borderRadius:16,shadowColor:a==="light"?p.OS==="ios"?i.greyOpacity300:void 0:i.greyOpacity900,shadowOffset:{width:0,height:16},shadowOpacity:1,shadowRadius:60,elevation:40},children:[o!=null?e(g,{children:e(f.Text,{fontWeight:"bold",typography:"st8",color:t.grey800,children:o})}):void 0,r]})}function g({style:o,...r}){return e(n,{style:[{paddingVertical:12,paddingHorizontal:24,flexDirection:"row",alignItems:"center"},o],...r})}Dropdown.Item=h;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
 interface Props {
     icon?: ReactNode;
     children: string;

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

@@ -1 +1 @@
-"use strict";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{View as t}from"react-native";import*as l from"../../paragraph";import{useAdaptive as d}from"../../../core";export function DropdownItem({icon:e,children:i,style:o,iconViewStyle:n}){const s=d();return a(t,{style:[{flexDirection:"row",paddingVertical:12,paddingHorizontal:24,alignItems:"center"},o],children:[r(l.Text,{typography:"st8",fontWeight:"semiBold",color:s.grey600,children:i}),e!=null?r(t,{style:[{flexDirection:"row",alignItems:"center"},n],children:e}):void 0]})}
+"use strict";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{View as t}from"react-native";import*as l from"../../paragraph/index.js";import{useAdaptive as d}from"../../../core/index.js";export function DropdownItem({icon:e,children:i,style:o,iconViewStyle:n}){const s=d();return a(t,{style:[{flexDirection:"row",paddingVertical:12,paddingHorizontal:24,alignItems:"center"},o],children:[r(l.Text,{typography:"st8",fontWeight:"semiBold",color:s.grey600,children:i}),e!=null?r(t,{style:[{flexDirection:"row",alignItems:"center"},n],children:e}):void 0]})}

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
-import { Placement, ReactElementWithRef } from '../types';
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { Placement, ReactElementWithRef } from '../types.js';
 export interface FixedFloatingDropdownProps {
     open?: boolean;
     defaultOpen?: boolean;

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

@@ -1 +1 @@
-"use strict";import{jsx as l,Fragment as Y,jsxs as P}from"react/jsx-runtime";import{spring as R}from"@toss/tds-easings";import{cloneElement as _,forwardRef as j,useEffect as X,useRef as g}from"react";import{Pressable as z,View as D}from"react-native";import{useGlobalEvent as A,useOverlay as N}from"../../../core";import{AnimateRallyPresence as B,Rally as G}from"../../../interactions/rally";import{MENU_Z_INDEX as H}from"../constants/z-index";import{useDropdown as K}from"../contexts/DropdownContext";import{mergeRefs as M}from"../utils/mergeRefs";export function FixedFloatingDropdown({children:o,onOpen:p,onClose:r,open:i,dropdown:m,containerStyle:n}){const{placement:v}=K(),s=g(null),u=g(null),f=g(null),y=o.ref,F=_(o,{...o.props,ref:y!=null?M(y,s):s,onPress:()=>{i?r?.():p?.(),o.props?.onPress?.()}}),d=A();X(()=>{const t=c=>{const e=c.nativeEvent.pageX,a=c.nativeEvent.pageY;f?.current&&f.current.measure((x,b,h,I,O,w)=>{e>=O&&e<=O+h&&a>=w&&a<=w+I||r?.()})};return d.addEventListener("touchEnd",t),()=>{d.removeEventListener("touchEnd",t)}},[f,d,r,s]);const E=N();return X(()=>{if(!i){E.close();return}s.current==null||u.current==null||s.current.measure((...t)=>{u.current?.measure((...c)=>{const e={x:0,y:1,width:2,height:3,pageX:4,pageY:5};E.open(({isOpen:a,exit:x,close:b})=>{const h=v==="bottom-start"?{top:(t[e.pageY]??0)+(t[e.height]??0),left:t[e.pageX]}:{top:(t[e.pageY]??0)+(t[e.height]??0),left:(t[e.pageX]??0)+(t[e.width]??0)-(c[e.width]??0)};return l(z,{onPress:()=>{b(),r?.()},style:[{flex:1,position:"absolute",width:"100%",height:"100%",zIndex:H},n],children:l(B,{onExitEnd:x,children:a?l(S,{ref:f,style:[h],placement:v,children:m}):void 0})})})})})},[i]),P(Y,{children:[F,l(D,{ref:u,style:{opacity:0,position:"absolute",zIndex:-1},pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:m})]})}const S=j(function({style:p,children:r,placement:i},m){const n=i==="bottom-start"?"left":"right";return l(G,{ref:m,style:[{zIndex:9e3,position:"absolute"},p],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},children:r})});
+"use strict";import{jsx as l,Fragment as Y,jsxs as P}from"react/jsx-runtime";import{spring as R}from"@toss/tds-easings";import{cloneElement as _,forwardRef as j,useEffect as X,useRef as g}from"react";import{Pressable as z,View as D}from"react-native";import{useGlobalEvent as A,useOverlay as N}from"../../../core/index.js";import{AnimateRallyPresence as B,Rally as G}from"../../../interactions/rally/index.js";import{MENU_Z_INDEX as H}from"../constants/z-index.js";import{useDropdown as K}from"../contexts/DropdownContext.js";import{mergeRefs as M}from"../utils/mergeRefs.js";export function FixedFloatingDropdown({children:o,onOpen:p,onClose:r,open:i,dropdown:m,containerStyle:n}){const{placement:v}=K(),s=g(null),u=g(null),f=g(null),y=o.ref,F=_(o,{...o.props,ref:y!=null?M(y,s):s,onPress:()=>{i?r?.():p?.(),o.props?.onPress?.()}}),d=A();X(()=>{const t=c=>{const e=c.nativeEvent.pageX,a=c.nativeEvent.pageY;f?.current&&f.current.measure((x,b,h,I,O,w)=>{e>=O&&e<=O+h&&a>=w&&a<=w+I||r?.()})};return d.addEventListener("touchEnd",t),()=>{d.removeEventListener("touchEnd",t)}},[f,d,r,s]);const E=N();return X(()=>{if(!i){E.close();return}s.current==null||u.current==null||s.current.measure((...t)=>{u.current?.measure((...c)=>{const e={x:0,y:1,width:2,height:3,pageX:4,pageY:5};E.open(({isOpen:a,exit:x,close:b})=>{const h=v==="bottom-start"?{top:(t[e.pageY]??0)+(t[e.height]??0),left:t[e.pageX]}:{top:(t[e.pageY]??0)+(t[e.height]??0),left:(t[e.pageX]??0)+(t[e.width]??0)-(c[e.width]??0)};return l(z,{onPress:()=>{b(),r?.()},style:[{flex:1,position:"absolute",width:"100%",height:"100%",zIndex:H},n],children:l(B,{onExitEnd:x,children:a?l(S,{ref:f,style:[h],placement:v,children:m}):void 0})})})})})},[i]),P(Y,{children:[F,l(D,{ref:u,style:{opacity:0,position:"absolute",zIndex:-1},pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:m})]})}const S=j(function({style:p,children:r,placement:i},m){const n=i==="bottom-start"?"left":"right";return l(G,{ref:m,style:[{zIndex:9e3,position:"absolute"},p],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},children:r})});

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
-import { Placement, ReactElementWithRef } from '../types';
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { Placement, ReactElementWithRef } from '../types.js';
 interface Props {
     open?: boolean;
     defaultOpen?: boolean;

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

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as R,Fragment as z}from"react/jsx-runtime";import{spring as _}from"@toss/tds-easings";import{cloneElement as I,useCallback as x,useEffect as b,useState as g}from"react";import{View as v}from"react-native";import{useGlobalEvent as S}from"../../../core";import{AnimateRallyPresence as T,Rally as j}from"../../../interactions/rally";import{MENU_Z_INDEX as w}from"../constants/z-index";import{DropdownProvider as P,useDropdown as E}from"../contexts/DropdownContext";import{mergeRefs as X}from"../utils/mergeRefs";import{FixedFloatingDropdown as C}from"./FixedFloatingDropdown";function y({children:t,placement:r="bottom-start",strategy:n="absolute",...e}){return o(P,{placement:r,children:o(n==="fixed"?C:A,{...e,children:t})})}function A({children:t,onOpen:r,onClose:n,open:e,dropdown:l,containerStyle:a}){const{targetRef:i,dropdownBaseRef:f}=E(),u=t.ref,c=I(t,{...t.props,ref:u!=null?X(u,i):i,onPress:()=>{e?n?.():r?.(),t.props?.onPress?.()}}),s=S();return b(()=>{const d=(m,p)=>{f?.current==null||m.target==null||!p&&!h(m.target,f.current)&&!h(m.target,i?.current)&&n?.()};return s.addEventListener("touchEnd",d),()=>{s.removeEventListener("touchEnd",d)}},[f,s,n,i]),R(v,{style:[{position:"relative",zIndex:w},a],children:[c,o(T,{children:e?o(B,{children:l}):void 0})]})}function B({style:t,children:r,...n}){const{targetRef:e,dropdownBaseRef:l,placement:a}=E(),[i,f]=g(null),[u,c]=g(null);if(b(()=>{e?.current!=null&&l?.current!=null&&e.current.measureInWindow((d,m,p,D)=>{l?.current?.measureInWindow((N,U,F,O)=>{f({width:p,height:D}),c({width:F,height:O})})})},[l,e]),u==null||i==null)return o(v,{style:{opacity:0,position:"absolute",alignSelf:"flex-start"},children:r});const s=a==="bottom-start"?"left":"right";return o(z,{children:o(j,{style:[{zIndex:9e3,position:"absolute",top:i.height},a==="bottom-start"?{left:0}:{right:0},t],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:_.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:_.medium},...n,children:r})})}function L({defaultOpen:t=!1,onOpen:r,onClose:n,...e}){const[l,a]=g(t),i=x(()=>{r?.(),a(!0)},[r]),f=x(()=>{n?.(),a(!1)},[n]);return o(y,{open:l,onOpen:i,onClose:f,...e})}export function Trigger(t){return t.open!=null?o(y,{...t}):o(L,{...t})}Trigger.zIndex=w;const h=(t,r)=>{if(t&&r&&t._nativeTag===r._nativeTag)return!0;if(r._children&&r._children.length>0){for(let n=0;n<=r._children.length-1;n++)if(h(t,r._children[n]))return!0}return!1};
+"use strict";import{jsx as o,jsxs as R,Fragment as z}from"react/jsx-runtime";import{spring as _}from"@toss/tds-easings";import{cloneElement as I,useCallback as x,useEffect as b,useState as g}from"react";import{View as v}from"react-native";import{useGlobalEvent as S}from"../../../core/index.js";import{AnimateRallyPresence as T,Rally as j}from"../../../interactions/rally/index.js";import{MENU_Z_INDEX as w}from"../constants/z-index.js";import{DropdownProvider as P,useDropdown as E}from"../contexts/DropdownContext.js";import{mergeRefs as X}from"../utils/mergeRefs.js";import{FixedFloatingDropdown as C}from"./FixedFloatingDropdown.js";function y({children:t,placement:r="bottom-start",strategy:n="absolute",...e}){return o(P,{placement:r,children:o(n==="fixed"?C:A,{...e,children:t})})}function A({children:t,onOpen:r,onClose:n,open:e,dropdown:l,containerStyle:a}){const{targetRef:i,dropdownBaseRef:f}=E(),u=t.ref,c=I(t,{...t.props,ref:u!=null?X(u,i):i,onPress:()=>{e?n?.():r?.(),t.props?.onPress?.()}}),s=S();return b(()=>{const d=(m,p)=>{f?.current==null||m.target==null||!p&&!h(m.target,f.current)&&!h(m.target,i?.current)&&n?.()};return s.addEventListener("touchEnd",d),()=>{s.removeEventListener("touchEnd",d)}},[f,s,n,i]),R(v,{style:[{position:"relative",zIndex:w},a],children:[c,o(T,{children:e?o(B,{children:l}):void 0})]})}function B({style:t,children:r,...n}){const{targetRef:e,dropdownBaseRef:l,placement:a}=E(),[i,f]=g(null),[u,c]=g(null);if(b(()=>{e?.current!=null&&l?.current!=null&&e.current.measureInWindow((d,m,p,D)=>{l?.current?.measureInWindow((N,U,F,O)=>{f({width:p,height:D}),c({width:F,height:O})})})},[l,e]),u==null||i==null)return o(v,{style:{opacity:0,position:"absolute",alignSelf:"flex-start"},children:r});const s=a==="bottom-start"?"left":"right";return o(z,{children:o(j,{style:[{zIndex:9e3,position:"absolute",top:i.height},a==="bottom-start"?{left:0}:{right:0},t],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:_.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:_.medium},...n,children:r})})}function L({defaultOpen:t=!1,onOpen:r,onClose:n,...e}){const[l,a]=g(t),i=x(()=>{r?.(),a(!0)},[r]),f=x(()=>{n?.(),a(!1)},[n]);return o(y,{open:l,onOpen:i,onClose:f,...e})}export function Trigger(t){return t.open!=null?o(y,{...t}):o(L,{...t})}Trigger.zIndex=w;const h=(t,r)=>{if(t&&r&&t._nativeTag===r._nativeTag)return!0;if(r._children&&r._children.length>0){for(let n=0;n<=r._children.length-1;n++)if(h(t,r._children[n]))return!0}return!1};

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

@@ -1,2 +1,2 @@
-export * from './Dropdown';
-export * from './Trigger';
+export * from './Dropdown.js';
+export * from './Trigger.js';

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

@@ -1 +1 @@
-"use strict";export*from"./Dropdown";export*from"./Trigger";
+"use strict";export*from"./Dropdown.js";export*from"./Trigger.js";

package/dist/esm/components/dropdown/contexts/DropdownContext.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, RefObject } from 'react';
-import { View } from 'react-native';
-import { Placement } from '../types';
+import type { ReactNode, RefObject } from 'react';
+import type { View } from 'react-native';
+import type { Placement } from '../types.js';
 interface DropdownProviderProps {
     open?: boolean;
     placement: Placement;

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

@@ -1 +1 @@
-export * from './components';
+export * from './components/index.js';

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

@@ -1 +1 @@
-"use strict";export*from"./components";
+"use strict";export*from"./components/index.js";

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

@@ -1,4 +1,4 @@
-import { ReactElement, RefCallback, RefObject } from 'react';
+import type { ReactElement, RefCallback, RefObject } from 'react';
 export type ReactElementWithRef = ReactElement & {
     ref?: RefObject<any> | RefCallback<any>;
 };

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

@@ -1,2 +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 
+"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/index.js";import{Asset as C}from"../asset/index.js";import{Button as i}from"../button/index.js";import{FixedBottomCTA as x,FixedBottomCTAProvider as A}from"../fixed-bottom-cta/index.js";import{Top as r}from"../top/index.js";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

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

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

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

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

@@ -1,4 +1,4 @@
-import { BottomCTADoubleProps, BottomCTASingleProps } from '../bottom-cta';
+import type { BottomCTADoubleProps, BottomCTASingleProps } from '../bottom-cta/index.js';
 export type FixedBottomCTASingleProps = Omit<BottomCTASingleProps, 'display' | 'keyboardStyleEnabled'>;
 export type FixedBottomCTADoubleProps = Omit<BottomCTADoubleProps, 'keyboardStyleEnabled'>;
 /**

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

@@ -1 +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;
+"use strict";import{jsx as o}from"react/jsx-runtime";import{BottomCTA as r,BottomCTAGradient as n}from"../bottom-cta/index.js";import{useAdaptive as i}from"../../core/index.js";import{FixedBottomCTAConsumer as u}from"./providers/FixedBottomCTAContext.js";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

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

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

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

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

@@ -1,4 +1,4 @@
-import { ComponentType, ReactElement, ReactNode } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 export declare function FixedBottomCTAProvider<WrapperProps = unknown>({ children, wrapper, wrapperProps, }: {
     children: ReactNode;
     wrapper?: ComponentType<WrapperProps>;

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

@@ -1 +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}
+"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/index.js";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

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

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

@@ -1,4 +1,5 @@
-import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+import type { SvgProps } from '@granite-js/native/react-native-svg';
+import { Svg } from '@granite-js/native/react-native-svg';
 type ColorWithOpacity = {
     value: string;
     opacity?: number;

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { GridListItem } from './GridListItem';
-import { GridListProps } from './types';
+import { GridListItem } from './GridListItem.js';
+import type { GridListProps } from './types.js';
 /**
  *
  * @example

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

@@ -1 +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;
+"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.js";import{GridListContext as a}from"./GridListContext.js";import{GridListItem as f}from"./GridListItem.js";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

@@ -1,4 +1,4 @@
-import type { GridListColumn } from './types';
+import type { GridListColumn } from './types.js';
 export interface GridListContext {
     column: GridListColumn;
 }

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

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

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

@@ -1 +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}});
+"use strict";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useAdaptive as a}from"../../core/index.js";import{Txt as p}from"../txt/index.js";import{isReactText as g}from"../../utils/index.js";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.js";import{GridListContext as C}from"./GridListContext.js";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/index.d.ts

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

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

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

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StyleProp, TouchableHighlightProps, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import type { StyleProp, TouchableHighlightProps, ViewStyle } from 'react-native';
 export type GridListColumn = 1 | 2 | 3;
 export interface GridListProps {
     children: ReactNode | ReactNode[];

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

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

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

@@ -1 +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/tds-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})})});
+"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/tds-colors";import{useOverlay as k}from"../../core/index.js";import{HighlightUI as q}from"./HighlightUI.js";import{useTimeout as z}from"./hooks/index.js";import{useTimestampRef as A}from"./hooks/useTimestampRef.js";import{mergeRefs as B}from"./utils/mergeRefs.js";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

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

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

@@ -1 +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/tds-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"}})]})});
+"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/tds-colors";import{useAnimatePresence as T}from"../../utils/index.js";import{Message as W,MessageBox as k,PassClickEventThroughHoleOverlay as B,SvgHighlightOverlay as C}from"./components/index.js";import{useHighlightUIAnimation as D}from"./hooks/index.js";import{addLayoutPadding as L,getElementXAlignment as R,getElementYAlignment as V}from"./utils/index.js";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

@@ -1,4 +1,4 @@
-import type { Layout, XAlignmentValue, YAlignmentValue } from '../types';
+import type { Layout, XAlignmentValue, YAlignmentValue } from '../types.js';
 type MessageProps = {
     color: string;
     children: string;

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

@@ -1 +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})};
+"use strict";import{jsx as f}from"react/jsx-runtime";import{Txt as p}from"../../txt/index.js";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

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout, YAlignmentValue } from '../types';
+import type { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout, YAlignmentValue } from '../types.js';
 type MessageBoxProps = {
     layout: Layout;
     yAlignment: YAlignmentValue;

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

@@ -1 +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/tds-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})]})};
+"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/tds-easings";import{Animated as e}from"../../../interactions/animated/index.js";import{Asset as u}from"../../asset/index.js";import{sToMs as s}from"../utils/index.js";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

@@ -1,5 +1,5 @@
 import { type ViewProps } from 'react-native';
-import type { Layout } from '../types';
+import type { Layout } from '../types.js';
 type PassClickEventThroughHoleOverlayProps = {
     layout: Layout;
     onPress?: () => void;

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

@@ -1 +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}]})})};
+"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.js";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

@@ -1,5 +1,5 @@
-import { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout } from '../types';
+import type { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout } from '../types.js';
 type SvgHighlightOverlayProps = {
     layout: Layout;
     opacity: ReactNativeAnimated.Value;

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

@@ -1 +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})`})]})};
+"use strict";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{Svg as 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/index.js";import{useAdaptive as g,useColorPreference as _}from"../../../core/index.js";import{SvgHolePath as H}from"./SvgHolePath.js";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

@@ -1,5 +1,5 @@
-import { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout } from '../types';
+import type { Animated as ReactNativeAnimated } from 'react-native';
+import type { Layout } from '../types.js';
 type Props = {
     step: ReactNativeAnimated.Value;
     layout: Layout;

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

@@ -1,4 +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`
+"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/index.js";import{generateRadiusRectanglePath as h,generateWindowPath as d}from"../utils/index.js";import{getHoleAnimateVariants as l}from"./getHoleAnimateVariants.js";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

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

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

@@ -1 +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}}};
+"use strict";import{Dimensions as z}from"react-native";import{calculateOffset as t}from"../utils/index.js";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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{useRef as o}from"react";import{Platform as u}from"react-native";import{spring as r}from"@toss/tds-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()})})}};
+"use strict";import{useRef as o}from"react";import{Platform as u}from"react-native";import{spring as r}from"@toss/tds-easings";import{Animated as e}from"../../../interactions/animated/index.js";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/index.d.ts

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

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

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

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 export type Layout = Pick<HighlightUIProps, 'x' | 'y' | 'width' | 'height'>;
 export type XAlignmentValue = 'left' | 'center' | 'right';

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

@@ -1,4 +1,4 @@
-import type { Layout } from '../types';
+import type { Layout } from '../types.js';
 type AddLayoutPaddingProps = {
     layout: Layout;
     padding: {