@toss/tds-react-native 1.0.0

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.a11yCondition=void 0,exports.a11yCondition={root:{biggerThanOrEqualTo:160}};

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

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

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

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

package/dist/cjs/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/cjs/components/bottom-sheet/types.js

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

package/dist/cjs/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/cjs/components/bottom-sheet/utils/CTAAnimation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetCTAAnimation=BottomSheetCTAAnimation;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native");function BottomSheetCTAAnimation({children:t,style:i}){const e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(e,{toValue:1,easing:react_native_1.Easing.bezier(...easings_1.bezier.ease),duration:600,useNativeDriver:!0}).start()},[e]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:i,children:t})}

package/dist/cjs/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/cjs/components/bottom-sheet/utils/GestureBoundary.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetGestureBoundary=BottomSheetGestureBoundary;const jsx_runtime_1=require("react/jsx-runtime"),react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),react_1=require("react");function BottomSheetGestureBoundary({children:e}){const t=(0,react_1.useMemo)(()=>react_native_gesture_handler_1.Gesture.LongPress().minDuration(0),[]);return(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector,{gesture:t,children:e})}

package/dist/cjs/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/cjs/components/bottom-sheet/utils/RenderingAnimation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetRenderingAnimation=BottomSheetRenderingAnimation;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native");function BottomSheetRenderingAnimation({delay:e=0,children:r}){const t=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,i=(0,react_1.useRef)(new react_native_1.Animated.Value(80)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.timing(t,{toValue:1,duration:800,delay:e,easing:react_native_1.Easing.bezier(...easings_1.bezier.expo),useNativeDriver:!0}),react_native_1.Animated.timing(i,{toValue:0,duration:800,delay:e,easing:react_native_1.Easing.bezier(...easings_1.bezier.expo),useNativeDriver:!0})]).start()},[e,t,i]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:{opacity:t,transform:[{translateY:i}]},children:r})}

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.usePreservedCallback=usePreservedCallback;const react_1=require("react");function usePreservedCallback(e){const r=(0,react_1.useRef)(e);return r.current!==e&&(r.current=e),(0,react_1.useMemo)(()=>(...t)=>r.current(...t),[])}

