@toss/tds-react-native 1.0.0

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

@@ -0,0 +1,62 @@
+import { DimensionValue, ViewProps } from 'react-native';
+/**
+ * AssetFrame
+ */
+export type FrameOverlapShape = {
+    x?: number;
+    y?: number;
+    blur?: number;
+};
+export type LegacyFrameShape = {
+    width?: number;
+    height?: number;
+    radius?: number;
+    color?: string;
+    overlap?: FrameOverlapShape;
+};
+/**
+ * AssetResource
+ */
+export type AssetResourceScale = number;
+export type AssetResourceScaleType = 'crop' | 'fit';
+/**
+ * AssetUnion
+ */
+interface AssetOverlapUnion {
+    type: 'overlap';
+    color: string;
+}
+export type AssetUnion = AssetOverlapUnion;
+export type ScaleType = 'fit' | 'crop';
+export type FrameAccShapeType = {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    x?: DimensionValue;
+    y?: DimensionValue;
+};
+export type FrameOverlapShapeType = {
+    x?: number;
+    y?: number;
+    blur?: number;
+    spread?: string | number;
+};
+export type FrameShapeType = {
+    width?: number;
+    height?: number;
+    radius?: number;
+    acc?: FrameAccShapeType;
+    overlap?: FrameOverlapShapeType;
+};
+export type FrameShapeKeys = 'SquareLarge' | 'SquareMedium' | 'SquareSmall' | 'RectangleLarge' | 'RectangleMedium' | 'CardLarge' | 'CardMedium' | 'CardSmall' | 'CircleLarge' | 'CircleMedium' | 'CircleSmall' | 'CleanH20' | 'CleanH24' | 'CleanH28' | 'CleanW20' | 'CleanW24' | 'CleanW32' | 'CleanW40' | 'CleanW60' | 'CleanW80' | 'CleanW120' | 'CleanW200';
+export type AssetCommonType = {
+    frameShape?: FrameShapeType;
+    backgroundColor?: string;
+    style?: ViewProps['style'];
+    acc?: React.ReactNode;
+    accPosition?: FrameAccPositionType;
+    overlap?: {
+        color: string;
+    } | null;
+};
+export type FrameAccPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export {};

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

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

