@toss/tds-react-native 1.0.0

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as s}from"react/jsx-runtime";import N,{Defs as U,RadialGradient as k,Rect as q,Stop as D}from"@granite-js/native/react-native-svg";import{Stack as f}from"@granite-js/react-native";import{colors as x}from"@toss-design-system/colors";import{useAdaptive as J}from"../../core";import{Txt as L}from"../txt";import{forwardRef as K,useMemo as p}from"react";import{Dimensions as Q}from"react-native";function M({borderRadius:i,backgroundColor:e=x.grey100,...c}){const h="bar-background-color",o=`0 0 ${c.width} ${c.height}`;return s(N,{viewBox:o,...c,children:[r(U,{children:s(k,{id:h,cx:"0%",cy:"100%",r:"100%",fx:"0%",fy:"100%",gradientUnits:"objectBoundingBox",children:[r(D,{offset:"0%",stopColor:typeof e=="string"?e:e[0]}),r(D,{offset:"100%",stopColor:typeof e=="string"?e:e[1]})]})}),r(q,{width:c.width??"100%",height:c.height??"100%",fill:`url(#${h})`,rx:i,ry:i})]})}function b({style:i,color:e=x.grey600,...c}){return r(L,{style:[{marginTop:6,paddingHorizontal:4},i],typography:"st13",color:e,fontWeight:"medium",textAlign:"center",...c})}function Y({style:i,color:e=x.grey500,...c}){return r(L,{style:[{marginBottom:6,paddingHorizontal:6},i],typography:"st12",color:e,fontWeight:"medium",textAlign:"center",...c})}function R({gutter:i=0,...e}){return r(f,{direction:"vertical",align:"center",justify:"flex-end",gutter:i,...e})}function S({gutter:i=0,...e}){return r(f,{direction:"horizontal",justify:"center",gutter:i,...e})}function _({gutter:i=0,...e}){return r(f,{direction:"horizontal",justify:"center",gutter:i,...e})}const{width:Z}=Q.get("window");export const BarChart=K(function({data:e=[],width:c=Z,height:h=205,fill:o={type:"all-bar",theme:"blue"},style:A,...B},C){const t=J(),I=48,T=24,O=23,H=58,V=38,$=c-I,X=h-T-O,E=Math.max(...e.map(({value:n})=>n)),m=Math.floor(Math.min($/e.length,H)),F=X*.7,j=n=>Math.floor(n/E*F),u=Math.round(V/H*m),v=u>=30?8:u>9?Math.floor(u/5+2):3,a=p(()=>({default:t.grey100,blue:[t.blue300,t.blue500],green:[t.green200,t.green400],yellow:[t.yellow300,t.yellow500],orange:[t.orange300,t.orange500],red:[t.red300,t.red500],grey:[t.grey400,t.grey500]}),[t]),g=p(()=>({default:t.grey500,blue:t.blue700,green:t.green800,yellow:t.yellow900,orange:t.orange900,red:t.red700,grey:t.grey700}),[t]),W=[o.type,o.theme,o.count],z=p(()=>{const n=a.default;if(o.type==="auto"){const d=[a.blue,a.green,a.yellow,a.orange,a.red,a.grey];return new Array(e.length).fill(n).map((w,y)=>y<o.count?d[y%d.length]:w).reverse()}const l=a[o.theme]??o.theme;return o.type==="single-bar"?[...new Array(e.length-1).fill(n),l]:new Array(e.length).fill(l)},[...W,e.length,a]),G=p(()=>{const n=g.default;if(o.type==="auto"){const d=[g.blue,g.green,g.yellow,g.orange,g.red,g.grey];return new Array(e.length).fill(n).map((w,y)=>y<o.count?d[y%d.length]:w).reverse()}const l=g[o.theme]??o.theme;return o.type==="single-bar"?[...new Array(e.length-1).fill(n),l]:new Array(e.length).fill(n)},[...W,e.length,g]);return e.length<=12?s(f,{ref:C,style:[{paddingHorizontal:24,paddingVertical:12,minHeight:h},A],gutter:0,...B,children:[r(S,{children:e.map(({value:n},l)=>s(R,{style:{width:m},children:[r(Y,{color:G[l],children:n}),r(M,{width:u,height:j(n),borderRadius:v,backgroundColor:z[l]})]},l))}),r(_,{children:e.map(({xAxisLabel:n},l)=>r(b,{style:{width:m},children:n},l))})]}):s(f,{ref:C,style:[{paddingHorizontal:24,paddingVertical:12,minHeight:h},A],gutter:0,...B,children:[r(S,{style:{display:"flex",flexDirection:"row",justifyContent:"center"},children:e.map(({value:n},l)=>r(R,{style:{width:m},children:r(M,{width:u,height:j(n),borderRadius:v,backgroundColor:z[l]})},l))}),s(_,{justify:"space-between",children:[r(b,{children:e[0]?.xAxisLabel}),r(b,{children:e[e.length-1]?.xAxisLabel})]})]})});

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as C,Fragment as B}from"react/jsx-runtime";import q from"@granite-js/native/react-native-svg";import{colors as a}from"@toss-design-system/colors";import{useAdaptive as H}from"../../../../core/index";import{usePressAnim as J}from"../../../../interactions/pressable-effect/index";import c from"hex-to-rgba";import{useCallback as I,useEffect as d,useMemo as b,useRef as V,useState as K}from"react";import{Animated as t,Pressable as L,View as Q}from"react-native";import{SPRING_CONFIG as U,TIMING_CONFIG as W}from"../../const";import{Check as O}from"./paths";import{styles as h}from"./styles";export function AnimatedCheckboxGraphic({checked:n,size:o,children:N,style:P,onTouchStart:R,onTouchEnd:T,onTouchCancel:G,onPress:_,...j}){const[r,f]=K(n?"on":"off"),g=b(()=>o*20/24,[o]),u=H(),k=b(()=>({background:c(u.background??a.background),grey200:c(u.grey200??a.grey200),blue600:c(a.blue600),blue500:c(a.blue500),white:c(a.white),transparent:c(a.grey200,0)}),[u.background,u.grey200]),{startPressInAnim:x,startPressOutAnim:w,scaleAnim:A}=J(l),s=b(()=>{const{background:e,grey200:E,blue600:m,blue500:v,white:D,transparent:M}=k;return{check:{off:{stroke:M,strokeDashoffset:24,scale:l.pressOut.scale},"off-press":{stroke:m,strokeDashoffset:16,scale:l.pressIn.scale},on:{stroke:D,strokeDashoffset:0,scale:l.pressOut.scale},"on-press":{stroke:D,strokeDashoffset:13.5,scale:l.pressIn.scale}},backgroundCheck:{off:{opacity:1},"off-press":{opacity:1},on:{opacity:0},"on-press":{opacity:0}},outerCircle:{off:{fill:E},"off-press":{fill:m},on:{fill:v},"on-press":{fill:m}},innerCircle:{off:{fill:e,scale:1},"off-press":{fill:e,scale:1},on:{fill:v,scale:0},"on-press":{fill:m,scale:0}},innerCircleScaleOrigin\uBCF4\uC815:{off:{x:0,y:0},"off-press":{x:0,y:0},on:{x:12,y:12},"on-press":{x:12,y:12}}}},[k]),F=I(()=>{f(e=>e==="on"?"on-press":"off-press"),x()},[x]),S=I(()=>{f(n?e=>e==="on-press"?"on":"off":e=>e==="off-press"?"off":"on"),w()},[n,w]);d(()=>{f(n?"on":"off")},[n]);const p=V(new t.Value(s.innerCircle[r].scale)).current;d(()=>{r==="on"||r==="off"?t.spring(p,{toValue:s.innerCircle[r].scale,...U,useNativeDriver:!0}).start():t.timing(p,{toValue:s.innerCircle[r].scale,duration:0,useNativeDriver:!0}).start()},[s.innerCircle,r,p]);const y=V(new t.Value(s.check[r].strokeDashoffset)).current;return d(()=>{t.timing(y,{toValue:s.check[r].strokeDashoffset,...W,useNativeDriver:!0}).start()},[s.check,r,y]),i(L,{onTouchStart:e=>{F(),R?.(e)},onTouchEnd:e=>{S(),T?.(e)},onTouchCancel:e=>{S(),G?.(e)},onPress:_,style:[h.container,{width:o,height:o},P],accessibilityRole:"checkbox",accessibilityState:{checked:n,disabled:!1},...j,children:C(B,{children:[C(t.View,{style:[{transform:[{scale:A}]},{width:o,height:o},h.circleContainer],children:[i(t.View,{style:[{backgroundColor:s.outerCircle[r].fill,borderRadius:o/2},h.outerCircle]}),i(t.View,{style:[{width:g,height:g,backgroundColor:s.innerCircle[r].fill,borderRadius:g/2,transform:[{scale:p}]}]})]}),i(Q,{style:[{width:o,height:o},h.checkContainer],children:C(X,{viewBox:"0 0 24 24",style:{transform:[{scale:A}]},children:[i(O,{stroke:k.grey200,style:{opacity:s.backgroundCheck[r].opacity}}),i(O,{stroke:s.check[r].stroke,strokeDasharray:"24px 24px",strokeDashoffset:y})]})}),N]})})}const X=t.createAnimatedComponent(q),l={pressIn:{scale:.9,opacity:0},pressOut:{scale:1,opacity:0}};

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as g,Fragment as w}from"react/jsx-runtime";import x from"@granite-js/native/react-native-svg";import{colors as e}from"@toss-design-system/colors";import{useAdaptive as C,useColorPreference as k}from"../../../../core/index";import t from"hex-to-rgba";import{useMemo as h}from"react";import{Animated as m,Pressable as S,View as d}from"react-native";import P from"../../useWiggle";import{Check as j}from"./paths";import{styles as n}from"./styles";export function AnimatedCheckboxGraphicDisabled({checked:s,size:r,style:b,children:u,onPress:v,...p}){const l=h(()=>r*20/24,[r]),{colorPreference:c}=k(),a=C(),i=h(()=>({background:t(a.background??e.background),grey200:t(a.grey200??e.grey200),disabledBlue500:c==="light"?t(e.blue100):t(e.blue500,.2),white:t(e.white),disabledWhite:c==="light"?t(e.white):t(e.white,.2),transparent:t(e.grey200,0)}),[c,a.background,a.grey200]),{startWiggle:y,style:f}=P();return o(S,{onPressIn:y,accessibilityRole:"checkbox",accessibilityState:{checked:s,disabled:!0},...p,children:o(m.View,{style:[[n.container,{width:r,height:r},f,b]],children:g(w,{children:[g(d,{style:[{width:r,height:r},n.circleContainer],children:[o(m.View,{style:[{backgroundColor:s?i.disabledBlue500:i.grey200,borderRadius:r/2},n.outerCircle]}),o(d,{style:{width:l,height:l,backgroundColor:s?i.transparent:i.background,borderRadius:l/2}})]}),o(d,{style:[{width:r,height:r},n.checkContainer],children:o(x,{viewBox:"0 0 24 24",children:o(j,{stroke:s?i.disabledWhite:i.grey200,strokeDasharray:"24px 24px"})})}),u]})})})}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Path as n}from"@granite-js/native/react-native-svg";import{Animated as o}from"react-native";const e=o.createAnimatedComponent(n);export function OuterCircle(t){return r(e,{d:"M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1L12,1z",...t})}export function InnerCircle(t){return r(e,{d:"M12,3c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,3,12,3",...t})}export function Check(t){return r(e,{fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",d:"M7.5,11.7 10.9,15.1 16.5,9.5",...t})}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{StyleSheet as t}from"react-native";export const styles=t.create({container:{flexDirection:"row",alignItems:"center"},circleContainer:{position:"absolute",top:0,left:0,alignItems:"center",justifyContent:"center"},outerCircle:{position:"absolute",top:0,left:0,width:"100%",height:"100%"},checkContainer:{position:"absolute",top:0,left:0,alignItems:"center",justifyContent:"center"}});

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as a}from"react/jsx-runtime";import{useControlled as k}from"../../../utils/index";import{useCallback as p}from"react";import{AnimatedCheckboxGraphic as u}from"./Graphic/AnimatedCheckboxGraphic";import{AnimatedCheckboxGraphicDisabled as x}from"./Graphic/AnimatedCheckboxGraphicDisabled";export function CheckboxCircle({checked:d,defaultChecked:m=!1,disabled:n,size:r=24,style:o,children:c,onCheckedChange:t,onPress:s,...h}){const[e,i]=k({controlledValue:d,defaultValue:m}),l=p(f=>{t?.(!e),i(!e),s?.(f)},[t,i,e,s]);return n?a(x,{checked:e,size:r,style:o,children:c,onPress:l}):a(u,{checked:e,size:r,style:o,children:c,onPress:l,...h})}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as a,jsxs as h,Fragment as G}from"react/jsx-runtime";import I from"@granite-js/native/react-native-svg";import{colors as k}from"@toss-design-system/colors";import{useAdaptive as V}from"../../../../core/index";import g from"hex-to-rgba";import{useCallback as b,useEffect as c,useMemo as _,useRef as y,useState as j}from"react";import{Animated as t,Pressable as F,View as R}from"react-native";import{SPRING_CONFIG as O,TIMING_CONFIG as P}from"../../const";import{Check as x}from"./paths";import{styles as C}from"./styles";export function AnimatedCheckboxGraphic({checked:s,size:l,children:D,style:S,onPress:d,onTouchStart:v,onTouchEnd:A,onTouchCancel:N,...T}){const[o,r]=j(s?"on":"off"),m=V(),p=_(()=>({grey200:g(m.grey200??k.grey200),blue500:g(k.blue500)}),[m.grey200]),w=b(()=>{r(e=>e==="on"?"on-press":"off-press")},[]),u=b(()=>{r(s?e=>e==="on-press"?"on":"off":e=>e==="off-press"?"off":"on")},[s]);c(()=>{r(s?"on":"off")},[s]);const f=y(new t.Value(n.check[o].strokeDashoffset)).current;c(()=>{t.timing(f,{toValue:n.check[o].strokeDashoffset,...P,useNativeDriver:!0}).start()},[o,f]);const i=y(new t.Value(n.check[o].scale)).current;return c(()=>{t.spring(i,{toValue:n.check[o].scale,...O,useNativeDriver:!0}).start()},[o,i]),a(F,{onTouchStart:e=>{w(),v?.(e)},onTouchEnd:e=>{u(),A?.(e)},onTouchCancel:e=>{u(),N?.(e)},onPress:d,style:[C.container,S],accessibilityRole:"checkbox",accessibilityState:{checked:s,disabled:!1},...T,children:h(G,{children:[a(R,{style:[{width:l,height:l},C.checkContainer],children:h(E,{viewBox:"0 0 24 24",style:{transform:[{scale:i}]},children:[a(x,{stroke:p.grey200}),a(x,{stroke:p.blue500,strokeDasharray:"24px 24px",strokeDashoffset:f})]})}),D]})})}const E=t.createAnimatedComponent(I),n={check:{off:{strokeDashoffset:24,scale:1},"off-press":{strokeDashoffset:24*.6,scale:.9},on:{strokeDashoffset:0,scale:1},"on-press":{strokeDashoffset:10,scale:.9}}};

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as e,Fragment as p,jsxs as b}from"react/jsx-runtime";import f from"@granite-js/native/react-native-svg";import{colors as r}from"@toss-design-system/colors";import{useAdaptive as h,useColorPreference as u}from"../../../../core/index";import o from"hex-to-rgba";import{useMemo as y}from"react";import{Animated as x,Pressable as C}from"react-native";import P from"../../useWiggle";import{Check as S}from"./paths";import{styles as j}from"./styles";export function AnimatedCheckboxGraphicDisabled({checked:s,size:t,style:a,children:n,onPress:v,...c}){const{colorPreference:i}=u(),l=h(),m=y(()=>({grey200:o(l.grey200??r.grey200),disabledBlue500:i==="light"?o(r.blue100):o(r.blue500,.2)}),[i,l.grey200]),{startWiggle:g,style:d}=P();return e(C,{onPressIn:g,style:[j.container,a],accessibilityRole:"checkbox",accessibilityState:{checked:s,disabled:!0},...c,children:b(p,{children:[e(x.View,{style:d,children:e(f,{viewBox:"0 0 24 24",width:t,height:t,children:e(S,{stroke:s?m.disabledBlue500:m.grey200})})}),n]})})}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{Path as n}from"@granite-js/native/react-native-svg";import{Animated as e}from"react-native";const r=e.createAnimatedComponent(n);export function Check(o){return t(r,{fill:"none",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round",d:"M 6,11.5 10.6,16 18,8.6",...o})}

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

@@ -0,0 +1 @@
+"use strict";import{StyleSheet as e}from"react-native";export const styles=e.create({container:{flexDirection:"row",alignItems:"center"},checkContainer:{alignItems:"center",justifyContent:"center"}});

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

@@ -0,0 +1 @@
+"use strict";import{jsx as a}from"react/jsx-runtime";import{useControlled as k}from"../../../utils/index";import{useCallback as p}from"react";import{AnimatedCheckboxGraphic as u}from"./Graphic/AnimatedCheckboxGraphic";import{AnimatedCheckboxGraphicDisabled as x}from"./Graphic/AnimatedCheckboxGraphicDisabled";export function CheckboxLine({checked:d,defaultChecked:m=!1,disabled:n,size:r=24,style:o,children:c,onCheckedChange:t,onPress:s,...h}){const[e,i]=k({controlledValue:d,defaultValue:m}),l=p(f=>{t?.(!e),i(!e),s?.(f)},[t,e,i,s]);return n?a(x,{checked:e,size:r,style:o,children:c,onPress:l}):a(u,{checked:e,size:r,style:o,children:c,onPress:l,...h})}

package/dist/esm/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/esm/components/checkbox/const.js

@@ -0,0 +1 @@
+"use strict";import{bezier as e}from"@toss-design-system/easings";export const TIMING_CONFIG={easeing:e.back,duration:150},SPRING_CONFIG={stiffness:650,damping:35};

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

@@ -0,0 +1 @@
+"use strict";import{CheckboxCircle as o}from"./Circle/index";import{CheckboxLine as e}from"./Line/index";export const Checkbox={Circle:o,Line:e};

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

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

package/dist/esm/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/esm/components/checkbox/useWiggle.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as a,useRef as n}from"react";import{Animated as e}from"react-native";const s=[0,.2,-.2,.1,-.1,0];export default function u(){const t=n(new e.Value(0)).current;return{startWiggle:a(()=>{e.sequence(s.map(r=>e.timing(t,{toValue:r,duration:60,useNativeDriver:!0}))).start()},[]),style:{transform:[{translateX:t}]}}}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{useUID as t}from"react-uid";export default function u(e){const n=t();return e!==void 0?`${e}-${n}`:n}

package/dist/esm/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/esm/components/dialog/AlertDialog.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,Fragment as h,jsxs as x}from"react/jsx-runtime";import{colors as g}from"@toss-design-system/colors";import{useCallback as p,useEffect as y}from"react";import{View as b}from"react-native";import{useHideAccessibility as D}from"../../core/contexts/HideAccessibility";import{TextButton as j}from"../text-button";import v from"./BaseDialog";import{DialogBodyTxt as A,DialogHeaderTxt as B}from"./BaseDialogContents";function E({open:o,title:t,description:i,content:n,buttonText:m="\uD655\uC778",closeOnDimmerClick:s,onClose:l,onExited:c,onButtonPress:a,onEntered:d,...f}){const r=D(),u=p(async()=>{a?.(),l()},[a,l]);return y(()=>(o?r.activate():r.inactivate(),r.inactivate),[r,o]),e(v,{open:o,header:t!=null?e(B,{children:t}):void 0,body:i!=null||n!=null?x(h,{children:[i!=null?e(A,{children:i}):null,n]}):void 0,footer:e(b,{style:{alignSelf:"flex-end"},children:e(j,{color:g.blue500,onPress:u,typography:"t5",fontWeight:"medium",children:m})}),closeOnDimmerClick:s,onClose:l,onExited:c,onEntered:d,...f})}export default E;

package/dist/esm/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/esm/components/dialog/BaseDialog.js

@@ -0,0 +1 @@
+"use strict";import{Fragment as C,jsx as n,jsxs as N}from"react/jsx-runtime";import{spring as i}from"@toss-design-system/easings";import{forwardRef as b,useCallback as l,useRef as c}from"react";import{Animated as e,StyleSheet as k,View as P}from"react-native";import{useAnimatePresence as S,useWiggleAnim as q}from"../../utils";import{DialogContent as O,DialogOverlay as _}from"./BaseDialogContents";const F=()=>{},R=b(({open:p,header:m,body:u,footer:y,closeOnDimmerClick:g,onClose:f,onExited:d,onEntered:v=F,...w},V)=>{const o=c(new e.Value(t.content.close.opacity)).current,s=c(new e.Value(t.content.close.scale)).current,r=c(new e.Value(t.dimmer.close.opacity)).current,x=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.open.opacity,useNativeDriver:!0,...i.quick}),e.spring(s,{toValue:t.content.open.scale,useNativeDriver:!0,...i.quick}),e.spring(r,{toValue:t.dimmer.open.opacity,useNativeDriver:!0,...i.quick})]).start(()=>{a()})}),[o,s,r]),A=l(()=>new Promise(a=>{e.parallel([e.spring(o,{toValue:t.content.close.opacity,useNativeDriver:!0,...i.rapid}),e.spring(r,{toValue:t.dimmer.close.opacity,useNativeDriver:!0,...i.rapid})]).start(()=>{a()})}),[o,r]),{presenceState:D}=S(p,{enter:x,exit:A,onExited:d,onEntered:v}),{startWiggle:h,style:j}=q({direction:"x",type:"small"});return D==="invisible"?n(C,{}):N(P,{ref:V,style:W.container,...w,children:[n(_,{style:{opacity:r},onPress:g?f:h}),n(e.View,{style:[{opacity:o,transform:[{scale:s},...j.transform]}],children:n(O,{header:m,body:u,footer:y})})]})});export default R;const t={dimmer:{open:{opacity:.2},close:{opacity:0}},content:{open:{opacity:1,scale:1},close:{opacity:0,scale:.8}}},W=k.create({container:{flex:1,justifyContent:"center",alignItems:"center",position:"absolute",width:"100%",height:"100%"}});

