@toss/tds-react-native 1.3.8 → 2.0.0-next.0

package/dist/esm/extensions/top-navigation/TopNavigation.d.ts

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 import type { Icon } from '../../components/icon';
+import type { NavigationTheme } from './constants';
+import { COLOR_PALETTE } from './constants';
 type Icon = {
     source: {
         uri: string;
@@ -30,29 +32,15 @@ export interface TopNavigationProps {
     leftVisible?: boolean;
 }
 export declare function TopNavigation({ title, icon, onPressTitle, onPressDots, onPressClose, fixedRightButton, children, withHome, contentVisible, theme, leftVisible, }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
-export type NavigationTheme = 'light' | 'dark';
+export type { NavigationTheme };
 export interface NavigationRightContentProps extends ViewProps {
     fixedRightButton: TopNavigationProps['fixedRightButton'];
     onPressDots?: () => void;
     onPressClose?: () => void;
     theme?: NavigationTheme;
 }
-export declare const COLOR_PALETTE: {
-    light: {
-        titleTextColor: string;
-        backgroundColor: string;
-        iconTintColor: string;
-        dividerColor: string;
-    };
-    dark: {
-        titleTextColor: string;
-        backgroundColor: string;
-        iconTintColor: string;
-        dividerColor: string;
-    };
-};
+export { COLOR_PALETTE };
 export declare function NavigationRightContent({ fixedRightButton, onPressDots, onPressClose, theme, ...viewProps }: NavigationRightContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function CloseWithDotsMono({ onPressDots, onPressClose, theme, }: Pick<TopNavigationProps, 'onPressDots' | 'onPressClose'> & {
     theme?: NavigationTheme;
 }): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/extensions/top-navigation/TopNavigation.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as a,Fragment as v}from"react/jsx-runtime";import{useNavigation as T}from"@granite-js/native/@react-navigation/native";import{closeView as k}from"@granite-js/react-native";import{colors as p}from"@toss/tds-colors";import{useLayoutEffect as F}from"react";import{View as n}from"react-native";import{Navigation as N,NavigationBackButton as P,NavigationContent as w,NavigationLeft as _,NavigationRight as x,NavigationTitleIcon as y,NavigationTitleText as E}from"../navigation";import{tdsEvent as I}from"../partner-navigation/event";import{IconButton as h}from"./IconButton";const b=157,L=b+44+4;export function TopNavigation({title:i,icon:e,onPressTitle:r,onPressDots:t,onPressClose:c,fixedRightButton:l,children:d,withHome:u=!1,contentVisible:g=!0,theme:s="light",leftVisible:C=!0}){const m=T(),f=m.canGoBack();return F(()=>{if(!g){m.setOptions({headerBackVisible:!1,headerTitle:()=>null,headerLeft:()=>null});return}},[g,m]),a(N,{children:[g&&a(v,{children:[o(_,{visible:C,children:o(P,{theme:s,canGoBack:f})}),a(w,{onPressTitle:r,horizontalSafeMargin:l!=null?L:b,withHome:u,theme:s,leftVisible:C,children:[o(y,{...e}),i!=null&&o(E,{theme:s,children:i}),u&&o(y,{name:"icon-home-mono"})]})]}),o(x,{children:o(NavigationRightContent,{fixedRightButton:l,onPressDots:t,onPressClose:c,theme:s})}),d]})}export const COLOR_PALETTE={light:{titleTextColor:"#191F28",backgroundColor:p.greyOpacity50,iconTintColor:p.greyOpacity600,dividerColor:p.greyOpacity200},dark:{titleTextColor:"#FFFFFF",backgroundColor:"rgba(2, 3, 7, 0.58)",iconTintColor:"rgba(253, 253, 255, 0.75))",dividerColor:"rgba(222, 222, 255, 0.19)"}};export function NavigationRightContent({fixedRightButton:i,onPressDots:e,onPressClose:r,theme:t="light",...c}){const{style:l,...d}=c;return a(n,{style:[{flexDirection:"row",gap:4},l],...d,children:[i!=null?o(n,{style:{borderRadius:99,overflow:"hidden"},children:o(h,{name:i.icon.name??"",accessibilityLabel:i.title,onPress:()=>{i.onPress?.(),I.emit("navigationAccessoryEvent",{id:i.id})},style:{paddingVertical:7,paddingHorizontal:12,backgroundColor:COLOR_PALETTE[t].backgroundColor},color:COLOR_PALETTE[t].iconTintColor,disabled:i.disabled})}):o(n,{style:{width:44,height:34}}),o(CloseWithDotsMono,{onPressDots:e,onPressClose:r,theme:t})]})}export function CloseWithDotsMono({onPressDots:i,onPressClose:e=k,theme:r="light"}){return o(n,{style:{borderRadius:99,overflow:"hidden"},children:a(n,{style:{flexDirection:"row",justifyContent:"center",alignItems:"center",gap:12,height:34,paddingHorizontal:12,backgroundColor:COLOR_PALETTE[r].backgroundColor},children:[o(h,{name:"icon-dots-mono",accessibilityLabel:"\uB354\uBCF4\uAE30",onPress:i,color:COLOR_PALETTE[r].iconTintColor}),o(n,{style:{width:1,height:16,backgroundColor:COLOR_PALETTE[r].dividerColor}}),o(h,{name:"icon-appsintoss-close-mono",accessibilityLabel:"\uB2EB\uAE30",color:COLOR_PALETTE[r].iconTintColor,onPress:()=>{e()}})]})})}
+"use strict";import{jsx as o,jsxs as a,Fragment as y}from"react/jsx-runtime";import{useNavigation as T}from"@granite-js/native/@react-navigation/native";import{closeView as N}from"@granite-js/react-native";import{useLayoutEffect as P}from"react";import{View as r}from"react-native";import{Navigation as k,NavigationBackButton as w,NavigationContent as _,NavigationLeft as E,NavigationRight as I,NavigationTitleIcon as v,NavigationTitleText as L}from"../navigation";import{tdsEvent as x}from"../partner-navigation/event";import{COLOR_PALETTE as e}from"./constants";import{IconButton as h}from"./IconButton";const C=157,A=C+44+4;export function TopNavigation({title:i,icon:t,onPressTitle:n,onPressDots:s,onPressClose:d,fixedRightButton:l,children:g,withHome:u=!1,contentVisible:m=!0,theme:c="light",leftVisible:f=!0}){const p=T(),b=p.canGoBack();return P(()=>{if(!m){p.setOptions({headerBackVisible:!1,headerTitle:()=>null,headerLeft:()=>null});return}},[m,p]),a(k,{children:[m&&a(y,{children:[o(E,{visible:f,children:o(w,{theme:c,canGoBack:b})}),a(_,{onPressTitle:n,horizontalSafeMargin:l!=null?A:C,withHome:u,theme:c,leftVisible:f,children:[o(v,{...t}),i!=null&&o(L,{theme:c,children:i}),u&&o(v,{name:"icon-home-mono"})]})]}),o(I,{children:o(NavigationRightContent,{fixedRightButton:l,onPressDots:s,onPressClose:d,theme:c})}),g]})}export{e as COLOR_PALETTE};export function NavigationRightContent({fixedRightButton:i,onPressDots:t,onPressClose:n,theme:s="light",...d}){const{style:l,...g}=d;return a(r,{style:[{flexDirection:"row",gap:4},l],...g,children:[i!=null?o(r,{style:{borderRadius:99,overflow:"hidden"},children:o(h,{name:i.icon.name??"",accessibilityLabel:i.title,onPress:()=>{i.onPress?.(),x.emit("navigationAccessoryEvent",{id:i.id})},style:{paddingVertical:7,paddingHorizontal:12,backgroundColor:e[s].backgroundColor},color:e[s].iconTintColor,disabled:i.disabled})}):o(r,{style:{width:44,height:34}}),o(CloseWithDotsMono,{onPressDots:t,onPressClose:n,theme:s})]})}export function CloseWithDotsMono({onPressDots:i,onPressClose:t=N,theme:n="light"}){return o(r,{style:{borderRadius:99,overflow:"hidden"},children:a(r,{style:{flexDirection:"row",justifyContent:"center",alignItems:"center",gap:12,height:34,paddingHorizontal:12,backgroundColor:e[n].backgroundColor},children:[o(h,{name:"icon-dots-mono",accessibilityLabel:"\uB354\uBCF4\uAE30",onPress:i,color:e[n].iconTintColor}),o(r,{style:{width:1,height:16,backgroundColor:e[n].dividerColor}}),o(h,{name:"icon-appsintoss-close-mono",accessibilityLabel:"\uB2EB\uAE30",color:e[n].iconTintColor,onPress:()=>{t()}})]})})}

package/dist/esm/extensions/top-navigation/constants.d.ts

@@ -0,0 +1,15 @@
+export type NavigationTheme = 'light' | 'dark';
+export declare const COLOR_PALETTE: {
+    light: {
+        titleTextColor: string;
+        backgroundColor: string;
+        iconTintColor: string;
+        dividerColor: string;
+    };
+    dark: {
+        titleTextColor: string;
+        backgroundColor: string;
+        iconTintColor: string;
+        dividerColor: string;
+    };
+};

package/dist/esm/extensions/top-navigation/constants.js

@@ -0,0 +1 @@
+"use strict";import{colors as o}from"@toss/tds-colors";export const COLOR_PALETTE={light:{titleTextColor:"#191F28",backgroundColor:o.greyOpacity50,iconTintColor:o.greyOpacity600,dividerColor:o.greyOpacity200},dark:{titleTextColor:"#FFFFFF",backgroundColor:"rgba(2, 3, 7, 0.58)",iconTintColor:"rgba(253, 253, 255, 0.75))",dividerColor:"rgba(222, 222, 255, 0.19)"}};

package/dist/esm/extensions/top-navigation/index.d.ts

@@ -1,2 +1,3 @@
+export * from './constants';
 export * from './TopNavigation';
 export * from './useTopNavigation';

package/dist/esm/extensions/top-navigation/index.js

@@ -1 +1 @@
-"use strict";export*from"./TopNavigation";export*from"./useTopNavigation";
+"use strict";export*from"./constants";export*from"./TopNavigation";export*from"./useTopNavigation";

package/dist/esm/interactions/pressable-effect/PressableEffect.d.ts

@@ -4,7 +4,9 @@ import { View } from 'react-native';
 import { PressableUnderlay } from './PressableUnderlay';
 interface PressableEffectProps extends PressableProps {
     style?: StyleProp<ViewStyle>;
-    underlay?: ReactElement | null;
+    underlay?: ReactElement<{
+        style?: StyleProp<ViewStyle>;
+    }> | null;
     children?: ReactNode;
 }
 /**

package/dist/esm/utils/compat.d.ts

@@ -0,0 +1,17 @@
+interface RNVersionBranch<T> {
+    '0.72': T;
+    '0.84': T;
+}
+/**
+ * React Native 버전에 따라 적절한 값을 선택합니다.
+ * @param options - 버전별 값 객체
+ * @returns 현재 RN 버전에 맞는 값
+ *
+ * @example
+ * const Component = selectByRNVersion({
+ *   '0.72': LegacyComponent,
+ *   '0.84': ModernComponent,
+ * });
+ */
+export declare function selectByRNVersion<T>(options: RNVersionBranch<T>): T;
+export {};

package/dist/esm/utils/compat.js

@@ -0,0 +1 @@
+"use strict";import{Platform as e}from"react-native";export function selectByRNVersion(r){const t=e.constants.reactNativeVersion;return t&&t.minor>=84?r["0.84"]:r["0.72"]}

package/dist/esm/utils/isReactText.d.ts

@@ -1,2 +1,2 @@
-import type { ReactNode, ReactText } from 'react';
-export declare function isReactText(node: ReactNode): node is ReactText;
+import type { ReactNode } from 'react';
+export declare function isReactText(node: ReactNode): node is string | number;

package/dist/esm/utils/mergeRefs.d.ts

@@ -1 +1,2 @@
-export declare function mergeRefs<T = any>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
+import type { RefObject } from 'react';
+export declare function mergeRefs<T = any>(...refs: Array<RefObject<T | null> | React.LegacyRef<T>>): React.Ref<T>;

package/dist/esm/utils/testing/index.d.ts

@@ -1 +1,2 @@
 export { mockAccessibilityInfo } from './mockAccessibilityInfo';
+export { mockViewLayout } from './mockViewLayout';

package/dist/esm/utils/testing/index.js

@@ -1 +1 @@
-"use strict";export{mockAccessibilityInfo}from"./mockAccessibilityInfo";
+"use strict";export{mockAccessibilityInfo}from"./mockAccessibilityInfo";export{mockViewLayout}from"./mockViewLayout";

package/dist/esm/utils/testing/mockAccessibilityInfo.d.ts

@@ -1,6 +1,9 @@
 import { AccessibilityInfo } from 'react-native';
 type EnableAccessibilityInfoKey = keyof Pick<AccessibilityInfo, 'isReduceMotionEnabled' | 'isScreenReaderEnabled'>;
-export declare function mockAccessibilityInfo(accessibilityinfo: {
+export declare function setupAccessibilityMock(): void;
+export declare function mockAccessibilityInfo(accessibilityInfo: {
     [key in EnableAccessibilityInfoKey]?: boolean;
-}): void;
+}): {
+    expectAnnounced: (message: string) => void;
+};
 export {};

package/dist/esm/utils/testing/mockAccessibilityInfo.js

@@ -1 +1 @@
-"use strict";import{AccessibilityInfo as e}from"react-native";export function mockAccessibilityInfo(n){Object.entries(n).forEach(([t,c])=>{jest.spyOn(e,t).mockImplementationOnce(async()=>c)}),jest.spyOn(e,"addEventListener").mockReturnValueOnce({remove:()=>{}})}
+"use strict";import{AccessibilityInfo as e}from"react-native";export function setupAccessibilityMock(){jest.mocked(e.isReduceMotionEnabled).mockReturnValue(Promise.resolve(!1)),jest.mocked(e.addEventListener).mockReturnValue({remove:jest.fn()}),e.announceForAccessibilityWithOptions||=jest.fn()}export function mockAccessibilityInfo(t){Object.entries(t).forEach(([n,s])=>{jest.mocked(e[n]).mockReturnValue(Promise.resolve(s))}),jest.spyOn(e,"addEventListener").mockReturnValue({remove:jest.fn()});const o=jest.spyOn(e,"announceForAccessibilityWithOptions");function c(n){expect(o).toHaveBeenCalledWith(n,expect.anything())}return{expectAnnounced:c}}

package/dist/esm/utils/testing/mockViewLayout.d.ts

@@ -0,0 +1,27 @@
+import { fireEvent } from '@testing-library/react-native';
+interface LayoutRect {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+/**
+ * jest 환경에서 View의 레이아웃 측정을 모킹합니다.
+ * `measure`, `measureInWindow`, `onLayout` 세 가지가 동일한 dimensions를 사용합니다.
+ *
+ * jest.restoreAllMocks()가 afterEach에서 호출되어야 spy가 정리됩니다.
+ * 또는 반환된 `restore()`를 직접 호출할 수 있습니다.
+ *
+ * @example
+ * ```ts
+ * const { fireLayout } = mockViewLayout({ width: 200, height: 50 });
+ * render(<Component />);
+ * await act(async () => { jest.advanceTimersByTime(16); }); // requestAnimationFrame
+ * await act(async () => { fireLayout(element); });          // onLayout
+ * ```
+ */
+export declare function mockViewLayout(layout?: LayoutRect): {
+    fireLayout: (element: Parameters<typeof fireEvent>[0], overrides?: LayoutRect) => void;
+    restore: () => void;
+};
+export {};

package/dist/esm/utils/testing/mockViewLayout.js

@@ -0,0 +1 @@
+"use strict";import{View as o}from"react-native";import{fireEvent as y}from"@testing-library/react-native";const p={x:0,y:0,width:100,height:40};export function mockViewLayout(n){const t={...p,...n},i=jest.spyOn(o.prototype,"measure").mockImplementation(function(e){e(t.x,t.y,t.width,t.height,t.x,t.y)}),r=jest.spyOn(o.prototype,"measureInWindow").mockImplementation(function(e){e(t.x,t.y,t.width,t.height)});function m(e,c){const u={...t,...c};y(e,"layout",{nativeEvent:{layout:u}})}function s(){i.mockRestore(),r.mockRestore()}return{fireLayout:m,restore:s}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toss/tds-react-native",
-  "version": "1.3.8",
+  "version": "2.0.0-next.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -34,7 +34,7 @@
     "prepack": "yarn build",
     "build": "./scripts/build.sh",
     "test": "jest",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.spec.json",
     "lint": "eslint ./src/**/*.{js,jsx,ts,tsx}"
   },
   "devDependencies": {
@@ -42,49 +42,51 @@
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/plugin-transform-flow-strip-types": "^7.19.0",
+    "@babel/plugin-transform-flow-strip-types": "7.27.1",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "7.18.9",
-    "@granite-js/native": "0.1.28",
-    "@granite-js/react-native": "0.1.28",
+    "@granite-js/native": "1.0.4",
+    "@granite-js/react-native": "1.0.4",
     "@jest/globals": "^28",
-    "@testing-library/react-native": "^0.0.4",
-    "@tools/javascript-obfuscator": "0.0.0",
-    "@tools/obfuscator": "0.0.0",
+    "@testing-library/react-native": "^12.4.1",
+    "@tools/javascript-obfuscator": "0.0.1",
+    "@tools/obfuscator": "0.0.1",
     "@types/culori": "^2.1.1",
     "@types/jest": "^29",
-    "@types/react": "^18",
+    "@types/react": "19.2.3",
+    "babel-preset-granite": "1.0.4",
+    "brick-module": "0.5.0",
     "esbuild": "^0.25.8",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-react-native": "^18.0.0",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-test-renderer": "^18",
+    "react": "19.2.3",
+    "react-native": "0.84.0",
+    "react-test-renderer": "19.2.3",
     "typescript": "5.9.2"
   },
   "peerDependencies": {
-    "@granite-js/native": ">=0.1.28",
-    "@granite-js/react-native": "*",
+    "@granite-js/native": ">=1",
+    "@granite-js/react-native": ">=1",
+    "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@react-spring/native": "9.5.2",
-    "@react-stately/radio": "^3.6.0",
+    "@react-spring/native": "10.0.3",
+    "@react-stately/radio": "^3.11.3",
     "@toss/tds-color-utils": "0.0.2",
     "@toss/tds-colors": "^0.1.0",
     "@toss/tds-easings": "^0.0.1",
     "@toss/tds-spring-easing": "^0.0.1",
     "@toss/tds-typography": "0.0.3",
     "@toss/utils": "^1.6.1",
+    "@types/node": "22.15.0",
     "culori": "^4.0.1",
     "es-hangul": "^2.3.0",
-    "hex-to-rgba": "^2.0.1",
-    "react-hook-form": "^7.33.1",
-    "react-uid": "^2.3.2"
+    "hex-to-rgba": "^2.0.1"
   },
   "sideEffects": false,
   "packageManager": "yarn@3.2.1",

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

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

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

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

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

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

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

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