@toss/tds-react-native 1.0.0 → 1.2.1

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

@@ -1,4 +1,4 @@
-import { GetLinearGradientOption } from '@toss-design-system/color-utils';
 import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+import { 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/LinearGradient.js

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as u,jsxs as w,Fragment as _}from"react/jsx-runtime";import{Image as W,Mask as Y,Rect as E,Svg as H}from"@granite-js/native/react-native-svg";import{bezier as x,spring as o}from"@toss-design-system/easings";import{Animated as e}from"../../interactions/animated";import{getNextColorValue as I}from"@toss-design-system/color-utils";import{useAdaptive as L}from"../../core";import{SvgIcon as G}from"../icon/private";import{generateHapticFeedback as J}from"../../native/generateHapticFeedback";import{forwardRef as Q,memo as T,useCallback as p,useRef as g}from"react";import{Easing as V,Pressable as U}from"react-native";const X=e.createAnimatedComponent(H),Z=e.createAnimatedComponent(E),$=e.createAnimatedComponent(U),z=Q(function({source:h,name:b,color:i,bgColor:A,variant:r="clear",label:M,iconSize:c=24,children:N,style:D,onPressIn:v,onPressOut:y,...B},P){const C=L(),m=A??C.greyOpacity100,j={borderWidth:1,borderStyle:"solid",borderColor:C.greyOpacity100},n=g(new e.Value(0)).current,a=g(new e.Value(1)).current,F=n.interpolate({inputRange:[0,1],outputRange:[m,I({color:m})]}),s=g(new e.Value(0)).current,S=s.interpolate({inputRange:[0,1],outputRange:["transparent",m]}),d=i!=null,l=g(new e.Value(0)).current,q=l.interpolate({inputRange:[0,1],outputRange:[i??"grey",i?I({color:i}):"grey"]}),R=p(()=>{e.spring(a,{toValue:.9,useNativeDriver:!1,...o.rapid}).start(),r==="fill"?e.timing(n,{toValue:1,useNativeDriver:!1,easing:V.bezier(...x.out),duration:500}).start():e.spring(s,{toValue:1,useNativeDriver:!1,...o.rapid}).start(),d&&e.spring(l,{toValue:1,useNativeDriver:!1,...o.rapid}).start()},[n,s,l,a,r,d]),k=p(()=>{e.spring(a,{toValue:1,useNativeDriver:!1,...o.quick}).start(),r==="fill"?e.timing(n,{toValue:0,useNativeDriver:!1,easing:V.bezier(...x.out),duration:500}).start():e.spring(s,{toValue:0,useNativeDriver:!1,...o.quick}).start(),d&&e.spring(l,{toValue:0,useNativeDriver:!1,...o.quick}).start()},[n,s,l,a,r,d]),K=p(f=>{R(),v?.(f),J({type:"tickWeak"})},[R,v]),O=p(f=>{k(),y?.(f)},[y,k]);return u($,{ref:P,style:[{borderRadius:te(c),transform:[{scale:a}],padding:ee(c),backgroundColor:r==="fill"?F:S,...r==="border"?j:void 0},D],onPressIn:K,onPressOut:O,accessible:!0,accessibilityRole:"button",accessibilityLabel:M,...B,children:u(X,{height:c,width:c,viewBox:"0 0 100 100",children:w(_,{children:[w(Y,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[h!==void 0&&u(W,{href:h,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),b!==void 0&&u(G,{name:b,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"})]}),u(Z,{x:"0",y:"0",width:"100%",height:"100%",mask:"url(#mask)",fill:i&&q}),N]})})})});export const IconButton=T(z);function ee(t){return 18<=t&&t<=20?9:t/2}function te(t){return t<=16?6:t<=20?8:12}
+"use strict";import{jsx as u,jsxs as w,Fragment as _}from"react/jsx-runtime";import{Mask as W,Rect as Y,Svg as E,Image as H}from"@granite-js/native/react-native-svg";import{getNextColorValue as x}from"@toss/tds-color-utils";import{bezier as I,spring as o}from"@toss/tds-easings";import{forwardRef as L,memo as G,useCallback as p,useRef as g}from"react";import{Easing as V,Pressable as J}from"react-native";import{useAdaptive as Q}from"../../core";import{Animated as e}from"../../interactions/animated";import{generateHapticFeedback as T}from"../../native/generateHapticFeedback";import{SvgIcon as U}from"../icon/private";const X=e.createAnimatedComponent(E),Z=e.createAnimatedComponent(Y),$=e.createAnimatedComponent(J),z=L(function({source:h,name:b,color:i,bgColor:A,variant:r="clear",label:M,iconSize:c=24,children:N,style:D,onPressIn:v,onPressOut:y,...B},P){const C=Q(),m=A??C.greyOpacity100,j={borderWidth:1,borderStyle:"solid",borderColor:C.greyOpacity100},n=g(new e.Value(0)).current,a=g(new e.Value(1)).current,F=n.interpolate({inputRange:[0,1],outputRange:[m,x({color:m})]}),s=g(new e.Value(0)).current,S=s.interpolate({inputRange:[0,1],outputRange:["transparent",m]}),d=i!=null,l=g(new e.Value(0)).current,q=l.interpolate({inputRange:[0,1],outputRange:[i??"grey",i?x({color:i}):"grey"]}),R=p(()=>{e.spring(a,{toValue:.9,useNativeDriver:!1,...o.rapid}).start(),r==="fill"?e.timing(n,{toValue:1,useNativeDriver:!1,easing:V.bezier(...I.out),duration:500}).start():e.spring(s,{toValue:1,useNativeDriver:!1,...o.rapid}).start(),d&&e.spring(l,{toValue:1,useNativeDriver:!1,...o.rapid}).start()},[n,s,l,a,r,d]),k=p(()=>{e.spring(a,{toValue:1,useNativeDriver:!1,...o.quick}).start(),r==="fill"?e.timing(n,{toValue:0,useNativeDriver:!1,easing:V.bezier(...I.out),duration:500}).start():e.spring(s,{toValue:0,useNativeDriver:!1,...o.quick}).start(),d&&e.spring(l,{toValue:0,useNativeDriver:!1,...o.quick}).start()},[n,s,l,a,r,d]),K=p(f=>{R(),v?.(f),T({type:"tickWeak"})},[R,v]),O=p(f=>{k(),y?.(f)},[y,k]);return u($,{ref:P,style:[{borderRadius:te(c),transform:[{scale:a}],padding:ee(c),backgroundColor:r==="fill"?F:S,...r==="border"?j:void 0},D],onPressIn:K,onPressOut:O,accessible:!0,accessibilityRole:"button",accessibilityLabel:M,...B,children:u(X,{height:c,width:c,viewBox:"0 0 100 100",children:w(_,{children:[w(W,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[h!==void 0&&u(H,{href:h,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),b!==void 0&&u(U,{name:b,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"})]}),u(Z,{x:"0",y:"0",width:"100%",height:"100%",mask:"url(#mask)",fill:i&&q}),N]})})})});export const IconButton=G(z);function ee(t){return 18<=t&&t<=20?9:t/2}function te(t){return t<=16?6:t<=20?8:12}

package/dist/esm/components/keypad/FullSecureKeypad/BackspaceIcon.js

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import l,{Path as r}from"@granite-js/native/react-native-svg";import{colors as a}from"@toss-design-system/colors";export function BackspaceIcon(){return o(l,{viewBox:"0 0 24 24","aria-label":"\uC9C0\uC6B0\uAE30",children:o(r,{fill:a.white,fillRule:"evenodd",d:"M20.966 10.8H6.93l5.451-5.451a1.2 1.2 0 10-1.697-1.697l-7.5 7.5c-.003.002-.004.006-.007.009a1.2 1.2 0 00-.252 1.298c.06.143.145.27.252.38l.007.01 7.5 7.5c.235.234.542.35.848.35a1.2 1.2 0 00.849-2.048L6.931 13.2h14.036a1.2 1.2 0 100-2.4"})})}
+"use strict";import{jsx as o}from"react/jsx-runtime";import l,{Path as r}from"@granite-js/native/react-native-svg";import{colors as a}from"@toss/tds-colors";export function BackspaceIcon(){return o(l,{viewBox:"0 0 24 24","aria-label":"\uC9C0\uC6B0\uAE30",children:o(r,{fill:a.white,fillRule:"evenodd",d:"M20.966 10.8H6.93l5.451-5.451a1.2 1.2 0 10-1.697-1.697l-7.5 7.5c-.003.002-.004.006-.007.009a1.2 1.2 0 00-.252 1.298c.06.143.145.27.252.38l.007.01 7.5 7.5c.235.234.542.35.848.35a1.2 1.2 0 00.849-2.048L6.931 13.2h14.036a1.2 1.2 0 100-2.4"})})}

package/dist/esm/components/keypad/FullSecureKeypad/index.js

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as f}from"react/jsx-runtime";import{useAdaptive as A}from"../../../core";import{colors as S}from"@toss-design-system/colors";import{forwardRef as g,memo as P,useCallback as K,useImperativeHandle as x,useRef as L}from"react";import{View as t}from"react-native";import{ControlKeyButton as d}from"./ControlKeyButton";import{GridItem as i}from"./GridItem";import{GridRow as h}from"./GridRow";import{CONTROL_KEY_CHARACTER_TYPE_WIDTH as R,CONTROL_KEY_SHIFT_WIDTH as H,CONTROL_KEY_SPACE_WIDTH as O,CONTROL_KEY_SUBMIT_WIDTH as b,SPECIAL_KEY as v}from"./keys";import{SecureKeyButton as Y}from"./SecureKeyButton";import{ShiftIcon as j}from"./ShiftIcon";import{KeypadStatus as n,useKeypad as w}from"./useKeypad";export const FullSecureKeypad=P(g(({style:u,onKeyPress:m,onBackspacePress:a,onSpacePress:I,onSubmit:C,submitButtonText:_="\uC785\uB825 \uC644\uB8CC",submitDisabled:p=!1},y)=>{const s=A(),r=w(),c=L(null);x(y,()=>({reorderEmptyCells:r.reorderEmptyCells,element:c.current}),[r]);const E=K(o=>{o===v.backspace?a():m(o)},[m,a]);return f(t,{style:[{backgroundColor:"#283447"},u],ref:c,children:[e(t,{style:{paddingTop:6,paddingHorizontal:0,paddingBottom:10},children:r.keys.map((o,T)=>e(h,{height:52,horizontalPadding:10,children:o.keys.map(l=>l.value===""?e(t,{style:{flex:1}},l.value):e(Y,{secureKey:l,onPressIn:E},l.value))},`${r.mode}-${T}`))}),e(t,{children:f(h,{height:56,children:[e(i,{style:{flex:H},children:e(d,{onPressIn:r.toggleShift,disabled:r.mode===n.SPECIAL,children:e(j,{color:r.mode===n.SPECIAL?s.grey500:S.white,filled:r.mode===n.ALPHABET_CAPITALIZED})})}),e(i,{style:{flex:R},children:e(d,{onPressIn:r.toggleSpecialAndAlphabet,children:r.mode===n.SPECIAL?"\uC601\uBB38":"\uD2B9\uC218"})}),e(i,{style:{flex:O},children:e(d,{onPressIn:I,children:"Space"})}),e(i,{style:{flex:b},children:e(d,{onPressIn:()=>{C()},color:p?s.blue100:s.blue500,disabled:p,children:_})})]})})]})}));
+"use strict";import{jsx as e,jsxs as f}from"react/jsx-runtime";import{colors as A}from"@toss/tds-colors";import{forwardRef as S,memo as g,useCallback as P,useImperativeHandle as K,useRef as x}from"react";import{View as t}from"react-native";import{useAdaptive as L}from"../../../core";import{ControlKeyButton as d}from"./ControlKeyButton";import{GridItem as i}from"./GridItem";import{GridRow as h}from"./GridRow";import{CONTROL_KEY_CHARACTER_TYPE_WIDTH as R,CONTROL_KEY_SHIFT_WIDTH as H,CONTROL_KEY_SPACE_WIDTH as O,CONTROL_KEY_SUBMIT_WIDTH as b,SPECIAL_KEY as v}from"./keys";import{SecureKeyButton as Y}from"./SecureKeyButton";import{ShiftIcon as j}from"./ShiftIcon";import{KeypadStatus as n,useKeypad as w}from"./useKeypad";export const FullSecureKeypad=g(S(({style:u,onKeyPress:m,onBackspacePress:a,onSpacePress:I,onSubmit:C,submitButtonText:_="\uC785\uB825 \uC644\uB8CC",submitDisabled:p=!1},y)=>{const s=L(),r=w(),c=x(null);K(y,()=>({reorderEmptyCells:r.reorderEmptyCells,element:c.current}),[r]);const E=P(o=>{o===v.backspace?a():m(o)},[m,a]);return f(t,{style:[{backgroundColor:"#283447"},u],ref:c,children:[e(t,{style:{paddingTop:6,paddingHorizontal:0,paddingBottom:10},children:r.keys.map((o,T)=>e(h,{height:52,horizontalPadding:10,children:o.keys.map(l=>l.value===""?e(t,{style:{flex:1}},l.value):e(Y,{secureKey:l,onPressIn:E},l.value))},`${r.mode}-${T}`))}),e(t,{children:f(h,{height:56,children:[e(i,{style:{flex:H},children:e(d,{onPressIn:r.toggleShift,disabled:r.mode===n.SPECIAL,children:e(j,{color:r.mode===n.SPECIAL?s.grey500:A.white,filled:r.mode===n.ALPHABET_CAPITALIZED})})}),e(i,{style:{flex:R},children:e(d,{onPressIn:r.toggleSpecialAndAlphabet,children:r.mode===n.SPECIAL?"\uC601\uBB38":"\uD2B9\uC218"})}),e(i,{style:{flex:O},children:e(d,{onPressIn:I,children:"Space"})}),e(i,{style:{flex:b},children:e(d,{onPressIn:()=>{C()},color:p?s.blue100:s.blue500,disabled:p,children:_})})]})})]})}));

package/dist/esm/components/list-footer/ListFooterTitle.js

@@ -1 +1 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{colors as p}from"@toss-design-system/colors";import{Txt as f}from"../txt";export function ListFooterTitle({typography:o="t5",color:r=p.blue500,fontWeight:t="medium",children:i,...e}){return m(f,{typography:o,color:r,fontWeight:t,...e,children:i})}
+"use strict";import{jsx as m}from"react/jsx-runtime";import{colors as p}from"@toss/tds-colors";import{Txt as f}from"../txt";export function ListFooterTitle({typography:o="t5",color:r=p.blue500,fontWeight:t="medium",children:i,...e}){return m(f,{typography:o,color:r,fontWeight:t,...e,children:i})}

package/dist/esm/components/list-row/ListRowDisabled.js

@@ -1 +1 @@
-"use strict";import{jsx as e}from"react/jsx-runtime";import{colors as r}from"@toss-design-system/colors";import{useColorPreference as s,useAdaptive as l}from"../../core";import a from"hex-to-rgba";import{useMemo as c}from"react";import{View as i}from"react-native";function p({...t}){const{colorPreference:o}=s(),n=c(()=>o==="light"?r.whiteOpacity700:a(r.darkBackground,.7),[o]);return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:n}],...t})}function m({...t}){const o=l();return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:o.greyOpacity50}],...t})}export const ListRowDisabled={Style1:p,Style2:m};
+"use strict";import{jsx as e}from"react/jsx-runtime";import{colors as r}from"@toss/tds-colors";import s from"hex-to-rgba";import{useMemo as l}from"react";import{View as i}from"react-native";import{useAdaptive as a,useColorPreference as c}from"../../core";function p({...t}){const{colorPreference:o}=c(),n=l(()=>o==="light"?r.whiteOpacity700:s(r.darkBackground,.7),[o]);return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:n}],...t})}function m({...t}){const o=a();return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:o.greyOpacity50}],...t})}export const ListRowDisabled={Style1:p,Style2:m};

package/dist/esm/components/list-row/animation/ShineEffect.js

@@ -1 +1 @@
-"use strict";import{jsx as t,Fragment as h,jsxs as l}from"react/jsx-runtime";import{colors as i}from"@toss-design-system/colors";import{useColorPreference as c}from"../../../core";import{Animated as o}from"../../../interactions/animated";import{StyleSheet as p}from"react-native";import{LinearGradient as n}from"../../gradient";import{ShineAnimationState as s}from"./animationState";const g=({shineAnimation:e})=>t(o.View,{pointerEvents:"none",style:[a.shineLight,e.light.gradient],children:t(n,{degree:140,colors:[{value:i.white,opacity:0},{value:i.white,opacity:.8},{value:i.white,opacity:0}],easing:"linear",positions:[.3,.5,.7],style:{width:"100%",height:"100%"}})}),d=({shineAnimation:e})=>t(o.View,{pointerEvents:"none",style:[a.shineDark,e.dark.gradient],children:t(n,{degree:135,colors:[{value:"rgba(23, 23, 28, 0.6)"},{value:"rgba(23, 23, 28, 0)"},{value:"rgba(23, 23, 28, 0.6)"}],easing:"linear",positions:[.4,.5,.6],style:{width:"100%",height:"100%"}})}),a=p.create({shineLight:{position:"absolute",height:"300%",top:0,aspectRatio:1},shineDark:{position:"absolute",top:0,left:0,width:"400%",height:"100%"}});export const ShineEffect=({shineAnimation:e})=>{const{colorPreference:r}=c();return e.state===s.Idle||e.state===s.Finished?null:l(h,{children:[r==="light"&&t(g,{shineAnimation:e}),r==="dark"&&t(d,{shineAnimation:e})]})};
+"use strict";import{jsx as t,Fragment as h,jsxs as l}from"react/jsx-runtime";import{colors as i}from"@toss/tds-colors";import{StyleSheet as c}from"react-native";import{useColorPreference as p}from"../../../core";import{Animated as o}from"../../../interactions/animated";import{LinearGradient as n}from"../../gradient";import{ShineAnimationState as s}from"./animationState";const g=({shineAnimation:e})=>t(o.View,{pointerEvents:"none",style:[a.shineLight,e.light.gradient],children:t(n,{degree:140,colors:[{value:i.white,opacity:0},{value:i.white,opacity:.8},{value:i.white,opacity:0}],easing:"linear",positions:[.3,.5,.7],style:{width:"100%",height:"100%"}})}),d=({shineAnimation:e})=>t(o.View,{pointerEvents:"none",style:[a.shineDark,e.dark.gradient],children:t(n,{degree:135,colors:[{value:"rgba(23, 23, 28, 0.6)"},{value:"rgba(23, 23, 28, 0)"},{value:"rgba(23, 23, 28, 0.6)"}],easing:"linear",positions:[.4,.5,.6],style:{width:"100%",height:"100%"}})}),a=c.create({shineLight:{position:"absolute",height:"300%",top:0,aspectRatio:1},shineDark:{position:"absolute",top:0,left:0,width:"400%",height:"100%"}});export const ShineEffect=({shineAnimation:e})=>{const{colorPreference:r}=p();return e.state===s.Idle||e.state===s.Finished?null:l(h,{children:[r==="light"&&t(g,{shineAnimation:e}),r==="dark"&&t(d,{shineAnimation:e})]})};

package/dist/esm/components/list-row/animation/useBlinkAnimation.js

@@ -1 +1 @@
-"use strict";import{useCallback as A,useMemo as f,useRef as l,useState as y}from"react";import{Animated as t}from"../../../interactions/animated";import{spring as n}from"@toss-design-system/easings";import{sToMs as p}from"./sToMs";import{BlinkAnimationState as e}from"./animationState";export const useBlinkAnimation=({containerSize:d})=>{const i=l(new t.Value(1)).current,r=l(new t.Value(0)).current,a=l(new t.Value(0)).current,s=l(new t.Value(0)).current,[g,o]=y(e.Idle),v=A(()=>{o(e.StartAnimation|e.Playing),i.setValue(1);const u=t.sequence([t.spring(i,{toValue:1.02,stiffness:766,damping:52,useNativeDriver:!0}),t.spring(i,{toValue:1,...n.slow,useNativeDriver:!0})]);a.setValue(0);const m=t.parallel([t.spring(r,{toValue:.04,delay:p(.48),...n.basic,useNativeDriver:!0})]);s.setValue(0),a.setValue(0);const c=t.parallel([t.spring(a,{toValue:1,delay:p(.02),...n.basic,useNativeDriver:!0}),t.spring(s,{toValue:1,delay:p(.02),...n.slow,useNativeDriver:!0})]);t.parallel([u,m,c]).start(()=>{o(e.StartAnimation|e.Finished)})},[i,r,a,s]),V=A(()=>{o(e.EndAnimation|e.Playing);const u=t.spring(i,{toValue:1,...n.quick,useNativeDriver:!0}),m=t.spring(r,{toValue:0,...n.slow,useNativeDriver:!0}),c=t.spring(a,{toValue:0,...n.slow,useNativeDriver:!0});t.parallel([u,m,c]).start(()=>{o(e.EndAnimation|e.Finished)})},[i,r,a]);return f(()=>({container:{transform:[{scale:i}]},dimmer:{opacity:r},gradient:{opacity:a,transform:[{scale:s},{translateY:t.divide(t.multiply(s,-d.height),2)}]},state:g,start:v,exit:V}),[i,r,g,V,d,a,s,v])};
+"use strict";import{spring as n}from"@toss/tds-easings";import{useCallback as A,useMemo as f,useRef as l,useState as y}from"react";import{Animated as t}from"../../../interactions/animated";import{BlinkAnimationState as e}from"./animationState";import{sToMs as p}from"./sToMs";export const useBlinkAnimation=({containerSize:d})=>{const i=l(new t.Value(1)).current,r=l(new t.Value(0)).current,a=l(new t.Value(0)).current,s=l(new t.Value(0)).current,[g,o]=y(e.Idle),v=A(()=>{o(e.StartAnimation|e.Playing),i.setValue(1);const u=t.sequence([t.spring(i,{toValue:1.02,stiffness:766,damping:52,useNativeDriver:!0}),t.spring(i,{toValue:1,...n.slow,useNativeDriver:!0})]);a.setValue(0);const m=t.parallel([t.spring(r,{toValue:.04,delay:p(.48),...n.basic,useNativeDriver:!0})]);s.setValue(0),a.setValue(0);const c=t.parallel([t.spring(a,{toValue:1,delay:p(.02),...n.basic,useNativeDriver:!0}),t.spring(s,{toValue:1,delay:p(.02),...n.slow,useNativeDriver:!0})]);t.parallel([u,m,c]).start(()=>{o(e.StartAnimation|e.Finished)})},[i,r,a,s]),V=A(()=>{o(e.EndAnimation|e.Playing);const u=t.spring(i,{toValue:1,...n.quick,useNativeDriver:!0}),m=t.spring(r,{toValue:0,...n.slow,useNativeDriver:!0}),c=t.spring(a,{toValue:0,...n.slow,useNativeDriver:!0});t.parallel([u,m,c]).start(()=>{o(e.EndAnimation|e.Finished)})},[i,r,a]);return f(()=>({container:{transform:[{scale:i}]},dimmer:{opacity:r},gradient:{opacity:a,transform:[{scale:s},{translateY:t.divide(t.multiply(s,-d.height),2)}]},state:g,start:v,exit:V}),[i,r,g,V,d,a,s,v])};

package/dist/esm/components/list-row/animation/useShineAnimation.js

@@ -1 +1 @@
-"use strict";import{useCallback as V,useEffect as A,useMemo as b,useRef as g,useState as k}from"react";import{Animated as t}from"../../../interactions/animated";import{bezier as D}from"@toss-design-system/easings";import{sToMs as o}from"./sToMs";import{Easing as l}from"react-native";import{ShineAnimationState as c}from"./animationState";export const useShineAnimation=({containerSize:a})=>{const s=a.height*3,e=g(new t.Value(-s)).current,[h,v]=k(c.Idle);A(()=>{e.setValue(-s)},[e,s]);const p=V((n,m)=>{t.loop(t.sequence([t.timing(e,{toValue:-s,duration:0,useNativeDriver:!0}),t.timing(e,{toValue:a.width,duration:o(2.2),easing:l.bezier(.7,0,.7,1),useNativeDriver:!0}),t.delay(o(.1))]),{iterations:n}).start(m)},[e,s,a.width]),u=a.width*4,i=g(new t.Value(-u*.75)).current,r=g(new t.Value(0)).current;A(()=>{i.setValue(-u*.75)},[i,u]);const f=V((n,m)=>{const d=t.sequence([t.timing(i,{toValue:-u*.75,duration:0,useNativeDriver:!0}),t.timing(i,{toValue:0,easing:l.bezier(.37,0,.63,1),duration:o(2.5),useNativeDriver:!0})]),N=t.sequence([t.timing(r,{toValue:0,duration:0,useNativeDriver:!0}),t.timing(r,{toValue:1,duration:o(.9),easing:l.bezier(...D.linear),useNativeDriver:!0}),t.timing(r,{toValue:0,duration:o(1.6),delay:o(.9),easing:l.bezier(...D.out),useNativeDriver:!0})]);t.loop(t.parallel([d,N]),{iterations:n}).start(m)},[r,i,u]);return b(()=>{function n(m){return d=>{v(c.Playing),m(d,()=>v(c.Finished))}}return{state:h,light:{gradient:{transform:[{translateX:e},{translateY:-a.height}]},start:n(p)},dark:{gradient:{opacity:r,transform:[{translateX:i}]},start:n(f)}}},[a.height,h,e,p,r,i,f])};
+"use strict";import{bezier as V}from"@toss/tds-easings";import{useCallback as A,useEffect as D,useMemo as b,useRef as g,useState as k}from"react";import{Easing as l}from"react-native";import{Animated as t}from"../../../interactions/animated";import{ShineAnimationState as c}from"./animationState";import{sToMs as o}from"./sToMs";export const useShineAnimation=({containerSize:a})=>{const s=a.height*3,e=g(new t.Value(-s)).current,[h,v]=k(c.Idle);D(()=>{e.setValue(-s)},[e,s]);const p=A((n,m)=>{t.loop(t.sequence([t.timing(e,{toValue:-s,duration:0,useNativeDriver:!0}),t.timing(e,{toValue:a.width,duration:o(2.2),easing:l.bezier(.7,0,.7,1),useNativeDriver:!0}),t.delay(o(.1))]),{iterations:n}).start(m)},[e,s,a.width]),u=a.width*4,i=g(new t.Value(-u*.75)).current,r=g(new t.Value(0)).current;D(()=>{i.setValue(-u*.75)},[i,u]);const f=A((n,m)=>{const d=t.sequence([t.timing(i,{toValue:-u*.75,duration:0,useNativeDriver:!0}),t.timing(i,{toValue:0,easing:l.bezier(.37,0,.63,1),duration:o(2.5),useNativeDriver:!0})]),N=t.sequence([t.timing(r,{toValue:0,duration:0,useNativeDriver:!0}),t.timing(r,{toValue:1,duration:o(.9),easing:l.bezier(...V.linear),useNativeDriver:!0}),t.timing(r,{toValue:0,duration:o(1.6),delay:o(.9),easing:l.bezier(...V.out),useNativeDriver:!0})]);t.loop(t.parallel([d,N]),{iterations:n}).start(m)},[r,i,u]);return b(()=>{function n(m){return d=>{v(c.Playing),m(d,()=>v(c.Finished))}}return{state:h,light:{gradient:{transform:[{translateX:e},{translateY:-a.height}]},start:n(p)},dark:{gradient:{opacity:r,transform:[{translateX:i}]},start:n(f)}}},[a.height,h,e,p,r,i,f])};

package/dist/esm/components/loader/Loader.js

@@ -1 +1 @@
-"use strict";import{jsx as r,jsxs as w}from"react/jsx-runtime";import k,{Circle as x}from"@granite-js/native/react-native-svg";import{colors as h}from"@toss-design-system/colors";import{useAdaptive as L}from"../../core";import{Txt as N}from"../txt";import{useEffect as v,useMemo as S,useRef as g}from"react";import{Animated as e,Easing as i,View as p}from"react-native";import{useAnnounce as z}from"../../utils/useAnnounce";const V=e.createAnimatedComponent(p),I=e.createAnimatedComponent(k),T=e.createAnimatedComponent(x);function A({size:t=y.size,type:n=y.type,customStrokeColor:o,customSize:l}){const u=g(new e.Value(0)).current,a=g(new e.Value(0)).current,s=g(new e.Value(0)).current,c=u.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]}),f=s.interpolate({inputRange:[0,1,2],outputRange:[180,45,180]}),D=a.interpolate({inputRange:[0,1,2],outputRange:["0deg","108deg","360deg"]}),R=o??O[n],d=l??B[t];return v(()=>{e.loop(e.sequence([e.timing(s,{toValue:1,duration:900,useNativeDriver:!0,easing:i.inOut(i.ease)}),e.timing(s,{toValue:2,useNativeDriver:!0,duration:900,easing:i.inOut(i.ease)})]),{iterations:1/0}).start(),e.loop(e.sequence([e.timing(a,{toValue:1,duration:900,useNativeDriver:!0,easing:i.inOut(i.ease)}),e.timing(a,{toValue:2,useNativeDriver:!0,duration:900,easing:i.inOut(i.ease)})]),{iterations:1/0}).start(),e.loop(e.sequence([e.timing(u,{toValue:0,duration:0,useNativeDriver:!0,easing:i.linear}),e.timing(u,{toValue:1,duration:1800,useNativeDriver:!0,easing:i.linear})]),{iterations:1/0}).start()},[s,u,a]),r(V,{style:{width:d,height:d,transform:[{rotate:D}]},children:r(I,{width:d,height:d,viewBox:"0 0 66 66",stroke:R,style:[{transform:[{rotate:c}]}],children:r(T,{fill:"none",strokeWidth:"6",strokeLinecap:"round",cx:"33",cy:"33",r:"30",strokeDashoffset:f,strokeDasharray:180})})})}function C({delay:t=700,...n}){const o=g(new e.Value(0)).current;return v(()=>{e.timing(o,{toValue:1,delay:t,duration:0,useNativeDriver:!0}).start()},[t,o]),r(V,{style:{opacity:o},children:r(A,{...n})})}function m({delay:t,label:n,size:o=y.size,type:l=y.type,style:u,...a}){const s=L(),{announce:c}=z(),f=S(()=>E({grey800:s.grey800}),[s.grey800]);return v(()=>{n!=null?c(n,{queue:!0,delay:200}):c("\uB85C\uB529\uC911\uC785\uB2C8\uB2E4",{queue:!0,delay:200})},[n,c]),w(p,{style:[{alignItems:"center"},u],children:[t!=null?r(C,{delay:t,size:o,type:l,...a}):r(A,{size:o,type:l,...a}),n!=null?r(N,{typography:"t6",color:f[l],style:{marginTop:_[o]},children:n}):null]})}function j({style:t,...n}){return r(p,{style:[{padding:40,alignItems:"center"},t],children:r(A,{...n})})}function q({style:t,...n}){return r(p,{style:[{flex:1,justifyContent:"center",alignItems:"center"},t],children:r(m,{...n})})}const y={size:"large",type:"primary"},B={small:24,medium:36,large:48},O={primary:"#3188ff",dark:h.grey600,light:h.white},_={small:12,medium:12,large:16},E=({grey800:t})=>({primary:t,dark:t,light:h.white});m.Delay=C,m.FullScreen=q,m.Centered=j;export default m;
+"use strict";import{jsx as r,jsxs as w}from"react/jsx-runtime";import k,{Circle as x}from"@granite-js/native/react-native-svg";import{colors as h}from"@toss/tds-colors";import{useEffect as v,useMemo as L,useRef as g}from"react";import{Animated as e,Easing as i,View as p}from"react-native";import{useAdaptive as N}from"../../core";import{useAnnounce as S}from"../../utils/useAnnounce";import{Txt as z}from"../txt";const V=e.createAnimatedComponent(p),I=e.createAnimatedComponent(k),T=e.createAnimatedComponent(x);function A({size:t=y.size,type:n=y.type,customStrokeColor:o,customSize:l}){const u=g(new e.Value(0)).current,a=g(new e.Value(0)).current,s=g(new e.Value(0)).current,c=u.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]}),f=s.interpolate({inputRange:[0,1,2],outputRange:[180,45,180]}),D=a.interpolate({inputRange:[0,1,2],outputRange:["0deg","108deg","360deg"]}),R=o??O[n],d=l??B[t];return v(()=>{e.loop(e.sequence([e.timing(s,{toValue:1,duration:900,useNativeDriver:!0,easing:i.inOut(i.ease)}),e.timing(s,{toValue:2,useNativeDriver:!0,duration:900,easing:i.inOut(i.ease)})]),{iterations:1/0}).start(),e.loop(e.sequence([e.timing(a,{toValue:1,duration:900,useNativeDriver:!0,easing:i.inOut(i.ease)}),e.timing(a,{toValue:2,useNativeDriver:!0,duration:900,easing:i.inOut(i.ease)})]),{iterations:1/0}).start(),e.loop(e.sequence([e.timing(u,{toValue:0,duration:0,useNativeDriver:!0,easing:i.linear}),e.timing(u,{toValue:1,duration:1800,useNativeDriver:!0,easing:i.linear})]),{iterations:1/0}).start()},[s,u,a]),r(V,{style:{width:d,height:d,transform:[{rotate:D}]},children:r(I,{width:d,height:d,viewBox:"0 0 66 66",stroke:R,style:[{transform:[{rotate:c}]}],children:r(T,{fill:"none",strokeWidth:"6",strokeLinecap:"round",cx:"33",cy:"33",r:"30",strokeDashoffset:f,strokeDasharray:180})})})}function C({delay:t=700,...n}){const o=g(new e.Value(0)).current;return v(()=>{e.timing(o,{toValue:1,delay:t,duration:0,useNativeDriver:!0}).start()},[t,o]),r(V,{style:{opacity:o},children:r(A,{...n})})}function m({delay:t,label:n,size:o=y.size,type:l=y.type,style:u,...a}){const s=N(),{announce:c}=S(),f=L(()=>E({grey800:s.grey800}),[s.grey800]);return v(()=>{n!=null?c(n,{queue:!0,delay:200}):c("\uB85C\uB529\uC911\uC785\uB2C8\uB2E4",{queue:!0,delay:200})},[n,c]),w(p,{style:[{alignItems:"center"},u],children:[t!=null?r(C,{delay:t,size:o,type:l,...a}):r(A,{size:o,type:l,...a}),n!=null?r(z,{typography:"t6",color:f[l],style:{marginTop:_[o]},children:n}):null]})}function j({style:t,...n}){return r(p,{style:[{padding:40,alignItems:"center"},t],children:r(A,{...n})})}function q({style:t,...n}){return r(p,{style:[{flex:1,justifyContent:"center",alignItems:"center"},t],children:r(m,{...n})})}const y={size:"large",type:"primary"},B={small:24,medium:36,large:48},O={primary:"#3188ff",dark:h.grey600,light:h.white},_={small:12,medium:12,large:16},E=({grey800:t})=>({primary:t,dark:t,light:h.white});m.Delay=C,m.FullScreen=q,m.Centered=j;export default m;

package/dist/esm/components/numeric-spinner/NumericSpinner.js

@@ -1 +1 @@
-"use strict";import{jsx as p,jsxs as _}from"react/jsx-runtime";import{PanGestureHandler as ve,State as q}from"@granite-js/native/react-native-gesture-handler";import{springEaseWithDuration as t}from"@toss-design-system/easings";import{Animated as e}from"../../interactions/animated";import{useAdaptive as h}from"../../core";import{generateHapticFeedback as J}from"../../native/generateHapticFeedback";import{forwardRef as ye,useCallback as u,useEffect as he,useRef as l,useState as m}from"react";import{Pressable as Ne}from"react-native";import{NumericSpinnerContainer as Ve,NumericSpinnerContainerBorderRadiusBySize as L}from"./NumericSpinnerContainer";import{NumericSpinnerMinusIconButton as K,NumericSpinnerPlusIconButton as Q}from"./NumericSpinnerIconButton";import{NumericSpinnerNumberBox as U,NumericSpinnerNumberBoxBorderRadiusBySize as X}from"./NumericSpinnerNumberBox";import{useAccelerateInterval as Y}from"./useAccelerateInterval";import{useButtonLongPress as Z}from"./useButtonLongPress";import{useWiggleMotion as be}from"./useWiggleMotion";const z=e.createAnimatedComponent(Ve),xe=e.createAnimatedComponent(U),ke=e.createAnimatedComponent(K),Be=e.createAnimatedComponent(Q),ee=({min:a,max:r,num:n})=>!isNaN(n)&&n>=a&&n<=r;export const NumericSpinner=ye(function({disable:r,number:n=0,minNumber:i=0,maxNumber:c=100,onNumberChange:d,size:s,style:N,...M},W){const H=h(),{play:g,style:T}=be(),V=ee({max:c,min:i,num:n+1}),b=ee({max:c,min:i,num:n-1}),A=u(()=>{if(V){const o=n+1;J({type:"tickWeak"}),d?.(o);return}g()},[n,V,d,g]),E=u(()=>{if(b){const o=n-1;J({type:"tickWeak"}),d?.(o);return}g()},[n,b,d,g]),x=Ce(),{onPressStart:ne,onPressEnd:ae}=Z({onPressing:E,onPressEnd:x.play}),{onPressStart:re,onPressEnd:ie}=Z({onPressing:A,onPressEnd:x.play}),f=l(!1),G=Y(A,{startMs:400,interval:.8,minMs:50}),j=Y(E,{startMs:400,interval:.8,minMs:50}),se=()=>{f.current!==!0&&(j.startInterval(),f.current=!0)},oe=()=>{f.current!==!0&&(G.startInterval(),f.current=!0)},ue=()=>{G.stopInterval(),j.stopInterval(),f.current=!1},R=l(new e.Value(0)).current,v=l(new e.Value(X[s])).current,k=De({size:s}),le=e.event([{nativeEvent:{translationX:R}}],{useNativeDriver:!1}),ce=o=>{switch(o.nativeEvent.state){case q.BEGAN:{k.play(),e.parallel([e.timing(v,{toValue:50,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}case q.END:case q.FAILED:{k.reset(),e.parallel([e.spring(R,{toValue:0,useNativeDriver:!1}),e.timing(v,{toValue:X[s],useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}}},[O,de]=m(0),[B,pe]=m(0),[I,me]=m(0),[C,ge]=m(0),$=R.interpolate({inputRange:[-I,C],outputRange:[-I,C],extrapolate:"clamp"});$.addListener(({value:o})=>{const fe=-I;o===fe?se():o===C?oe():ue()}),he(()=>{v.setValue(X[s])},[v,s]);const y=Se(),D=Ae(),S=Ee(),w=Re(),P=Ie(),F=`${n}`;return r?p(Ne,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${n}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{g()},style:[{alignSelf:"flex-start"},N],...M,children:_(z,{ref:W,size:s,style:[{opacity:.3},T],pointerEvents:"none",children:[p(K,{size:s}),p(U,{style:{borderRadius:8},size:s,"aria-label":F,color:x.style.color,children:n}),p(Q,{size:s})]})}):_(z,{testID:"numeric-spinner",ref:W,onLayout:o=>pe(o.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...k.style,transform:[...k.style.transform,...T.transform],position:"relative"},N],size:s,...M,children:[p(ke,{"aria-label":"\uBE7C\uAE30",accessibilityHint:b?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${i}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>me(o.nativeEvent.layout.width),onPress:E,onPressIn:()=>{ne(),y.shrink(),D.shrink(),w.shrink()},onPressOut:()=>{ae(),y.expand(),D.expand(),w.expand()},disabled:b===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:s}),p(ve,{onGestureEvent:le,onHandlerStateChange:ce,children:p(xe,{onLayout:o=>{de(o.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:v,transform:[{translateX:$},...y.style.transform]},size:s,accessibilityRole:"text",accessibilityValue:{text:F},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:x.style.color,children:n})}),p(Be,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:V?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${c}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>ge(o.nativeEvent.layout.width),onPress:A,onPressIn:()=>{re(),y.shrink(),S.shrink(),P.shrink()},onPressOut:()=>{ie(),y.expand(),S.expand(),P.expand()},disabled:V===!1,style:{zIndex:1,alignSelf:"stretch",...S.style},color:S.style.color,size:s}),p(e.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...w.style}}),p(e.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...P.style}})]})});const te={tiny:5,small:6,medium:7,large:8};function De({size:a}){const r=h(),n=l(new e.Value(0)).current,i=n.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),c=n.interpolate({inputRange:[0,100],outputRange:[r.grey100,r.grey200],extrapolate:"clamp"}),d=n.interpolate({inputRange:[0,100],outputRange:[L[a],50],extrapolate:"clamp"}),s=u(()=>{e.timing(n,{toValue:100,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]),N=u(()=>{e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]);return{play:s,reset:N,style:{backgroundColor:c,borderRadius:d,transform:[{scale:i}]}}}function Se(){const a=l(new e.Value(1)).current,r=u(()=>{e.timing(a,{toValue:.9,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[a]),n=u(()=>{e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3}).start()},[a]);return{shrink:r,expand:n,style:{transform:[{scale:a}]}}}function Ae(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Ee(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Re(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:-2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ie(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ce(){const a=h(),r=l(new e.Value(0)).current,n=r.interpolate({inputRange:[0,1],outputRange:[a.grey800,a.blue500]});return{play:u(()=>{r.setValue(0),e.stagger(300,[e.timing(r,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.basic.ease,duration:t.basic.duration*1e3})]).start()},[r]),style:{color:n}}}
+"use strict";import{jsx as p,jsxs as _}from"react/jsx-runtime";import{PanGestureHandler as ve,State as q}from"@granite-js/native/react-native-gesture-handler";import{springEaseWithDuration as t}from"@toss/tds-easings";import{forwardRef as ye,useCallback as u,useEffect as he,useRef as l,useState as m}from"react";import{Pressable as Ne}from"react-native";import{useAdaptive as h}from"../../core";import{Animated as e}from"../../interactions/animated";import{generateHapticFeedback as J}from"../../native/generateHapticFeedback";import{NumericSpinnerContainer as Ve,NumericSpinnerContainerBorderRadiusBySize as L}from"./NumericSpinnerContainer";import{NumericSpinnerMinusIconButton as K,NumericSpinnerPlusIconButton as Q}from"./NumericSpinnerIconButton";import{NumericSpinnerNumberBox as U,NumericSpinnerNumberBoxBorderRadiusBySize as X}from"./NumericSpinnerNumberBox";import{useAccelerateInterval as Y}from"./useAccelerateInterval";import{useButtonLongPress as Z}from"./useButtonLongPress";import{useWiggleMotion as be}from"./useWiggleMotion";const z=e.createAnimatedComponent(Ve),xe=e.createAnimatedComponent(U),ke=e.createAnimatedComponent(K),Be=e.createAnimatedComponent(Q),ee=({min:a,max:r,num:n})=>!isNaN(n)&&n>=a&&n<=r;export const NumericSpinner=ye(function({disable:r,number:n=0,minNumber:i=0,maxNumber:c=100,onNumberChange:d,size:s,style:N,...M},W){const H=h(),{play:g,style:T}=be(),V=ee({max:c,min:i,num:n+1}),b=ee({max:c,min:i,num:n-1}),A=u(()=>{if(V){const o=n+1;J({type:"tickWeak"}),d?.(o);return}g()},[n,V,d,g]),E=u(()=>{if(b){const o=n-1;J({type:"tickWeak"}),d?.(o);return}g()},[n,b,d,g]),x=Ce(),{onPressStart:ne,onPressEnd:ae}=Z({onPressing:E,onPressEnd:x.play}),{onPressStart:re,onPressEnd:ie}=Z({onPressing:A,onPressEnd:x.play}),f=l(!1),G=Y(A,{startMs:400,interval:.8,minMs:50}),j=Y(E,{startMs:400,interval:.8,minMs:50}),se=()=>{f.current!==!0&&(j.startInterval(),f.current=!0)},oe=()=>{f.current!==!0&&(G.startInterval(),f.current=!0)},ue=()=>{G.stopInterval(),j.stopInterval(),f.current=!1},R=l(new e.Value(0)).current,v=l(new e.Value(X[s])).current,k=De({size:s}),le=e.event([{nativeEvent:{translationX:R}}],{useNativeDriver:!1}),ce=o=>{switch(o.nativeEvent.state){case q.BEGAN:{k.play(),e.parallel([e.timing(v,{toValue:50,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}case q.END:case q.FAILED:{k.reset(),e.parallel([e.spring(R,{toValue:0,useNativeDriver:!1}),e.timing(v,{toValue:X[s],useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3})]).start();break}}},[O,de]=m(0),[B,pe]=m(0),[I,me]=m(0),[C,ge]=m(0),$=R.interpolate({inputRange:[-I,C],outputRange:[-I,C],extrapolate:"clamp"});$.addListener(({value:o})=>{const fe=-I;o===fe?se():o===C?oe():ue()}),he(()=>{v.setValue(X[s])},[v,s]);const y=Se(),D=Ae(),S=Ee(),w=Re(),P=Ie(),F=`${n}`;return r?p(Ne,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${n}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{g()},style:[{alignSelf:"flex-start"},N],...M,children:_(z,{ref:W,size:s,style:[{opacity:.3},T],pointerEvents:"none",children:[p(K,{size:s}),p(U,{style:{borderRadius:8},size:s,"aria-label":F,color:x.style.color,children:n}),p(Q,{size:s})]})}):_(z,{testID:"numeric-spinner",ref:W,onLayout:o=>pe(o.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...k.style,transform:[...k.style.transform,...T.transform],position:"relative"},N],size:s,...M,children:[p(ke,{"aria-label":"\uBE7C\uAE30",accessibilityHint:b?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${i}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>me(o.nativeEvent.layout.width),onPress:E,onPressIn:()=>{ne(),y.shrink(),D.shrink(),w.shrink()},onPressOut:()=>{ae(),y.expand(),D.expand(),w.expand()},disabled:b===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:s}),p(ve,{onGestureEvent:le,onHandlerStateChange:ce,children:p(xe,{onLayout:o=>{de(o.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:v,transform:[{translateX:$},...y.style.transform]},size:s,accessibilityRole:"text",accessibilityValue:{text:F},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:x.style.color,children:n})}),p(Be,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:V?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${c}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:o=>ge(o.nativeEvent.layout.width),onPress:A,onPressIn:()=>{re(),y.shrink(),S.shrink(),P.shrink()},onPressOut:()=>{ie(),y.expand(),S.expand(),P.expand()},disabled:V===!1,style:{zIndex:1,alignSelf:"stretch",...S.style},color:S.style.color,size:s}),p(e.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...w.style}}),p(e.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:L[s],backgroundColor:H.greyOpacity100,width:Math.max(B-(B-O)/2+te[s],0),...P.style}})]})});const te={tiny:5,small:6,medium:7,large:8};function De({size:a}){const r=h(),n=l(new e.Value(0)).current,i=n.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),c=n.interpolate({inputRange:[0,100],outputRange:[r.grey100,r.grey200],extrapolate:"clamp"}),d=n.interpolate({inputRange:[0,100],outputRange:[L[a],50],extrapolate:"clamp"}),s=u(()=>{e.timing(n,{toValue:100,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]),N=u(()=>{e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[n]);return{play:s,reset:N,style:{backgroundColor:c,borderRadius:d,transform:[{scale:i}]}}}function Se(){const a=l(new e.Value(1)).current,r=u(()=>{e.timing(a,{toValue:.9,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}).start()},[a]),n=u(()=>{e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3}).start()},[a]);return{shrink:r,expand:n,style:{transform:[{scale:a}]}}}function Ae(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Ee(){const a=h(),[r,n]=m(a.grey700),i=l(new e.Value(1)).current,c=u(()=>{e.timing(i,{toValue:.9,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}).start(),n(a.grey900)},[a.grey900,i]),d=u(()=>{e.stagger(200,[e.timing(i,{toValue:1.1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(i,{toValue:1,useNativeDriver:!1,easing:t.bounce.ease,duration:t.bounce.duration*1e3})]).start(),n(a.grey700)},[a.grey700,i]);return{shrink:c,expand:d,style:{transform:[{scale:i}],color:r}}}function Re(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:-2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ie(){const a=l(new e.Value(1)).current,r=l(new e.Value(0)).current,n=l(new e.Value(0)).current,i=u(()=>{e.parallel([e.timing(a,{toValue:.92,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:2,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(n,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]),c=u(()=>{e.parallel([e.timing(a,{toValue:1,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.quick.ease,duration:t.quick.duration*1e3}),e.timing(n,{toValue:0,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3})]).start()},[n,a,r]);return{shrink:i,expand:c,style:{transform:[{scale:a},{translateX:r}],opacity:n}}}function Ce(){const a=h(),r=l(new e.Value(0)).current,n=r.interpolate({inputRange:[0,1],outputRange:[a.grey800,a.blue500]});return{play:u(()=>{r.setValue(0),e.stagger(300,[e.timing(r,{toValue:1,useNativeDriver:!1,easing:t.rapid.ease,duration:t.rapid.duration*1e3}),e.timing(r,{toValue:0,useNativeDriver:!1,easing:t.basic.ease,duration:t.basic.duration*1e3})]).start()},[r]),style:{color:n}}}

package/dist/esm/components/numeric-spinner/NumericSpinnerNumberBox.d.ts

@@ -1,6 +1,5 @@
-import { Animated as ReactNativeAnimated } from 'react-native';
 import { Component, ReactNode } from 'react';
-import { PressableProps, ViewProps } from 'react-native';
+import { PressableProps, Animated as ReactNativeAnimated, ViewProps } from 'react-native';
 import { Size } from './type';
 export declare const NumericSpinnerNumberBoxBorderRadiusBySize: Record<Size, number>;
 export interface NumericSpinnerNumberBoxProps extends PressableProps {

package/dist/esm/components/numeric-spinner/NumericSpinnerNumberBox.js

@@ -1 +1 @@
-"use strict";import{jsx as r,jsxs as u}from"react/jsx-runtime";import{colors as a,tds as y}from"@toss-design-system/colors";import{Animated as f}from"../../interactions/animated";import{useColorPreference as x}from"../../core";import{Text as n}from"../paragraph";import{Component as b,forwardRef as S}from"react";import{Pressable as B,StyleSheet as C}from"react-native";const N=f.createAnimatedComponent(n);export const NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const R=S(function({size:e,style:p,children:l,color:m,...c},o){const{colorPreference:g}=x(),h=g==="light"?a.inverseGrey900:a.inverseGrey300,t="semibold",i=w[e];return u(B,{ref:o,style:[d.container,d[e],{backgroundColor:h},p],...c,children:[r(N,{ref:o,fontWeight:t,typography:i,style:{color:m},children:l}),r(n,{fontWeight:t,typography:i,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),d=C.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:y.tRadioIndicatorBackgroundColor,boxShadow:"0px 1px 3px 0px rgba(0, 0, 0, 0.09)",shadowColor:"rgba(0, 0, 0, 0.09)",shadowOffset:{width:0,height:1},shadowOpacity:1,shadowRadius:3,elevation:3},tiny:{paddingVertical:3,paddingHorizontal:5,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.large}}),w={tiny:"t7",small:"t6",medium:"t5",large:"t5"};export class NumericSpinnerNumberBox extends b{render(){return r(R,{...this.props})}}
+"use strict";import{jsx as r,jsxs as u}from"react/jsx-runtime";import{colors as a,tds as y}from"@toss/tds-colors";import{Component as f,forwardRef as x}from"react";import{Pressable as b,StyleSheet as S}from"react-native";import{useColorPreference as B}from"../../core";import{Animated as C}from"../../interactions/animated";import{Text as n}from"../paragraph";const N=C.createAnimatedComponent(n);export const NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const R=x(function({size:e,style:p,children:l,color:m,...c},o){const{colorPreference:g}=B(),h=g==="light"?a.inverseGrey900:a.inverseGrey300,t="semibold",i=w[e];return u(b,{ref:o,style:[d.container,d[e],{backgroundColor:h},p],...c,children:[r(N,{ref:o,fontWeight:t,typography:i,style:{color:m},children:l}),r(n,{fontWeight:t,typography:i,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),d=S.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:y.tRadioIndicatorBackgroundColor,boxShadow:"0px 1px 3px 0px rgba(0, 0, 0, 0.09)",shadowColor:"rgba(0, 0, 0, 0.09)",shadowOffset:{width:0,height:1},shadowOpacity:1,shadowRadius:3,elevation:3},tiny:{paddingVertical:3,paddingHorizontal:5,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:NumericSpinnerNumberBoxBorderRadiusBySize.large}}),w={tiny:"t7",small:"t6",medium:"t5",large:"t5"};export class NumericSpinnerNumberBox extends f{render(){return r(R,{...this.props})}}

package/dist/esm/components/paragraph/ParagraphBadge/ParagraphBadge.d.ts

@@ -1,5 +1,5 @@
-import { FontWeightKeys, TypographyKeys } from '../../txt';
 import { StyleProp, ViewStyle } from 'react-native';
+import { FontWeightKeys, TypographyKeys } from '../../txt';
 type Type = 'blue' | 'teal' | 'green' | 'red' | 'yellow' | 'elephant';
 type Style = 'fill' | 'weak';
 export interface ParagraphBadgeProps {

package/dist/esm/components/paragraph/ParagraphBadge/ParagraphBadge.js

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{colors as o}from"@toss-design-system/colors";import{useColorPreference as u,useTypographyTheme as S}from"../../../core";import{Txt as V}from"../../txt";import r from"hex-to-rgba";import{useContext as z,useMemo as x}from"react";import{View as h}from"react-native";import{ParagraphContext as H}from"../ParagraphContext";import{get\uBCF4\uC815Top as B}from"../utils";import{badgeStyleMap as g,isValidFontSize as R}from"./const";function T({children:t,type:d="blue",badgeStyle:c="fill",marginLeft:p=0,marginRight:b=0,typography:f,style:y,fontWeight:s="semiBold"}){u;const{colorPreference:C}=u(),{typography:i}=S(),{typography:m}=z(H),w=`${d}-${c}`,{backgroundColor:L,color:D}=P(w,C),k=f??m,a=x(()=>{const{fontSize:l}=i[k];return R(l)?{...g[l],top:B({targetHeight:g[l].lineHeight+g[l].paddingVertical*2,fontSize:l})}:(console.error(M),{...g[15],top:B({targetHeight:g[15].lineHeight+g[15].paddingVertical*2,fontSize:l})})},[k,i]);return n(h,{style:[{alignSelf:"flex-start"},y],children:n(h,{style:{paddingHorizontal:a.paddingHorizontal,paddingVertical:a.paddingVertical,borderRadius:a.borderRadius,backgroundColor:L,marginLeft:p??a.margin,marginRight:b??a.margin,top:a.top},children:n(V,{fontWeight:s,color:D,style:{fontSize:a.fontSize,lineHeight:a.lineHeight},children:t})})})}const M="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)";export{T as ParagraphBadge};const e={blueBadgeBackgroundLight:r("#3182f6",.16),blueBadgeBackgroundDark:r("#4593fc",.16),tealBadgeBackgroundLight:r("#00818a",.16),tealBadgeBackgroundDark:r("#269da6",.16),greenBadgeBackgroundLight:r("#02a262",.16),greenBadgeBackgroundDark:r("#15c47e",.16),redBadgeBackgroundLight:r("#f44336",.16),redBadgeBackgroundDark:r("#ef5350",.16),yellowBadgeBackgroundLight:r("#ffb331",.16),yellowBadgeBackgroundDark:r("#ffd158",.16),elephantBadgeBackgroundLight:r("#4e5968",.16),elephantBadgeBackgroundDark:r("#c3c3c6",.16)};function P(t,d){return{"red-fill":{light:{backgroundColor:o.red500,color:o.white},dark:{backgroundColor:o.red500,color:o.white}},"red-weak":{light:{backgroundColor:e.redBadgeBackgroundLight,color:o.red700},dark:{backgroundColor:e.redBadgeBackgroundDark,color:o.red400}},"green-fill":{light:{backgroundColor:o.green600,color:o.white},dark:{backgroundColor:o.green600,color:o.white}},"green-weak":{light:{backgroundColor:e.greenBadgeBackgroundLight,color:o.green700},dark:{backgroundColor:e.greenBadgeBackgroundDark,color:o.green400}},"blue-fill":{light:{backgroundColor:o.blue500,color:o.white},dark:{backgroundColor:o.blue500,color:o.white}},"blue-weak":{light:{backgroundColor:e.blueBadgeBackgroundLight,color:o.blue700},dark:{backgroundColor:e.blueBadgeBackgroundDark,color:o.blue400}},"yellow-fill":{light:{backgroundColor:o.yellow500,color:o.grey800},dark:{backgroundColor:o.yellow500,color:o.grey800}},"yellow-weak":{light:{backgroundColor:e.yellowBadgeBackgroundLight,color:o.yellow900},dark:{backgroundColor:e.yellowBadgeBackgroundDark,color:o.yellow700}},"teal-fill":{light:{backgroundColor:o.teal600,color:o.white},dark:{backgroundColor:o.teal600,color:o.white}},"teal-weak":{light:{backgroundColor:e.tealBadgeBackgroundLight,color:o.teal700},dark:{backgroundColor:e.tealBadgeBackgroundDark,color:o.teal400}},"elephant-fill":{light:{backgroundColor:o.grey700,color:o.white},dark:{backgroundColor:o.grey700,color:o.white}},"elephant-weak":{light:{backgroundColor:e.elephantBadgeBackgroundLight,color:o.grey700},dark:{backgroundColor:e.elephantBadgeBackgroundDark,color:o.inverseGrey700}}}[t][d]}
+"use strict";import{jsx as n}from"react/jsx-runtime";import{colors as o}from"@toss/tds-colors";import r from"hex-to-rgba";import{useContext as S,useMemo as V}from"react";import{View as u}from"react-native";import{useColorPreference as h,useTypographyTheme as z}from"../../../core";import{Txt as x}from"../../txt";import{ParagraphContext as H}from"../ParagraphContext";import{get\uBCF4\uC815Top as B}from"../utils";import{badgeStyleMap as g,isValidFontSize as R}from"./const";function T({children:t,type:d="blue",badgeStyle:c="fill",marginLeft:p=0,marginRight:b=0,typography:f,style:y,fontWeight:s="semiBold"}){h;const{colorPreference:C}=h(),{typography:i}=z(),{typography:m}=S(H),w=`${d}-${c}`,{backgroundColor:L,color:D}=P(w,C),k=f??m,a=V(()=>{const{fontSize:l}=i[k];return R(l)?{...g[l],top:B({targetHeight:g[l].lineHeight+g[l].paddingVertical*2,fontSize:l})}:(console.error(M),{...g[15],top:B({targetHeight:g[15].lineHeight+g[15].paddingVertical*2,fontSize:l})})},[k,i]);return n(u,{style:[{alignSelf:"flex-start"},y],children:n(u,{style:{paddingHorizontal:a.paddingHorizontal,paddingVertical:a.paddingVertical,borderRadius:a.borderRadius,backgroundColor:L,marginLeft:p??a.margin,marginRight:b??a.margin,top:a.top},children:n(x,{fontWeight:s,color:D,style:{fontSize:a.fontSize,lineHeight:a.lineHeight},children:t})})})}const M="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)";export{T as ParagraphBadge};const e={blueBadgeBackgroundLight:r("#3182f6",.16),blueBadgeBackgroundDark:r("#4593fc",.16),tealBadgeBackgroundLight:r("#00818a",.16),tealBadgeBackgroundDark:r("#269da6",.16),greenBadgeBackgroundLight:r("#02a262",.16),greenBadgeBackgroundDark:r("#15c47e",.16),redBadgeBackgroundLight:r("#f44336",.16),redBadgeBackgroundDark:r("#ef5350",.16),yellowBadgeBackgroundLight:r("#ffb331",.16),yellowBadgeBackgroundDark:r("#ffd158",.16),elephantBadgeBackgroundLight:r("#4e5968",.16),elephantBadgeBackgroundDark:r("#c3c3c6",.16)};function P(t,d){return{"red-fill":{light:{backgroundColor:o.red500,color:o.white},dark:{backgroundColor:o.red500,color:o.white}},"red-weak":{light:{backgroundColor:e.redBadgeBackgroundLight,color:o.red700},dark:{backgroundColor:e.redBadgeBackgroundDark,color:o.red400}},"green-fill":{light:{backgroundColor:o.green600,color:o.white},dark:{backgroundColor:o.green600,color:o.white}},"green-weak":{light:{backgroundColor:e.greenBadgeBackgroundLight,color:o.green700},dark:{backgroundColor:e.greenBadgeBackgroundDark,color:o.green400}},"blue-fill":{light:{backgroundColor:o.blue500,color:o.white},dark:{backgroundColor:o.blue500,color:o.white}},"blue-weak":{light:{backgroundColor:e.blueBadgeBackgroundLight,color:o.blue700},dark:{backgroundColor:e.blueBadgeBackgroundDark,color:o.blue400}},"yellow-fill":{light:{backgroundColor:o.yellow500,color:o.grey800},dark:{backgroundColor:o.yellow500,color:o.grey800}},"yellow-weak":{light:{backgroundColor:e.yellowBadgeBackgroundLight,color:o.yellow900},dark:{backgroundColor:e.yellowBadgeBackgroundDark,color:o.yellow700}},"teal-fill":{light:{backgroundColor:o.teal600,color:o.white},dark:{backgroundColor:o.teal600,color:o.white}},"teal-weak":{light:{backgroundColor:e.tealBadgeBackgroundLight,color:o.teal700},dark:{backgroundColor:e.tealBadgeBackgroundDark,color:o.teal400}},"elephant-fill":{light:{backgroundColor:o.grey700,color:o.white},dark:{backgroundColor:o.grey700,color:o.white}},"elephant-weak":{light:{backgroundColor:e.elephantBadgeBackgroundLight,color:o.grey700},dark:{backgroundColor:e.elephantBadgeBackgroundDark,color:o.inverseGrey700}}}[t][d]}

package/dist/esm/components/paragraph/ParagraphCode.js

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{colors as n}from"@toss-design-system/colors";import{useAdaptive as g,useTypographyTheme as l,useColorPreference as y}from"../../core";import{Txt as h}from"../txt";import{useContext as u,useMemo as f}from"react";import{StyleSheet as x,View as p}from"react-native";import{ParagraphContext as C}from"./ParagraphContext";import{getLineHeightByFontSize as H}from"./ParagraphText";import{get\uBCF4\uC815Top as T}from"./utils";function S({children:r}){const t=g(),{colorPreference:i}=y(),{typography:a}=l(),{typography:c}=u(C),{fontSize:e,lineHeight:m}=a[c],d=f(()=>({fontSize:e,lineHeight:H(e),color:i==="dark"?n.white:n.grey700}),[e,i]);return o(p,{children:o(p,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:B(e),top:T({targetHeight:m+s*2,fontSize:e})},b.code],children:o(h,{fontWeight:"regular",style:d,children:r})})})}const s=1,b=x.create({code:{paddingHorizontal:4,borderWidth:s}}),B=r=>r<19?4:r<23?5:r<29?6:r<41?8:10;export{S as ParagraphCode};
+"use strict";import{jsx as o}from"react/jsx-runtime";import{colors as n}from"@toss/tds-colors";import{useContext as g,useMemo as l}from"react";import{StyleSheet as y,View as p}from"react-native";import{useAdaptive as h,useColorPreference as u,useTypographyTheme as f}from"../../core";import{Txt as x}from"../txt";import{ParagraphContext as C}from"./ParagraphContext";import{getLineHeightByFontSize as H}from"./ParagraphText";import{get\uBCF4\uC815Top as T}from"./utils";function S({children:r}){const t=h(),{colorPreference:i}=u(),{typography:a}=f(),{typography:c}=g(C),{fontSize:e,lineHeight:m}=a[c],d=l(()=>({fontSize:e,lineHeight:H(e),color:i==="dark"?n.white:n.grey700}),[e,i]);return o(p,{children:o(p,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:B(e),top:T({targetHeight:m+s*2,fontSize:e})},b.code],children:o(x,{fontWeight:"regular",style:d,children:r})})})}const s=1,b=y.create({code:{paddingHorizontal:4,borderWidth:s}}),B=r=>r<19?4:r<23?5:r<29?6:r<41?8:10;export{S as ParagraphCode};

package/dist/esm/components/progress-bar/ProgressBar.js

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import c,{Rect as s}from"@granite-js/native/react-native-svg";import{colors as f}from"@toss-design-system/colors";import{useAdaptive as g}from"../../core";import{useEffect as p,useRef as w}from"react";import{Animated as i,Easing as v,View as A}from"react-native";function R({progress:r,size:t,color:a=f.blue500,withAnimation:m,style:d,...u}){const l=g(),n=w(new i.Value(r)).current,h=n.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return p(()=>{i.timing(n,{toValue:r,duration:m?500:0,easing:v.ease,useNativeDriver:!0}).start()},[r]),o(A,{style:[{height:e[t],backgroundColor:l.grey100,borderRadius:e[t],overflow:"hidden"},d],role:"progressbar",...u,children:o(c,{width:"100%",height:e[t],children:o(b,{fill:a,width:h,height:e[t],rx:e[t]/2,ry:e[t]/2})})})}const e={light:2,normal:5,bold:8},b=i.createAnimatedComponent(s);export default R;
+"use strict";import{jsx as o}from"react/jsx-runtime";import c,{Rect as s}from"@granite-js/native/react-native-svg";import{colors as f}from"@toss/tds-colors";import{useEffect as g,useRef as p}from"react";import{Animated as i,Easing as w,View as v}from"react-native";import{useAdaptive as A}from"../../core";function R({progress:r,size:t,color:a=f.blue500,withAnimation:m,style:d,...u}){const l=A(),n=p(new i.Value(r)).current,h=n.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return g(()=>{i.timing(n,{toValue:r,duration:m?500:0,easing:w.ease,useNativeDriver:!0}).start()},[r]),o(v,{style:[{height:e[t],backgroundColor:l.grey100,borderRadius:e[t],overflow:"hidden"},d],role:"progressbar",...u,children:o(c,{width:"100%",height:e[t],children:o(b,{fill:a,width:h,height:e[t],rx:e[t]/2,ry:e[t]/2})})})}const e={light:2,normal:5,bold:8},b=i.createAnimatedComponent(s);export default R;

package/dist/esm/components/radio/Radio.js

@@ -1 +1 @@
-"use strict";import{jsx as g,jsxs as O}from"react/jsx-runtime";import{colors as C}from"@toss-design-system/colors";import{useAdaptive as T,useColorPreference as V}from"../../core";import l,{useCallback as k,useEffect as P,useRef as v,useState as z}from"react";import{useController as E}from"react-hook-form";import{Animated as d,StyleSheet as y}from"react-native";import N from"./RadioOption";const _={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},j={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},A=1,m=({value:o,children:r,disabled:c=!1,onChange:n,horizontalMargin:s=0})=>{const[t,a]=z(0),u=l.Children.map(r,e=>e.props),S=u.length,p=t/S,f=u.findIndex(e=>e.value===o),h=v(!0),i=v(new d.Value(0)).current,b=l.useCallback(e=>{n(e)},[n]),w=k(e=>{d.spring(i,{toValue:e,useNativeDriver:!0,...j}).start()},[i]);P(()=>{if(t===0)return;const e=f*(p*A);h.current===!0?(i.setValue(e),h.current=!1):w(e)},[f,p]);const x=T(),{colorPreference:I}=V();return O(d.View,{style:[R.defaultSegmentedControlWrapper,{backgroundColor:x.grey100,marginHorizontal:s}],onLayout:e=>{a(e.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[g(d.View,{style:[R.movingSegmentStyle,_,y.absoluteFill,{backgroundColor:I==="light"?C.inverseGrey900:C.inverseGrey300,width:t/u.length-8},{transform:[{translateX:i}]}]}),l.Children.map(r,e=>l.cloneElement(e,{checked:e.props.value===o,disabled:e.props.disabled??c,onPress:b}))]})},R=y.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});export function RadioInput({controlerProps:o,control:r,name:c,children:n,...s}){const{field:t}=E({control:r,name:c,...o});return g(m,{horizontalMargin:s.horizontalMargin,value:t.value,onChange:a=>{t.onChange(a),s.onChange?.(a)},children:n})}m.Option=N;export{m as Radio};
+"use strict";import{jsx as g,jsxs as O}from"react/jsx-runtime";import{colors as C}from"@toss/tds-colors";import l,{useCallback as T,useEffect as V,useRef as v,useState as k}from"react";import{useController as P}from"react-hook-form";import{Animated as d,StyleSheet as y}from"react-native";import{useAdaptive as z,useColorPreference as E}from"../../core";import N from"./RadioOption";const _={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},j={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},A=1,m=({value:o,children:r,disabled:c=!1,onChange:n,horizontalMargin:s=0})=>{const[t,a]=k(0),u=l.Children.map(r,e=>e.props),S=u.length,p=t/S,f=u.findIndex(e=>e.value===o),h=v(!0),i=v(new d.Value(0)).current,b=l.useCallback(e=>{n(e)},[n]),w=T(e=>{d.spring(i,{toValue:e,useNativeDriver:!0,...j}).start()},[i]);V(()=>{if(t===0)return;const e=f*(p*A);h.current===!0?(i.setValue(e),h.current=!1):w(e)},[f,p]);const x=z(),{colorPreference:I}=E();return O(d.View,{style:[R.defaultSegmentedControlWrapper,{backgroundColor:x.grey100,marginHorizontal:s}],onLayout:e=>{a(e.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[g(d.View,{style:[R.movingSegmentStyle,_,y.absoluteFill,{backgroundColor:I==="light"?C.inverseGrey900:C.inverseGrey300,width:t/u.length-8},{transform:[{translateX:i}]}]}),l.Children.map(r,e=>l.cloneElement(e,{checked:e.props.value===o,disabled:e.props.disabled??c,onPress:b}))]})},R=y.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});export function RadioInput({controlerProps:o,control:r,name:c,children:n,...s}){const{field:t}=P({control:r,name:c,...o});return g(m,{horizontalMargin:s.horizontalMargin,value:t.value,onChange:a=>{t.onChange(a),s.onChange?.(a)},children:n})}m.Option=N;export{m as Radio};

package/dist/esm/components/rating/EditableRating.js

@@ -1 +1 @@
-"use strict";import{jsx as c,jsxs as q}from"react/jsx-runtime";import{Circle as Z,Defs as J,RadialGradient as Q,Stop as _,Svg as W}from"@granite-js/native/react-native-svg";import{spring as a}from"@toss-design-system/easings";import{forwardRef as $,useCallback as u,useEffect as B,useImperativeHandle as Y,useRef as m}from"react";import{AccessibilityInfo as ee,PanResponder as te,StyleSheet as G,View as j}from"react-native";import{generateHapticFeedback as re}from"../../native/generateHapticFeedback";import{useAdaptive as ne}from"../../core";import{Animated as t}from"../../interactions/animated";import{SvgIcon as z}from"../icon/private";import{useScreenReaderMode as oe}from"./useA11yMode";const L=t.createAnimatedComponent(z),ie=$(function({size:i,name:b,active:V,disabledColor:o,idleColor:D,activeColor:d,disabled:k,forwardedRef:x,style:M,...y},E){const p=m(new t.Value(1)).current,v=m(new t.Value(0)).current,g=m(new t.Value(1)).current,f=m(new t.Value(0)).current,s=m(new t.Value(V?1:0)).current,R=s.interpolate({inputRange:[0,1],outputRange:[D,d]});B(()=>{t.spring(s,{toValue:V?1:0,useNativeDriver:!1,...a.rapid}).start()},[V,s]);const N=u(()=>{p.setValue(1),t.sequence([t.spring(p,{toValue:1.1,useNativeDriver:!1,...a.rapid}),t.spring(p,{toValue:1,useNativeDriver:!1,...a.quick})]).start()},[p]),S=u(()=>{p.setValue(1),t.spring(p,{toValue:.9,useNativeDriver:!1,...a.rapid}).start()},[p]),A=u(()=>{t.spring(s,{toValue:0,useNativeDriver:!1,...a.rapid}).start(),t.spring(f,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[s,f]),h=u(()=>{t.spring(f,{toValue:1,useNativeDriver:!1,...a.rapid}).start(),t.spring(s,{toValue:1,useNativeDriver:!1,...a.rapid}).start()},[s,f]),w=u(()=>{t.spring(v,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[v]),C=u(()=>{g.setValue(1),t.sequence([t.spring(g,{toValue:1.1,useNativeDriver:!1,...a.rapid}),t.spring(g,{toValue:1,useNativeDriver:!1,...a.quick})]).start(),t.sequence([t.spring(v,{toValue:.5,useNativeDriver:!1,...a.rapid}),t.spring(v,{toValue:0,useNativeDriver:!1,...a.quick})]).start(),t.spring(f,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[g,v,f]);return Y(E,()=>({expandMotion:N,shrinkMotion:S,activeMotion:h,inactiveMotion:A,touchDownMotion:w,touchUpMotion:C}),[h,N,A,S,w,C]),V&&k?c(j,{ref:x,pointerEvents:"none",style:[{opacity:.3},M],...y,children:c(L,{name:b,size:i,color:d})}):k?c(j,{ref:x,pointerEvents:"none",style:M,...y,children:c(z,{name:b,size:i,color:o})}):q(t.View,{ref:x,pointerEvents:"none",style:[O.relative,{transform:[{scale:p}]},M],...y,children:[c(t.View,{style:[F[1],O.overlap,{opacity:v,width:i,height:i,transform:[{scale:g}]}],children:q(W,{height:i,width:i,children:[c(J,{children:q(Q,{id:"grad",cx:"50%",cy:"50%",rx:"50%",ry:"50%",fx:"50%",fy:"50%",children:[c(_,{offset:"0%",stopColor:d,stopOpacity:"1"}),c(_,{offset:"100%",stopColor:d,stopOpacity:"0"})]})}),c(Z,{cx:i/2,cy:i/2,r:i/2,fill:"url(#grad)"})]})}),c(L,{name:b,size:i,color:R,style:F[2]}),c(L,{name:b,size:i,color:"rgba(0,0,0,0.1)",style:[F[3],O.overlap,{opacity:f}]})]})}),ae={medium:8,large:6,big:4},se={medium:24,large:32,big:40};export const EditableRating=$(function({max:I=5,size:i="large",gap:b=ae[i],activeColor:V,value:o,onValueChange:D,disabled:d=!1,style:k,...x},M){const y=oe(),E=ne(),p=V??E.yellow400,v=E.greyOpacity200,g=E.greyOpacity100,f="icon-star-mono",s=m([]),R=m([]).current,N=se[i],S=m(o);S.current=o;const A=(r,e)=>{const{x:n,width:l}=r.nativeEvent.layout;R[e]={x:n,width:l}},h=u(r=>{const{locationX:e}=r.nativeEvent;let n=0;for(let l=0;l<R.length;l++){const{x:P,width:U}=R[l];if(e>=P&&e<=P+U){n=l+1;break}else e>P+U?n=l+1:e<0&&(n=0)}return n},[R]),w=u(r=>{const e=h(r);D?.(e),s.current.forEach((n,l)=>{l<e?n.activeMotion():n.inactiveMotion()})},[h,D]),C=u(r=>{w(r),re({type:"tickMedium"});const e=h(r);s.current.forEach((n,l)=>{n.shrinkMotion(),l<e&&n.touchDownMotion()})},[h,w]),H=u(()=>{s.current.forEach((r,e)=>{r.expandMotion(),e<S.current&&r.touchUpMotion()})},[]),K=m(te.create({onStartShouldSetPanResponder:()=>!0,onPanResponderGrant:C,onPanResponderMove:w,onPanResponderRelease:H,onPanResponderTerminate:H})).current,T={accessibilityRole:"text","aria-disabled":d,accessibilityHint:"\uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694"},X={accessibilityRole:"adjustable",accessibilityActions:[{name:"increment",label:"\uBCC4\uC810 \uC62C\uB9AC\uAE30"},{name:"decrement",label:"\uBCC4\uC810 \uB0B4\uB9AC\uAE30"}],onAccessibilityAction:r=>{let e;switch(r.nativeEvent.actionName){case"increment":e=o!==I?o+1:o;break;case"decrement":e=o!==0?o-1:o;break;default:e=o;break}ee.announceForAccessibility?.(`${e}\uC810\uC774 \uC120\uD0DD\uB418\uC5C8\uC2B5\uB2C8\uB2E4`),D?.(e)}};return B(()=>{y&&s.current.forEach((r,e)=>{e<o?(r.activeMotion(),r.touchUpMotion()):r.inactiveMotion()})},[y,o]),c(j,{ref:M,accessible:!0,accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${I}\uC810 \uB9CC\uC810 \uC911`,accessibilityValue:{text:`${o}\uC810`},...d?T:X,...d||y?{}:K.panHandlers,style:[ce.rowCenter,{gap:b},k],testID:"rating",...x,children:Array.from({length:I},(r,e)=>c(ie,{ref:n=>{n&&(s.current[e]=n)},forwardedRef:M,size:N,onLayout:n=>A(n,e),active:e<o,activeColor:p,idleColor:v,disabledColor:g,disabled:d,name:f},e))})});const O=G.create({relative:{position:"relative"},overlap:{position:"absolute",top:0,left:0}}),F=G.create({1:{zIndex:1},2:{zIndex:2},3:{zIndex:3}}),ce=G.create({rowCenter:{flexDirection:"row",alignItems:"center"}});
+"use strict";import{jsx as c,jsxs as q}from"react/jsx-runtime";import{Circle as Z,Defs as J,RadialGradient as Q,Stop as _,Svg as W}from"@granite-js/native/react-native-svg";import{spring as a}from"@toss/tds-easings";import{forwardRef as $,useCallback as u,useEffect as B,useImperativeHandle as Y,useRef as m}from"react";import{AccessibilityInfo as ee,PanResponder as te,StyleSheet as G,View as j}from"react-native";import{useAdaptive as re}from"../../core";import{Animated as t}from"../../interactions/animated";import{generateHapticFeedback as ne}from"../../native/generateHapticFeedback";import{SvgIcon as z}from"../icon/private";import{useScreenReaderMode as oe}from"./useA11yMode";const L=t.createAnimatedComponent(z),ie=$(function({size:i,name:b,active:V,disabledColor:o,idleColor:D,activeColor:d,disabled:k,forwardedRef:x,style:M,...y},E){const p=m(new t.Value(1)).current,v=m(new t.Value(0)).current,g=m(new t.Value(1)).current,f=m(new t.Value(0)).current,s=m(new t.Value(V?1:0)).current,R=s.interpolate({inputRange:[0,1],outputRange:[D,d]});B(()=>{t.spring(s,{toValue:V?1:0,useNativeDriver:!1,...a.rapid}).start()},[V,s]);const N=u(()=>{p.setValue(1),t.sequence([t.spring(p,{toValue:1.1,useNativeDriver:!1,...a.rapid}),t.spring(p,{toValue:1,useNativeDriver:!1,...a.quick})]).start()},[p]),S=u(()=>{p.setValue(1),t.spring(p,{toValue:.9,useNativeDriver:!1,...a.rapid}).start()},[p]),A=u(()=>{t.spring(s,{toValue:0,useNativeDriver:!1,...a.rapid}).start(),t.spring(f,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[s,f]),h=u(()=>{t.spring(f,{toValue:1,useNativeDriver:!1,...a.rapid}).start(),t.spring(s,{toValue:1,useNativeDriver:!1,...a.rapid}).start()},[s,f]),w=u(()=>{t.spring(v,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[v]),C=u(()=>{g.setValue(1),t.sequence([t.spring(g,{toValue:1.1,useNativeDriver:!1,...a.rapid}),t.spring(g,{toValue:1,useNativeDriver:!1,...a.quick})]).start(),t.sequence([t.spring(v,{toValue:.5,useNativeDriver:!1,...a.rapid}),t.spring(v,{toValue:0,useNativeDriver:!1,...a.quick})]).start(),t.spring(f,{toValue:0,useNativeDriver:!1,...a.quick}).start()},[g,v,f]);return Y(E,()=>({expandMotion:N,shrinkMotion:S,activeMotion:h,inactiveMotion:A,touchDownMotion:w,touchUpMotion:C}),[h,N,A,S,w,C]),V&&k?c(j,{ref:x,pointerEvents:"none",style:[{opacity:.3},M],...y,children:c(L,{name:b,size:i,color:d})}):k?c(j,{ref:x,pointerEvents:"none",style:M,...y,children:c(z,{name:b,size:i,color:o})}):q(t.View,{ref:x,pointerEvents:"none",style:[O.relative,{transform:[{scale:p}]},M],...y,children:[c(t.View,{style:[F[1],O.overlap,{opacity:v,width:i,height:i,transform:[{scale:g}]}],children:q(W,{height:i,width:i,children:[c(J,{children:q(Q,{id:"grad",cx:"50%",cy:"50%",rx:"50%",ry:"50%",fx:"50%",fy:"50%",children:[c(_,{offset:"0%",stopColor:d,stopOpacity:"1"}),c(_,{offset:"100%",stopColor:d,stopOpacity:"0"})]})}),c(Z,{cx:i/2,cy:i/2,r:i/2,fill:"url(#grad)"})]})}),c(L,{name:b,size:i,color:R,style:F[2]}),c(L,{name:b,size:i,color:"rgba(0,0,0,0.1)",style:[F[3],O.overlap,{opacity:f}]})]})}),ae={medium:8,large:6,big:4},se={medium:24,large:32,big:40};export const EditableRating=$(function({max:I=5,size:i="large",gap:b=ae[i],activeColor:V,value:o,onValueChange:D,disabled:d=!1,style:k,...x},M){const y=oe(),E=re(),p=V??E.yellow400,v=E.greyOpacity200,g=E.greyOpacity100,f="icon-star-mono",s=m([]),R=m([]).current,N=se[i],S=m(o);S.current=o;const A=(r,e)=>{const{x:n,width:l}=r.nativeEvent.layout;R[e]={x:n,width:l}},h=u(r=>{const{locationX:e}=r.nativeEvent;let n=0;for(let l=0;l<R.length;l++){const{x:P,width:U}=R[l];if(e>=P&&e<=P+U){n=l+1;break}else e>P+U?n=l+1:e<0&&(n=0)}return n},[R]),w=u(r=>{const e=h(r);D?.(e),s.current.forEach((n,l)=>{l<e?n.activeMotion():n.inactiveMotion()})},[h,D]),C=u(r=>{w(r),ne({type:"tickMedium"});const e=h(r);s.current.forEach((n,l)=>{n.shrinkMotion(),l<e&&n.touchDownMotion()})},[h,w]),H=u(()=>{s.current.forEach((r,e)=>{r.expandMotion(),e<S.current&&r.touchUpMotion()})},[]),K=m(te.create({onStartShouldSetPanResponder:()=>!0,onPanResponderGrant:C,onPanResponderMove:w,onPanResponderRelease:H,onPanResponderTerminate:H})).current,T={accessibilityRole:"text","aria-disabled":d,accessibilityHint:"\uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694"},X={accessibilityRole:"adjustable",accessibilityActions:[{name:"increment",label:"\uBCC4\uC810 \uC62C\uB9AC\uAE30"},{name:"decrement",label:"\uBCC4\uC810 \uB0B4\uB9AC\uAE30"}],onAccessibilityAction:r=>{let e;switch(r.nativeEvent.actionName){case"increment":e=o!==I?o+1:o;break;case"decrement":e=o!==0?o-1:o;break;default:e=o;break}ee.announceForAccessibility?.(`${e}\uC810\uC774 \uC120\uD0DD\uB418\uC5C8\uC2B5\uB2C8\uB2E4`),D?.(e)}};return B(()=>{y&&s.current.forEach((r,e)=>{e<o?(r.activeMotion(),r.touchUpMotion()):r.inactiveMotion()})},[y,o]),c(j,{ref:M,accessible:!0,accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${I}\uC810 \uB9CC\uC810 \uC911`,accessibilityValue:{text:`${o}\uC810`},...d?T:X,...d||y?{}:K.panHandlers,style:[ce.rowCenter,{gap:b},k],testID:"rating",...x,children:Array.from({length:I},(r,e)=>c(ie,{ref:n=>{n&&(s.current[e]=n)},forwardedRef:M,size:N,onLayout:n=>A(n,e),active:e<o,activeColor:p,idleColor:v,disabledColor:g,disabled:d,name:f},e))})});const O=G.create({relative:{position:"relative"},overlap:{position:"absolute",top:0,left:0}}),F=G.create({1:{zIndex:1},2:{zIndex:2},3:{zIndex:3}}),ce=G.create({rowCenter:{flexDirection:"row",alignItems:"center"}});

package/dist/esm/components/segmented-control/components/Indicator/Indicator.js

@@ -1 +1 @@
-"use strict";import{jsx as y}from"react/jsx-runtime";import{spring as d}from"@toss-design-system/easings";import{useContext as a,useEffect as C,useRef as s}from"react";import{Animated as r}from"react-native";import{useColorPreference as R}from"../../../../core";import{AlignmentContext as P}from"../../contexts/AlignmentContext";import{IndicatorContext as V}from"../../contexts/IndicatorContext";import{RadioContext as X}from"../../contexts/RadioContext";import{useIndicatorBackground as k}from"../../hooks/useIndicatorBackground";import{useIndicatorStyle as W}from"./useIndicatorStyle";export function Indicator({style:u,children:l}){const{indicatorX:f,setIndicatorX:o,indicatorWidth:m,setIndicatorWidth:i}=a(V),{selectedElementLayout:t}=a(X),{indicatorStyle:p}=W(),{colorPreference:h}=R(),{alignment:g}=a(P),w=k(),c=s(!0),n=s(new r.Value(0)).current,e=s(new r.Value(0)).current,x=e.interpolate({inputRange:[0,1],outputRange:[f,t?.x??0]}),I=e.interpolate({inputRange:[0,1],outputRange:[m,t?.width??0]});C(()=>{t!=null&&(c.current===!0?(i(t.width),o(t.x),c.current=!1,r.spring(n,{toValue:1,useNativeDriver:!1,...d.quick}).start()):(e.setValue(0),r.spring(e,{toValue:1,useNativeDriver:!1,...d.quick}).start(()=>{o(t.x),i(t.width)})))},[t,n,e,i,o]);const v={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:w,width:I,opacity:n,transform:[{translateX:x}]};return y(r.View,{style:[p,v,{shadowColor:h==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},u],children:l})}
+"use strict";import{jsx as y}from"react/jsx-runtime";import{spring as d}from"@toss/tds-easings";import{useContext as a,useEffect as C,useRef as s}from"react";import{Animated as r}from"react-native";import{useColorPreference as R}from"../../../../core";import{AlignmentContext as P}from"../../contexts/AlignmentContext";import{IndicatorContext as V}from"../../contexts/IndicatorContext";import{RadioContext as X}from"../../contexts/RadioContext";import{useIndicatorBackground as k}from"../../hooks/useIndicatorBackground";import{useIndicatorStyle as W}from"./useIndicatorStyle";export function Indicator({style:u,children:l}){const{indicatorX:f,setIndicatorX:o,indicatorWidth:m,setIndicatorWidth:i}=a(V),{selectedElementLayout:t}=a(X),{indicatorStyle:p}=W(),{colorPreference:h}=R(),{alignment:g}=a(P),w=k(),c=s(!0),n=s(new r.Value(0)).current,e=s(new r.Value(0)).current,x=e.interpolate({inputRange:[0,1],outputRange:[f,t?.x??0]}),I=e.interpolate({inputRange:[0,1],outputRange:[m,t?.width??0]});C(()=>{t!=null&&(c.current===!0?(i(t.width),o(t.x),c.current=!1,r.spring(n,{toValue:1,useNativeDriver:!1,...d.quick}).start()):(e.setValue(0),r.spring(e,{toValue:1,useNativeDriver:!1,...d.quick}).start(()=>{o(t.x),i(t.width)})))},[t,n,e,i,o]);const v={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:w,width:I,opacity:n,transform:[{translateX:x}]};return y(r.View,{style:[p,v,{shadowColor:h==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},u],children:l})}

package/dist/esm/components/segmented-control/components/ScrollControlOverlay/EdgeGradient.js

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as a}from"react/jsx-runtime";import u,{Defs as g,LinearGradient as m,Rect as y,Stop as l}from"@granite-js/native/react-native-svg";import{colors as f}from"@toss-design-system/colors";import{useAdaptive as v,useColorPreference as R}from"../../../../core";import{useCallback as w,useEffect as G,useRef as x}from"react";import{Animated as s}from"react-native";import{SPRING_OPTION as I}from"../../constants/spring";const c="segmented-left-gradient";function S(){const t=x(new s.Value(0)).current,o=w(()=>{s.spring(t,{toValue:1,useNativeDriver:!0,...I}).start()},[t]),r=w(()=>{s.spring(t,{toValue:0,useNativeDriver:!0,...I}).start()},[t]);return{fadeIn:o,fadeOut:r,style:{opacity:t}}}export function LeftEdgeGradient({style:t,exiting:o,...r}){const d=v(),{colorPreference:h}=R(),{fadeIn:i,fadeOut:n,style:p}=S();return G(()=>{o?i():n()},[o,i,n]),e(s.View,{style:[b,E,t,p],...r,children:a(u,{width:"100%",height:"100%",pointerEvents:"none",children:[e(g,{children:a(m,{id:c,children:[e(l,{offset:0,stopColor:d.grey100}),e(l,{offset:1,stopColor:h==="light"?f.grey100:f.inverseGrey100,stopOpacity:0})]})}),e(y,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})})}export function RightEdgeGradient({style:t,exiting:o,...r}){const d=v(),{colorPreference:h}=R(),{fadeIn:i,fadeOut:n,style:p}=S();return G(()=>{o?i():n()},[o,i,n]),e(s.View,{style:[b,O,t,p],...r,children:a(u,{width:"100%",height:"100%",pointerEvents:"none",children:[e(g,{children:a(m,{id:c,children:[e(l,{offset:0,stopColor:h==="light"?f.grey100:f.inverseGrey100,stopOpacity:0}),e(l,{offset:1,stopColor:d.grey100})]})}),e(y,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})})}const b={position:"absolute",width:28,height:"100%",top:0,bottom:0,overflow:"hidden",zIndex:1},E={left:0,borderTopLeftRadius:12,borderBottomLeftRadius:12},O={right:0,borderTopRightRadius:12,borderBottomRightRadius:12};
+"use strict";import{jsx as e,jsxs as a}from"react/jsx-runtime";import u,{Defs as g,LinearGradient as m,Rect as y,Stop as l}from"@granite-js/native/react-native-svg";import{colors as f}from"@toss/tds-colors";import{useCallback as v,useEffect as R,useRef as x}from"react";import{Animated as s}from"react-native";import{useAdaptive as w,useColorPreference as G}from"../../../../core";import{SPRING_OPTION as I}from"../../constants/spring";const c="segmented-left-gradient";function S(){const t=x(new s.Value(0)).current,o=v(()=>{s.spring(t,{toValue:1,useNativeDriver:!0,...I}).start()},[t]),r=v(()=>{s.spring(t,{toValue:0,useNativeDriver:!0,...I}).start()},[t]);return{fadeIn:o,fadeOut:r,style:{opacity:t}}}export function LeftEdgeGradient({style:t,exiting:o,...r}){const d=w(),{colorPreference:h}=G(),{fadeIn:i,fadeOut:n,style:p}=S();return R(()=>{o?i():n()},[o,i,n]),e(s.View,{style:[b,E,t,p],...r,children:a(u,{width:"100%",height:"100%",pointerEvents:"none",children:[e(g,{children:a(m,{id:c,children:[e(l,{offset:0,stopColor:d.grey100}),e(l,{offset:1,stopColor:h==="light"?f.grey100:f.inverseGrey100,stopOpacity:0})]})}),e(y,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})})}export function RightEdgeGradient({style:t,exiting:o,...r}){const d=w(),{colorPreference:h}=G(),{fadeIn:i,fadeOut:n,style:p}=S();return R(()=>{o?i():n()},[o,i,n]),e(s.View,{style:[b,O,t,p],...r,children:a(u,{width:"100%",height:"100%",pointerEvents:"none",children:[e(g,{children:a(m,{id:c,children:[e(l,{offset:0,stopColor:h==="light"?f.grey100:f.inverseGrey100,stopOpacity:0}),e(l,{offset:1,stopColor:d.grey100})]})}),e(y,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})})}const b={position:"absolute",width:28,height:"100%",top:0,bottom:0,overflow:"hidden",zIndex:1},E={left:0,borderTopLeftRadius:12,borderBottomLeftRadius:12},O={right:0,borderTopRightRadius:12,borderBottomRightRadius:12};

package/dist/esm/components/segmented-control/hooks/useIndicatorBackground.js

@@ -1 +1 @@
-"use strict";import{colors as r}from"@toss-design-system/colors";import{useColorPreference as o}from"../../../core";export function useIndicatorBackground(){const{colorPreference:e}=o();return e==="light"?r.white:r.inverseGrey300}
+"use strict";import{colors as r}from"@toss/tds-colors";import{useColorPreference as o}from"../../../core";export function useIndicatorBackground(){const{colorPreference:e}=o();return e==="light"?r.white:r.inverseGrey300}

package/dist/esm/components/shadow/tokens.js

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss-design-system/colors";const r={tiny:{offsetY:1,radius:3,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},weak:{offsetY:2,radius:30,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},medium:{offsetY:16,radius:60,lightColor:o.greyOpacity300,darkColor:o.greyOpacity900}},t=({offsetY:e,radius:i,lightColor:a,darkColor:y})=>c=>({offset:{x:0,y:c==="up"?-e:e},lightColor:a,darkColor:y,radius:i,opacity:1});export const shadow={tiny:t(r.tiny),weak:t(r.weak),medium:t(r.medium)};
+"use strict";import{colors as o}from"@toss/tds-colors";const r={tiny:{offsetY:1,radius:3,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},weak:{offsetY:2,radius:30,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},medium:{offsetY:16,radius:60,lightColor:o.greyOpacity300,darkColor:o.greyOpacity900}},t=({offsetY:e,radius:i,lightColor:a,darkColor:y})=>c=>({offset:{x:0,y:c==="up"?-e:e},lightColor:a,darkColor:y,radius:i,opacity:1});export const shadow={tiny:t(r.tiny),weak:t(r.weak),medium:t(r.medium)};

package/dist/esm/components/skeleton/AnimateSkeleton.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import f,{Defs as y,LinearGradient as h,Rect as v,Stop as l}from"@granite-js/native/react-native-svg";import{colors as g}from"@toss-design-system/colors";import{useAdaptive as A}from"../../core";import{useEffect as V,useRef as u}from"react";import{Animated as e}from"react-native";function x({children:n,delay:t,withGradient:d,withShimmer:a}){const s=u(new e.Value(t===500?0:1)).current,i=u(new e.Value(a?.2:1)).current;return V(()=>{const m=e.sequence([e.delay(t),e.timing(s,{toValue:1,duration:100,useNativeDriver:!0})]),p=a?e.sequence([e.delay(t),e.loop(e.sequence([e.timing(i,{toValue:1,duration:650,useNativeDriver:!0}),e.timing(i,{toValue:.2,duration:650,useNativeDriver:!0})]))]):w;e.parallel([m,p]).start()},[]),r(e.View,{style:{opacity:s},children:[o(e.View,{style:{opacity:i},children:n}),d?o(D,{}):null]})}function D(){const t=A().background??g.background;return r(f,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[o(y,{children:r(h,{id:c,gradientTransform:"rotate(90)",children:[o(l,{offset:"5%",stopColor:t,stopOpacity:0}),o(l,{offset:"95%",stopColor:t})]})}),o(v,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})}const w=e.delay(0),c="tds-rn-animate-skeleton-gradient";export default x;
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import f,{Defs as y,LinearGradient as h,Rect as v,Stop as l}from"@granite-js/native/react-native-svg";import{colors as g}from"@toss/tds-colors";import{useEffect as A,useRef as u}from"react";import{Animated as e}from"react-native";import{useAdaptive as V}from"../../core";function x({children:n,delay:t,withGradient:d,withShimmer:a}){const s=u(new e.Value(t===500?0:1)).current,i=u(new e.Value(a?.2:1)).current;return A(()=>{const m=e.sequence([e.delay(t),e.timing(s,{toValue:1,duration:100,useNativeDriver:!0})]),p=a?e.sequence([e.delay(t),e.loop(e.sequence([e.timing(i,{toValue:1,duration:650,useNativeDriver:!0}),e.timing(i,{toValue:.2,duration:650,useNativeDriver:!0})]))]):w;e.parallel([m,p]).start()},[]),r(e.View,{style:{opacity:s},children:[o(e.View,{style:{opacity:i},children:n}),d?o(D,{}):null]})}function D(){const t=V().background??g.background;return r(f,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[o(y,{children:r(h,{id:c,gradientTransform:"rotate(90)",children:[o(l,{offset:"5%",stopColor:t,stopOpacity:0}),o(l,{offset:"95%",stopColor:t})]})}),o(v,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})}const w=e.delay(0),c="tds-rn-animate-skeleton-gradient";export default x;

package/dist/esm/components/slider/Slider.js

@@ -1 +1 @@
-"use strict";import{jsx as l,jsxs as L}from"react/jsx-runtime";import{Gesture as G,GestureDetector as M}from"@granite-js/native/react-native-gesture-handler";import{colors as N}from"@toss-design-system/colors";import{forwardRef as X,useEffect as w,useMemo as x,useRef as F,useState as I}from"react";import{Animated as h,View as R}from"react-native";import{styles as d}from"./styles";import{useScreenReaderMode as _}from"./useA11yMode";import{clamp as E,getNearestSteppedValue as C}from"./utils";export const Slider=X(function({min:r=0,max:o=100,value:i=r+o/2,step:c=1,onChange:f,color:k=N.blue400,style:S,...g},A){if(!Number.isInteger(c)||c<=0)throw new Error("step\uC740 \uC591\uC758 \uC815\uC218\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");const[n,y]=I({container:0,thumb:0}),a=F(new h.Value(0)).current,u=n.container!==0&&n.thumb!==0,W=e=>{const t=n.container,s=n.thumb,b=t-s;return e===void 0||t===0||s===0||e<=s/2?r:e>=t-s/2?o:C(r+(o-r)*((e-s/2)/b),r,o,c)},m=e=>{const t=n.container,s=n.thumb,b=t-s;return(e-r)/(o-r)*b},p=e=>{const t=W(e);f?.(t),a.setValue(m(t))},j=x(()=>G.Pan().onUpdate(e=>{p(e.x)}).onStart(e=>{p(e.x)}),[u]);w(()=>{u&&a.setValue(m(i))},[u]);const V=_();w(()=>{V&&a.setValue(m(i))},[V,i]);const v=e=>{switch(e.nativeEvent.actionName){case"increment":f?.(E(i+c,r,o));break;case"decrement":f?.(E(i-c,r,o));break;default:break}};return l(M,{gesture:j,children:L(R,{ref:A,style:[d.slider,S],onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,container:t})},accessible:!0,accessibilityRole:"adjustable",accessibilityValue:{text:`${i}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],accessibilityLiveRegion:"polite",onAccessibilityAction:v,...g,children:[l(R,{style:d.track,pointerEvents:"none",children:l(h.View,{style:[d.progress,{backgroundColor:k,transform:[{translateX:a}]}]})}),l(h.View,{onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,thumb:t})},style:[d.thumb,{opacity:u?1:0,transform:[{translateX:a}]}],pointerEvents:"none"})]})})});
+"use strict";import{jsx as l,jsxs as L}from"react/jsx-runtime";import{Gesture as G,GestureDetector as M}from"@granite-js/native/react-native-gesture-handler";import{colors as N}from"@toss/tds-colors";import{forwardRef as X,useEffect as w,useMemo as x,useRef as F,useState as I}from"react";import{Animated as h,View as R}from"react-native";import{styles as d}from"./styles";import{useScreenReaderMode as _}from"./useA11yMode";import{clamp as E,getNearestSteppedValue as C}from"./utils";export const Slider=X(function({min:r=0,max:o=100,value:i=r+o/2,step:c=1,onChange:f,color:k=N.blue400,style:S,...g},A){if(!Number.isInteger(c)||c<=0)throw new Error("step\uC740 \uC591\uC758 \uC815\uC218\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");const[n,y]=I({container:0,thumb:0}),a=F(new h.Value(0)).current,u=n.container!==0&&n.thumb!==0,W=e=>{const t=n.container,s=n.thumb,b=t-s;return e===void 0||t===0||s===0||e<=s/2?r:e>=t-s/2?o:C(r+(o-r)*((e-s/2)/b),r,o,c)},m=e=>{const t=n.container,s=n.thumb,b=t-s;return(e-r)/(o-r)*b},p=e=>{const t=W(e);f?.(t),a.setValue(m(t))},j=x(()=>G.Pan().onUpdate(e=>{p(e.x)}).onStart(e=>{p(e.x)}),[u]);w(()=>{u&&a.setValue(m(i))},[u]);const V=_();w(()=>{V&&a.setValue(m(i))},[V,i]);const v=e=>{switch(e.nativeEvent.actionName){case"increment":f?.(E(i+c,r,o));break;case"decrement":f?.(E(i-c,r,o));break;default:break}};return l(M,{gesture:j,children:L(R,{ref:A,style:[d.slider,S],onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,container:t})},accessible:!0,accessibilityRole:"adjustable",accessibilityValue:{text:`${i}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],accessibilityLiveRegion:"polite",onAccessibilityAction:v,...g,children:[l(R,{style:d.track,pointerEvents:"none",children:l(h.View,{style:[d.progress,{backgroundColor:k,transform:[{translateX:a}]}]})}),l(h.View,{onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,thumb:t})},style:[d.thumb,{opacity:u?1:0,transform:[{translateX:a}]}],pointerEvents:"none"})]})})});

package/dist/esm/components/slider/styles.js

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss-design-system/colors";import{StyleSheet as s}from"react-native";const e=40,t=5,r=18,i=r*2,h=(e-t)/2;export const styles=s.create({slider:{position:"relative",height:e},track:{position:"absolute",top:h,right:0,left:0,height:t,backgroundColor:o.grey200,borderRadius:t/2,overflow:"hidden"},progress:{position:"absolute",height:"100%",width:"100%",left:"-100%"},thumb:{position:"absolute",top:2,width:i,height:i,borderRadius:r,backgroundColor:o.white,borderColor:o.grey400,borderWidth:1}});
+"use strict";import{colors as o}from"@toss/tds-colors";import{StyleSheet as s}from"react-native";const e=40,t=5,r=18,i=r*2,h=(e-t)/2;export const styles=s.create({slider:{position:"relative",height:e},track:{position:"absolute",top:h,right:0,left:0,height:t,backgroundColor:o.grey200,borderRadius:t/2,overflow:"hidden"},progress:{position:"absolute",height:"100%",width:"100%",left:"-100%"},thumb:{position:"absolute",top:2,width:i,height:i,borderRadius:r,backgroundColor:o.white,borderColor:o.grey400,borderWidth:1}});

package/dist/esm/components/switch/Switch.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as O}from"react/jsx-runtime";import{colors as V}from"@toss-design-system/colors";import{useWiggleAnimation as j}from"../../interactions/animation";import{usePressAnim as R}from"../../interactions/pressable-effect";import{useAccessibilityInfo as E,useControlled as H}from"../../utils";import{useCallback as W,useEffect as D,useMemo as M}from"react";import{Animated as i,Platform as T,Pressable as _,StyleSheet as C}from"react-native";import{useSwitchAnimation as G}from"./useSwitchAnimation";function K({checked:l,defaultChecked:u=!1,disabled:t,style:m,onPress:n,onCheckedChange:r,accessibilityState:f,...p}){const[e,c]=H({controlledValue:l,defaultValue:u}),{reduceMotionEnabled:y}=E(),s=M(()=>e===!0?"on":"off",[e]),{backgroundStyle:h,animatedKnobStyle:d,startSwitchOnAnimation:S,startSwitchOffAnoimation:w}=G({animationState:s,disabled:t}),{startPressInAnim:A,startPressOutAnim:g,scaleAnim:b}=R({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:P,style:x}=j({direction:"x",type:"small"}),I=W(k=>{t||(n?.(k),r?.(!e),c(!e))},[e,t,n,r,c]);return D(()=>{s==="on"?S():w()},[s]),o(_,{onPress:I,onPressIn:t?P:A,onPressOut:t?void 0:g,style:[a.container,m],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:e,disabled:t,...f},...p,children:O(i.View,{style:[T.OS==="ios"?{opacity:t?.3:1}:void 0,y?void 0:b,t?x:void 0],children:[o(i.View,{style:[h,{width:U,height:q,borderRadius:v}]}),o(i.View,{style:[a.knob,d]})]})})}const U=50,q=30,v=15,a=C.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:V.white,borderRadius:8,position:"absolute",left:7,top:7}});export default K;
+"use strict";import{jsx as o,jsxs as O}from"react/jsx-runtime";import{colors as V}from"@toss/tds-colors";import{useCallback as j,useEffect as R,useMemo as E}from"react";import{Animated as i,Platform as H,Pressable as W,StyleSheet as D}from"react-native";import{useWiggleAnimation as M}from"../../interactions/animation";import{usePressAnim as T}from"../../interactions/pressable-effect";import{useAccessibilityInfo as _,useControlled as C}from"../../utils";import{useSwitchAnimation as G}from"./useSwitchAnimation";function K({checked:l,defaultChecked:u=!1,disabled:t,style:m,onPress:n,onCheckedChange:r,accessibilityState:f,...p}){const[e,c]=C({controlledValue:l,defaultValue:u}),{reduceMotionEnabled:y}=_(),s=E(()=>e===!0?"on":"off",[e]),{backgroundStyle:h,animatedKnobStyle:d,startSwitchOnAnimation:S,startSwitchOffAnoimation:w}=G({animationState:s,disabled:t}),{startPressInAnim:A,startPressOutAnim:g,scaleAnim:b}=T({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:P,style:x}=M({direction:"x",type:"small"}),I=j(k=>{t||(n?.(k),r?.(!e),c(!e))},[e,t,n,r,c]);return R(()=>{s==="on"?S():w()},[s]),o(W,{onPress:I,onPressIn:t?P:A,onPressOut:t?void 0:g,style:[a.container,m],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:e,disabled:t,...f},...p,children:O(i.View,{style:[H.OS==="ios"?{opacity:t?.3:1}:void 0,y?void 0:b,t?x:void 0],children:[o(i.View,{style:[h,{width:U,height:q,borderRadius:v}]}),o(i.View,{style:[a.knob,d]})]})})}const U=50,q=30,v=15,a=D.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:V.white,borderRadius:8,position:"absolute",left:7,top:7}});export default K;

package/dist/esm/components/switch/useSwitchAnimation.js

@@ -1 +1 @@
-"use strict";import{colors as m}from"@toss-design-system/colors";import{useAdaptive as b}from"../../core";import g from"hex-to-rgba";import{useCallback as p,useMemo as S,useRef as u}from"react";import{Animated as e,Platform as d}from"react-native";export function useSwitchAnimation({animationState:s,disabled:i}){const c=b(),f=S(()=>({grey200:g(c.grey200??m.grey200,d.OS==="android"&&i?.3:1),blue500:g(m.blue500,d.OS==="android"&&i?.3:1)}),[c.grey200,i]),n=u(new e.Value(s==="on"?1:0)).current,o=u(new e.Value(r.handler[s].translateX)).current,l=u(new e.Value(r.handler[s].scale)).current,t=!1,v=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.on.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.on.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:1,useNativeDriver:t,...a})]).start()},[l,o,n,t]),h=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.off.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.off.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:0,useNativeDriver:t,...a})]).start()},[l,o,n,t]);return{backgroundStyle:{backgroundColor:n.interpolate({inputRange:[0,1],outputRange:[f.grey200,f.blue500]})},animatedKnobStyle:{transform:[{translateX:o},{scale:l}]},startSwitchOnAnimation:v,startSwitchOffAnoimation:h}}const r={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},a={stiffness:1e3,damping:52};
+"use strict";import{colors as m}from"@toss/tds-colors";import g from"hex-to-rgba";import{useCallback as p,useMemo as b,useRef as u}from"react";import{Animated as e,Platform as d}from"react-native";import{useAdaptive as S}from"../../core";export function useSwitchAnimation({animationState:s,disabled:i}){const c=S(),f=b(()=>({grey200:g(c.grey200??m.grey200,d.OS==="android"&&i?.3:1),blue500:g(m.blue500,d.OS==="android"&&i?.3:1)}),[c.grey200,i]),n=u(new e.Value(s==="on"?1:0)).current,o=u(new e.Value(r.handler[s].translateX)).current,l=u(new e.Value(r.handler[s].scale)).current,t=!1,v=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.on.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.on.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:1,useNativeDriver:t,...a})]).start()},[l,o,n,t]),h=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.off.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.off.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:0,useNativeDriver:t,...a})]).start()},[l,o,n,t]);return{backgroundStyle:{backgroundColor:n.interpolate({inputRange:[0,1],outputRange:[f.grey200,f.blue500]})},animatedKnobStyle:{transform:[{translateX:o},{scale:l}]},startSwitchOnAnimation:v,startSwitchOffAnoimation:h}}const r={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},a={stiffness:1e3,damping:52};

package/dist/esm/components/tab/FluidTab.js

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{spring as T}from"@toss-design-system/easings";import{useAdaptive as X}from"../../core";import{useControlled as k}from"../../utils";import{useCallback as A,useEffect as p,useRef as d,useState as b}from"react";import{ScrollView as L,StyleSheet as w,View as r}from"react-native";import{Animated as c}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FluidTab({defaultValue:y,value:g,children:v,onChange:u,style:V,size:x="large",...C}){const m=X(),[S,f]=k({controlledValue:g,defaultValue:y}),B=A(l=>{u?.(l),f(l)},[u,f]),[t,R]=b(0),n=d(new c.Value(t)).current,[i,W]=b(0),j={width:i,transform:[{translateX:n}]};p(()=>{c.spring(n,{toValue:t,useNativeDriver:!0,...T.quick}).start()},[t,n]);const a=d(null),h=d(null);p(()=>{a.current!=null&&h.current?.scrollTo({x:Math.max(0,t-(a.current-i)/2)})},[t,i]);const P={...o.border,borderBottomColor:m.grey200};return e(D.Provider,{value:{fluid:!0,value:S,onChange:B,size:x},children:e(z.Provider,{value:{width:i,translateX:t,setWidth:W,setTranslateX:R},children:s(r,{onLayout:l=>{a.current=l.nativeEvent.layout.width},children:[e(r,{style:[P,o.fluidBorder]}),e(L,{ref:h,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:s(r,{children:[s(r,{style:[o.itemList,V],accessibilityRole:"tablist",...C,children:[e(r,{style:[o.fluidPadding]}),v]}),e(c.View,{style:[{backgroundColor:m.grey800},o.indicator,j]})]})})]})})})}const o=w.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:w.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{spring as T}from"@toss/tds-easings";import{useCallback as X,useEffect as p,useRef as d,useState as b}from"react";import{ScrollView as k,StyleSheet as w,View as r}from"react-native";import{useAdaptive as A}from"../../core";import{Animated as c}from"../../interactions/animated";import{useControlled as L}from"../../utils";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FluidTab({defaultValue:y,value:g,children:v,onChange:u,style:V,size:x="large",...C}){const m=A(),[S,f]=L({controlledValue:g,defaultValue:y}),B=X(l=>{u?.(l),f(l)},[u,f]),[t,R]=b(0),n=d(new c.Value(t)).current,[i,W]=b(0),j={width:i,transform:[{translateX:n}]};p(()=>{c.spring(n,{toValue:t,useNativeDriver:!0,...T.quick}).start()},[t,n]);const a=d(null),h=d(null);p(()=>{a.current!=null&&h.current?.scrollTo({x:Math.max(0,t-(a.current-i)/2)})},[t,i]);const P={...o.border,borderBottomColor:m.grey200};return e(D.Provider,{value:{fluid:!0,value:S,onChange:B,size:x},children:e(z.Provider,{value:{width:i,translateX:t,setWidth:W,setTranslateX:R},children:s(r,{onLayout:l=>{a.current=l.nativeEvent.layout.width},children:[e(r,{style:[P,o.fluidBorder]}),e(k,{ref:h,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:s(r,{children:[s(r,{style:[o.itemList,V],accessibilityRole:"tablist",...C,children:[e(r,{style:[o.fluidPadding]}),v]}),e(c.View,{style:[{backgroundColor:m.grey800},o.indicator,j]})]})})]})})})}const o=w.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:w.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});