package/dist/cjs/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/cjs/components/button/Button.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Button=exports.containerStylesBySize=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native"),index_1=require("../../core/index"),index_2=require("../../interactions/animated/index"),index_3=require("../gradient/index"),txt_1=require("../txt"),BaseButton=(0,react_1.forwardRef)(function({children:r,onPress:t,size:i="big",style:s="fill",display:l="inline",disabled:n=!1,loading:a=!1,viewStyle:o,color:u,containerStyle:A,textStyle:y,pointerEvents:k=void 0,leftAccessory:V,onPressIn:p,onPressOut:b},D){const d=(0,index_1.useTheme)(),f=useLoadersAnimation(),g=s==="weak"?{backgroundColor:d.token.button.backgroundWeakColor,textColor:d.token.button.textWeakColor,dimColor:d.token.button.dimWeakColor,gradientStartColor:d.token.button.gradientStartWeakColor,gradientEndColor:d.token.button.gradientEndWeakColor,loaderColor:d.token.button.loaderWeakColor}:{backgroundColor:d.token.button.backgroundFillColor,textColor:d.token.button.textFillColor,dimColor:d.token.button.dimFillColor,gradientStartColor:d.token.button.gradientStartFillColor,gradientEndColor:d.token.button.gradientEndFillColor,loaderColor:d.token.button.loaderFillColor},v=!(n||a),[h,q]=(0,react_1.useState)(!1),x=(0,react_1.useCallback)(m=>{p?.(m),v!==!1&&q(!0)},[p,v]),C=(0,react_1.useCallback)(m=>{b?.(m),v!==!1&&q(!1)},[b,v]),c=useButtonAnimation({style:s,display:l});(0,react_1.useEffect)(()=>{if(h){c.controller.pressed.start();return}if(a&&f.controller.loader.start(),a&&n){c.controller.loadingWhileDisabled.start();return}if(a&&!n){c.controller.loading.start();return}if(!a&&n){c.controller.disabled.start();return}c.controller.default.start()},[a,n,c.controller,f.controller,h]);const N=react_1.Children.map(r,(m,S)=>typeof m=="string"||typeof m=="number"?(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:typographyBySize[i],color:u??g.textColor,style:y,fontWeight:"semibold",children:m}):(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:m},S));return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{accessibilityRole:"button",accessibilityState:{disabled:n},onPress:v?t:void 0,pointerEvents:k,onPressIn:x,onPressOut:C,style:[vierStyleByDislpay[l],o],ref:D,children:(0,jsx_runtime_1.jsxs)(index_2.Animated.View,{ref:D,style:[exports.containerStylesBySize.base,exports.containerStylesBySize[i],containerStylesByDisplay[l],c.style.container,A],children:[(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0},{backgroundColor:g.backgroundColor},c.style.background]}),(0,jsx_runtime_1.jsxs)(index_2.Animated.View,{style:[{flexDirection:"row",alignItems:"center"},c.style.text],children:[V,N]}),(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},c.style.gradient],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{width:"110%",aspectRatio:1},children:(0,jsx_runtime_1.jsx)(index_3.RadialGradient,{colors:[g.gradientStartColor,g.gradientEndColor]})})}),(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},c.style.loader],children:(0,jsx_runtime_1.jsxs)(index_2.Animated.View,{style:{flexDirection:"row",gap:7},children:[(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{width:8,height:8,backgroundColor:g.loaderColor,borderRadius:99},f.style.loader1]}),(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{width:8,height:8,backgroundColor:g.loaderColor,borderRadius:99},f.style.loader2]}),(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{width:8,height:8,backgroundColor:g.loaderColor,borderRadius:99},f.style.loader3]})]})}),(0,jsx_runtime_1.jsx)(index_2.Animated.View,{style:[{position:"absolute",top:0,left:0,right:0,bottom:0},{backgroundColor:g.dimColor},c.style.dim]})]})})});exports.containerStylesBySize=react_native_1.StyleSheet.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 vierStyleByDislpay=react_native_1.StyleSheet.create({inline:{alignSelf:"flex-start"},block:{},full:{}}),containerStylesByDisplay=react_native_1.StyleSheet.create({inline:{},block:{},full:{borderRadius:0}});function useLoaderAnimation(){const e=(0,react_native_1.useAnimatedValue)(.2),r=(0,react_native_1.useAnimatedValue)(.8),t=(0,react_1.useCallback)(()=>index_2.Animated.parallel([index_2.Animated.loop(index_2.Animated.sequence([index_2.Animated.timing(e,{toValue:1,duration:300,easing:react_native_1.Easing.linear,useNativeDriver:!1}),index_2.Animated.timing(e,{toValue:.2,duration:300,easing:react_native_1.Easing.linear,useNativeDriver:!1})])),index_2.Animated.loop(index_2.Animated.sequence([index_2.Animated.timing(r,{toValue:1,duration:300,easing:react_native_1.Easing.linear,useNativeDriver:!1}),index_2.Animated.timing(r,{toValue:.8,duration:300,easing:react_native_1.Easing.linear,useNativeDriver:!1})]))]),[e,r]);return(0,react_1.useMemo)(()=>({style:{loader:{opacity:e,transform:[{scale:r}]}},controller:{create:t}}),[e,r,t])}function useLoadersAnimation(){const e=useLoaderAnimation(),r=useLoaderAnimation(),t=useLoaderAnimation(),i=(0,react_1.useMemo)(()=>index_2.Animated.parallel([index_2.Animated.sequence([e.controller.create()]),index_2.Animated.sequence([index_2.Animated.delay(100),r.controller.create()]),index_2.Animated.sequence([index_2.Animated.delay(200),t.controller.create()])]),[e.controller,r.controller,t.controller]);return(0,react_1.useMemo)(()=>({style:{loader1:e.style.loader,loader2:r.style.loader,loader3:t.style.loader},controller:{loader:{...i,start:()=>{i.reset(),i.start()}}}}),[e.style.loader,r.style.loader,t.style.loader,i])}function useButtonAnimation({style:e,display:r}){const t=(0,react_native_1.useAnimatedValue)(1),i=(0,react_native_1.useAnimatedValue)(1),s=(0,react_native_1.useAnimatedValue)(1),l=(0,react_native_1.useAnimatedValue)(1),n=(0,react_native_1.useAnimatedValue)(1),a=(0,react_native_1.useAnimatedValue)(0),o=(0,react_native_1.useAnimatedValue)(0),u=(0,react_native_1.useAnimatedValue)(0),A=(0,react_1.useMemo)(()=>index_2.Animated.parallel([index_2.Animated.spring(a,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(s,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(o,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(l,{toValue:1,...easings_1.spring.quick,delay:100,useNativeDriver:!1}),index_2.Animated.spring(u,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(t,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(i,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(n,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1})]),[s,t,i,a,o,u,l,n]),y=(0,react_1.useMemo)(()=>index_2.Animated.parallel([index_2.Animated.spring(a,{toValue:.26,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(s,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(o,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),r==="inline"?index_2.Animated.spring(i,{toValue:.96,...easings_1.spring.rapid,useNativeDriver:!1}):index_2.Animated.spring(n,{toValue:.96,...easings_1.spring.rapid,useNativeDriver:!1})]),[s,i,a,r,o,n]),k=(0,react_1.useMemo)(()=>(o.setValue(0),index_2.Animated.parallel([index_2.Animated.spring(a,{toValue:.13,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(s,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.loop(index_2.Animated.sequence([index_2.Animated.timing(o,{toValue:e==="fill"?.7:.24,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:600,useNativeDriver:!1}),index_2.Animated.timing(o,{toValue:0,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:600,useNativeDriver:!1})])),index_2.Animated.spring(l,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(u,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(t,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(i,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(n,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1})])),[s,t,i,a,o,u,e,l,n]),V=(0,react_1.useMemo)(()=>(o.setValue(0),index_2.Animated.parallel([index_2.Animated.spring(a,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(s,{toValue:e==="fill"?.26:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.loop(index_2.Animated.sequence([index_2.Animated.timing(o,{toValue:e==="fill"?.2:.14,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:600,useNativeDriver:!1}),index_2.Animated.timing(o,{toValue:0,easing:react_native_1.Easing.bezier(...easings_1.bezier.out),duration:600,useNativeDriver:!1})])),index_2.Animated.spring(l,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(u,{toValue:e==="fill"?.7:.3,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(t,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(i,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(n,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1})])),[s,t,i,a,o,u,e,l,n]),p=(0,react_1.useMemo)(()=>index_2.Animated.parallel([index_2.Animated.spring(a,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(s,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(o,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(l,{toValue:e==="fill"?1:.38,...easings_1.spring.quick,delay:100,useNativeDriver:!1}),index_2.Animated.spring(u,{toValue:0,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(t,{toValue:e==="fill"?.26:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(i,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1}),index_2.Animated.spring(n,{toValue:1,...easings_1.spring.quick,useNativeDriver:!1})]),[s,t,i,a,o,u,e,l,n]);return(0,react_1.useMemo)(()=>({style:{container:{opacity:t,transform:[{scale:i}]},background:{opacity:s},text:{opacity:l,transform:[{scale:n}]},dim:{opacity:a},gradient:{opacity:o},loader:{opacity:u}},controller:{default:A,pressed:y,loading:k,loadingWhileDisabled:V,disabled:p}}),[s,t,i,A,a,p,o,u,k,V,y,l,n])}const typographyBySize={tiny:"t7",medium:"t6",large:"st9",big:"st9"},ColorByType={danger:colors_1.colors.red500,light:colors_1.colors.whiteOpacity900,dark:colors_1.colors.grey700};exports.Button=(0,react_1.forwardRef)(function({type:r,...t},i){const s=(0,react_1.useMemo)(()=>r===void 0||r==="primary"?{}:{color:{primary:ColorByType[r]}},[r]);return(0,jsx_runtime_1.jsx)(index_1.ThemeProvider,{token:s,children:(0,jsx_runtime_1.jsx)(BaseButton,{...t,ref:i})})});

