@toss/tds-react-native 1.0.0

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Item=Item;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../../core"),prevent_font_scaling_1=require("../../../../extensions/prevent-font-scaling"),pressable_effect_1=require("../../../../interactions/pressable-effect"),paragraph_1=require("../../../paragraph"),AlignmentContext_1=require("../../contexts/AlignmentContext"),RadioContext_1=require("../../contexts/RadioContext"),useItemStyle_1=require("./useItemStyle");function Item({style:d,children:y,value:n,disabled:x=!1,size:f,...p}){const{ensureFluidAlignment:g}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),[s,m]=(0,react_1.useState)(null),{setSelectedValue:a,selectedValue:_,setSelectedElementLayout:i,disabled:b}=(0,react_1.useContext)(RadioContext_1.RadioContext),t=b||x,o=(0,useItemStyle_1.useItemStyle)({size:f,disabled:t}),r=(0,core_1.useAdaptive)(),e=_===n,h=(0,react_1.useCallback)(()=>{a(n)},[n,a]),c=(0,react_1.useCallback)(()=>{s!=null&&i(s)},[s,i]);return(0,react_1.useEffect)(()=>{e&&c()},[e,c]),(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect,{onPress:t||e?void 0:h,onLayout:l=>{const u=l.nativeEvent.layout;m(u),e&&i(u)},style:[o.containerStyle,d],accessibilityRole:"radio",accessibilityValue:{text:n},accessibilityState:{selected:e,disabled:t},disabled:t,...p,children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{justifyContent:"center",alignItems:"center"},children:(0,jsx_runtime_1.jsx)(prevent_font_scaling_1.PreventFontScaling,{limit:140,children:(0,jsx_runtime_1.jsx)(paragraph_1.Root,{typography:o.labelTypography,style:o.labelStyle,onTextLayout:l=>{g(l.nativeEvent.lines.length>1)},children:(0,jsx_runtime_1.jsx)(paragraph_1.Text,{color:t?r.grey400:e?r.grey800:r.grey600,fontWeight:e?"semiBold":"medium",children:y})})})})})}

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

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

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

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./Item"),exports);

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

@@ -0,0 +1,9 @@
+import { ViewProps } from 'react-native';
+import { ItemProps } from './Item';
+interface ItemStyles {
+    containerStyle: ViewProps['style'];
+    labelStyle: ViewProps['style'];
+    labelTypography: 't6' | 't5';
+}
+export declare function useItemStyle(props: Omit<ItemProps, 'value'>): ItemStyles;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useItemStyle=useItemStyle;const react_1=require("react"),react_native_1=require("react-native"),AlignmentContext_1=require("../../contexts/AlignmentContext"),SizeContext_1=require("../../contexts/SizeContext"),containerStyle={zIndex:1,overflow:"hidden",borderRadius:12},containerStyleFixed={flex:1},containerStyleFluid={flexGrow:0,flexShrink:0,flexBasis:"auto"},labelStyleFixed={display:"flex",alignItems:"center",justifyContent:"center"},labelStyleSmall={paddingVertical:5,paddingHorizontal:14},labelStyleLarge={paddingVertical:7,paddingHorizontal:14};function useItemStyle(l){const o=(0,react_1.useContext)(SizeContext_1.SizeContext),{alignment:e}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),t=l.size??o,n=t==="small"?labelStyleSmall:labelStyleLarge;return{containerStyle:react_native_1.StyleSheet.compose(containerStyle,e==="fixed"?containerStyleFixed:containerStyleFluid),labelStyle:e==="fixed"?react_native_1.StyleSheet.compose(labelStyleFixed,n):n,labelTypography:t==="small"?"t6":"t5"}}

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