package/dist/esm/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/esm/components/dialog/BaseDialogContents.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as g}from"@toss-design-system/colors";import{Animated as p,Dimensions as y,Pressable as h,ScrollView as u,StyleSheet as m,useWindowDimensions as f,View as r}from"react-native";import{useAdaptive as a}from"../../core";import{Txt as c}from"../txt";function w({color:o,style:t,onPress:i}){const{width:l,height:d}=f();return e(h,{onPress:i,style:[{width:l,height:d},n.overlayPressable],children:e(p.View,{style:[{backgroundColor:o??g.black},n.overlay,t]})})}function v({header:o,body:t,footer:i}){const l=a();return s(r,{style:[{backgroundColor:l.floatBackground},n.content],children:[s(u,{style:n.contentScrollView,children:[o!=null?e(r,{children:o}):null,t!=null?e(r,{style:n.contentBody,children:t}):null]}),e(r,{style:n.contentFooter,children:i})]})}function x({...o}){const t=a();return e(c,{color:t.grey800,fontWeight:"bold",typography:"t4",...o})}function b({...o}){const t=a();return e(c,{color:t.grey700,fontWeight:"medium",typography:"t6",...o})}const n=m.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:y.get("window").height*.7},contentBody:{marginTop:8},contentFooter:{marginTop:20}});export{w as DialogOverlay,v as DialogContent,x as DialogHeaderTxt,b as DialogBodyTxt};