package/dist/cjs/components/badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import type { ParagraphBadgeProps } from '../paragraph';
+import { TypographyKeys } from '../txt';
+type Size = 'large' | 'medium' | 'small' | 'tiny';
+export interface BadgeProps extends Omit<ParagraphBadgeProps, 'typography'> {
+    /**
+     * `Badge` 컴포넌트의 크기를 지정해요.
+     * @default 'small'
+     */
+    size?: Size;
+}
+declare function Badge({ size, fontWeight: fontWeightProp, ...restProps }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const sizeVariant: Record<Size, TypographyKeys>;
+export default Badge;

package/dist/cjs/components/badge/Badge.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sizeVariant=void 0;const jsx_runtime_1=require("react/jsx-runtime"),paragraph_1=require("../paragraph");function Badge({size:t="small",fontWeight:e,...r}){const a=e??t==="tiny"?"semibold":"bold";return(0,jsx_runtime_1.jsx)(paragraph_1.Badge,{typography:exports.sizeVariant[t],fontWeight:a,...r})}exports.sizeVariant={tiny:"t5",small:"t3",medium:"t2",large:"t1"},exports.default=Badge;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/cjs/components/badge/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.Badge=void 0;var Badge_1=require("./Badge");Object.defineProperty(exports,"Badge",{enumerable:!0,get:function(){return __importDefault(Badge_1).default}});

package/dist/cjs/components/board-row/BoardRow.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface BoardRowProps {
+    /**
+     * `BoardRow` 컴포넌트의 헤더 영역에 표시될 제목이에요.
+     */
+    title: string;
+    /**
+     * `BoardRow` 컴포넌트 헤더 영역의 `title` 앞에 표시할 아이콘이에요.
+     * 주로 `BoardRow.QIcon` 컴포넌트를 사용해요.
+     */
+    icon?: ReactNode;
+    /**
+     * `BoardRow` 컴포넌트의 콘텐츠 영역에 표시될 내용이에요.
+     * 주로 `Txt` 혹은 `Post` 컴포넌트로 감싼 요소를 사용해요.
+     */
+    contents?: ReactNode;
+}
+declare function BoardRow({ title, icon, contents }: BoardRowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BoardRow {
+    var QuestionIcon: () => import("react/jsx-runtime").JSX.Element;
+    var QIcon: () => import("react/jsx-runtime").JSX.Element;
+}
+export default BoardRow;

package/dist/cjs/components/board-row/BoardRow.js

@@ -0,0 +1 @@
+"use strict";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"),core_1=require("../../core"),border_1=require("../border"),icon_1=require("../icon"),txt_1=require("../txt");function BoardRow({title:r,icon:o,contents:n}){const[e,i]=(0,react_1.useState)(!1),t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{flexDirection:"column"},children:[(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{accessibilityRole:"button",accessibilityState:{expanded:e},onPress:()=>{i(!e)},style:{paddingLeft:24,paddingTop:16,paddingBottom:15,paddingRight:16,flexDirection:"row"},children:[o,(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:"regular",color:e?colors_1.colors.blue500:t.grey700,typography:"t5",children:r}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flex:1}}),(0,jsx_runtime_1.jsx)(icon_1.Icon,{name:"icn-arrow-rightwards",color:t.grey400,size:24,style:{transform:[{rotate:e?"90deg":"0deg"}]}})]}),e?null:(0,jsx_runtime_1.jsx)(border_1.Border,{type:"padding24",style:{backgroundColor:t.grey200}}),e?(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingHorizontal:24,paddingVertical:16,backgroundColor:t.greyBackground},children:n})}):null]})}BoardRow.QuestionIcon=QuestionIcon,BoardRow.QIcon=QIcon;function QuestionIcon(){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingRight:16},children:(0,jsx_runtime_1.jsx)(icon_1.Icon,{name:"icon-question-gray-fill",size:24})})}function QIcon(){return(0,jsx_runtime_1.jsx)(txt_1.Txt,{style:{fontSize:19,color:colors_1.colors.blue500,marginRight:8,lineHeight:23},children:"Q"})}exports.default=BoardRow;

package/dist/cjs/components/board-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BoardRow } from './BoardRow';
+export type { BoardRowProps } from './BoardRow';

package/dist/cjs/components/board-row/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.BoardRow=void 0;var BoardRow_1=require("./BoardRow");Object.defineProperty(exports,"BoardRow",{enumerable:!0,get:function(){return __importDefault(BoardRow_1).default}});

package/dist/cjs/components/border/Border.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { View } from 'react-native';
+export type BorderType = 'full' | 'padding24' | 'height16';
+interface BaseProps {
+    type?: BorderType;
+    height?: number | undefined;
+}
+interface HairlineProps extends BaseProps {
+    type: 'full' | 'padding24';
+    height?: undefined;
+}
+interface SpaceProps extends BaseProps {
+    type: 'height16';
+    height?: number;
+}
+type Props = (HairlineProps | SpaceProps) & ComponentProps<typeof View>;
+declare function Border({ type, style, height, ...restProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default Border;

package/dist/cjs/components/border/Border.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_native_1=require("react-native");function Border({type:e="full",style:t,height:i,...r}){const n=(0,core_1.useAdaptive)();return e==="full"?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:"100%",height:react_native_1.StyleSheet.hairlineWidth,backgroundColor:n.greyOpacity300},t],...r}):e==="padding24"?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{paddingLeft:24},t],...r,children:(0,jsx_runtime_1.jsx)(Hairline,{})}):(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{width:"100%",height:i??16,backgroundColor:n.greyBackground}],...r})}function Hairline({style:e,...t}){const i=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{height:react_native_1.StyleSheet.hairlineWidth,backgroundColor:i.greyOpacity300},e],...t})}exports.default=Border;

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

@@ -0,0 +1,2 @@
+export { default as Border } from './Border';
+export type { BorderType } from './Border';

package/dist/cjs/components/border/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.Border=void 0;var Border_1=require("./Border");Object.defineProperty(exports,"Border",{enumerable:!0,get:function(){return __importDefault(Border_1).default}});

package/dist/cjs/components/bottom-cta/AccessoryText.d.ts

@@ -0,0 +1,2 @@
+import { TxtProps } from '../txt';
+export declare function AccessoryText(props: TxtProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/bottom-cta/AccessoryText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AccessoryText=AccessoryText;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt");function AccessoryText(e){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",color:t.grey600,...e})}

package/dist/cjs/components/bottom-cta/BottomCTA.d.ts

@@ -0,0 +1,7 @@
+import BottomCTADouble from './BottomCTADouble';
+import BottomCTASingle from './BottomCTASingle';
+export declare const BottomCTA: {
+    Single: typeof BottomCTASingle;
+    Double: typeof BottomCTADouble;
+};
+export { BottomCTAGradient as BottomCTAGradient } from './BottomCTAGradient';

