@toss/tds-react-native 1.0.0

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

@@ -0,0 +1,10 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    checkContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};

package/dist/cjs/components/checkbox/Line/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"},checkContainer:{alignItems:"center",justifyContent:"center"}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxLine=CheckboxLine;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 CheckboxLine({checked:o,defaultChecked:d=!1,disabled:h,size:c=24,style:r,children:i,onCheckedChange:t,onPress:s,...u}){const[e,a]=(0,index_1.useControlled)({controlledValue:o,defaultValue:d}),n=(0,react_1.useCallback)(l=>{t?.(!e),a(!e),s?.(l)},[t,e,a,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,...u})}

package/dist/cjs/components/checkbox/const.d.ts

@@ -0,0 +1,8 @@
+export declare const TIMING_CONFIG: {
+    easeing: import("@toss-design-system/easings").CubicBezier;
+    duration: number;
+};
+export declare const SPRING_CONFIG: {
+    stiffness: number;
+    damping: number;
+};

package/dist/cjs/components/checkbox/const.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPRING_CONFIG=exports.TIMING_CONFIG=void 0;const easings_1=require("@toss-design-system/easings");exports.TIMING_CONFIG={easeing:easings_1.bezier.back,duration:150},exports.SPRING_CONFIG={stiffness:650,damping:35};

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

@@ -0,0 +1,7 @@
+import { CheckboxCircle } from './Circle/index';
+import { CheckboxLine } from './Line/index';
+export declare const Checkbox: {
+    Circle: typeof CheckboxCircle;
+    Line: typeof CheckboxLine;
+};
+export type { CheckboxProps } from './types';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Checkbox=void 0;const index_1=require("./Circle/index"),index_2=require("./Line/index");exports.Checkbox={Circle:index_1.CheckboxCircle,Line:index_2.CheckboxLine};

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

@@ -0,0 +1,39 @@
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+export interface CheckboxBaseProps extends PressableProps {
+    /**
+     * `Checkbox` 컴포넌트의 선택 상태를 설정해요.
+     */
+    checked: boolean;
+    /**
+     * `Checkbox` 컴포넌트의 크기를 설정해요.
+     */
+    size: number;
+    /**
+     * `Checkbox` 컴포넌트의 스타일을 설정해요.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+export interface CheckboxProps extends Pick<CheckboxBaseProps, 'style' | 'children' | keyof PressableProps> {
+    /**
+     * 이 값이 `true`일 때 해당 `Checkbox`가 선택된 상태로 표현돼요. 주로 `Checkbox` 컴포넌트의 상태를 컴포넌트 외부에서 관리할 때, `onCheckedChange` 속성과 함께 사용해요.
+     */
+    checked?: boolean;
+    /**
+     * `Checkbox` 컴포넌트의 크기를 설정해요.
+     *
+     * @default 24
+     */
+    size?: number;
+    /**
+     * 이 값이 `true`일 때 `Checkbox` 컴포넌트가 비활성화돼요.
+     */
+    disabled?: boolean;
+    /**
+     * `Checkbox` 컴포넌트의 상태를 컴포넌트 내부에서 관리할 때, 초기 선택 상태를 지정해요.
+     */
+    defaultChecked?: boolean;
+    /**
+     * `Checkbox` 컴포넌트의 선택 상태가 변경될 때 실행되는 함수예요.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}

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

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

package/dist/cjs/components/checkbox/useWiggle.d.ts

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+export default function useWiggle(): {
+    startWiggle: () => void;
+    style: {
+        transform: {
+            translateX: Animated.Value;
+        }[];
+    };
+};

package/dist/cjs/components/checkbox/useWiggle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=useWiggle;const react_1=require("react"),react_native_1=require("react-native"),WIGGLE_TRANSLATE_X_ARRAY=[0,.2,-.2,.1,-.1,0];function useWiggle(){const e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;return{startWiggle:(0,react_1.useCallback)(()=>{react_native_1.Animated.sequence(WIGGLE_TRANSLATE_X_ARRAY.map(t=>react_native_1.Animated.timing(e,{toValue:t,duration:60,useNativeDriver:!0}))).start()},[]),style:{transform:[{translateX:e}]}}}

package/dist/cjs/components/checkbox/utils/useId.d.ts

@@ -0,0 +1 @@
+export default function useId(prefix?: string): string;

package/dist/cjs/components/checkbox/utils/useId.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=useId;const react_uid_1=require("react-uid");function useId(e){const t=(0,react_uid_1.useUID)();return e!==void 0?`${e}-${t}`:t}

package/dist/cjs/components/dialog/AlertDialog.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { AccessibilityProps } from 'react-native';
+import { BaseDialogProps } from './BaseDialog';
+export interface AlertDialogProps extends Pick<BaseDialogProps, 'open' | 'closeOnDimmerClick' | 'onClose' | 'onExited' | 'onEntered'>, AccessibilityProps {
+    title: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    /**
+     * @default '확인'
+     */
+    buttonText?: string;
+    onButtonPress?: () => void;
+}
+/**
+ *
+ * @example
+ * import { useOverlay } from '../../../core';
+ *
+ * const overlay = useOverlay();
+ * const openAlertDialog = () => {
+ *   return new Promise<void>(resolve => {
+ *     overlay.open(({ isOpen, close, exit }) => (
+ *       <AlertDialog
+ *         open={isOpen}
+ *         closeOnDimmerClick={false}
+ *         title="제목"
+ *         description="설명"
+ *         onClose={() => {
+ *           resolve();
+ *           close();
+ *         }}
+ *         onExited={exit}
+ *       />
+ *     ));
+ *   });
+ * };
+ */
+declare function AlertDialog({ open: isOpen, title, description, content, buttonText, closeOnDimmerClick, onClose, onExited, onButtonPress, onEntered, ...restProps }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export default AlertDialog;

package/dist/cjs/components/dialog/AlertDialog.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),react_1=require("react"),react_native_1=require("react-native"),HideAccessibility_1=require("../../core/contexts/HideAccessibility"),text_button_1=require("../text-button"),BaseDialog_1=__importDefault(require("./BaseDialog")),BaseDialogContents_1=require("./BaseDialogContents");function AlertDialog({open:e,title:s,description:i,content:n,buttonText:o="\uD655\uC778",closeOnDimmerClick:c,onClose:r,onExited:a,onButtonPress:l,onEntered:u,...d}){const t=(0,HideAccessibility_1.useHideAccessibility)(),_=(0,react_1.useCallback)(async()=>{l?.(),r()},[l,r]);return(0,react_1.useEffect)(()=>(e?t.activate():t.inactivate(),t.inactivate),[t,e]),(0,jsx_runtime_1.jsx)(BaseDialog_1.default,{open:e,header:s!=null?(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogHeaderTxt,{children:s}):void 0,body:i!=null||n!=null?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[i!=null?(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogBodyTxt,{children:i}):null,n]}):void 0,footer:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{alignSelf:"flex-end"},children:(0,jsx_runtime_1.jsx)(text_button_1.TextButton,{color:colors_1.colors.blue500,onPress:_,typography:"t5",fontWeight:"medium",children:o})}),closeOnDimmerClick:c,onClose:r,onExited:a,onEntered:u,...d})}exports.default=AlertDialog;