package/dist/cjs/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/cjs/components/button/ButtonDerivedTokenGenerator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ButtonDerivedTokenGenerator=void 0;const colors_1=require("@toss-design-system/colors"),ColorManager_js_1=require("../../utils/ColorManager.js"),BaseDerivedTokenGenerator_js_1=require("../../core/theme/deriveToken/BaseDerivedTokenGenerator.js");function getBaseColors(e){const o=new ColorManager_js_1.ColorManager(e).getOklch();return o.l<.4?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(colors_1.colors.grey700).setAlpha(.07).getRgba(),textWeakColor:colors_1.colors.grey700}:o.l<=.525?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(e).setAlpha(.08).getRgba(),textWeakColor:e}:o.l<=.645?{backgroundFillColor:e,textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(e).setAlpha(.09).getRgba(),textWeakColor:new ColorManager_js_1.ColorManager(e).setLightness(.525).getRgba()}:o.l<.7?{backgroundFillColor:new ColorManager_js_1.ColorManager(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(e).setAlpha(.11).getRgba(),textWeakColor:new ColorManager_js_1.ColorManager(e).setLightness(.525).getRgba()}:o.l<=.75?{backgroundFillColor:new ColorManager_js_1.ColorManager(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(e).setAlpha(.13).getRgba(),textWeakColor:new ColorManager_js_1.ColorManager(e).setLightness(.525).getRgba()}:o.l<.8?{backgroundFillColor:new ColorManager_js_1.ColorManager(e).setLightness(.645).getRgba(),textFillColor:"#fff",backgroundWeakColor:new ColorManager_js_1.ColorManager(e).setAlpha(.15).getRgba(),textWeakColor:new ColorManager_js_1.ColorManager(e).setLightness(.525).getRgba()}:{backgroundFillColor:e,textFillColor:colors_1.colors.greyOpacity800,backgroundWeakColor:new ColorManager_js_1.ColorManager(colors_1.colors.grey700).setAlpha(.07).getRgba(),textWeakColor:colors_1.colors.grey700}}function getWeakColorsWithSpecialCondition(e,o){const r=new ColorManager_js_1.ColorManager(e).getOklch();return r.l>=.8||r.l<.4?{backgroundWeakColor:new ColorManager_js_1.ColorManager(colors_1.colors.grey700).setAlpha(.07).getRgba(),textWeakColor:colors_1.colors.grey700,dimWeakColor:colors_1.colors.grey700,gradientStartWeakColor:colors_1.colors.grey700,loaderWeakColor:colors_1.colors.grey700}:{backgroundWeakColor:o.backgroundWeakColor,textWeakColor:o.textWeakColor,dimWeakColor:r.l>=.8?colors_1.colors.grey700:o.backgroundFillColor,gradientStartWeakColor:r.l>=.8?colors_1.colors.grey700:o.backgroundFillColor,loaderWeakColor:r.l>=.8?colors_1.colors.grey700:o.backgroundFillColor}}function getThemeColors(e){const o=new ColorManager_js_1.ColorManager(e).getOklch(),r=getBaseColors(e),a=getWeakColorsWithSpecialCondition(e,r),l=new ColorManager_js_1.ColorManager(r.backgroundFillColor).setLightness(new ColorManager_js_1.ColorManager(r.backgroundFillColor).getLightness()-.134).getRgba();return{...r,backgroundWeakColor:a.backgroundWeakColor,textWeakColor:a.textWeakColor,dimFillColor:o.l>=.8?"rgba(0,0,0,0.5)":"#000",dimWeakColor:a.dimWeakColor,gradientStartFillColor:l,gradientStartWeakColor:a.gradientStartWeakColor,gradientEndFillColor:new ColorManager_js_1.ColorManager(r.backgroundFillColor).setAlpha(0).getRgba(),gradientEndWeakColor:new ColorManager_js_1.ColorManager(a.gradientStartWeakColor).setAlpha(0).getRgba(),loaderFillColor:o.l>=.8?colors_1.colors.greyOpacity600:"#fff",loaderWeakColor:a.loaderWeakColor}}class ButtonDerivedTokenGenerator extends BaseDerivedTokenGenerator_js_1.BaseDerivedTokenGenerator{calculate(o){return getThemeColors(o.color.primary)}}exports.ButtonDerivedTokenGenerator=ButtonDerivedTokenGenerator;

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

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

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

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

package/dist/cjs/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/cjs/components/carousel/Carousel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Carousel=Carousel;const jsx_runtime_1=require("react/jsx-runtime"),react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),react_native_1=require("@granite-js/react-native"),react_1=require("react"),react_native_2=require("react-native"),snap_1=require("./animations/snap"),CarouselItem_1=require("./CarouselItem");function Carousel({children:n,itemWidth:s=280,itemGap:i=12,padding:a=24,renderIndicators:c}){const o=react_1.Children.toArray(n).filter(e=>(0,react_1.isValidElement)(e)).length,t=(0,react_1.useMemo)(()=>({itemsCount:o,itemGap:i,itemWidth:s,padding:a}),[i,s,o,a]),r=(0,snap_1.useSnapAnimation)(t),l=react_native_gesture_handler_1.Gesture.Simultaneous(r.gesture),m={transform:[...r.transforms]},u=react_1.Children.toArray(n).filter(e=>(0,react_1.isValidElement)(e)).map((e,_)=>(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{width:t.itemWidth},children:e},_));return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector,{gesture:l,children:(0,jsx_runtime_1.jsx)(react_native_2.Animated.View,{style:m,children:(0,jsx_runtime_1.jsx)(react_native_1.Stack.Horizontal,{gutter:t.itemGap,align:"flex-start",justify:"center",children:u})})}),c?.({activeIndex:r.activeIndex,itemsCount:u.length})]})}Carousel.Item=CarouselItem_1.CarouselItem;

package/dist/cjs/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/cjs/components/carousel/CarouselItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CarouselItem=CarouselItem;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native");function CarouselItem({children:e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{borderRadius:20}],children:e})}

