@toss/tds-react-native 1.0.0 → 1.3.0

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

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

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

@@ -13,4 +13,4 @@ declare function DialogContent({ header, body, footer, }: {
 }): import("react/jsx-runtime").JSX.Element;
 declare function DialogHeaderTxt({ ...props }: TxtProps): import("react/jsx-runtime").JSX.Element;
 declare function DialogBodyTxt({ ...props }: TxtProps): import("react/jsx-runtime").JSX.Element;
-export { DialogOverlay, DialogContent, DialogHeaderTxt, DialogBodyTxt };
+export { DialogBodyTxt, DialogContent, DialogHeaderTxt, DialogOverlay };

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

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

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

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

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

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

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

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

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.d.ts

@@ -37,6 +37,18 @@ export interface EditableRatingProps extends ViewProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * 역할을 나타내요.
+     * @example
+     * <Rating accessibilityLabel="별점 평가" />
+     */
+    accessibilityLabel?: string;
+    /**
+     * 최대 몇점 중 현재 몇점인지 나타내요.
+     * @example
+     * <Rating accessibilityValueText={`${max}점 만점 중 ${value}점`} />
+     */
+    accessibilityValueText?: string | ((max: number, value: number) => string);
 }
 export declare const EditableRating: import("react").ForwardRefExoticComponent<EditableRatingProps & import("react").RefAttributes<View>>;
 export {};

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

package/dist/esm/components/rating/ReadOnlyRating.d.ts

