@toss/tds-react-native 1.0.0

package/dist/esm/components/bottom-info/index.js

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

package/dist/esm/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,15 @@
+import { BottomSheetCTA, DoubleCTAProps, SingleCTAProps } from './CTA';
+import { BottomSheetHeader, HeaderProps } from './Header';
+import { BottomSheetHeaderDescription, HeaderDescriptionProps } from './HeaderDescription';
+import { BottomSheetRoot, RootProps } from './Root';
+import { BottomSheetSelect, SelectProps } from './Select';
+import * as BottomSheetTypes from './types';
+interface BottomSheetType {
+    Root: typeof BottomSheetRoot;
+    Header: typeof BottomSheetHeader;
+    HeaderDescription: typeof BottomSheetHeaderDescription;
+    CTA: typeof BottomSheetCTA;
+    Select: typeof BottomSheetSelect;
+}
+export declare const BottomSheet: BottomSheetType;
+export type { BottomSheetTypes, RootProps as BottomSheetRootProps, HeaderProps as BottomSheetHeaderProps, HeaderDescriptionProps as BottomSheetHeaderDescriptionProps, SingleCTAProps as BottomSheetSingleCTAProps, DoubleCTAProps as BottomSheetDoubleCTAProps, SelectProps as BottomSheetSelectProps, };

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1 @@
+"use strict";import{BottomSheetCTA as t}from"./CTA";import{BottomSheetHeader as o}from"./Header";import{BottomSheetHeaderDescription as e}from"./HeaderDescription";import{BottomSheetRoot as r}from"./Root";import{BottomSheetSelect as m}from"./Select";export const BottomSheet={Root:r,Header:o,HeaderDescription:e,CTA:t,Select:m};

package/dist/esm/components/bottom-sheet/CTA/DoubleCTA.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface DoubleCTAProps {
+    leftButton: ReactNode;
+    rightButton: ReactNode;
+    hasPaddingBottom?: boolean;
+    background?: 'default' | 'none';
+    topAccessory?: ReactNode;
+    bottomAccessory?: ReactNode;
+    ctaContentGap?: number;
+}
+export declare const BottomSheetDoubleCTA: import("react").NamedExoticComponent<DoubleCTAProps>;

package/dist/esm/components/bottom-sheet/CTA/DoubleCTA.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useAdaptive as f}from"../../../core/index";import{Txt as a}from"../../txt/index";import{memo as m}from"react";import{StyleSheet as c,View as e}from"react-native";import{BottomSheetCTAAnimation as u}from"../utils/CTAAnimation";import{Gradient as g}from"./Gradient";export const BottomSheetDoubleCTA=m(function({topAccessory:o,bottomAccessory:n,ctaContentGap:l=34,leftButton:d,rightButton:s}){const i=f();return p(u,{style:[r.container],children:[t(g,{height:l,stopColor:i.layeredBackground}),p(e,{style:{backgroundColor:i.layeredBackground},children:[o!=null?t(e,{style:r.topAccessoryWrapper,children:typeof o=="string"?t(a,{typography:"t6",color:i.grey600,children:o}):o}):null,p(e,{style:r.buttonsWrapper,children:[t(e,{style:r.buttonWrapper,children:d}),t(e,{style:r.buttonWrapper,children:s})]}),n!=null?t(e,{style:r.bottomAccessoryWrapper,children:typeof n=="string"?t(a,{typography:"t6",color:i.grey600,children:n}):n}):null]})]})});const r=c.create({container:{paddingTop:0,paddingRight:20,paddingBottom:18,paddingLeft:20,borderBottomLeftRadius:28,borderBottomRightRadius:28},topAccessoryWrapper:{paddingBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessoryWrapper:{paddingTop:16,display:"flex",flexDirection:"row",justifyContent:"center"},buttonsWrapper:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},buttonWrapper:{minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8},buttonSpacing:{flexBasis:8,flexGrow:0,flexShrink:0}});

package/dist/esm/components/bottom-sheet/CTA/Gradient.d.ts

@@ -0,0 +1,4 @@
+export declare const Gradient: import("react").NamedExoticComponent<{
+    height: number;
+    stopColor: string;
+}>;

package/dist/esm/components/bottom-sheet/CTA/Gradient.js

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

package/dist/esm/components/bottom-sheet/CTA/SingleCTA.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Button } from '../../button/index';
+export interface SingleCTAProps extends ComponentProps<typeof Button> {
+    hasPaddingBottom?: boolean;
+    background?: 'default' | 'none';
+    topAccessory?: ReactNode;
+    bottomAccessory?: ReactNode;
+    ctaContentGap?: number;
+}
+export declare const BottomSheetSingleCTA: import("react").NamedExoticComponent<SingleCTAProps>;