package/dist/cjs/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/cjs/components/carousel/animations/scale.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTapScaleAnimation=useTapScaleAnimation;const react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native");function useTapScaleAnimation(){const e=(0,react_1.useRef)(new react_native_1.Animated.Value(1)).current,r=(0,react_1.useMemo)(()=>{const t=react_native_gesture_handler_1.Gesture.Pan().onBegin(()=>{react_native_1.Animated.spring(e,{toValue:.96,useNativeDriver:!0,...easings_1.spring.quick}).start()}).onFinalize(()=>{react_native_1.Animated.spring(e,{toValue:.96,useNativeDriver:!0,...easings_1.spring.quick}).start()});return t.runOnJS(!0),t},[e]),n=(0,react_1.useMemo)(()=>[{scaleX:e},{scaleY:e}],[e]);return{gesture:r,transforms:n}}

package/dist/cjs/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/cjs/components/carousel/animations/snap.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSnapAnimation=useSnapAnimation;const react_native_gesture_handler_1=require("@granite-js/native/react-native-gesture-handler"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native");function useSnapAnimation(e){const r=(0,react_1.useRef)(new react_native_1.Animated.Value(e.padding)).current,t=(0,react_1.useRef)(!1),[n,c]=(0,react_1.useState)(0),u=(0,react_1.useRef)(e.padding),i=(0,react_1.useRef)(e.padding),f=(0,react_1.useMemo)(()=>{const d=react_native_gesture_handler_1.Gesture.Pan().onUpdate(s=>{t.current!==!0&&(i.current=u.current+s.translationX,r.setValue(i.current))}).onEnd(s=>{if(t.current===!0)return;const o=getSnapPositions(e),g=getEstimatedPosition({translateX:i.current,translationX:s.translationX,velocityX:s.velocityX},e),a=roundToSnapPosition(g,o);t.current=!0,react_native_1.Animated.spring(r,{toValue:a,useNativeDriver:!0,...easings_1.spring.quick}).start(()=>{i.current=a,u.current=i.current,t.current=!1}),c(o.findIndex(p=>p===a))});return d.runOnJS(!0),d},[e,r]),m=(0,react_1.useMemo)(()=>[{translateX:r}],[r]);return{gesture:f,transforms:m,activeIndex:n}}const WINDOW_WIDTH=react_native_1.Dimensions.get("window").width;function getSnapPositions(e){"worklet";return Array(e.itemsCount).fill(void 0).map((r,t)=>{switch(t){case 0:return e.padding;case e.itemsCount-1:{const n=WINDOW_WIDTH-e.itemWidth-e.padding;return e.padding-(e.itemWidth+e.itemGap)*(e.itemsCount-1)+(n-e.padding)}default:{const n=(WINDOW_WIDTH-e.itemWidth)/2;return e.padding-(e.itemWidth+e.itemGap)*t+(n-e.padding)}}})}function roundToSnapPosition(e,r){"worklet";let t=r[0];for(const n of r)Math.abs(n-e)<Math.abs(t-e)&&(t=n);return t}function getEstimatedPosition({translateX:e,translationX:r,velocityX:t},n){"worklet";return Math.abs(t)<n.itemWidth/2||Math.abs(r)>=n.itemWidth/2?e:e+Math.sign(t)*n.itemWidth}

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

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

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

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

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

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

package/dist/cjs/components/carousel/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("./Carousel"),exports);

package/dist/cjs/components/chart/BarChart.d.ts

@@ -0,0 +1,90 @@
+import { View, ViewProps } from 'react-native';
+type Theme = 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'grey';
+type SingleBarFill = {
+    /**
+     * `BarChart` 컴포넌트의 오른쪽 끝 하나만 색상을 채우고, 나머지는 기본색(`grey100`)으로 설정돼요. `color` 속성을 사용해서 색상을 설정할 수 있어요.
+     */
+    type: 'single-bar';
+    /**
+     * `BarChart` 컴포넌트에 채울 색상을 설정해요.
+     */
+    theme: Theme;
+};
+type AllBarFill = {
+    /**
+     * `BarChart` 컴포넌트를 하나의 색상으로 채워요. `color` 속성을 사용해서 색상을 설정할 수 있어요.
+     */
+    type: 'all-bar';
+    /**
+     * `BarChart` 컴포넌트에 채울 색상을 설정해요.
+     */
+    theme: Theme;
+};
+type AutoFill = {
+    /**
+     * `BarChart` 컴포넌트를 기본 규칙에 따라 막대의 색상을 오른쪽 부터 채워요. `count` 속성을 통해 색상이 적용될 막대의 개수를 제한할 수 있어요.
+     *  색상 순서는 다음과 같아요: ['blue', 'green', 'yellow', 'orange', 'red', 'grey'].
+     */
+    type: 'auto';
+    /**
+     * 색상을 적용할 막대의 개수예요.
+     */
+    count: number;
+};
+export interface BarChartProps extends ViewProps {
+    /**
+     * `BarChart` 컴포넌트에 표시할 데이터를 설정해요.
+     *
+     * @default []
+     *
+     * @remarks
+     * - `value`는 0 이상의 정수여야 해요.
+     * - `xAxisLabel`은 x축에 표시할 라벨을 설정해요.
+     * - `value`와 `xAxisLabel`은 1:1로 매칭돼야 해요.
+     *
+     * @example
+     * ```typescript
+     * const data = [
+     *   { value: 10, xAxisLabel: 'Label1' },
+     *   { value: 20, xAxisLabel: 'Label2' },
+     * ];
+     * ```
+     */
+    data?: Array<{
+        value: number;
+        xAxisLabel?: string;
+    }>;
+    /**
+     * `BarChart` 컴포넌트의 색상 채우기 방식을 설정해요.
+     *
+     * @default 'all-bar' 모든 막대를 `blue` 색상으로 채워요.
+     *
+     * @remarks
+     * - `single-bar`: 오른쪽 끝 하나의 막대만 색상을 채우고, 나머지는 기본색(`grey100`)으로 설정돼요. `color` 속성을 사용해서 색상을 설정할 수 있어요.
+     * - `all-bar`: 모든 막대를 하나의 색상으로 채워요. `color` 속성을 사용해서 색상을 설정할 수 있어요.
+     * - `auto`: 기본 규칙에 따라 막대의 색상을 오른쪽 부터 채워요. `count` 속성을 통해 색상이 적용될 막대의 개수를 제한할 수 있어요.
+     *   색상 순서는 다음과 같아요: ['blue', 'green', 'yellow', 'orange', 'red', 'grey'].
+     *
+     * @example
+     * ```typescript
+     * fill={{ type: 'single-bar', theme: 'blue' }}
+     * fill={{ type: 'all-bar', theme: 'green' }}
+     * fill={{ type: 'auto', count: 3 }}
+     * ```
+     */
+    fill?: SingleBarFill | AllBarFill | AutoFill;
+    /**
+     * `BarChart` 컴포넌트의 너비를 설정해요.
+     *
+     * @default Dimensions.get('window').width `window`의 너비를 기본값으로 사용해요.
+     */
+    width?: number;
+    /**
+     * `BarChart` 컴포넌트의 높이를 설정해요.
+     *
+     * @default 205
+     */
+    height?: number;
+}
+export declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<View>>;
+export {};