@@ -43,6 +43,18 @@ export interface ReadOnlyRatingProps extends ViewProps {
      * @default adaptive.yellow400
      */
     activeColor?: string;
+    /**
+     * 역할을 나타내요.
+     * @example
+     * <Rating accessibilityLabel="별점 평가" />
+     */
+    accessibilityLabel?: string;
+    /**
+     * 최대 몇점 중 현재 몇점인지 나타내요.
+     * @example
+     * <Rating accessibilityValueText={`${max}점 만점 중 ${value}점`} />
+     */
+    accessibilityValueText?: string | ((max: number, value: number) => string);
 }
 export declare const ReadOnlyRating: import("react").ForwardRefExoticComponent<ReadOnlyRatingProps & import("react").RefAttributes<View>>;
 export {};

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

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as u}from"react/jsx-runtime";import{ClipPath as R,Defs as v,G as B,Rect as D,Svg as P}from"@granite-js/native/react-native-svg";import{useAdaptive as j}from"../../core";import{SvgIcon as w}from"../icon/private";import{FontWeight as f,Txt as S}from"../txt";import{forwardRef as x}from"react";import{View as d}from"react-native";const O=x(function({name:r,size:o,progress:l,color:i,...t},n){return u(P,{ref:n,width:o,height:o,...t,children:[e(v,{children:e(R,{id:"clip",children:e(D,{width:o*l,height:o})})}),e(B,{clipPath:"url(#clip)",children:e(w,{name:r,size:o,color:i})})]})}),A=x(function({name:r,size:o,progress:l,idleColor:i,activeColor:t,style:n,...s},c){return u(d,{ref:c,style:[{position:"relative"},n],...s,children:[e(w,{name:r,size:o,color:i}),e(O,{name:r,size:o,progress:l,color:t,style:{position:"absolute",top:0,left:0}})]})});export const ProgressIcons=x(function({name:r,size:o,gap:l,max:i,value:t,style:n,idleColor:s,activeColor:c,...g},p){return e(d,{ref:p,style:[{flexDirection:"row",alignItems:"center",gap:l},n],...g,children:Array.from({length:i},(m,h)=>{const a=Math.min(1,Math.max(0,t-h)),y=a<.25?0:a<.75?.5:1;return e(A,{name:r,size:o,progress:y,idleColor:s,activeColor:c},h)})})});const G={tiny:0,small:0,medium:0,large:0,big:0},M={tiny:16,small:20,medium:24,large:32,big:40},W={tiny:4,small:4,medium:4,large:4,big:2},I={tiny:{typography:"t7",fontWeight:f.Medium},small:{typography:"t5",fontWeight:f.Semibold},medium:{typography:"t4",fontWeight:f.Semibold},large:{typography:"t3",fontWeight:f.Bold},big:{typography:"st5",fontWeight:f.Bold}};export const ReadOnlyRating=x(function({variant:r,size:o="large",gap:l=G[o],max:i=5,value:t,style:n,activeColor:s,...c},g){const p=M[o],m=j(),h=m.greyOpacity200,a=s??m.yellow400,y="icon-star-mono",b={accessible:!0,accessibilityRole:"text",accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${i}\uC810 \uB9CC\uC810 \uC911 ${t}\uC810`};if(r==="full")return u(d,{ref:g,style:[{flexDirection:"row",alignItems:"center",gap:W[o]},n],...b,...c,children:[e(ProgressIcons,{idleColor:h,activeColor:a,name:y,size:p,gap:l,max:i,value:t}),e(S,{typography:I[o].typography,fontWeight:I[o].fontWeight,color:m.grey800,children:t})]});if(r==="compact")return u(d,{ref:g,style:[{flexDirection:"row",alignItems:"center",gap:W[o]},n],...b,...c,children:[e(w,{name:y,size:p,color:a}),e(S,{typography:I[o].typography,fontWeight:I[o].fontWeight,color:m.grey800,children:t})]});if(r==="iconOnly")return e(d,{ref:g,style:[{flexDirection:"row",alignItems:"center"},n],...b,...c,children:e(ProgressIcons,{idleColor:h,activeColor:a,name:y,size:p,gap:l,max:i,value:t})});throw new Error("Unhandled variant")});
+"use strict";import{jsx as t,jsxs as u}from"react/jsx-runtime";import{ClipPath as B,Defs as D,G as P,Rect as j,Svg as O}from"@granite-js/native/react-native-svg";import{useAdaptive as A}from"../../core";import{SvgIcon as b}from"../icon/private";import{FontWeight as h,Txt as R}from"../txt";import{forwardRef as I}from"react";import{View as y}from"react-native";const G=I(function({name:r,size:o,progress:l,color:n,...e},i){return u(O,{ref:i,width:o,height:o,...e,children:[t(D,{children:t(B,{id:"clip",children:t(j,{width:o*l,height:o})})}),t(P,{clipPath:"url(#clip)",children:t(b,{name:r,size:o,color:n})})]})}),M=I(function({name:r,size:o,progress:l,idleColor:n,activeColor:e,style:i,...s},g){return u(y,{ref:g,style:[{position:"relative"},i],...s,children:[t(b,{name:r,size:o,color:n}),t(G,{name:r,size:o,progress:l,color:e,style:{position:"absolute",top:0,left:0}})]})});export const ProgressIcons=I(function({name:r,size:o,gap:l,max:n,value:e,style:i,idleColor:s,activeColor:g,...p},m){return t(y,{ref:m,style:[{flexDirection:"row",alignItems:"center",gap:l},i],...p,children:Array.from({length:n},(f,a)=>{const c=Math.min(1,Math.max(0,e-a)),d=c<.25?0:c<.75?.5:1;return t(M,{name:r,size:o,progress:d,idleColor:s,activeColor:g},a)})})});const _={tiny:0,small:0,medium:0,large:0,big:0},$={tiny:16,small:20,medium:24,large:32,big:40},v={tiny:4,small:4,medium:4,large:4,big:2},x={tiny:{typography:"t7",fontWeight:h.Medium},small:{typography:"t5",fontWeight:h.Semibold},medium:{typography:"t4",fontWeight:h.Semibold},large:{typography:"t3",fontWeight:h.Bold},big:{typography:"st5",fontWeight:h.Bold}};export const ReadOnlyRating=I(function({variant:r,size:o="large",gap:l=_[o],max:n=5,value:e,style:i,activeColor:s,accessibilityLabel:g="\uBCC4\uC810\uD3C9\uAC00",accessibilityValueText:p=`${n}\uC810 \uB9CC\uC810 \uC911 ${e}\uC810`,...m},f){const a=$[o],c=A(),d=c.greyOpacity200,w=s??c.yellow400,S="icon-star-mono",W={accessible:!0,accessibilityRole:"text",accessibilityLabel:g,accessibilityValue:{text:typeof p=="function"?p(n,e):p}};if(r==="full")return u(y,{ref:f,style:[{flexDirection:"row",alignItems:"center",gap:v[o]},i],...W,...m,children:[t(ProgressIcons,{idleColor:d,activeColor:w,name:S,size:a,gap:l,max:n,value:e}),t(R,{typography:x[o].typography,fontWeight:x[o].fontWeight,color:c.grey800,children:e})]});if(r==="compact")return u(y,{ref:f,style:[{flexDirection:"row",alignItems:"center",gap:v[o]},i],...W,...m,children:[t(b,{name:S,size:a,color:w}),t(R,{typography:x[o].typography,fontWeight:x[o].fontWeight,color:c.grey800,children:e})]});if(r==="iconOnly")return t(y,{ref:f,style:[{flexDirection:"row",alignItems:"center"},i],...W,...m,children:t(ProgressIcons,{idleColor:d,activeColor:w,name:S,size:a,gap:l,max:n,value:e})});throw new Error("Unhandled variant")});

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}});