@@ -0,0 +1,6 @@
+import { View, ViewProps } from 'react-native';
+interface Props extends ViewProps {
+}
+export type ItemGroupProps = Props;
+export declare const ItemGroup: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ItemGroup=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../../core"),AlignmentContext_1=require("../../contexts/AlignmentContext"),RadioContext_1=require("../../contexts/RadioContext"),ScrollContext_1=require("../../contexts/ScrollContext"),useItemGroupStyle_1=require("./useItemGroupStyle");exports.ItemGroup=(0,react_1.forwardRef)(function({style:n,children:o},c){const{ref:e,scrollHandlers:s}=(0,react_1.useContext)(ScrollContext_1.ScrollContext),{selectedElementLayout:t}=(0,react_1.useContext)(RadioContext_1.RadioContext),{alignment:l}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),i=(0,core_1.useAdaptive)(),u=(0,useItemGroupStyle_1.useItemGroupStyle)();return(0,react_1.useEffect)(()=>{if(e!=null&&e.current&&t){const r=Math.max(0,t.x-t.width/2);e.current.scrollTo({x:r,animated:!0})}},[e,t]),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[u.containerStyle,{backgroundColor:i.greyOpacity100},n],accessibilityRole:"radiogroup",ref:c,children:l==="fluid"?(0,jsx_runtime_1.jsx)(react_native_1.Animated.ScrollView,{scrollEventThrottle:16,onScroll:r=>{s.forEach(a=>{a(r)})},ref:e,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:o}):o})});

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

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

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

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./ItemGroup"),exports);

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

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+interface ItemGroupStyles {
+    containerStyle: ViewProps['style'];
+}
+export declare function useItemGroupStyle(): ItemGroupStyles;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useItemGroupStyle=useItemGroupStyle;const react_1=require("react"),react_native_1=require("react-native"),AlignmentContext_1=require("../../contexts/AlignmentContext"),SizeContext_1=require("../../contexts/SizeContext"),containerStyleBase={position:"relative",width:"100%",display:"flex",flexDirection:"row",alignItems:"flex-start",alignSelf:"flex-start",justifyContent:"flex-start"},containerStyleSmall={padding:3,borderRadius:10},containerStyleLarge={paddingHorizontal:5,paddingVertical:4,borderRadius:15},containerStyleFixed={flexWrap:"nowrap"};function useItemGroupStyle(){const{alignment:t}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),e=(0,react_1.useContext)(SizeContext_1.SizeContext)==="small"?containerStyleSmall:containerStyleLarge;return{containerStyle:t==="fixed"?react_native_1.StyleSheet.compose(containerStyleBase,react_native_1.StyleSheet.compose(e,containerStyleFixed)):react_native_1.StyleSheet.compose(containerStyleBase,e)}}

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