package/dist/cjs/components/dialog/BaseDialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { AccessibilityProps, View } from 'react-native';
+export interface BaseDialogProps extends AccessibilityProps {
+    open: boolean;
+    header?: ReactElement;
+    body?: ReactElement;
+    footer?: ReactElement;
+    closeOnDimmerClick?: boolean;
+    onClose: () => void;
+    /** NOTE: onExited === onCloseAnimationEnd */
+    onExited: () => void;
+    onEntered?: () => void;
+}
+declare const BaseDialog: import("react").ForwardRefExoticComponent<BaseDialogProps & import("react").RefAttributes<View>>;
+export default BaseDialog;

package/dist/cjs/components/dialog/BaseDialog.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});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"),utils_1=require("../../utils"),BaseDialogContents_1=require("./BaseDialogContents"),noop=()=>{},BaseDialog=(0,react_1.forwardRef)(({open:s,header:r,body:a,footer:o,closeOnDimmerClick:c,onClose:l,onExited:u,onEntered:p=noop,...m},d)=>{const e=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.content.close.opacity)).current,n=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.content.close.scale)).current,t=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.dimmer.close.opacity)).current,g=(0,react_1.useCallback)(()=>new Promise(i=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(e,{toValue:animationConfig.content.open.opacity,useNativeDriver:!0,...easings_1.spring.quick}),react_native_1.Animated.spring(n,{toValue:animationConfig.content.open.scale,useNativeDriver:!0,...easings_1.spring.quick}),react_native_1.Animated.spring(t,{toValue:animationConfig.dimmer.open.opacity,useNativeDriver:!0,...easings_1.spring.quick})]).start(()=>{i()})}),[e,n,t]),y=(0,react_1.useCallback)(()=>new Promise(i=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(e,{toValue:animationConfig.content.close.opacity,useNativeDriver:!0,...easings_1.spring.rapid}),react_native_1.Animated.spring(t,{toValue:animationConfig.dimmer.close.opacity,useNativeDriver:!0,...easings_1.spring.rapid})]).start(()=>{i()})}),[e,t]),{presenceState:A}=(0,utils_1.useAnimatePresence)(s,{enter:g,exit:y,onExited:u,onEntered:p}),{startWiggle:f,style:v}=(0,utils_1.useWiggleAnim)({direction:"x",type:"small"});return A==="invisible"?(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{}):(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:d,style:styles.container,...m,children:[(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogOverlay,{style:{opacity:t},onPress:c?l:f}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{opacity:e,transform:[{scale:n},...v.transform]}],children:(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogContent,{header:r,body:a,footer:o})})]})});exports.default=BaseDialog;const animationConfig={dimmer:{open:{opacity:.2},close:{opacity:0}},content:{open:{opacity:1,scale:1},close:{opacity:0,scale:.8}}},styles=react_native_1.StyleSheet.create({container:{flex:1,justifyContent:"center",alignItems:"center",position:"absolute",width:"100%",height:"100%"}});

