@toss/tds-react-native 1.3.0 → 1.3.2

package/dist/esm/components/post/Paragraph.d.ts

@@ -1,4 +1,4 @@
-import { TxtProps, TypographyKeys } from '../txt';
+import type { TxtProps, TypographyKeys } from '../txt/index.js';
 export interface PostParagraphProps extends TxtProps {
     /**
      * 텍스트의 타이포그래피 스타일을 지정해요.

package/dist/esm/components/post/Paragraph.js

@@ -1 +1 @@
-"use strict";import{jsx as d}from"react/jsx-runtime";import{useAdaptive as g}from"../../core";import{Txt as n}from"../txt";export function PostParagraph({typography:t="t5",children:r,color:o,paddingBottom:p=24,style:a,...i}){const e=g();return d(n,{typography:t,fontWeight:"regular",color:o??e.grey700,style:[{paddingTop:0,paddingRight:24,paddingLeft:24,paddingBottom:p},a],...i,children:r})}
+"use strict";import{jsx as d}from"react/jsx-runtime";import{useAdaptive as g}from"../../core/index.js";import{Txt as n}from"../txt/index.js";export function PostParagraph({typography:t="t5",children:r,color:o,paddingBottom:p=24,style:a,...i}){const e=g();return d(n,{typography:t,fontWeight:"regular",color:o??e.grey700,style:[{paddingTop:0,paddingRight:24,paddingLeft:24,paddingBottom:p},a],...i,children:r})}

package/dist/esm/components/post/Post.d.ts

@@ -1,22 +1,22 @@
-import { PostHr } from './Hr';
-import { PostLi } from './List/PostLi';
-import { PostOl } from './List/PostOl';
-import { PostUl } from './List/PostUl';
-import { PostParagraph } from './Paragraph';
+import { PostHr } from './Hr.js';
+import { PostLi } from './List/PostLi.js';
+import { PostOl } from './List/PostOl.js';
+import { PostUl } from './List/PostUl.js';
+import { PostParagraph } from './Paragraph.js';
 export declare const Post: {
-    H1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
-    H2: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
-    H3: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
-    H4: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header.js").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H2: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header.js").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H3: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header.js").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H4: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header.js").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
     Paragraph: typeof PostParagraph;
     Ol: typeof PostOl;
     Li: typeof PostLi;
     Ul: typeof PostUl;
     Hr: typeof PostHr;
 };
-export type { PostH1Props, PostH2Props, PostH3Props, PostH4Props } from './Header';
-export type { PostHrProps } from './Hr';
-export type { PostLiProps } from './List/PostLi';
-export type { PostOlProps } from './List/PostOl';
-export type { PostUlProps } from './List/PostUl';
-export type { PostParagraphProps } from './Paragraph';
+export type { PostH1Props, PostH2Props, PostH3Props, PostH4Props } from './Header.js';
+export type { PostHrProps } from './Hr.js';
+export type { PostLiProps } from './List/PostLi.js';
+export type { PostOlProps } from './List/PostOl.js';
+export type { PostUlProps } from './List/PostUl.js';
+export type { PostParagraphProps } from './Paragraph.js';

package/dist/esm/components/post/Post.js

@@ -1 +1 @@
-"use strict";import{PostH1 as o,PostH2 as r,PostH3 as t,PostH4 as m}from"./Header";import{PostHr as P}from"./Hr";import{PostLi as s}from"./List/PostLi";import{PostOl as H}from"./List/PostOl";import{PostUl as p}from"./List/PostUl";import{PostParagraph as i}from"./Paragraph";export const Post={H1:o,H2:r,H3:t,H4:m,Paragraph:i,Ol:H,Li:s,Ul:p,Hr:P};
+"use strict";import{PostH1 as o,PostH2 as r,PostH3 as t,PostH4 as m}from"./Header.js";import{PostHr as P}from"./Hr.js";import{PostLi as s}from"./List/PostLi.js";import{PostOl as H}from"./List/PostOl.js";import{PostUl as p}from"./List/PostUl.js";import{PostParagraph as i}from"./Paragraph.js";export const Post={H1:o,H2:r,H3:t,H4:m,Paragraph:i,Ol:H,Li:s,Ul:p,Hr:P};

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

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

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

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

package/dist/esm/components/progress-bar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 type Size = 'light' | 'normal' | 'bold';
 export interface ProgressBarProps extends ViewProps {
     /**

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

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

package/dist/esm/components/progress-bar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ProgressBar } from './ProgressBar';
-export type { ProgressBarProps } from './ProgressBar';
+export { default as ProgressBar } from './ProgressBar.js';
+export type { ProgressBarProps } from './ProgressBar.js';

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

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

package/dist/esm/components/radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Control, FieldPathValue, FieldValues, Path, UseControllerProps } from 'react-hook-form';
-import RadioOption, { RadioOptionProps } from './RadioOption';
+import type { Control, FieldPathValue, FieldValues, Path, UseControllerProps } from 'react-hook-form';
+import type { RadioOptionProps } from './RadioOption.js';
+import RadioOption from './RadioOption.js';
 interface RadioProps<Value> {
     /**
      * The value of the radio option that is selected.

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as f}from"../../core";import{Txt as n}from"../txt";import{PreventFontScaling as a}from"../../extensions/prevent-font-scaling";import{noop as p}from"@toss/utils";import{Pressable as y,View as g}from"react-native";function u({children:o,value:l,checked:r=!1,disabled:e,onPress:s}){const i=f(),c={typography:"t5",fontWeight:"semiBold",color:e?i.grey400:i.grey800},m={typography:"t5",fontWeight:"medium",color:e?i.grey400:i.grey800};return t(y,{onPress:e?p:()=>s?.(l),style:{flex:1,elevation:9},disabled:e,accessibilityRole:"radio",accessibilityState:{selected:r,disabled:e},children:t(g,{style:{flexDirection:"row",alignItems:"center",justifyContent:"center"},children:t(a,{limit:135,children:r?t(n,{...c,numberOfLines:1,children:o}):t(n,{...m,numberOfLines:1,children:o})})})})}export default u;
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as f}from"../../core/index.js";import{Txt as n}from"../txt/index.js";import{PreventFontScaling as a}from"../../extensions/prevent-font-scaling/index.js";import{noop as p}from"@toss/utils";import{Pressable as y,View as g}from"react-native";function u({children:o,value:l,checked:r=!1,disabled:e,onPress:s}){const i=f(),c={typography:"t5",fontWeight:"semiBold",color:e?i.grey400:i.grey800},m={typography:"t5",fontWeight:"medium",color:e?i.grey400:i.grey800};return t(y,{onPress:e?p:()=>s?.(l),style:{flex:1,elevation:9},disabled:e,accessibilityRole:"radio",accessibilityState:{selected:r,disabled:e},children:t(g,{style:{flexDirection:"row",alignItems:"center",justifyContent:"center"},children:t(a,{limit:135,children:r?t(n,{...c,numberOfLines:1,children:o}):t(n,{...m,numberOfLines:1,children:o})})})})}export default u;

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

@@ -1 +1 @@
-export { Radio, RadioInput } from './Radio';
+export { Radio, RadioInput } from './Radio.js';

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

@@ -1 +1 @@
-"use strict";export{Radio,RadioInput}from"./Radio";
+"use strict";export{Radio,RadioInput}from"./Radio.js";

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

@@ -1,4 +1,5 @@
-import { View, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 type Size = 'medium' | 'large' | 'big';
 export interface EditableRatingProps extends ViewProps {
     /**

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

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

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

@@ -1,6 +1,6 @@
-import { View } from 'react-native';
-import { type EditableRatingProps } from './EditableRating';
-import { type ReadOnlyRatingProps } from './ReadOnlyRating';
+import type { View } from 'react-native';
+import { type EditableRatingProps } from './EditableRating.js';
+import { type ReadOnlyRatingProps } from './ReadOnlyRating.js';
 export type EditableRating = {
     readonly: false;
 } & EditableRatingProps;

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

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{forwardRef as n}from"react";import{EditableRating as a}from"./EditableRating";import{ReadOnlyRating as i}from"./ReadOnlyRating";export const Rating=n((r,t)=>{if(r.readonly){const{readonly:f,...e}=r;return o(i,{ref:t,...e})}return o(a,{ref:t,...r})});
+"use strict";import{jsx as o}from"react/jsx-runtime";import{forwardRef as n}from"react";import{EditableRating as a}from"./EditableRating.js";import{ReadOnlyRating as i}from"./ReadOnlyRating.js";export const Rating=n((r,t)=>{if(r.readonly){const{readonly:f,...e}=r;return o(i,{ref:t,...e})}return o(a,{ref:t,...r})});

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

@@ -1,4 +1,5 @@
-import { View, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 export interface ProgressIconsProps extends ViewProps {
     max: number;
     name: string;

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

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

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

@@ -1,2 +1,2 @@
-export { Rating } from './Rating';
-export type { RatingProps } from './Rating';
+export { Rating } from './Rating.js';
+export type { RatingProps } from './Rating.js';

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

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

package/dist/esm/components/result/Result.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { ResultButton } from './ResultButton';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { ResultButton } from './ResultButton.js';
 export interface ResultProps {
     /**
      * `Result` 컴포넌트의 `title` 위에 표시할 시각적 요소로, 주로 아이콘이나 이미지를 나타내요. `Asset` 컴포넌트를 사용해서 다양한 시각적 콘텐츠를 표현할 수 있어요.

package/dist/esm/components/result/Result.js

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as u}from"react/jsx-runtime";import{useAdaptive as p}from"../../core";import{Txt as l}from"../txt";import{StyleSheet as y,View as n}from"react-native";import{ResultButton as g}from"./ResultButton";function s({figure:r,title:m,description:c,button:o,style:a}){const i=p();return u(n,{style:[t.container,a],children:[r!=null?e(n,{style:t.figure,children:r}):null,e(l,{typography:"t5",color:i.grey800,fontWeight:"medium",style:t.title,children:m}),e(l,{typography:"t6",color:i.grey600,fontWeight:"medium",style:t.description,children:c}),o!=null?e(n,{style:t.buttonContainer,children:o}):null]})}s.Button=g;export default s;const t=y.create({container:{flex:1,justifyContent:"center",alignItems:"center"},figure:{marginBottom:12},title:{marginBottom:5,textAlign:"center"},description:{textAlign:"center"},buttonContainer:{marginTop:16}});
+"use strict";import{jsx as e,jsxs as u}from"react/jsx-runtime";import{useAdaptive as p}from"../../core/index.js";import{Txt as l}from"../txt/index.js";import{StyleSheet as y,View as n}from"react-native";import{ResultButton as g}from"./ResultButton.js";function s({figure:r,title:m,description:c,button:o,style:a}){const i=p();return u(n,{style:[t.container,a],children:[r!=null?e(n,{style:t.figure,children:r}):null,e(l,{typography:"t5",color:i.grey800,fontWeight:"medium",style:t.title,children:m}),e(l,{typography:"t6",color:i.grey600,fontWeight:"medium",style:t.description,children:c}),o!=null?e(n,{style:t.buttonContainer,children:o}):null]})}s.Button=g;export default s;const t=y.create({container:{flex:1,justifyContent:"center",alignItems:"center"},figure:{marginBottom:12},title:{marginBottom:5,textAlign:"center"},description:{textAlign:"center"},buttonContainer:{marginTop:16}});

package/dist/esm/components/result/ResultButton.d.ts

@@ -1,3 +1,3 @@
-import { ButtonProps } from '../button';
+import type { ButtonProps } from '../button/index.js';
 export type ResultButtonProps = ButtonProps;
 export declare function ResultButton({ children, size, ...restProps }: ResultButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/result/ResultButton.js

@@ -1 +1 @@
-"use strict";import{jsx as e}from"react/jsx-runtime";import{Button as i}from"../button";export function ResultButton({children:t,size:o="medium",...r}){return e(i,{...r,size:o,children:t})}
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Button as i}from"../button/index.js";export function ResultButton({children:t,size:o="medium",...r}){return e(i,{...r,size:o,children:t})}

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

@@ -1,2 +1,2 @@
-export { default as Result } from './Result';
-export type { ResultProps } from './Result';
+export { default as Result } from './Result.js';
+export type { ResultProps } from './Result.js';

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

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

package/dist/esm/components/search-field/SearchField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AccessibilityProps, StyleProp, TextInput, ViewStyle } from 'react-native';
+import type { AccessibilityProps, StyleProp, TextInput, ViewStyle } from 'react-native';
 declare const SearchField: React.ForwardRefExoticComponent<{
     placeholder?: string;
     style?: StyleProp<ViewStyle>;

package/dist/esm/components/search-field/SearchField.js

@@ -1 +1 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as I}from"../../core";import{OldTextField as g,OldTextFieldItem as l}from"../text-field";import F,{forwardRef as T}from"react";const z=T(function({placeholder:s,style:m,hasClearButton:d=!1,defaultValue:o,value:r,onChange:i,keyboardType:f,maxLength:x,autoFocus:p,editable:u,...h},n){let a=null;const[y,v]=F.useState(o||r),c=I();return t(g,{ref:e=>{a=e,typeof n=="function"&&n(e)},style:m,defaultValue:o,value:r,onChange:e=>{i?.(e),v(e.nativeEvent.text)},keyboardType:f,maxLength:x,autoFocus:p,editable:u,placeholder:s,size:"classic",inputAccessoryViewID:"",leftItem:t(l.Icon,{name:"icon-search-mono",size:18,color:c.grey600},0),rightItem:d&&(y??"").length>0?t(l.Icon,{name:"icon-x-circle-mono",color:c.grey400,size:18,onPress:()=>{a?.clear(),i?.({nativeEvent:{text:""}})}}):null,...h})});export default z;
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as I}from"../../core/index.js";import{OldTextField as g,OldTextFieldItem as l}from"../text-field/index.js";import F,{forwardRef as T}from"react";const z=T(function({placeholder:s,style:m,hasClearButton:d=!1,defaultValue:o,value:r,onChange:i,keyboardType:f,maxLength:x,autoFocus:p,editable:u,...h},n){let a=null;const[y,v]=F.useState(o||r),c=I();return t(g,{ref:e=>{a=e,typeof n=="function"&&n(e)},style:m,defaultValue:o,value:r,onChange:e=>{i?.(e),v(e.nativeEvent.text)},keyboardType:f,maxLength:x,autoFocus:p,editable:u,placeholder:s,size:"classic",inputAccessoryViewID:"",leftItem:t(l.Icon,{name:"icon-search-mono",size:18,color:c.grey600},0),rightItem:d&&(y??"").length>0?t(l.Icon,{name:"icon-x-circle-mono",color:c.grey400,size:18,onPress:()=>{a?.clear(),i?.({nativeEvent:{text:""}})}}):null,...h})});export default z;

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

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

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

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

package/dist/esm/components/segmented-control/components/Indicator/Indicator.d.ts

@@ -1,3 +1,3 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 export type IndicatorProps = ViewProps;
 export declare function Indicator({ style, children }: IndicatorProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/components/segmented-control/components/Indicator/index.d.ts

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

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

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

package/dist/esm/components/segmented-control/components/Indicator/useIndicatorStyle.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 interface IndicatorStyles {
     indicatorStyle: ViewProps['style'];
 }

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

@@ -1 +1 @@
-"use strict";import{useContext as o}from"react";import{StyleSheet as e}from"react-native";import{SizeContext as i}from"../../contexts/SizeContext";const r={position:"absolute",zIndex:0,left:0},n={top:3,bottom:3,borderRadius:8},s={top:4,bottom:4,borderRadius:10};export function useIndicatorStyle(){const t=o(i)==="small"?n:s;return{indicatorStyle:e.compose(r,t)}}
+"use strict";import{useContext as o}from"react";import{StyleSheet as e}from"react-native";import{SizeContext as i}from"../../contexts/SizeContext.js";const r={position:"absolute",zIndex:0,left:0},n={top:3,bottom:3,borderRadius:8},s={top:4,bottom:4,borderRadius:10};export function useIndicatorStyle(){const t=o(i)==="small"?n:s;return{indicatorStyle:e.compose(r,t)}}

package/dist/esm/components/segmented-control/components/Item/Item.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
 export interface ItemProps {
     value: string;
     size?: 'small' | 'large';

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

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{useCallback as y,useContext as u,useEffect as C,useState as E}from"react";import{View as T}from"react-native";import{useAdaptive as V}from"../../../../core";import{PreventFontScaling as j}from"../../../../extensions/prevent-font-scaling";import{PressableEffect as A}from"../../../../interactions/pressable-effect";import{Root as I,Text as R}from"../../../paragraph";import{AlignmentContext as w}from"../../contexts/AlignmentContext";import{RadioContext as F}from"../../contexts/RadioContext";import{useItemStyle as k}from"./useItemStyle";export function Item({style:f,children:p,value:i,disabled:g=!1,size:b,...h}){const{ensureFluidAlignment:x}=u(w),[s,S]=E(null),{setSelectedValue:c,selectedValue:L,setSelectedElementLayout:n,disabled:P}=u(F),t=P||g,l=k({size:b,disabled:t}),a=V(),e=L===i,v=y(()=>{c(i)},[i,c]),m=y(()=>{s!=null&&n(s)},[s,n]);return C(()=>{e&&m()},[e,m]),o(A,{onPress:t||e?void 0:v,onLayout:r=>{const d=r.nativeEvent.layout;S(d),e&&n(d)},style:[l.containerStyle,f],accessibilityRole:"radio",accessibilityValue:{text:i},accessibilityState:{selected:e,disabled:t},disabled:t,...h,children:o(T,{style:{justifyContent:"center",alignItems:"center"},children:o(j,{limit:140,children:o(I,{typography:l.labelTypography,style:l.labelStyle,onTextLayout:r=>{x(r.nativeEvent.lines.length>1)},children:o(R,{color:t?a.grey400:e?a.grey800:a.grey600,fontWeight:e?"semiBold":"medium",children:p})})})})})}
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useCallback as y,useContext as u,useEffect as C,useState as E}from"react";import{View as T}from"react-native";import{useAdaptive as V}from"../../../../core/index.js";import{PreventFontScaling as j}from"../../../../extensions/prevent-font-scaling/index.js";import{PressableEffect as A}from"../../../../interactions/pressable-effect/index.js";import{Root as I,Text as R}from"../../../paragraph/index.js";import{AlignmentContext as w}from"../../contexts/AlignmentContext.js";import{RadioContext as F}from"../../contexts/RadioContext.js";import{useItemStyle as k}from"./useItemStyle.js";export function Item({style:f,children:p,value:i,disabled:g=!1,size:b,...h}){const{ensureFluidAlignment:x}=u(w),[s,S]=E(null),{setSelectedValue:c,selectedValue:L,setSelectedElementLayout:n,disabled:P}=u(F),t=P||g,l=k({size:b,disabled:t}),a=V(),e=L===i,v=y(()=>{c(i)},[i,c]),m=y(()=>{s!=null&&n(s)},[s,n]);return C(()=>{e&&m()},[e,m]),o(A,{onPress:t||e?void 0:v,onLayout:r=>{const d=r.nativeEvent.layout;S(d),e&&n(d)},style:[l.containerStyle,f],accessibilityRole:"radio",accessibilityValue:{text:i},accessibilityState:{selected:e,disabled:t},disabled:t,...h,children:o(T,{style:{justifyContent:"center",alignItems:"center"},children:o(j,{limit:140,children:o(I,{typography:l.labelTypography,style:l.labelStyle,onTextLayout:r=>{x(r.nativeEvent.lines.length>1)},children:o(R,{color:t?a.grey400:e?a.grey800:a.grey600,fontWeight:e?"semiBold":"medium",children:p})})})})})}

package/dist/esm/components/segmented-control/components/Item/index.d.ts

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

package/dist/esm/components/segmented-control/components/Item/index.js

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

package/dist/esm/components/segmented-control/components/Item/useItemStyle.d.ts

@@ -1,5 +1,5 @@
-import { ViewProps } from 'react-native';
-import { ItemProps } from './Item';
+import type { ViewProps } from 'react-native';
+import type { ItemProps } from './Item.js';
 interface ItemStyles {
     containerStyle: ViewProps['style'];
     labelStyle: ViewProps['style'];

package/dist/esm/components/segmented-control/components/Item/useItemStyle.js

@@ -1 +1 @@
-"use strict";import{useContext as n}from"react";import{StyleSheet as o}from"react-native";import{AlignmentContext as r}from"../../contexts/AlignmentContext";import{SizeContext as s}from"../../contexts/SizeContext";const c={zIndex:1,overflow:"hidden",borderRadius:12},d={flex:1},m={flexGrow:0,flexShrink:0,flexBasis:"auto"},S={display:"flex",alignItems:"center",justifyContent:"center"},p={paddingVertical:5,paddingHorizontal:14},y={paddingVertical:7,paddingHorizontal:14};export function useItemStyle(i){const a=n(s),{alignment:e}=n(r),t=i.size??a,l=t==="small"?p:y;return{containerStyle:o.compose(c,e==="fixed"?d:m),labelStyle:e==="fixed"?o.compose(S,l):l,labelTypography:t==="small"?"t6":"t5"}}
+"use strict";import{useContext as n}from"react";import{StyleSheet as o}from"react-native";import{AlignmentContext as r}from"../../contexts/AlignmentContext.js";import{SizeContext as s}from"../../contexts/SizeContext.js";const c={zIndex:1,overflow:"hidden",borderRadius:12},d={flex:1},m={flexGrow:0,flexShrink:0,flexBasis:"auto"},S={display:"flex",alignItems:"center",justifyContent:"center"},p={paddingVertical:5,paddingHorizontal:14},y={paddingVertical:7,paddingHorizontal:14};export function useItemStyle(i){const a=n(s),{alignment:e}=n(r),t=i.size??a,l=t==="small"?p:y;return{containerStyle:o.compose(c,e==="fixed"?d:m),labelStyle:e==="fixed"?o.compose(S,l):l,labelTypography:t==="small"?"t6":"t5"}}

package/dist/esm/components/segmented-control/components/ItemGroup/ItemGroup.d.ts

@@ -1,4 +1,5 @@
-import { View, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 interface Props extends ViewProps {
 }
 export type ItemGroupProps = Props;

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

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as p,useContext as e,useEffect as d}from"react";import{Animated as x,View as y}from"react-native";import{useAdaptive as h}from"../../../../core";import{AlignmentContext as w}from"../../contexts/AlignmentContext";import{RadioContext as S}from"../../contexts/RadioContext";import{ScrollContext as g}from"../../contexts/ScrollContext";import{useItemGroupStyle as C}from"./useItemGroupStyle";export const ItemGroup=p(function({style:i,children:l},c){const{ref:o,scrollHandlers:s}=e(g),{selectedElementLayout:t}=e(S),{alignment:a}=e(w),m=h(),f=C();return d(()=>{if(o!=null&&o.current&&t){const r=Math.max(0,t.x-t.width/2);o.current.scrollTo({x:r,animated:!0})}},[o,t]),n(y,{style:[f.containerStyle,{backgroundColor:m.greyOpacity100},i],accessibilityRole:"radiogroup",ref:c,children:a==="fluid"?n(x.ScrollView,{scrollEventThrottle:16,onScroll:r=>{s.forEach(u=>{u(r)})},ref:o,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:l}):l})});
+"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as p,useContext as e,useEffect as d}from"react";import{Animated as x,View as y}from"react-native";import{useAdaptive as h}from"../../../../core/index.js";import{AlignmentContext as w}from"../../contexts/AlignmentContext.js";import{RadioContext as S}from"../../contexts/RadioContext.js";import{ScrollContext as g}from"../../contexts/ScrollContext.js";import{useItemGroupStyle as C}from"./useItemGroupStyle.js";export const ItemGroup=p(function({style:i,children:l},c){const{ref:o,scrollHandlers:s}=e(g),{selectedElementLayout:t}=e(S),{alignment:a}=e(w),m=h(),f=C();return d(()=>{if(o!=null&&o.current&&t){const r=Math.max(0,t.x-t.width/2);o.current.scrollTo({x:r,animated:!0})}},[o,t]),n(y,{style:[f.containerStyle,{backgroundColor:m.greyOpacity100},i],accessibilityRole:"radiogroup",ref:c,children:a==="fluid"?n(x.ScrollView,{scrollEventThrottle:16,onScroll:r=>{s.forEach(u=>{u(r)})},ref:o,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:l}):l})});

package/dist/esm/components/segmented-control/components/ItemGroup/index.d.ts

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

package/dist/esm/components/segmented-control/components/ItemGroup/index.js

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

package/dist/esm/components/segmented-control/components/ItemGroup/useItemGroupStyle.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 interface ItemGroupStyles {
     containerStyle: ViewProps['style'];
 }

package/dist/esm/components/segmented-control/components/ItemGroup/useItemGroupStyle.js

@@ -1 +1 @@
-"use strict";import{useContext as o}from"react";import{StyleSheet as t}from"react-native";import{AlignmentContext as r}from"../../contexts/AlignmentContext";import{SizeContext as a}from"../../contexts/SizeContext";const n={position:"relative",width:"100%",display:"flex",flexDirection:"row",alignItems:"flex-start",alignSelf:"flex-start",justifyContent:"flex-start"},l={padding:3,borderRadius:10},s={paddingHorizontal:5,paddingVertical:4,borderRadius:15},c={flexWrap:"nowrap"};export function useItemGroupStyle(){const{alignment:i}=o(r),e=o(a)==="small"?l:s;return{containerStyle:i==="fixed"?t.compose(n,t.compose(e,c)):t.compose(n,e)}}
+"use strict";import{useContext as o}from"react";import{StyleSheet as t}from"react-native";import{AlignmentContext as r}from"../../contexts/AlignmentContext.js";import{SizeContext as a}from"../../contexts/SizeContext.js";const n={position:"relative",width:"100%",display:"flex",flexDirection:"row",alignItems:"flex-start",alignSelf:"flex-start",justifyContent:"flex-start"},l={padding:3,borderRadius:10},s={paddingHorizontal:5,paddingVertical:4,borderRadius:15},c={flexWrap:"nowrap"};export function useItemGroupStyle(){const{alignment:i}=o(r),e=o(a)==="small"?l:s;return{containerStyle:i==="fixed"?t.compose(n,t.compose(e,c)):t.compose(n,e)}}

package/dist/esm/components/segmented-control/components/Root.d.ts

@@ -1,6 +1,6 @@
 import type { RadioGroupProps } from '@react-stately/radio';
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
 interface Props extends Omit<RadioGroupProps, 'isDisabled'> {
     value: string;
     defaultValue?: string;

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

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useCallback as C,useState as P}from"react";import{View as l}from"react-native";import{AlignmentContext as S}from"../contexts/AlignmentContext";import{IndicatorContextProvider as j}from"../contexts/IndicatorContext";import{RadioContextProvider as y}from"../contexts/RadioContext";import{ScrollContextProvider as V}from"../contexts/ScrollContext";import{SizeContext as w}from"../contexts/SizeContext";import{Indicator as A}from"./Indicator";import{ItemGroup as I}from"./ItemGroup";import{ScrollControlOverlay as b}from"./ScrollControlOverlay/ScrollControlOverlay";export function RootBase({value:r,defaultValue:t,indicator:d=e(A,{}),previousButton:R,gradation:_,controller:a=e(b,{}),size:m="large",alignment:s="fixed",disabled:u=!1,onChange:f,style:c,children:p,...x}){const[o,v]=P(s),h=C(i=>{v(g=>g==="fluid"||i?"fluid":"fixed")},[]);return e(S.Provider,{value:{alignment:o,ensureFluidAlignment:h},children:e(w.Provider,{value:m,children:e(V,{children:e(y,{selectedValue:r,setSelectedValue:i=>{f?.(i)},disabled:u,name:x.name,children:e(j,{children:e(z,{style:c,children:n(B,{children:[n(I,{children:[p,d]}),o==="fluid"?a:void 0]})})})})})})})}function z({style:r,...t}){return e(l,{style:[{position:"relative",width:"100%",paddingHorizontal:24},r],...t})}function B({style:r,...t}){return e(l,{style:[{position:"relative",width:"100%"},r],...t})}
+"use strict";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useCallback as C,useState as P}from"react";import{View as l}from"react-native";import{AlignmentContext as S}from"../contexts/AlignmentContext.js";import{IndicatorContextProvider as j}from"../contexts/IndicatorContext.js";import{RadioContextProvider as y}from"../contexts/RadioContext.js";import{ScrollContextProvider as V}from"../contexts/ScrollContext.js";import{SizeContext as w}from"../contexts/SizeContext.js";import{Indicator as A}from"./Indicator/index.js";import{ItemGroup as I}from"./ItemGroup/index.js";import{ScrollControlOverlay as b}from"./ScrollControlOverlay/ScrollControlOverlay.js";export function RootBase({value:r,defaultValue:t,indicator:d=e(A,{}),previousButton:R,gradation:_,controller:a=e(b,{}),size:m="large",alignment:s="fixed",disabled:u=!1,onChange:f,style:c,children:p,...x}){const[o,v]=P(s),h=C(i=>{v(g=>g==="fluid"||i?"fluid":"fixed")},[]);return e(S.Provider,{value:{alignment:o,ensureFluidAlignment:h},children:e(w.Provider,{value:m,children:e(V,{children:e(y,{selectedValue:r,setSelectedValue:i=>{f?.(i)},disabled:u,name:x.name,children:e(j,{children:e(z,{style:c,children:n(B,{children:[n(I,{children:[p,d]}),o==="fluid"?a:void 0]})})})})})})})}function z({style:r,...t}){return e(l,{style:[{position:"relative",width:"100%",paddingHorizontal:24},r],...t})}function B({style:r,...t}){return e(l,{style:[{position:"relative",width:"100%"},r],...t})}

package/dist/esm/components/segmented-control/components/ScrollControlOverlay/EdgeGradient.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 interface EdgeGradientProps extends Omit<ViewProps, 'children'> {
     exiting: boolean;
 }

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

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

package/dist/esm/components/segmented-control/components/ScrollControlOverlay/PreviousButton.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 interface Props {
     style?: ViewProps['style'];
     onPress: () => void;

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

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{Icon as n}from"../../../icon";import{useAdaptive as a,useColorPreference as c}from"../../../../core";import{Pressable as d}from"react-native";import{useIndicatorBackground as l}from"../../hooks/useIndicatorBackground";export function PreviousButton({onPress:e,style:r}){const t=a(),{colorPreference:s}=c(),i=l();return o(d,{accessibilityRole:"button",style:[{justifyContent:"center",alignItems:"center",left:-12,top:0,borderRadius:12,backgroundColor:i,width:24,height:24,padding:0,shadowColor:s==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:1},shadowOpacity:1,shadowRadius:2},r],onPress:e,children:o(n,{size:12,name:"icon-arrow-left-small",color:t.grey600})})}
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Icon as n}from"../../../icon/index.js";import{useAdaptive as a,useColorPreference as c}from"../../../../core/index.js";import{Pressable as d}from"react-native";import{useIndicatorBackground as l}from"../../hooks/useIndicatorBackground.js";export function PreviousButton({onPress:e,style:r}){const t=a(),{colorPreference:s}=c(),i=l();return o(d,{accessibilityRole:"button",style:[{justifyContent:"center",alignItems:"center",left:-12,top:0,borderRadius:12,backgroundColor:i,width:24,height:24,padding:0,shadowColor:s==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:1},shadowOpacity:1,shadowRadius:2},r],onPress:e,children:o(n,{size:12,name:"icon-arrow-left-small",color:t.grey600})})}

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

@@ -1 +1 @@
-"use strict";import{jsx as n,Fragment as a,jsxs as l}from"react/jsx-runtime";import{useContext as y,useEffect as c,useRef as S,useState as u}from"react";import{Animated as s}from"react-native";import{SPRING_OPTION as b}from"../../constants/spring";import{ScrollContext as j}from"../../contexts/ScrollContext";import{LeftEdgeGradient as C,RightEdgeGradient as E}from"./EdgeGradient";import{PreviousButton as P}from"./PreviousButton";export function ScrollControlOverlay(){const{ref:f,scrollHandlers:o}=y(j),[t,m]=u(!1),[d,p]=u(!1),e=S(new s.Value(0)).current,g=e.interpolate({inputRange:[0,1],outputRange:[-5,0]});c(()=>{function x(r){const v=r.nativeEvent.contentSize.width,R=r.nativeEvent.contentOffset.x,w=r.nativeEvent.layoutMeasurement.width,i=R/Math.max(0,v-w);m(i>.05),p(i<=.95)}return o.add(x),()=>{o.clear()}},[o]);const h=()=>{f?.current?.scrollTo({x:0})};return c(()=>()=>{s.spring(e,{toValue:t?0:1,useNativeDriver:!0,...b}).start()},[e,t]),l(a,{children:[l(a,{children:[n(C,{exiting:t}),n(s.View,{pointerEvents:t?"auto":"none",style:[I,{transform:[{translateX:g}],opacity:e}],children:n(P,{onPress:h})})]}),n(E,{exiting:d})]})}const I={zIndex:1,position:"absolute",left:0,top:0,bottom:0,display:"flex",justifyContent:"center",alignItems:"center"};
+"use strict";import{jsx as n,Fragment as a,jsxs as l}from"react/jsx-runtime";import{useContext as y,useEffect as c,useRef as S,useState as u}from"react";import{Animated as s}from"react-native";import{SPRING_OPTION as b}from"../../constants/spring.js";import{ScrollContext as j}from"../../contexts/ScrollContext.js";import{LeftEdgeGradient as C,RightEdgeGradient as E}from"./EdgeGradient.js";import{PreviousButton as P}from"./PreviousButton.js";export function ScrollControlOverlay(){const{ref:f,scrollHandlers:o}=y(j),[t,m]=u(!1),[d,p]=u(!1),e=S(new s.Value(0)).current,g=e.interpolate({inputRange:[0,1],outputRange:[-5,0]});c(()=>{function x(r){const v=r.nativeEvent.contentSize.width,R=r.nativeEvent.contentOffset.x,w=r.nativeEvent.layoutMeasurement.width,i=R/Math.max(0,v-w);m(i>.05),p(i<=.95)}return o.add(x),()=>{o.clear()}},[o]);const h=()=>{f?.current?.scrollTo({x:0})};return c(()=>()=>{s.spring(e,{toValue:t?0:1,useNativeDriver:!0,...b}).start()},[e,t]),l(a,{children:[l(a,{children:[n(C,{exiting:t}),n(s.View,{pointerEvents:t?"auto":"none",style:[I,{transform:[{translateX:g}],opacity:e}],children:n(P,{onPress:h})})]}),n(E,{exiting:d})]})}const I={zIndex:1,position:"absolute",left:0,top:0,bottom:0,display:"flex",justifyContent:"center",alignItems:"center"};

package/dist/esm/components/segmented-control/contexts/IndicatorContext.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface Options {
     indicatorX: number;
     indicatorWidth: number;

package/dist/esm/components/segmented-control/contexts/RadioContext.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { LayoutRectangle } from 'react-native';
+import type { ReactNode } from 'react';
+import type { LayoutRectangle } from 'react-native';
 interface RadioGroupState {
     name: string;
     selectedValue: string | undefined;

package/dist/esm/components/segmented-control/contexts/ScrollContext.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, RefObject } from 'react';
-import { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+import type { ReactNode, RefObject } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
 type ScrollHandlers = Set<(event: NativeSyntheticEvent<NativeScrollEvent>) => void>;
 interface ScrollContextValues {
     ref: RefObject<ScrollView> | null;

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

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

package/dist/esm/components/segmented-control/index.d.ts

@@ -1,5 +1,5 @@
-import { Item } from './components/Item/Item';
-import { RootBase } from './components/Root';
+import { Item } from './components/Item/Item.js';
+import { RootBase } from './components/Root.js';
 export declare const SegmentedControl: {
     Root: typeof RootBase;
     Item: typeof Item;

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

@@ -1 +1 @@
-"use strict";import{Item as o}from"./components/Item/Item";import{RootBase as t}from"./components/Root";export const SegmentedControl={Root:t,Item:o};
+"use strict";import{Item as o}from"./components/Item/Item.js";import{RootBase as t}from"./components/Root.js";export const SegmentedControl={Root:t,Item:o};

package/dist/esm/components/shadow/ShadowBackground.d.ts

@@ -1,5 +1,5 @@
 import { View, type ViewProps } from 'react-native';
-import { type UseShadowProps } from './useShadow';
+import { type UseShadowProps } from './useShadow.js';
 export type ShadowBackgroundProps = {
     shadow: UseShadowProps;
 } & ViewProps;

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

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as a}from"react";import{StyleSheet as i,View as s}from"react-native";import{useShadow as c}from"./useShadow";export const ShadowBackground=a(function({shadow:t,...o},e){const r=c(t);return n(s,{ref:e,...o,style:[o.style,f.container,r]})});const f=i.create({container:{position:"absolute",width:"100%",height:"100%",top:0,left:0}});
+"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as a}from"react";import{StyleSheet as i,View as s}from"react-native";import{useShadow as c}from"./useShadow.js";export const ShadowBackground=a(function({shadow:t,...o},e){const r=c(t);return n(s,{ref:e,...o,style:[o.style,f.container,r]})});const f=i.create({container:{position:"absolute",width:"100%",height:"100%",top:0,left:0}});

package/dist/esm/components/shadow/generateShadowStyle.d.ts

@@ -1,6 +1,6 @@
-import { ColorPreference } from '../../core';
-import { ViewStyle } from 'react-native';
-import type { Shadow } from './types';
+import type { ColorPreference } from '../../core/index.js';
+import type { ViewStyle } from 'react-native';
+import type { Shadow } from './types.js';
 type ShadowStyle = Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'> | Pick<ViewStyle, 'shadowColor' | 'elevation'>;
 /**
  * @description 플랫폼에 따른 shadow style을 생성합니다.

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

@@ -1 +1 @@
-"use strict";import{Platform as l}from"react-native";import{calculateElevation as r}from"./calculateElevation";export const generateShadowStyle=({offset:o={x:0,y:0},opacity:e=1,radius:a,colorPreference:h="light",...t})=>{const i="color"in t?t.color:h==="light"?t.lightColor:t.darkColor;return l.OS==="ios"?{shadowColor:i,shadowOffset:{width:o.x??0,height:o.y??0},shadowOpacity:e,shadowRadius:a}:{shadowColor:i,elevation:r(a)}};
+"use strict";import{Platform as l}from"react-native";import{calculateElevation as r}from"./calculateElevation.js";export const generateShadowStyle=({offset:o={x:0,y:0},opacity:e=1,radius:a,colorPreference:h="light",...t})=>{const i="color"in t?t.color:h==="light"?t.lightColor:t.darkColor;return l.OS==="ios"?{shadowColor:i,shadowOffset:{width:o.x??0,height:o.y??0},shadowOpacity:e,shadowRadius:a}:{shadowColor:i,elevation:r(a)}};