@toss/tds-react-native 1.0.0 → 1.3.0

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ListFooterTitle=ListFooterTitle;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),txt_1=require("../txt");function ListFooterTitle({typography:t="t5",color:e=colors_1.colors.blue500,fontWeight:r="medium",children:o,...s}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:t,color:e,fontWeight:r,...s,children:o})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ListFooterTitle=ListFooterTitle;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),txt_1=require("../txt");function ListFooterTitle({typography:t="t5",color:e=tds_colors_1.colors.blue500,fontWeight:r="medium",children:o,...s}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:t,color:e,fontWeight:r,...s,children:o})}

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

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ListRowDisabled=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native");function ListRowDisabledStyle1({...e}){const{colorPreference:t}=(0,core_1.useColorPreference)(),r=(0,react_1.useMemo)(()=>t==="light"?colors_1.colors.whiteOpacity700:(0,hex_to_rgba_1.default)(colors_1.colors.darkBackground,.7),[t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:r}],...e})}function ListRowDisabledStyle2({...e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:t.greyOpacity50}],...e})}exports.ListRowDisabled={Style1:ListRowDisabledStyle1,Style2:ListRowDisabledStyle2};
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ListRowDisabled=void 0;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core");function ListRowDisabledStyle1({...e}){const{colorPreference:t}=(0,core_1.useColorPreference)(),r=(0,react_1.useMemo)(()=>t==="light"?tds_colors_1.colors.whiteOpacity700:(0,hex_to_rgba_1.default)(tds_colors_1.colors.darkBackground,.7),[t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:r}],...e})}function ListRowDisabledStyle2({...e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:t.greyOpacity50}],...e})}exports.ListRowDisabled={Style1:ListRowDisabledStyle1,Style2:ListRowDisabledStyle2};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShineEffect=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../../core"),animated_1=require("../../../interactions/animated"),react_native_1=require("react-native"),gradient_1=require("../../gradient"),animationState_1=require("./animationState"),ShineEffectLight=({shineAnimation:e})=>(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{pointerEvents:"none",style:[styles.shineLight,e.light.gradient],children:(0,jsx_runtime_1.jsx)(gradient_1.LinearGradient,{degree:140,colors:[{value:colors_1.colors.white,opacity:0},{value:colors_1.colors.white,opacity:.8},{value:colors_1.colors.white,opacity:0}],easing:"linear",positions:[.3,.5,.7],style:{width:"100%",height:"100%"}})}),ShineEffectDark=({shineAnimation:e})=>(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{pointerEvents:"none",style:[styles.shineDark,e.dark.gradient],children:(0,jsx_runtime_1.jsx)(gradient_1.LinearGradient,{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%"}})}),styles=react_native_1.StyleSheet.create({shineLight:{position:"absolute",height:"300%",top:0,aspectRatio:1},shineDark:{position:"absolute",top:0,left:0,width:"400%",height:"100%"}}),ShineEffect=({shineAnimation:e})=>{const{colorPreference:t}=(0,core_1.useColorPreference)();return e.state===animationState_1.ShineAnimationState.Idle||e.state===animationState_1.ShineAnimationState.Finished?null:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[t==="light"&&(0,jsx_runtime_1.jsx)(ShineEffectLight,{shineAnimation:e}),t==="dark"&&(0,jsx_runtime_1.jsx)(ShineEffectDark,{shineAnimation:e})]})};exports.ShineEffect=ShineEffect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShineEffect=void 0;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),react_native_1=require("react-native"),core_1=require("../../../core"),animated_1=require("../../../interactions/animated"),gradient_1=require("../../gradient"),animationState_1=require("./animationState"),ShineEffectLight=({shineAnimation:e})=>(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{pointerEvents:"none",style:[styles.shineLight,e.light.gradient],children:(0,jsx_runtime_1.jsx)(gradient_1.LinearGradient,{degree:140,colors:[{value:tds_colors_1.colors.white,opacity:0},{value:tds_colors_1.colors.white,opacity:.8},{value:tds_colors_1.colors.white,opacity:0}],easing:"linear",positions:[.3,.5,.7],style:{width:"100%",height:"100%"}})}),ShineEffectDark=({shineAnimation:e})=>(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{pointerEvents:"none",style:[styles.shineDark,e.dark.gradient],children:(0,jsx_runtime_1.jsx)(gradient_1.LinearGradient,{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%"}})}),styles=react_native_1.StyleSheet.create({shineLight:{position:"absolute",height:"300%",top:0,aspectRatio:1},shineDark:{position:"absolute",top:0,left:0,width:"400%",height:"100%"}}),ShineEffect=({shineAnimation:e})=>{const{colorPreference:t}=(0,core_1.useColorPreference)();return e.state===animationState_1.ShineAnimationState.Idle||e.state===animationState_1.ShineAnimationState.Finished?null:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[t==="light"&&(0,jsx_runtime_1.jsx)(ShineEffectLight,{shineAnimation:e}),t==="dark"&&(0,jsx_runtime_1.jsx)(ShineEffectDark,{shineAnimation:e})]})};exports.ShineEffect=ShineEffect;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBlinkAnimation=void 0;const react_1=require("react"),animated_1=require("../../../interactions/animated"),easings_1=require("@toss-design-system/easings"),sToMs_1=require("./sToMs"),animationState_1=require("./animationState"),useBlinkAnimation=({containerSize:l})=>{const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,i=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,[m,a]=(0,react_1.useState)(animationState_1.BlinkAnimationState.Idle),u=(0,react_1.useCallback)(()=>{a(animationState_1.BlinkAnimationState.StartAnimation|animationState_1.BlinkAnimationState.Playing),t.setValue(1);const s=animated_1.Animated.sequence([animated_1.Animated.spring(t,{toValue:1.02,stiffness:766,damping:52,useNativeDriver:!0}),animated_1.Animated.spring(t,{toValue:1,...easings_1.spring.slow,useNativeDriver:!0})]);e.setValue(0);const r=animated_1.Animated.parallel([animated_1.Animated.spring(i,{toValue:.04,delay:(0,sToMs_1.sToMs)(.48),...easings_1.spring.basic,useNativeDriver:!0})]);n.setValue(0),e.setValue(0);const o=animated_1.Animated.parallel([animated_1.Animated.spring(e,{toValue:1,delay:(0,sToMs_1.sToMs)(.02),...easings_1.spring.basic,useNativeDriver:!0}),animated_1.Animated.spring(n,{toValue:1,delay:(0,sToMs_1.sToMs)(.02),...easings_1.spring.slow,useNativeDriver:!0})]);animated_1.Animated.parallel([s,r,o]).start(()=>{a(animationState_1.BlinkAnimationState.StartAnimation|animationState_1.BlinkAnimationState.Finished)})},[t,i,e,n]),c=(0,react_1.useCallback)(()=>{a(animationState_1.BlinkAnimationState.EndAnimation|animationState_1.BlinkAnimationState.Playing);const s=animated_1.Animated.spring(t,{toValue:1,...easings_1.spring.quick,useNativeDriver:!0}),r=animated_1.Animated.spring(i,{toValue:0,...easings_1.spring.slow,useNativeDriver:!0}),o=animated_1.Animated.spring(e,{toValue:0,...easings_1.spring.slow,useNativeDriver:!0});animated_1.Animated.parallel([s,r,o]).start(()=>{a(animationState_1.BlinkAnimationState.EndAnimation|animationState_1.BlinkAnimationState.Finished)})},[t,i,e]);return(0,react_1.useMemo)(()=>({container:{transform:[{scale:t}]},dimmer:{opacity:i},gradient:{opacity:e,transform:[{scale:n},{translateY:animated_1.Animated.divide(animated_1.Animated.multiply(n,-l.height),2)}]},state:m,start:u,exit:c}),[t,i,m,c,l,e,n,u])};exports.useBlinkAnimation=useBlinkAnimation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBlinkAnimation=void 0;const tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),animated_1=require("../../../interactions/animated"),animationState_1=require("./animationState"),sToMs_1=require("./sToMs"),useBlinkAnimation=({containerSize:l})=>{const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,i=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,[m,a]=(0,react_1.useState)(animationState_1.BlinkAnimationState.Idle),u=(0,react_1.useCallback)(()=>{a(animationState_1.BlinkAnimationState.StartAnimation|animationState_1.BlinkAnimationState.Playing),t.setValue(1);const s=animated_1.Animated.sequence([animated_1.Animated.spring(t,{toValue:1.02,stiffness:766,damping:52,useNativeDriver:!0}),animated_1.Animated.spring(t,{toValue:1,...tds_easings_1.spring.slow,useNativeDriver:!0})]);e.setValue(0);const r=animated_1.Animated.parallel([animated_1.Animated.spring(i,{toValue:.04,delay:(0,sToMs_1.sToMs)(.48),...tds_easings_1.spring.basic,useNativeDriver:!0})]);n.setValue(0),e.setValue(0);const o=animated_1.Animated.parallel([animated_1.Animated.spring(e,{toValue:1,delay:(0,sToMs_1.sToMs)(.02),...tds_easings_1.spring.basic,useNativeDriver:!0}),animated_1.Animated.spring(n,{toValue:1,delay:(0,sToMs_1.sToMs)(.02),...tds_easings_1.spring.slow,useNativeDriver:!0})]);animated_1.Animated.parallel([s,r,o]).start(()=>{a(animationState_1.BlinkAnimationState.StartAnimation|animationState_1.BlinkAnimationState.Finished)})},[t,i,e,n]),c=(0,react_1.useCallback)(()=>{a(animationState_1.BlinkAnimationState.EndAnimation|animationState_1.BlinkAnimationState.Playing);const s=animated_1.Animated.spring(t,{toValue:1,...tds_easings_1.spring.quick,useNativeDriver:!0}),r=animated_1.Animated.spring(i,{toValue:0,...tds_easings_1.spring.slow,useNativeDriver:!0}),o=animated_1.Animated.spring(e,{toValue:0,...tds_easings_1.spring.slow,useNativeDriver:!0});animated_1.Animated.parallel([s,r,o]).start(()=>{a(animationState_1.BlinkAnimationState.EndAnimation|animationState_1.BlinkAnimationState.Finished)})},[t,i,e]);return(0,react_1.useMemo)(()=>({container:{transform:[{scale:t}]},dimmer:{opacity:i},gradient:{opacity:e,transform:[{scale:n},{translateY:animated_1.Animated.divide(animated_1.Animated.multiply(n,-l.height),2)}]},state:m,start:u,exit:c}),[t,i,m,c,l,e,n,u])};exports.useBlinkAnimation=useBlinkAnimation;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useShineAnimation=void 0;const react_1=require("react"),animated_1=require("../../../interactions/animated"),easings_1=require("@toss-design-system/easings"),sToMs_1=require("./sToMs"),react_native_1=require("react-native"),animationState_1=require("./animationState"),useShineAnimation=({containerSize:i})=>{const s=i.height*3,t=(0,react_1.useRef)(new animated_1.Animated.Value(-s)).current,[d,m]=(0,react_1.useState)(animationState_1.ShineAnimationState.Idle);(0,react_1.useEffect)(()=>{t.setValue(-s)},[t,s]);const l=(0,react_1.useCallback)((n,o)=>{animated_1.Animated.loop(animated_1.Animated.sequence([animated_1.Animated.timing(t,{toValue:-s,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(t,{toValue:i.width,duration:(0,sToMs_1.sToMs)(2.2),easing:react_native_1.Easing.bezier(.7,0,.7,1),useNativeDriver:!0}),animated_1.Animated.delay((0,sToMs_1.sToMs)(.1))]),{iterations:n}).start(o)},[t,s,i.width]),r=i.width*4,e=(0,react_1.useRef)(new animated_1.Animated.Value(-r*.75)).current,a=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current;(0,react_1.useEffect)(()=>{e.setValue(-r*.75)},[e,r]);const c=(0,react_1.useCallback)((n,o)=>{const u=animated_1.Animated.sequence([animated_1.Animated.timing(e,{toValue:-r*.75,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(e,{toValue:0,easing:react_native_1.Easing.bezier(.37,0,.63,1),duration:(0,sToMs_1.sToMs)(2.5),useNativeDriver:!0})]),g=animated_1.Animated.sequence([animated_1.Animated.timing(a,{toValue:0,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(a,{toValue:1,duration:(0,sToMs_1.sToMs)(.9),easing:react_native_1.Easing.bezier(...easings_1.bezier.linear),useNativeDriver:!0}),animated_1.Animated.timing(a,{toValue:0,duration:(0,sToMs_1.sToMs)(1.6),delay:(0,sToMs_1.sToMs)(.9),easing:react_native_1.Easing.bezier(...easings_1.bezier.out),useNativeDriver:!0})]);animated_1.Animated.loop(animated_1.Animated.parallel([u,g]),{iterations:n}).start(o)},[a,e,r]);return(0,react_1.useMemo)(()=>{function n(o){return u=>{m(animationState_1.ShineAnimationState.Playing),o(u,()=>m(animationState_1.ShineAnimationState.Finished))}}return{state:d,light:{gradient:{transform:[{translateX:t},{translateY:-i.height}]},start:n(l)},dark:{gradient:{opacity:a,transform:[{translateX:e}]},start:n(c)}}},[i.height,d,t,l,a,e,c])};exports.useShineAnimation=useShineAnimation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useShineAnimation=void 0;const tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../../interactions/animated"),animationState_1=require("./animationState"),sToMs_1=require("./sToMs"),useShineAnimation=({containerSize:i})=>{const s=i.height*3,t=(0,react_1.useRef)(new animated_1.Animated.Value(-s)).current,[d,m]=(0,react_1.useState)(animationState_1.ShineAnimationState.Idle);(0,react_1.useEffect)(()=>{t.setValue(-s)},[t,s]);const l=(0,react_1.useCallback)((n,o)=>{animated_1.Animated.loop(animated_1.Animated.sequence([animated_1.Animated.timing(t,{toValue:-s,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(t,{toValue:i.width,duration:(0,sToMs_1.sToMs)(2.2),easing:react_native_1.Easing.bezier(.7,0,.7,1),useNativeDriver:!0}),animated_1.Animated.delay((0,sToMs_1.sToMs)(.1))]),{iterations:n}).start(o)},[t,s,i.width]),r=i.width*4,e=(0,react_1.useRef)(new animated_1.Animated.Value(-r*.75)).current,a=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current;(0,react_1.useEffect)(()=>{e.setValue(-r*.75)},[e,r]);const c=(0,react_1.useCallback)((n,o)=>{const u=animated_1.Animated.sequence([animated_1.Animated.timing(e,{toValue:-r*.75,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(e,{toValue:0,easing:react_native_1.Easing.bezier(.37,0,.63,1),duration:(0,sToMs_1.sToMs)(2.5),useNativeDriver:!0})]),g=animated_1.Animated.sequence([animated_1.Animated.timing(a,{toValue:0,duration:0,useNativeDriver:!0}),animated_1.Animated.timing(a,{toValue:1,duration:(0,sToMs_1.sToMs)(.9),easing:react_native_1.Easing.bezier(...tds_easings_1.bezier.linear),useNativeDriver:!0}),animated_1.Animated.timing(a,{toValue:0,duration:(0,sToMs_1.sToMs)(1.6),delay:(0,sToMs_1.sToMs)(.9),easing:react_native_1.Easing.bezier(...tds_easings_1.bezier.out),useNativeDriver:!0})]);animated_1.Animated.loop(animated_1.Animated.parallel([u,g]),{iterations:n}).start(o)},[a,e,r]);return(0,react_1.useMemo)(()=>{function n(o){return u=>{m(animationState_1.ShineAnimationState.Playing),o(u,()=>m(animationState_1.ShineAnimationState.Finished))}}return{state:d,light:{gradient:{transform:[{translateX:t},{translateY:-i.height}]},start:n(l)},dark:{gradient:{opacity:a,transform:[{translateX:e}]},start:n(c)}}},[i.height,d,t,l,a,e,c])};exports.useShineAnimation=useShineAnimation;

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(t,e,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(e,n);(!i||("get"in i?!e.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,i)}:function(t,e,n,r){r===void 0&&(r=n),t[r]=e[n]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r=t(e),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,e,r[i]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native"),useAnnounce_1=require("../../utils/useAnnounce"),AnimatedView=react_native_1.Animated.createAnimatedComponent(react_native_1.View),AnimatedSvg=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.default),AnimatedCircle=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Circle);function _Loader({size:t=DEFAULT_PROPS.size,type:e=DEFAULT_PROPS.type,customStrokeColor:n,customSize:r}){const i=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,a=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,s=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,o=i.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]}),c=s.interpolate({inputRange:[0,1,2],outputRange:[180,45,180]}),l=a.interpolate({inputRange:[0,1,2],outputRange:["0deg","108deg","360deg"]}),d=n??strokeColorByType[e],u=r??sizeMap[t];return(0,react_1.useEffect)(()=>{react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(s,{toValue:1,duration:900,useNativeDriver:!0,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)}),react_native_1.Animated.timing(s,{toValue:2,useNativeDriver:!0,duration:900,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)})]),{iterations:1/0}).start(),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(a,{toValue:1,duration:900,useNativeDriver:!0,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)}),react_native_1.Animated.timing(a,{toValue:2,useNativeDriver:!0,duration:900,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)})]),{iterations:1/0}).start(),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(i,{toValue:0,duration:0,useNativeDriver:!0,easing:react_native_1.Easing.linear}),react_native_1.Animated.timing(i,{toValue:1,duration:1800,useNativeDriver:!0,easing:react_native_1.Easing.linear})]),{iterations:1/0}).start()},[s,i,a]),(0,jsx_runtime_1.jsx)(AnimatedView,{style:{width:u,height:u,transform:[{rotate:l}]},children:(0,jsx_runtime_1.jsx)(AnimatedSvg,{width:u,height:u,viewBox:"0 0 66 66",stroke:d,style:[{transform:[{rotate:o}]}],children:(0,jsx_runtime_1.jsx)(AnimatedCircle,{fill:"none",strokeWidth:"6",strokeLinecap:"round",cx:"33",cy:"33",r:"30",strokeDashoffset:c,strokeDasharray:180})})})}function DelayLoader({delay:t=700,...e}){const n=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(n,{toValue:1,delay:t,duration:0,useNativeDriver:!0}).start()},[t,n]),(0,jsx_runtime_1.jsx)(AnimatedView,{style:{opacity:n},children:(0,jsx_runtime_1.jsx)(_Loader,{...e})})}function Loader({delay:t,label:e,size:n=DEFAULT_PROPS.size,type:r=DEFAULT_PROPS.type,style:i,...a}){const s=(0,core_1.useAdaptive)(),{announce:o}=(0,useAnnounce_1.useAnnounce)(),c=(0,react_1.useMemo)(()=>getLabelColorByType({grey800:s.grey800}),[s.grey800]);return(0,react_1.useEffect)(()=>{e!=null?o(e,{queue:!0,delay:200}):o("\uB85C\uB529\uC911\uC785\uB2C8\uB2E4",{queue:!0,delay:200})},[e,o]),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{alignItems:"center"},i],children:[t!=null?(0,jsx_runtime_1.jsx)(DelayLoader,{delay:t,size:n,type:r,...a}):(0,jsx_runtime_1.jsx)(_Loader,{size:n,type:r,...a}),e!=null?(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",color:c[r],style:{marginTop:spacingBySize[n]},children:e}):null]})}function CenteredLoader({style:t,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{padding:40,alignItems:"center"},t],children:(0,jsx_runtime_1.jsx)(_Loader,{...e})})}function FullScreenLoader({style:t,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{flex:1,justifyContent:"center",alignItems:"center"},t],children:(0,jsx_runtime_1.jsx)(Loader,{...e})})}const DEFAULT_PROPS={size:"large",type:"primary"},sizeMap={small:24,medium:36,large:48},strokeColorByType={primary:"#3188ff",dark:colors_1.colors.grey600,light:colors_1.colors.white},spacingBySize={small:12,medium:12,large:16},getLabelColorByType=({grey800:t})=>({primary:t,dark:t,light:colors_1.colors.white});Loader.Delay=DelayLoader,Loader.FullScreen=FullScreenLoader,Loader.Centered=CenteredLoader,exports.default=Loader;
+"use strict";var __createBinding=Object.create?function(t,e,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(e,n);(!i||("get"in i?!e.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,i)}:function(t,e,n,r){r===void 0&&(r=n),t[r]=e[n]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r=t(e),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,e,r[i]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),useAnnounce_1=require("../../utils/useAnnounce"),txt_1=require("../txt"),AnimatedView=react_native_1.Animated.createAnimatedComponent(react_native_1.View),AnimatedSvg=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.default),AnimatedCircle=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Circle);function _Loader({size:t=DEFAULT_PROPS.size,type:e=DEFAULT_PROPS.type,customStrokeColor:n,customSize:r}){const i=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,a=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,s=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,o=i.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]}),c=s.interpolate({inputRange:[0,1,2],outputRange:[180,45,180]}),l=a.interpolate({inputRange:[0,1,2],outputRange:["0deg","108deg","360deg"]}),d=n??strokeColorByType[e],u=r??sizeMap[t];return(0,react_1.useEffect)(()=>{react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(s,{toValue:1,duration:900,useNativeDriver:!0,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)}),react_native_1.Animated.timing(s,{toValue:2,useNativeDriver:!0,duration:900,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)})]),{iterations:1/0}).start(),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(a,{toValue:1,duration:900,useNativeDriver:!0,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)}),react_native_1.Animated.timing(a,{toValue:2,useNativeDriver:!0,duration:900,easing:react_native_1.Easing.inOut(react_native_1.Easing.ease)})]),{iterations:1/0}).start(),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(i,{toValue:0,duration:0,useNativeDriver:!0,easing:react_native_1.Easing.linear}),react_native_1.Animated.timing(i,{toValue:1,duration:1800,useNativeDriver:!0,easing:react_native_1.Easing.linear})]),{iterations:1/0}).start()},[s,i,a]),(0,jsx_runtime_1.jsx)(AnimatedView,{style:{width:u,height:u,transform:[{rotate:l}]},children:(0,jsx_runtime_1.jsx)(AnimatedSvg,{width:u,height:u,viewBox:"0 0 66 66",stroke:d,style:[{transform:[{rotate:o}]}],children:(0,jsx_runtime_1.jsx)(AnimatedCircle,{fill:"none",strokeWidth:"6",strokeLinecap:"round",cx:"33",cy:"33",r:"30",strokeDashoffset:c,strokeDasharray:180})})})}function DelayLoader({delay:t=700,...e}){const n=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(n,{toValue:1,delay:t,duration:0,useNativeDriver:!0}).start()},[t,n]),(0,jsx_runtime_1.jsx)(AnimatedView,{style:{opacity:n},children:(0,jsx_runtime_1.jsx)(_Loader,{...e})})}function Loader({delay:t,label:e,size:n=DEFAULT_PROPS.size,type:r=DEFAULT_PROPS.type,style:i,...a}){const s=(0,core_1.useAdaptive)(),{announce:o}=(0,useAnnounce_1.useAnnounce)(),c=(0,react_1.useMemo)(()=>getLabelColorByType({grey800:s.grey800}),[s.grey800]);return(0,react_1.useEffect)(()=>{e!=null?o(e,{queue:!0,delay:200}):o("\uB85C\uB529\uC911\uC785\uB2C8\uB2E4",{queue:!0,delay:200})},[e,o]),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{alignItems:"center"},i],children:[t!=null?(0,jsx_runtime_1.jsx)(DelayLoader,{delay:t,size:n,type:r,...a}):(0,jsx_runtime_1.jsx)(_Loader,{size:n,type:r,...a}),e!=null?(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",color:c[r],style:{marginTop:spacingBySize[n]},children:e}):null]})}function CenteredLoader({style:t,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{padding:40,alignItems:"center"},t],children:(0,jsx_runtime_1.jsx)(_Loader,{...e})})}function FullScreenLoader({style:t,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{flex:1,justifyContent:"center",alignItems:"center"},t],children:(0,jsx_runtime_1.jsx)(Loader,{...e})})}const DEFAULT_PROPS={size:"large",type:"primary"},sizeMap={small:24,medium:36,large:48},strokeColorByType={primary:"#3188ff",dark:tds_colors_1.colors.grey600,light:tds_colors_1.colors.white},spacingBySize={small:12,medium:12,large:16},getLabelColorByType=({grey800:t})=>({primary:t,dark:t,light:tds_colors_1.colors.white});Loader.Delay=DelayLoader,Loader.FullScreen=FullScreenLoader,Loader.Centered=CenteredLoader,exports.default=Loader;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinner=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),easings_1=require("@toss-design-system/easings"),animated_1=require("../../interactions/animated"),core_1=require("../../core"),generateHapticFeedback_1=require("../../native/generateHapticFeedback"),react_1=require("react"),react_native_1=require("react-native"),NumericSpinnerContainer_1=require("./NumericSpinnerContainer"),NumericSpinnerIconButton_1=require("./NumericSpinnerIconButton"),NumericSpinnerNumberBox_1=require("./NumericSpinnerNumberBox"),useAccelerateInterval_1=require("./useAccelerateInterval"),useButtonLongPress_1=require("./useButtonLongPress"),useWiggleMotion_1=require("./useWiggleMotion"),AnimatedNumericSpinnerContainer=animated_1.Animated.createAnimatedComponent(NumericSpinnerContainer_1.NumericSpinnerContainer),AnimatedNumericSpinnerNumberBox=animated_1.Animated.createAnimatedComponent(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox),AnimatedNumericSpinnerMinusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton),AnimatedNumericSpinnerPlusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton),isNumberInRange=({min:t,max:n,num:e})=>!isNaN(e)&&e>=t&&e<=n;exports.NumericSpinner=(0,react_1.forwardRef)(function({disable:n,number:e=0,minNumber:a=0,maxNumber:s=100,onNumberChange:o,size:i,style:p,...k},S){const R=(0,core_1.useAdaptive)(),{play:u,style:V}=(0,useWiggleMotion_1.useWiggleMotion)(),g=isNumberInRange({max:s,min:a,num:e+1}),m=isNumberInRange({max:s,min:a,num:e-1}),y=(0,react_1.useCallback)(()=>{if(g){const r=e+1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,g,o,u]),E=(0,react_1.useCallback)(()=>{if(m){const r=e-1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,m,o,u]),h=useNumberTextAnimation(),{onPressStart:_,onPressEnd:L}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:E,onPressEnd:h.play}),{onPressStart:j,onPressEnd:M}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:y,onPressEnd:h.play}),c=(0,react_1.useRef)(!1),C=(0,useAccelerateInterval_1.useAccelerateInterval)(y,{startMs:400,interval:.8,minMs:50}),I=(0,useAccelerateInterval_1.useAccelerateInterval)(E,{startMs:400,interval:.8,minMs:50}),X=()=>{c.current!==!0&&(I.startInterval(),c.current=!0)},H=()=>{c.current!==!0&&(C.startInterval(),c.current=!0)},T=()=>{C.stopInterval(),I.stopInterval(),c.current=!1},b=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new animated_1.Animated.Value(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])).current,v=useContainerAnimation({size:i}),F=animated_1.Animated.event([{nativeEvent:{translationX:b}}],{useNativeDriver:!1}),G=r=>{switch(r.nativeEvent.state){case react_native_gesture_handler_1.State.BEGAN:{v.play(),animated_1.Animated.parallel([animated_1.Animated.timing(l,{toValue:50,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}case react_native_gesture_handler_1.State.END:case react_native_gesture_handler_1.State.FAILED:{v.reset(),animated_1.Animated.parallel([animated_1.Animated.spring(b,{toValue:0,useNativeDriver:!1}),animated_1.Animated.timing(l,{toValue:NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i],useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}}},[q,O]=(0,react_1.useState)(0),[f,$]=(0,react_1.useState)(0),[N,z]=(0,react_1.useState)(0),[x,J]=(0,react_1.useState)(0),P=b.interpolate({inputRange:[-N,x],outputRange:[-N,x],extrapolate:"clamp"});P.addListener(({value:r})=>{const K=-N;r===K?X():r===x?H():T()}),(0,react_1.useEffect)(()=>{l.setValue(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])},[l,i]);const d=useNumberBoxAnimation(),A=useLeftIconButtonAnimation(),D=useRightIconButtonAnimation(),W=useLeftIconButtonPlaceholderAnimation(),B=useRightIconButtonPlaceholderAnimation(),w=`${e}`;return n?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${e}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{u()},style:[{alignSelf:"flex-start"},p],...k,children:(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{ref:S,size:i,style:[{opacity:.3},V],pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton,{size:i}),(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox,{style:{borderRadius:8},size:i,"aria-label":w,color:h.style.color,children:e}),(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton,{size:i})]})}):(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{testID:"numeric-spinner",ref:S,onLayout:r=>$(r.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...v.style,transform:[...v.style.transform,...V.transform],position:"relative"},p],size:i,...k,children:[(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerMinusIconButton,{"aria-label":"\uBE7C\uAE30",accessibilityHint:m?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${a}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>z(r.nativeEvent.layout.width),onPress:E,onPressIn:()=>{_(),d.shrink(),A.shrink(),W.shrink()},onPressOut:()=>{L(),d.expand(),A.expand(),W.expand()},disabled:m===!1,style:{zIndex:1,alignSelf:"stretch",...A.style},color:A.style.color,size:i}),(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.PanGestureHandler,{onGestureEvent:F,onHandlerStateChange:G,children:(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerNumberBox,{onLayout:r=>{O(r.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:l,transform:[{translateX:P},...d.style.transform]},size:i,accessibilityRole:"text",accessibilityValue:{text:w},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:h.style.color,children:e})}),(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerPlusIconButton,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:g?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${s}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>J(r.nativeEvent.layout.width),onPress:y,onPressIn:()=>{j(),d.shrink(),D.shrink(),B.shrink()},onPressOut:()=>{M(),d.expand(),D.expand(),B.expand()},disabled:g===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:i}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...W.style}}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...B.style}})]})});const GapBySize={tiny:5,small:6,medium:7,large:8};function useContainerAnimation({size:t}){const n=(0,core_1.useAdaptive)(),e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=e.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),s=e.interpolate({inputRange:[0,100],outputRange:[n.grey100,n.grey200],extrapolate:"clamp"}),o=e.interpolate({inputRange:[0,100],outputRange:[NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[t],50],extrapolate:"clamp"}),i=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:100,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]),p=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]);return{play:i,reset:p,style:{backgroundColor:s,borderRadius:o,transform:[{scale:a}]}}}function useNumberBoxAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[t]),e=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3}).start()},[t]);return{shrink:n,expand:e,style:{transform:[{scale:t}]}}}function useLeftIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useRightIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.bounce.ease,duration:easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useLeftIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:-2,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useRightIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:2,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.quick.ease,duration:easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useNumberTextAnimation(){const t=(0,core_1.useAdaptive)(),n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=n.interpolate({inputRange:[0,1],outputRange:[t.grey800,t.blue500]});return{play:(0,react_1.useCallback)(()=>{n.setValue(0),animated_1.Animated.stagger(300,[animated_1.Animated.timing(n,{toValue:1,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.rapid.ease,duration:easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:easings_1.springEaseWithDuration.basic.ease,duration:easings_1.springEaseWithDuration.basic.duration*1e3})]).start()},[n]),style:{color:e}}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinner=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),animated_1=require("../../interactions/animated"),generateHapticFeedback_1=require("../../native/generateHapticFeedback"),NumericSpinnerContainer_1=require("./NumericSpinnerContainer"),NumericSpinnerIconButton_1=require("./NumericSpinnerIconButton"),NumericSpinnerNumberBox_1=require("./NumericSpinnerNumberBox"),useAccelerateInterval_1=require("./useAccelerateInterval"),useButtonLongPress_1=require("./useButtonLongPress"),useWiggleMotion_1=require("./useWiggleMotion"),AnimatedNumericSpinnerContainer=animated_1.Animated.createAnimatedComponent(NumericSpinnerContainer_1.NumericSpinnerContainer),AnimatedNumericSpinnerNumberBox=animated_1.Animated.createAnimatedComponent(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox),AnimatedNumericSpinnerMinusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton),AnimatedNumericSpinnerPlusIconButton=animated_1.Animated.createAnimatedComponent(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton),isNumberInRange=({min:t,max:n,num:e})=>!isNaN(e)&&e>=t&&e<=n;exports.NumericSpinner=(0,react_1.forwardRef)(function({disable:n,number:e=0,minNumber:a=0,maxNumber:s=100,onNumberChange:o,size:i,style:p,...k},S){const R=(0,core_1.useAdaptive)(),{play:u,style:V}=(0,useWiggleMotion_1.useWiggleMotion)(),g=isNumberInRange({max:s,min:a,num:e+1}),m=isNumberInRange({max:s,min:a,num:e-1}),y=(0,react_1.useCallback)(()=>{if(g){const r=e+1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,g,o,u]),E=(0,react_1.useCallback)(()=>{if(m){const r=e-1;(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickWeak"}),o?.(r);return}u()},[e,m,o,u]),h=useNumberTextAnimation(),{onPressStart:_,onPressEnd:L}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:E,onPressEnd:h.play}),{onPressStart:j,onPressEnd:M}=(0,useButtonLongPress_1.useButtonLongPress)({onPressing:y,onPressEnd:h.play}),c=(0,react_1.useRef)(!1),C=(0,useAccelerateInterval_1.useAccelerateInterval)(y,{startMs:400,interval:.8,minMs:50}),I=(0,useAccelerateInterval_1.useAccelerateInterval)(E,{startMs:400,interval:.8,minMs:50}),X=()=>{c.current!==!0&&(I.startInterval(),c.current=!0)},H=()=>{c.current!==!0&&(C.startInterval(),c.current=!0)},T=()=>{C.stopInterval(),I.stopInterval(),c.current=!1},b=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new animated_1.Animated.Value(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])).current,v=useContainerAnimation({size:i}),F=animated_1.Animated.event([{nativeEvent:{translationX:b}}],{useNativeDriver:!1}),G=r=>{switch(r.nativeEvent.state){case react_native_gesture_handler_1.State.BEGAN:{v.play(),animated_1.Animated.parallel([animated_1.Animated.timing(l,{toValue:50,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}case react_native_gesture_handler_1.State.END:case react_native_gesture_handler_1.State.FAILED:{v.reset(),animated_1.Animated.parallel([animated_1.Animated.spring(b,{toValue:0,useNativeDriver:!1}),animated_1.Animated.timing(l,{toValue:NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i],useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3})]).start();break}}},[q,O]=(0,react_1.useState)(0),[f,$]=(0,react_1.useState)(0),[N,z]=(0,react_1.useState)(0),[x,J]=(0,react_1.useState)(0),P=b.interpolate({inputRange:[-N,x],outputRange:[-N,x],extrapolate:"clamp"});P.addListener(({value:r})=>{const K=-N;r===K?X():r===x?H():T()}),(0,react_1.useEffect)(()=>{l.setValue(NumericSpinnerNumberBox_1.NumericSpinnerNumberBoxBorderRadiusBySize[i])},[l,i]);const d=useNumberBoxAnimation(),A=useLeftIconButtonAnimation(),D=useRightIconButtonAnimation(),W=useLeftIconButtonPlaceholderAnimation(),B=useRightIconButtonPlaceholderAnimation(),w=`${e}`;return n?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{"aria-disabled":!0,accessibilityRole:"button",accessibilityLabel:`${e}, \uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694`,testID:"numeric-spinner",onPress:()=>{u()},style:[{alignSelf:"flex-start"},p],...k,children:(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{ref:S,size:i,style:[{opacity:.3},V],pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerMinusIconButton,{size:i}),(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBox_1.NumericSpinnerNumberBox,{style:{borderRadius:8},size:i,"aria-label":w,color:h.style.color,children:e}),(0,jsx_runtime_1.jsx)(NumericSpinnerIconButton_1.NumericSpinnerPlusIconButton,{size:i})]})}):(0,jsx_runtime_1.jsxs)(AnimatedNumericSpinnerContainer,{testID:"numeric-spinner",ref:S,onLayout:r=>$(r.nativeEvent.layout.width),style:[{alignSelf:"flex-start"},{...v.style,transform:[...v.style.transform,...V.transform],position:"relative"},p],size:i,...k,children:[(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerMinusIconButton,{"aria-label":"\uBE7C\uAE30",accessibilityHint:m?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uAC10\uC18C\uD574\uC694":`${a}\uAC1C \uC774\uD558\uB85C \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>z(r.nativeEvent.layout.width),onPress:E,onPressIn:()=>{_(),d.shrink(),A.shrink(),W.shrink()},onPressOut:()=>{L(),d.expand(),A.expand(),W.expand()},disabled:m===!1,style:{zIndex:1,alignSelf:"stretch",...A.style},color:A.style.color,size:i}),(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.PanGestureHandler,{onGestureEvent:F,onHandlerStateChange:G,children:(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerNumberBox,{onLayout:r=>{O(r.nativeEvent.layout.width)},style:{zIndex:2,borderRadius:l,transform:[{translateX:P},...d.style.transform]},size:i,accessibilityRole:"text",accessibilityValue:{text:w},"aria-label":"\uD604\uC7AC \uAC12",accessibilityHint:"\uB450 \uBC88 \uD130\uCE58\uD558\uC5EC \uBCC0\uACBD\uD560 \uC218 \uC788\uC5B4\uC694",color:h.style.color,children:e})}),(0,jsx_runtime_1.jsx)(AnimatedNumericSpinnerPlusIconButton,{"aria-label":"\uB354\uD558\uAE30",accessibilityHint:g?"\uB450\uBC88 \uD130\uCE58\uD558\uBA74 \uC22B\uC790\uAC00 \uC99D\uAC00\uD574\uC694":`${s}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC5B4\uC694`,onLayout:r=>J(r.nativeEvent.layout.width),onPress:y,onPressIn:()=>{j(),d.shrink(),D.shrink(),B.shrink()},onPressOut:()=>{M(),d.expand(),D.expand(),B.expand()},disabled:g===!1,style:{zIndex:1,alignSelf:"stretch",...D.style},color:D.style.color,size:i}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,left:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...W.style}}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:{position:"absolute",top:0,right:0,bottom:0,pointerEvents:"none",borderRadius:NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[i],backgroundColor:R.greyOpacity100,width:Math.max(f-(f-q)/2+GapBySize[i],0),...B.style}})]})});const GapBySize={tiny:5,small:6,medium:7,large:8};function useContainerAnimation({size:t}){const n=(0,core_1.useAdaptive)(),e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=e.interpolate({inputRange:[0,100],outputRange:[1,.96],extrapolate:"clamp"}),s=e.interpolate({inputRange:[0,100],outputRange:[n.grey100,n.grey200],extrapolate:"clamp"}),o=e.interpolate({inputRange:[0,100],outputRange:[NumericSpinnerContainer_1.NumericSpinnerContainerBorderRadiusBySize[t],50],extrapolate:"clamp"}),i=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:100,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]),p=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[e]);return{play:i,reset:p,style:{backgroundColor:s,borderRadius:o,transform:[{scale:a}]}}}function useNumberBoxAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:.9,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}).start()},[t]),e=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.bounce.ease,duration:tds_easings_1.springEaseWithDuration.bounce.duration*1e3}).start()},[t]);return{shrink:n,expand:e,style:{transform:[{scale:t}]}}}function useLeftIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.bounce.ease,duration:tds_easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useRightIconButtonAnimation(){const t=(0,core_1.useAdaptive)(),[n,e]=(0,react_1.useState)(t.grey700),a=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,s=(0,react_1.useCallback)(()=>{animated_1.Animated.timing(a,{toValue:.9,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}).start(),e(t.grey900)},[t.grey900,a]),o=(0,react_1.useCallback)(()=>{animated_1.Animated.stagger(200,[animated_1.Animated.timing(a,{toValue:1.1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(a,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.bounce.ease,duration:tds_easings_1.springEaseWithDuration.bounce.duration*1e3})]).start(),e(t.grey700)},[t.grey700,a]);return{shrink:s,expand:o,style:{transform:[{scale:a}],color:n}}}function useLeftIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:-2,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useRightIconButtonPlaceholderAnimation(){const t=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,a=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:.92,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:2,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(e,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]),s=(0,react_1.useCallback)(()=>{animated_1.Animated.parallel([animated_1.Animated.timing(t,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.quick.ease,duration:tds_easings_1.springEaseWithDuration.quick.duration*1e3}),animated_1.Animated.timing(e,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3})]).start()},[e,t,n]);return{shrink:a,expand:s,style:{transform:[{scale:t},{translateX:n}],opacity:e}}}function useNumberTextAnimation(){const t=(0,core_1.useAdaptive)(),n=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,e=n.interpolate({inputRange:[0,1],outputRange:[t.grey800,t.blue500]});return{play:(0,react_1.useCallback)(()=>{n.setValue(0),animated_1.Animated.stagger(300,[animated_1.Animated.timing(n,{toValue:1,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.rapid.ease,duration:tds_easings_1.springEaseWithDuration.rapid.duration*1e3}),animated_1.Animated.timing(n,{toValue:0,useNativeDriver:!1,easing:tds_easings_1.springEaseWithDuration.basic.ease,duration:tds_easings_1.springEaseWithDuration.basic.duration*1e3})]).start()},[n]),style:{color:e}}}

package/dist/cjs/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/cjs/components/numeric-spinner/NumericSpinnerNumberBox.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinnerNumberBox=exports.NumericSpinnerNumberBoxBorderRadiusBySize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),animated_1=require("../../interactions/animated"),core_1=require("../../core"),paragraph_1=require("../paragraph"),react_1=require("react"),react_native_1=require("react-native"),AnimatedParagraphText=animated_1.Animated.createAnimatedComponent(paragraph_1.Text);exports.NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const NumericSpinnerNumberBoxImpl=(0,react_1.forwardRef)(function({size:e,style:n,children:a,color:s,...d},r){const{colorPreference:c}=(0,core_1.useColorPreference)(),p=c==="light"?colors_1.colors.inverseGrey900:colors_1.colors.inverseGrey300,i="semibold",o=paragraphTypographyBySize[e];return(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{ref:r,style:[styles.container,styles[e],{backgroundColor:p},n],...d,children:[(0,jsx_runtime_1.jsx)(AnimatedParagraphText,{ref:r,fontWeight:i,typography:o,style:{color:s},children:a}),(0,jsx_runtime_1.jsx)(paragraph_1.Text,{fontWeight:i,typography:o,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),styles=react_native_1.StyleSheet.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:colors_1.tds.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:exports.NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.large}}),paragraphTypographyBySize={tiny:"t7",small:"t6",medium:"t5",large:"t5"};class NumericSpinnerNumberBox extends react_1.Component{render(){return(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBoxImpl,{...this.props})}}exports.NumericSpinnerNumberBox=NumericSpinnerNumberBox;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NumericSpinnerNumberBox=exports.NumericSpinnerNumberBoxBorderRadiusBySize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),animated_1=require("../../interactions/animated"),paragraph_1=require("../paragraph"),AnimatedParagraphText=animated_1.Animated.createAnimatedComponent(paragraph_1.Text);exports.NumericSpinnerNumberBoxBorderRadiusBySize={tiny:6,small:8,medium:10,large:14};const NumericSpinnerNumberBoxImpl=(0,react_1.forwardRef)(function({size:e,style:n,children:a,color:s,...d},r){const{colorPreference:c}=(0,core_1.useColorPreference)(),p=c==="light"?tds_colors_1.colors.inverseGrey900:tds_colors_1.colors.inverseGrey300,i="semibold",o=paragraphTypographyBySize[e];return(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{ref:r,style:[styles.container,styles[e],{backgroundColor:p},n],...d,children:[(0,jsx_runtime_1.jsx)(AnimatedParagraphText,{ref:r,fontWeight:i,typography:o,style:{color:s},children:a}),(0,jsx_runtime_1.jsx)(paragraph_1.Text,{fontWeight:i,typography:o,style:{height:0,padding:0,margin:0,opacity:0},children:"000"})]})}),styles=react_native_1.StyleSheet.create({container:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:tds_colors_1.tds.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:exports.NumericSpinnerNumberBoxBorderRadiusBySize.tiny},small:{paddingVertical:5,paddingHorizontal:6,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.small},medium:{paddingVertical:8,paddingHorizontal:8,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.medium},large:{paddingVertical:12,paddingHorizontal:14,borderRadius:exports.NumericSpinnerNumberBoxBorderRadiusBySize.large}}),paragraphTypographyBySize={tiny:"t7",small:"t6",medium:"t5",large:"t5"};class NumericSpinnerNumberBox extends react_1.Component{render(){return(0,jsx_runtime_1.jsx)(NumericSpinnerNumberBoxImpl,{...this.props})}}exports.NumericSpinnerNumberBox=NumericSpinnerNumberBox;

package/dist/cjs/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/cjs/components/paragraph/ParagraphBadge/ParagraphBadge.js

@@ -1 +1 @@
-"use strict";var __importDefault=function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphBadge=ParagraphBadge;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../../core"),txt_1=require("../../txt"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("../ParagraphContext"),utils_1=require("../utils"),const_1=require("./const");function ParagraphBadge({children:o,type:a="blue",badgeStyle:l="fill",marginLeft:g=0,marginRight:n=0,typography:d,style:i,fontWeight:u="semiBold"}){core_1.useColorPreference;const{colorPreference:s}=(0,core_1.useColorPreference)(),{typography:t}=(0,core_1.useTypographyTheme)(),{typography:k}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),h=`${a}-${l}`,{backgroundColor:B,color:p}=getBadgeStyleByVariants(h,s),c=d??k,r=(0,react_1.useMemo)(()=>{const{fontSize:e}=t[c];return(0,const_1.isValidFontSize)(e)?{...const_1.badgeStyleMap[e],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[e].lineHeight+const_1.badgeStyleMap[e].paddingVertical*2,fontSize:e})}:(console.error(INVALID_FONTSIZE_ERROR),{...const_1.badgeStyleMap[15],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[15].lineHeight+const_1.badgeStyleMap[15].paddingVertical*2,fontSize:e})})},[c,t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{alignSelf:"flex-start"},i],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingHorizontal:r.paddingHorizontal,paddingVertical:r.paddingVertical,borderRadius:r.borderRadius,backgroundColor:B,marginLeft:g??r.margin,marginRight:n??r.margin,top:r.top},children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:u,color:p,style:{fontSize:r.fontSize,lineHeight:r.lineHeight},children:o})})})}const INVALID_FONTSIZE_ERROR="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)",polishedValues={blueBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#3182f6",.16),blueBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#4593fc",.16),tealBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#00818a",.16),tealBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#269da6",.16),greenBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#02a262",.16),greenBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#15c47e",.16),redBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#f44336",.16),redBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ef5350",.16),yellowBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#ffb331",.16),yellowBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ffd158",.16),elephantBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#4e5968",.16),elephantBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#c3c3c6",.16)};function getBadgeStyleByVariants(o,a){return{"red-fill":{light:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white}},"red-weak":{light:{backgroundColor:polishedValues.redBadgeBackgroundLight,color:colors_1.colors.red700},dark:{backgroundColor:polishedValues.redBadgeBackgroundDark,color:colors_1.colors.red400}},"green-fill":{light:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white}},"green-weak":{light:{backgroundColor:polishedValues.greenBadgeBackgroundLight,color:colors_1.colors.green700},dark:{backgroundColor:polishedValues.greenBadgeBackgroundDark,color:colors_1.colors.green400}},"blue-fill":{light:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white}},"blue-weak":{light:{backgroundColor:polishedValues.blueBadgeBackgroundLight,color:colors_1.colors.blue700},dark:{backgroundColor:polishedValues.blueBadgeBackgroundDark,color:colors_1.colors.blue400}},"yellow-fill":{light:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800},dark:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800}},"yellow-weak":{light:{backgroundColor:polishedValues.yellowBadgeBackgroundLight,color:colors_1.colors.yellow900},dark:{backgroundColor:polishedValues.yellowBadgeBackgroundDark,color:colors_1.colors.yellow700}},"teal-fill":{light:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white}},"teal-weak":{light:{backgroundColor:polishedValues.tealBadgeBackgroundLight,color:colors_1.colors.teal700},dark:{backgroundColor:polishedValues.tealBadgeBackgroundDark,color:colors_1.colors.teal400}},"elephant-fill":{light:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white}},"elephant-weak":{light:{backgroundColor:polishedValues.elephantBadgeBackgroundLight,color:colors_1.colors.grey700},dark:{backgroundColor:polishedValues.elephantBadgeBackgroundDark,color:colors_1.colors.inverseGrey700}}}[o][a]}
+"use strict";var __importDefault=function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphBadge=ParagraphBadge;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../core"),txt_1=require("../../txt"),ParagraphContext_1=require("../ParagraphContext"),utils_1=require("../utils"),const_1=require("./const");function ParagraphBadge({children:o,type:a="blue",badgeStyle:l="fill",marginLeft:g=0,marginRight:d=0,typography:n,style:i,fontWeight:u="semiBold"}){core_1.useColorPreference;const{colorPreference:s}=(0,core_1.useColorPreference)(),{typography:t}=(0,core_1.useTypographyTheme)(),{typography:k}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),h=`${a}-${l}`,{backgroundColor:B,color:p}=getBadgeStyleByVariants(h,s),c=n??k,r=(0,react_1.useMemo)(()=>{const{fontSize:e}=t[c];return(0,const_1.isValidFontSize)(e)?{...const_1.badgeStyleMap[e],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[e].lineHeight+const_1.badgeStyleMap[e].paddingVertical*2,fontSize:e})}:(console.error(INVALID_FONTSIZE_ERROR),{...const_1.badgeStyleMap[15],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[15].lineHeight+const_1.badgeStyleMap[15].paddingVertical*2,fontSize:e})})},[c,t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{alignSelf:"flex-start"},i],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingHorizontal:r.paddingHorizontal,paddingVertical:r.paddingVertical,borderRadius:r.borderRadius,backgroundColor:B,marginLeft:g??r.margin,marginRight:d??r.margin,top:r.top},children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:u,color:p,style:{fontSize:r.fontSize,lineHeight:r.lineHeight},children:o})})})}const INVALID_FONTSIZE_ERROR="ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)",polishedValues={blueBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#3182f6",.16),blueBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#4593fc",.16),tealBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#00818a",.16),tealBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#269da6",.16),greenBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#02a262",.16),greenBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#15c47e",.16),redBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#f44336",.16),redBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ef5350",.16),yellowBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#ffb331",.16),yellowBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#ffd158",.16),elephantBadgeBackgroundLight:(0,hex_to_rgba_1.default)("#4e5968",.16),elephantBadgeBackgroundDark:(0,hex_to_rgba_1.default)("#c3c3c6",.16)};function getBadgeStyleByVariants(o,a){return{"red-fill":{light:{backgroundColor:tds_colors_1.colors.red500,color:tds_colors_1.colors.white},dark:{backgroundColor:tds_colors_1.colors.red500,color:tds_colors_1.colors.white}},"red-weak":{light:{backgroundColor:polishedValues.redBadgeBackgroundLight,color:tds_colors_1.colors.red700},dark:{backgroundColor:polishedValues.redBadgeBackgroundDark,color:tds_colors_1.colors.red400}},"green-fill":{light:{backgroundColor:tds_colors_1.colors.green600,color:tds_colors_1.colors.white},dark:{backgroundColor:tds_colors_1.colors.green600,color:tds_colors_1.colors.white}},"green-weak":{light:{backgroundColor:polishedValues.greenBadgeBackgroundLight,color:tds_colors_1.colors.green700},dark:{backgroundColor:polishedValues.greenBadgeBackgroundDark,color:tds_colors_1.colors.green400}},"blue-fill":{light:{backgroundColor:tds_colors_1.colors.blue500,color:tds_colors_1.colors.white},dark:{backgroundColor:tds_colors_1.colors.blue500,color:tds_colors_1.colors.white}},"blue-weak":{light:{backgroundColor:polishedValues.blueBadgeBackgroundLight,color:tds_colors_1.colors.blue700},dark:{backgroundColor:polishedValues.blueBadgeBackgroundDark,color:tds_colors_1.colors.blue400}},"yellow-fill":{light:{backgroundColor:tds_colors_1.colors.yellow500,color:tds_colors_1.colors.grey800},dark:{backgroundColor:tds_colors_1.colors.yellow500,color:tds_colors_1.colors.grey800}},"yellow-weak":{light:{backgroundColor:polishedValues.yellowBadgeBackgroundLight,color:tds_colors_1.colors.yellow900},dark:{backgroundColor:polishedValues.yellowBadgeBackgroundDark,color:tds_colors_1.colors.yellow700}},"teal-fill":{light:{backgroundColor:tds_colors_1.colors.teal600,color:tds_colors_1.colors.white},dark:{backgroundColor:tds_colors_1.colors.teal600,color:tds_colors_1.colors.white}},"teal-weak":{light:{backgroundColor:polishedValues.tealBadgeBackgroundLight,color:tds_colors_1.colors.teal700},dark:{backgroundColor:polishedValues.tealBadgeBackgroundDark,color:tds_colors_1.colors.teal400}},"elephant-fill":{light:{backgroundColor:tds_colors_1.colors.grey700,color:tds_colors_1.colors.white},dark:{backgroundColor:tds_colors_1.colors.grey700,color:tds_colors_1.colors.white}},"elephant-weak":{light:{backgroundColor:polishedValues.elephantBadgeBackgroundLight,color:tds_colors_1.colors.grey700},dark:{backgroundColor:polishedValues.elephantBadgeBackgroundDark,color:tds_colors_1.colors.inverseGrey700}}}[o][a]}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphCode=ParagraphCode;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native"),ParagraphContext_1=require("./ParagraphContext"),ParagraphText_1=require("./ParagraphText"),utils_1=require("./utils");function ParagraphCode({children:e}){const t=(0,core_1.useAdaptive)(),{colorPreference:o}=(0,core_1.useColorPreference)(),{typography:s}=(0,core_1.useTypographyTheme)(),{typography:n}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),{fontSize:r,lineHeight:a}=s[n],i=(0,react_1.useMemo)(()=>({fontSize:r,lineHeight:(0,ParagraphText_1.getLineHeightByFontSize)(r),color:o==="dark"?colors_1.colors.white:colors_1.colors.grey700}),[r,o]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:getBorderRadiusByFontSize(r),top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:a+BORDER_WIDTH*2,fontSize:r})},styles.code],children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:"regular",style:i,children:e})})})}const BORDER_WIDTH=1,styles=react_native_1.StyleSheet.create({code:{paddingHorizontal:4,borderWidth:BORDER_WIDTH}}),getBorderRadiusByFontSize=e=>e<19?4:e<23?5:e<29?6:e<41?8:10;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ParagraphCode=ParagraphCode;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),txt_1=require("../txt"),ParagraphContext_1=require("./ParagraphContext"),ParagraphText_1=require("./ParagraphText"),utils_1=require("./utils");function ParagraphCode({children:e}){const t=(0,core_1.useAdaptive)(),{colorPreference:o}=(0,core_1.useColorPreference)(),{typography:s}=(0,core_1.useTypographyTheme)(),{typography:n}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),{fontSize:r,lineHeight:a}=s[n],c=(0,react_1.useMemo)(()=>({fontSize:r,lineHeight:(0,ParagraphText_1.getLineHeightByFontSize)(r),color:o==="dark"?tds_colors_1.colors.white:tds_colors_1.colors.grey700}),[r,o]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{backgroundColor:t.opacity100,borderColor:t.opacity200,borderRadius:getBorderRadiusByFontSize(r),top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:a+BORDER_WIDTH*2,fontSize:r})},styles.code],children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:"regular",style:c,children:e})})})}const BORDER_WIDTH=1,styles=react_native_1.StyleSheet.create({code:{paddingHorizontal:4,borderWidth:BORDER_WIDTH}}),getBorderRadiusByFontSize=e=>e<19?4:e<23?5:e<29?6:e<41?8:10;

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(n,e,i,t){t===void 0&&(t=i);var r=Object.getOwnPropertyDescriptor(e,i);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(n,t,r)}:function(n,e,i,t){t===void 0&&(t=i),n[t]=e[i]},__setModuleDefault=Object.create?function(n,e){Object.defineProperty(n,"default",{enumerable:!0,value:e})}:function(n,e){n.default=e},__importStar=function(){var n=function(e){return n=Object.getOwnPropertyNames||function(i){var t=[];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(t[t.length]=r);return t},n(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var t=n(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(i,e,t[r]);return __setModuleDefault(i,e),i}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native");function ProgressBar({progress:n,size:e,color:i=colors_1.colors.blue500,withAnimation:t,style:r,...u}){const o=(0,core_1.useAdaptive)(),a=(0,react_1.useRef)(new react_native_1.Animated.Value(n)).current,c=a.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(a,{toValue:n,duration:t?500:0,easing:react_native_1.Easing.ease,useNativeDriver:!0}).start()},[n]),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{height:heightMap[e],backgroundColor:o.grey100,borderRadius:heightMap[e],overflow:"hidden"},r],role:"progressbar",...u,children:(0,jsx_runtime_1.jsx)(react_native_svg_1.default,{width:"100%",height:heightMap[e],children:(0,jsx_runtime_1.jsx)(AnimatedRect,{fill:i,width:c,height:heightMap[e],rx:heightMap[e]/2,ry:heightMap[e]/2})})})}const heightMap={light:2,normal:5,bold:8},AnimatedRect=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Rect);exports.default=ProgressBar;
+"use strict";var __createBinding=Object.create?function(n,e,i,t){t===void 0&&(t=i);var r=Object.getOwnPropertyDescriptor(e,i);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(n,t,r)}:function(n,e,i,t){t===void 0&&(t=i),n[t]=e[i]},__setModuleDefault=Object.create?function(n,e){Object.defineProperty(n,"default",{enumerable:!0,value:e})}:function(n,e){n.default=e},__importStar=function(){var n=function(e){return n=Object.getOwnPropertyNames||function(i){var t=[];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(t[t.length]=r);return t},n(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var t=n(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(i,e,t[r]);return __setModuleDefault(i,e),i}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core");function ProgressBar({progress:n,size:e,color:i=tds_colors_1.colors.blue500,withAnimation:t,style:r,...u}){const o=(0,core_1.useAdaptive)(),a=(0,react_1.useRef)(new react_native_1.Animated.Value(n)).current,c=a.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(a,{toValue:n,duration:t?500:0,easing:react_native_1.Easing.ease,useNativeDriver:!0}).start()},[n]),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{height:heightMap[e],backgroundColor:o.grey100,borderRadius:heightMap[e],overflow:"hidden"},r],role:"progressbar",...u,children:(0,jsx_runtime_1.jsx)(react_native_svg_1.default,{width:"100%",height:heightMap[e],children:(0,jsx_runtime_1.jsx)(AnimatedRect,{fill:i,width:c,height:heightMap[e],rx:heightMap[e]/2,ry:heightMap[e]/2})})})}const heightMap={light:2,normal:5,bold:8},AnimatedRect=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Rect);exports.default=ProgressBar;

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(t,e,o,r){r===void 0&&(r=o);var n=Object.getOwnPropertyDescriptor(e,o);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[o]}}),Object.defineProperty(t,r,n)}:function(t,e,o,r){r===void 0&&(r=o),t[r]=e[o]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(o){var r=[];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(r[r.length]=n);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null)for(var r=t(e),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(o,e,r[n]);return __setModuleDefault(o,e),o}}(),__importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Radio=void 0,exports.RadioInput=RadioInput;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),react_1=__importStar(require("react")),react_hook_form_1=require("react-hook-form"),react_native_1=require("react-native"),RadioOption_1=__importDefault(require("./RadioOption")),defaultShadowStyle={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},TRANSITION_MULTIPLIER=1,Radio=({value:t,children:e,disabled:o=!1,onChange:r,horizontalMargin:n=0})=>{const[i,s]=(0,react_1.useState)(0),u=react_1.default.Children.map(e,a=>a.props),p=u.length,c=i/p,d=u.findIndex(a=>a.value===t),f=(0,react_1.useRef)(!0),l=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=react_1.default.useCallback(a=>{r(a)},[r]),_=(0,react_1.useCallback)(a=>{react_native_1.Animated.spring(l,{toValue:a,useNativeDriver:!0,...DEFAULT_SPRING_CONFIG}).start()},[l]);(0,react_1.useEffect)(()=>{if(i===0)return;const a=d*(c*TRANSITION_MULTIPLIER);f.current===!0?(l.setValue(a),f.current=!1):_(a)},[d,c]);const g=(0,core_1.useAdaptive)(),{colorPreference:v}=(0,core_1.useColorPreference)();return(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[styles.defaultSegmentedControlWrapper,{backgroundColor:g.grey100,marginHorizontal:n}],onLayout:a=>{s(a.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.movingSegmentStyle,defaultShadowStyle,react_native_1.StyleSheet.absoluteFill,{backgroundColor:v==="light"?colors_1.colors.inverseGrey900:colors_1.colors.inverseGrey300,width:i/u.length-8},{transform:[{translateX:l}]}]}),react_1.default.Children.map(e,a=>react_1.default.cloneElement(a,{checked:a.props.value===t,disabled:a.props.disabled??o,onPress:h}))]})};exports.Radio=Radio;const styles=react_native_1.StyleSheet.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});function RadioInput({controlerProps:t,control:e,name:o,children:r,...n}){const{field:i}=(0,react_hook_form_1.useController)({control:e,name:o,...t});return(0,jsx_runtime_1.jsx)(Radio,{horizontalMargin:n.horizontalMargin,value:i.value,onChange:s=>{i.onChange(s),n.onChange?.(s)},children:r})}Radio.Option=RadioOption_1.default;
+"use strict";var __createBinding=Object.create?function(t,e,o,r){r===void 0&&(r=o);var n=Object.getOwnPropertyDescriptor(e,o);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[o]}}),Object.defineProperty(t,r,n)}:function(t,e,o,r){r===void 0&&(r=o),t[r]=e[o]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(o){var r=[];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(r[r.length]=n);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null)for(var r=t(e),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(o,e,r[n]);return __setModuleDefault(o,e),o}}(),__importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Radio=void 0,exports.RadioInput=RadioInput;const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),react_1=__importStar(require("react")),react_hook_form_1=require("react-hook-form"),react_native_1=require("react-native"),core_1=require("../../core"),RadioOption_1=__importDefault(require("./RadioOption")),defaultShadowStyle={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},TRANSITION_MULTIPLIER=1,Radio=({value:t,children:e,disabled:o=!1,onChange:r,horizontalMargin:n=0})=>{const[i,s]=(0,react_1.useState)(0),u=react_1.default.Children.map(e,a=>a.props),p=u.length,c=i/p,d=u.findIndex(a=>a.value===t),f=(0,react_1.useRef)(!0),l=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=react_1.default.useCallback(a=>{r(a)},[r]),_=(0,react_1.useCallback)(a=>{react_native_1.Animated.spring(l,{toValue:a,useNativeDriver:!0,...DEFAULT_SPRING_CONFIG}).start()},[l]);(0,react_1.useEffect)(()=>{if(i===0)return;const a=d*(c*TRANSITION_MULTIPLIER);f.current===!0?(l.setValue(a),f.current=!1):_(a)},[d,c]);const g=(0,core_1.useAdaptive)(),{colorPreference:v}=(0,core_1.useColorPreference)();return(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[styles.defaultSegmentedControlWrapper,{backgroundColor:g.grey100,marginHorizontal:n}],onLayout:a=>{s(a.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.movingSegmentStyle,defaultShadowStyle,react_native_1.StyleSheet.absoluteFill,{backgroundColor:v==="light"?tds_colors_1.colors.inverseGrey900:tds_colors_1.colors.inverseGrey300,width:i/u.length-8},{transform:[{translateX:l}]}]}),react_1.default.Children.map(e,a=>react_1.default.cloneElement(a,{checked:a.props.value===t,disabled:a.props.disabled??o,onPress:h}))]})};exports.Radio=Radio;const styles=react_native_1.StyleSheet.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});function RadioInput({controlerProps:t,control:e,name:o,children:r,...n}){const{field:i}=(0,react_hook_form_1.useController)({control:e,name:o,...t});return(0,jsx_runtime_1.jsx)(Radio,{horizontalMargin:n.horizontalMargin,value:i.value,onChange:s=>{i.onChange(s),n.onChange?.(s)},children:r})}Radio.Option=RadioOption_1.default;