package/dist/esm/components/tab/FullTab.js

@@ -1 +1 @@
-"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{spring as X}from"@toss-design-system/easings";import{useAdaptive as k}from"../../core";import{useControlled as A}from"../../utils";import{useCallback as B,useEffect as R,useRef as T,useState as u}from"react";import{ScrollView as W,StyleSheet as h,View as e}from"react-native";import{Animated as a}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FullTab({defaultValue:f,value:p,children:b,onChange:l,style:y,size:g="large",...w}){const s=k(),[v,n]=A({controlledValue:p,defaultValue:f}),V=B(c=>{l?.(c),n(c)},[l,n]),[o,x]=u(0),i=T(new a.Value(o)).current,[d,C]=u(0),S={width:d,transform:[{translateX:i}]};R(()=>{a.spring(i,{toValue:o,useNativeDriver:!0,...X.quick}).start()},[o,i]);const j={...r.border,borderBottomColor:s.grey200};return t(D.Provider,{value:{fluid:!1,value:v,onChange:V,size:g},children:t(z.Provider,{value:{width:d,translateX:o,setWidth:C,setTranslateX:x},children:t(e,{children:t(W,{horizontal:!1,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:m(e,{children:[m(e,{style:[r.itemList,y],accessibilityRole:"tablist",...w,children:[t(e,{style:[r.padding]}),b,t(e,{style:r.padding})]}),t(e,{style:j}),t(a.View,{style:[{backgroundColor:s.grey800},r.indicator,S]})]})})})})})}const r=h.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:h.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{spring as X}from"@toss/tds-easings";import{useCallback as k,useEffect as A,useRef as B,useState as u}from"react";import{ScrollView as R,StyleSheet as h,View as e}from"react-native";import{useAdaptive as T}from"../../core";import{Animated as a}from"../../interactions/animated";import{useControlled as W}from"../../utils";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FullTab({defaultValue:f,value:p,children:b,onChange:l,style:y,size:g="large",...w}){const s=T(),[v,n]=W({controlledValue:p,defaultValue:f}),V=k(c=>{l?.(c),n(c)},[l,n]),[o,x]=u(0),i=B(new a.Value(o)).current,[d,C]=u(0),S={width:d,transform:[{translateX:i}]};A(()=>{a.spring(i,{toValue:o,useNativeDriver:!0,...X.quick}).start()},[o,i]);const j={...r.border,borderBottomColor:s.grey200};return t(D.Provider,{value:{fluid:!1,value:v,onChange:V,size:g},children:t(z.Provider,{value:{width:d,translateX:o,setWidth:C,setTranslateX:x},children:t(e,{children:t(R,{horizontal:!1,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:m(e,{children:[m(e,{style:[r.itemList,y],accessibilityRole:"tablist",...w,children:[t(e,{style:[r.padding]}),b,t(e,{style:r.padding})]}),t(e,{style:j}),t(a.View,{style:[{backgroundColor:s.grey800},r.indicator,S]})]})})})})})}const r=h.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:h.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});

