@toss/tds-react-native 1.0.0

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.Button.d.ts

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+export declare const TextFieldHeroButton: import("react").ForwardRefExoticComponent<import("../../types").TextFieldContainerPublicProps & import("../../types").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("../../types").TextFieldPublicProps | keyof import("../../types").TextFieldContainerPublicProps> & {
+    value?: import("../../types").TextFieldValue;
+    defaultValue?: string;
+    focused?: boolean;
+    placeholder?: string;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+} & import("react").RefAttributes<View>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.Button.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useAdaptive as b}from"../../../../../core/index";import{Txt as f}from"../../../../txt/index";import{forwardRef as B,useState as w}from"react";import{Pressable as S,StyleSheet as v,View as h}from"react-native";import{TextFieldButtonArrow as H}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as j}from"../../components/TextFieldButtonText";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as W}from"../../components/TextFieldHelp";import{TextFieldLabel as D}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as L}from"../../hooks/useLabelControls";import{useTextFieldDefaultPlaceholderColor as R}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as k}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as A}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as G}from"../../hooks/useTextFieldValueControls";export const TextFieldHeroButton=B(function({prefix:n,right:u,suffix:a,placeholder:x,containerStyle:g,style:P,...e},p){const l=b(),[o,d]=w(!1),{value:c}=G(e),y=c!=="",s=L(e,o),T=A(e,o),C=k(e,o),F=R(e,o);return m(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:g,children:[t(D,{color:s.color,opacity:s.opacity,children:e.label}),t(S,{ref:p,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),d(!0)},onBlur:i=>{e.onBlur?.(i),d(!1)},...e,children:m(h,{style:[r.inputContainer],children:[n?t(f,{typography:"t1",fontWeight:"semiBold",color:l.grey800,style:r.prefix,children:n}):null,t(j,{typography:"t1",fontWeight:"semiBold",placeholder:x,placeholderColor:F,color:C,style:{flexGrow:1},children:c}),a?t(f,{typography:"t1",fontWeight:"semiBold",color:y?l.grey800:l.grey500,children:a}):null,t(h,{style:r.rightContainer,children:u??t(H,{})})]})}),e.help!=null?t(W,{color:T.color,children:e.help}):null]})});const r=v.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.Clearable.d.ts

@@ -0,0 +1,4 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldHeroClearable: import("react").ForwardRefExoticComponent<Omit<import("../..").TextFieldProps, "right"> & {
+    onClear?: () => void;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.Clearable.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{forwardRef as l}from"react";import{TextFieldClearButton as i}from"../../components/TextFieldClearButton";import{useTextFieldClearButtonControls as u}from"../../hooks/useTextFieldClearButtonControls";import{TextFieldHero as a}from"./TextFieldHero";export const TextFieldHeroClearable=l(function(e,n){const o=u(e);return t(a,{...e,ref:n,right:o.isVisible?t(i,{size:24,onPress:()=>{e.onChangeText?.(""),e.onClear?.()}}):void 0,onFocus:r=>{o.onInputFocus?.(),e.onFocus?.(r)},onBlur:r=>{o.onInputBlur?.(),e.onBlur?.(r)}})});

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.d.ts

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldHero: import("react").ForwardRefExoticComponent<import("../../types").TextFieldContainerPublicProps & import("../../types").TextFieldPublicProps & Omit<import("react-native").TextInputProps, "value" | keyof import("../../types").TextFieldPublicProps | keyof import("../../types").TextFieldContainerPublicProps> & {
+    value?: import("../../types").TextFieldValue;
+    defaultValue?: string;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/TextFieldHero.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{forwardRef as w,useState as S}from"react";import{StyleSheet as v,TextInput as H,View as h}from"react-native";import{useAdaptive as j,useTypographyTheme as V}from"../../../../../core/index";import{Txt as u}from"../../../../txt/index";import{TextFieldContainer as W}from"../../components/TextFieldContainer";import{TextFieldHelp as z}from"../../components/TextFieldHelp";import{TextFieldLabel as D}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as I}from"../../hooks/useLabelControls";import{useTextFieldDefaultPlaceholderColor as L}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as k}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as G}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as R}from"../../hooks/useTextFieldValueControls";export const TextFieldHero=w(function({prefix:r,right:a,suffix:d,containerStyle:g,style:x,...e},p){const l=j(),{typography:y}=V(),[o,c]=S(!1),{value:s,onChangeText:T}=R(e),C=s!=="",f=I(e,o),F=G(e,o),b=k(e,o),B=L(e,o);return m(W,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:g,children:[t(D,{color:f.color,opacity:f.opacity,children:e.label}),m(h,{style:[n.inputContainer],children:[r?t(u,{typography:"t1",fontWeight:"semiBold",color:l.grey800,style:n.prefix,children:r}):null,t(H,{...e,ref:p,value:s,editable:e.editable??!e.disabled,placeholderTextColor:B,onChangeText:T,onFocus:i=>{e.onFocus?.(i),c(!0)},onBlur:i=>{e.onFocus?.(i),c(!1)},style:[{flexGrow:1,flexBasis:0,fontWeight:"600",fontSize:y.t1.fontSize,color:b,padding:0},x]}),d?t(u,{typography:"t1",fontWeight:"semiBold",color:C?l.grey800:l.grey500,children:d}):null,a?t(h,{style:n.rightContainer,children:a}):null]}),e.help!=null?t(z,{color:F.color,children:e.help}):null]})});const n=v.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TextFieldHero';
+export * from './TextFieldHero.Clearable';
+export * from './TextFieldHero.Button';