package/dist/esm/components/bottom-sheet/CTA/SingleCTA.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as l}from"react/jsx-runtime";import{memo as m}from"react";import{StyleSheet as g,View as i}from"react-native";import{useAdaptive as c}from"../../../core/index";import{Button as y}from"../../button/index";import{Txt as p}from"../../txt/index";import{BottomSheetCTAAnimation as f}from"../utils/CTAAnimation";import{Gradient as h}from"./Gradient";export const BottomSheetSingleCTA=m(function({topAccessory:e,bottomAccessory:o,ctaContentGap:a=34,display:d="block",...s}){const r=c();return l(f,{style:[n.container],children:[t(h,{height:a,stopColor:r.layeredBackground}),l(i,{style:{backgroundColor:r.layeredBackground},children:[e!=null?t(i,{style:n.topAccessoryWrapper,children:typeof e=="string"?t(p,{typography:"t6",color:r.grey600,children:e}):e}):null,t(y,{...s,size:"big",display:d}),o!=null?t(i,{style:n.bottomAccessoryWrapper,children:typeof o=="string"?t(p,{typography:"t6",color:r.grey600,children:o}):o}):null]})]})});const n=g.create({container:{paddingTop:0,paddingRight:20,paddingBottom:18,paddingLeft:20,borderBottomLeftRadius:28,borderBottomRightRadius:28,alignItems:"stretch"},topAccessoryWrapper:{paddingBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessoryWrapper:{paddingTop:16,display:"flex",flexDirection:"row",justifyContent:"center"}});

package/dist/esm/components/bottom-sheet/CTA/index.d.ts

@@ -0,0 +1,7 @@
+import { BottomSheetDoubleCTA, DoubleCTAProps } from './DoubleCTA';
+import { BottomSheetSingleCTA, SingleCTAProps } from './SingleCTA';
+type BottomSheetCTAType = typeof BottomSheetSingleCTA & {
+    Double: typeof BottomSheetDoubleCTA;
+};
+export declare const BottomSheetCTA: BottomSheetCTAType;
+export type { SingleCTAProps, DoubleCTAProps };

package/dist/esm/components/bottom-sheet/CTA/index.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{BottomSheetDoubleCTA as e}from"./DoubleCTA";import{BottomSheetSingleCTA as m}from"./SingleCTA";export const BottomSheetCTA=function(o){return t(m,{...o})};BottomSheetCTA.Double=e;

package/dist/esm/components/bottom-sheet/Container.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface ContainerProps {
+    open: boolean;
+    children: ReactNode;
+    onExited?: () => void;
+    onDraggedUp?: () => void;
+    onDraggedMiddle?: () => void;
+    onDraggedDown?: () => void;
+    onDragToClose?: () => void;
+    onDragFinished?: () => void;
+    style?: StyleProp<ViewStyle>;
+    unstable_disableDragging?: boolean;
+}
+export declare function BottomSheetContainer({ open, children, onDragFinished, onDragToClose, onDraggedDown, onDraggedMiddle, onDraggedUp, onExited: _onExited, style, unstable_disableDragging, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/bottom-sheet/Container.js

@@ -0,0 +1 @@
+"use strict";import{jsx as m}from"react/jsx-runtime";import{spring as H}from"@toss-design-system/easings";import{useCallback as W,useEffect as c,useRef as u}from"react";import{Animated as s,Keyboard as h,Platform as g,StyleSheet as j,useWindowDimensions as F}from"react-native";import{useAdaptive as O,useTypographyTheme as P}from"../../core";import{useSafeAreaBottom as R}from"../../utils";import{BottomSheetDragAnimation as Y}from"./DragAnimation";import{usePreservedCallback as _}from"./utils/usePreservedCallback";const f=10,q=()=>{};export function BottomSheetContainer({open:e,children:v,onDragFinished:y,onDragToClose:b,onDraggedDown:w,onDraggedMiddle:S,onDraggedUp:D,onExited:A,style:k,unstable_disableDragging:T=!1}){const o=F(),x=O(),d=_(A??q),B=u(0),i=u(new s.Value(o.height)).current,n=R()||f,{typographyLevel:l}=P(),C=g.OS==="android"?l>150:l?.startsWith("A11y"),L=o.height*(C?.9:.7),t=W(({moveTo:r})=>s.spring(i,{toValue:r,useNativeDriver:!0,...H.quick}),[i]);return c(()=>{if(e)return t({moveTo:-n}).start(),()=>{t({moveTo:o.height}).start(()=>{d?.()})}},[t,o.height,d,e,n]),c(()=>{if(!e||g.OS!=="ios")return;const r=h.addListener("keyboardWillShow",V=>{const E=V.endCoordinates.height;t({moveTo:-(f+E)}).start()}),a=h.addListener("keyboardWillHide",()=>{t({moveTo:-n}).start()});return()=>{r.remove(),a.remove()}},[t,n,e]),m(s.View,{style:[p.wrapper,{transform:[{translateY:i}]}],children:m(Y,{onDraggedUp:D,onDraggedMiddle:S,onDraggedDown:w,onDragToClose:b,onDragFinished:y,unstable_disableDragging:T,style:[p.container,{backgroundColor:x.layeredBackground,maxHeight:L,width:o.width-20},k],onLayout:r=>{const a=r.nativeEvent.layout.height;B.current=a,e||i.setValue(a)},children:v})})}const p=j.create({wrapper:{position:"absolute",bottom:0},container:{bottom:0,borderRadius:28,left:10}});

package/dist/esm/components/bottom-sheet/Dimmer.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    open: boolean;
+    onPress?: () => void;
+}
+export interface BottomSheetDimmerRef {
+    darken: () => void;
+    lighten: (percent: number) => void;
+    reset: () => void;
+}
+export declare const BottomSheetDimmer: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<BottomSheetDimmerRef>>;
+export {};

package/dist/esm/components/bottom-sheet/Dimmer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as l}from"react/jsx-runtime";import{colors as p}from"@toss-design-system/colors";import{spring as o}from"@toss-design-system/easings";import{useColorPreference as f}from"../../core";import{forwardRef as d,useEffect as k,useImperativeHandle as v,useRef as g}from"react";import{Animated as r,Pressable as h,StyleSheet as D,useWindowDimensions as b}from"react-native";const i={light:{normal:.2,darker:.4},dark:{normal:.56,darker:.8}},q=r.createAnimatedComponent(h);export const BottomSheetDimmer=d(function({open:n,onPress:s},a){const{width:m,height:u}=b(),{colorPreference:t}=f(),e=g(new r.Value(0)).current;return k(()=>{if(n)return r.spring(e,{toValue:i[t].normal,useNativeDriver:!0,...o.quick}).start(),()=>{requestAnimationFrame(()=>r.spring(e,{toValue:0,useNativeDriver:!0,...o.quick}).start())}},[t,e,n]),v(a,()=>({darken:()=>{r.spring(e,{toValue:i[t].darker,useNativeDriver:!0,...o.quick}).start()},lighten:c=>{r.spring(e,{toValue:i[t].normal*(1-c),useNativeDriver:!0,...o.quick}).start()},reset:()=>{r.spring(e,{toValue:i[t].normal,useNativeDriver:!0,...o.quick}).start()}}),[t,e]),l(q,{pointerEvents:n?void 0:"none",onPress:s,style:[y.container,{opacity:e},{width:m,height:u}]})});const y=D.create({container:{position:"absolute",top:0,left:0,bottom:0,right:0,backgroundColor:p.black,opacity:0}});

package/dist/esm/components/bottom-sheet/DragAnimation.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactNode } from 'react';
+import { View } from 'react-native';
+interface Props extends ComponentProps<typeof View> {
+    children: ReactNode;
+    onDraggedUp?: () => void;
+    onDraggedDown?: () => void;
+    onDragToClose?: () => void;
+    onDraggedMiddle?: () => void;
+    onDragFinished?: () => void;
+    unstable_disableDragging?: boolean;
+}
+export declare function BottomSheetDragAnimation({ children, onDraggedUp, onDraggedDown, onDraggedMiddle, onDragToClose, onDragFinished, unstable_disableDragging, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/bottom-sheet/DragAnimation.js

@@ -0,0 +1 @@
+"use strict";import{jsx as N}from"react/jsx-runtime";import{Gesture as u,GestureDetector as D}from"@granite-js/native/react-native-gesture-handler";import{bezier as j,spring as a}from"@toss-design-system/easings";import{useMemo as l,useRef as c}from"react";import{Animated as t,Easing as d}from"react-native";export function BottomSheetDragAnimation({children:X,onDraggedUp:m,onDraggedDown:f,onDraggedMiddle:g,onDragToClose:p,onDragFinished:v,unstable_disableDragging:b=!1,...h}){const r=c(new t.Value(1)).current,n=c(new t.Value(0)).current,s=c(new t.Value(0)).current,i=l(()=>u.Pan().activateAfterLongPress(200).onUpdate(e=>{const S=Math.log(Math.abs(e.translationX)+10)*5,w=Math.log(15)*5,z=Math.sign(e.translationX)*Math.max(S-w,0),G=Math.log(Math.abs(e.translationY)+10)*15,P=Math.log(15)*15,A=Math.sign(e.translationY)*Math.max(G-P,0),M=j.linear,Y=e.translationY<0?.1:.01;t.parallel([t.timing(n,{toValue:z,duration:Y,easing:d.bezier(...M),useNativeDriver:!0}),t.timing(s,{toValue:A,duration:Y,easing:d.bezier(...M),useNativeDriver:!0})]).start(),e.translationY<=-50?m?.():e.translationY>=10?f?.():g?.()}).onFinalize(e=>{t.parallel([t.spring(r,{toValue:1,...a.rapid,useNativeDriver:!0}),t.spring(n,{toValue:0,...a.quick,useNativeDriver:!0}),t.spring(s,{toValue:0,...a.quick,useNativeDriver:!0})]).start(),e.translationY>=50&&p?.(),v?.()}),[v,p,f,g,m,r,n,s]),o=l(()=>u.LongPress().onStart(()=>{t.spring(r,{toValue:.98,...a.rapid,useNativeDriver:!0}).start()}).onEnd(()=>{t.spring(r,{toValue:1,...a.rapid,useNativeDriver:!0}).start()}),[r]),x=l(()=>(i.runOnJS(!0),o.runOnJS(!0),u.Simultaneous(i,o)),[i,o]),V=N(t.View,{...h,style:[{transform:[{translateX:n},{translateY:s},{scale:r}]},h.style],children:X});return b?V:N(D,{gesture:x,children:V})}

package/dist/esm/components/bottom-sheet/Handle.d.ts

@@ -0,0 +1 @@
+export declare const BottomSheetHandle: import("react").NamedExoticComponent<object>;

package/dist/esm/components/bottom-sheet/Handle.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{useAdaptive as r}from"../../core";import{memo as i}from"react";import{View as t}from"react-native";export const BottomSheetHandle=i(function(){const o=r();return e(t,{style:{flexDirection:"row",height:16,justifyContent:"center",alignItems:"flex-end"},children:e(t,{style:{width:48,height:4,borderRadius:4,backgroundColor:o.grey200}})})});

package/dist/esm/components/bottom-sheet/Header.d.ts

@@ -0,0 +1,4 @@
+export interface HeaderProps {
+    children: string;
+}
+export declare const BottomSheetHeader: import("react").NamedExoticComponent<HeaderProps>;

package/dist/esm/components/bottom-sheet/Header.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{memo as r}from"react";import{Txt as i}from"../txt";import{StyleSheet as m}from"react-native";import{useAdaptive as n}from"../../core";export const BottomSheetHeader=r(function({children:t}){const o=n();return e(i,{typography:"t4",color:o.grey900,style:a.container,fontWeight:"bold",children:t})});const a=m.create({container:{paddingLeft:24,paddingRight:16,marginTop:4}});

package/dist/esm/components/bottom-sheet/HeaderContainer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare const BottomSheetHeaderContainer: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/esm/components/bottom-sheet/HeaderContainer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{memo as o}from"react";import{StyleSheet as n,View as r}from"react-native";export const BottomSheetHeaderContainer=o(function({children:t}){return e(r,{style:i.container,children:t})});const i=n.create({container:{paddingTop:21,paddingBottom:13}});

package/dist/esm/components/bottom-sheet/HeaderDescription.d.ts

@@ -0,0 +1,4 @@
+export interface HeaderDescriptionProps {
+    children: string;
+}
+export declare const BottomSheetHeaderDescription: import("react").NamedExoticComponent<HeaderDescriptionProps>;

package/dist/esm/components/bottom-sheet/HeaderDescription.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{useAdaptive as r}from"../../core";import{Txt as i}from"../txt";import{memo as n}from"react";import{StyleSheet as p}from"react-native";export const BottomSheetHeaderDescription=n(function({children:t}){const o=r();return e(i,{typography:"t6",color:o.grey600,style:a.container,fontWeight:"regular",children:t})});const a=p.create({container:{paddingTop:8,paddingRight:44,paddingBottom:0,paddingLeft:24}});

package/dist/esm/components/bottom-sheet/Root.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentType, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface RootProps<WrapperProps> {
+    open: boolean;
+    header?: ReactNode;
+    headerDescription?: ReactNode;
+    cta?: React.ReactNode;
+    children?: ReactNode;
+    disableDimmer?: boolean;
+    onDimmerClick?: () => void;
+    onClose?: () => void;
+    onExited?: () => void;
+    style?: StyleProp<ViewStyle>;
+    wrapper?: ComponentType<WrapperProps>;
+    wrapperProps?: WrapperProps;
+    /**
+     * 더 큰 텍스트(160% 이상) 환경에서 `header`와 `headerDescription` 영역이 스크롤 내부에 포함되도록 설정해요.
+     *
+     * @default true
+     */
+    a11yIncludeHeaderInScroll?: boolean;
+    /**
+     * @deprecated
+     * @description 드래그 기능을 비활성화합니다.
+     * @default false
+     */
+    unstable_disableDragging?: boolean;
+}
+export declare function BottomSheetRoot({ open, header, headerDescription, cta, disableDimmer, children, onDimmerClick, onClose, onExited, style, wrapper: Wrapper, wrapperProps, a11yIncludeHeaderInScroll, unstable_disableDragging, }: RootProps<object>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/bottom-sheet/Root.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{ScrollView as k}from"@granite-js/native/react-native-gesture-handler";import{Children as T,useCallback as s,useEffect as _,useMemo as F,useRef as I}from"react";import{Keyboard as M,View as p}from"react-native";import{useHideAccessibility as V}from"../../core/contexts/HideAccessibility";import{useFontScaleCondition as K}from"../../core/index";import{a11yCondition as P}from"./const";import{BottomSheetContainer as U}from"./Container";import{BottomSheetDimmer as q}from"./Dimmer";import{BottomSheetHandle as z}from"./Handle";import{BottomSheetHeaderContainer as G}from"./HeaderContainer";import{BottomSheetRenderingAnimation as c}from"./utils/RenderingAnimation";export function BottomSheetRoot({open:e,header:t,headerDescription:n,cta:y,disableDimmer:D=!1,children:S,onDimmerClick:b,onClose:d,onExited:C,style:x,wrapper:A=k,wrapperProps:B,a11yIncludeHeaderInScroll:j=!0,unstable_disableDragging:v=!1}){const i=V(),l=I(null),m=s(()=>{M.dismiss(),d?.()},[d]),w=s(()=>{l.current?.darken()},[]),E=s(()=>{l.current?.lighten(.5)},[]),u=s(()=>{l.current?.reset()},[]),H=t!=null?30:0,R=F(()=>[t,n].filter(a=>a!=null).length*30,[t,n]),f=K(P.root)&&j,g=t!=null||n!=null?r(G,{children:[o(c,{children:t}),o(c,{delay:H,children:n})]}):null;return _(()=>(e?i.activate():i.inactivate(),i.inactivate),[i,e]),r(p,{style:{position:"absolute",top:0,left:0,right:0,bottom:0},pointerEvents:e?"auto":"none",onAccessibilityEscape:()=>{m?.()},children:[D?null:o(q,{ref:l,open:e,onPress:()=>{m?.(),b?.()}}),r(U,{open:e,onExited:C,onDraggedUp:w,onDraggedMiddle:u,onDraggedDown:E,onDragToClose:m,onDragFinished:u,style:x,unstable_disableDragging:v,children:[r(p,{children:[o(z,{}),!f&&g]}),r(A,{...B,children:[f&&g,T.map(S,(a,h)=>o(c,{delay:R+h*30,children:a},h))]}),y]})]})}

package/dist/esm/components/bottom-sheet/Select.d.ts

@@ -0,0 +1,13 @@
+export interface SelectProps {
+    options: Array<{
+        name: string;
+        value: string;
+        disabled?: boolean;
+        hideUnCheckedCheckBox?: boolean;
+    }>;
+    value?: string;
+    animation?: boolean;
+    animationDelay?: number;
+    onChange: (value: string) => void;
+}
+export declare function BottomSheetSelect({ options, value, animation, animationDelay, onChange }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/bottom-sheet/Select.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as h}from"react/jsx-runtime";import{Checkbox as f}from"../checkbox";import{useAdaptive as u}from"../../core";import{PressableEffect as y}from"../../interactions/pressable-effect";import{Txt as b}from"../txt";import{StyleSheet as p,View as s}from"react-native";import{BottomSheetRenderingAnimation as x}from"./utils/RenderingAnimation";export function BottomSheetSelect({options:n,value:a,animation:d,animationDelay:l=0,onChange:c}){const o=u();return t(s,{children:n.map((e,m)=>{const i=e.value===a,r=t(y,{accessibilityState:{selected:i},disabled:e.disabled,onPress:()=>{c(e.value)},children:h(s,{style:g.itemContainer,children:[t(b,{color:o.grey700,typography:"t5",fontWeight:"medium",children:e.name}),!e.hideUnCheckedCheckBox||i?t(f.Line,{importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,checked:i,disabled:e.disabled,size:24,style:{width:24,height:24}}):null]})},e.value);return d?t(x,{delay:l+30*m,children:r},e.value):r})})}const g=p.create({itemContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:16,paddingHorizontal:24,borderRadius:12}});

package/dist/esm/components/bottom-sheet/const.d.ts

@@ -0,0 +1,2 @@
+import { A11yCondition } from '../../core/index';
+export declare const a11yCondition: Record<'root', A11yCondition>;

package/dist/esm/components/bottom-sheet/const.js

@@ -0,0 +1 @@
+"use strict";export const a11yCondition={root:{biggerThanOrEqualTo:160}};

package/dist/esm/components/bottom-sheet/index.d.ts

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

package/dist/esm/components/bottom-sheet/index.js

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

package/dist/esm/components/bottom-sheet/types.d.ts

@@ -0,0 +1,6 @@
+import { SingleCTAProps, DoubleCTAProps } from './CTA';
+import { HeaderProps } from './Header';
+import { HeaderDescriptionProps } from './HeaderDescription';
+import { RootProps } from './Root';
+import { SelectProps } from './Select';
+export type { SingleCTAProps, DoubleCTAProps, HeaderProps, HeaderDescriptionProps, RootProps, SelectProps };

package/dist/esm/components/bottom-sheet/types.js

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

package/dist/esm/components/bottom-sheet/utils/CTAAnimation.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function BottomSheetCTAAnimation({ children, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/bottom-sheet/utils/CTAAnimation.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{bezier as n}from"@toss-design-system/easings";import{useEffect as a,useRef as m}from"react";import{Animated as e,Easing as s}from"react-native";export function BottomSheetCTAAnimation({children:r,style:i}){const t=m(new e.Value(0)).current;return a(()=>{e.timing(t,{toValue:1,easing:s.bezier(...n.ease),duration:600,useNativeDriver:!0}).start()},[t]),o(e.View,{style:i,children:r})}

package/dist/esm/components/bottom-sheet/utils/GestureBoundary.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+/**
+ * 중첩된 Gesture Handler 사용 시, Gesture 끼리의 충돌을 막기 위해 사용
+ * (CTA 버튼을 클릭하더라도 BottomSheet가 갑자기 작아졌다가 커지는 현상 방지)
+ */
+export declare function BottomSheetGestureBoundary({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/bottom-sheet/utils/GestureBoundary.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{Gesture as o,GestureDetector as n}from"@granite-js/native/react-native-gesture-handler";import{useMemo as s}from"react";export function BottomSheetGestureBoundary({children:e}){const r=s(()=>o.LongPress().minDuration(0),[]);return t(n,{gesture:r,children:e})}

package/dist/esm/components/bottom-sheet/utils/RenderingAnimation.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface Props {
+    delay?: number;
+    children: ReactNode;
+}
+export declare function BottomSheetRenderingAnimation({ delay, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/bottom-sheet/utils/RenderingAnimation.js

@@ -0,0 +1 @@
+"use strict";import{jsx as u}from"react/jsx-runtime";import{bezier as n}from"@toss-design-system/easings";import{useEffect as m,useRef as o}from"react";import{Animated as e,Easing as a}from"react-native";export function BottomSheetRenderingAnimation({delay:t=0,children:s}){const r=o(new e.Value(0)).current,i=o(new e.Value(80)).current;return m(()=>{e.parallel([e.timing(r,{toValue:1,duration:800,delay:t,easing:a.bezier(...n.expo),useNativeDriver:!0}),e.timing(i,{toValue:0,duration:800,delay:t,easing:a.bezier(...n.expo),useNativeDriver:!0})]).start()},[t,r,i]),u(e.View,{style:{opacity:r,transform:[{translateY:i}]},children:s})}

package/dist/esm/components/bottom-sheet/utils/usePreservedCallback.d.ts

@@ -0,0 +1 @@
+export declare function usePreservedCallback<T extends () => void>(fn: T): T;

package/dist/esm/components/bottom-sheet/utils/usePreservedCallback.js

@@ -0,0 +1 @@
+"use strict";import{useMemo as t,useRef as n}from"react";export function usePreservedCallback(r){const e=n(r);return e.current!==r&&(e.current=r),t(()=>(...u)=>e.current(...u),[])}

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,107 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+    /**
+     * `Button` 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * `Button` 컴포넌트가 눌렸을 때 호출되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * `Button` 컴포넌트의 색상 타입을 지정해요.
+     *
+     * @default 'primary'
+     */
+    type?: 'primary' | 'danger' | 'light' | 'dark';
+    /**
+     * `Button` 컴포넌트의 스타일을 지정해요. 'fill'은 채워진 스타일, 'weak'은 투명한 스타일이에요.
+     *
+     * @default 'fill'
+     */
+    style?: 'fill' | 'weak';
+    /**
+     * `Button` 컴포넌트의 표시 방식을 지정해요. 'block'은 전체 너비를 차지하고, 'full'은 부모 컨테이너에 맞춰요.
+     *
+     * @default 'inline'
+     */
+    display?: 'block' | 'full' | 'inline';
+    /**
+     * `Button` 컴포넌트의 크기를 지정해요.
+     *
+     * @default 'big'
+     */
+    size?: 'big' | 'large' | 'medium' | 'tiny';
+    /**
+     * true일 경우 버튼에 로딩 스피너가 표시되고 `Button` 컴포넌트가 클릭되지 않아요.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * `Button` 컴포넌트를 비활성화할지 여부를 지정해요. true일 경우 `Button` 컴포넌트가 클릭되지 않아요.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * `Button` 컴포넌트의 외부 스타일을 변경할 때 사용해요. 가장 바깥쪽 `View`에 적용돼요.
+     */
+    viewStyle?: StyleProp<ViewStyle>;
+    /**
+     * `Button` 컴포넌트의 텍스트 색상을 지정해요. 기본으로 설정되는 색상을 덮어씌울 때 사용해요.
+     */
+    color?: string;
+    /**
+     * `Button` 컴포넌트의 컨테이너 스타일을 변경할 때 사용해요. `Button` 컴포넌트 내부의 `View`에 적용돼요.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * `Button` 컴포넌트의 텍스트 스타일을 변경할 때 사용해요.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * `Button` 컴포넌트의 왼쪽에 추가할 아이콘이나 텍스트를 지정해요.
+     */
+    leftAccessory?: ReactNode;
+}
+type PointerEvents = Pick<ViewProps, 'pointerEvents'>;
+export declare const containerStylesBySize: {
+    base: {
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+        position: "relative";
+    };
+    tiny: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        minHeight: number;
+        minWidth: number;
+        borderRadius: number;
+    };
+    medium: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        minHeight: number;
+        minWidth: number;
+        borderRadius: number;
+    };
+    large: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        minHeight: number;
+        minWidth: number;
+        borderRadius: number;
+    };
+    big: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        minHeight: number;
+        minWidth: number;
+        borderRadius: number;
+    };
+};
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & PointerEvents & import("react").RefAttributes<View>>;
+export {};

package/dist/esm/components/button/Button.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d,jsxs as S}from"react/jsx-runtime";import{colors as W}from"@toss-design-system/colors";import{bezier as x,spring as t}from"@toss-design-system/easings";import{Children as G,forwardRef as j,Fragment as L,useCallback as A,useEffect as _,useMemo as v,useState as M}from"react";import{Easing as b,Pressable as J,StyleSheet as B,useAnimatedValue as m,View as K}from"react-native";import{ThemeProvider as Q,useTheme as U}from"../../core/index";import{Animated as e}from"../../interactions/animated/index";import{RadialGradient as X}from"../gradient/index";import{Txt as Y}from"../txt";const Z=j(function({children:a,onPress:i,size:o="big",style:u="fill",display:c="inline",disabled:l=!1,loading:n=!1,viewStyle:s,color:g,containerStyle:C,textStyle:N,pointerEvents:q=void 0,leftAccessory:w,onPressIn:V,onPressOut:z},O){const f=U(),D=te(),k=u==="weak"?{backgroundColor:f.token.button.backgroundWeakColor,textColor:f.token.button.textWeakColor,dimColor:f.token.button.dimWeakColor,gradientStartColor:f.token.button.gradientStartWeakColor,gradientEndColor:f.token.button.gradientEndWeakColor,loaderColor:f.token.button.loaderWeakColor}:{backgroundColor:f.token.button.backgroundFillColor,textColor:f.token.button.textFillColor,dimColor:f.token.button.dimFillColor,gradientStartColor:f.token.button.gradientStartFillColor,gradientEndColor:f.token.button.gradientEndFillColor,loaderColor:f.token.button.loaderFillColor},h=!(l||n),[E,H]=M(!1),F=A(y=>{V?.(y),h!==!1&&H(!0)},[V,h]),P=A(y=>{z?.(y),h!==!1&&H(!1)},[z,h]),p=re({style:u,display:c});_(()=>{if(E){p.controller.pressed.start();return}if(n&&D.controller.loader.start(),n&&l){p.controller.loadingWhileDisabled.start();return}if(n&&!l){p.controller.loading.start();return}if(!n&&l){p.controller.disabled.start();return}p.controller.default.start()},[n,l,p.controller,D.controller,E]);const I=G.map(a,(y,T)=>typeof y=="string"||typeof y=="number"?d(Y,{typography:ie[o],color:g??k.textColor,style:N,fontWeight:"semibold",children:y}):d(L,{children:y},T));return d(J,{accessibilityRole:"button",accessibilityState:{disabled:l},onPress:h?i:void 0,pointerEvents:q,onPressIn:F,onPressOut:P,style:[$[c],s],ref:O,children:S(e.View,{ref:O,style:[containerStylesBySize.base,containerStylesBySize[o],ee[c],p.style.container,C],children:[d(e.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0},{backgroundColor:k.backgroundColor},p.style.background]}),S(e.View,{style:[{flexDirection:"row",alignItems:"center"},p.style.text],children:[w,I]}),d(e.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},p.style.gradient],children:d(K,{style:{width:"110%",aspectRatio:1},children:d(X,{colors:[k.gradientStartColor,k.gradientEndColor]})})}),d(e.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},p.style.loader],children:S(e.View,{style:{flexDirection:"row",gap:7},children:[d(e.View,{style:[{width:8,height:8,backgroundColor:k.loaderColor,borderRadius:99},D.style.loader1]}),d(e.View,{style:[{width:8,height:8,backgroundColor:k.loaderColor,borderRadius:99},D.style.loader2]}),d(e.View,{style:[{width:8,height:8,backgroundColor:k.loaderColor,borderRadius:99},D.style.loader3]})]})}),d(e.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0},{backgroundColor:k.dimColor},p.style.dim]})]})})});export const containerStylesBySize=B.create({base:{alignItems:"center",justifyContent:"center",overflow:"hidden",position:"relative"},tiny:{paddingHorizontal:10,paddingVertical:2,minHeight:32,minWidth:52,borderRadius:8},medium:{paddingHorizontal:16,paddingVertical:2,minHeight:38,minWidth:64,borderRadius:10},large:{paddingHorizontal:16,paddingVertical:2,minHeight:48,minWidth:80,borderRadius:14},big:{paddingHorizontal:28,paddingVertical:2,minHeight:56,minWidth:96,borderRadius:16}});const $=B.create({inline:{alignSelf:"flex-start"},block:{},full:{}}),ee=B.create({inline:{},block:{},full:{borderRadius:0}});function R(){const r=m(.2),a=m(.8),i=A(()=>e.parallel([e.loop(e.sequence([e.timing(r,{toValue:1,duration:300,easing:b.linear,useNativeDriver:!1}),e.timing(r,{toValue:.2,duration:300,easing:b.linear,useNativeDriver:!1})])),e.loop(e.sequence([e.timing(a,{toValue:1,duration:300,easing:b.linear,useNativeDriver:!1}),e.timing(a,{toValue:.8,duration:300,easing:b.linear,useNativeDriver:!1})]))]),[r,a]);return v(()=>({style:{loader:{opacity:r,transform:[{scale:a}]}},controller:{create:i}}),[r,a,i])}function te(){const r=R(),a=R(),i=R(),o=v(()=>e.parallel([e.sequence([r.controller.create()]),e.sequence([e.delay(100),a.controller.create()]),e.sequence([e.delay(200),i.controller.create()])]),[r.controller,a.controller,i.controller]);return v(()=>({style:{loader1:r.style.loader,loader2:a.style.loader,loader3:i.style.loader},controller:{loader:{...o,start:()=>{o.reset(),o.start()}}}}),[r.style.loader,a.style.loader,i.style.loader,o])}function re({style:r,display:a}){const i=m(1),o=m(1),u=m(1),c=m(1),l=m(1),n=m(0),s=m(0),g=m(0),C=v(()=>e.parallel([e.spring(n,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(u,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(s,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(c,{toValue:1,...t.quick,delay:100,useNativeDriver:!1}),e.spring(g,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(i,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(o,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(l,{toValue:1,...t.quick,useNativeDriver:!1})]),[u,i,o,n,s,g,c,l]),N=v(()=>e.parallel([e.spring(n,{toValue:.26,...t.quick,useNativeDriver:!1}),e.spring(u,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(s,{toValue:0,...t.quick,useNativeDriver:!1}),a==="inline"?e.spring(o,{toValue:.96,...t.rapid,useNativeDriver:!1}):e.spring(l,{toValue:.96,...t.rapid,useNativeDriver:!1})]),[u,o,n,a,s,l]),q=v(()=>(s.setValue(0),e.parallel([e.spring(n,{toValue:.13,...t.quick,useNativeDriver:!1}),e.spring(u,{toValue:1,...t.quick,useNativeDriver:!1}),e.loop(e.sequence([e.timing(s,{toValue:r==="fill"?.7:.24,easing:b.bezier(...x.out),duration:600,useNativeDriver:!1}),e.timing(s,{toValue:0,easing:b.bezier(...x.out),duration:600,useNativeDriver:!1})])),e.spring(c,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(g,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(i,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(o,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(l,{toValue:1,...t.quick,useNativeDriver:!1})])),[u,i,o,n,s,g,r,c,l]),w=v(()=>(s.setValue(0),e.parallel([e.spring(n,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(u,{toValue:r==="fill"?.26:1,...t.quick,useNativeDriver:!1}),e.loop(e.sequence([e.timing(s,{toValue:r==="fill"?.2:.14,easing:b.bezier(...x.out),duration:600,useNativeDriver:!1}),e.timing(s,{toValue:0,easing:b.bezier(...x.out),duration:600,useNativeDriver:!1})])),e.spring(c,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(g,{toValue:r==="fill"?.7:.3,...t.quick,useNativeDriver:!1}),e.spring(i,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(o,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(l,{toValue:1,...t.quick,useNativeDriver:!1})])),[u,i,o,n,s,g,r,c,l]),V=v(()=>e.parallel([e.spring(n,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(u,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(s,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(c,{toValue:r==="fill"?1:.38,...t.quick,delay:100,useNativeDriver:!1}),e.spring(g,{toValue:0,...t.quick,useNativeDriver:!1}),e.spring(i,{toValue:r==="fill"?.26:1,...t.quick,useNativeDriver:!1}),e.spring(o,{toValue:1,...t.quick,useNativeDriver:!1}),e.spring(l,{toValue:1,...t.quick,useNativeDriver:!1})]),[u,i,o,n,s,g,r,c,l]);return v(()=>({style:{container:{opacity:i,transform:[{scale:o}]},background:{opacity:u},text:{opacity:c,transform:[{scale:l}]},dim:{opacity:n},gradient:{opacity:s},loader:{opacity:g}},controller:{default:C,pressed:N,loading:q,loadingWhileDisabled:w,disabled:V}}),[u,i,o,C,n,V,s,g,q,w,N,c,l])}const ie={tiny:"t7",medium:"t6",large:"st9",big:"st9"},oe={danger:W.red500,light:W.whiteOpacity900,dark:W.grey700};export const Button=j(function({type:a,...i},o){const u=v(()=>a===void 0||a==="primary"?{}:{color:{primary:oe[a]}},[a]);return d(Q,{token:u,children:d(Z,{...i,ref:o})})});

package/dist/esm/components/button/ButtonDerivedTokenGenerator.d.ts

@@ -0,0 +1,19 @@
+import { BaseDerivedTokenGenerator } from '../../core/theme/deriveToken/BaseDerivedTokenGenerator.js';
+import type { SeedToken } from '../../core/theme/seedToken/seedToken.js';
+export type ButtonDerivedTheme = {
+    backgroundFillColor: string;
+    textFillColor: string;
+    backgroundWeakColor: string;
+    textWeakColor: string;
+    dimFillColor: string;
+    dimWeakColor: string;
+    gradientStartFillColor: string;
+    gradientStartWeakColor: string;
+    gradientEndFillColor: string;
+    gradientEndWeakColor: string;
+    loaderFillColor: string;
+    loaderWeakColor: string;
+};
+export declare class ButtonDerivedTokenGenerator extends BaseDerivedTokenGenerator<ButtonDerivedTheme> {
+    protected calculate(seed: SeedToken): ButtonDerivedTheme;
+}

package/dist/esm/components/button/ButtonDerivedTokenGenerator.js

@@ -0,0 +1 @@
+"use strict";import{colors as t}from"@toss-design-system/colors";import{ColorManager as o}from"../../utils/ColorManager.js";import{BaseDerivedTokenGenerator as n}from"../../core/theme/deriveToken/BaseDerivedTokenGenerator.js";function k(e){const r=new o(e).getOklch();return r.l<.4?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new o(t.grey700).setAlpha(.07).getRgba(),textWeakColor:t.grey700}:r.l<=.525?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new o(e).setAlpha(.08).getRgba(),textWeakColor:e}:r.l<=.645?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new o(e).setAlpha(.09).getRgba(),textWeakColor:new o(e).setLightness(.525).getRgba()}:r.l<.7?{backgroundFillColor:new o(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new o(e).setAlpha(.11).getRgba(),textWeakColor:new o(e).setLightness(.525).getRgba()}:r.l<=.75?{backgroundFillColor:new o(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new o(e).setAlpha(.13).getRgba(),textWeakColor:new o(e).setLightness(.525).getRgba()}:r.l<.8?{backgroundFillColor:new o(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new o(e).setAlpha(.15).getRgba(),textWeakColor:new o(e).setLightness(.525).getRgba()}:{backgroundFillColor:e,textFillColor:t.greyOpacity800,backgroundWeakColor:new o(t.grey700).setAlpha(.07).getRgba(),textWeakColor:t.grey700}}function i(e,r){const l=new o(e).getOklch();return l.l>=.8||l.l<.4?{backgroundWeakColor:new o(t.grey700).setAlpha(.07).getRgba(),textWeakColor:t.grey700,dimWeakColor:t.grey700,gradientStartWeakColor:t.grey700,loaderWeakColor:t.grey700}:{backgroundWeakColor:r.backgroundWeakColor,textWeakColor:r.textWeakColor,dimWeakColor:l.l>=.8?t.grey700:r.backgroundFillColor,gradientStartWeakColor:l.l>=.8?t.grey700:r.backgroundFillColor,loaderWeakColor:l.l>=.8?t.grey700:r.backgroundFillColor}}function C(e){const r=new o(e).getOklch(),l=k(e),a=i(e,l),g=new o(l.backgroundFillColor).setLightness(new o(l.backgroundFillColor).getLightness()-.134).getRgba();return{...l,backgroundWeakColor:a.backgroundWeakColor,textWeakColor:a.textWeakColor,dimFillColor:r.l>=.8?"rgba(0,0,0,0.5)":"#000",dimWeakColor:a.dimWeakColor,gradientStartFillColor:g,gradientStartWeakColor:a.gradientStartWeakColor,gradientEndFillColor:new o(l.backgroundFillColor).setAlpha(0).getRgba(),gradientEndWeakColor:new o(a.gradientStartWeakColor).setAlpha(0).getRgba(),loaderFillColor:r.l>=.8?t.greyOpacity600:"#fff",loaderWeakColor:a.loaderWeakColor}}export class ButtonDerivedTokenGenerator extends n{calculate(r){return C(r.color.primary)}}

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

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

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

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

package/dist/esm/components/carousel/Carousel.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { CarouselItem } from './CarouselItem';
+interface Props {
+    children: ReactNode[];
+    /** 캐러셀 아이템의 너비 */
+    itemWidth?: number;
+    /** 캐러셀 아이템 사이의 간격 */
+    itemGap?: number;
+    /** 캐러셀 아이템을 둘러싸는 패딩 */
+    padding?: number;
+    renderIndicators?: (data: {
+        activeIndex: number;
+        itemsCount: number;
+    }) => ReactNode;
+}
+/**
+ *
+ * @example
+ * <Carousel itemWidth={320}>
+ *   <Carousel.Item>
+ *     <View style={{ width: 320, height: 200, backgroundColor: 'red' }} />
+ *   </Carousel.Item>
+ *   <Carousel.Item>
+ *     <View style={{ width: 320, height: 200, backgroundColor: 'blue' }} />
+ *   </Carousel.Item>
+ * </Carousel>
+ * @note GestureHandlerRootView를 앱 최상위에 넣어야 안드로이드에서 정상적으로 동작합니다
+ */
+export declare function Carousel({ children, itemWidth, itemGap, padding, renderIndicators }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Carousel {
+    var Item: typeof CarouselItem;
+}
+export {};

package/dist/esm/components/carousel/Carousel.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,Fragment as g,jsxs as h}from"react/jsx-runtime";import{Gesture as y,GestureDetector as j}from"@granite-js/native/react-native-gesture-handler";import{Stack as C}from"@granite-js/react-native";import{Children as u,isValidElement as c,useMemo as A}from"react";import{Animated as I,View as w}from"react-native";import{useSnapAnimation as S}from"./animations/snap";import{CarouselItem as V}from"./CarouselItem";export function Carousel({children:o,itemWidth:n=280,itemGap:i=12,padding:m=24,renderIndicators:f}){const a=u.toArray(o).filter(t=>c(t)).length,r=A(()=>({itemsCount:a,itemGap:i,itemWidth:n,padding:m}),[i,n,a,m]),s=S(r),p=y.Simultaneous(s.gesture),x={transform:[...s.transforms]},l=u.toArray(o).filter(t=>c(t)).map((t,d)=>e(w,{style:{width:r.itemWidth},children:t},d));return h(g,{children:[e(j,{gesture:p,children:e(I.View,{style:x,children:e(C.Horizontal,{gutter:r.itemGap,align:"flex-start",justify:"center",children:l})})}),f?.({activeIndex:s.activeIndex,itemsCount:l.length})]})}Carousel.Item=V;

package/dist/esm/components/carousel/CarouselItem.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare function CarouselItem({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/carousel/CarouselItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{View as o}from"react-native";export function CarouselItem({children:r}){return e(o,{style:[{borderRadius:20}],children:r})}

package/dist/esm/components/carousel/animations/scale.d.ts

@@ -0,0 +1,11 @@
+import { Animated } from 'react-native';
+export declare function useTapScaleAnimation(): {
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    transforms: ({
+        scaleX: Animated.Value;
+        scaleY?: undefined;
+    } | {
+        scaleY: Animated.Value;
+        scaleX?: undefined;
+    })[];
+};

package/dist/esm/components/carousel/animations/scale.js

@@ -0,0 +1 @@
+"use strict";import{Gesture as i}from"@granite-js/native/react-native-gesture-handler";import{spring as n}from"@toss-design-system/easings";import{useMemo as s,useRef as a}from"react";import{Animated as r}from"react-native";export function useTapScaleAnimation(){const e=a(new r.Value(1)).current,u=s(()=>{const t=i.Pan().onBegin(()=>{r.spring(e,{toValue:.96,useNativeDriver:!0,...n.quick}).start()}).onFinalize(()=>{r.spring(e,{toValue:.96,useNativeDriver:!0,...n.quick}).start()});return t.runOnJS(!0),t},[e]),o=s(()=>[{scaleX:e},{scaleY:e}],[e]);return{gesture:u,transforms:o}}

package/dist/esm/components/carousel/animations/snap.d.ts

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+import { CarouselContext } from '../context';
+export declare function useSnapAnimation(context: CarouselContext): {
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    transforms: {
+        translateX: Animated.Value;
+    }[];
+    activeIndex: number;
+};

package/dist/esm/components/carousel/animations/snap.js

@@ -0,0 +1 @@
+"use strict";import{Gesture as P}from"@granite-js/native/react-native-gesture-handler";import{spring as M}from"@toss-design-system/easings";import{useMemo as f,useRef as a,useState as S}from"react";import{Animated as p,Dimensions as v}from"react-native";export function useSnapAnimation(t){const i=a(new p.Value(t.padding)).current,r=a(!1),[n,g]=S(0),d=a(t.padding),e=a(t.padding),c=f(()=>{const o=P.Pan().onUpdate(s=>{r.current!==!0&&(e.current=d.current+s.translationX,i.setValue(e.current))}).onEnd(s=>{if(r.current===!0)return;const m=A(t),W=b({translateX:e.current,translationX:s.translationX,velocityX:s.velocityX},t),u=I(W,m);r.current=!0,p.spring(i,{toValue:u,useNativeDriver:!0,...M.quick}).start(()=>{e.current=u,d.current=e.current,r.current=!1}),g(m.findIndex(w=>w===u))});return o.runOnJS(!0),o},[t,i]),h=f(()=>[{translateX:i}],[i]);return{gesture:c,transforms:h,activeIndex:n}}const l=v.get("window").width;function A(t){"worklet";return Array(t.itemsCount).fill(void 0).map((i,r)=>{switch(r){case 0:return t.padding;case t.itemsCount-1:{const n=l-t.itemWidth-t.padding;return t.padding-(t.itemWidth+t.itemGap)*(t.itemsCount-1)+(n-t.padding)}default:{const n=(l-t.itemWidth)/2;return t.padding-(t.itemWidth+t.itemGap)*r+(n-t.padding)}}})}function I(t,i){"worklet";let r=i[0];for(const n of i)Math.abs(n-t)<Math.abs(r-t)&&(r=n);return r}function b({translateX:t,translationX:i,velocityX:r},n){"worklet";return Math.abs(r)<n.itemWidth/2||Math.abs(i)>=n.itemWidth/2?t:t+Math.sign(r)*n.itemWidth}

package/dist/esm/components/carousel/context.d.ts

@@ -0,0 +1,10 @@
+export interface CarouselContext {
+    /** 캐러셀 아이템의 숫자 */
+    itemsCount: number;
+    /** 캐러셀 아이템의 너비 */
+    itemWidth: number;
+    /** 캐러셀 아이템 사이의 간격 */
+    itemGap: number;
+    /** 캐러셀 아이템을 둘러싸는 패딩 */
+    padding: number;
+}

package/dist/esm/components/carousel/context.js

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

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

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

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

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