package/dist/cjs/components/chart/BarChart.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(r,e,n,o){o===void 0&&(o=n);var t=Object.getOwnPropertyDescriptor(e,n);(!t||("get"in t?!e.__esModule:t.writable||t.configurable))&&(t={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(r,o,t)}:function(r,e,n,o){o===void 0&&(o=n),r[o]=e[n]},__setModuleDefault=Object.create?function(r,e){Object.defineProperty(r,"default",{enumerable:!0,value:e})}:function(r,e){r.default=e},__importStar=function(){var r=function(e){return r=Object.getOwnPropertyNames||function(n){var o=[];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(o[o.length]=t);return o},r(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var o=r(e),t=0;t<o.length;t++)o[t]!=="default"&&__createBinding(n,e,o[t]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.BarChart=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),react_native_1=require("@granite-js/react-native"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),react_native_2=require("react-native");function Bar({borderRadius:r,backgroundColor:e=colors_1.colors.grey100,...n}){const o="bar-background-color",t=`0 0 ${n.width} ${n.height}`;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{viewBox:t,...n,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.RadialGradient,{id:o,cx:"0%",cy:"100%",r:"100%",fx:"0%",fy:"100%",gradientUnits:"objectBoundingBox",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"0%",stopColor:typeof e=="string"?e:e[0]}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"100%",stopColor:typeof e=="string"?e:e[1]})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{width:n.width??"100%",height:n.height??"100%",fill:`url(#${o})`,rx:r,ry:r})]})}function XAxisLabel({style:r,color:e=colors_1.colors.grey600,...n}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{style:[{marginTop:6,paddingHorizontal:4},r],typography:"st13",color:e,fontWeight:"medium",textAlign:"center",...n})}function BarAnnotation({style:r,color:e=colors_1.colors.grey500,...n}){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{style:[{marginBottom:6,paddingHorizontal:6},r],typography:"st12",color:e,fontWeight:"medium",textAlign:"center",...n})}function BarContainer({gutter:r=0,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.Stack,{direction:"vertical",align:"center",justify:"flex-end",gutter:r,...e})}function ChartArea({gutter:r=0,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.Stack,{direction:"horizontal",justify:"center",gutter:r,...e})}function XAxisArea({gutter:r=0,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.Stack,{direction:"horizontal",justify:"center",gutter:r,...e})}const{width:WINDOW_WIDTH}=react_native_2.Dimensions.get("window");exports.BarChart=(0,react_1.forwardRef)(function({data:e=[],width:n=WINDOW_WIDTH,height:o=205,fill:t={type:"all-bar",theme:"blue"},style:y,...x},p){const i=(0,core_1.useAdaptive)(),v=48,B=24,A=23,j=58,M=38,C=n-v,O=o-B-A,H=Math.max(...e.map(({value:s})=>s)),d=Math.floor(Math.min(C/e.length,j)),S=O*.7,b=s=>Math.floor(s/H*S),u=Math.round(M/j*d),w=u>=30?8:u>9?Math.floor(u/5+2):3,a=(0,react_1.useMemo)(()=>({default:i.grey100,blue:[i.blue300,i.blue500],green:[i.green200,i.green400],yellow:[i.yellow300,i.yellow500],orange:[i.orange300,i.orange500],red:[i.red300,i.red500],grey:[i.grey400,i.grey500]}),[i]),l=(0,react_1.useMemo)(()=>({default:i.grey500,blue:i.blue700,green:i.green800,yellow:i.yellow900,orange:i.orange900,red:i.red700,grey:i.grey700}),[i]),_=[t.type,t.theme,t.count],m=(0,react_1.useMemo)(()=>{const s=a.default;if(t.type==="auto"){const g=[a.blue,a.green,a.yellow,a.orange,a.red,a.grey];return new Array(e.length).fill(s).map((f,h)=>h<t.count?g[h%g.length]:f).reverse()}const c=a[t.theme]??t.theme;return t.type==="single-bar"?[...new Array(e.length-1).fill(s),c]:new Array(e.length).fill(c)},[..._,e.length,a]),D=(0,react_1.useMemo)(()=>{const s=l.default;if(t.type==="auto"){const g=[l.blue,l.green,l.yellow,l.orange,l.red,l.grey];return new Array(e.length).fill(s).map((f,h)=>h<t.count?g[h%g.length]:f).reverse()}const c=l[t.theme]??t.theme;return t.type==="single-bar"?[...new Array(e.length-1).fill(s),c]:new Array(e.length).fill(s)},[..._,e.length,l]);return e.length<=12?(0,jsx_runtime_1.jsxs)(react_native_1.Stack,{ref:p,style:[{paddingHorizontal:24,paddingVertical:12,minHeight:o},y],gutter:0,...x,children:[(0,jsx_runtime_1.jsx)(ChartArea,{children:e.map(({value:s},c)=>(0,jsx_runtime_1.jsxs)(BarContainer,{style:{width:d},children:[(0,jsx_runtime_1.jsx)(BarAnnotation,{color:D[c],children:s}),(0,jsx_runtime_1.jsx)(Bar,{width:u,height:b(s),borderRadius:w,backgroundColor:m[c]})]},c))}),(0,jsx_runtime_1.jsx)(XAxisArea,{children:e.map(({xAxisLabel:s},c)=>(0,jsx_runtime_1.jsx)(XAxisLabel,{style:{width:d},children:s},c))})]}):(0,jsx_runtime_1.jsxs)(react_native_1.Stack,{ref:p,style:[{paddingHorizontal:24,paddingVertical:12,minHeight:o},y],gutter:0,...x,children:[(0,jsx_runtime_1.jsx)(ChartArea,{style:{display:"flex",flexDirection:"row",justifyContent:"center"},children:e.map(({value:s},c)=>(0,jsx_runtime_1.jsx)(BarContainer,{style:{width:d},children:(0,jsx_runtime_1.jsx)(Bar,{width:u,height:b(s),borderRadius:w,backgroundColor:m[c]})},c))}),(0,jsx_runtime_1.jsxs)(XAxisArea,{justify:"space-between",children:[(0,jsx_runtime_1.jsx)(XAxisLabel,{children:e[0]?.xAxisLabel}),(0,jsx_runtime_1.jsx)(XAxisLabel,{children:e[e.length-1]?.xAxisLabel})]})]})});

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

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