package/dist/esm/components/text-field/TextField/variants/TextFieldHero/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./TextFieldHero";export*from"./TextFieldHero.Clearable";export*from"./TextFieldHero.Button";

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.Button.d.ts

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+export declare const TextFieldLineButton: import("react").ForwardRefExoticComponent<import("../../types").TextFieldContainerPublicProps & import("../../types").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("../../types").TextFieldPublicProps | keyof import("../../types").TextFieldContainerPublicProps> & {
+    value?: import("../../types").TextFieldValue;
+    defaultValue?: string;
+    focused?: boolean;
+    placeholder?: string;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+} & import("react").RefAttributes<View>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.Button.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useAdaptive as b}from"../../../../../core/index";import{Txt as f}from"../../../../txt/index";import{forwardRef as w,useState as L}from"react";import{Pressable as S,StyleSheet as v,View as h}from"react-native";import{TextFieldButtonArrow as W}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as j}from"../../components/TextFieldButtonText";import{TextFieldContainer as D}from"../../components/TextFieldContainer";import{TextFieldHelp as V}from"../../components/TextFieldHelp";import{TextFieldLabel as H}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as R}from"../../hooks/useLabelControls";import{useTextFieldDefaultLineBorderColor as k}from"../../hooks/useTextFieldDefaultLineBorderColor";import{useTextFieldDefaultPlaceholderColor as A}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as G}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as I}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as P}from"../../hooks/useTextFieldValueControls";export const TextFieldLineButton=w(function({prefix:n,right:u,suffix:d,containerStyle:x,placeholder:g,style:z,...e},p){const l=b(),[o,a]=L(!1),{value:c}=P(e),y=c!=="",s=R(e,o),C=I(e,o),T=k(e,o),B=A(e,o),F=G(e,o);return m(D,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:x,children:[t(H,{color:s.color,opacity:s.opacity,children:e.label}),t(S,{ref:p,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),a(!0)},onBlur:i=>{e.onBlur?.(i),a(!1)},...e,children:m(h,{style:[r.inputContainer,{borderBottomWidth:2,borderBottomColor:T}],children:[n?t(f,{fontWeight:"semiBold",typography:"t3",color:l.grey800,style:r.prefix,children:n}):null,t(j,{typography:"t3",fontWeight:"semiBold",placeholder:g,placeholderColor:B,color:F,style:{flexGrow:1},children:c}),d?t(f,{fontWeight:"semiBold",typography:"t3",color:y?l.grey800:l.grey500,children:d}):null,t(h,{style:r.rightContainer,children:u??t(W,{})})]})}),e.help!=null?t(V,{color:C.color,children:e.help}):null]})});const r=v.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.Clearable.d.ts

@@ -0,0 +1,4 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldLineClearable: import("react").ForwardRefExoticComponent<Omit<import("../..").TextFieldProps, "right"> & {
+    onClear?: () => void;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.Clearable.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import{TextFieldClearButton as l}from"../../components/TextFieldClearButton";import{useTextFieldClearButtonControls as u}from"../../hooks/useTextFieldClearButtonControls";import{TextFieldLine as a}from"./TextFieldLine";export const TextFieldLineClearable=i(function(e,r){const o=u(e);return t(a,{...e,ref:r,right:o.isVisible?t(l,{size:20,onPress:()=>{e.onChangeText?.(""),e.onClear?.()}}):void 0,onFocus:n=>{o.onInputFocus?.(),e.onFocus?.(n)},onBlur:n=>{o.onInputBlur?.(),e.onBlur?.(n)}})});

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.d.ts

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldLine: import("react").ForwardRefExoticComponent<import("../../types").TextFieldContainerPublicProps & import("../../types").TextFieldPublicProps & Omit<import("react-native").TextInputProps, "value" | keyof import("../../types").TextFieldPublicProps | keyof import("../../types").TextFieldContainerPublicProps> & {
+    value?: import("../../types").TextFieldValue;
+    defaultValue?: string;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/TextFieldLine.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as f}from"react/jsx-runtime";import{forwardRef as S,useState as v}from"react";import{StyleSheet as L,TextInput as W,View as h}from"react-native";import{useAdaptive as j,useTypographyTheme as D}from"../../../../../core/index";import{Txt as u}from"../../../../txt/index";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as z}from"../../components/TextFieldHelp";import{TextFieldLabel as H}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as I}from"../../hooks/useLabelControls";import{useTextFieldDefaultLineBorderColor as k}from"../../hooks/useTextFieldDefaultLineBorderColor";import{useTextFieldDefaultPlaceholderColor as G}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as R}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as _}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as A}from"../../hooks/useTextFieldValueControls";export const TextFieldLine=S(function({prefix:n,right:a,suffix:d,containerStyle:x,style:g,...e},p){const l=j(),{typography:y}=D(),[t,c]=v(!1),{value:s,onChangeText:T}=A(e),C=s!=="",m=I(e,t),F=_(e,t),b=k(e,t),B=G(e,t),w=R(e,t);return f(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:x,children:[o(H,{color:m.color,opacity:m.opacity,children:e.label}),f(h,{style:[r.inputContainer,{borderBottomWidth:2,borderBottomColor:b}],children:[n?o(u,{fontWeight:"semiBold",typography:"t3",color:l.grey800,style:r.prefix,children:n}):null,o(W,{...e,ref:p,value:s,editable:e.editable??!e.disabled,placeholderTextColor:B,onChangeText:T,onFocus:i=>{e.onFocus?.(i),c(!0)},onBlur:i=>{e.onFocus?.(i),c(!1)},style:[{flexGrow:1,flexBasis:0,fontWeight:"600",fontSize:y.t3.fontSize,color:w,padding:0},g]}),d?o(u,{fontWeight:"semiBold",typography:"t3",color:C?l.grey800:l.grey500,children:d}):null,a?o(h,{style:r.rightContainer,children:a}):null]}),e.help!=null?o(z,{color:F.color,children:e.help}):null]})});const r=L.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TextFieldLine';
+export * from './TextFieldLine.Clearable';
+export * from './TextFieldLine.Button';

package/dist/esm/components/text-field/TextField/variants/TextFieldLine/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./TextFieldLine";export*from"./TextFieldLine.Clearable";export*from"./TextFieldLine.Button";

package/dist/esm/components/text-field/TextFieldBig/TextFieldBig.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react';
+import { TextInput } from 'react-native';
+type TextInputProps = ComponentProps<typeof TextInput>;
+export interface Props extends TextInputProps {
+    /**
+     * 에러 상태를 표시합니다.
+     */
+    hasError?: boolean;
+    /**
+     * 우측에 표시될 접미사를 지정합니다.
+     */
+    suffix?: string;
+    /**
+     * 텍스트 마스킹 여부를 지정합니다.
+     */
+    secret?: boolean;
+    disabled?: boolean;
+    /**
+     * input에 입력된 값을 한 번에 지우는 버튼을 노출합니다.
+     */
+    clearable?: boolean;
+    onClear?: () => void;
+}
+export declare const TextFieldBig: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>;
+export {};

package/dist/esm/components/text-field/TextFieldBig/TextFieldBig.js

@@ -0,0 +1 @@
+"use strict";import{jsx as f}from"react/jsx-runtime";import{forwardRef as s}from"react";import{TextField as n}from"../TextField/index";export const TextFieldBig=s(function({hasError:r,suffix:e,secret:i,disabled:t,clearable:x,onClear:l,...a},o){return x?f(n.Clearable,{...a,ref:o,variant:"big",hasError:r,suffix:e,secureTextEntry:i,disabled:t,onClear:l}):f(n,{...a,ref:o,variant:"big",hasError:r,suffix:e,secureTextEntry:i,disabled:t})});

package/dist/esm/components/text-field/TextFieldBig/index.d.ts

@@ -0,0 +1 @@
+export { TextFieldBig } from './TextFieldBig';