@@ -0,0 +1,20 @@
+import type { RadioGroupProps } from '@react-stately/radio';
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+interface Props extends Omit<RadioGroupProps, 'isDisabled'> {
+    value: string;
+    defaultValue?: string;
+    indicator?: ReactNode;
+    previousButton?: ReactNode;
+    gradation?: ReactNode;
+    controller?: ReactNode;
+    size?: 'small' | 'large';
+    alignment?: 'fixed' | 'fluid';
+    name: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    style?: ViewProps['style'];
+    children: ReactNode;
+}
+export declare function RootBase({ value, defaultValue, indicator, previousButton, gradation, controller, size, alignment: _alignment, disabled, onChange, style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RootBase=RootBase;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),AlignmentContext_1=require("../contexts/AlignmentContext"),IndicatorContext_1=require("../contexts/IndicatorContext"),RadioContext_1=require("../contexts/RadioContext"),ScrollContext_1=require("../contexts/ScrollContext"),SizeContext_1=require("../contexts/SizeContext"),Indicator_1=require("./Indicator"),ItemGroup_1=require("./ItemGroup"),ScrollControlOverlay_1=require("./ScrollControlOverlay/ScrollControlOverlay");function RootBase({value:e,defaultValue:t,indicator:o=(0,jsx_runtime_1.jsx)(Indicator_1.Indicator,{}),previousButton:_,gradation:m,controller:i=(0,jsx_runtime_1.jsx)(ScrollControlOverlay_1.ScrollControlOverlay,{}),size:l="large",alignment:s="fixed",disabled:c=!1,onChange:a,style:d,children:u,...x}){const[n,C]=(0,react_1.useState)(s),v=(0,react_1.useCallback)(r=>{C(j=>j==="fluid"||r?"fluid":"fixed")},[]);return(0,jsx_runtime_1.jsx)(AlignmentContext_1.AlignmentContext.Provider,{value:{alignment:n,ensureFluidAlignment:v},children:(0,jsx_runtime_1.jsx)(SizeContext_1.SizeContext.Provider,{value:l,children:(0,jsx_runtime_1.jsx)(ScrollContext_1.ScrollContextProvider,{children:(0,jsx_runtime_1.jsx)(RadioContext_1.RadioContextProvider,{selectedValue:e,setSelectedValue:r=>{a?.(r)},disabled:c,name:x.name,children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContextProvider,{children:(0,jsx_runtime_1.jsx)(Wrapper,{style:d,children:(0,jsx_runtime_1.jsxs)(Container,{children:[(0,jsx_runtime_1.jsxs)(ItemGroup_1.ItemGroup,{children:[u,o]}),n==="fluid"?i:void 0]})})})})})})})}function Wrapper({style:e,...t}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{position:"relative",width:"100%",paddingHorizontal:24},e],...t})}function Container({style:e,...t}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{position:"relative",width:"100%"},e],...t})}

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'react-native';
+interface EdgeGradientProps extends Omit<ViewProps, 'children'> {
+    exiting: boolean;
+}
+export declare function LeftEdgeGradient({ style, exiting, ...props }: EdgeGradientProps): import("react/jsx-runtime").JSX.Element;
+export declare function RightEdgeGradient({ style, exiting, ...props }: EdgeGradientProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'react-native';
+interface Props {
+    style?: ViewProps['style'];
+    onPress: () => void;
+}
+export declare function PreviousButton({ onPress, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PreviousButton=PreviousButton;const jsx_runtime_1=require("react/jsx-runtime"),icon_1=require("../../../icon"),core_1=require("../../../../core"),react_native_1=require("react-native"),useIndicatorBackground_1=require("../../hooks/useIndicatorBackground");function PreviousButton({onPress:e,style:r}){const o=(0,core_1.useAdaptive)(),{colorPreference:t}=(0,core_1.useColorPreference)(),s=(0,useIndicatorBackground_1.useIndicatorBackground)();return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{accessibilityRole:"button",style:[{justifyContent:"center",alignItems:"center",left:-12,top:0,borderRadius:12,backgroundColor:s,width:24,height:24,padding:0,shadowColor:t==="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:(0,jsx_runtime_1.jsx)(icon_1.Icon,{size:12,name:"icon-arrow-left-small",color:o.grey600})})}

package/dist/cjs/components/segmented-control/components/ScrollControlOverlay/ScrollControlOverlay.d.ts

@@ -0,0 +1 @@
+export declare function ScrollControlOverlay(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ScrollControlOverlay=ScrollControlOverlay;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),spring_1=require("../../constants/spring"),ScrollContext_1=require("../../contexts/ScrollContext"),EdgeGradient_1=require("./EdgeGradient"),PreviousButton_1=require("./PreviousButton");function ScrollControlOverlay(){const{ref:s,scrollHandlers:n}=(0,react_1.useContext)(ScrollContext_1.ScrollContext),[t,i]=(0,react_1.useState)(!1),[a,c]=(0,react_1.useState)(!1),e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,u=e.interpolate({inputRange:[0,1],outputRange:[-5,0]});(0,react_1.useEffect)(()=>{function d(r){const f=r.nativeEvent.contentSize.width,x=r.nativeEvent.contentOffset.x,g=r.nativeEvent.layoutMeasurement.width,o=x/Math.max(0,f-g);i(o>.05),c(o<=.95)}return n.add(d),()=>{n.clear()}},[n]);const l=()=>{s?.current?.scrollTo({x:0})};return(0,react_1.useEffect)(()=>()=>{react_native_1.Animated.spring(e,{toValue:t?0:1,useNativeDriver:!0,...spring_1.SPRING_OPTION}).start()},[e,t]),(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(EdgeGradient_1.LeftEdgeGradient,{exiting:t}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{pointerEvents:t?"auto":"none",style:[buttonContainerStyle,{transform:[{translateX:u}],opacity:e}],children:(0,jsx_runtime_1.jsx)(PreviousButton_1.PreviousButton,{onPress:l})})]}),(0,jsx_runtime_1.jsx)(EdgeGradient_1.RightEdgeGradient,{exiting:a})]})}const buttonContainerStyle={zIndex:1,position:"absolute",left:0,top:0,bottom:0,display:"flex",justifyContent:"center",alignItems:"center"};

package/dist/cjs/components/segmented-control/constants/spring.d.ts

@@ -0,0 +1,4 @@
+export declare const SPRING_OPTION: {
+    stiffness: number;
+    damping: number;
+};

package/dist/cjs/components/segmented-control/constants/spring.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPRING_OPTION=void 0,exports.SPRING_OPTION={stiffness:1e3,damping:52};

package/dist/cjs/components/segmented-control/contexts/AlignmentContext.d.ts

@@ -0,0 +1,4 @@
+export declare const AlignmentContext: import("react").Context<{
+    alignment?: "fixed" | "fluid";
+    ensureFluidAlignment: (forceFluid: boolean) => void;
+}>;

package/dist/cjs/components/segmented-control/contexts/AlignmentContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AlignmentContext=void 0;const react_1=require("react");exports.AlignmentContext=(0,react_1.createContext)({ensureFluidAlignment:()=>null});

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface Options {
+    indicatorX: number;
+    indicatorWidth: number;
+    setIndicatorX: (x: number) => void;
+    setIndicatorWidth: (width: number) => void;
+}
+export declare const IndicatorContext: import("react").Context<Options>;
+interface Props {
+    children: ReactNode;
+}
+export declare function IndicatorContextProvider({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/segmented-control/contexts/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IndicatorContext=void 0,exports.IndicatorContextProvider=IndicatorContextProvider;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react");exports.IndicatorContext=(0,react_1.createContext)({indicatorX:0,indicatorWidth:0,setIndicatorX:()=>{},setIndicatorWidth:()=>{}});function IndicatorContextProvider({children:r}){const[t,o]=(0,react_1.useState)(0),[e,i]=(0,react_1.useState)(0),n=(0,react_1.useMemo)(()=>({indicatorX:t,indicatorWidth:e,setIndicatorX:o,setIndicatorWidth:i}),[t,e]);return(0,jsx_runtime_1.jsx)(exports.IndicatorContext.Provider,{value:n,children:r})}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { LayoutRectangle } from 'react-native';
+interface RadioGroupState {
+    name: string;
+    selectedValue: string | undefined;
+    setSelectedValue: (value: string) => void;
+    disabled: boolean;
+}
+interface Options extends RadioGroupState {
+    selectedElementLayout: LayoutRectangle | null;
+    setSelectedElementLayout: (layout: LayoutRectangle) => void;
+}
+export declare const RadioContext: import("react").Context<Options>;
+interface Props extends RadioGroupState {
+    children: ReactNode;
+}
+export declare function RadioContextProvider({ children, ...radioContextValue }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/segmented-control/contexts/RadioContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RadioContext=void 0,exports.RadioContextProvider=RadioContextProvider;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react");exports.RadioContext=(0,react_1.createContext)({name:"",selectedValue:"",setSelectedValue:()=>{},selectedElementLayout:null,setSelectedElementLayout:()=>{},disabled:!1});function RadioContextProvider({children:t,...e}){const[o,r]=(0,react_1.useState)(null),s=(0,react_1.useMemo)(()=>({...e,selectedElementLayout:o,setSelectedElementLayout:r}),[e]);return(0,jsx_runtime_1.jsx)(exports.RadioContext.Provider,{value:s,children:t})}

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

@@ -0,0 +1,13 @@
+import { ReactNode, RefObject } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+type ScrollHandlers = Set<(event: NativeSyntheticEvent<NativeScrollEvent>) => void>;
+interface ScrollContextValues {
+    ref: RefObject<ScrollView> | null;
+    scrollHandlers: ScrollHandlers;
+}
+export declare const ScrollContext: import("react").Context<ScrollContextValues>;
+interface Props {
+    children: ReactNode;
+}
+export declare function ScrollContextProvider({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/segmented-control/contexts/ScrollContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ScrollContext=void 0,exports.ScrollContextProvider=ScrollContextProvider;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react");exports.ScrollContext=(0,react_1.createContext)({ref:null,scrollHandlers:new Set});function ScrollContextProvider({children:e}){const r=(0,react_1.useRef)(null),t=(0,react_1.useRef)(new Set).current;return(0,jsx_runtime_1.jsx)(exports.ScrollContext.Provider,{value:{ref:r,scrollHandlers:t},children:e})}

package/dist/cjs/components/segmented-control/contexts/SizeContext.d.ts

@@ -0,0 +1,3 @@
+type Size = 'small' | 'large';
+export declare const SizeContext: import("react").Context<Size>;
+export {};

package/dist/cjs/components/segmented-control/contexts/SizeContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SizeContext=void 0;const react_1=require("react");exports.SizeContext=(0,react_1.createContext)("large");

package/dist/cjs/components/segmented-control/hooks/useIndicatorBackground.d.ts

@@ -0,0 +1 @@
+export declare function useIndicatorBackground(): string;

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SegmentedControl=void 0;const Item_1=require("./components/Item/Item"),Root_1=require("./components/Root");exports.SegmentedControl={Root:Root_1.RootBase,Item:Item_1.Item};

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

@@ -0,0 +1,8 @@
+import { View, type ViewProps } from 'react-native';
+import { type UseShadowProps } from './useShadow';
+export type ShadowBackgroundProps = {
+    shadow: UseShadowProps;
+} & ViewProps;
+export declare const ShadowBackground: import("react").ForwardRefExoticComponent<{
+    shadow: UseShadowProps;
+} & ViewProps & import("react").RefAttributes<View>>;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShadowBackground=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),useShadow_1=require("./useShadow");exports.ShadowBackground=(0,react_1.forwardRef)(function({shadow:t,...e},r){const o=(0,useShadow_1.useShadow)(t);return(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:r,...e,style:[e.style,styles.container,o]})});const styles=react_native_1.StyleSheet.create({container:{position:"absolute",width:"100%",height:"100%",top:0,left:0}});

package/dist/cjs/components/shadow/calculateElevation.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_ELEVATION = 145;
+export declare const ELEVATION_PROPOTION: Record<number, number>;
+/**
+ * @description shadow radius 값에 따른 elevation 값을 계산합니다.
+ */
+export declare const calculateElevation: (radius: number) => number;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calculateElevation=exports.ELEVATION_PROPOTION=exports.MAX_ELEVATION=void 0,exports.MAX_ELEVATION=145,exports.ELEVATION_PROPOTION={0:0,3:1,30:50,50:125,60:130,80:exports.MAX_ELEVATION};const calculateElevation=s=>{const t=Object.keys(exports.ELEVATION_PROPOTION).map(Number);let e=t.findIndex(c=>c>s);if(e===-1&&(e=t.length-1),e===0)return 0;const O=t[e-1],r=t[e],o=exports.ELEVATION_PROPOTION[O],n=exports.ELEVATION_PROPOTION[r];if(o===void 0||n===void 0)return 0;const E=o+(s-O)/(r-O)*(n-o);return E>exports.MAX_ELEVATION?exports.MAX_ELEVATION:E};exports.calculateElevation=calculateElevation;

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

@@ -0,0 +1,12 @@
+import { ColorPreference } from '../../core';
+import { ViewStyle } from 'react-native';
+import type { Shadow } from './types';
+type ShadowStyle = Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'> | Pick<ViewStyle, 'shadowColor' | 'elevation'>;
+/**
+ * @description 플랫폼에 따른 shadow style을 생성합니다.
+ * @returns iOS: { shadowColor, shadowOffset, shadowOpacity, shadowRadius }, Android: { shadowColor, elevation }
+ */
+export declare const generateShadowStyle: ({ offset, opacity, radius, colorPreference, ...colorProps }: Shadow & {
+    colorPreference?: ColorPreference;
+}) => ShadowStyle;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.generateShadowStyle=void 0;const react_native_1=require("react-native"),calculateElevation_1=require("./calculateElevation"),generateShadowStyle=({offset:t={x:0,y:0},opacity:l=1,radius:a,colorPreference:i="light",...e})=>{const o="color"in e?e.color:i==="light"?e.lightColor:e.darkColor;return react_native_1.Platform.OS==="ios"?{shadowColor:o,shadowOffset:{width:t.x??0,height:t.y??0},shadowOpacity:l,shadowRadius:a}:{shadowColor:o,elevation:(0,calculateElevation_1.calculateElevation)(a)}};exports.generateShadowStyle=generateShadowStyle;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useShadow=exports.shadow=exports.ShadowBackground=exports.calculateElevation=void 0;var calculateElevation_1=require("./calculateElevation");Object.defineProperty(exports,"calculateElevation",{enumerable:!0,get:function(){return calculateElevation_1.calculateElevation}});var ShadowBackground_1=require("./ShadowBackground");Object.defineProperty(exports,"ShadowBackground",{enumerable:!0,get:function(){return ShadowBackground_1.ShadowBackground}});var tokens_1=require("./tokens");Object.defineProperty(exports,"shadow",{enumerable:!0,get:function(){return tokens_1.shadow}});var useShadow_1=require("./useShadow");Object.defineProperty(exports,"useShadow",{enumerable:!0,get:function(){return useShadow_1.useShadow}});

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

@@ -0,0 +1,6 @@
+import type { TokenShadowProps } from './types';
+export type ShadowTokenStrength = 'tiny' | 'weak' | 'medium';
+export type ShadowTokenDirection = 'up' | 'down';
+type ShadowToken = (direction: ShadowTokenDirection) => TokenShadowProps;
+export declare const shadow: Record<ShadowTokenStrength, ShadowToken>;
+export {};

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

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

package/dist/cjs/components/shadow/types.d.ts

@@ -0,0 +1,17 @@
+type CommonShadowProps = {
+    opacity?: number;
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    radius: number;
+};
+export type TokenShadowProps = {
+    lightColor: string;
+    darkColor: string;
+} & CommonShadowProps;
+type CustomShadowProps = {
+    color: string;
+} & CommonShadowProps;
+export type Shadow = TokenShadowProps | CustomShadowProps;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

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

@@ -0,0 +1,7 @@
+import { Shadow } from './types';
+export type UseShadowProps = Shadow;
+/**
+ * @description 플랫폼에 따른 shadow style을 생성합니다.
+ * @returns iOS: { shadowColor, shadowOffset, shadowOpacity, shadowRadius }, Android: { elevation, shadowColor }
+ */
+export declare const useShadow: (shadow: UseShadowProps) => Pick<import("react-native").ViewStyle, "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius"> | Pick<import("react-native").ViewStyle, "elevation" | "shadowColor">;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useShadow=void 0;const core_1=require("../../core"),generateShadowStyle_1=require("./generateShadowStyle"),useShadow=e=>{const{colorPreference:o}=(0,core_1.useColorPreference)();return(0,generateShadowStyle_1.generateShadowStyle)({...e,colorPreference:o})};exports.useShadow=useShadow;

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+interface AnimateSkeletonProps extends PropsWithChildren<{}> {
+    /**
+     * @description 단위는 ms입니다. 500으로 지정시 스켈레톤을 미노출하여 화면전환을 최소화합니다
+     */
+    delay: 0 | 500;
+    withGradient: boolean;
+    withShimmer: boolean;
+}
+declare function AnimateSkeleton({ children, delay, withGradient, withShimmer }: AnimateSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default AnimateSkeleton;

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

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

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SkeletonBaseProps {
+    width?: ViewStyle['width'];
+    height?: ViewStyle['height'];
+    borderRadius?: ViewStyle['borderRadius'];
+    style?: StyleProp<ViewStyle>;
+}
+type SkeletonProps = PropsWithChildren<SkeletonBaseProps>;
+declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default Skeleton;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_native_1=require("react-native");function Skeleton({width:e,height:t,borderRadius:r=6,style:o}){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:e,height:t,borderRadius:r,backgroundColor:n.grey200},o]})}exports.default=Skeleton;

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

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

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimateSkeleton=exports.Skeleton=void 0;var Skeleton_1=require("./Skeleton");Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return __importDefault(Skeleton_1).default}});var AnimateSkeleton_1=require("./AnimateSkeleton");Object.defineProperty(exports,"AnimateSkeleton",{enumerable:!0,get:function(){return __importDefault(AnimateSkeleton_1).default}});