package/dist/cjs/components/chart/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("./BarChart"),exports);

package/dist/cjs/components/checkbox/Circle/Graphic/AnimatedCheckboxGraphic.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxBaseProps } from '../../types';
+export declare function AnimatedCheckboxGraphic({ checked, size, children, style, onTouchStart, onTouchEnd, onTouchCancel, onPress, ...pressableProps }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/checkbox/Circle/Graphic/AnimatedCheckboxGraphic.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimatedCheckboxGraphic=AnimatedCheckboxGraphic;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importDefault(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),index_1=require("../../../../core/index"),index_2=require("../../../../interactions/pressable-effect/index"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),const_1=require("../../const"),paths_1=require("./paths"),styles_1=require("./styles");function AnimatedCheckboxGraphic({checked:t,size:o,children:m,style:b,onTouchStart:C,onTouchEnd:x,onTouchCancel:_,onPress:A,...v}){const[s,n]=(0,react_1.useState)(t?"on":"off"),l=(0,react_1.useMemo)(()=>o*20/24,[o]),a=(0,index_1.useAdaptive)(),u=(0,react_1.useMemo)(()=>({background:(0,hex_to_rgba_1.default)(a.background??colors_1.colors.background),grey200:(0,hex_to_rgba_1.default)(a.grey200??colors_1.colors.grey200),blue600:(0,hex_to_rgba_1.default)(colors_1.colors.blue600),blue500:(0,hex_to_rgba_1.default)(colors_1.colors.blue500),white:(0,hex_to_rgba_1.default)(colors_1.colors.white),transparent:(0,hex_to_rgba_1.default)(colors_1.colors.grey200,0)}),[a.background,a.grey200]),{startPressInAnim:d,startPressOutAnim:p,scaleAnim:h}=(0,index_2.usePressAnim)(pressAnimConfig),r=(0,react_1.useMemo)(()=>{const{background:e,grey200:j,blue600:c,blue500:g,white:k,transparent:D}=u;return{check:{off:{stroke:D,strokeDashoffset:24,scale:pressAnimConfig.pressOut.scale},"off-press":{stroke:c,strokeDashoffset:16,scale:pressAnimConfig.pressIn.scale},on:{stroke:k,strokeDashoffset:0,scale:pressAnimConfig.pressOut.scale},"on-press":{stroke:k,strokeDashoffset:13.5,scale:pressAnimConfig.pressIn.scale}},backgroundCheck:{off:{opacity:1},"off-press":{opacity:1},on:{opacity:0},"on-press":{opacity:0}},outerCircle:{off:{fill:j},"off-press":{fill:c},on:{fill:g},"on-press":{fill:c}},innerCircle:{off:{fill:e,scale:1},"off-press":{fill:e,scale:1},on:{fill:g,scale:0},"on-press":{fill:c,scale:0}},innerCircleScaleOrigin\uBCF4\uC815:{off:{x:0,y:0},"off-press":{x:0,y:0},on:{x:12,y:12},"on-press":{x:12,y:12}}}},[u]),w=(0,react_1.useCallback)(()=>{n(e=>e==="on"?"on-press":"off-press"),d()},[d]),y=(0,react_1.useCallback)(()=>{n(t?e=>e==="on-press"?"on":"off":e=>e==="off-press"?"off":"on"),p()},[t,p]);(0,react_1.useEffect)(()=>{n(t?"on":"off")},[t]);const i=(0,react_1.useRef)(new react_native_1.Animated.Value(r.innerCircle[s].scale)).current;(0,react_1.useEffect)(()=>{s==="on"||s==="off"?react_native_1.Animated.spring(i,{toValue:r.innerCircle[s].scale,...const_1.SPRING_CONFIG,useNativeDriver:!0}).start():react_native_1.Animated.timing(i,{toValue:r.innerCircle[s].scale,duration:0,useNativeDriver:!0}).start()},[r.innerCircle,s,i]);const f=(0,react_1.useRef)(new react_native_1.Animated.Value(r.check[s].strokeDashoffset)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(f,{toValue:r.check[s].strokeDashoffset,...const_1.TIMING_CONFIG,useNativeDriver:!0}).start()},[r.check,s,f]),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onTouchStart:e=>{w(),C?.(e)},onTouchEnd:e=>{y(),x?.(e)},onTouchCancel:e=>{y(),_?.(e)},onPress:A,style:[styles_1.styles.container,{width:o,height:o},b],accessibilityRole:"checkbox",accessibilityState:{checked:t,disabled:!1},...v,children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[{transform:[{scale:h}]},{width:o,height:o},styles_1.styles.circleContainer],children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{backgroundColor:r.outerCircle[s].fill,borderRadius:o/2},styles_1.styles.outerCircle]}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{width:l,height:l,backgroundColor:r.innerCircle[s].fill,borderRadius:l/2,transform:[{scale:i}]}]})]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:o,height:o},styles_1.styles.checkContainer],children:(0,jsx_runtime_1.jsxs)(AnimatedSvg,{viewBox:"0 0 24 24",style:{transform:[{scale:h}]},children:[(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:u.grey200,style:{opacity:r.backgroundCheck[s].opacity}}),(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:r.check[s].stroke,strokeDasharray:"24px 24px",strokeDashoffset:f})]})}),m]})})}const AnimatedSvg=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.default),pressAnimConfig={pressIn:{scale:.9,opacity:0},pressOut:{scale:1,opacity:0}};