package/dist/cjs/components/dialog/BaseDialogContents.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactElement } from 'react';
+import { Animated, PressableProps } from 'react-native';
+import { TxtProps } from '../txt';
+declare function DialogOverlay({ color, style, onPress, }: {
+    color?: string;
+    style?: ComponentProps<typeof Animated.View>['style'];
+    onPress?: PressableProps['onPress'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ header, body, footer, }: {
+    header?: ReactElement;
+    body?: ReactElement;
+    footer?: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeaderTxt({ ...props }: TxtProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogBodyTxt({ ...props }: TxtProps): import("react/jsx-runtime").JSX.Element;
+export { DialogOverlay, DialogContent, DialogHeaderTxt, DialogBodyTxt };

package/dist/cjs/components/dialog/BaseDialogContents.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DialogOverlay=DialogOverlay,exports.DialogContent=DialogContent,exports.DialogHeaderTxt=DialogHeaderTxt,exports.DialogBodyTxt=DialogBodyTxt;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),react_native_1=require("react-native"),core_1=require("../../core"),txt_1=require("../txt");function DialogOverlay({color:e,style:t,onPress:o}){const{width:n,height:r}=(0,react_native_1.useWindowDimensions)();return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:o,style:[{width:n,height:r},styles.overlayPressable],children:(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{backgroundColor:e??colors_1.colors.black},styles.overlay,t]})})}function DialogContent({header:e,body:t,footer:o}){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{backgroundColor:n.floatBackground},styles.content],children:[(0,jsx_runtime_1.jsxs)(react_native_1.ScrollView,{style:styles.contentScrollView,children:[e!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{children:e}):null,t!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.contentBody,children:t}):null]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.contentFooter,children:o})]})}function DialogHeaderTxt({...e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{color:t.grey800,fontWeight:"bold",typography:"t4",...e})}function DialogBodyTxt({...e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{color:t.grey700,fontWeight:"medium",typography:"t6",...e})}const styles=react_native_1.StyleSheet.create({overlayPressable:{position:"absolute",top:0,left:0},overlay:{width:"100%",height:"100%"},content:{width:312,paddingTop:22,paddingHorizontal:22,paddingBottom:16,borderRadius:24},contentScrollView:{maxHeight:react_native_1.Dimensions.get("window").height*.7},contentBody:{marginTop:8},contentFooter:{marginTop:20}});

package/dist/cjs/components/dialog/ConfirmDialog.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { AccessibilityProps, View } from 'react-native';
+import { Button } from '../button';
+import { BaseDialogProps } from './BaseDialog';
+export interface ConfirmDialogProps extends Pick<BaseDialogProps, 'open' | 'closeOnDimmerClick' | 'onClose' | 'onExited' | 'onEntered'>, AccessibilityProps {
+    title: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    leftButton: ReactElement;
+    rightButton: ReactElement;
+}
+export declare function DoubleButton(props: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DoubleButtonItem(props: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare const ConfirmDialog: import("react").ForwardRefExoticComponent<ConfirmDialogProps & import("react").RefAttributes<View>> & {
+    Button: typeof DoubleButtonItem;
+};
+export default ConfirmDialog;

package/dist/cjs/components/dialog/ConfirmDialog.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DoubleButton=DoubleButton;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),HideAccessibility_1=require("../../core/contexts/HideAccessibility"),button_1=require("../button"),BaseDialog_1=__importDefault(require("./BaseDialog")),BaseDialogContents_1=require("./BaseDialogContents"),ConfirmDialogImpl=(0,react_1.forwardRef)(({open:e,title:t,description:i,content:r,leftButton:o,rightButton:l,closeOnDimmerClick:u,onClose:s,onExited:c,onEntered:a,...d},f)=>{const n=(0,HideAccessibility_1.useHideAccessibility)();return(0,react_1.useEffect)(()=>(e?n.activate():n.inactivate(),n.inactivate),[n,e]),(0,jsx_runtime_1.jsx)(BaseDialog_1.default,{ref:f,open:e,header:t!=null?(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogHeaderTxt,{children:t}):void 0,body:i!=null||r!=null?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[i!=null?(0,jsx_runtime_1.jsx)(BaseDialogContents_1.DialogBodyTxt,{children:i}):null,r]}):void 0,footer:(0,jsx_runtime_1.jsxs)(DoubleButton,{children:[o,l]}),closeOnDimmerClick:u,onClose:s,onExited:c,onEntered:a,...d})});function DoubleButton(e){const t=react_1.Children.count(e.children);if(t!==2)throw new Error(`There should be 2 children in DoubleButton. Given children: ${t}`);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.doubleButton,children:e.children})}function DoubleButtonItem(e){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.doubleButtonItem,children:(0,jsx_runtime_1.jsx)(button_1.Button,{size:"large",viewStyle:[{flexGrow:1}],...e})})}const ConfirmDialog=Object.assign(ConfirmDialogImpl,{Button:DoubleButtonItem}),styles=react_native_1.StyleSheet.create({doubleButton:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonItem:{flexDirection:"row",minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});exports.default=ConfirmDialog;

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

@@ -0,0 +1,5 @@
+export { default as AlertDialog } from './AlertDialog';
+export { default as BaseDialog } from './BaseDialog';
+export { default as ConfirmDialog } from './ConfirmDialog';
+export type { AlertDialogProps } from './AlertDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ConfirmDialog=exports.BaseDialog=exports.AlertDialog=void 0;var AlertDialog_1=require("./AlertDialog");Object.defineProperty(exports,"AlertDialog",{enumerable:!0,get:function(){return __importDefault(AlertDialog_1).default}});var BaseDialog_1=require("./BaseDialog");Object.defineProperty(exports,"BaseDialog",{enumerable:!0,get:function(){return __importDefault(BaseDialog_1).default}});var ConfirmDialog_1=require("./ConfirmDialog");Object.defineProperty(exports,"ConfirmDialog",{enumerable:!0,get:function(){return __importDefault(ConfirmDialog_1).default}});

package/dist/cjs/components/dropdown/components/Dropdown.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { DropdownItem } from './DropdownItem';
+interface Props {
+    title?: string;
+    children?: ReactNode;
+}
+export declare function Dropdown({ title, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dropdown {
+    var Item: typeof DropdownItem;
+}
+export {};

package/dist/cjs/components/dropdown/components/Dropdown.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(t,e,n,r){r===void 0&&(r=n);var o=Object.getOwnPropertyDescriptor(e,n);(!o||("get"in o?!e.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,o)}:function(t,e,n,r){r===void 0&&(r=n),t[r]=e[n]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(r[r.length]=o);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r=t(e),o=0;o<r.length;o++)r[o]!=="default"&&__createBinding(n,e,r[o]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=Dropdown;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../../core"),Paragraph=__importStar(require("../../paragraph")),react_native_1=require("react-native"),DropdownContext_1=require("../contexts/DropdownContext"),DropdownItem_1=require("./DropdownItem");function Dropdown({title:t,children:e}){const n=(0,core_1.useAdaptive)(),{colorPreference:r}=(0,core_1.useColorPreference)(),{dropdownBaseRef:o}=(0,DropdownContext_1.useDropdown)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:o,style:{width:240,backgroundColor:n.floatBackground,paddingVertical:12,borderRadius:16,shadowColor:r==="light"?react_native_1.Platform.OS==="ios"?colors_1.colors.greyOpacity300:void 0:colors_1.colors.greyOpacity900,shadowOffset:{width:0,height:16},shadowOpacity:1,shadowRadius:60,elevation:40},children:[t!=null?(0,jsx_runtime_1.jsx)(TitleWrapper,{children:(0,jsx_runtime_1.jsx)(Paragraph.Text,{fontWeight:"bold",typography:"st8",color:n.grey800,children:t})}):void 0,e]})}function TitleWrapper({style:t,...e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{paddingVertical:12,paddingHorizontal:24,flexDirection:"row",alignItems:"center"},t],...e})}Dropdown.Item=DropdownItem_1.DropdownItem;

package/dist/cjs/components/dropdown/components/DropdownItem.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+interface Props {
+    icon?: ReactNode;
+    children: string;
+    style?: ViewProps['style'];
+    iconViewStyle?: ViewProps['style'];
+}
+export declare function DropdownItem({ icon, children, style, iconViewStyle }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/dropdown/components/DropdownItem.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.DropdownItem=DropdownItem;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),Paragraph=__importStar(require("../../paragraph")),core_1=require("../../../core");function DropdownItem({icon:i,children:e,style:n,iconViewStyle:t}){const r=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{flexDirection:"row",paddingVertical:12,paddingHorizontal:24,alignItems:"center"},n],children:[(0,jsx_runtime_1.jsx)(Paragraph.Text,{typography:"st8",fontWeight:"semiBold",color:r.grey600,children:e}),i!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{flexDirection:"row",alignItems:"center"},t],children:i}):void 0]})}