package/dist/cjs/components/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { View, ViewProps } from 'react-native';
+export interface SliderProps extends ViewProps {
+    min?: number;
+    max?: number;
+    value?: number;
+    /**
+     * 간격
+     * @note 양의 정수만 입력 가능합니다.
+     */
+    step?: number;
+    onChange?: (value: number) => void;
+    color?: string;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<View>>;

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Slider=void 0;var Slider_1=require("./Slider");Object.defineProperty(exports,"Slider",{enumerable:!0,get:function(){return Slider_1.Slider}});

package/dist/cjs/components/slider/styles.d.ts

@@ -0,0 +1,32 @@
+export declare const styles: {
+    slider: {
+        position: "relative";
+        height: number;
+    };
+    track: {
+        position: "absolute";
+        top: number;
+        right: number;
+        left: number;
+        height: number;
+        backgroundColor: string;
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    progress: {
+        position: "absolute";
+        height: "100%";
+        width: "100%";
+        left: "-100%";
+    };
+    thumb: {
+        position: "absolute";
+        top: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+    };
+};

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

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

package/dist/cjs/components/slider/useA11yMode.d.ts

@@ -0,0 +1 @@
+export declare function useScreenReaderMode(): boolean;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useScreenReaderMode=useScreenReaderMode;const react_1=require("react"),react_native_1=require("react-native");function useScreenReaderMode(){const[t,r]=(0,react_1.useState)(!1);return(0,react_1.useEffect)(()=>{const s=react_native_1.AccessibilityInfo.addEventListener("screenReaderChanged",e=>{r(e)});return react_native_1.AccessibilityInfo.isScreenReaderEnabled().then(e=>{r(e)}),()=>{s?.remove()}},[]),t}

package/dist/cjs/components/slider/utils.d.ts

@@ -0,0 +1,6 @@
+export declare function clamp(value: number, min?: number, max?: number): number;
+/**
+ * HTML input range의 값을 모사한 함수
+ * min, max값의 사이에 있다면 min/max값을 반환하고, 그외의 경우 min에서 가장 가까운 step만큼 움직인 값을 반환한다
+ */
+export declare function getNearestSteppedValue(value: number, min: number, max: number, step: number): number;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.clamp=clamp,exports.getNearestSteppedValue=getNearestSteppedValue;function clamp(r,t=-1/0,o=1/0){return Math.min(Math.max(r,t),o)}function getNearestSteppedValue(r,t,o,e){const n=(r-t)%e,a=Math.sign(n)*(Math.abs(n)<e/2?0:e),s=Math.floor((r-t)/e)*e,u=t+s+a;return clamp(u,t,o)}

package/dist/cjs/components/slider/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const globals_1=require("@jest/globals"),utils_1=require("./utils");(0,globals_1.describe)("clamp \uD14C\uC2A4\uD2B8",()=>{(0,globals_1.it)("min, max \uC774\uB0B4\uC758 \uAC12\uC774\uB77C\uBA74 \uB0B4\uBD80 \uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{(0,globals_1.expect)((0,utils_1.clamp)(12,10,100)).toBe(12)}),(0,globals_1.it)("min\uBCF4\uB2E4 \uC791\uC73C\uBA74 min\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{(0,globals_1.expect)((0,utils_1.clamp)(5,10,100)).toBe(10)}),(0,globals_1.it)("max\uBCF4\uB2E4 \uD06C\uBA74 max\uB97C \uBC18\uD658\uD55C\uB2E4",()=>{(0,globals_1.expect)((0,utils_1.clamp)(120,10,100)).toBe(100)})}),(0,globals_1.describe)("getNearestSteppedValue",()=>{(0,globals_1.it)("min, max \uB0B4\uC5D0 \uC788\uB2E4\uBA74 \uCD08\uAE30\uAC12\uC5D0\uC11C step\uB9CC\uD07C \uC6C0\uC9C1\uC778 \uAC12\uC744 \uAD6C\uD55C\uB2E4",()=>{(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(2,-.5,100,3)).toBe(2.5),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(-8,-100,100,5)).toBe(-10),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(-6,-100,100,5)).toBe(-5),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(3,-100,100,5)).toBe(5),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(2,-100,100,5)).toBe(0),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(-30+3.5781601728019066,-100,100,10)).toBe(-30)}),(0,globals_1.it)("min, max\uAC12\uC744 \uBC97\uC5B4\uB098\uBA74 min, max\uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(-6.2,-2.5,100,3)).toBe(-2.5),(0,globals_1.expect)((0,utils_1.getNearestSteppedValue)(106.2,-2.5,100,3)).toBe(100)})});

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { StepperRowAssetFrame } from './StepperRowAssetFrame';
+import { StepperRowNumberIcon } from './StepperRowNumberIcon';
+import { StepperRowRightArrow } from './StepperRowRightArrow';
+import { StepperRowRightButton } from './StepperRowRightButton';
+import { StepperRowTexts } from './StepperRowTexts';
+interface StepperRowProps {
+    /**
+     * `StepperRow` 컴포넌트의 왼쪽 영역에 표시될 컴포넌트를 지정해요. 주로 `StepperRow.NumberIcon`나 `StepperRow.AssetFrame` 컴포넌트가 사용돼요.
+     */
+    left: ReactNode;
+    /**
+     * `StepperRow` 컴포넌트의 중앙 영역에 표시될 타이틀과 설명을 지정해요. 주로 `StepperRow.Texts` 컴포넌트가 사용돼요.
+     */
+    center: ReactNode;
+    /**
+     * `StepperRow` 컴포넌트의 오륵쪽 영역에 표시될 컴포넌트를 지정해요. 주로 `StepperRow.RightArrow`나 `StepperRow.RightButton` 컴포넌트가 사용돼요.
+     */
+    right?: ReactNode;
+    /**
+     * `StepperRow` 컴포넌트의 연결선을 숨길지 여부를 설정해요. 주로 마지막 스텝에서 `true`를 사용하여 연결선을 제거해요.
+     * @default false
+     */
+    hideLine?: boolean;
+}
+export declare function StepperRow(props: StepperRowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepperRow {
+    var Texts: typeof StepperRowTexts;
+    var NumberIcon: typeof StepperRowNumberIcon;
+    var AssetFrame: typeof StepperRowAssetFrame;
+    var RightArrow: typeof StepperRowRightArrow;
+    var RightButton: typeof StepperRowRightButton;
+}
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRow=StepperRow;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_native_1=require("react-native"),a11yCondition_1=require("./constants/a11yCondition"),StepperRowAssetFrame_1=require("./StepperRowAssetFrame"),StepperRowContext_1=require("./StepperRowContext"),StepperRowNumberIcon_1=require("./StepperRowNumberIcon"),StepperRowRightArrow_1=require("./StepperRowRightArrow"),StepperRowRightButton_1=require("./StepperRowRightButton"),StepperRowTexts_1=require("./StepperRowTexts"),padding_1=require("./utils/padding");function StepperRow(t){return(0,jsx_runtime_1.jsx)(StepperRowContext_1.StepperRowContextProvider,{children:(0,jsx_runtime_1.jsx)(StepperRowContent,{...t})})}function StepperRowContent({left:t,center:r,right:n,hideLine:s=!1}){const e=(0,StepperRowContext_1.useStepperRowContext)(),o=e.right?.type==="button",p=(0,core_1.useFontScaleCondition)(a11yCondition_1.a11yCondition.center),i=(0,core_1.useFontScaleCondition)(a11yCondition_1.a11yCondition.rightButtonAlign)&&o,c=(0,core_1.useFontScaleCondition)(a11yCondition_1.a11yCondition.rightButtonPaddingTop)&&o,d=(0,padding_1.getCenterPaddingTop)(e.left,e.center),g=(0,padding_1.getRightPaddingTop)(e.left,e.right),a=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.rootCss,children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.leftCss,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{children:t}),!s&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.lineCss,{backgroundColor:a.grey200}]})]}),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.centerRightCss,i&&styles.a11yCenterRightButtonAlign],children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.centerCss,p&&styles.a11yCenter,{paddingTop:d}],children:r}),n&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.rightCss,{paddingTop:c?0:g},i&&styles.a11yRightButtonAlign],children:n})]})]})}StepperRow.Texts=StepperRowTexts_1.StepperRowTexts,StepperRow.NumberIcon=StepperRowNumberIcon_1.StepperRowNumberIcon,StepperRow.AssetFrame=StepperRowAssetFrame_1.StepperRowAssetFrame,StepperRow.RightArrow=StepperRowRightArrow_1.StepperRowRightArrow,StepperRow.RightButton=StepperRowRightButton_1.StepperRowRightButton;const styles=react_native_1.StyleSheet.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/cjs/components/stepper-row/StepperRowAssetFrame.d.ts