package/dist/esm/components/tab/Gradient.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import e,{Defs as n,LinearGradient as a,Rect as c,Stop as s}from"@granite-js/native/react-native-svg";import{colors as d}from"@toss-design-system/colors";import{useAdaptive as p}from"../../core";export function Gradient(){const t=p().background??d.background;return r(e,{width:l,height:f,pointerEvents:"none",children:[o(n,{children:r(a,{id:i,children:[o(s,{offset:0,stopColor:t,stopOpacity:0}),o(s,{offset:1,stopColor:t})]})}),o(c,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${i})`})]})}const i="tds-rn-bottom-cta-gradient",f=52,l=17;
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import e,{Defs as n,LinearGradient as a,Rect as c,Stop as s}from"@granite-js/native/react-native-svg";import{colors as d}from"@toss/tds-colors";import{useAdaptive as p}from"../../core";export function Gradient(){const t=p().background??d.background;return r(e,{width:l,height:f,pointerEvents:"none",children:[o(n,{children:r(a,{id:i,children:[o(s,{offset:0,stopColor:t,stopOpacity:0}),o(s,{offset:1,stopColor:t})]})}),o(c,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${i})`})]})}const i="tds-rn-bottom-cta-gradient",f=52,l=17;

package/dist/esm/components/tab/TabItem.js

