@toss/tds-react-native 1.0.0

package/dist/esm/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/esm/components/segmented-control/components/ItemGroup/ItemGroup.js

@@ -0,0 +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})});

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

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

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

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

package/dist/esm/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/esm/components/segmented-control/components/ItemGroup/useItemGroupStyle.js

@@ -0,0 +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)}}

package/dist/esm/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/esm/components/segmented-control/components/Root.js

@@ -0,0 +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})}

package/dist/esm/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/esm/components/segmented-control/components/ScrollControlOverlay/EdgeGradient.js

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

package/dist/esm/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/esm/components/segmented-control/components/ScrollControlOverlay/PreviousButton.js

@@ -0,0 +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})})}

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

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

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

@@ -0,0 +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"};

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

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

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

@@ -0,0 +1 @@
+"use strict";export const SPRING_OPTION={stiffness:1e3,damping:52};

package/dist/esm/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/esm/components/segmented-control/contexts/AlignmentContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const AlignmentContext=t({ensureFluidAlignment:()=>null});

package/dist/esm/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/esm/components/segmented-control/contexts/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d}from"react/jsx-runtime";import{createContext as a,useMemo as s,useState as i}from"react";export const IndicatorContext=a({indicatorX:0,indicatorWidth:0,setIndicatorX:()=>{},setIndicatorWidth:()=>{}});export function IndicatorContextProvider({children:r}){const[t,e]=i(0),[o,n]=i(0),c=s(()=>({indicatorX:t,indicatorWidth:o,setIndicatorX:e,setIndicatorWidth:n}),[t,o]);return d(IndicatorContext.Provider,{value:c,children:r})}

package/dist/esm/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/esm/components/segmented-control/contexts/RadioContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s}from"react/jsx-runtime";import{createContext as a,useMemo as r,useState as u}from"react";export const RadioContext=a({name:"",selectedValue:"",setSelectedValue:()=>{},selectedElementLayout:null,setSelectedElementLayout:()=>{},disabled:!1});export function RadioContextProvider({children:t,...e}){const[l,o]=u(null),n=r(()=>({...e,selectedElementLayout:l,setSelectedElementLayout:o}),[e]);return s(RadioContext.Provider,{value:n,children:t})}

package/dist/esm/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/esm/components/segmented-control/contexts/ScrollContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as l}from"react/jsx-runtime";import{createContext as n,useRef as r}from"react";export const ScrollContext=n({ref:null,scrollHandlers:new Set});export function ScrollContextProvider({children:e}){const o=r(null),t=r(new Set).current;return l(ScrollContext.Provider,{value:{ref:o,scrollHandlers:t},children:e})}

package/dist/esm/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/esm/components/segmented-control/contexts/SizeContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const SizeContext=t("large");

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

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

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

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

package/dist/esm/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/esm/components/segmented-control/index.js

@@ -0,0 +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};

package/dist/esm/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/esm/components/shadow/ShadowBackground.js

@@ -0,0 +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}});

package/dist/esm/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/esm/components/shadow/calculateElevation.js

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

package/dist/esm/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/esm/components/shadow/generateShadowStyle.js

@@ -0,0 +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)}};

package/dist/esm/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/esm/components/shadow/index.js

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

package/dist/esm/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/esm/components/shadow/tokens.js

@@ -0,0 +1 @@
+"use strict";import{colors as o}from"@toss-design-system/colors";const r={tiny:{offsetY:1,radius:3,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},weak:{offsetY:2,radius:30,lightColor:o.greyOpacity200,darkColor:o.greyOpacity900},medium:{offsetY:16,radius:60,lightColor:o.greyOpacity300,darkColor:o.greyOpacity900}},t=({offsetY:e,radius:i,lightColor:a,darkColor:y})=>c=>({offset:{x:0,y:c==="up"?-e:e},lightColor:a,darkColor:y,radius:i,opacity:1});export const shadow={tiny:t(r.tiny),weak:t(r.weak),medium:t(r.medium)};

package/dist/esm/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/esm/components/shadow/types.js

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/esm/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/esm/components/shadow/useShadow.js

@@ -0,0 +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})};

package/dist/esm/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/esm/components/skeleton/AnimateSkeleton.js

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

package/dist/esm/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/esm/components/skeleton/Skeleton.js

@@ -0,0 +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;

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

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

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

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

package/dist/esm/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/esm/components/slider/Slider.js

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

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

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

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

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