package/dist/cjs/components/dropdown/components/FixedFloatingDropdown.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { Placement, ReactElementWithRef } from '../types';
+export interface FixedFloatingDropdownProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    children: ReactElementWithRef;
+    dropdown?: ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+    /**
+     * @description Trigger를 기준으로 메뉴가 열리는 위치를 정해주세요.
+     * @default 'bottom-end'
+     * 'bottom-start' | 'bottom-end';
+     */
+    placement?: Placement;
+    containerStyle?: ViewProps['style'];
+}
+export declare function FixedFloatingDropdown({ children, onOpen, onClose, open, dropdown, containerStyle, }: FixedFloatingDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/dropdown/components/FixedFloatingDropdown.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FixedFloatingDropdown=FixedFloatingDropdown;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"),core_1=require("../../../core"),rally_1=require("../../../interactions/rally"),z_index_1=require("../constants/z-index"),DropdownContext_1=require("../contexts/DropdownContext"),mergeRefs_1=require("../utils/mergeRefs");function FixedFloatingDropdown({children:s,onOpen:f,onClose:n,open:o,dropdown:c,containerStyle:r}){const{placement:g}=(0,DropdownContext_1.useDropdown)(),i=(0,react_1.useRef)(null),d=(0,react_1.useRef)(null),l=(0,react_1.useRef)(null),x=s.ref,R=(0,react_1.cloneElement)(s,{...s.props,ref:x!=null?(0,mergeRefs_1.mergeRefs)(x,i):i,onPress:()=>{o?n?.():f?.(),s.props?.onPress?.()}}),m=(0,core_1.useGlobalEvent)();(0,react_1.useEffect)(()=>{const t=a=>{const e=a.nativeEvent.pageX,u=a.nativeEvent.pageY;l?.current&&l.current.measure((y,v,p,w,E,_)=>{e>=E&&e<=E+p&&u>=_&&u<=_+w||n?.()})};return m.addEventListener("touchEnd",t),()=>{m.removeEventListener("touchEnd",t)}},[l,m,n,i]);const h=(0,core_1.useOverlay)();return(0,react_1.useEffect)(()=>{if(!o){h.close();return}i.current==null||d.current==null||i.current.measure((...t)=>{d.current?.measure((...a)=>{const e={x:0,y:1,width:2,height:3,pageX:4,pageY:5};h.open(({isOpen:u,exit:y,close:v})=>{const p=g==="bottom-start"?{top:(t[e.pageY]??0)+(t[e.height]??0),left:t[e.pageX]}:{top:(t[e.pageY]??0)+(t[e.height]??0),left:(t[e.pageX]??0)+(t[e.width]??0)-(a[e.width]??0)};return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:()=>{v(),n?.()},style:[{flex:1,position:"absolute",width:"100%",height:"100%",zIndex:z_index_1.MENU_Z_INDEX},r],children:(0,jsx_runtime_1.jsx)(rally_1.AnimateRallyPresence,{onExitEnd:y,children:u?(0,jsx_runtime_1.jsx)(FloatingOverlay,{ref:l,style:[p],placement:g,children:c}):void 0})})})})})},[o]),(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[R,(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:d,style:{opacity:0,position:"absolute",zIndex:-1},pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:c})]})}const FloatingOverlay=(0,react_1.forwardRef)(function({style:f,children:n,placement:o},c){const r=o==="bottom-start"?"left":"right";return(0,jsx_runtime_1.jsx)(rally_1.Rally,{ref:c,style:[{zIndex:9e3,position:"absolute"},f],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:r,to:r},transformOriginY:{from:"top",to:"top"},easing:easings_1.spring.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:r,to:r},transformOriginY:{from:"top",to:"top"},easing:easings_1.spring.medium},children:n})});

package/dist/cjs/components/dropdown/components/Trigger.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { Placement, ReactElementWithRef } from '../types';
+interface Props {
+    open?: boolean;
+    defaultOpen?: boolean;
+    children: ReactElementWithRef;
+    dropdown?: ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+    /**
+     * @description Trigger를 기준으로 메뉴가 열리는 위치를 정해주세요.
+     * @default 'bottom-end'
+     * 'bottom-start' | 'bottom-end';
+     */
+    placement?: Placement;
+    containerStyle?: ViewProps['style'];
+    /**
+     * @default 'absolute'
+     */
+    strategy?: 'fixed' | 'absolute';
+}
+export declare function Trigger(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var zIndex: number;
+}
+export {};

package/dist/cjs/components/dropdown/components/Trigger.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Trigger=Trigger;const jsx_runtime_1=require("react/jsx-runtime"),rally_1=require("../../../interactions/rally"),core_1=require("../../../core"),react_1=require("react"),react_native_1=require("react-native"),z_index_1=require("../constants/z-index"),DropdownContext_1=require("../contexts/DropdownContext"),mergeRefs_1=require("../utils/mergeRefs"),easings_1=require("@toss-design-system/easings"),FixedFloatingDropdown_1=require("./FixedFloatingDropdown");function ControlledTrigger({children:e,placement:t="bottom-start",strategy:r="absolute",...n}){const o=r==="fixed"?FixedFloatingDropdown_1.FixedFloatingDropdown:AbsoluteFloatingDropdown;return(0,jsx_runtime_1.jsx)(DropdownContext_1.DropdownProvider,{placement:t,children:(0,jsx_runtime_1.jsx)(o,{...n,children:e})})}function AbsoluteFloatingDropdown({children:e,onOpen:t,onClose:r,open:n,dropdown:o,containerStyle:l}){const{targetRef:i,dropdownBaseRef:a}=(0,DropdownContext_1.useDropdown)(),u=e.ref,d=(0,react_1.cloneElement)(e,{...e.props,ref:u!=null?(0,mergeRefs_1.mergeRefs)(u,i):i,onPress:()=>{n?r?.():t?.(),e.props?.onPress?.()}}),s=(0,core_1.useGlobalEvent)();return(0,react_1.useEffect)(()=>{const f=(c,g)=>{a?.current==null||c.target==null||!g&&!isInsideComponent(c.target,a.current)&&!isInsideComponent(c.target,i?.current)&&r?.()};return s.addEventListener("touchEnd",f),()=>{s.removeEventListener("touchEnd",f)}},[a,s,r,i]),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{position:"relative",zIndex:z_index_1.MENU_Z_INDEX},l],children:[d,(0,jsx_runtime_1.jsx)(rally_1.AnimateRallyPresence,{children:n?(0,jsx_runtime_1.jsx)(FloatingOverlay,{children:o}):void 0})]})}function FloatingOverlay({style:e,children:t,...r}){const{targetRef:n,dropdownBaseRef:o,placement:l}=(0,DropdownContext_1.useDropdown)(),[i,a]=(0,react_1.useState)(null),[u,d]=(0,react_1.useState)(null);if((0,react_1.useEffect)(()=>{n?.current!=null&&o?.current!=null&&n.current.measureInWindow((f,c,g,p)=>{o?.current?.measureInWindow((x,h,m,_)=>{a({width:g,height:p}),d({width:m,height:_})})})},[o,n]),u==null||i==null)return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{opacity:0,position:"absolute",alignSelf:"flex-start"},children:t});const s=l==="bottom-start"?"left":"right";return(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:(0,jsx_runtime_1.jsx)(rally_1.Rally,{style:[{zIndex:9e3,position:"absolute",top:i.height},l==="bottom-start"?{left:0}:{right:0},e],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:easings_1.spring.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:easings_1.spring.medium},...r,children:t})})}function UnControlledTrigger({defaultOpen:e=!1,onOpen:t,onClose:r,...n}){const[o,l]=(0,react_1.useState)(e),i=(0,react_1.useCallback)(()=>{t?.(),l(!0)},[t]),a=(0,react_1.useCallback)(()=>{r?.(),l(!1)},[r]);return(0,jsx_runtime_1.jsx)(ControlledTrigger,{open:o,onOpen:i,onClose:a,...n})}function Trigger(e){return e.open!=null?(0,jsx_runtime_1.jsx)(ControlledTrigger,{...e}):(0,jsx_runtime_1.jsx)(UnControlledTrigger,{...e})}Trigger.zIndex=z_index_1.MENU_Z_INDEX;const isInsideComponent=(e,t)=>{if(e&&t&&e._nativeTag===t._nativeTag)return!0;if(t._children&&t._children.length>0){for(let r=0;r<=t._children.length-1;r++)if(isInsideComponent(e,t._children[r]))return!0}return!1};

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

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+export * from './Trigger';

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

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