@@ -0,0 +1,5 @@
+import { Asset } from '../asset';
+import { 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/cjs/components/stepper-row/StepperRowAssetFrame.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowAssetFrame=StepperRowAssetFrame;const jsx_runtime_1=require("react/jsx-runtime"),asset_1=require("../asset"),core_1=require("../../core"),react_1=require("react"),a11yCondition_1=require("./constants/a11yCondition"),StepperRowContext_1=require("./StepperRowContext");function StepperRowAssetFrame({shape:e,...s}){const t=e.width===32;(0,StepperRowContext_1.useUpdateStepperRowLeft)({type:t?"asset32":"asset40"});const o=(0,core_1.useFontScaleCondition)(a11yCondition_1.a11yCondition.leftAsset),n=(0,react_1.useMemo)(()=>{const r=e.radius===9999,i=t&&!r,c=t&&r;return i?asset_1.frameShape.CleanW40:c?asset_1.frameShape.CircleMedium:e},[t,e]);return(0,jsx_runtime_1.jsx)(asset_1.Asset.Frame,{shape:o?n:e,...s})}

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type Left = {
+    type: 'asset32' | 'asset40' | 'numberIcon';
+};
+export type Center = {
+    type: 'A' | 'B' | 'C';
+    hasDescription: boolean;
+};
+export type Right = {
+    type: 'arrow' | 'button' | 'none';
+};
+interface ProviderProps {
+    children: ReactNode;
+}
+export declare function StepperRowContextProvider({ children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useStepperRowContext(): {
+    left: Left | undefined;
+    center: Center | undefined;
+    right: Right | undefined;
+};
+/**
+ * NOTE(@hyeonji.shin):
+ * object를 그대로 deps array에 넣으면 무한 렌더링이 발생해서 JSON.stringify를 사용합니다.
+ */
+export declare function useUpdateStepperRowLeft(left: Left): void;
+export declare function useUpdateStepperRowCenter(center: Center): void;
+export declare function useUpdateStepperRowRight(right: Right): void;
+export {};

package/dist/cjs/components/stepper-row/StepperRowContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowContextProvider=StepperRowContextProvider,exports.useStepperRowContext=useStepperRowContext,exports.useUpdateStepperRowLeft=useUpdateStepperRowLeft,exports.useUpdateStepperRowCenter=useUpdateStepperRowCenter,exports.useUpdateStepperRowRight=useUpdateStepperRowRight;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),StepperRowContext=(0,react_1.createContext)({left:void 0,center:void 0,right:void 0,onLeftChange:()=>{},onCenterChange:()=>{},onRightChange:()=>{}});function StepperRowContextProvider({children:t}){const[e,n]=(0,react_1.useState)(),[o,s]=(0,react_1.useState)(),[r,u]=(0,react_1.useState)(),p=(0,react_1.useMemo)(()=>({left:e,center:o,right:r,onLeftChange:n,onCenterChange:s,onRightChange:u}),[e,o,r]);return(0,jsx_runtime_1.jsx)(StepperRowContext.Provider,{value:p,children:t})}function useStepperRowContext(){const{left:t,center:e,right:n}=(0,react_1.useContext)(StepperRowContext);return{left:t,center:e,right:n}}function useUpdateStepperRowLeft(t){const{onLeftChange:e}=(0,react_1.useContext)(StepperRowContext);(0,react_1.useEffect)(()=>{e(t)},[JSON.stringify(t),e])}function useUpdateStepperRowCenter(t){const{onCenterChange:e}=(0,react_1.useContext)(StepperRowContext);(0,react_1.useEffect)(()=>{e(t)},[JSON.stringify(t),e])}function useUpdateStepperRowRight(t){const{onRightChange:e}=(0,react_1.useContext)(StepperRowContext);(0,react_1.useEffect)(()=>{e(t)},[JSON.stringify(t),e])}