package/dist/esm/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/esm/components/slider/styles.js

@@ -0,0 +1 @@
+"use strict";import{colors as o}from"@toss-design-system/colors";import{StyleSheet as s}from"react-native";const e=40,t=5,r=18,i=r*2,h=(e-t)/2;export const styles=s.create({slider:{position:"relative",height:e},track:{position:"absolute",top:h,right:0,left:0,height:t,backgroundColor:o.grey200,borderRadius:t/2,overflow:"hidden"},progress:{position:"absolute",height:"100%",width:"100%",left:"-100%"},thumb:{position:"absolute",top:2,width:i,height:i,borderRadius:r,backgroundColor:o.white,borderColor:o.grey400,borderWidth:1}});

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

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

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

@@ -0,0 +1 @@
+"use strict";import{useState as o,useEffect as d}from"react";import{AccessibilityInfo as n}from"react-native";export function useScreenReaderMode(){const[t,r]=o(!1);return d(()=>{const s=n.addEventListener("screenReaderChanged",e=>{r(e)});return n.isScreenReaderEnabled().then(e=>{r(e)}),()=>{s?.remove()}},[]),t}

package/dist/esm/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/esm/components/slider/utils.js

@@ -0,0 +1 @@
+"use strict";export function clamp(o,t=-1/0,r=1/0){return Math.min(Math.max(o,t),r)}export function getNearestSteppedValue(o,t,r,n){const a=(o-t)%n,e=Math.sign(a)*(Math.abs(a)<n/2?0:n),c=Math.floor((o-t)/n)*n,f=t+c+e;return clamp(f,t,r)}

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

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

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

@@ -0,0 +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)})});

package/dist/esm/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/esm/components/stepper-row/StepperRow.js

@@ -0,0 +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}});

package/dist/esm/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/esm/components/stepper-row/StepperRowAssetFrame.js

@@ -0,0 +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})}

package/dist/esm/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/esm/components/stepper-row/StepperRowContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as C}from"react/jsx-runtime";import{createContext as a,useContext as o,useEffect as i,useMemo as h,useState as s}from"react";const n=a({left:void 0,center:void 0,right:void 0,onLeftChange:()=>{},onCenterChange:()=>{},onRightChange:()=>{}});export function StepperRowContextProvider({children:t}){const[e,r]=s(),[f,c]=s(),[p,u]=s(),g=h(()=>({left:e,center:f,right:p,onLeftChange:r,onCenterChange:c,onRightChange:u}),[e,f,p]);return C(n.Provider,{value:g,children:t})}export function useStepperRowContext(){const{left:t,center:e,right:r}=o(n);return{left:t,center:e,right:r}}export function useUpdateStepperRowLeft(t){const{onLeftChange:e}=o(n);i(()=>{e(t)},[JSON.stringify(t),e])}export function useUpdateStepperRowCenter(t){const{onCenterChange:e}=o(n);i(()=>{e(t)},[JSON.stringify(t),e])}export function useUpdateStepperRowRight(t){const{onRightChange:e}=o(n);i(()=>{e(t)},[JSON.stringify(t),e])}

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

@@ -0,0 +1,8 @@
+interface StepperRowNumberIconProps {
+    /**
+     * `StepperRow` 컴포넌트 왼쪽에 순서를 나타내는 숫자를 설정해요.
+     */
+    number: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+}
+export declare function StepperRowNumberIcon({ number }: StepperRowNumberIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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`})}

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

@@ -0,0 +1,20 @@
+import { FrameShapeType } from '../asset/types';
+export interface StepperRowRightArrowProps {
+    /**
+     * 아이콘의 이름을 지정해요.
+     * @default 'icon-arrow-right-mono'
+     */
+    name?: string;
+    /**
+     * 아이콘의 색상을 지정해요.
+     * @default adaptive.grey400
+     */
+    color?: string;
+    /**
+     * 프레임의 모양을 설정해요.
+     * 더 큰 텍스트 스케일이 160보다 크거나 같으면, `Asset.frameShape.CleanW32` 로 자동 변경돼요.
+     * @default Asset.frameShape.CleanW24
+     */
+    frameShape?: FrameShapeType;
+}
+export declare function StepperRowRightArrow({ name, color, frameShape }: StepperRowRightArrowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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})}

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

@@ -0,0 +1,5 @@
+import { Button } from '../button';
+import { 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

@@ -0,0 +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})}