package/dist/cjs/components/checkbox/Circle/Graphic/AnimatedCheckboxGraphicDisabled.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxBaseProps } from '../../types';
+export declare function AnimatedCheckboxGraphicDisabled({ checked, size, style, children, onPress: _, ...pressableProps }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/checkbox/Circle/Graphic/AnimatedCheckboxGraphicDisabled.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimatedCheckboxGraphicDisabled=AnimatedCheckboxGraphicDisabled;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importDefault(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),index_1=require("../../../../core/index"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),useWiggle_1=__importDefault(require("../../useWiggle")),paths_1=require("./paths"),styles_1=require("./styles");function AnimatedCheckboxGraphicDisabled({checked:e,size:t,style:a,children:l,onPress:d,...n}){const i=(0,react_1.useMemo)(()=>t*20/24,[t]),{colorPreference:o}=(0,index_1.useColorPreference)(),s=(0,index_1.useAdaptive)(),r=(0,react_1.useMemo)(()=>({background:(0,hex_to_rgba_1.default)(s.background??colors_1.colors.background),grey200:(0,hex_to_rgba_1.default)(s.grey200??colors_1.colors.grey200),disabledBlue500:o==="light"?(0,hex_to_rgba_1.default)(colors_1.colors.blue100):(0,hex_to_rgba_1.default)(colors_1.colors.blue500,.2),white:(0,hex_to_rgba_1.default)(colors_1.colors.white),disabledWhite:o==="light"?(0,hex_to_rgba_1.default)(colors_1.colors.white):(0,hex_to_rgba_1.default)(colors_1.colors.white,.2),transparent:(0,hex_to_rgba_1.default)(colors_1.colors.grey200,0)}),[o,s.background,s.grey200]),{startWiggle:c,style:u}=(0,useWiggle_1.default)();return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPressIn:c,accessibilityRole:"checkbox",accessibilityState:{checked:e,disabled:!0},...n,children:(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[[styles_1.styles.container,{width:t,height:t},u,a]],children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{width:t,height:t},styles_1.styles.circleContainer],children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{backgroundColor:e?r.disabledBlue500:r.grey200,borderRadius:t/2},styles_1.styles.outerCircle]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{width:i,height:i,backgroundColor:e?r.transparent:r.background,borderRadius:i/2}})]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:t,height:t},styles_1.styles.checkContainer],children:(0,jsx_runtime_1.jsx)(react_native_svg_1.default,{viewBox:"0 0 24 24",children:(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:e?r.disabledWhite:r.grey200,strokeDasharray:"24px 24px"})})}),l]})})})}

package/dist/cjs/components/checkbox/Circle/Graphic/paths.d.ts