package/dist/cjs/components/bottom-cta/BottomCTA.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomCTAGradient=exports.BottomCTA=void 0;const BottomCTADouble_1=__importDefault(require("./BottomCTADouble")),BottomCTASingle_1=__importDefault(require("./BottomCTASingle"));exports.BottomCTA={Single:BottomCTASingle_1.default,Double:BottomCTADouble_1.default};var BottomCTAGradient_1=require("./BottomCTAGradient");Object.defineProperty(exports,"BottomCTAGradient",{enumerable:!0,get:function(){return BottomCTAGradient_1.BottomCTAGradient}});

package/dist/cjs/components/bottom-cta/BottomCTADouble.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { CommonProps } from './types';
+type DoubleProps = {
+    leftButton: ReactElement;
+    rightButton: ReactElement;
+};
+export type BottomCTADoubleProps = CommonProps & DoubleProps;
+/**
+ *
+ * @example
+ * <BottomCTA.Double
+ *   leftButton={<Button>버튼</Button>}
+ *   rightButton={<Button>버튼</Button>}
+ * />
+ */
+declare function BottomCTADouble({ gradient: _gradient, topAccessory, bottomAccessory, containerStyle, keyboardStyleEnabled, ...props }: BottomCTADoubleProps): import("react/jsx-runtime").JSX.Element;
+export default BottomCTADouble;

package/dist/cjs/components/bottom-cta/BottomCTADouble.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),AccessoryText_1=require("./AccessoryText"),BottomCTAGradient_1=require("./BottomCTAGradient"),useBottomCTAContainerStyle_1=require("./useBottomCTAContainerStyle");function BottomCTADouble({gradient:e,topAccessory:t,bottomAccessory:r,containerStyle:i,keyboardStyleEnabled:s=!1,...n}){const o=(0,core_1.useAdaptive)(),l=(0,useBottomCTAContainerStyle_1.useBottomCTAContainerStyle)({type:"double",keyboardStyleEnabled:s}),c=(0,react_1.useMemo)(()=>(0,jsx_runtime_1.jsx)(BottomCTAGradient_1.BottomCTAGradient,{stopColor:o.layeredBackground}),[o.layeredBackground]),a=e!==null,u=e??c;return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[i,styles.containerStyle,l],children:[a?u:null,t&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.topAccessory,children:(0,utils_1.isReactText)(t)?(0,jsx_runtime_1.jsx)(AccessoryText_1.AccessoryText,{children:t}):t}),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.double,children:[(0,jsx_runtime_1.jsx)(DoubleButtonWrapper,{children:n.leftButton}),(0,jsx_runtime_1.jsx)(DoubleButtonWrapper,{children:n.rightButton})]}),r&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.bottomAccessory,children:(0,utils_1.isReactText)(r)?(0,jsx_runtime_1.jsx)(AccessoryText_1.AccessoryText,{children:r}):r})]})}function DoubleButtonWrapper(e){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.doubleButtonWrapper,children:e.children})}const styles=react_native_1.StyleSheet.create({containerStyle:{overflow:"hidden"},topAccessory:{marginBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessory:{marginTop:16,display:"flex",flexDirection:"row",justifyContent:"center"},double:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonWrapper:{minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});exports.default=BottomCTADouble;

package/dist/cjs/components/bottom-cta/BottomCTAGradient.d.ts

@@ -0,0 +1,7 @@
+export declare function BottomCTAGradient({ stopColor }: {
+    stopColor: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomCTAGradient {
+    var TopMargin: () => import("react/jsx-runtime").JSX.Element;
+    var HEIGHT: number;
+}

package/dist/cjs/components/bottom-cta/BottomCTAGradient.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(r,e,i,t){t===void 0&&(t=i);var n=Object.getOwnPropertyDescriptor(e,i);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(r,t,n)}:function(r,e,i,t){t===void 0&&(t=i),r[t]=e[i]},__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(i){var t=[];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[t.length]=n);return t},r(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var t=r(e),n=0;n<t.length;n++)t[n]!=="default"&&__createBinding(i,e,t[n]);return __setModuleDefault(i,e),i}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomCTAGradient=BottomCTAGradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),react_native_1=require("react-native");function BottomCTAGradient({stopColor:r}){return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{height:HEIGHT,pointerEvents:"none",style:{transform:[{scaleX:1.5}]},children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:r,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:.75,stopColor:r})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:HEIGHT,fill:`url(#${GRADIENT_ID})`})]})}function TopMargin(){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{marginTop:-(HEIGHT-1)}})}const GRADIENT_ID="tds-rn-bottom-cta-gradient",HEIGHT=37;BottomCTAGradient.TopMargin=TopMargin,BottomCTAGradient.HEIGHT=HEIGHT;

