@toss/tds-react-native 1.2.1 → 1.3.1

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

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

@@ -1,4 +1,4 @@
-export { calculateElevation } from './calculateElevation';
-export { ShadowBackground, type ShadowBackgroundProps } from './ShadowBackground';
-export { shadow } from './tokens';
-export { useShadow, type UseShadowProps } from './useShadow';
+export { calculateElevation } from './calculateElevation.js';
+export { ShadowBackground, type ShadowBackgroundProps } from './ShadowBackground.js';
+export { shadow } from './tokens.js';
+export { useShadow, type UseShadowProps } from './useShadow.js';

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

@@ -1 +1 @@
-"use strict";export{calculateElevation}from"./calculateElevation";export{ShadowBackground}from"./ShadowBackground";export{shadow}from"./tokens";export{useShadow}from"./useShadow";
+"use strict";export{calculateElevation}from"./calculateElevation.js";export{ShadowBackground}from"./ShadowBackground.js";export{shadow}from"./tokens.js";export{useShadow}from"./useShadow.js";

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

@@ -1,4 +1,4 @@
-import type { TokenShadowProps } from './types';
+import type { TokenShadowProps } from './types.js';
 export type ShadowTokenStrength = 'tiny' | 'weak' | 'medium';
 export type ShadowTokenDirection = 'up' | 'down';
 type ShadowToken = (direction: ShadowTokenDirection) => TokenShadowProps;

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