package/dist/esm/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/esm/components/dialog/ConfirmDialog.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,Fragment as p,jsxs as l}from"react/jsx-runtime";import{Children as b,forwardRef as B,useEffect as D}from"react";import{StyleSheet as w,View as u}from"react-native";import{useHideAccessibility as y}from"../../core/contexts/HideAccessibility";import{Button as C}from"../button";import j from"./BaseDialog";import{DialogBodyTxt as v,DialogHeaderTxt as T}from"./BaseDialogContents";const E=B(({open:e,title:o,description:r,content:i,leftButton:a,rightButton:c,closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x},g)=>{const n=y();return D(()=>(e?n.activate():n.inactivate(),n.inactivate),[n,e]),t(j,{ref:g,open:e,header:o!=null?t(T,{children:o}):void 0,body:r!=null||i!=null?l(p,{children:[r!=null?t(v,{children:r}):null,i]}):void 0,footer:l(DoubleButton,{children:[a,c]}),closeOnDimmerClick:f,onClose:s,onExited:m,onEntered:h,...x})});export function DoubleButton(e){const o=b.count(e.children);if(o!==2)throw new Error(`There should be 2 children in DoubleButton. Given children: ${o}`);return t(u,{style:d.doubleButton,children:e.children})}function I(e){return t(u,{style:d.doubleButtonItem,children:t(C,{size:"large",viewStyle:[{flexGrow:1}],...e})})}const G=Object.assign(E,{Button:I}),d=w.create({doubleButton:{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-around",marginTop:-8,marginLeft:-8},doubleButtonItem:{flexDirection:"row",minWidth:"50%",flexGrow:1,paddingTop:8,paddingLeft:8}});export default G;

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

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

package/dist/esm/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/esm/components/dropdown/components/Dropdown.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{colors as i}from"@toss-design-system/colors";import{useAdaptive as p,useColorPreference as l}from"../../../core";import*as c from"../../paragraph";import{Platform as f,View as n}from"react-native";import{useDropdown as m}from"../contexts/DropdownContext";import{DropdownItem as h}from"./DropdownItem";export function Dropdown({title:o,children:r}){const t=p(),{colorPreference:a}=l(),{dropdownBaseRef:d}=m();return s(n,{ref:d,style:{width:240,backgroundColor:t.floatBackground,paddingVertical:12,borderRadius:16,shadowColor:a==="light"?f.OS==="ios"?i.greyOpacity300:void 0:i.greyOpacity900,shadowOffset:{width:0,height:16},shadowOpacity:1,shadowRadius:60,elevation:40},children:[o!=null?e(g,{children:e(c.Text,{fontWeight:"bold",typography:"st8",color:t.grey800,children:o})}):void 0,r]})}function g({style:o,...r}){return e(n,{style:[{paddingVertical:12,paddingHorizontal:24,flexDirection:"row",alignItems:"center"},o],...r})}Dropdown.Item=h;

package/dist/esm/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/esm/components/dropdown/components/DropdownItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{View as t}from"react-native";import*as l from"../../paragraph";import{useAdaptive as d}from"../../../core";export function DropdownItem({icon:e,children:i,style:o,iconViewStyle:n}){const s=d();return a(t,{style:[{flexDirection:"row",paddingVertical:12,paddingHorizontal:24,alignItems:"center"},o],children:[r(l.Text,{typography:"st8",fontWeight:"semiBold",color:s.grey600,children:i}),e!=null?r(t,{style:[{flexDirection:"row",alignItems:"center"},n],children:e}):void 0]})}

package/dist/esm/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/esm/components/dropdown/components/FixedFloatingDropdown.js

@@ -0,0 +1 @@
+"use strict";import{jsx as l,Fragment as Y,jsxs as P}from"react/jsx-runtime";import{spring as R}from"@toss-design-system/easings";import{cloneElement as _,forwardRef as j,useEffect as X,useRef as g}from"react";import{Pressable as z,View as D}from"react-native";import{useGlobalEvent as A,useOverlay as N}from"../../../core";import{AnimateRallyPresence as B,Rally as G}from"../../../interactions/rally";import{MENU_Z_INDEX as H}from"../constants/z-index";import{useDropdown as K}from"../contexts/DropdownContext";import{mergeRefs as M}from"../utils/mergeRefs";export function FixedFloatingDropdown({children:o,onOpen:p,onClose:r,open:i,dropdown:m,containerStyle:n}){const{placement:v}=K(),s=g(null),u=g(null),f=g(null),y=o.ref,F=_(o,{...o.props,ref:y!=null?M(y,s):s,onPress:()=>{i?r?.():p?.(),o.props?.onPress?.()}}),d=A();X(()=>{const t=c=>{const e=c.nativeEvent.pageX,a=c.nativeEvent.pageY;f?.current&&f.current.measure((x,b,h,I,O,w)=>{e>=O&&e<=O+h&&a>=w&&a<=w+I||r?.()})};return d.addEventListener("touchEnd",t),()=>{d.removeEventListener("touchEnd",t)}},[f,d,r,s]);const E=N();return X(()=>{if(!i){E.close();return}s.current==null||u.current==null||s.current.measure((...t)=>{u.current?.measure((...c)=>{const e={x:0,y:1,width:2,height:3,pageX:4,pageY:5};E.open(({isOpen:a,exit:x,close:b})=>{const h=v==="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)-(c[e.width]??0)};return l(z,{onPress:()=>{b(),r?.()},style:[{flex:1,position:"absolute",width:"100%",height:"100%",zIndex:H},n],children:l(B,{onExitEnd:x,children:a?l(S,{ref:f,style:[h],placement:v,children:m}):void 0})})})})})},[i]),P(Y,{children:[F,l(D,{ref:u,style:{opacity:0,position:"absolute",zIndex:-1},pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:m})]})}const S=j(function({style:p,children:r,placement:i},m){const n=i==="bottom-start"?"left":"right";return l(G,{ref:m,style:[{zIndex:9e3,position:"absolute"},p],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:n,to:n},transformOriginY:{from:"top",to:"top"},easing:R.medium},children:r})});

package/dist/esm/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/esm/components/dropdown/components/Trigger.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as R,Fragment as z}from"react/jsx-runtime";import{AnimateRallyPresence as I,Rally as S}from"../../../interactions/rally";import{useGlobalEvent as T}from"../../../core";import{cloneElement as j,useCallback as _,useEffect as x,useState as g}from"react";import{View as b}from"react-native";import{MENU_Z_INDEX as v}from"../constants/z-index";import{DropdownProvider as P,useDropdown as w}from"../contexts/DropdownContext";import{mergeRefs as X}from"../utils/mergeRefs";import{spring as E}from"@toss-design-system/easings";import{FixedFloatingDropdown as C}from"./FixedFloatingDropdown";function y({children:t,placement:r="bottom-start",strategy:n="absolute",...e}){return o(P,{placement:r,children:o(n==="fixed"?C:A,{...e,children:t})})}function A({children:t,onOpen:r,onClose:n,open:e,dropdown:l,containerStyle:a}){const{targetRef:i,dropdownBaseRef:f}=w(),u=t.ref,c=j(t,{...t.props,ref:u!=null?X(u,i):i,onPress:()=>{e?n?.():r?.(),t.props?.onPress?.()}}),s=T();return x(()=>{const d=(m,p)=>{f?.current==null||m.target==null||!p&&!h(m.target,f.current)&&!h(m.target,i?.current)&&n?.()};return s.addEventListener("touchEnd",d),()=>{s.removeEventListener("touchEnd",d)}},[f,s,n,i]),R(b,{style:[{position:"relative",zIndex:v},a],children:[c,o(I,{children:e?o(B,{children:l}):void 0})]})}function B({style:t,children:r,...n}){const{targetRef:e,dropdownBaseRef:l,placement:a}=w(),[i,f]=g(null),[u,c]=g(null);if(x(()=>{e?.current!=null&&l?.current!=null&&e.current.measureInWindow((d,m,p,D)=>{l?.current?.measureInWindow((N,U,F,O)=>{f({width:p,height:D}),c({width:F,height:O})})})},[l,e]),u==null||i==null)return o(b,{style:{opacity:0,position:"absolute",alignSelf:"flex-start"},children:r});const s=a==="bottom-start"?"left":"right";return o(z,{children:o(S,{style:[{zIndex:9e3,position:"absolute",top:i.height},a==="bottom-start"?{left:0}:{right:0},t],exit:{opacity:{from:1,to:0},scale:{from:1,to:0},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:E.medium},motion:{opacity:{from:0,to:1},scale:{from:0,to:1},transformOriginX:{from:s,to:s},transformOriginY:{from:"top",to:"top"},easing:E.medium},...n,children:r})})}function L({defaultOpen:t=!1,onOpen:r,onClose:n,...e}){const[l,a]=g(t),i=_(()=>{r?.(),a(!0)},[r]),f=_(()=>{n?.(),a(!1)},[n]);return o(y,{open:l,onOpen:i,onClose:f,...e})}export function Trigger(t){return t.open!=null?o(y,{...t}):o(L,{...t})}Trigger.zIndex=v;const h=(t,r)=>{if(t&&r&&t._nativeTag===r._nativeTag)return!0;if(r._children&&r._children.length>0){for(let n=0;n<=r._children.length-1;n++)if(h(t,r._children[n]))return!0}return!1};

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";export const MENU_Z_INDEX=9e3;

package/dist/esm/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/esm/components/dropdown/contexts/DropdownContext.js

@@ -0,0 +1 @@
+"use strict";import{jsx as u}from"react/jsx-runtime";import{createContext as d,useContext as l,useMemo as p,useRef as t}from"react";export const DropdownContext=d(null);export function DropdownProvider({placement:o,children:e}){const n=t(null),r=t(null),s=p(()=>({targetRef:r,dropdownBaseRef:n,placement:o}),[o]);return u(DropdownContext.Provider,{value:s,children:e})}export function useDropdown(){return l(DropdownContext)??c}const c={dropdownBaseRef:null,targetRef:null,placement:"bottom-start"};