package/dist/cjs/components/bottom-cta/BottomCTASingle.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { Button } from '../button';
+import { CommonProps } from './types';
+type ButtonProps = ComponentProps<typeof Button>;
+export type BottomCTASingleProps = CommonProps & ButtonProps;
+/**
+ *
+ * @example
+ * <BottomCTA.Single
+ *    type="dark"
+ *    style="weak"
+ *    onPress={() => {
+ *      // ...
+ *    }}
+ *  확인
+ * </BottomCTA.Single>
+ */
+declare function BottomCTASingle({ gradient: _gradient, topAccessory, bottomAccessory, containerStyle, keyboardStyleEnabled, display: displayFromProps, ...props }: BottomCTASingleProps): import("react/jsx-runtime").JSX.Element;
+export default BottomCTASingle;

package/dist/cjs/components/bottom-cta/BottomCTASingle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),utils_1=require("../../utils"),button_1=require("../button"),Button_1=require("../button/Button"),AccessoryText_1=require("./AccessoryText"),BottomCTAGradient_1=require("./BottomCTAGradient"),useBottomCTAContainerStyle_1=require("./useBottomCTAContainerStyle");function BottomCTASingle({gradient:o,topAccessory:e,bottomAccessory:t,containerStyle:c,keyboardStyleEnabled:n=!1,display:l="block",...s}){const r=(0,core_1.useAdaptive)(),a=(0,react_1.useMemo)(()=>(0,jsx_runtime_1.jsx)(BottomCTAGradient_1.BottomCTAGradient,{stopColor:r.layeredBackground}),[r.layeredBackground]),u=o!==null,d=o??a,y=(0,utils_1.useKeyboardStatusLevel)()>=utils_1.KeyboardStatusLevel.WillShow,i=n?y?"full":"block":l,x=(0,useBottomCTAContainerStyle_1.useBottomCTAContainerStyle)({type:"single",keyboardStyleEnabled:n}),b=i==="block"?Button_1.containerStylesBySize.big.borderRadius:0;return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.containerStyle,x,c],children:[u?d:null,e&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.topAccessory,children:(0,utils_1.isReactText)(e)?(0,jsx_runtime_1.jsx)(AccessoryText_1.AccessoryText,{children:e}):e}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:s.disabled&&{backgroundColor:r.background,borderRadius:b},children:(0,jsx_runtime_1.jsx)(button_1.Button,{display:i,size:"big",...s})}),t&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.bottomAccessory,children:(0,utils_1.isReactText)(t)?(0,jsx_runtime_1.jsx)(AccessoryText_1.AccessoryText,{children:t}):t})]})}const styles=react_native_1.StyleSheet.create({containerStyle:{overflow:"hidden"},topAccessory:{marginBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessory:{marginTop:16,display:"flex",flexDirection:"row",justifyContent:"center"}});exports.default=BottomCTASingle;

package/dist/cjs/components/bottom-cta/constants.d.ts

@@ -0,0 +1,2 @@
+/** @description iOS 의 노치디자인 하단 SafeArea 값 */
+export declare const IOS_NOTCH_SAFE_AREA_BOTTOM = 34;

package/dist/cjs/components/bottom-cta/constants.js

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

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

@@ -0,0 +1,5 @@
+export * from './BottomCTA';
+export type { BottomCTADoubleProps } from './BottomCTADouble';
+export { BottomCTAGradient } from './BottomCTAGradient';
+export type { BottomCTASingleProps } from './BottomCTASingle';
+export * from './useBottomCTAContainerStyle';

package/dist/cjs/components/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.BottomCTAGradient=void 0,__exportStar(require("./BottomCTA"),exports);var BottomCTAGradient_1=require("./BottomCTAGradient");Object.defineProperty(exports,"BottomCTAGradient",{enumerable:!0,get:function(){return BottomCTAGradient_1.BottomCTAGradient}}),__exportStar(require("./useBottomCTAContainerStyle"),exports);

package/dist/cjs/components/bottom-cta/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type CommonProps = {
+    topAccessory?: ReactNode;
+    bottomAccessory?: ReactNode;
+    /**
+     * @description BottomCTA 의 gradient 를 지정합니다. null 을 주면 gradient 를 없앱니다.
+     * @default `<BottomCTAGradient stopColor={adaptive.layeredBackground} />`
+     */
+    gradient?: ReactNode;
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * @default false;
+     * @description 키보드가 올라왔을 때 스타일을 변경할 것인지 여부
+     */
+    keyboardStyleEnabled?: boolean;
+};

package/dist/cjs/components/bottom-cta/types.js

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

package/dist/cjs/components/bottom-cta/useBottomCTAContainerStyle.d.ts

@@ -0,0 +1,11 @@
+import { ViewStyle } from 'react-native';
+interface Props {
+    type: 'single' | 'double';
+    keyboardStyleEnabled: boolean;
+}
+/**
+ * @name useBottomCTAContainerStyle
+ * @description BottomCTA 의 하단 스타일
+ */
+export declare function useBottomCTAContainerStyle({ type, keyboardStyleEnabled }: Props): ViewStyle;
+export {};

package/dist/cjs/components/bottom-cta/useBottomCTAContainerStyle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBottomCTAContainerStyle=useBottomCTAContainerStyle;const utils_1=require("../../utils");function useBottomCTAContainerStyle({type:t="single",keyboardStyleEnabled:o=!1}){const e=(0,utils_1.useSafeAreaBottom)()??0,n=(0,utils_1.useKeyboardStatusLevel)()>=utils_1.KeyboardStatusLevel.WillShow;return o&&n?t==="single"?{paddingHorizontal:0,paddingBottom:0}:{paddingHorizontal:20,paddingBottom:18}:{paddingHorizontal:20,paddingBottom:Math.max(e,18)}}

package/dist/cjs/components/bottom-info/BottomInfo.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface BottomInfoProps {
+    children?: ReactNode | ReactNode[];
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ *
+ * @example
+ *
+ * // with Post
+ * <BottomInfo>
+ *   <PostUl horizontalPadding={0}>
+ *     <PostUl.Li size="small" indent={0} marginBottom={8}>
+ *       리스트
+ *     </PostUl.Li>
+ *     <PostUl.Li size="small" indent={0} marginBottom={0}>
+ *       리스트
+ *     </PostUl.Li>
+ *   </PostUl>
+ * </BottomInfo>
+ */
+declare function BottomInfo({ children, style }: BottomInfoProps): import("react/jsx-runtime").JSX.Element;
+export default BottomInfo;

package/dist/cjs/components/bottom-info/BottomInfo.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),utils_1=require("../../utils"),txt_1=require("../txt");function BottomInfo({children:t,style:r}){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{backgroundColor:n.greyBackground},styles.container,r],children:react_1.Children.map(t,e=>(0,utils_1.isReactText)(e)?(0,jsx_runtime_1.jsx)(txt_1.Txt,{children:e}):e)})}const styles=react_native_1.StyleSheet.create({container:{padding:24}});exports.default=BottomInfo;

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheet=void 0;const CTA_1=require("./CTA"),Header_1=require("./Header"),HeaderDescription_1=require("./HeaderDescription"),Root_1=require("./Root"),Select_1=require("./Select");exports.BottomSheet={Root:Root_1.BottomSheetRoot,Header:Header_1.BottomSheetHeader,HeaderDescription:HeaderDescription_1.BottomSheetHeaderDescription,CTA:CTA_1.BottomSheetCTA,Select:Select_1.BottomSheetSelect};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetDoubleCTA=void 0;const jsx_runtime_1=require("react/jsx-runtime"),index_1=require("../../../core/index"),index_2=require("../../txt/index"),react_1=require("react"),react_native_1=require("react-native"),CTAAnimation_1=require("../utils/CTAAnimation"),Gradient_1=require("./Gradient");exports.BottomSheetDoubleCTA=(0,react_1.memo)(function({topAccessory:e,bottomAccessory:t,ctaContentGap:n=34,leftButton:i,rightButton:o}){const r=(0,index_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(CTAAnimation_1.BottomSheetCTAAnimation,{style:[styles.container],children:[(0,jsx_runtime_1.jsx)(Gradient_1.Gradient,{height:n,stopColor:r.layeredBackground}),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{backgroundColor:r.layeredBackground},children:[e!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.topAccessoryWrapper,children:typeof e=="string"?(0,jsx_runtime_1.jsx)(index_2.Txt,{typography:"t6",color:r.grey600,children:e}):e}):null,(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:styles.buttonsWrapper,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.buttonWrapper,children:i}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.buttonWrapper,children:o})]}),t!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.bottomAccessoryWrapper,children:typeof t=="string"?(0,jsx_runtime_1.jsx)(index_2.Txt,{typography:"t6",color:r.grey600,children:t}):t}):null]})]})});const styles=react_native_1.StyleSheet.create({container:{paddingTop:0,paddingRight:20,paddingBottom:18,paddingLeft:20,borderBottomLeftRadius:28,borderBottomRightRadius:28},topAccessoryWrapper:{paddingBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessoryWrapper:{paddingTop:16,display:"flex",flexDirection:"row",justifyContent:"center"},buttonsWrapper:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},buttonWrapper:{minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8},buttonSpacing:{flexBasis:8,flexGrow:0,flexShrink:0}});

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

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

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

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,e,t,r){r===void 0&&(r=t);var n=Object.getOwnPropertyDescriptor(e,t);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(i,r,n)}:function(i,e,t,r){r===void 0&&(r=t),i[r]=e[t]},__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(t){var r=[];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(r[r.length]=n);return r},i(e)};return function(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var r=i(e),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(t,e,r[n]);return __setModuleDefault(t,e),t}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.Gradient=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),react_1=require("react");exports.Gradient=(0,react_1.memo)(function({height:e,stopColor:t}){return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{height:e,pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:t,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:t})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:e,fill:`url(#${GRADIENT_ID})`})]})});const GRADIENT_ID="tds-rn-bottom-cta-gradient";

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetSingleCTA=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),index_1=require("../../../core/index"),index_2=require("../../button/index"),index_3=require("../../txt/index"),CTAAnimation_1=require("../utils/CTAAnimation"),Gradient_1=require("./Gradient");exports.BottomSheetSingleCTA=(0,react_1.memo)(function({topAccessory:e,bottomAccessory:t,ctaContentGap:i=34,display:n="block",...o}){const r=(0,index_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(CTAAnimation_1.BottomSheetCTAAnimation,{style:[styles.container],children:[(0,jsx_runtime_1.jsx)(Gradient_1.Gradient,{height:i,stopColor:r.layeredBackground}),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{backgroundColor:r.layeredBackground},children:[e!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.topAccessoryWrapper,children:typeof e=="string"?(0,jsx_runtime_1.jsx)(index_3.Txt,{typography:"t6",color:r.grey600,children:e}):e}):null,(0,jsx_runtime_1.jsx)(index_2.Button,{...o,size:"big",display:n}),t!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.bottomAccessoryWrapper,children:typeof t=="string"?(0,jsx_runtime_1.jsx)(index_3.Txt,{typography:"t6",color:r.grey600,children:t}):t}):null]})]})});const styles=react_native_1.StyleSheet.create({container:{paddingTop:0,paddingRight:20,paddingBottom:18,paddingLeft:20,borderBottomLeftRadius:28,borderBottomRightRadius:28,alignItems:"stretch"},topAccessoryWrapper:{paddingBottom:16,display:"flex",flexDirection:"row",justifyContent:"center"},bottomAccessoryWrapper:{paddingTop:16,display:"flex",flexDirection:"row",justifyContent:"center"}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetCTA=void 0;const jsx_runtime_1=require("react/jsx-runtime"),DoubleCTA_1=require("./DoubleCTA"),SingleCTA_1=require("./SingleCTA");exports.BottomSheetCTA=function(e){return(0,jsx_runtime_1.jsx)(SingleCTA_1.BottomSheetSingleCTA,{...e})},exports.BottomSheetCTA.Double=DoubleCTA_1.BottomSheetDoubleCTA;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetContainer=BottomSheetContainer;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"),utils_1=require("../../utils"),DragAnimation_1=require("./DragAnimation"),usePreservedCallback_1=require("./utils/usePreservedCallback"),defaultSafeAreaBottom=10,noop=()=>{};function BottomSheetContainer({open:t,children:u,onDragFinished:l,onDragToClose:d,onDraggedDown:g,onDraggedMiddle:h,onDraggedUp:m,onExited:f,style:v,unstable_disableDragging:b=!1}){const r=(0,react_native_1.useWindowDimensions)(),y=(0,core_1.useAdaptive)(),a=(0,usePreservedCallback_1.usePreservedCallback)(f??noop),p=(0,react_1.useRef)(0),n=(0,react_1.useRef)(new react_native_1.Animated.Value(r.height)).current,s=(0,utils_1.useSafeAreaBottom)()||defaultSafeAreaBottom,{typographyLevel:c}=(0,core_1.useTypographyTheme)(),S=react_native_1.Platform.OS==="android"?c>150:c?.startsWith("A11y"),w=r.height*(S?.9:.7),e=(0,react_1.useCallback)(({moveTo:o})=>react_native_1.Animated.spring(n,{toValue:o,useNativeDriver:!0,...easings_1.spring.quick}),[n]);return(0,react_1.useEffect)(()=>{if(t)return e({moveTo:-s}).start(),()=>{e({moveTo:r.height}).start(()=>{a?.()})}},[e,r.height,a,t,s]),(0,react_1.useEffect)(()=>{if(!t||react_native_1.Platform.OS!=="ios")return;const o=react_native_1.Keyboard.addListener("keyboardWillShow",_=>{const A=_.endCoordinates.height;e({moveTo:-(defaultSafeAreaBottom+A)}).start()}),i=react_native_1.Keyboard.addListener("keyboardWillHide",()=>{e({moveTo:-s}).start()});return()=>{o.remove(),i.remove()}},[e,s,t]),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.wrapper,{transform:[{translateY:n}]}],children:(0,jsx_runtime_1.jsx)(DragAnimation_1.BottomSheetDragAnimation,{onDraggedUp:m,onDraggedMiddle:h,onDraggedDown:g,onDragToClose:d,onDragFinished:l,unstable_disableDragging:b,style:[styles.container,{backgroundColor:y.layeredBackground,maxHeight:w,width:r.width-20},v],onLayout:o=>{const i=o.nativeEvent.layout.height;p.current=i,t||n.setValue(i)},children:u})})}const styles=react_native_1.StyleSheet.create({wrapper:{position:"absolute",bottom:0},container:{bottom:0,borderRadius:28,left:10}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetDimmer=void 0;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),easings_1=require("@toss-design-system/easings"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native"),dimmerOpacity={light:{normal:.2,darker:.4},dark:{normal:.56,darker:.8}},AnimatedPressable=react_native_1.Animated.createAnimatedComponent(react_native_1.Pressable);exports.BottomSheetDimmer=(0,react_1.forwardRef)(function({open:r,onPress:s},i){const{width:n,height:o}=(0,react_native_1.useWindowDimensions)(),{colorPreference:t}=(0,core_1.useColorPreference)(),e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;return(0,react_1.useEffect)(()=>{if(r)return react_native_1.Animated.spring(e,{toValue:dimmerOpacity[t].normal,useNativeDriver:!0,...easings_1.spring.quick}).start(),()=>{requestAnimationFrame(()=>react_native_1.Animated.spring(e,{toValue:0,useNativeDriver:!0,...easings_1.spring.quick}).start())}},[t,e,r]),(0,react_1.useImperativeHandle)(i,()=>({darken:()=>{react_native_1.Animated.spring(e,{toValue:dimmerOpacity[t].darker,useNativeDriver:!0,...easings_1.spring.quick}).start()},lighten:a=>{react_native_1.Animated.spring(e,{toValue:dimmerOpacity[t].normal*(1-a),useNativeDriver:!0,...easings_1.spring.quick}).start()},reset:()=>{react_native_1.Animated.spring(e,{toValue:dimmerOpacity[t].normal,useNativeDriver:!0,...easings_1.spring.quick}).start()}}),[t,e]),(0,jsx_runtime_1.jsx)(AnimatedPressable,{pointerEvents:r?void 0:"none",onPress:s,style:[styles.container,{opacity:e},{width:n,height:o}]})});const styles=react_native_1.StyleSheet.create({container:{position:"absolute",top:0,left:0,bottom:0,right:0,backgroundColor:colors_1.colors.black,opacity:0}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetDragAnimation=BottomSheetDragAnimation;const jsx_runtime_1=require("react/jsx-runtime"),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 BottomSheetDragAnimation({children:f,onDraggedUp:i,onDraggedDown:u,onDraggedMiddle:o,onDragToClose:l,onDragFinished:c,unstable_disableDragging:p=!1,...m}){const t=(0,react_1.useRef)(new react_native_1.Animated.Value(1)).current,r=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,n=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,a=(0,react_1.useMemo)(()=>react_native_gesture_handler_1.Gesture.Pan().activateAfterLongPress(200).onUpdate(e=>{const h=Math.log(Math.abs(e.translationX)+10)*5,M=Math.log(15)*5,V=Math.sign(e.translationX)*Math.max(h-M,0),_=Math.log(Math.abs(e.translationY)+10)*15,Y=Math.log(15)*15,x=Math.sign(e.translationY)*Math.max(_-Y,0),d=easings_1.bezier.linear,v=e.translationY<0?.1:.01;react_native_1.Animated.parallel([react_native_1.Animated.timing(r,{toValue:V,duration:v,easing:react_native_1.Easing.bezier(...d),useNativeDriver:!0}),react_native_1.Animated.timing(n,{toValue:x,duration:v,easing:react_native_1.Easing.bezier(...d),useNativeDriver:!0})]).start(),e.translationY<=-50?i?.():e.translationY>=10?u?.():o?.()}).onFinalize(e=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(t,{toValue:1,...easings_1.spring.rapid,useNativeDriver:!0}),react_native_1.Animated.spring(r,{toValue:0,...easings_1.spring.quick,useNativeDriver:!0}),react_native_1.Animated.spring(n,{toValue:0,...easings_1.spring.quick,useNativeDriver:!0})]).start(),e.translationY>=50&&l?.(),c?.()}),[c,l,u,o,i,t,r,n]),s=(0,react_1.useMemo)(()=>react_native_gesture_handler_1.Gesture.LongPress().onStart(()=>{react_native_1.Animated.spring(t,{toValue:.98,...easings_1.spring.rapid,useNativeDriver:!0}).start()}).onEnd(()=>{react_native_1.Animated.spring(t,{toValue:1,...easings_1.spring.rapid,useNativeDriver:!0}).start()}),[t]),A=(0,react_1.useMemo)(()=>(a.runOnJS(!0),s.runOnJS(!0),react_native_gesture_handler_1.Gesture.Simultaneous(a,s)),[a,s]),g=(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{...m,style:[{transform:[{translateX:r},{translateY:n},{scale:t}]},m.style],children:f});return p?g:(0,jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector,{gesture:A,children:g})}

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetHandle=void 0;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native");exports.BottomSheetHandle=(0,react_1.memo)(function(){const e=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flexDirection:"row",height:16,justifyContent:"center",alignItems:"flex-end"},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{width:48,height:4,borderRadius:4,backgroundColor:e.grey200}})})});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetHeader=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),txt_1=require("../txt"),react_native_1=require("react-native"),core_1=require("../../core");exports.BottomSheetHeader=(0,react_1.memo)(function({children:e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t4",color:t.grey900,style:styles.container,fontWeight:"bold",children:e})});const styles=react_native_1.StyleSheet.create({container:{paddingLeft:24,paddingRight:16,marginTop:4}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetHeaderContainer=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native");exports.BottomSheetHeaderContainer=(0,react_1.memo)(function({children:e}){return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.container,children:e})});const styles=react_native_1.StyleSheet.create({container:{paddingTop:21,paddingBottom:13}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetHeaderDescription=void 0;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native");exports.BottomSheetHeaderDescription=(0,react_1.memo)(function({children:e}){const t=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",color:t.grey600,style:styles.container,fontWeight:"regular",children:e})});const styles=react_native_1.StyleSheet.create({container:{paddingTop:8,paddingRight:44,paddingBottom:0,paddingLeft:24}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BottomSheetRoot=BottomSheetRoot;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"),react_native_1=require("react-native"),HideAccessibility_1=require("../../core/contexts/HideAccessibility"),index_1=require("../../core/index"),const_1=require("./const"),Container_1=require("./Container"),Dimmer_1=require("./Dimmer"),Handle_1=require("./Handle"),HeaderContainer_1=require("./HeaderContainer"),RenderingAnimation_1=require("./utils/RenderingAnimation");function BottomSheetRoot({open:e,header:t,headerDescription:n,cta:m,disableDimmer:g=!1,children:h,onDimmerClick:_,onClose:c,onExited:x,style:y,wrapper:b=react_native_gesture_handler_1.ScrollView,wrapperProps:C,a11yIncludeHeaderInScroll:j=!0,unstable_disableDragging:S=!1}){const i=(0,HideAccessibility_1.useHideAccessibility)(),r=(0,react_1.useRef)(null),o=(0,react_1.useCallback)(()=>{react_native_1.Keyboard.dismiss(),c?.()},[c]),D=(0,react_1.useCallback)(()=>{r.current?.darken()},[]),f=(0,react_1.useCallback)(()=>{r.current?.lighten(.5)},[]),l=(0,react_1.useCallback)(()=>{r.current?.reset()},[]),q=t!=null?30:0,A=(0,react_1.useMemo)(()=>[t,n].filter(s=>s!=null).length*30,[t,n]),a=(0,index_1.useFontScaleCondition)(const_1.a11yCondition.root)&&j,u=t!=null||n!=null?(0,jsx_runtime_1.jsxs)(HeaderContainer_1.BottomSheetHeaderContainer,{children:[(0,jsx_runtime_1.jsx)(RenderingAnimation_1.BottomSheetRenderingAnimation,{children:t}),(0,jsx_runtime_1.jsx)(RenderingAnimation_1.BottomSheetRenderingAnimation,{delay:q,children:n})]}):null;return(0,react_1.useEffect)(()=>(e?i.activate():i.inactivate(),i.inactivate),[i,e]),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{position:"absolute",top:0,left:0,right:0,bottom:0},pointerEvents:e?"auto":"none",onAccessibilityEscape:()=>{o?.()},children:[g?null:(0,jsx_runtime_1.jsx)(Dimmer_1.BottomSheetDimmer,{ref:r,open:e,onPress:()=>{o?.(),_?.()}}),(0,jsx_runtime_1.jsxs)(Container_1.BottomSheetContainer,{open:e,onExited:x,onDraggedUp:D,onDraggedMiddle:l,onDraggedDown:f,onDragToClose:o,onDragFinished:l,style:y,unstable_disableDragging:S,children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsx)(Handle_1.BottomSheetHandle,{}),!a&&u]}),(0,jsx_runtime_1.jsxs)(b,{...C,children:[a&&u,react_1.Children.map(h,(s,d)=>(0,jsx_runtime_1.jsx)(RenderingAnimation_1.BottomSheetRenderingAnimation,{delay:A+d*30,children:s},d))]}),m]})]})}

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

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

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

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