package/dist/cjs/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/cjs/components/rating/EditableRating.js

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

package/dist/cjs/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/cjs/components/rating/ReadOnlyRating.js

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Indicator=Indicator;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../../core"),AlignmentContext_1=require("../../contexts/AlignmentContext"),IndicatorContext_1=require("../../contexts/IndicatorContext"),RadioContext_1=require("../../contexts/RadioContext"),useIndicatorBackground_1=require("../../hooks/useIndicatorBackground"),useIndicatorStyle_1=require("./useIndicatorStyle");function Indicator({style:s,children:a}){const{indicatorX:c,setIndicatorX:n,indicatorWidth:u,setIndicatorWidth:r}=(0,react_1.useContext)(IndicatorContext_1.IndicatorContext),{selectedElementLayout:t}=(0,react_1.useContext)(RadioContext_1.RadioContext),{indicatorStyle:d}=(0,useIndicatorStyle_1.useIndicatorStyle)(),{colorPreference:l}=(0,core_1.useColorPreference)(),{alignment:g}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),x=(0,useIndicatorBackground_1.useIndicatorBackground)(),i=(0,react_1.useRef)(!0),o=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=e.interpolate({inputRange:[0,1],outputRange:[c,t?.x??0]}),f=e.interpolate({inputRange:[0,1],outputRange:[u,t?.width??0]});(0,react_1.useEffect)(()=>{t!=null&&(i.current===!0?(r(t.width),n(t.x),i.current=!1,react_native_1.Animated.spring(o,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick}).start()):(e.setValue(0),react_native_1.Animated.spring(e,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick}).start(()=>{n(t.x),r(t.width)})))},[t,o,e,r,n]);const p={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:x,width:f,opacity:o,transform:[{translateX:h}]};return(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[d,p,{shadowColor:l==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},s],children:a})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Indicator=Indicator;const jsx_runtime_1=require("react/jsx-runtime"),tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../../core"),AlignmentContext_1=require("../../contexts/AlignmentContext"),IndicatorContext_1=require("../../contexts/IndicatorContext"),RadioContext_1=require("../../contexts/RadioContext"),useIndicatorBackground_1=require("../../hooks/useIndicatorBackground"),useIndicatorStyle_1=require("./useIndicatorStyle");function Indicator({style:s,children:a}){const{indicatorX:c,setIndicatorX:n,indicatorWidth:d,setIndicatorWidth:r}=(0,react_1.useContext)(IndicatorContext_1.IndicatorContext),{selectedElementLayout:t}=(0,react_1.useContext)(RadioContext_1.RadioContext),{indicatorStyle:u}=(0,useIndicatorStyle_1.useIndicatorStyle)(),{colorPreference:l}=(0,core_1.useColorPreference)(),{alignment:g}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),x=(0,useIndicatorBackground_1.useIndicatorBackground)(),i=(0,react_1.useRef)(!0),o=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=e.interpolate({inputRange:[0,1],outputRange:[c,t?.x??0]}),f=e.interpolate({inputRange:[0,1],outputRange:[d,t?.width??0]});(0,react_1.useEffect)(()=>{t!=null&&(i.current===!0?(r(t.width),n(t.x),i.current=!1,react_native_1.Animated.spring(o,{toValue:1,useNativeDriver:!1,...tds_easings_1.spring.quick}).start()):(e.setValue(0),react_native_1.Animated.spring(e,{toValue:1,useNativeDriver:!1,...tds_easings_1.spring.quick}).start(()=>{n(t.x),r(t.width)})))},[t,o,e,r,n]);const p={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:x,width:f,opacity:o,transform:[{translateX:h}]};return(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[u,p,{shadowColor:l==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},s],children:a})}

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(t,e,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(e,n);(!i||("get"in i?!e.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,i)}:function(t,e,n,r){r===void 0&&(r=n),t[r]=e[n]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r=t(e),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,e,r[i]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.LeftEdgeGradient=LeftEdgeGradient,exports.RightEdgeGradient=RightEdgeGradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../../../core"),react_1=require("react"),react_native_1=require("react-native"),spring_1=require("../../constants/spring"),LEFT_GRADIENT_ID="segmented-left-gradient";function useFadeAnimation(){const t=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,e=(0,react_1.useCallback)(()=>{react_native_1.Animated.spring(t,{toValue:1,useNativeDriver:!0,...spring_1.SPRING_OPTION}).start()},[t]),n=(0,react_1.useCallback)(()=>{react_native_1.Animated.spring(t,{toValue:0,useNativeDriver:!0,...spring_1.SPRING_OPTION}).start()},[t]);return{fadeIn:e,fadeOut:n,style:{opacity:t}}}function LeftEdgeGradient({style:t,exiting:e,...n}){const r=(0,core_1.useAdaptive)(),{colorPreference:i}=(0,core_1.useColorPreference)(),{fadeIn:s,fadeOut:o,style:a}=useFadeAnimation();return(0,react_1.useEffect)(()=>{e?s():o()},[e,s,o]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[gradientStyleBase,leftGradientStyle,t,a],...n,children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:"100%",height:"100%",pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:LEFT_GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:r.grey100}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:i==="light"?colors_1.colors.grey100:colors_1.colors.inverseGrey100,stopOpacity:0})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${LEFT_GRADIENT_ID})`})]})})}function RightEdgeGradient({style:t,exiting:e,...n}){const r=(0,core_1.useAdaptive)(),{colorPreference:i}=(0,core_1.useColorPreference)(),{fadeIn:s,fadeOut:o,style:a}=useFadeAnimation();return(0,react_1.useEffect)(()=>{e?s():o()},[e,s,o]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[gradientStyleBase,rightGradationStyle,t,a],...n,children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:"100%",height:"100%",pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:LEFT_GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:i==="light"?colors_1.colors.grey100:colors_1.colors.inverseGrey100,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:r.grey100})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${LEFT_GRADIENT_ID})`})]})})}const gradientStyleBase={position:"absolute",width:28,height:"100%",top:0,bottom:0,overflow:"hidden",zIndex:1},leftGradientStyle={left:0,borderTopLeftRadius:12,borderBottomLeftRadius:12},rightGradationStyle={right:0,borderTopRightRadius:12,borderBottomRightRadius:12};
+"use strict";var __createBinding=Object.create?function(t,e,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(e,n);(!i||("get"in i?!e.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,i)}:function(t,e,n,r){r===void 0&&(r=n),t[r]=e[n]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r=t(e),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,e,r[i]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.LeftEdgeGradient=LeftEdgeGradient,exports.RightEdgeGradient=RightEdgeGradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../../core"),spring_1=require("../../constants/spring"),LEFT_GRADIENT_ID="segmented-left-gradient";function useFadeAnimation(){const t=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,e=(0,react_1.useCallback)(()=>{react_native_1.Animated.spring(t,{toValue:1,useNativeDriver:!0,...spring_1.SPRING_OPTION}).start()},[t]),n=(0,react_1.useCallback)(()=>{react_native_1.Animated.spring(t,{toValue:0,useNativeDriver:!0,...spring_1.SPRING_OPTION}).start()},[t]);return{fadeIn:e,fadeOut:n,style:{opacity:t}}}function LeftEdgeGradient({style:t,exiting:e,...n}){const r=(0,core_1.useAdaptive)(),{colorPreference:i}=(0,core_1.useColorPreference)(),{fadeIn:s,fadeOut:o,style:a}=useFadeAnimation();return(0,react_1.useEffect)(()=>{e?s():o()},[e,s,o]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[gradientStyleBase,leftGradientStyle,t,a],...n,children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:"100%",height:"100%",pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:LEFT_GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:r.grey100}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:i==="light"?tds_colors_1.colors.grey100:tds_colors_1.colors.inverseGrey100,stopOpacity:0})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${LEFT_GRADIENT_ID})`})]})})}function RightEdgeGradient({style:t,exiting:e,...n}){const r=(0,core_1.useAdaptive)(),{colorPreference:i}=(0,core_1.useColorPreference)(),{fadeIn:s,fadeOut:o,style:a}=useFadeAnimation();return(0,react_1.useEffect)(()=>{e?s():o()},[e,s,o]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[gradientStyleBase,rightGradationStyle,t,a],...n,children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:"100%",height:"100%",pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:LEFT_GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:i==="light"?tds_colors_1.colors.grey100:tds_colors_1.colors.inverseGrey100,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:r.grey100})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${LEFT_GRADIENT_ID})`})]})})}const gradientStyleBase={position:"absolute",width:28,height:"100%",top:0,bottom:0,overflow:"hidden",zIndex:1},leftGradientStyle={left:0,borderTopLeftRadius:12,borderBottomLeftRadius:12},rightGradationStyle={right:0,borderTopRightRadius:12,borderBottomRightRadius:12};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useIndicatorBackground=useIndicatorBackground;const colors_1=require("@toss-design-system/colors"),core_1=require("../../../core");function useIndicatorBackground(){const{colorPreference:e}=(0,core_1.useColorPreference)();return e==="light"?colors_1.colors.white:colors_1.colors.inverseGrey300}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useIndicatorBackground=useIndicatorBackground;const tds_colors_1=require("@toss/tds-colors"),core_1=require("../../../core");function useIndicatorBackground(){const{colorPreference:e}=(0,core_1.useColorPreference)();return e==="light"?tds_colors_1.colors.white:tds_colors_1.colors.inverseGrey300}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.shadow=void 0;const colors_1=require("@toss-design-system/colors"),SHADOW_CONFIG={tiny:{offsetY:1,radius:3,lightColor:colors_1.colors.greyOpacity200,darkColor:colors_1.colors.greyOpacity900},weak:{offsetY:2,radius:30,lightColor:colors_1.colors.greyOpacity200,darkColor:colors_1.colors.greyOpacity900},medium:{offsetY:16,radius:60,lightColor:colors_1.colors.greyOpacity300,darkColor:colors_1.colors.greyOpacity900}},generateShadowToken=({offsetY:o,radius:r,lightColor:e,darkColor:s})=>t=>({offset:{x:0,y:t==="up"?-o:o},lightColor:e,darkColor:s,radius:r,opacity:1});exports.shadow={tiny:generateShadowToken(SHADOW_CONFIG.tiny),weak:generateShadowToken(SHADOW_CONFIG.weak),medium:generateShadowToken(SHADOW_CONFIG.medium)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.shadow=void 0;const tds_colors_1=require("@toss/tds-colors"),SHADOW_CONFIG={tiny:{offsetY:1,radius:3,lightColor:tds_colors_1.colors.greyOpacity200,darkColor:tds_colors_1.colors.greyOpacity900},weak:{offsetY:2,radius:30,lightColor:tds_colors_1.colors.greyOpacity200,darkColor:tds_colors_1.colors.greyOpacity900},medium:{offsetY:16,radius:60,lightColor:tds_colors_1.colors.greyOpacity300,darkColor:tds_colors_1.colors.greyOpacity900}},generateShadowToken=({offsetY:o,radius:r,lightColor:e,darkColor:t})=>s=>({offset:{x:0,y:s==="up"?-o:o},lightColor:e,darkColor:t,radius:r,opacity:1});exports.shadow={tiny:generateShadowToken(SHADOW_CONFIG.tiny),weak:generateShadowToken(SHADOW_CONFIG.weak),medium:generateShadowToken(SHADOW_CONFIG.medium)};

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(i,e,r,t){t===void 0&&(t=r);var n=Object.getOwnPropertyDescriptor(e,r);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(i,t,n)}:function(i,e,r,t){t===void 0&&(t=r),i[t]=e[r]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(r){var t=[];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[t.length]=n);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var t=i(e),n=0;n<t.length;n++)t[n]!=="default"&&__createBinding(r,e,t[n]);return __setModuleDefault(r,e),r}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native");function AnimateSkeleton({children:i,delay:e,withGradient:r,withShimmer:t}){const n=(0,react_1.useRef)(new react_native_1.Animated.Value(e===500?0:1)).current,a=(0,react_1.useRef)(new react_native_1.Animated.Value(t?.2:1)).current;return(0,react_1.useEffect)(()=>{const s=react_native_1.Animated.sequence([react_native_1.Animated.delay(e),react_native_1.Animated.timing(n,{toValue:1,duration:100,useNativeDriver:!0})]),o=t?react_native_1.Animated.sequence([react_native_1.Animated.delay(e),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(a,{toValue:1,duration:650,useNativeDriver:!0}),react_native_1.Animated.timing(a,{toValue:.2,duration:650,useNativeDriver:!0})]))]):emptyAnimation;react_native_1.Animated.parallel([s,o]).start()},[]),(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:{opacity:n},children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:{opacity:a},children:i}),r?(0,jsx_runtime_1.jsx)(GradientOverlay,{}):null]})}function GradientOverlay(){const e=(0,core_1.useAdaptive)().background??colors_1.colors.background;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,gradientTransform:"rotate(90)",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"5%",stopColor:e,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"95%",stopColor:e})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${GRADIENT_ID})`})]})}const emptyAnimation=react_native_1.Animated.delay(0),GRADIENT_ID="tds-rn-animate-skeleton-gradient";exports.default=AnimateSkeleton;
+"use strict";var __createBinding=Object.create?function(i,e,r,t){t===void 0&&(t=r);var n=Object.getOwnPropertyDescriptor(e,r);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(i,t,n)}:function(i,e,r,t){t===void 0&&(t=r),i[t]=e[r]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(r){var t=[];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[t.length]=n);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var t=i(e),n=0;n<t.length;n++)t[n]!=="default"&&__createBinding(r,e,t[n]);return __setModuleDefault(r,e),r}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core");function AnimateSkeleton({children:i,delay:e,withGradient:r,withShimmer:t}){const n=(0,react_1.useRef)(new react_native_1.Animated.Value(e===500?0:1)).current,a=(0,react_1.useRef)(new react_native_1.Animated.Value(t?.2:1)).current;return(0,react_1.useEffect)(()=>{const s=react_native_1.Animated.sequence([react_native_1.Animated.delay(e),react_native_1.Animated.timing(n,{toValue:1,duration:100,useNativeDriver:!0})]),o=t?react_native_1.Animated.sequence([react_native_1.Animated.delay(e),react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(a,{toValue:1,duration:650,useNativeDriver:!0}),react_native_1.Animated.timing(a,{toValue:.2,duration:650,useNativeDriver:!0})]))]):emptyAnimation;react_native_1.Animated.parallel([s,o]).start()},[]),(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:{opacity:n},children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:{opacity:a},children:i}),r?(0,jsx_runtime_1.jsx)(GradientOverlay,{}):null]})}function GradientOverlay(){const e=(0,core_1.useAdaptive)().background??tds_colors_1.colors.background;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,gradientTransform:"rotate(90)",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"5%",stopColor:e,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"95%",stopColor:e})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${GRADIENT_ID})`})]})}const emptyAnimation=react_native_1.Animated.delay(0),GRADIENT_ID="tds-rn-animate-skeleton-gradient";exports.default=AnimateSkeleton;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.styles=void 0;const colors_1=require("@toss-design-system/colors"),react_native_1=require("react-native"),SLIDER_HEIGHT=40,TRACK_HEIGHT=5,SLIDER_THUMB_RADIUS=18,SLIDER_THUMB_WIDTH=SLIDER_THUMB_RADIUS*2,TRACK_TOP=(SLIDER_HEIGHT-TRACK_HEIGHT)/2;exports.styles=react_native_1.StyleSheet.create({slider:{position:"relative",height:SLIDER_HEIGHT},track:{position:"absolute",top:TRACK_TOP,right:0,left:0,height:TRACK_HEIGHT,backgroundColor:colors_1.colors.grey200,borderRadius:TRACK_HEIGHT/2,overflow:"hidden"},progress:{position:"absolute",height:"100%",width:"100%",left:"-100%"},thumb:{position:"absolute",top:2,width:SLIDER_THUMB_WIDTH,height:SLIDER_THUMB_WIDTH,borderRadius:SLIDER_THUMB_RADIUS,backgroundColor:colors_1.colors.white,borderColor:colors_1.colors.grey400,borderWidth:1}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.styles=void 0;const tds_colors_1=require("@toss/tds-colors"),react_native_1=require("react-native"),SLIDER_HEIGHT=40,TRACK_HEIGHT=5,SLIDER_THUMB_RADIUS=18,SLIDER_THUMB_WIDTH=SLIDER_THUMB_RADIUS*2,TRACK_TOP=(SLIDER_HEIGHT-TRACK_HEIGHT)/2;exports.styles=react_native_1.StyleSheet.create({slider:{position:"relative",height:SLIDER_HEIGHT},track:{position:"absolute",top:TRACK_TOP,right:0,left:0,height:TRACK_HEIGHT,backgroundColor:tds_colors_1.colors.grey200,borderRadius:TRACK_HEIGHT/2,overflow:"hidden"},progress:{position:"absolute",height:"100%",width:"100%",left:"-100%"},thumb:{position:"absolute",top:2,width:SLIDER_THUMB_WIDTH,height:SLIDER_THUMB_WIDTH,borderRadius:SLIDER_THUMB_RADIUS,backgroundColor:tds_colors_1.colors.white,borderColor:tds_colors_1.colors.grey400,borderWidth:1}});

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),animation_1=require("../../interactions/animation"),pressable_effect_1=require("../../interactions/pressable-effect"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),useSwitchAnimation_1=require("./useSwitchAnimation");function Switch({checked:r,defaultChecked:c=!1,disabled:e,style:a,onPress:n,onCheckedChange:i,accessibilityState:l,...u}){const[t,o]=(0,utils_1.useControlled)({controlledValue:r,defaultValue:c}),{reduceMotionEnabled:f}=(0,utils_1.useAccessibilityInfo)(),s=(0,react_1.useMemo)(()=>t===!0?"on":"off",[t]),{backgroundStyle:m,animatedKnobStyle:d,startSwitchOnAnimation:y,startSwitchOffAnoimation:h}=(0,useSwitchAnimation_1.useSwitchAnimation)({animationState:s,disabled:e}),{startPressInAnim:S,startPressOutAnim:A,scaleAnim:w}=(0,pressable_effect_1.usePressAnim)({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:p,style:_}=(0,animation_1.useWiggleAnimation)({direction:"x",type:"small"}),b=(0,react_1.useCallback)(g=>{e||(n?.(g),i?.(!t),o(!t))},[t,e,n,i,o]);return(0,react_1.useEffect)(()=>{s==="on"?y():h()},[s]),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:b,onPressIn:e?p:S,onPressOut:e?void 0:A,style:[styles.container,a],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:t,disabled:e,...l},...u,children:(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[react_native_1.Platform.OS==="ios"?{opacity:e?.3:1}:void 0,f?void 0:w,e?_:void 0],children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[m,{width:WIDTH,height:HEIGHT,borderRadius:RADIUS}]}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.knob,d]})]})})}const WIDTH=50,HEIGHT=30,RADIUS=15,styles=react_native_1.StyleSheet.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:colors_1.colors.white,borderRadius:8,position:"absolute",left:7,top:7}});exports.default=Switch;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),tds_colors_1=require("@toss/tds-colors"),react_1=require("react"),react_native_1=require("react-native"),animation_1=require("../../interactions/animation"),pressable_effect_1=require("../../interactions/pressable-effect"),utils_1=require("../../utils"),useSwitchAnimation_1=require("./useSwitchAnimation");function Switch({checked:r,defaultChecked:c=!1,disabled:e,style:a,onPress:n,onCheckedChange:i,accessibilityState:l,...u}){const[t,o]=(0,utils_1.useControlled)({controlledValue:r,defaultValue:c}),{reduceMotionEnabled:f}=(0,utils_1.useAccessibilityInfo)(),s=(0,react_1.useMemo)(()=>t===!0?"on":"off",[t]),{backgroundStyle:m,animatedKnobStyle:d,startSwitchOnAnimation:h,startSwitchOffAnoimation:y}=(0,useSwitchAnimation_1.useSwitchAnimation)({animationState:s,disabled:e}),{startPressInAnim:S,startPressOutAnim:A,scaleAnim:w}=(0,pressable_effect_1.usePressAnim)({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:_,style:p}=(0,animation_1.useWiggleAnimation)({direction:"x",type:"small"}),b=(0,react_1.useCallback)(g=>{e||(n?.(g),i?.(!t),o(!t))},[t,e,n,i,o]);return(0,react_1.useEffect)(()=>{s==="on"?h():y()},[s]),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:b,onPressIn:e?_:S,onPressOut:e?void 0:A,style:[styles.container,a],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:t,disabled:e,...l},...u,children:(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[react_native_1.Platform.OS==="ios"?{opacity:e?.3:1}:void 0,f?void 0:w,e?p:void 0],children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[m,{width:WIDTH,height:HEIGHT,borderRadius:RADIUS}]}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.knob,d]})]})})}const WIDTH=50,HEIGHT=30,RADIUS=15,styles=react_native_1.StyleSheet.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:tds_colors_1.colors.white,borderRadius:8,position:"absolute",left:7,top:7}});exports.default=Switch;

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

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSwitchAnimation=useSwitchAnimation;const colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native");function useSwitchAnimation({animationState:e,disabled:s}){const o=(0,core_1.useAdaptive)(),i=(0,react_1.useMemo)(()=>({grey200:(0,hex_to_rgba_1.default)(o.grey200??colors_1.colors.grey200,react_native_1.Platform.OS==="android"&&s?.3:1),blue500:(0,hex_to_rgba_1.default)(colors_1.colors.blue500,react_native_1.Platform.OS==="android"&&s?.3:1)}),[o.grey200,s]),a=(0,react_1.useRef)(new react_native_1.Animated.Value(e==="on"?1:0)).current,r=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].translateX)).current,n=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].scale)).current,t=!1,l=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.on.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.on.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:1,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]),u=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.off.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.off.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:0,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]);return{backgroundStyle:{backgroundColor:a.interpolate({inputRange:[0,1],outputRange:[i.grey200,i.blue500]})},animatedKnobStyle:{transform:[{translateX:r},{scale:n}]},startSwitchOnAnimation:l,startSwitchOffAnoimation:u}}const animationConfig={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},SPRING_CONFIG={stiffness:1e3,damping:52};
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSwitchAnimation=useSwitchAnimation;const tds_colors_1=require("@toss/tds-colors"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core");function useSwitchAnimation({animationState:e,disabled:o}){const s=(0,core_1.useAdaptive)(),i=(0,react_1.useMemo)(()=>({grey200:(0,hex_to_rgba_1.default)(s.grey200??tds_colors_1.colors.grey200,react_native_1.Platform.OS==="android"&&o?.3:1),blue500:(0,hex_to_rgba_1.default)(tds_colors_1.colors.blue500,react_native_1.Platform.OS==="android"&&o?.3:1)}),[s.grey200,o]),a=(0,react_1.useRef)(new react_native_1.Animated.Value(e==="on"?1:0)).current,r=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].translateX)).current,n=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].scale)).current,t=!1,l=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.on.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.on.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:1,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]),u=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.off.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.off.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:0,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]);return{backgroundStyle:{backgroundColor:a.interpolate({inputRange:[0,1],outputRange:[i.grey200,i.blue500]})},animatedKnobStyle:{transform:[{translateX:r},{scale:n}]},startSwitchOnAnimation:l,startSwitchOffAnoimation:u}}const animationConfig={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},SPRING_CONFIG={stiffness:1e3,damping:52};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FluidTab=FluidTab;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),core_1=require("../../core"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../interactions/animated"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FluidTab({defaultValue:c,value:u,children:d,onChange:o,style:h,size:f="large",...x}){const n=(0,core_1.useAdaptive)(),[b,a]=(0,utils_1.useControlled)({controlledValue:u,defaultValue:c}),w=(0,react_1.useCallback)(r=>{o?.(r),a(r)},[o,a]),[e,m]=(0,react_1.useState)(0),i=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[t,y]=(0,react_1.useState)(0),V={width:t,transform:[{translateX:i}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(i,{toValue:e,useNativeDriver:!0,...easings_1.spring.quick}).start()},[e,i]);const s=(0,react_1.useRef)(null),l=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{s.current!=null&&l.current?.scrollTo({x:Math.max(0,e-(s.current-t)/2)})},[e,t]);const g={...styles.border,borderBottomColor:n.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!0,value:b,onChange:w,size:f},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:t,translateX:e,setWidth:y,setTranslateX:m},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{onLayout:r=>{s.current=r.nativeEvent.layout.width},children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[g,styles.fluidBorder]}),(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{ref:l,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.itemList,h],accessibilityRole:"tablist",...x,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.fluidPadding]}),d]}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:n.grey800},styles.indicator,V]})]})})]})})})}const styles=react_native_1.StyleSheet.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FluidTab=FluidTab;const jsx_runtime_1=require("react/jsx-runtime"),tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),animated_1=require("../../interactions/animated"),utils_1=require("../../utils"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FluidTab({defaultValue:c,value:u,children:d,onChange:o,style:h,size:f="large",...x}){const n=(0,core_1.useAdaptive)(),[b,a]=(0,utils_1.useControlled)({controlledValue:u,defaultValue:c}),w=(0,react_1.useCallback)(r=>{o?.(r),a(r)},[o,a]),[e,m]=(0,react_1.useState)(0),i=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[t,y]=(0,react_1.useState)(0),V={width:t,transform:[{translateX:i}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(i,{toValue:e,useNativeDriver:!0,...tds_easings_1.spring.quick}).start()},[e,i]);const s=(0,react_1.useRef)(null),l=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{s.current!=null&&l.current?.scrollTo({x:Math.max(0,e-(s.current-t)/2)})},[e,t]);const v={...styles.border,borderBottomColor:n.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!0,value:b,onChange:w,size:f},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:t,translateX:e,setWidth:y,setTranslateX:m},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{onLayout:r=>{s.current=r.nativeEvent.layout.width},children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[v,styles.fluidBorder]}),(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{ref:l,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.itemList,h],accessibilityRole:"tablist",...x,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.fluidPadding]}),d]}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:n.grey800},styles.indicator,V]})]})})]})})})}const styles=react_native_1.StyleSheet.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FullTab=FullTab;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),core_1=require("../../core"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../interactions/animated"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FullTab({defaultValue:o,value:l,children:c,onChange:r,style:d,size:u="large",...h}){const i=(0,core_1.useAdaptive)(),[x,s]=(0,utils_1.useControlled)({controlledValue:l,defaultValue:o}),b=(0,react_1.useCallback)(a=>{r?.(a),s(a)},[r,s]),[e,w]=(0,react_1.useState)(0),t=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[n,y]=(0,react_1.useState)(0),g={width:n,transform:[{translateX:t}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(t,{toValue:e,useNativeDriver:!0,...easings_1.spring.quick}).start()},[e,t]);const m={...styles.border,borderBottomColor:i.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!1,value:x,onChange:b,size:u},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:n,translateX:e,setWidth:y,setTranslateX:w},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{horizontal:!1,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.itemList,d],accessibilityRole:"tablist",...h,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.padding]}),c,(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.padding})]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:m}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:i.grey800},styles.indicator,g]})]})})})})})}const styles=react_native_1.StyleSheet.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FullTab=FullTab;const jsx_runtime_1=require("react/jsx-runtime"),tds_easings_1=require("@toss/tds-easings"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),animated_1=require("../../interactions/animated"),utils_1=require("../../utils"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FullTab({defaultValue:o,value:l,children:c,onChange:r,style:d,size:u="large",...h}){const i=(0,core_1.useAdaptive)(),[x,s]=(0,utils_1.useControlled)({controlledValue:l,defaultValue:o}),b=(0,react_1.useCallback)(n=>{r?.(n),s(n)},[r,s]),[e,w]=(0,react_1.useState)(0),t=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[a,y]=(0,react_1.useState)(0),g={width:a,transform:[{translateX:t}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(t,{toValue:e,useNativeDriver:!0,...tds_easings_1.spring.quick}).start()},[e,t]);const m={...styles.border,borderBottomColor:i.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!1,value:x,onChange:b,size:u},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:a,translateX:e,setWidth:y,setTranslateX:w},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{horizontal:!1,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.itemList,d],accessibilityRole:"tablist",...h,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.padding]}),c,(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.padding})]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:m}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:i.grey800},styles.indicator,g]})]})})})})})}const styles=react_native_1.StyleSheet.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});

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

@@ -1 +1 @@
-"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.Gradient=Gradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core");function Gradient(){const e=(0,core_1.useAdaptive)().background??colors_1.colors.background;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:WIDTH,height:HEIGHT,pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:e,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:e})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${GRADIENT_ID})`})]})}const GRADIENT_ID="tds-rn-bottom-cta-gradient",HEIGHT=52,WIDTH=17;
+"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.Gradient=Gradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),tds_colors_1=require("@toss/tds-colors"),core_1=require("../../core");function Gradient(){const e=(0,core_1.useAdaptive)().background??tds_colors_1.colors.background;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:WIDTH,height:HEIGHT,pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:e,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:e})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${GRADIENT_ID})`})]})}const GRADIENT_ID="tds-rn-bottom-cta-gradient",HEIGHT=52,WIDTH=17;