@@ -1 +1 @@
-"use strict";import{jsx as d,jsxs as j}from"react/jsx-runtime";import{useAdaptive as w}from"../../core";import{Txt as T}from"../txt";import{useCallback as B,useContext as x,useEffect as I,useMemo as P,useRef as k,useState as L}from"react";import{Pressable as M,StyleSheet as R,View as W}from"react-native";import{Animated as s}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as A}from"./TabContext";import{spring as C}from"@toss-design-system/easings";export function TabItem({redBean:o=!1,value:e,children:r,style:S,onPress:m}){const{size:f,fluid:g,value:h,onChange:y}=x(A),a=k(new s.Value(1)).current,n=P(()=>e===h,[e,h]),b=w(),v=B(u=>{m?.(u),y?.(e)},[m,y,e]),t=D({size:f,fluid:g}),[i,V]=L(),{setWidth:l,setTranslateX:c}=x(z);return I(()=>{!n||i==null||c==null||l==null||(c(i.x+t.left),l(i.width-(t.left+t.right)))},[n,i,c,l,t.left,t.right]),j(M,{accessibilityRole:"tab",accessibilityState:{selected:n},onPress:v,style:[p.container,{paddingTop:t.top,paddingBottom:t.bottom,paddingHorizontal:t.left,minWidth:g?64:void 0},S],onLayout:u=>{V(u.nativeEvent.layout)},onPressIn:()=>{s.spring(a,{toValue:.96,useNativeDriver:!0,...C.rapid}).start()},onPressOut:()=>{s.spring(a,{toValue:1,useNativeDriver:!0,...C.quick}).start()},children:[d(s.View,{style:[p.innerContainer,{transform:[{scale:a}]}],children:d(T,{numberOfLines:1,ellipsizeMode:"clip",typography:f==="large"?"t5":"t6",fontWeight:n?"bold":"semiBold",color:n?b.grey800:b.grey600,children:r})}),o?d(W,{style:p.redBean}):null]})}const p=R.create({container:{flex:1},innerContainer:{alignItems:"center",justifyContent:"center"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}}),D=({size:o,fluid:e})=>{const r=o==="large"&&e?12:8;return{top:o==="large"?12:8,bottom:o==="large"?14:8,left:r,right:r}};
+"use strict";import{jsx as d,jsxs as j}from"react/jsx-runtime";import{spring as x}from"@toss/tds-easings";import{useCallback as w,useContext as C,useEffect as T,useMemo as B,useRef as I,useState as P}from"react";import{Pressable as k,StyleSheet as L,View as M}from"react-native";import{useAdaptive as R}from"../../core";import{Animated as s}from"../../interactions/animated";import{Txt as W}from"../txt";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as A}from"./TabContext";export function TabItem({redBean:o=!1,value:e,children:r,style:S,onPress:m}){const{size:f,fluid:g,value:h,onChange:y}=C(A),a=I(new s.Value(1)).current,n=B(()=>e===h,[e,h]),b=R(),v=w(u=>{m?.(u),y?.(e)},[m,y,e]),t=D({size:f,fluid:g}),[i,V]=P(),{setWidth:l,setTranslateX:c}=C(z);return T(()=>{!n||i==null||c==null||l==null||(c(i.x+t.left),l(i.width-(t.left+t.right)))},[n,i,c,l,t.left,t.right]),j(k,{accessibilityRole:"tab",accessibilityState:{selected:n},onPress:v,style:[p.container,{paddingTop:t.top,paddingBottom:t.bottom,paddingHorizontal:t.left,minWidth:g?64:void 0},S],onLayout:u=>{V(u.nativeEvent.layout)},onPressIn:()=>{s.spring(a,{toValue:.96,useNativeDriver:!0,...x.rapid}).start()},onPressOut:()=>{s.spring(a,{toValue:1,useNativeDriver:!0,...x.quick}).start()},children:[d(s.View,{style:[p.innerContainer,{transform:[{scale:a}]}],children:d(W,{numberOfLines:1,ellipsizeMode:"clip",typography:f==="large"?"t5":"t6",fontWeight:n?"bold":"semiBold",color:n?b.grey800:b.grey600,children:r})}),o?d(M,{style:p.redBean}):null]})}const p=L.create({container:{flex:1},innerContainer:{alignItems:"center",justifyContent:"center"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}}),D=({size:o,fluid:e})=>{const r=o==="large"&&e?12:8;return{top:o==="large"?12:8,bottom:o==="large"?14:8,left:r,right:r}};