package/dist/cjs/components/dropdown/constants/z-index.d.ts

@@ -0,0 +1 @@
+export declare const MENU_Z_INDEX = 9000;

package/dist/cjs/components/dropdown/constants/z-index.js

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

package/dist/cjs/components/dropdown/contexts/DropdownContext.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, RefObject } from 'react';
+import { View } from 'react-native';
+import { Placement } from '../types';
+interface DropdownProviderProps {
+    open?: boolean;
+    placement: Placement;
+    children: ReactNode;
+    onPressOutside?: () => void;
+}
+interface State {
+    dropdownBaseRef: RefObject<View> | null;
+    targetRef: RefObject<View> | null;
+    placement: Placement;
+}
+export declare const DropdownContext: import("react").Context<State | null>;
+export declare function DropdownProvider({ placement, children }: DropdownProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useDropdown(): State;
+export {};

package/dist/cjs/components/dropdown/contexts/DropdownContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DropdownContext=void 0,exports.DropdownProvider=DropdownProvider,exports.useDropdown=useDropdown;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react");exports.DropdownContext=(0,react_1.createContext)(null);function DropdownProvider({placement:e,children:o}){const t=(0,react_1.useRef)(null),r=(0,react_1.useRef)(null),n=(0,react_1.useMemo)(()=>({targetRef:r,dropdownBaseRef:t,placement:e}),[e]);return(0,jsx_runtime_1.jsx)(exports.DropdownContext.Provider,{value:n,children:o})}function useDropdown(){return(0,react_1.useContext)(exports.DropdownContext)??DEFAULT_VALUE}const DEFAULT_VALUE={dropdownBaseRef:null,targetRef:null,placement:"bottom-start"};

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

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

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

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

@@ -0,0 +1,5 @@
+import { ReactElement, RefCallback, RefObject } from 'react';
+export type ReactElementWithRef = ReactElement & {
+    ref?: RefObject<any> | RefCallback<any>;
+};
+export type Placement = 'bottom-start' | 'bottom-end';

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

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

package/dist/cjs/components/dropdown/utils/mergeRefs.d.ts

@@ -0,0 +1 @@
+export declare function mergeRefs<T = any>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.Ref<T>;

package/dist/cjs/components/dropdown/utils/mergeRefs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeRefs=mergeRefs;function mergeRefs(...r){return t=>{r.forEach(e=>{typeof e=="function"?e(t):e!=null&&(e.current=t)})}}

package/dist/cjs/components/dropdown/utils/transformOriginXY.d.ts

@@ -0,0 +1,34 @@
+/**
+ * x, y 에 기준점을 주면 그에 맞는 translateX, translateY 가 반환됩니다.
+ * react-native 에는 transformOrigin 이 없어 우회하여 구현합니다.
+ *
+ * 예를들어, x=100, y=100인 요소의 x=0.5, y=1 을 기준점으로 갖게하는 translateX, translateY 반환
+ * transform property 순서는 [Y0, X0, <Transform>, X1, Y1]
+ * @example
+ * ```ts
+ * const {translateX, translateY} = transformOriginXY({ x: 0.5, y: 1, width: 100, height: 100 });
+ *
+ *
+ *  <View
+ *    style={{
+ *        transform: [
+ *          { translateY: translateY[0] },
+ *          { translateX: translateX[0] },
+ *          { scale: 1 },
+ *          { translateX: translateX[1] },
+ *          { translateY: translateY[1] }
+ *        ]
+ *    }}
+ *  />
+ * ```
+ * @returns
+ */
+export declare function transformOriginXY({ x, y, width, height }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    translateX: [number, number];
+    translateY: [number, number];
+};

package/dist/cjs/components/dropdown/utils/transformOriginXY.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.transformOriginXY=transformOriginXY;function transformOriginXY({x:t,y:e,width:n,height:o}){const r={x:.5,y:.5};return{translateX:[n*(t-r.x),n*(r.x-t)],translateY:[o*(e-r.y),o*(r.y-e)]}}

package/dist/cjs/components/error-page/ErrorPage.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type ErrorPageProps = {
+    statusCode?: number;
+    title?: string;
+    subtitle?: string;
+    onPressRightButton?: () => void;
+    onPressLeftButton?: () => void;
+} & PropsWithChildren;
+export declare const ErrorPage: ({ statusCode, title, subtitle, onPressLeftButton, onPressRightButton, children, }: ErrorPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/error-page/ErrorPage.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ErrorPage=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),core_1=require("../../core"),asset_1=require("../asset"),button_1=require("../button"),fixed_bottom_cta_1=require("../fixed-bottom-cta"),top_1=require("../top"),ErrorPage=({statusCode:t=500,title:e,subtitle:r,onPressLeftButton:s,onPressRightButton:i,children:o})=>{const u=(0,core_1.useAdaptive)(),{title:n,subtitle:a,image:c}=mapStatusCodeToText(t),l=e??n,p=r??a;return(0,jsx_runtime_1.jsxs)(fixed_bottom_cta_1.FixedBottomCTAProvider,{children:[(0,jsx_runtime_1.jsx)(top_1.Top,{title:(0,jsx_runtime_1.jsx)(top_1.Top.TitleParagraph,{color:u.grey900,children:l}),subtitle2:(0,jsx_runtime_1.jsx)(top_1.Top.SubtitleParagraph,{children:p}),upper:(0,jsx_runtime_1.jsx)(top_1.Top.UpperAssetContent,{content:(0,jsx_runtime_1.jsx)(react_native_1.Image,{source:{uri:c},"aria-hidden":!0,style:asset_1.Asset.frameShape.CleanW60})})}),o,(0,jsx_runtime_1.jsx)(fixed_bottom_cta_1.FixedBottomCTA.Double,{leftButton:(0,jsx_runtime_1.jsx)(button_1.Button,{type:"dark",style:"weak",onPress:s,children:"\uACE0\uAC1D\uC13C\uD130 \uBB38\uC758"}),rightButton:(0,jsx_runtime_1.jsx)(button_1.Button,{type:"primary",style:"fill",onPress:i,children:t===400?"\uB2E4\uC2DC \uC785\uB825\uD558\uAE30":"\uB2EB\uAE30"})})]})};exports.ErrorPage=ErrorPage;const mapStatusCodeToText=t=>{switch(t){case 404:return{title:"\uC815\uBCF4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694",subtitle:"\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uAC70\uB098, \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F519-return.png"};case 400:return{title:`\uC785\uB825\uD55C \uC815\uBCF4\uB97C 
+\uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694`,subtitle:"\uC815\uD655\uD558\uC9C0 \uC54A\uC740 \uC815\uBCF4\uAC00 \uC788\uC5B4\uC694. \uB9DE\uAC8C \uC785\uB825\uD588\uB294\uB370\uB3C4 \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F519-return.png"};default:return{title:"\uC77C\uC2DC\uC801\uC778 \uC624\uB958\uAC00 \uC0DD\uACBC\uC5B4\uC694",subtitle:"\uBB38\uC81C\uC758 \uC6D0\uC778\uC744 \uCC3E\uC544 \uD574\uACB0\uD558\uACE0 \uC788\uC5B4\uC694. \uBB38\uC81C\uAC00 \uBC18\uBCF5\uB41C\uB2E4\uBA74 \uACE0\uAC1D\uC13C\uD130\uB85C \uBB38\uC758\uD574\uC8FC\uC138\uC694.",image:"https://static.toss.im/3d-emojis/u1F6A7-orange-cone.png"}}};

package/dist/cjs/components/error-page/index.d.ts

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

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

package/dist/cjs/components/fixed-bottom-cta/FixedBottomCTA.d.ts

@@ -0,0 +1,19 @@
+import { BottomCTADoubleProps, BottomCTASingleProps } from '../bottom-cta';
+export type FixedBottomCTASingleProps = Omit<BottomCTASingleProps, 'display' | 'keyboardStyleEnabled'>;
+export type FixedBottomCTADoubleProps = Omit<BottomCTADoubleProps, 'keyboardStyleEnabled'>;
+/**
+ * FixdBottomCTAConsumer 없이 쓰고 싶은 경우 사용합니다.
+ * 예를들어, FixedBottomCTAConsumer 내에 다른 요소를 넣고 싶은 경우입니다.
+ */
+export declare function FixedBottomCTAWithoutConsumer(props: BottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FixdBottomCTAConsumer 없이 쓰고 싶은 경우 사용합니다.
+ * 예를들어, FixedBottomCTAConsumer 내에 다른 요소를 넣고 싶은 경우입니다.
+ */
+export declare function FixedBottomCTADoubleWithoutConsumer(props: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export declare function FixedBottomCTA(props: FixedBottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FixedBottomCTA {
+    var Double: typeof FixedBottomCTADouble;
+}
+declare function FixedBottomCTADouble(props: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/fixed-bottom-cta/FixedBottomCTA.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FixedBottomCTAWithoutConsumer=FixedBottomCTAWithoutConsumer,exports.FixedBottomCTADoubleWithoutConsumer=FixedBottomCTADoubleWithoutConsumer,exports.FixedBottomCTA=FixedBottomCTA;const jsx_runtime_1=require("react/jsx-runtime"),bottom_cta_1=require("../bottom-cta"),core_1=require("../../core"),FixedBottomCTAContext_1=require("./providers/FixedBottomCTAContext");function FixedBottomCTAWithoutConsumer(t){const o=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(bottom_cta_1.BottomCTA.Single,{keyboardStyleEnabled:!0,gradient:(0,jsx_runtime_1.jsx)(bottom_cta_1.BottomCTAGradient,{stopColor:o.background}),...t})}function FixedBottomCTADoubleWithoutConsumer(t){const o=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(bottom_cta_1.BottomCTA.Double,{keyboardStyleEnabled:!0,gradient:(0,jsx_runtime_1.jsx)(bottom_cta_1.BottomCTAGradient,{stopColor:o.background}),...t})}function FixedBottomCTA(t){return(0,jsx_runtime_1.jsx)(FixedBottomCTAContext_1.FixedBottomCTAConsumer,{children:(0,jsx_runtime_1.jsx)(FixedBottomCTAWithoutConsumer,{...t})})}function FixedBottomCTADouble(t){return(0,jsx_runtime_1.jsx)(FixedBottomCTAContext_1.FixedBottomCTAConsumer,{children:(0,jsx_runtime_1.jsx)(FixedBottomCTADoubleWithoutConsumer,{...t})})}FixedBottomCTA.Double=FixedBottomCTADouble;

package/dist/cjs/components/fixed-bottom-cta/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FixedBottomCTA';
+export { FixedBottomCTAProvider, FixedBottomCTAConsumer } from './providers/FixedBottomCTAContext';

package/dist/cjs/components/fixed-bottom-cta/index.js

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

package/dist/cjs/components/fixed-bottom-cta/providers/FixedBottomCTAContext.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ReactElement, ReactNode } from 'react';
+export declare function FixedBottomCTAProvider<WrapperProps = unknown>({ children, wrapper, wrapperProps, }: {
+    children: ReactNode;
+    wrapper?: ComponentType<WrapperProps>;
+    wrapperProps?: WrapperProps;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FixedBottomCTAConsumer({ children }: {
+    children: ReactElement;
+}): null;

package/dist/cjs/components/fixed-bottom-cta/providers/FixedBottomCTAContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FixedBottomCTAProvider=FixedBottomCTAProvider,exports.FixedBottomCTAConsumer=FixedBottomCTAConsumer;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("@granite-js/react-native"),bottom_cta_1=require("../../bottom-cta"),react_1=require("react"),react_native_2=require("react-native"),FixedBottomCTAContext=(0,react_1.createContext)(null);function FixedBottomCTAProvider({children:e,wrapper:t=react_native_2.ScrollView,wrapperProps:o}){const r=t,[c,n]=(0,react_1.useState)(null),s=(0,react_1.useCallback)(l=>{n(l)},[]),i=(0,react_1.useCallback)(()=>{n(null)},[]),u=(0,react_1.useMemo)(()=>({render:s,cleanup:i}),[s,i]);return(0,jsx_runtime_1.jsxs)(FixedBottomCTAContext.Provider,{value:u,children:[(0,jsx_runtime_1.jsx)(r,{style:{flex:1},...o,children:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[e,(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{height:bottom_cta_1.BottomCTAGradient.HEIGHT}})]})}),(0,jsx_runtime_1.jsxs)(react_native_1.KeyboardAboveView,{children:[(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{marginTop:-(bottom_cta_1.BottomCTAGradient.HEIGHT-1)}}),c]})]})}function FixedBottomCTAConsumer({children:e}){const t=(0,react_1.useContext)(FixedBottomCTAContext);if(t==null)throw new Error("FixedBottomCTAContext \uB294 FixedBottomCTAProvider \uC5D0\uC11C \uC2E4\uD589\uD574\uC57C\uD569\uB2C8\uB2E4.");const{render:o,cleanup:r}=t;return(0,react_1.useEffect)(()=>(o(e),()=>{r()}),[e,r,o]),null}

package/dist/cjs/components/gradient/LinearGradient.d.ts

@@ -0,0 +1,4 @@
+import { GetLinearGradientOption } from '@toss-design-system/color-utils';
+import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+export type LinearGradientProps = GetLinearGradientOption & SvgProps;
+export declare const LinearGradient: import("react").ForwardRefExoticComponent<LinearGradientProps & import("react").RefAttributes<Svg>>;

package/dist/cjs/components/gradient/LinearGradient.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LinearGradient=void 0;const jsx_runtime_1=require("react/jsx-runtime"),color_utils_1=require("@toss-design-system/color-utils"),react_1=require("react"),react_native_svg_1=require("@granite-js/native/react-native-svg"),DECIMAL_PRECISION=4;exports.LinearGradient=(0,react_1.forwardRef)(function({children:c,degree:e="180deg",easing:n,colors:r,positions:s,colorStopCount:i,...d},u){const g=(0,react_1.useMemo)(()=>(0,color_utils_1.getLinearGradientRgbaArray)({easing:n,colors:r,positions:s,colorStopCount:i}).map(({rgba:a,position:o})=>{const[f,p,h,x]=a;return{offset:(0,color_utils_1.fixedDecimalRound)(o*100,DECIMAL_PRECISION)+"%",stopColor:`rgb(${f}, ${p}, ${h})`,stopOpacity:x}}),[JSON.stringify(r)]),l=(0,react_1.useMemo)(()=>calculateGradientCoordinates(e),[e]);return(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{ref:u,height:"100%",width:"100%",...d,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsx)(react_native_svg_1.LinearGradient,{id:"grad",...l,children:g.map((a,o)=>(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{...a},o))})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:0,y:0,width:"100%",height:"100%",fill:"url(#grad)"}),c]})});function parseDegree(t){return typeof t=="string"?parseFloat(t.replace("deg","").trim()):t}function calculateGradientCoordinates(t){const e=parseDegree(t)%360*Math.PI/180,n=.5-.5*Math.sin(e),r=.5+.5*Math.cos(e),s=.5+.5*Math.sin(e),i=.5-.5*Math.cos(e);return{x1:n,y1:r,x2:s,y2:i}}