package/dist/esm/components/text-field/TextFieldBig/index.js

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

package/dist/esm/components/text-field/index.d.ts

@@ -0,0 +1,4 @@
+export { OldTextField, OldTextFieldItem, OldTextFieldSelectButton } from './OldTextField';
+export * from './TextArea';
+export * from './TextField';
+export { TextFieldBig } from './TextFieldBig';

package/dist/esm/components/text-field/index.js

@@ -0,0 +1 @@
+"use strict";export{OldTextField,OldTextFieldItem,OldTextFieldSelectButton}from"./OldTextField";export*from"./TextArea";export*from"./TextField";export{TextFieldBig}from"./TextFieldBig";

package/dist/esm/components/toast/Toast.d.ts

@@ -0,0 +1,22 @@
+import { type ToastBottomProps } from './components/ToastBottom';
+import { type ToastTopProps } from './components/ToastTop';
+export type ToastProps = (ToastTopProps & {
+    position: 'top';
+}) | (ToastBottomProps & {
+    position?: 'bottom';
+});
+export declare const Toast: {
+    ({ position, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+    Icon: (props: {
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        type?: "default" | "circle" | undefined;
+        name: string;
+        color?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    LottieIcon: (props: (import("./components/ToastLottieIcon/PresetToastLottieIcon").PresetToastLottieIconProps & {
+        preset: true;
+    }) | (import("./components/ToastLottieIcon/CustomToastLottieIcon").CustomToastLottieIconProps & {
+        preset?: false;
+    })) => import("react/jsx-runtime").JSX.Element;
+    Button: ({ children, ...props }: import("./components/ToastButton").ToastButtonProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/toast/Toast.js

@@ -0,0 +1 @@
+"use strict";import{jsx as m}from"react/jsx-runtime";import{ToastBottom as r}from"./components/ToastBottom";import{ToastButton as e}from"./components/ToastButton";import{ToastIcon as f}from"./components/ToastIcon";import{ToastLottieIcon as i}from"./components/ToastLottieIcon";import{ToastTop as c}from"./components/ToastTop";import{useAnnounce as a}from"../../utils/useAnnounce";import{useEffect as s}from"react";export const Toast=({position:n="bottom",...o})=>{const{announce:t}=a();return s(()=>{o.open&&t(o.text)},[o.open,t,o.text]),n==="bottom"?m(r,{...o}):m(c,{...o})};Toast.Icon=f,Toast.LottieIcon=i,Toast.Button=e;

package/dist/esm/components/toast/components/ToastBottom.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import type { CommonToastProps } from './types';
+export interface ToastBottomProps extends CommonToastProps {
+    /**
+     * @example
+     * button={<Toast.Button text="확인" />}
+     */
+    button?: ReactNode;
+    /**
+     * @default 20
+     * @description px 단위
+     */
+    bottomOffset?: number;
+}
+export declare const ToastBottom: ({ open, text, icon, button, duration, bottomOffset, onClose, onExited, onEntered, }: ToastBottomProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/toast/components/ToastBottom.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as p}from"react/jsx-runtime";import{useKeyboardAnimatedHeight as H}from"@granite-js/react-native";import{useState as W}from"react";import{Platform as Y,Pressable as I,StyleSheet as R,useWindowDimensions as _,View as n}from"react-native";import{colors as a}from"@toss-design-system/colors";import{useColorPreference as z,useTypographyTheme as G}from"../../../core";import{Animated as f}from"../../../interactions/animated";import{useAnimatePresence as V,useSafeAreaBottom as E}from"../../../utils";import{Txt as F}from"../../txt";import{useTextLine as K,useTimer as q,useToastAnimation as J}from"../hooks";const M=f.createAnimatedComponent(I);export const ToastBottom=({open:y,text:u,icon:i,button:e,duration:x=e?5:3,bottomOffset:s=20,onClose:l,onExited:w=()=>{},onEntered:T=()=>{}})=>{const{width:S}=_(),[c,A]=W(),m=E(),L=c?s+c+m:void 0,b=H(),{textLine:P,updateTextLine:k}=K(),{colorPreference:j}=z(),{typographyLevel:d}=G(),t=Y.OS==="android"?d>200:d?.startsWith("A11y_x"),{enter:v,exit:B,animatedStyle:h}=J({position:"bottom",initialY:L}),{presenceState:C}=V(y,{enter:v,exit:B,onExited:w,onEntered:T});return q({duration:x,callback:l}),C==="invisible"?null:p(M,{onPress:l,onLayout:D=>{A(D.nativeEvent.layout.height)},style:[o.container,{opacity:h.opacity,transform:[{translateY:f.subtract(h.transform[0]?.translateY??0,b)}]},{flexDirection:t?"column":"row",alignItems:t?"flex-start":"center",gap:t?10:0,width:e?S-g*2:"auto",bottom:s+m,paddingLeft:i?16:20,paddingRight:e?14:20,borderRadius:P==="single"?100:20,backgroundColor:j==="light"?a.grey500:a.darkThemeGrey200}],children:[p(n,{style:[o.iconTextContainer,t?{width:"100%"}:{flexGrow:e?1:0,width:e?0:"auto"}],children:[i&&r(n,{style:o.icon,children:i}),r(F,{onTextLayout:k,typography:"t6",fontWeight:"semiBold",color:a.white,children:u})]}),e?r(n,{style:o.button,children:e}):null]})};const g=20,o=R.create({container:{position:"absolute",alignSelf:"center",zIndex:100,flexDirection:"row",paddingVertical:14,marginHorizontal:g},iconTextContainer:{flexDirection:"row",alignItems:"center"},icon:{marginRight:12},button:{marginLeft:20,flexShrink:0}});

package/dist/esm/components/toast/components/ToastButton.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { Pressable } from 'react-native';
+export interface ToastButtonProps extends ComponentProps<typeof Pressable> {
+    children: string;
+}
+export declare const ToastButton: ({ children, ...props }: ToastButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/toast/components/ToastButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useRef as c}from"react";import{Pressable as m,StyleSheet as r}from"react-native";import{colors as o}from"@toss-design-system/colors";import{Animated as s}from"../../../interactions/animated";import{useColorPreference as u}from"../../../core";import{Txt as p}from"../../txt";export const ToastButton=({children:i,...a})=>{const{colorPreference:l}=u(),t=c(new s.Value(0)).current;return n(m,{accessibilityRole:"button",onPressIn:()=>{t.setValue(.1)},onPressOut:()=>{t.setValue(0)},style:[d.button,{backgroundColor:l==="light"?o.greyOpacity400:o.whiteOpacity100}],...a,children:[e(s.View,{style:{...r.absoluteFillObject,backgroundColor:o.black,opacity:t}}),e(p,{typography:"t7",fontWeight:"semiBold",color:o.floatBackground,children:i})]})};const d=r.create({button:{marginLeft:"auto",borderRadius:100,paddingHorizontal:12,paddingVertical:6,overflow:"hidden"}});

package/dist/esm/components/toast/components/ToastIcon.d.ts

@@ -0,0 +1,5 @@
+import { Icon } from '../../icon';
+import { ComponentProps } from 'react';
+type ToastIconProps = Pick<ComponentProps<typeof Icon>, 'name' | 'color' | 'style' | 'type'>;
+export declare const ToastIcon: (props: ToastIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/toast/components/ToastIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Icon as t}from"../../icon";export const ToastIcon=o=>r(t,{type:"circle",size:24,...o});

package/dist/esm/components/toast/components/ToastLottieIcon/CustomToastLottieIcon.d.ts

@@ -0,0 +1,5 @@
+import type { CommonLottieIconProps } from './types';
+export interface CustomToastLottieIconProps extends CommonLottieIconProps {
+    src: string;
+}
+export declare const CustomToastLottieIcon: ({ src, play, loop, onFinish, style, ...props }: CustomToastLottieIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/toast/components/ToastLottieIcon/CustomToastLottieIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i}from"react/jsx-runtime";import p from"@granite-js/native/lottie-react-native";import{useEffect as n,useRef as h,useState as w}from"react";import{View as y}from"react-native";export const CustomToastLottieIcon=({src:o,play:s=!0,loop:r=!1,onFinish:a,style:u,...f})=>{const t=h(null),[e,c]=w();return n(()=>{async function l(){const m=await fetch(o);c(await m.json())}l()},[o]),n(()=>{s?t.current?.play():t.current?.pause()},[e,s]),e==null?i(y,{style:{opacity:1}}):i(p,{ref:t,source:e,autoPlay:!1,loop:r,style:[{width:24,height:24},u],onAnimationFinish:a,...f})};

package/dist/esm/components/toast/components/ToastLottieIcon/PresetToastLottieIcon.d.ts

@@ -0,0 +1,5 @@
+import type { CommonLottieIconProps } from './types';
+export interface PresetToastLottieIconProps extends CommonLottieIconProps {
+    type: 'complete' | 'error';
+}
+export declare const PresetToastLottieIcon: ({ type, ...props }: PresetToastLottieIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/toast/components/ToastLottieIcon/PresetToastLottieIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s}from"react/jsx-runtime";import{CustomToastLottieIcon as e}from"./CustomToastLottieIcon";export const PresetToastLottieIcon=({type:t,...o})=>s(e,{src:t==="complete"?"https://static.toss.im/lotties-common/check-green-spot.json":"https://static.toss.im/lotties-common/error-yellow-spot.json",...o});

package/dist/esm/components/toast/components/ToastLottieIcon/ToastLottieIcon.d.ts

@@ -0,0 +1,9 @@
+import { type CustomToastLottieIconProps } from './CustomToastLottieIcon';
+import { type PresetToastLottieIconProps } from './PresetToastLottieIcon';
+type ToastLottieIconProps = (PresetToastLottieIconProps & {
+    preset: true;
+}) | (CustomToastLottieIconProps & {
+    preset?: false;
+});
+export declare const ToastLottieIcon: (props: ToastLottieIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/toast/components/ToastLottieIcon/ToastLottieIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{CustomToastLottieIcon as e}from"./CustomToastLottieIcon";import{PresetToastLottieIcon as r}from"./PresetToastLottieIcon";export const ToastLottieIcon=t=>s(t)?o(r,{...t}):o(e,{...t});function s(t){return"type"in t&&t.preset===!0}

package/dist/esm/components/toast/components/ToastLottieIcon/index.d.ts

@@ -0,0 +1 @@
+export { ToastLottieIcon } from './ToastLottieIcon';

package/dist/esm/components/toast/components/ToastLottieIcon/index.js

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

package/dist/esm/components/toast/components/ToastLottieIcon/types.d.ts

@@ -0,0 +1,6 @@
+import type LottieView from '@granite-js/native/lottie-react-native';
+import type { ComponentProps } from 'react';
+export interface CommonLottieIconProps extends Pick<ComponentProps<typeof LottieView>, 'resizeMode' | 'style' | 'loop'> {
+    play?: boolean;
+    onFinish?: () => void;
+}

package/dist/esm/components/toast/components/ToastLottieIcon/types.js

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

package/dist/esm/components/toast/components/ToastTop.d.ts

@@ -0,0 +1,3 @@
+import type { CommonToastProps } from './types';
+export type ToastTopProps = CommonToastProps;
+export declare const ToastTop: ({ open, text, icon, duration, onClose, onExited, onEntered, }: ToastTopProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/toast/components/ToastTop.js

@@ -0,0 +1 @@
+"use strict";import{jsx as a,jsxs as P}from"react/jsx-runtime";import{useState as v}from"react";import{Platform as s,Pressable as L,StyleSheet as O,View as j}from"react-native";import{colors as e}from"@toss-design-system/colors";import{Animated as k}from"../../../interactions/animated";import{useAdaptive as R,useColorPreference as C}from"../../../core";import{Txt as z}from"../../txt";import{useAnimatePresence as G,useSafeAreaTop as H}from"../../../utils";import{useTextLine as I,useTimer as V,useToastAnimation as _}from"../hooks";const B=k.createAnimatedComponent(L);export const ToastTop=({open:l,text:d,icon:t,duration:m=3,onClose:o,onExited:p=()=>{},onEntered:h=()=>{}})=>{const i=H(),[r,f]=v(),g=r?-(i+r):void 0,{textLine:u,updateTextLine:y}=I(),x=R(),{colorPreference:n}=C(),{enter:T,exit:S,animatedStyle:w}=_({position:"top",initialY:g}),{presenceState:A}=G(l,{enter:T,exit:S,onExited:p,onEntered:h});return V({duration:m,callback:o}),A==="invisible"?null:P(B,{onPress:o,onLayout:b=>{f(b.nativeEvent.layout.height)},style:[c.container,w,{top:i,paddingLeft:t?12:16,borderRadius:u==="single"?100:20,backgroundColor:n==="light"?e.white:e.darkThemeGrey200,shadowColor:n==="light"?e.greyOpacity200:e.darkThemeGrey50}],children:[t&&a(j,{style:c.icon,children:t}),a(z,{onTextLayout:y,typography:"t6",fontWeight:"semiBold",color:x.opacity800,children:d})]})};const c=O.create({container:{position:"absolute",alignSelf:"center",zIndex:100,flexDirection:"row",alignItems:"center",paddingVertical:12,paddingRight:16,marginHorizontal:s.OS==="ios"?18:s.OS==="android"?12:0,shadowOffset:{width:0,height:2},shadowRadius:30,shadowOpacity:1,elevation:50},icon:{marginRight:10}});

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type CommonToastProps = {
+    open: boolean;
+    /**
+     * @example
+     * icon={<Toast.Icon name="icn-attention-color" style={{opacity: 0.4}} />}
+     * icon={<Toast.LottieIcon preset type="complete" />}
+     * icon={<Toast.LottieIcon src="https://static.toss.im/lotties-common/check-green-spot.json" />}
+     */
+    icon?: ReactNode;
+    text: string;
+    /**
+     * @default button 있으면 5초, 없으면 3초
+     */
+    duration?: number;
+    onClose: () => void;
+    onExited?: () => void;
+    onEntered?: () => void;
+};

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

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

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

@@ -0,0 +1,3 @@
+export { useTextLine } from './useTextLine';
+export { useTimer } from './useTimer';
+export { useToastAnimation } from './useToastAnimation';

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

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

package/dist/esm/components/toast/hooks/useTextLine.d.ts

@@ -0,0 +1,6 @@
+type TextLine = 'single' | 'multiple';
+export declare const useTextLine: () => {
+    textLine: TextLine;
+    updateTextLine: (event: import("react-native").NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void;
+};
+export {};

package/dist/esm/components/toast/hooks/useTextLine.js

@@ -0,0 +1 @@
+"use strict";import{useState as i}from"react";export const useTextLine=()=>{const[t,e]=i("single");return{textLine:t,updateTextLine:({nativeEvent:{lines:n}})=>{n.length>=2?e("multiple"):e("single")}}};

package/dist/esm/components/toast/hooks/useTimer.d.ts

@@ -0,0 +1,6 @@
+type UseTimerProps = {
+    duration: number;
+    callback: () => void;
+};
+export declare const useTimer: ({ duration, callback }: UseTimerProps) => void;
+export {};

package/dist/esm/components/toast/hooks/useTimer.js

@@ -0,0 +1 @@
+"use strict";import{useEffect as r}from"react";export const useTimer=({duration:e,callback:t})=>{r(()=>{const o=setTimeout(()=>{t()},e*1e3);return()=>{clearTimeout(o)}},[])};

package/dist/esm/components/toast/hooks/useToastAnimation.d.ts

@@ -0,0 +1,15 @@
+type UseToastAnimationProps = {
+    position: 'top' | 'bottom';
+    initialY?: number;
+};
+export declare const useToastAnimation: ({ position, initialY }: UseToastAnimationProps) => {
+    enter: () => Promise<void>;
+    exit: () => Promise<void>;
+    animatedStyle: {
+        opacity: import("react-native").Animated.Value;
+        transform: {
+            translateY: import("react-native").Animated.Value;
+        }[];
+    };
+};
+export {};

package/dist/esm/components/toast/hooks/useToastAnimation.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as m,useEffect as f,useRef as c}from"react";import{spring as t}from"@toss-design-system/easings";import{Animated as r}from"../../../interactions/animated";export const useToastAnimation=({position:s,initialY:e})=>{const a=c(new r.Value(0)).current,u=c(new r.Value(e??0)).current,l=c(!1),o=m(()=>new Promise(n=>{if(e===void 0){n();return}u.setValue(e),l.current=!0,r.parallel([r.spring(a,{toValue:1,useNativeDriver:!0,...s==="bottom"?t.quick:t.small}),r.spring(u,{toValue:0,useNativeDriver:!0,...s==="bottom"?t.quick:t.small})]).start(()=>{n()})}),[e,a,s,u]);return f(()=>{!l.current&&e!=null&&o()},[e,o]),{enter:o,exit:()=>new Promise(n=>{if(e==null){n();return}r.parallel([r.spring(a,{toValue:0,useNativeDriver:!0,...t.quick}),r.spring(u,{toValue:e,useNativeDriver:!0,...t.quick})]).start(()=>{n()})}),animatedStyle:{opacity:a,transform:[{translateY:u}]}}};

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

@@ -0,0 +1 @@
+export { Toast, type ToastProps } from './Toast';

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

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

package/dist/esm/components/tooltip/components/FullTooltip/FullTooltipBase.d.ts

@@ -0,0 +1,7 @@
+import { FullTooltipBaseProps } from '../../types';
+export declare const ANCHOR_HEIGHT = 12;
+export declare const ANCHOR_WIDTH = 38;
+export declare function FullTooltipBase({ open, placement, anchorMarginLeft, messageAlign, message, style, animationDelay: _animationDelay, withAnimation, anchorOverlapped, }: FullTooltipBaseProps & {
+    open?: boolean;
+    anchorOverlapped?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/FullTooltip/FullTooltipBase.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n,jsxs as P}from"react/jsx-runtime";import j,{Path as C}from"@granite-js/native/react-native-svg";import{colors as p}from"@toss-design-system/colors";import{bezier as E,spring as x}from"@toss-design-system/easings";import*as F from"../../../paragraph";import{hexToRgba as T}from"@toss/utils";import{useCallback as b,useEffect as D,useMemo as O,useRef as g,useState as R}from"react";import{Dimensions as _,Easing as z,View as H}from"react-native";import{Animated as t}from"../../../../interactions/animated";import{createTooltipOutlinePath as k}from"../../utils/createFullTooltipAnchorPath";import{HiddenFullTooltip as q}from"./HiddenFullTooltip";import{useAnnounce as B}from"../../../../utils/useAnnounce";export const ANCHOR_HEIGHT=12,ANCHOR_WIDTH=38;export function FullTooltipBase({open:i,placement:l,anchorMarginLeft:o=0,messageAlign:f="center",message:e,style:s,animationDelay:a=0,withAnimation:m=!0,anchorOverlapped:c=!1}){const[u,h]=R(0),r=m?a:0,y=m?200:0,{announce:w}=B(),{fullMessageStyle:N,fullTooltipStyle:A,enterMotion:v,exitMotion:V}=I({messageHeight:u,delay:r,duration:y,anchorOverlapped:c});return D(()=>{i?v():V()},[v,V,i]),D(()=>{i&&e&&w(e,{queue:!0,delay:r+200})},[i,e,w,r]),u===0?n(q,{message:e,onLayout:S=>{h(S.nativeEvent.layout.height)}}):P(t.View,{style:[{position:"relative",width:"100%"},A,s],children:[l==="bottom"?n(H,{style:[{height:ANCHOR_HEIGHT},c?{position:"absolute",top:-ANCHOR_HEIGHT,width:"100%",left:0}:void 0],children:n(M,{anchorMarginLeft:o,messageHeight:u})}):void 0,n(t.View,{style:{backgroundColor:T(p.teal400,.15)},children:n(t.View,{style:[N,{width:"100%",paddingVertical:16,paddingHorizontal:24}],children:n(F.Text,{typography:"t6",color:p.teal600,fontWeight:"bold",style:{textAlign:f},children:e})})}),l==="top"?n(H,{style:[{height:ANCHOR_HEIGHT,transform:[{scaleY:-1}]},c?{position:"absolute",width:"100%",bottom:-ANCHOR_HEIGHT}:void 0],children:n(M,{anchorMarginLeft:o,messageHeight:u})}):void 0]})}const d=z.bezier(...E.out);function I({messageHeight:i,delay:l,duration:o,anchorOverlapped:f}){const e=g(new t.Value(0)).current,s=g(new t.Value(0)).current,a=g(new t.Value(0)).current,m={opacity:e},c={height:s,opacity:a},u=b(()=>{const r={easing:d,duration:o};t.sequence([t.delay(l),t.parallel([t.timing(a,{toValue:1,delay:.5,useNativeDriver:!1,...r}),t.timing(e,{toValue:1,delay:.5,useNativeDriver:!1,...r}),t.spring(s,{toValue:i+ANCHOR_HEIGHT,useNativeDriver:!1,...x.basic})])]).start()},[l,o,e,s,a,i]),h=b(()=>{t.parallel([t.timing(a,{toValue:0,easing:d,duration:o,useNativeDriver:!1}),t.timing(e,{toValue:0,easing:d,duration:o,useNativeDriver:!1}),t.spring(s,{toValue:f?ANCHOR_HEIGHT:0,useNativeDriver:!1,...x.basic})]).start()},[f,o,e,s,a]);return{fullMessageStyle:m,fullTooltipStyle:c,enterMotion:u,exitMotion:h}}function M({messageHeight:i,anchorMarginLeft:l}){const o=O(()=>k({anchorPosition:l,height:i,width:_.get("window").width}),[i,l]);return n(j,{width:"100%",height:ANCHOR_HEIGHT,viewBox:`0 0 100 ${ANCHOR_HEIGHT}`,children:n(C,{d:o,fill:T(p.teal400,.15)})})}

package/dist/esm/components/tooltip/components/FullTooltip/HiddenFullTooltip.d.ts

@@ -0,0 +1,2 @@
+import { FullTooltipBaseProps } from '../../types';
+export declare function HiddenFullTooltip({ onLayout, message, ...props }: FullTooltipBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/FullTooltip/HiddenFullTooltip.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{colors as a}from"@toss-design-system/colors";import*as e from"../../../paragraph";import{Animated as l}from"../../../../interactions/animated";export function HiddenFullTooltip({onLayout:t,message:i,...r}){return o(l.View,{style:[{opacity:0,width:"100%",paddingHorizontal:24,paddingVertical:16,position:"absolute"}],onLayout:t,...r,children:o(e.Text,{typography:"t6",color:a.teal600,fontWeight:"bold",children:i})})}

package/dist/esm/components/tooltip/components/FullTooltip/RelativeFullTooltip.d.ts

@@ -0,0 +1,2 @@
+import { FullTooltipProps } from '../../types';
+export declare function RelativeFullTooltip({ open, onClose, duration, children, ...props }: Omit<FullTooltipProps, 'floating'>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/FullTooltip/RelativeFullTooltip.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,Fragment as m,jsxs as s}from"react/jsx-runtime";import{useCloseTooltip as p}from"../../hooks/useCloseTooltip";import{useAnchorPosition as c}from"../../hooks/useAnchorPosition";import{ANCHOR_WIDTH as u,FullTooltipBase as f}from"./FullTooltipBase";function g({open:o,message:n,messageAlign:a,placement:t,anchorPositionByRatio:e,anchorOverlapped:r}){const l=c({anchorPositionByRatio:e,anchorWidth:u});return i(f,{open:o,message:n,messageAlign:a,placement:t,animationDelay:700,anchorMarginLeft:l,anchorOverlapped:r})}export function RelativeFullTooltip({open:o,onClose:n,duration:a=2600,children:t,...e}){return p({open:o,onClose:n,duration:a}),s(m,{children:[e.placement==="bottom"?t:void 0,i(g,{open:o,...e}),e.placement==="top"?t:void 0]})}

package/dist/esm/components/tooltip/components/FullTooltip.d.ts

@@ -0,0 +1,4 @@
+import { FullTooltipProps } from '../types';
+export declare function ControlledFullTooltip(props: FullTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function UncontrolledFullTooltip({ ...props }: FullTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function FullTooltip(props: FullTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/FullTooltip.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{useState as l}from"react";import{RelativeFullTooltip as r}from"./FullTooltip/RelativeFullTooltip";export function ControlledFullTooltip(o){return e(r,{...o})}export function UncontrolledFullTooltip({...o}){const[t,n]=l(!0);return e(ControlledFullTooltip,{...o,open:t,onClose:()=>n(!1)})}export function FullTooltip(o){return o.open!==void 0?e(ControlledFullTooltip,{...o}):e(UncontrolledFullTooltip,{...o})}

package/dist/esm/components/tooltip/components/Tooltip/Anchor.d.ts

@@ -0,0 +1,4 @@
+import { Size } from '../../types';
+export declare const Anchor: ({ size }: {
+    size: Size;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/Tooltip/Anchor.js

@@ -0,0 +1 @@
+"use strict";import{jsx as L}from"react/jsx-runtime";import o,{Path as t}from"@granite-js/native/react-native-svg";import{useAdaptive as e}from"../../../../core";export const Anchor=({size:r})=>{const i=e();return r==="small"&&L(o,{width:24,height:11,viewBox:"0 0 24 11",children:L(t,{d:"M13.5596838,1.2275951 L20.6626545,7.70529497 C21.5749984,8.5373257 22.7652342,8.99855635 24,8.99855635 L24,8.99855635 L24,8.99855635 L0,9 C1.50765571,8.99907116 2.96068864,8.43548861 4.0746657,7.41957439 L10.8643362,1.2275951 C11.6278693,0.531275444 12.7961507,0.531275444 13.5596838,1.2275951 Z M0,8.99855635 L24,8.99855635 L24,11.99855635 L0,11.99855635 L0,8.99855635 Z",fill:i.floatBackground})}),L(o,{width:38,height:14,viewBox:"0 0 38 14",children:L(t,{d:"M20.1757594,0.999512076 L30.6394015,9.37042571 C32.7671581,11.072631 35.4108841,12 38.1357421,12 L44,12 L44,12 L-7,12 L-0.283003359,12 C2.44185458,12 5.08558063,11.072631 7.21333721,9.37042571 L17.6769793,0.999512076 C18.4074166,0.415162235 19.4453221,0.415162235 20.1757594,0.999512076 Z M0,12 L38,12 L38,15 L0,15 L0,12 Z",fill:i.floatBackground})})};

package/dist/esm/components/tooltip/components/Tooltip/FloatingTooltip.d.ts

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

package/dist/esm/components/tooltip/components/Tooltip/FloatingTooltip.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as R}from"react/jsx-runtime";import{AnimateRallyPresence as k}from"../../../../interactions/rally";import{useAdaptive as O}from"../../../../core";import*as q from"../../../paragraph";import{cloneElement as z,forwardRef as b,useEffect as D,useMemo as I,useRef as G,useState as x}from"react";import{Dimensions as J,Pressable as K,StyleSheet as N,View as p}from"react-native";import{useTooltip as T}from"../../contexts/TooltipContext";import{useAnchorPosition as Q}from"../../hooks/useAnchorPosition";import{useOnPressOutside as U}from"../../hooks/useOnPressOutside";import{mergeRefs as A}from"../../utils/mergeRefs";import{Anchor as X}from"./Anchor";import{getTooltipStyle as Y,TooltipBase as Z}from"./TooltipBase";function H(f){return new Promise(r=>{f.measure((n,i,s,o)=>{r({width:s,height:o})})})}export const FloatingTooltip=b(function({open:r,children:n,...i},s){const{targetRef:o}=T(),l=n.ref,a=z(n,{...n.props,collapsable:!1,onPress:()=>{i.onChildrenPress?.(),n.props?.onPress?.()},ref:l!=null?A(l,o):o});return R(p,{style:{position:"relative",zIndex:9e3},children:[a,e(k,{children:r&&e(p,{style:[N.absoluteFill,{width:J.get("window").width}],pointerEvents:"box-none",children:e($,{ref:s,...i})})})]})});const $=b(function({message:r,messageAlign:n,placement:i,contentPositionByRatio:s,size:o="medium",motion:l,onPress:a,onPressOutside:W},v){const c=G(null),m=O(),{targetRef:y,offset:h}=T(),[u,F]=x(null),[d,S]=x(null),t=I(()=>Y(o),[o]),C=A(v,c),E=Q({anchorPositionByRatio:s,anchorWidth:t.anchorWidth,tooltipWidth:d?.width??0,size:o});return U({ref:c,onPressOutside:W}),D(()=>{function g(){const P=y?.current,w=c.current;P!=null&&w!=null&&h!=null&&(async()=>{const{width:L,height:_}=await H(P),{width:j,height:B}=await H(w),M=L/2-j/2,V=i==="top"?-B-h-t.anchorHeight:_+t.anchorHeight+h;F({left:M,top:V})})()}requestAnimationFrame(()=>{g()})},[y,i,t,h]),u==null||d==null?e(K,{ref:C,collapsable:!1,pointerEvents:"box-only",style:{opacity:0,position:"absolute",backgroundColor:m.floatBackground,borderRadius:t.borderRadius,paddingHorizontal:t.paddingHorizontal/2,paddingVertical:t.paddingVertical/2},onLayout:g=>{S(g.nativeEvent.layout)},onPress:a,children:R(p,{children:[e(p,{style:{position:"absolute",width:t.anchorWidth,height:t.anchorHeight},children:e(X,{size:o})}),e(q.Text,{typography:t.typography,color:m.grey800,fontWeight:t.fontWeight,children:r})]})}):e(Z,{ref:c,size:o,placement:i,messageAlign:n,message:r,motion:l,left:u.left,top:u.top,contentHeight:d.height,anchorMarginLeft:E,onPress:a})});

package/dist/esm/components/tooltip/components/Tooltip/TooltipBase.d.ts

@@ -0,0 +1,19 @@
+import { FontWeightKeys, TypographyKeys } from '../../../../constants';
+import { View } from 'react-native';
+import { Size, TooltipBaseProps } from '../../types';
+export declare const TooltipBase: import("react").ForwardRefExoticComponent<Omit<TooltipBaseProps, "children"> & {
+    contentHeight: number;
+    left: number;
+    top: number;
+} & import("react").RefAttributes<View>>;
+type TooltipStyle = {
+    borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    anchorHeight: number;
+    anchorWidth: number;
+    typography: TypographyKeys;
+    fontWeight: FontWeightKeys;
+};
+export declare function getTooltipStyle(size: Size): TooltipStyle;
+export {};

package/dist/esm/components/tooltip/components/Tooltip/TooltipBase.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as A}from"react/jsx-runtime";import{colors as m}from"@toss-design-system/colors";import{spring as f}from"@toss-design-system/easings";import{Animated as P}from"../../../../interactions/animated";import{useRally as Y}from"../../../../interactions/rally";import{useAdaptive as j,useColorPreference as C}from"../../../../core";import*as V from"../../../paragraph";import{forwardRef as T,useEffect as p,useMemo as z}from"react";import{Platform as B,Pressable as X,View as g}from"react-native";import{useTooltip as k}from"../../contexts/TooltipContext";import{Anchor as v}from"./Anchor";import{useAnnounce as S}from"../../../../utils/useAnnounce";const q=P.createAnimatedComponent(X);export const TooltipBase=T(function({size:a="medium",placement:s,anchorMarginLeft:h=0,message:r,motion:u,messageAlign:y="left",contentHeight:b,left:O,top:x,onPress:H},w){const c=j(),{colorPreference:W}=C(),{flipped:d}=k(),{announce:l}=S(),o=z(()=>getTooltipStyle(a),[a]),t=s==="bottom"?"top":"bottom",e=Y({motion:u==="strong"?[{opacity:{from:0,to:1},scale:{from:0,to:1.25},transformOriginX:{from:"center",to:"center"},transformOriginY:{from:t,to:t},easing:f.quick},{scale:{from:1.25,to:1},transformOriginX:{from:"center",to:"center"},transformOriginY:{from:t,to:t},easing:{stiffness:300,damping:15}}]:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:"center",to:"center"},transformOriginY:{from:t,to:t},easing:f.medium},exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:"center",to:"center"},transformOriginY:{from:t,to:t},easing:f.medium}});return p(()=>{e.play()},[e]),p(()=>{r&&l(r,{queue:!0,delay:100})},[r,l]),A(q,{ref:w,onPress:H,onLayout:R=>{e.onLayout(R)},style:[{opacity:0,transform:[{scale:0}],zIndex:9e3,position:"absolute",backgroundColor:c.floatBackground,borderRadius:o.borderRadius,paddingHorizontal:o.paddingHorizontal/2,paddingVertical:o.paddingVertical/2,shadowColor:W==="light"?B.OS==="ios"?m.greyOpacity500:void 0:m.greyOpacity900,shadowOffset:{width:0,height:d?-16:16},shadowOpacity:1,shadowRadius:60,elevation:40,left:O,top:x},e.style],children:[i(g,{style:{position:"absolute",justifyContent:"center",alignItems:"center",top:s==="top"?b-4:-o.anchorHeight+2,left:h,width:o.anchorWidth,height:o.anchorHeight+2,transform:s==="top"?[{scaleY:-1}]:[]},children:i(v,{size:a})}),i(g,{style:{flexDirection:"row",justifyContent:"center",alignSelf:"flex-start",transform:[{scaleY:d?-1:1}]},children:i(V.Text,{typography:o.typography,color:c.grey800,fontWeight:o.fontWeight,style:{textAlign:y},children:r})})]})});export function getTooltipStyle(n){return n==="small"?{borderRadius:12,paddingVertical:16,paddingHorizontal:24,anchorHeight:9,anchorWidth:24,typography:"t7",fontWeight:"semiBold"}:n==="large"?{borderRadius:18,paddingVertical:26,paddingHorizontal:40,anchorHeight:12,anchorWidth:38,typography:"t5",fontWeight:"bold"}:{borderRadius:16,paddingVertical:26,paddingHorizontal:32,anchorHeight:12,anchorWidth:38,typography:"t6",fontWeight:"bold"}}

package/dist/esm/components/tooltip/components/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import { TooltipProps } from '../types';
+export declare function ControlledTooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnControlledTooltip({ onChildrenPress, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/components/Tooltip.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useEffect as s,useState as u}from"react";import{TooltipProvider as c}from"../contexts/TooltipContext";import{FloatingTooltip as m}from"./Tooltip/FloatingTooltip";export function ControlledTooltip(o){const{open:e,placement:n,offset:r,autoFlip:i,onClose:l}=o,{children:p,...f}=o;return s(()=>{!e&&l&&l()},[e,l]),t(c,{open:e,placement:n,offsetNumber:r,autoFlip:i,children:t(m,{...f,children:p})})}export function UnControlledTooltip({onChildrenPress:o,...e}){const[n,r]=u(!0);return t(ControlledTooltip,{open:n,onChildrenPress:()=>{r(i=>!i),o?.()},...e})}export function Tooltip(o){return o.open!==void 0?t(ControlledTooltip,{...o}):t(UnControlledTooltip,{...o})}

package/dist/esm/components/tooltip/contexts/TooltipContext.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, RefObject } from 'react';
+import { View } from 'react-native';
+interface TooltipProviderProps {
+    open?: boolean;
+    children: ReactNode;
+    placement?: 'top' | 'bottom';
+    offsetNumber?: number;
+    /** @TODO */
+    autoFlip?: boolean;
+}
+interface State {
+    targetRef: RefObject<View> | null;
+    floatingRef: RefObject<View> | null;
+    flipped: boolean;
+    offset: number;
+}
+export declare const TooltipContext: import("react").Context<State | null>;
+export declare function TooltipProvider({ children, offsetNumber }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTooltip(): State | {
+    targetRef: null;
+    floatingRef: null;
+    flipped: null;
+    offset: null;
+};
+export {};

package/dist/esm/components/tooltip/contexts/TooltipContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as u}from"react/jsx-runtime";import{createContext as f,useContext as i,useMemo as s,useRef as e}from"react";export const TooltipContext=f(null);export function TooltipProvider({children:t,offsetNumber:o=0}){const l=e(null),n=e(null),r=s(()=>({targetRef:l,floatingRef:n,flipped:!1,offset:o}),[o]);return u(TooltipContext.Provider,{value:r,children:t})}export function useTooltip(){return i(TooltipContext)??p}const p={targetRef:null,floatingRef:null,flipped:null,offset:null};

package/dist/esm/components/tooltip/hooks/useAnchorPosition.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '../types';
+interface AnchorPositionProps {
+    anchorWidth: number;
+    tooltipWidth?: number;
+    anchorPositionByRatio?: number;
+    defaultPosition?: number;
+    size?: Size;
+}
+export declare function useAnchorPosition({ anchorWidth, tooltipWidth, anchorPositionByRatio, defaultPosition, size, }: AnchorPositionProps): number;
+export {};

package/dist/esm/components/tooltip/hooks/useAnchorPosition.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as i}from"react";import{Dimensions as g}from"react-native";import{getTooltipStyle as u}from"../components/Tooltip/TooltipBase";const m=16;export function useAnchorPosition({anchorWidth:r,tooltipWidth:o,anchorPositionByRatio:t,defaultPosition:f,size:n}){const e=i((l=0)=>n!=null&&o!=null?l*(o-u(n).paddingHorizontal-r)+u(n).paddingHorizontal/2:l*(g.get("window").width-m-r)+m/2,[n,o,r]);return t!=null?e(t):f??e(.5)}

package/dist/esm/components/tooltip/hooks/useCloseTooltip.d.ts

@@ -0,0 +1,7 @@
+interface UseCloseTooltipParams {
+    open?: boolean;
+    duration: number;
+    onClose?: () => void;
+}
+export declare function useCloseTooltip({ open, duration, onClose }: UseCloseTooltipParams): void;
+export {};

package/dist/esm/components/tooltip/hooks/useCloseTooltip.js

@@ -0,0 +1 @@
+"use strict";import{useEffect as c,useRef as f}from"react";export function useCloseTooltip({open:r,duration:u,onClose:t}){const e=f();c(()=>(r&&t&&(e.current=setTimeout(()=>{t()},u)),()=>{e.current&&clearTimeout(e.current)}),[t,u,r])}

package/dist/esm/components/tooltip/hooks/useOnPressOutside.d.ts

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+export declare const useOnPressOutside: ({ ref, onPressOutside, interactive, }: {
+    ref: React.RefObject<View>;
+    onPressOutside?: () => void;
+    interactive?: boolean;
+}) => void;

package/dist/esm/components/tooltip/hooks/useOnPressOutside.js

@@ -0,0 +1 @@
+"use strict";import{useGlobalEvent as c}from"../../../core";import{useEffect as u}from"react";import{findNodeHandle as r}from"react-native";export const useOnPressOutside=({ref:t,onPressOutside:e,interactive:s})=>{const o=c();u(()=>{if(e&&t.current!=null){const n=i=>{const d=r(i.target),l=r(t.current);d!==l&&e()};return o.addEventListener("touchEnd",n),()=>{o.removeEventListener("touchEnd",n)}}},[t,e,s,o])};

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './components/Tooltip';
+export { FullTooltip } from './components/FullTooltip';

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

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