package/dist/esm/components/text-field/OldTextField/TDSTextFieldItem.js

@@ -1 +1 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as l}from"../../../core";import{colors as m}from"@toss-design-system/colors";import{Icon as c}from"../../icon";import{Txt as s}from"../../txt";import{TouchableOpacity as a,View as p}from"react-native";import{useMemo as u}from"react";export function TDSTextFieldItem({style:e,children:o}){return t(p,{style:[{alignItems:"center",justifyContent:"center"},e],children:o})}function y({label:e,style:o,textfieldSize:i}){const r=l(),n=u(()=>d({grey900:r.grey900}),[r.grey900]);return t(TDSTextFieldItem,{style:o,children:t(s,{...n[i??"medium"],children:e})})}function f({style:e,name:o,size:i,color:r=m.grey400,onPress:n}){return t(a,{onPress:n,children:t(TDSTextFieldItem,{style:e,children:t(c,{name:o,color:r,size:i})})})}TDSTextFieldItem.Label=y,TDSTextFieldItem.Icon=f;const d=({grey900:e})=>({big:{typography:"t1",fontWeight:"medium",color:e},medium:{typography:"t3",fontWeight:"regular",color:e},classic:{typography:"t4",fontWeight:"regular",color:e}});
+"use strict";import{jsx as t}from"react/jsx-runtime";import{colors as l}from"@toss/tds-colors";import{useMemo as m}from"react";import{TouchableOpacity as c,View as s}from"react-native";import{useAdaptive as a}from"../../../core";import{Icon as p}from"../../icon";import{Txt as u}from"../../txt";export function TDSTextFieldItem({style:e,children:o}){return t(s,{style:[{alignItems:"center",justifyContent:"center"},e],children:o})}function y({label:e,style:o,textfieldSize:i}){const r=a(),n=m(()=>d({grey900:r.grey900}),[r.grey900]);return t(TDSTextFieldItem,{style:o,children:t(u,{...n[i??"medium"],children:e})})}function f({style:e,name:o,size:i,color:r=l.grey400,onPress:n}){return t(c,{onPress:n,children:t(TDSTextFieldItem,{style:e,children:t(p,{name:o,color:r,size:i})})})}TDSTextFieldItem.Label=y,TDSTextFieldItem.Icon=f;const d=({grey900:e})=>({big:{typography:"t1",fontWeight:"medium",color:e},medium:{typography:"t3",fontWeight:"regular",color:e},classic:{typography:"t4",fontWeight:"regular",color:e}});