package/dist/cjs/components/gradient/RadialGradient.d.ts

@@ -0,0 +1,16 @@
+import { Svg, SvgProps } from '@granite-js/native/react-native-svg';
+type ColorWithOpacity = {
+    value: string;
+    opacity?: number;
+};
+type Option = {
+    colors: Array<ColorWithOpacity | string>;
+    /**
+     * @description 색깔 분포. 색상 배열과 동일한 길이.
+     * [0, 1]
+     */
+    positions?: number[];
+};
+export type RadialGradientProps = Option & SvgProps;
+export declare const RadialGradient: import("react").ForwardRefExoticComponent<Option & SvgProps & import("react").RefAttributes<Svg>>;
+export {};

package/dist/cjs/components/gradient/RadialGradient.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RadialGradient=void 0;const jsx_runtime_1=require("react/jsx-runtime"),color_utils_1=require("@toss-design-system/color-utils"),react_1=require("react"),react_native_svg_1=require("@granite-js/native/react-native-svg"),DECIMAL_PRECISION=4;exports.RadialGradient=(0,react_1.forwardRef)(function({children:o,colors:s,positions:i,...n},a){const c=(0,react_1.useMemo)(()=>{const t=(0,color_utils_1.ensureColorValue)(s),e=(0,color_utils_1.getRGBAFromColors)(t).map(color_utils_1.extractNumbersFromRGBA),r=i??(0,color_utils_1.getDefaultPosition)(t);return e.map((l,d)=>{const u=r[d]??1,[p,g,x,f]=l;return{offset:(0,color_utils_1.fixedDecimalRound)(u*100,DECIMAL_PRECISION)+"%",stopColor:`rgb(${p}, ${g}, ${x})`,stopOpacity:f}})},[JSON.stringify(s)]);return(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{ref:a,height:"100%",width:"100%",...n,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsx)(react_native_svg_1.RadialGradient,{gradientUnits:"userSpaceOnUse",id:"grad",cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%",children:c.map(({offset:t,stopColor:e,stopOpacity:r})=>(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:t,stopColor:e,stopOpacity:r},t))})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#grad)"}),o]})});

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

@@ -0,0 +1,4 @@
+export { LinearGradient } from './LinearGradient';
+export type { LinearGradientProps } from './LinearGradient';
+export { RadialGradient } from './RadialGradient';
+export type { RadialGradientProps } from './RadialGradient';

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

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