@@ -0,0 +1,14 @@
+import { Path } from '@granite-js/native/react-native-svg';
+import { ComponentProps } from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+declare const AnimatedPath: Animated.AnimatedComponent<typeof Path>;
+export declare function OuterCircle(props: any): import("react/jsx-runtime").JSX.Element;
+export declare function InnerCircle(props: any): import("react/jsx-runtime").JSX.Element;
+/**
+ * 실제론 style을 넘길 수 있는데 타입 정의가 안되어 있어서 임의로 추가
+ */
+type CheckProps = ComponentProps<typeof AnimatedPath> & {
+    style?: StyleProp<ViewStyle>;
+};
+export declare function Check(props: CheckProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/checkbox/Circle/Graphic/paths.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.OuterCircle=OuterCircle,exports.InnerCircle=InnerCircle,exports.Check=Check;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),react_native_1=require("react-native"),AnimatedPath=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Path);function OuterCircle(e){return(0,jsx_runtime_1.jsx)(AnimatedPath,{d:"M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1L12,1z",...e})}function InnerCircle(e){return(0,jsx_runtime_1.jsx)(AnimatedPath,{d:"M12,3c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,3,12,3",...e})}function Check(e){return(0,jsx_runtime_1.jsx)(AnimatedPath,{fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",d:"M7.5,11.7 10.9,15.1 16.5,9.5",...e})}

package/dist/cjs/components/checkbox/Circle/Graphic/styles.d.ts

@@ -0,0 +1,27 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    circleContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    outerCircle: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: "100%";
+        height: "100%";
+    };
+    checkContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};

package/dist/cjs/components/checkbox/Circle/Graphic/styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.styles=void 0;const react_native_1=require("react-native");exports.styles=react_native_1.StyleSheet.create({container:{flexDirection:"row",alignItems:"center"},circleContainer:{position:"absolute",top:0,left:0,alignItems:"center",justifyContent:"center"},outerCircle:{position:"absolute",top:0,left:0,width:"100%",height:"100%"},checkContainer:{position:"absolute",top:0,left:0,alignItems:"center",justifyContent:"center"}});

package/dist/cjs/components/checkbox/Circle/index.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from '../types';
+export declare function CheckboxCircle({ checked: _checked, defaultChecked, disabled, size, style, children, onCheckedChange, onPress, ...pressableProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/checkbox/Circle/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxCircle=CheckboxCircle;const jsx_runtime_1=require("react/jsx-runtime"),index_1=require("../../../utils/index"),react_1=require("react"),AnimatedCheckboxGraphic_1=require("./Graphic/AnimatedCheckboxGraphic"),AnimatedCheckboxGraphicDisabled_1=require("./Graphic/AnimatedCheckboxGraphicDisabled");function CheckboxCircle({checked:o,defaultChecked:d=!1,disabled:h,size:c=24,style:r,children:i,onCheckedChange:t,onPress:s,...l}){const[e,a]=(0,index_1.useControlled)({controlledValue:o,defaultValue:d}),n=(0,react_1.useCallback)(u=>{t?.(!e),a(!e),s?.(u)},[t,a,e,s]);return h?(0,jsx_runtime_1.jsx)(AnimatedCheckboxGraphicDisabled_1.AnimatedCheckboxGraphicDisabled,{checked:e,size:c,style:r,children:i,onPress:n}):(0,jsx_runtime_1.jsx)(AnimatedCheckboxGraphic_1.AnimatedCheckboxGraphic,{checked:e,size:c,style:r,children:i,onPress:n,...l})}

package/dist/cjs/components/checkbox/Line/Graphic/AnimatedCheckboxGraphic.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxBaseProps } from '../../types';
+export declare function AnimatedCheckboxGraphic({ checked, size, children, style, onPress, onTouchStart, onTouchEnd, onTouchCancel, ...pressableProps }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/checkbox/Line/Graphic/AnimatedCheckboxGraphic.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimatedCheckboxGraphic=AnimatedCheckboxGraphic;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importDefault(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),index_1=require("../../../../core/index"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),const_1=require("../../const"),paths_1=require("./paths"),styles_1=require("./styles");function AnimatedCheckboxGraphic({checked:e,size:n,children:f,style:l,onPress:h,onTouchStart:_,onTouchEnd:p,onTouchCancel:d,...x}){const[t,r]=(0,react_1.useState)(e?"on":"off"),c=(0,index_1.useAdaptive)(),i=(0,react_1.useMemo)(()=>({grey200:(0,hex_to_rgba_1.default)(c.grey200??colors_1.colors.grey200),blue500:(0,hex_to_rgba_1.default)(colors_1.colors.blue500)}),[c.grey200]),k=(0,react_1.useCallback)(()=>{r(s=>s==="on"?"on-press":"off-press")},[]),u=(0,react_1.useCallback)(()=>{r(e?s=>s==="on-press"?"on":"off":s=>s==="off-press"?"off":"on")},[e]);(0,react_1.useEffect)(()=>{r(e?"on":"off")},[e]);const o=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.check[t].strokeDashoffset)).current;(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(o,{toValue:animationConfig.check[t].strokeDashoffset,...const_1.TIMING_CONFIG,useNativeDriver:!0}).start()},[t,o]);const a=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.check[t].scale)).current;return(0,react_1.useEffect)(()=>{react_native_1.Animated.spring(a,{toValue:animationConfig.check[t].scale,...const_1.SPRING_CONFIG,useNativeDriver:!0}).start()},[t,a]),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onTouchStart:s=>{k(),_?.(s)},onTouchEnd:s=>{u(),p?.(s)},onTouchCancel:s=>{u(),d?.(s)},onPress:h,style:[styles_1.styles.container,l],accessibilityRole:"checkbox",accessibilityState:{checked:e,disabled:!1},...x,children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:n,height:n},styles_1.styles.checkContainer],children:(0,jsx_runtime_1.jsxs)(AnimatedSvg,{viewBox:"0 0 24 24",style:{transform:[{scale:a}]},children:[(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:i.grey200}),(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:i.blue500,strokeDasharray:"24px 24px",strokeDashoffset:o})]})}),f]})})}const AnimatedSvg=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.default),animationConfig={check:{off:{strokeDashoffset:24,scale:1},"off-press":{strokeDashoffset:24*.6,scale:.9},on:{strokeDashoffset:0,scale:1},"on-press":{strokeDashoffset:10,scale:.9}}};

package/dist/cjs/components/checkbox/Line/Graphic/AnimatedCheckboxGraphicDisabled.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxBaseProps } from '../../types';
+export declare function AnimatedCheckboxGraphicDisabled({ checked, size, style, children, onPress: _, ...pressableProps }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/checkbox/Line/Graphic/AnimatedCheckboxGraphicDisabled.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimatedCheckboxGraphicDisabled=AnimatedCheckboxGraphicDisabled;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importDefault(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),index_1=require("../../../../core/index"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native"),useWiggle_1=__importDefault(require("../../useWiggle")),paths_1=require("./paths"),styles_1=require("./styles");function AnimatedCheckboxGraphicDisabled({checked:e,size:t,style:o,children:a,onPress:u,...c}){const{colorPreference:r}=(0,index_1.useColorPreference)(),s=(0,index_1.useAdaptive)(),i=(0,react_1.useMemo)(()=>({grey200:(0,hex_to_rgba_1.default)(s.grey200??colors_1.colors.grey200),disabledBlue500:r==="light"?(0,hex_to_rgba_1.default)(colors_1.colors.blue100):(0,hex_to_rgba_1.default)(colors_1.colors.blue500,.2)}),[r,s.grey200]),{startWiggle:l,style:n}=(0,useWiggle_1.default)();return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPressIn:l,style:[styles_1.styles.container,o],accessibilityRole:"checkbox",accessibilityState:{checked:e,disabled:!0},...c,children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:n,children:(0,jsx_runtime_1.jsx)(react_native_svg_1.default,{viewBox:"0 0 24 24",width:t,height:t,children:(0,jsx_runtime_1.jsx)(paths_1.Check,{stroke:e?i.disabledBlue500:i.grey200})})}),a]})})}

package/dist/cjs/components/checkbox/Line/Graphic/paths.d.ts

@@ -0,0 +1,6 @@
+import { Path } from '@granite-js/native/react-native-svg';
+import { ComponentProps } from 'react';
+import { Animated } from 'react-native';
+declare const AnimatedPath: Animated.AnimatedComponent<typeof Path>;
+export declare function Check(props: ComponentProps<typeof AnimatedPath>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/checkbox/Line/Graphic/paths.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Check=Check;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),react_native_1=require("react-native"),AnimatedPath=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Path);function Check(e){return(0,jsx_runtime_1.jsx)(AnimatedPath,{fill:"none",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round",d:"M 6,11.5 10.6,16 18,8.6",...e})}