package/dist/esm/components/text-field/OldTextField/styles.d.ts

@@ -1,5 +1,5 @@
-import { TxtStyleProps } from '../../txt';
 import { TextStyle, ViewStyle } from 'react-native';
+import { TxtStyleProps } from '../../txt';
 import { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField';
 type TextStyleByVariant = Record<`${TDSTextFieldSize}-${TDSTextFieldState}`, Omit<TextStyle, 'color'> & {
     color: TxtStyleProps['color'];

package/dist/esm/components/text-field/OldTextField/styles.js

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss-design-system/colors";import{fontFamilyByFontWeightMap as c,fontWeightMap as t,defaultTypographyMap as i}from"../../txt";import a from"hex-to-rgba";import{Platform as s,StyleSheet as l}from"react-native";export const getLabelStyle=({grey700:r,grey800:e})=>l.create({"big-default":{fontSize:i.st10.fontSize,fontWeight:t.regular,color:e},"big-focused":{color:o.blue700},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:r},"medium-focused":{color:o.blue700},"medium-error":{color:o.red600},"medium-disabled":{},"classic-default":{fontSize:i.t7.fontSize,fontWeight:t.semiBold,color:r},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getHelpTextStyle=({grey500:r,grey600:e,grey700:d})=>l.create({"big-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:e},"big-focused":{},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:r},"medium-focused":{color:e},"medium-error":{color:o.red500},"medium-disabled":{color:r},"classic-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:d},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getInputContainerStyle=({grey50:r,grey100:e,grey200:d})=>l.create({"big-default":{borderBottomWidth:2,borderBottomColor:d,paddingBottom:8,paddingTop:8},"big-focused":{borderBottomColor:o.blue400},"big-error":{borderBottomColor:o.red600},"big-disabled":{},"medium-default":{borderBottomWidth:2,borderBottomColor:e,paddingBottom:6,paddingTop:6},"medium-focused":{borderBottomColor:o.blue400},"medium-error":{borderBottomColor:o.red600},"medium-disabled":{borderBottomColor:"transparent"},"classic-default":{paddingBottom:15,paddingTop:14,borderRadius:14,backgroundColor:r,paddingHorizontal:16},"classic-focused":{backgroundColor:a(o.blue900,.05)},"classic-error":{backgroundColor:a(o.red900,.05)},"classic-disabled":{backgroundColor:d}}),fontFamilyMap=c[s.OS==="android"?"android":"ios"],getInputStyle=({grey400:r,grey900:e})=>l.create({"big-default":{fontSize:i.t1.fontSize,fontWeight:t.medium,fontFamily:fontFamilyMap.medium,color:e},"big-focused":{},"big-error":{},"big-disabled":{},"medium-default":{fontSize:i.t3.fontSize,fontWeight:t.regular,fontFamily:fontFamilyMap.regular,color:e},"medium-focused":{},"medium-error":{},"medium-disabled":{},"classic-default":{fontSize:i.t4.fontSize,fontWeight:t.regular,fontFamily:fontFamilyMap.regular,color:e},"classic-focused":{},"classic-error":{},"classic-disabled":{color:r}});
+"use strict";import{colors as o}from"@toss/tds-colors";import a from"hex-to-rgba";import{Platform as c,StyleSheet as l}from"react-native";import{defaultTypographyMap as t,fontFamilyByFontWeightMap as s,fontWeightMap as i}from"../../txt";export const getLabelStyle=({grey700:r,grey800:e})=>l.create({"big-default":{fontSize:t.st10.fontSize,fontWeight:i.regular,color:e},"big-focused":{color:o.blue700},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:o.blue700},"medium-error":{color:o.red600},"medium-disabled":{},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.semiBold,color:r},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getHelpTextStyle=({grey500:r,grey600:e,grey700:d})=>l.create({"big-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:e},"big-focused":{},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:e},"medium-error":{color:o.red500},"medium-disabled":{color:r},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:d},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getInputContainerStyle=({grey50:r,grey100:e,grey200:d})=>l.create({"big-default":{borderBottomWidth:2,borderBottomColor:d,paddingBottom:8,paddingTop:8},"big-focused":{borderBottomColor:o.blue400},"big-error":{borderBottomColor:o.red600},"big-disabled":{},"medium-default":{borderBottomWidth:2,borderBottomColor:e,paddingBottom:6,paddingTop:6},"medium-focused":{borderBottomColor:o.blue400},"medium-error":{borderBottomColor:o.red600},"medium-disabled":{borderBottomColor:"transparent"},"classic-default":{paddingBottom:15,paddingTop:14,borderRadius:14,backgroundColor:r,paddingHorizontal:16},"classic-focused":{backgroundColor:a(o.blue900,.05)},"classic-error":{backgroundColor:a(o.red900,.05)},"classic-disabled":{backgroundColor:d}}),fontFamilyMap=s[c.OS==="android"?"android":"ios"],getInputStyle=({grey400:r,grey900:e})=>l.create({"big-default":{fontSize:t.t1.fontSize,fontWeight:i.medium,fontFamily:fontFamilyMap.medium,color:e},"big-focused":{},"big-error":{},"big-disabled":{},"medium-default":{fontSize:t.t3.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"medium-focused":{},"medium-error":{},"medium-disabled":{},"classic-default":{fontSize:t.t4.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"classic-focused":{},"classic-error":{},"classic-disabled":{color:r}});

package/dist/esm/components/text-field/OldTextField/utils.d.ts

@@ -1 +1 @@
-export declare function getState({ disabled, error, focus }: Record<'disabled' | 'error' | 'focus', boolean | undefined>): "default" | "disabled" | "error" | "focused";
+export declare function getState({ disabled, error, focus }: Record<'disabled' | 'error' | 'focus', boolean | undefined>): "default" | "error" | "disabled" | "focused";

package/dist/esm/components/text-field/TextField/hooks/useLabelControls.js

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss-design-system/colors";import{useAdaptive as n}from"../../../../core/index";import{useMemo as a}from"react";import{getTextFieldStatus as s}from"../utils/getTextFieldStatus";import{hasValue as c}from"../utils/hasValue";export function useTextFieldLabelControls(e,l){const t=n(),r=s(e,l),u=a(()=>{switch(r){case"normal":return t.grey800;case"focused":return o.blue600;case"error":return o.red600;case"disabled":return t.grey800}},[r,t.grey800]),i=a(()=>c(e.value)||e.labelOption==="sustain"?1:0,[e.value,e.labelOption]);return{color:u,opacity:i}}
+"use strict";import{colors as o}from"@toss/tds-colors";import{useMemo as a}from"react";import{useAdaptive as n}from"../../../../core/index";import{getTextFieldStatus as s}from"../utils/getTextFieldStatus";import{hasValue as c}from"../utils/hasValue";export function useTextFieldLabelControls(e,l){const t=n(),r=s(e,l),u=a(()=>{switch(r){case"normal":return t.grey800;case"focused":return o.blue600;case"error":return o.red600;case"disabled":return t.grey800}},[r,t.grey800]),i=a(()=>c(e.value)||e.labelOption==="sustain"?1:0,[e.value,e.labelOption]);return{color:u,opacity:i}}

package/dist/esm/components/text-field/TextField/hooks/useTextFieldHelpControls.js

@@ -1 +1 @@
-"use strict";import{colors as s}from"@toss-design-system/colors";import{useAdaptive as c}from"../../../../core/index";import{useMemo as l}from"react";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus";export function useTextFieldHelpControls(r,t){const e=c(),o=a(r,t);return{color:l(()=>{switch(o){case"normal":case"focused":case"disabled":return e.grey600;case"error":return s.red600}},[o,e.grey600])}}
+"use strict";import{colors as s}from"@toss/tds-colors";import{useMemo as c}from"react";import{useAdaptive as l}from"../../../../core/index";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus";export function useTextFieldHelpControls(r,t){const e=l(),o=a(r,t);return{color:c(()=>{switch(o){case"normal":case"focused":case"disabled":return e.grey600;case"error":return s.red600}},[o,e.grey600])}}

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

@@ -1 +1 @@
-"use strict";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{colors as B}from"@toss-design-system/colors";import{useAdaptive as C}from"../../../../../core/index";import{Txt as m}from"../../../../txt/index";import{forwardRef as w,useState as v}from"react";import{Pressable as S,StyleSheet as j,View as u}from"react-native";import{TextFieldButtonArrow as L}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as R}from"../../components/TextFieldButtonText";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as H}from"../../components/TextFieldHelp";import{TextFieldLabel as A}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as D}from"../../hooks/useLabelControls";import{useTextFieldDefaultTextColor as I}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as O}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as _}from"../../hooks/useTextFieldValueControls";import{getTextFieldStatus as k}from"../../utils/getTextFieldStatus";import{TextFieldBoxOverlay as z}from"./TextFieldBoxOverlay";export const TextFieldBoxButton=w(function({prefix:n,right:f,suffix:d,placeholder:x,containerStyle:y,style:g,...e},h){const o=C(),[l,a]=v(!1),{value:r}=_(e),T=O(e,l),s=D(e,l),p=k(e,l),b=I(e,l),F=r!=null&&r!=="";return c(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:y,children:[t(A,{color:s.color,opacity:s.opacity,children:e.label}),t(S,{ref:h,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),a(!0)},onBlur:i=>{e.onBlur?.(i),a(!1)},...e,children:c(u,{style:[G.boxContainer,{backgroundColor:o.grey50}],children:[n?t(m,{color:o.grey800,style:[{paddingRight:8},g],children:n}):null,t(R,{typography:"t5",placeholder:x,placeholderColor:o.grey500,color:b,style:{flexGrow:1},children:r}),d?t(m,{color:F?o.grey800:o.grey500,style:{paddingLeft:8},children:d}):null,t(u,{style:{display:"flex",alignItems:"center",marginLeft:8},children:f??t(L,{})}),t(z,{status:p})]})}),e.help!=null?t(H,{color:T.color,children:e.help}):null]})});const G=j.create({boxContainer:{overflow:"hidden",borderRadius:14,display:"flex",flexDirection:"row",alignItems:"center",borderColor:B.greyOpacity100,borderWidth:1,paddingVertical:14,paddingHorizontal:16,width:"100%"}});
+"use strict";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{colors as B}from"@toss/tds-colors";import{forwardRef as C,useState as w}from"react";import{Pressable as v,StyleSheet as S,View as m}from"react-native";import{useAdaptive as j}from"../../../../../core/index";import{Txt as u}from"../../../../txt/index";import{TextFieldButtonArrow as L}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as R}from"../../components/TextFieldButtonText";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as H}from"../../components/TextFieldHelp";import{TextFieldLabel as A}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as D}from"../../hooks/useLabelControls";import{useTextFieldDefaultTextColor as I}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as O}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as _}from"../../hooks/useTextFieldValueControls";import{getTextFieldStatus as k}from"../../utils/getTextFieldStatus";import{TextFieldBoxOverlay as z}from"./TextFieldBoxOverlay";export const TextFieldBoxButton=C(function({prefix:n,right:f,suffix:d,placeholder:x,containerStyle:y,style:g,...e},h){const o=j(),[l,a]=w(!1),{value:r}=_(e),T=O(e,l),s=D(e,l),p=k(e,l),b=I(e,l),F=r!=null&&r!=="";return c(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:y,children:[t(A,{color:s.color,opacity:s.opacity,children:e.label}),t(v,{ref:h,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),a(!0)},onBlur:i=>{e.onBlur?.(i),a(!1)},...e,children:c(m,{style:[G.boxContainer,{backgroundColor:o.grey50}],children:[n?t(u,{color:o.grey800,style:[{paddingRight:8},g],children:n}):null,t(R,{typography:"t5",placeholder:x,placeholderColor:o.grey500,color:b,style:{flexGrow:1},children:r}),d?t(u,{color:F?o.grey800:o.grey500,style:{paddingLeft:8},children:d}):null,t(m,{style:{display:"flex",alignItems:"center",marginLeft:8},children:f??t(L,{})}),t(z,{status:p})]})}),e.help!=null?t(H,{color:T.color,children:e.help}):null]})});const G=S.create({boxContainer:{overflow:"hidden",borderRadius:14,display:"flex",flexDirection:"row",alignItems:"center",borderColor:B.greyOpacity100,borderWidth:1,paddingVertical:14,paddingHorizontal:16,width:"100%"}});