@@ -1,4 +1,4 @@
-import { Shadow } from './types';
+import type { Shadow } from './types.js';
 export type UseShadowProps = Shadow;
 /**
  * @description 플랫폼에 따른 shadow style을 생성합니다.

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

@@ -1 +1 @@
-"use strict";import{useColorPreference as r}from"../../core";import{generateShadowStyle as t}from"./generateShadowStyle";export const useShadow=e=>{const{colorPreference:o}=r();return t({...e,colorPreference:o})};
+"use strict";import{useColorPreference as r}from"../../core/index.js";import{generateShadowStyle as t}from"./generateShadowStyle.js";export const useShadow=e=>{const{colorPreference:o}=r();return t({...e,colorPreference:o})};

package/dist/esm/components/skeleton/AnimateSkeleton.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 interface AnimateSkeletonProps extends PropsWithChildren<{}> {
     /**
      * @description 단위는 ms입니다. 500으로 지정시 스켈레톤을 미노출하여 화면전환을 최소화합니다

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

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

package/dist/esm/components/skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { PropsWithChildren } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 export interface SkeletonBaseProps {
     width?: ViewStyle['width'];
     height?: ViewStyle['height'];

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

@@ -1 +1 @@
-"use strict";import{jsx as a}from"react/jsx-runtime";import{useAdaptive as m}from"../../core";import{View as n}from"react-native";function p({width:o,height:r,borderRadius:t=6,style:e}){const i=m();return a(n,{style:[{width:o,height:r,borderRadius:t,backgroundColor:i.grey200},e]})}export default p;
+"use strict";import{jsx as a}from"react/jsx-runtime";import{useAdaptive as m}from"../../core/index.js";import{View as n}from"react-native";function p({width:o,height:r,borderRadius:t=6,style:e}){const i=m();return a(n,{style:[{width:o,height:r,borderRadius:t,backgroundColor:i.grey200},e]})}export default p;

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

@@ -1,2 +1,2 @@
-export { default as Skeleton } from './Skeleton';
-export { default as AnimateSkeleton } from './AnimateSkeleton';
+export { default as Skeleton } from './Skeleton.js';
+export { default as AnimateSkeleton } from './AnimateSkeleton.js';

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

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

package/dist/esm/components/slider/Slider.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 SliderProps extends ViewProps {
     min?: number;
     max?: number;

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

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

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

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

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

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

package/dist/esm/components/slider/utils.test.js

@@ -1 +1 @@
-"use strict";import{describe as a,it as m,expect as e}from"@jest/globals";import{clamp as o,getNearestSteppedValue as t}from"./utils";a("clamp \uD14C\uC2A4\uD2B8",()=>{m("min, max \uC774\uB0B4\uC758 \uAC12\uC774\uB77C\uBA74 \uB0B4\uBD80 \uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(12,10,100)).toBe(12)}),m("min\uBCF4\uB2E4 \uC791\uC73C\uBA74 min\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(5,10,100)).toBe(10)}),m("max\uBCF4\uB2E4 \uD06C\uBA74 max\uB97C \uBC18\uD658\uD55C\uB2E4",()=>{e(o(120,10,100)).toBe(100)})}),a("getNearestSteppedValue",()=>{m("min, max \uB0B4\uC5D0 \uC788\uB2E4\uBA74 \uCD08\uAE30\uAC12\uC5D0\uC11C step\uB9CC\uD07C \uC6C0\uC9C1\uC778 \uAC12\uC744 \uAD6C\uD55C\uB2E4",()=>{e(t(2,-.5,100,3)).toBe(2.5),e(t(-8,-100,100,5)).toBe(-10),e(t(-6,-100,100,5)).toBe(-5),e(t(3,-100,100,5)).toBe(5),e(t(2,-100,100,5)).toBe(0),e(t(-30+3.5781601728019066,-100,100,10)).toBe(-30)}),m("min, max\uAC12\uC744 \uBC97\uC5B4\uB098\uBA74 min, max\uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(t(-6.2,-2.5,100,3)).toBe(-2.5),e(t(106.2,-2.5,100,3)).toBe(100)})});
+"use strict";import{describe as a,it as m,expect as e}from"@jest/globals";import{clamp as o,getNearestSteppedValue as t}from"./utils.js";a("clamp \uD14C\uC2A4\uD2B8",()=>{m("min, max \uC774\uB0B4\uC758 \uAC12\uC774\uB77C\uBA74 \uB0B4\uBD80 \uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(12,10,100)).toBe(12)}),m("min\uBCF4\uB2E4 \uC791\uC73C\uBA74 min\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(5,10,100)).toBe(10)}),m("max\uBCF4\uB2E4 \uD06C\uBA74 max\uB97C \uBC18\uD658\uD55C\uB2E4",()=>{e(o(120,10,100)).toBe(100)})}),a("getNearestSteppedValue",()=>{m("min, max \uB0B4\uC5D0 \uC788\uB2E4\uBA74 \uCD08\uAE30\uAC12\uC5D0\uC11C step\uB9CC\uD07C \uC6C0\uC9C1\uC778 \uAC12\uC744 \uAD6C\uD55C\uB2E4",()=>{e(t(2,-.5,100,3)).toBe(2.5),e(t(-8,-100,100,5)).toBe(-10),e(t(-6,-100,100,5)).toBe(-5),e(t(3,-100,100,5)).toBe(5),e(t(2,-100,100,5)).toBe(0),e(t(-30+3.5781601728019066,-100,100,10)).toBe(-30)}),m("min, max\uAC12\uC744 \uBC97\uC5B4\uB098\uBA74 min, max\uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(t(-6.2,-2.5,100,3)).toBe(-2.5),e(t(106.2,-2.5,100,3)).toBe(100)})});

package/dist/esm/components/stepper-row/StepperRow.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { StepperRowAssetFrame } from './StepperRowAssetFrame';
-import { StepperRowNumberIcon } from './StepperRowNumberIcon';
-import { StepperRowRightArrow } from './StepperRowRightArrow';
-import { StepperRowRightButton } from './StepperRowRightButton';
-import { StepperRowTexts } from './StepperRowTexts';
+import type { ReactNode } from 'react';
+import { StepperRowAssetFrame } from './StepperRowAssetFrame.js';
+import { StepperRowNumberIcon } from './StepperRowNumberIcon.js';
+import { StepperRowRightArrow } from './StepperRowRightArrow.js';
+import { StepperRowRightButton } from './StepperRowRightButton.js';
+import { StepperRowTexts } from './StepperRowTexts.js';
 interface StepperRowProps {
     /**
      * `StepperRow` 컴포넌트의 왼쪽 영역에 표시될 컴포넌트를 지정해요. 주로 `StepperRow.NumberIcon`나 `StepperRow.AssetFrame` 컴포넌트가 사용돼요.

package/dist/esm/components/stepper-row/StepperRow.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useFontScaleCondition as s,useAdaptive as x}from"../../core";import{StyleSheet as C,View as e}from"react-native";import{a11yCondition as p}from"./constants/a11yCondition";import{StepperRowAssetFrame as y}from"./StepperRowAssetFrame";import{StepperRowContextProvider as w,useStepperRowContext as T}from"./StepperRowContext";import{StepperRowNumberIcon as A}from"./StepperRowNumberIcon";import{StepperRowRightArrow as B}from"./StepperRowRightArrow";import{StepperRowRightButton as S}from"./StepperRowRightButton";import{StepperRowTexts as D}from"./StepperRowTexts";import{getCenterPaddingTop as P,getRightPaddingTop as b}from"./utils/padding";export function StepperRow(n){return o(w,{children:o(j,{...n})})}function j({left:n,center:c,right:g,hideLine:a=!1}){const i=T(),d=i.right?.type==="button",m=s(p.center),l=s(p.rightButtonAlign)&&d,f=s(p.rightButtonPaddingTop)&&d,h=P(i.left,i.center),u=b(i.left,i.right),R=x();return r(e,{style:t.rootCss,children:[r(e,{style:t.leftCss,children:[o(e,{children:n}),!a&&o(e,{style:[t.lineCss,{backgroundColor:R.grey200}]})]}),r(e,{style:[t.centerRightCss,l&&t.a11yCenterRightButtonAlign],children:[o(e,{style:[t.centerCss,m&&t.a11yCenter,{paddingTop:h}],children:c}),g&&o(e,{style:[t.rightCss,{paddingTop:f?0:u},l&&t.a11yRightButtonAlign],children:g})]})]})}StepperRow.Texts=D,StepperRow.NumberIcon=A,StepperRow.AssetFrame=y,StepperRow.RightArrow=B,StepperRow.RightButton=S;const t=C.create({rootCss:{flexDirection:"row",paddingVertical:3,paddingHorizontal:24},leftCss:{flexDirection:"column",alignItems:"center",paddingRight:14},lineCss:{flexDirection:"row",width:2,minHeight:16,flex:1,borderRadius:1,marginTop:6},centerRightCss:{flex:1,flexDirection:"row",paddingBottom:16},centerCss:{flexDirection:"column",flex:1},rightCss:{flexDirection:"row",paddingLeft:12},a11yCenter:{flexDirection:"row",paddingTop:0},a11yCenterRightButtonAlign:{flexDirection:"column"},a11yRightButtonAlign:{flexDirection:"row",paddingTop:12,paddingLeft:0,paddingRight:0,paddingBottom:0}});
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useFontScaleCondition as s,useAdaptive as x}from"../../core/index.js";import{StyleSheet as C,View as e}from"react-native";import{a11yCondition as p}from"./constants/a11yCondition.js";import{StepperRowAssetFrame as y}from"./StepperRowAssetFrame.js";import{StepperRowContextProvider as w,useStepperRowContext as T}from"./StepperRowContext.js";import{StepperRowNumberIcon as A}from"./StepperRowNumberIcon.js";import{StepperRowRightArrow as B}from"./StepperRowRightArrow.js";import{StepperRowRightButton as S}from"./StepperRowRightButton.js";import{StepperRowTexts as D}from"./StepperRowTexts.js";import{getCenterPaddingTop as P,getRightPaddingTop as b}from"./utils/padding.js";export function StepperRow(n){return o(w,{children:o(j,{...n})})}function j({left:n,center:c,right:g,hideLine:a=!1}){const i=T(),d=i.right?.type==="button",m=s(p.center),l=s(p.rightButtonAlign)&&d,f=s(p.rightButtonPaddingTop)&&d,h=P(i.left,i.center),u=b(i.left,i.right),R=x();return r(e,{style:t.rootCss,children:[r(e,{style:t.leftCss,children:[o(e,{children:n}),!a&&o(e,{style:[t.lineCss,{backgroundColor:R.grey200}]})]}),r(e,{style:[t.centerRightCss,l&&t.a11yCenterRightButtonAlign],children:[o(e,{style:[t.centerCss,m&&t.a11yCenter,{paddingTop:h}],children:c}),g&&o(e,{style:[t.rightCss,{paddingTop:f?0:u},l&&t.a11yRightButtonAlign],children:g})]})]})}StepperRow.Texts=D,StepperRow.NumberIcon=A,StepperRow.AssetFrame=y,StepperRow.RightArrow=B,StepperRow.RightButton=S;const t=C.create({rootCss:{flexDirection:"row",paddingVertical:3,paddingHorizontal:24},leftCss:{flexDirection:"column",alignItems:"center",paddingRight:14},lineCss:{flexDirection:"row",width:2,minHeight:16,flex:1,borderRadius:1,marginTop:6},centerRightCss:{flex:1,flexDirection:"row",paddingBottom:16},centerCss:{flexDirection:"column",flex:1},rightCss:{flexDirection:"row",paddingLeft:12},a11yCenter:{flexDirection:"row",paddingTop:0},a11yCenterRightButtonAlign:{flexDirection:"column"},a11yRightButtonAlign:{flexDirection:"row",paddingTop:12,paddingLeft:0,paddingRight:0,paddingBottom:0}});

package/dist/esm/components/stepper-row/StepperRowAssetFrame.d.ts

@@ -1,5 +1,5 @@
-import { Asset } from '../asset';
-import { ComponentProps } from 'react';
+import { Asset } from '../asset/index.js';
+import type { ComponentProps } from 'react';
 type StepperRowAssetFrameProps = ComponentProps<typeof Asset['Frame']>;
 export declare function StepperRowAssetFrame({ shape, ...props }: StepperRowAssetFrameProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/stepper-row/StepperRowAssetFrame.js

@@ -1 +1 @@
-"use strict";import{jsx as f}from"react/jsx-runtime";import{Asset as p,frameShape as o}from"../asset";import{useFontScaleCondition as c}from"../../core";import{useMemo as u}from"react";import{a11yCondition as l}from"./constants/a11yCondition";import{useUpdateStepperRowLeft as C}from"./StepperRowContext";export function StepperRowAssetFrame({shape:t,...i}){const e=t.width===32;C({type:e?"asset32":"asset40"});const s=c(l.leftAsset),n=u(()=>{const r=t.radius===9999,m=e&&!r,a=e&&r;return m?o.CleanW40:a?o.CircleMedium:t},[e,t]);return f(p.Frame,{shape:s?n:t,...i})}
+"use strict";import{jsx as f}from"react/jsx-runtime";import{Asset as p,frameShape as o}from"../asset/index.js";import{useFontScaleCondition as c}from"../../core/index.js";import{useMemo as u}from"react";import{a11yCondition as l}from"./constants/a11yCondition.js";import{useUpdateStepperRowLeft as C}from"./StepperRowContext.js";export function StepperRowAssetFrame({shape:t,...i}){const e=t.width===32;C({type:e?"asset32":"asset40"});const s=c(l.leftAsset),n=u(()=>{const r=t.radius===9999,m=e&&!r,a=e&&r;return m?o.CleanW40:a?o.CircleMedium:t},[e,t]);return f(p.Frame,{shape:s?n:t,...i})}

package/dist/esm/components/stepper-row/StepperRowContext.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type Left = {
     type: 'asset32' | 'asset40' | 'numberIcon';
 };

package/dist/esm/components/stepper-row/StepperRowNumberIcon.js

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{Asset as e}from"../asset";import{useFontScaleCondition as a,useColorPreference as p}from"../../core";import{a11yCondition as s}from"./constants/a11yCondition";import{useUpdateStepperRowLeft as m}from"./StepperRowContext";const c=e.frameShape.CleanW32,i=e.frameShape.CleanW40;export function StepperRowNumberIcon({number:o}){m({type:"numberIcon"});const r=a(s.leftAsset),{colorPreference:t}=p();return n(e.Icon,{frameShape:r?i:c,name:`icon-step${o}-rounded-${t}`,accessibilityLabel:`${o}\uBC88`})}
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Asset as e}from"../asset/index.js";import{useFontScaleCondition as a,useColorPreference as p}from"../../core/index.js";import{a11yCondition as s}from"./constants/a11yCondition.js";import{useUpdateStepperRowLeft as m}from"./StepperRowContext.js";const c=e.frameShape.CleanW32,i=e.frameShape.CleanW40;export function StepperRowNumberIcon({number:o}){m({type:"numberIcon"});const r=a(s.leftAsset),{colorPreference:t}=p();return n(e.Icon,{frameShape:r?i:c,name:`icon-step${o}-rounded-${t}`,accessibilityLabel:`${o}\uBC88`})}

package/dist/esm/components/stepper-row/StepperRowRightArrow.d.ts

@@ -1,4 +1,4 @@
-import { FrameShapeType } from '../asset/types';
+import type { FrameShapeType } from '../asset/types.js';
 export interface StepperRowRightArrowProps {
     /**
      * 아이콘의 이름을 지정해요.

package/dist/esm/components/stepper-row/StepperRowRightArrow.js

@@ -1 +1 @@
-"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core";import{Asset as m}from"../asset";import{useUpdateStepperRowRight as a}from"./StepperRowContext";export function StepperRowRightArrow({name:r,color:o,frameShape:t}){const e=i();return a({type:"arrow"}),p(m.Icon,{name:r??"icon-arrow-right-mono",color:o??e.grey400,style:{marginRight:-8},frameShape:t})}
+"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core/index.js";import{Asset as m}from"../asset/index.js";import{useUpdateStepperRowRight as a}from"./StepperRowContext.js";export function StepperRowRightArrow({name:r,color:o,frameShape:t}){const e=i();return a({type:"arrow"}),p(m.Icon,{name:r??"icon-arrow-right-mono",color:o??e.grey400,style:{marginRight:-8},frameShape:t})}

package/dist/esm/components/stepper-row/StepperRowRightButton.d.ts

@@ -1,5 +1,5 @@
-import { Button } from '../button';
-import { ComponentProps } from 'react';
+import { Button } from '../button/index.js';
+import type { ComponentProps } from 'react';
 type StepperRowRightButtonProps = ComponentProps<typeof Button>;
 export declare function StepperRowRightButton({ size, type, ...restProps }: StepperRowRightButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/stepper-row/StepperRowRightButton.js

@@ -1 +1 @@
-"use strict";import{jsx as p}from"react/jsx-runtime";import{Button as e}from"../button";import{useUpdateStepperRowRight as i}from"./StepperRowContext";export function StepperRowRightButton({size:t="tiny",type:o="primary",...r}){return i({type:"button"}),p(e,{size:t,type:o,...r})}
+"use strict";import{jsx as p}from"react/jsx-runtime";import{Button as e}from"../button/index.js";import{useUpdateStepperRowRight as i}from"./StepperRowContext.js";export function StepperRowRightButton({size:t="tiny",type:o="primary",...r}){return i({type:"button"}),p(e,{size:t,type:o,...r})}

package/dist/esm/components/stepper-row/StepperRowTexts.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Text } from '../paragraph';
+import type { ComponentProps, ReactNode } from 'react';
+import { Text } from '../paragraph/index.js';
 interface StepperRowTextsProps {
     /**
      * `StepperRow.Texts` 컴포넌트의 텍스트의 타입을 설정해요. 타이틀과 설명의 스타일이 타입에 따라 달라져요.

package/dist/esm/components/stepper-row/StepperRowTexts.js

@@ -1 +1 @@
-"use strict";import{jsx as i,jsxs as u}from"react/jsx-runtime";import{Children as a,cloneElement as c,isValidElement as E}from"react";import{View as s}from"react-native";import{useAdaptive as T}from"../../core";import{Text as p}from"../paragraph";import{useUpdateStepperRowCenter as W}from"./StepperRowContext";const g=t=>typeof t=="string"||typeof t=="number",m=t=>E(t)&&(t.type===p||t.type===p),w={A:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},B:{title:{typography:"t4",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},C:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t7",fontWeight:"medium"}}};export function StepperRowTexts({type:t,title:l,description:e,titleProps:f,descriptionProps:d}){const o=T();W({type:t,hasDescription:e!=null});const r=a.only(g(l)?i(p,{color:o.grey800,children:l}):l),n=e?a.only(g(e)?i(p,{style:{color:o.grey600,paddingTop:2},children:e}):e):void 0,y=w[t],h=m(r)?c(r,{...y.title,color:o.grey800,...r.props,...f}):r,x=m(n)?c(n,{...y.description,color:o.grey600,...n.props,...d}):n;return u(s,{children:[i(s,{style:{flexDirection:"row"},children:h}),e&&i(s,{style:{flexDirection:"row"},children:x})]})}
+"use strict";import{jsx as i,jsxs as u}from"react/jsx-runtime";import{Children as a,cloneElement as c,isValidElement as E}from"react";import{View as s}from"react-native";import{useAdaptive as T}from"../../core/index.js";import{Text as p}from"../paragraph/index.js";import{useUpdateStepperRowCenter as W}from"./StepperRowContext.js";const g=t=>typeof t=="string"||typeof t=="number",m=t=>E(t)&&(t.type===p||t.type===p),w={A:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},B:{title:{typography:"t4",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},C:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t7",fontWeight:"medium"}}};export function StepperRowTexts({type:t,title:l,description:e,titleProps:f,descriptionProps:d}){const o=T();W({type:t,hasDescription:e!=null});const r=a.only(g(l)?i(p,{color:o.grey800,children:l}):l),n=e?a.only(g(e)?i(p,{style:{color:o.grey600,paddingTop:2},children:e}):e):void 0,y=w[t],h=m(r)?c(r,{...y.title,color:o.grey800,...r.props,...f}):r,x=m(n)?c(n,{...y.description,color:o.grey600,...n.props,...d}):n;return u(s,{children:[i(s,{style:{flexDirection:"row"},children:h}),e&&i(s,{style:{flexDirection:"row"},children:x})]})}

package/dist/esm/components/stepper-row/constants/a11yCondition.d.ts

@@ -1,2 +1,2 @@
-import { A11yCondition } from '../../../core';
+import type { A11yCondition } from '../../../core/index.js';
 export declare const a11yCondition: Record<'leftAsset' | 'center' | 'rightArrow' | 'rightButtonAlign' | 'rightButtonPaddingTop', A11yCondition>;

package/dist/esm/components/stepper-row/index.d.ts

@@ -1 +1 @@
-export { StepperRow } from './StepperRow';
+export { StepperRow } from './StepperRow.js';

package/dist/esm/components/stepper-row/index.js

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

package/dist/esm/components/stepper-row/utils/padding.d.ts

@@ -1,3 +1,3 @@
-import { Center, Left, Right } from '../StepperRowContext';
+import type { Center, Left, Right } from '../StepperRowContext.js';
 export declare function getCenterPaddingTop(left: Left | undefined, center: Center | undefined): number;
 export declare function getRightPaddingTop(left: Left | undefined, right: Right | undefined): number;

package/dist/esm/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { AccessibilityProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { AccessibilityProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
 interface SwitchProp extends AccessibilityProps {
     /**
      * `Switch` 컴포넌트의 켜짐과 꺼짐 상태를 표현해요.  주로 `Switch` 컴포넌트의 상태를 컴포넌트 외부에서 관리할 때, `onCheckedChange` 속성과 함께 사용해요.

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

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

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

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

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

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

package/dist/esm/components/switch/useSwitchAnimation.d.ts

@@ -1,4 +1,5 @@
-import { Animated, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 type AnimationState = 'off' | 'on';
 export declare function useSwitchAnimation({ animationState, disabled, }: {
     animationState: AnimationState;

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

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

package/dist/esm/components/tab/FluidTab.d.ts

@@ -1,3 +1,3 @@
-import { BaseTabProps } from './type';
+import type { BaseTabProps } from './type.js';
 export type FullTabProps = BaseTabProps;
 export declare function FluidTab({ defaultValue, value: _value, children, onChange: _onChange, style, size, ...viewProps }: FullTabProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/components/tab/FullTab.d.ts

@@ -1,3 +1,3 @@
-import { BaseTabProps } from './type';
+import type { BaseTabProps } from './type.js';
 export type FullTabProps = BaseTabProps;
 export declare function FullTab({ defaultValue, value: _value, children, onChange: _onChange, style, size, ...viewProps }: FullTabProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/esm/components/tab/Tab.d.ts

@@ -1,5 +1,5 @@
-import { TabItem } from './TabItem';
-import { BaseTabProps } from './type';
+import { TabItem } from './TabItem.js';
+import type { BaseTabProps } from './type.js';
 export type TabProps = {
     /**
      * 이 값이 `true`일 때 각 아이템의 너비가 글자 수에 맞춰져요. 아이템의 전체 크기가 `Tab`의 컨테이너를 넘어가면 가로 스크롤이 생겨요. `false`라면 최대 4개의 아이템 사용을 권장해요.

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

@@ -1 +1 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{FullTab as t}from"./FullTab";import{FluidTab as i}from"./FluidTab";import{TabItem as f}from"./TabItem";export function Tab({fluid:o,...r}){return o?m(i,{...r}):m(t,{...r})}Tab.Item=f;
+"use strict";import{jsx as m}from"react/jsx-runtime";import{FullTab as t}from"./FullTab.js";import{FluidTab as i}from"./FluidTab.js";import{TabItem as f}from"./TabItem.js";export function Tab({fluid:o,...r}){return o?m(i,{...r}):m(t,{...r})}Tab.Item=f;

package/dist/esm/components/tab/TabItem.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { PressableProps, StyleProp, ViewStyle } from 'react-native';
-import { TabValue } from './TabContext';
+import type { ReactNode } from 'react';
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { TabValue } from './TabContext.js';
 export interface TabItemProps {
     /**
      * 이 값이 `true`일 때 `Tab.Item`의 우측 상단에 빨간 동그라미가 표시돼요. 중요한 알림이나 새로운 업데이트가 있음을 사용자에게 시각적으로 전달할 수 있어요.

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

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