@toss/tds-react-native 1.0.0

package/dist/cjs/components/post/List/PostOl.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { TypographyKeys } from '../../txt';
+export interface PostOlProps {
+    /**
+     * 텍스트의 타이포그래피 스타일을 지정해요.
+     * 각 스타일은 텍스트의 크기, 굵기, 간격 등을 다르게 설정해서 다양한 화면 환경과 디자인 요구를 만족해요.
+     *
+     * `t1` ~ `t7`: 주로 본문 텍스트에 사용하는 크기와 굵기 스타일이에요.
+     * `st1` ~ `st13`: 서브 타이틀 또는 부가적인 텍스트에 적합한 스타일이에요. 예를 들어, `st1`은 작은 본문이나 설명 텍스트에 적합하고, `st10`은 강조 텍스트에 사용하기 좋아요.
+     */
+    typography?: TypographyKeys;
+    /**
+     * 컴포넌트 하단의 여백을 결정해요.
+     */
+    paddingBottom?: number;
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export declare function PostOl(props: PostOlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PostOl {
+    var displayName: string;
+}
+export interface PostOlLiProps {
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 텍스트 색상을 지정해요.
+     */
+    color?: string;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+    /**
+     * `PostOl.Li` 컴포넌트 좌측에 순서 라벨을 지정해요.
+     */
+    order?: number;
+}
+export declare function PostOlLi({ children, style, color, order }: PostOlLiProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PostOlLi {
+    var displayName: string;
+}

package/dist/cjs/components/post/List/PostOl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostOl=PostOl,exports.PostOlLi=PostOlLi;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),core_1=require("../../../core"),txt_1=require("../../txt"),constants_1=require("../constants"),PostList_1=require("./PostList"),PostListProvider_1=require("./PostListProvider");function PostOl(t){return(0,jsx_runtime_1.jsx)(PostList_1.PostList,{listType:"ol",...t})}function PostOlLi({children:t,style:i,color:e,order:o}){const r=(0,core_1.useAdaptive)(),{typography:s}=(0,PostListProvider_1.usePostList)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.container,i],children:[(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:s,color:e??r.grey700,style:styles.prefix,fontWeight:"medium",children:`${o}.`}),(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:s,color:e??r.grey700,style:styles.content,children:t})]})}const styles=react_native_1.StyleSheet.create({container:{flexDirection:"row",alignItems:"flex-start"},prefix:{width:24,textAlign:"right",marginRight:8},content:{flex:1}});PostOl.displayName=constants_1.POST_OL,PostOlLi.displayName=constants_1.POST_OL_LI;

package/dist/cjs/components/post/List/PostUl.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { TypographyKeys } from '../../txt';
+export interface PostUlProps {
+    /**
+     * 텍스트의 타이포그래피 스타일을 지정해요.
+     * 각 스타일은 텍스트의 크기, 굵기, 간격 등을 다르게 설정해서 다양한 화면 환경과 디자인 요구를 만족해요.
+     *
+     * `t1` ~ `t7`: 주로 본문 텍스트에 사용하는 크기와 굵기 스타일이에요.
+     * `st1` ~ `st13`: 서브 타이틀 또는 부가적인 텍스트에 적합한 스타일이에요. 예를 들어, `st1`은 작은 본문이나 설명 텍스트에 적합하고, `st10`은 강조 텍스트에 사용하기 좋아요.
+     */
+    typography?: TypographyKeys;
+    /**
+     * 컴포넌트 하단의 여백을 결정해요.
+     */
+    paddingBottom?: number;
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export declare function PostUl(props: PostUlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PostUl {
+    var displayName: string;
+}
+export interface PostUlLiProps {
+    /**
+     * 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+    /**
+     * 텍스트 색상을 지정해요.
+     */
+    color?: string;
+    /**
+     * 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: ViewProps['style'];
+}
+export declare function PostUlLi({ color, style, children }: PostUlLiProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PostUlLi {
+    var displayName: string;
+}

package/dist/cjs/components/post/List/PostUl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostUl=PostUl,exports.PostUlLi=PostUlLi;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),core_1=require("../../../core"),txt_1=require("../../txt"),constants_1=require("../constants"),PostList_1=require("./PostList"),PostListProvider_1=require("./PostListProvider");function PostUl(t){return(0,jsx_runtime_1.jsx)(PostList_1.PostList,{listType:"ul",...t})}function PostUlLi({color:t,style:s,children:o}){const e=(0,core_1.useAdaptive)(),{typography:r}=(0,PostListProvider_1.usePostList)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.container,s],children:[(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:r,color:e.grey700,style:styles.prefix,fontWeight:"bold",children:"\u2022"}),(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:r,color:t??e.grey700,style:styles.content,children:o})]})}const styles=react_native_1.StyleSheet.create({container:{flexDirection:"row",alignItems:"flex-start"},prefix:{width:16,textAlign:"right",marginRight:8},content:{flex:1}});PostUl.displayName=constants_1.POST_UL,PostUlLi.displayName=constants_1.POST_UL_LI;

package/dist/cjs/components/post/Paragraph.d.ts

@@ -0,0 +1,16 @@
+import { TxtProps, TypographyKeys } from '../txt';
+export interface PostParagraphProps extends TxtProps {
+    /**
+     * 텍스트의 타이포그래피 스타일을 지정해요.
+     * 각 스타일은 텍스트의 크기, 굵기, 간격 등을 다르게 설정해서 다양한 화면 환경과 디자인 요구를 만족해요.
+     *
+     * `t1` ~ `t7`: 주로 본문 텍스트에 사용하는 크기와 굵기 스타일이에요.
+     * `st1` ~ `st13`: 서브 타이틀 또는 부가적인 텍스트에 적합한 스타일이에요. 예를 들어, `st1`은 작은 본문이나 설명 텍스트에 적합하고, `st10`은 강조 텍스트에 사용하기 좋아요.
+     */
+    typography?: TypographyKeys;
+    /**
+     * 컴포넌트 하단의 여백을 결정해요.
+     */
+    paddingBottom?: number;
+}
+export declare function PostParagraph({ typography, children, color, paddingBottom, style, ...props }: PostParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/post/Paragraph.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PostParagraph=PostParagraph;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt");function PostParagraph({typography:e="t5",children:t,color:r,paddingBottom:o=24,style:a,...i}){const s=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:e,fontWeight:"regular",color:r??s.grey700,style:[{paddingTop:0,paddingRight:24,paddingLeft:24,paddingBottom:o},a],...i,children:t})}

package/dist/cjs/components/post/Post.d.ts

@@ -0,0 +1,22 @@
+import { PostHr } from './Hr';
+import { PostLi } from './List/PostLi';
+import { PostOl } from './List/PostOl';
+import { PostUl } from './List/PostUl';
+import { PostParagraph } from './Paragraph';
+export declare const Post: {
+    H1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H2: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H3: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    H4: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Header").HeaderPublicProps & import("react").RefAttributes<import("react-native").Text>>>;
+    Paragraph: typeof PostParagraph;
+    Ol: typeof PostOl;
+    Li: typeof PostLi;
+    Ul: typeof PostUl;
+    Hr: typeof PostHr;
+};
+export type { PostH1Props, PostH2Props, PostH3Props, PostH4Props } from './Header';
+export type { PostHrProps } from './Hr';
+export type { PostLiProps } from './List/PostLi';
+export type { PostOlProps } from './List/PostOl';
+export type { PostUlProps } from './List/PostUl';
+export type { PostParagraphProps } from './Paragraph';

package/dist/cjs/components/post/Post.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Post=void 0;const Header_1=require("./Header"),Hr_1=require("./Hr"),PostLi_1=require("./List/PostLi"),PostOl_1=require("./List/PostOl"),PostUl_1=require("./List/PostUl"),Paragraph_1=require("./Paragraph");exports.Post={H1:Header_1.PostH1,H2:Header_1.PostH2,H3:Header_1.PostH3,H4:Header_1.PostH4,Paragraph:Paragraph_1.PostParagraph,Ol:PostOl_1.PostOl,Li:PostLi_1.PostLi,Ul:PostUl_1.PostUl,Hr:Hr_1.PostHr};

package/dist/cjs/components/post/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const POST_OL = "PostOl";
+export declare const POST_UL = "PostUl";
+export declare const POST_LI = "PostLi";
+export declare const POST_OL_LI = "PostOlLi";
+export declare const POST_UL_LI = "POSTUlLi";

package/dist/cjs/components/post/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.POST_UL_LI=exports.POST_OL_LI=exports.POST_LI=exports.POST_UL=exports.POST_OL=void 0,exports.POST_OL="PostOl",exports.POST_UL="PostUl",exports.POST_LI="PostLi",exports.POST_OL_LI="PostOlLi",exports.POST_UL_LI="POSTUlLi";

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

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

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

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

package/dist/cjs/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,23 @@
+import { ViewProps } from 'react-native';
+type Size = 'light' | 'normal' | 'bold';
+export interface ProgressBarProps extends ViewProps {
+    /**
+     * @description 막대를 얼마나 채울지 정합니다. (0 ~ 100)
+     */
+    progress: number;
+    /**
+     * @description `ProgressBar`의 크기를 정합니다.
+     */
+    size: Size;
+    /**
+     * @description `ProgressBar`의 트랙에 채워지는 색상을 바꿉니다.
+     */
+    color?: string;
+    /**
+     * @description 애니메이션을 사용할지 여부를 결정합니다.
+     * @default false
+     */
+    withAnimation?: boolean;
+}
+declare function ProgressBar({ progress, size, color, withAnimation, style, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/cjs/components/progress-bar/ProgressBar.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(n,e,i,t){t===void 0&&(t=i);var r=Object.getOwnPropertyDescriptor(e,i);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(n,t,r)}:function(n,e,i,t){t===void 0&&(t=i),n[t]=e[i]},__setModuleDefault=Object.create?function(n,e){Object.defineProperty(n,"default",{enumerable:!0,value:e})}:function(n,e){n.default=e},__importStar=function(){var n=function(e){return n=Object.getOwnPropertyNames||function(i){var t=[];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(t[t.length]=r);return t},n(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var t=n(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(i,e,t[r]);return __setModuleDefault(i,e),i}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native");function ProgressBar({progress:n,size:e,color:i=colors_1.colors.blue500,withAnimation:t,style:r,...u}){const o=(0,core_1.useAdaptive)(),a=(0,react_1.useRef)(new react_native_1.Animated.Value(n)).current,c=a.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return(0,react_1.useEffect)(()=>{react_native_1.Animated.timing(a,{toValue:n,duration:t?500:0,easing:react_native_1.Easing.ease,useNativeDriver:!0}).start()},[n]),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{height:heightMap[e],backgroundColor:o.grey100,borderRadius:heightMap[e],overflow:"hidden"},r],role:"progressbar",...u,children:(0,jsx_runtime_1.jsx)(react_native_svg_1.default,{width:"100%",height:heightMap[e],children:(0,jsx_runtime_1.jsx)(AnimatedRect,{fill:i,width:c,height:heightMap[e],rx:heightMap[e]/2,ry:heightMap[e]/2})})})}const heightMap={light:2,normal:5,bold:8},AnimatedRect=react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Rect);exports.default=ProgressBar;

package/dist/cjs/components/progress-bar/index.d.ts

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

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

package/dist/cjs/components/radio/Radio.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Control, FieldPathValue, FieldValues, Path, UseControllerProps } from 'react-hook-form';
+import RadioOption, { RadioOptionProps } from './RadioOption';
+interface RadioProps<Value> {
+    /**
+     * The value of the radio option that is selected.
+     */
+    value: Value;
+    /**
+     * The callback that is called when the user selects a new radio option.
+     * @param value The value of the radio option that is selected.
+     * @returns void
+     */
+    onChange: (value: Value) => void;
+    /**
+     * disabled 여부
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The horizontal margin to apply to the radio component.
+     * @default 0
+     * @type number
+     */
+    horizontalMargin?: number;
+    /**
+     * The children of the radio component.
+     * @type Radio.Option | Radio.Option[]
+     * @required true
+     */
+    children: React.ReactElement<RadioOptionProps<Value>> | Array<React.ReactElement<RadioOptionProps<Value>>>;
+}
+/**
+ * TDS Radio component. To use Radio as a input field with __useForm__, use the {@link RadioInput} component instead.
+ * @template Value - The value of the radio option
+ * @param RadioProps props { children, value, onChange, horizontalMargin = 0 }. See {@link RadioProps}
+ */
+declare const Radio: {
+    <Value>({ value, children, disabled, onChange, horizontalMargin }: RadioProps<Value>): import("react/jsx-runtime").JSX.Element;
+    Option: typeof RadioOption;
+};
+interface RadioInputProps<FormData extends FieldValues, TName extends Path<FormData>, Value extends FieldPathValue<FormData, TName>> extends Omit<RadioProps<Value>, 'onChange' | 'value' | 'children'> {
+    /**
+     * @typedef { import('react-hook-form').UseControllerProps } UseControllerProps
+     */
+    /**
+     * The current selected value in the radio's options
+     * @type {UseControllerProps}
+     */
+    controlerProps?: Omit<UseControllerProps<FormData, TName>, 'control' | 'name'>;
+    control: Control<FormData>;
+    name: TName;
+    onChange?: (value: Value) => void;
+    children: React.ReactNode | React.ReactNode[];
+}
+/**
+ * TDS Radio component which work with __useForm__.
+ * @see {@link Radio} for more information
+ *
+ * @export
+ * @template Value - The value of the radio option
+ * @param RadioInputProps props { children, controlerProps, onChange, horizontalMargin = 0 }. See {@link RadioInputProps}
+ * @example
+ * const { control, handleSubmit } = useForm();
+ * ...
+ * <RadioInput control={control} name="field1">
+ *   <Radio.Option value="1">Option 1</Radio.Option>
+ *   <Radio.Option value="2">Option 2</Radio.Option>
+ * </RadioInput>
+ */
+export declare function RadioInput<FormData extends FieldValues, TName extends Path<FormData>, Value extends FieldPathValue<FormData, TName>>({ controlerProps, control, name, children, ...rest }: RadioInputProps<FormData, TName, Value>): import("react/jsx-runtime").JSX.Element;
+export { Radio };

package/dist/cjs/components/radio/Radio.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(t,e,o,r){r===void 0&&(r=o);var n=Object.getOwnPropertyDescriptor(e,o);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[o]}}),Object.defineProperty(t,r,n)}:function(t,e,o,r){r===void 0&&(r=o),t[r]=e[o]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(o){var r=[];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(r[r.length]=n);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null)for(var r=t(e),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(o,e,r[n]);return __setModuleDefault(o,e),o}}(),__importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Radio=void 0,exports.RadioInput=RadioInput;const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),react_1=__importStar(require("react")),react_hook_form_1=require("react-hook-form"),react_native_1=require("react-native"),RadioOption_1=__importDefault(require("./RadioOption")),defaultShadowStyle={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},TRANSITION_MULTIPLIER=1,Radio=({value:t,children:e,disabled:o=!1,onChange:r,horizontalMargin:n=0})=>{const[i,s]=(0,react_1.useState)(0),u=react_1.default.Children.map(e,a=>a.props),p=u.length,c=i/p,d=u.findIndex(a=>a.value===t),f=(0,react_1.useRef)(!0),l=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=react_1.default.useCallback(a=>{r(a)},[r]),_=(0,react_1.useCallback)(a=>{react_native_1.Animated.spring(l,{toValue:a,useNativeDriver:!0,...DEFAULT_SPRING_CONFIG}).start()},[l]);(0,react_1.useEffect)(()=>{if(i===0)return;const a=d*(c*TRANSITION_MULTIPLIER);f.current===!0?(l.setValue(a),f.current=!1):_(a)},[d,c]);const g=(0,core_1.useAdaptive)(),{colorPreference:v}=(0,core_1.useColorPreference)();return(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[styles.defaultSegmentedControlWrapper,{backgroundColor:g.grey100,marginHorizontal:n}],onLayout:a=>{s(a.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.movingSegmentStyle,defaultShadowStyle,react_native_1.StyleSheet.absoluteFill,{backgroundColor:v==="light"?colors_1.colors.inverseGrey900:colors_1.colors.inverseGrey300,width:i/u.length-8},{transform:[{translateX:l}]}]}),react_1.default.Children.map(e,a=>react_1.default.cloneElement(a,{checked:a.props.value===t,disabled:a.props.disabled??o,onPress:h}))]})};exports.Radio=Radio;const styles=react_native_1.StyleSheet.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});function RadioInput({controlerProps:t,control:e,name:o,children:r,...n}){const{field:i}=(0,react_hook_form_1.useController)({control:e,name:o,...t});return(0,jsx_runtime_1.jsx)(Radio,{horizontalMargin:n.horizontalMargin,value:i.value,onChange:s=>{i.onChange(s),n.onChange?.(s)},children:r})}Radio.Option=RadioOption_1.default;

package/dist/cjs/components/radio/RadioOption.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface RadioOptionProps<Value> {
+    value: Value;
+    checked?: boolean;
+    disabled?: boolean;
+    onPress?: (value: Value) => void;
+    children: React.ReactNode;
+}
+declare function RadioOption<Value>({ children, value, checked, disabled, onPress }: RadioOptionProps<Value>): import("react/jsx-runtime").JSX.Element;
+export default RadioOption;

package/dist/cjs/components/radio/RadioOption.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),prevent_font_scaling_1=require("../../extensions/prevent-font-scaling"),utils_1=require("@toss/utils"),react_native_1=require("react-native");function RadioOption({children:i,value:r,checked:n=!1,disabled:e,onPress:s}){const t=(0,core_1.useAdaptive)(),o={typography:"t5",fontWeight:"semiBold",color:e?t.grey400:t.grey800},c={typography:"t5",fontWeight:"medium",color:e?t.grey400:t.grey800};return(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:e?utils_1.noop:()=>s?.(r),style:{flex:1,elevation:9},disabled:e,accessibilityRole:"radio",accessibilityState:{selected:n,disabled:e},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flexDirection:"row",alignItems:"center",justifyContent:"center"},children:(0,jsx_runtime_1.jsx)(prevent_font_scaling_1.PreventFontScaling,{limit:135,children:n?(0,jsx_runtime_1.jsx)(txt_1.Txt,{...o,numberOfLines:1,children:i}):(0,jsx_runtime_1.jsx)(txt_1.Txt,{...c,numberOfLines:1,children:i})})})})}exports.default=RadioOption;

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

@@ -0,0 +1 @@
+export { Radio, RadioInput } from './Radio';

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

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

package/dist/cjs/components/rating/EditableRating.d.ts

@@ -0,0 +1,42 @@
+import { View, ViewProps } from 'react-native';
+type Size = 'medium' | 'large' | 'big';
+export interface EditableRatingProps extends ViewProps {
+    /**
+     * `Rating` 컴포넌트의 현재 점수를 결정해요.
+     */
+    value: number;
+    /**
+     * `Rating` 컴포넌트의 점수 상태가 바뀔 때 실행되는 함수에요.
+     * @default undefined
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * `Rating` 컴포넌트의 크기를 결정해요.
+     */
+    size: Size;
+    /**
+     * `Rating` 컴포넌트에 지정 가능한 최대 점수를 결정해요.
+     * @default 5
+     */
+    max?: number;
+    /**
+     * `Rating` 컴포넌트의 요소 간의 간격을 결정해요.
+     * 지정하지 않으면 `size`에 따라 미리 정의된 값이 할당돼요.
+     */
+    gap?: number;
+    /**
+     * `Rating` 컴포넌트를 클릭하거나 드래그할 때, 선택된 아이콘의 색상이 activeColor로 변경돼요.
+     * 활성 상태에서는 지정한 값으로 표현돼요.
+     * 비활성 상태에서는 `adaptive.greyOpacity200`로 표현돼요.
+     *
+     * @default adaptive.yellow400
+     */
+    activeColor?: string;
+    /**
+     * 이 값이 `true` 일 때 `Rating` 컴포넌트가 비활성화돼요.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const EditableRating: import("react").ForwardRefExoticComponent<EditableRatingProps & import("react").RefAttributes<View>>;
+export {};

package/dist/cjs/components/rating/EditableRating.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.EditableRating=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native"),generateHapticFeedback_1=require("../../native/generateHapticFeedback"),core_1=require("../../core"),animated_1=require("../../interactions/animated"),private_1=require("../icon/private"),useA11yMode_1=require("./useA11yMode"),AnimatedIcon=animated_1.Animated.createAnimatedComponent(private_1.SvgIcon),EditableRatingItem=(0,react_1.forwardRef)(function({size:a,name:g,active:m,disabledColor:i,idleColor:A,activeColor:c,disabled:V,forwardedRef:h,style:v,...d},x){const o=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,u=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,p=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,l=(0,react_1.useRef)(new animated_1.Animated.Value(0)).current,r=(0,react_1.useRef)(new animated_1.Animated.Value(m?1:0)).current,y=r.interpolate({inputRange:[0,1],outputRange:[A,c]});(0,react_1.useEffect)(()=>{animated_1.Animated.spring(r,{toValue:m?1:0,useNativeDriver:!1,...easings_1.spring.rapid}).start()},[m,r]);const k=(0,react_1.useCallback)(()=>{o.setValue(1),animated_1.Animated.sequence([animated_1.Animated.spring(o,{toValue:1.1,useNativeDriver:!1,...easings_1.spring.rapid}),animated_1.Animated.spring(o,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick})]).start()},[o]),R=(0,react_1.useCallback)(()=>{o.setValue(1),animated_1.Animated.spring(o,{toValue:.9,useNativeDriver:!1,...easings_1.spring.rapid}).start()},[o]),S=(0,react_1.useCallback)(()=>{animated_1.Animated.spring(r,{toValue:0,useNativeDriver:!1,...easings_1.spring.rapid}).start(),animated_1.Animated.spring(l,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick}).start()},[r,l]),f=(0,react_1.useCallback)(()=>{animated_1.Animated.spring(l,{toValue:1,useNativeDriver:!1,...easings_1.spring.rapid}).start(),animated_1.Animated.spring(r,{toValue:1,useNativeDriver:!1,...easings_1.spring.rapid}).start()},[r,l]),b=(0,react_1.useCallback)(()=>{animated_1.Animated.spring(u,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick}).start()},[u]),w=(0,react_1.useCallback)(()=>{p.setValue(1),animated_1.Animated.sequence([animated_1.Animated.spring(p,{toValue:1.1,useNativeDriver:!1,...easings_1.spring.rapid}),animated_1.Animated.spring(p,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick})]).start(),animated_1.Animated.sequence([animated_1.Animated.spring(u,{toValue:.5,useNativeDriver:!1,...easings_1.spring.rapid}),animated_1.Animated.spring(u,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick})]).start(),animated_1.Animated.spring(l,{toValue:0,useNativeDriver:!1,...easings_1.spring.quick}).start()},[p,u,l]);return(0,react_1.useImperativeHandle)(x,()=>({expandMotion:k,shrinkMotion:R,activeMotion:f,inactiveMotion:S,touchDownMotion:b,touchUpMotion:w}),[f,k,S,R,b,w]),m&&V?(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:h,pointerEvents:"none",style:[{opacity:.3},v],...d,children:(0,jsx_runtime_1.jsx)(AnimatedIcon,{name:g,size:a,color:c})}):V?(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:h,pointerEvents:"none",style:v,...d,children:(0,jsx_runtime_1.jsx)(private_1.SvgIcon,{name:g,size:a,color:i})}):(0,jsx_runtime_1.jsxs)(animated_1.Animated.View,{ref:h,pointerEvents:"none",style:[Position.relative,{transform:[{scale:o}]},v],...d,children:[(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[ZIndex[1],Position.overlap,{opacity:u,width:a,height:a,transform:[{scale:p}]}],children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{height:a,width:a,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.RadialGradient,{id:"grad",cx:"50%",cy:"50%",rx:"50%",ry:"50%",fx:"50%",fy:"50%",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"0%",stopColor:c,stopOpacity:"1"}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:"100%",stopColor:c,stopOpacity:"0"})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Circle,{cx:a/2,cy:a/2,r:a/2,fill:"url(#grad)"})]})}),(0,jsx_runtime_1.jsx)(AnimatedIcon,{name:g,size:a,color:y,style:ZIndex[2]}),(0,jsx_runtime_1.jsx)(AnimatedIcon,{name:g,size:a,color:"rgba(0,0,0,0.1)",style:[ZIndex[3],Position.overlap,{opacity:l}]})]})}),GapBySize={medium:8,large:6,big:4},ItemSizeBySize={medium:24,large:32,big:40};exports.EditableRating=(0,react_1.forwardRef)(function({max:M=5,size:a="large",gap:g=GapBySize[a],activeColor:m,value:i,onValueChange:A,disabled:c=!1,style:V,...h},v){const d=(0,useA11yMode_1.useScreenReaderMode)(),x=(0,core_1.useAdaptive)(),o=m??x.yellow400,u=x.greyOpacity200,p=x.greyOpacity100,l="icon-star-mono",r=(0,react_1.useRef)([]),y=(0,react_1.useRef)([]).current,k=ItemSizeBySize[a],R=(0,react_1.useRef)(i);R.current=i;const S=(t,e)=>{const{x:n,width:s}=t.nativeEvent.layout;y[e]={x:n,width:s}},f=(0,react_1.useCallback)(t=>{const{locationX:e}=t.nativeEvent;let n=0;for(let s=0;s<y.length;s++){const{x:j,width:E}=y[s];if(e>=j&&e<=j+E){n=s+1;break}else e>j+E?n=s+1:e<0&&(n=0)}return n},[y]),b=(0,react_1.useCallback)(t=>{const e=f(t);A?.(e),r.current.forEach((n,s)=>{s<e?n.activeMotion():n.inactiveMotion()})},[f,A]),w=(0,react_1.useCallback)(t=>{b(t),(0,generateHapticFeedback_1.generateHapticFeedback)({type:"tickMedium"});const e=f(t);r.current.forEach((n,s)=>{n.shrinkMotion(),s<e&&n.touchDownMotion()})},[f,b]),C=(0,react_1.useCallback)(()=>{r.current.forEach((t,e)=>{t.expandMotion(),e<R.current&&t.touchUpMotion()})},[]),q=(0,react_1.useRef)(react_native_1.PanResponder.create({onStartShouldSetPanResponder:()=>!0,onPanResponderGrant:w,onPanResponderMove:b,onPanResponderRelease:C,onPanResponderTerminate:C})).current,D={accessibilityRole:"text","aria-disabled":c,accessibilityHint:"\uBCC0\uACBD\uD560 \uC218 \uC5C6\uC5B4\uC694"},I={accessibilityRole:"adjustable",accessibilityActions:[{name:"increment",label:"\uBCC4\uC810 \uC62C\uB9AC\uAE30"},{name:"decrement",label:"\uBCC4\uC810 \uB0B4\uB9AC\uAE30"}],onAccessibilityAction:t=>{let e;switch(t.nativeEvent.actionName){case"increment":e=i!==M?i+1:i;break;case"decrement":e=i!==0?i-1:i;break;default:e=i;break}react_native_1.AccessibilityInfo.announceForAccessibility?.(`${e}\uC810\uC774 \uC120\uD0DD\uB418\uC5C8\uC2B5\uB2C8\uB2E4`),A?.(e)}};return(0,react_1.useEffect)(()=>{d&&r.current.forEach((t,e)=>{e<i?(t.activeMotion(),t.touchUpMotion()):t.inactiveMotion()})},[d,i]),(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:v,accessible:!0,accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${M}\uC810 \uB9CC\uC810 \uC911`,accessibilityValue:{text:`${i}\uC810`},...c?D:I,...c||d?{}:q.panHandlers,style:[Flex.rowCenter,{gap:g},V],testID:"rating",...h,children:Array.from({length:M},(t,e)=>(0,jsx_runtime_1.jsx)(EditableRatingItem,{ref:n=>{n&&(r.current[e]=n)},forwardedRef:v,size:k,onLayout:n=>S(n,e),active:e<i,activeColor:o,idleColor:u,disabledColor:p,disabled:c,name:l},e))})});const Position=react_native_1.StyleSheet.create({relative:{position:"relative"},overlap:{position:"absolute",top:0,left:0}}),ZIndex=react_native_1.StyleSheet.create({1:{zIndex:1},2:{zIndex:2},3:{zIndex:3}}),Flex=react_native_1.StyleSheet.create({rowCenter:{flexDirection:"row",alignItems:"center"}});

package/dist/cjs/components/rating/Rating.d.ts

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+import { type EditableRatingProps } from './EditableRating';
+import { type ReadOnlyRatingProps } from './ReadOnlyRating';
+export type EditableRating = {
+    readonly: false;
+} & EditableRatingProps;
+export type ReadOnlyRating = {
+    readonly: true;
+} & ReadOnlyRatingProps;
+export type RatingProps = EditableRating | ReadOnlyRating;
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<View>>;

package/dist/cjs/components/rating/Rating.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Rating=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),EditableRating_1=require("./EditableRating"),ReadOnlyRating_1=require("./ReadOnlyRating");exports.Rating=(0,react_1.forwardRef)((e,t)=>{if(e.readonly){const{readonly:n,...r}=e;return(0,jsx_runtime_1.jsx)(ReadOnlyRating_1.ReadOnlyRating,{ref:t,...r})}return(0,jsx_runtime_1.jsx)(EditableRating_1.EditableRating,{ref:t,...e})});

package/dist/cjs/components/rating/ReadOnlyRating.d.ts

@@ -0,0 +1,48 @@
+import { View, ViewProps } from 'react-native';
+export interface ProgressIconsProps extends ViewProps {
+    max: number;
+    name: string;
+    size: number;
+    gap: number;
+    value: number;
+    activeColor: string;
+    idleColor: string;
+}
+export declare const ProgressIcons: import("react").ForwardRefExoticComponent<ProgressIconsProps & import("react").RefAttributes<View>>;
+type Size = 'tiny' | 'small' | 'medium' | 'large' | 'big';
+export interface ReadOnlyRatingProps extends ViewProps {
+    /**
+     * `Rating` 컴포넌트의 현재 점수를 결정해요.
+     */
+    value: number;
+    /**
+     * `Rating` 컴포넌트의 형태를 결정해요.
+     * - `full`: 전체 아이콘과 점수가 함께 보여져요.
+     * - `compact`: 하나의 아이콘과 점수가 함께 보여져요.
+     * - `iconOnly`: 전체 아이콘만 보여져요.
+     */
+    variant: 'full' | 'compact' | 'iconOnly';
+    /**
+     * `Rating` 컴포넌트의 크기를 결정해요.
+     */
+    size: Size;
+    /**
+     * `Rating` 컴포넌트에 지정 가능한 최대 점수를 결정해요.
+     * @default 5
+     */
+    max?: number;
+    /**
+     * `Rating` 컴포넌트의 요소 간의 간격을 결정해요.
+     * 지정하지 않으면 `size`에 따라 미리 정의된 값이 할당돼요.
+     */
+    gap?: number;
+    /**
+     * `Rating` 컴포넌트의 활성 색상을 지정해요.
+     * 비활성 상태에서는 `adaptive.greyOpacity200`로 표현돼요.
+     *
+     * @default adaptive.yellow400
+     */
+    activeColor?: string;
+}
+export declare const ReadOnlyRating: import("react").ForwardRefExoticComponent<ReadOnlyRatingProps & import("react").RefAttributes<View>>;
+export {};

package/dist/cjs/components/rating/ReadOnlyRating.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReadOnlyRating=exports.ProgressIcons=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=require("@granite-js/native/react-native-svg"),core_1=require("../../core"),private_1=require("../icon/private"),txt_1=require("../txt"),react_1=require("react"),react_native_1=require("react-native"),ClippedIcon=(0,react_1.forwardRef)(function({name:r,size:e,progress:n,color:o,...t},i){return(0,jsx_runtime_1.jsxs)(react_native_svg_1.Svg,{ref:i,width:e,height:e,...t,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsx)(react_native_svg_1.ClipPath,{id:"clip",children:(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{width:e*n,height:e})})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.G,{clipPath:"url(#clip)",children:(0,jsx_runtime_1.jsx)(private_1.SvgIcon,{name:r,size:e,color:o})})]})}),ProgressIcon=(0,react_1.forwardRef)(function({name:r,size:e,progress:n,idleColor:o,activeColor:t,style:i,...l},s){return(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:s,style:[{position:"relative"},i],...l,children:[(0,jsx_runtime_1.jsx)(private_1.SvgIcon,{name:r,size:e,color:o}),(0,jsx_runtime_1.jsx)(ClippedIcon,{name:r,size:e,progress:n,color:t,style:{position:"absolute",top:0,left:0}})]})});exports.ProgressIcons=(0,react_1.forwardRef)(function({name:r,size:e,gap:n,max:o,value:t,style:i,idleColor:l,activeColor:s,...a},g){return(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:g,style:[{flexDirection:"row",alignItems:"center",gap:n},i],...a,children:Array.from({length:o},(p,h)=>{const c=Math.min(1,Math.max(0,t-h)),y=c<.25?0:c<.75?.5:1;return(0,jsx_runtime_1.jsx)(ProgressIcon,{name:r,size:e,progress:y,idleColor:l,activeColor:s},h)})})});const GapBySize={tiny:0,small:0,medium:0,large:0,big:0},ItemSizeBySize={tiny:16,small:20,medium:24,large:32,big:40},IconAndTextGapBySize={tiny:4,small:4,medium:4,large:4,big:2},TextStyleBySize={tiny:{typography:"t7",fontWeight:txt_1.FontWeight.Medium},small:{typography:"t5",fontWeight:txt_1.FontWeight.Semibold},medium:{typography:"t4",fontWeight:txt_1.FontWeight.Semibold},large:{typography:"t3",fontWeight:txt_1.FontWeight.Bold},big:{typography:"st5",fontWeight:txt_1.FontWeight.Bold}};exports.ReadOnlyRating=(0,react_1.forwardRef)(function({variant:r,size:e="large",gap:n=GapBySize[e],max:o=5,value:t,style:i,activeColor:l,...s},a){const g=ItemSizeBySize[e],p=(0,core_1.useAdaptive)(),h=p.greyOpacity200,c=l??p.yellow400,y="icon-star-mono",x={accessible:!0,accessibilityRole:"text",accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${o}\uC810 \uB9CC\uC810 \uC911 ${t}\uC810`};if(r==="full")return(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:a,style:[{flexDirection:"row",alignItems:"center",gap:IconAndTextGapBySize[e]},i],...x,...s,children:[(0,jsx_runtime_1.jsx)(exports.ProgressIcons,{idleColor:h,activeColor:c,name:y,size:g,gap:n,max:o,value:t}),(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:TextStyleBySize[e].typography,fontWeight:TextStyleBySize[e].fontWeight,color:p.grey800,children:t})]});if(r==="compact")return(0,jsx_runtime_1.jsxs)(react_native_1.View,{ref:a,style:[{flexDirection:"row",alignItems:"center",gap:IconAndTextGapBySize[e]},i],...x,...s,children:[(0,jsx_runtime_1.jsx)(private_1.SvgIcon,{name:y,size:g,color:c}),(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:TextStyleBySize[e].typography,fontWeight:TextStyleBySize[e].fontWeight,color:p.grey800,children:t})]});if(r==="iconOnly")return(0,jsx_runtime_1.jsx)(react_native_1.View,{ref:a,style:[{flexDirection:"row",alignItems:"center"},i],...x,...s,children:(0,jsx_runtime_1.jsx)(exports.ProgressIcons,{idleColor:h,activeColor:c,name:y,size:g,gap:n,max:o,value:t})});throw new Error("Unhandled variant")});

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

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

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

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

package/dist/cjs/components/rating/useA11yMode.d.ts

@@ -0,0 +1 @@
+export declare function useScreenReaderMode(): boolean;

package/dist/cjs/components/rating/useA11yMode.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useScreenReaderMode=useScreenReaderMode;const react_1=require("react"),react_native_1=require("react-native");function useScreenReaderMode(){const[t,r]=(0,react_1.useState)(!1);return(0,react_1.useEffect)(()=>{const s=react_native_1.AccessibilityInfo.addEventListener("screenReaderChanged",e=>{r(e)});return react_native_1.AccessibilityInfo.isScreenReaderEnabled().then(e=>{r(e)}),()=>{s.remove()}},[]),t}

package/dist/cjs/components/result/Result.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ResultButton } from './ResultButton';
+export interface ResultProps {
+    /**
+     * `Result` 컴포넌트의 `title` 위에 표시할 시각적 요소로, 주로 아이콘이나 이미지를 나타내요. `Asset` 컴포넌트를 사용해서 다양한 시각적 콘텐츠를 표현할 수 있어요.
+     */
+    figure?: ReactNode;
+    /**
+     * `Result` 컴포넌트의 결과 화면의 제목이에요. 사용자가 어떤 작업을 한 뒤의 성공 여부 같은 상태를 간결하게 전달하는 데에 사용해요.
+     */
+    title?: ReactNode;
+    /**
+     * `Result` 컴포넌트의 `title` 아래에 추가로 설명을 제공하는 영역이에요. 좀 더 자세한 정보를 제공할 때 사용해요.
+     */
+    description?: ReactNode;
+    /**
+     * `Result` 컴포넌트의 `description` 아래에 표시할 버튼이에요. `Result.Button` 컴포넌트를 사용해서 다시 시도하기, 홈으로 돌아가기 등과 같은 액션을 추가할 수 있어요.
+     */
+    button?: ReactNode;
+    /**
+     * `Result` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ *
+ * @example
+ * <Result
+ *   figure={<Icon name="icon-info-circle" />}
+ *   title={`다시 접속해주세요`}
+ *   description={`페이지를 불러올 수 없습니다 \n다시 시도해주세요`}
+ *   button={<Button size="medium">재시도</Button>}
+ * />
+ */
+declare function Result({ figure, title, description, button, style }: ResultProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Result {
+    var Button: typeof ResultButton;
+}
+export default Result;

package/dist/cjs/components/result/Result.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),react_native_1=require("react-native"),ResultButton_1=require("./ResultButton");function Result({figure:t,title:r,description:i,button:e,style:o}){const n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.container,o],children:[t!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.figure,children:t}):null,(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t5",color:n.grey800,fontWeight:"medium",style:styles.title,children:r}),(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",color:n.grey600,fontWeight:"medium",style:styles.description,children:i}),e!=null?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.buttonContainer,children:e}):null]})}Result.Button=ResultButton_1.ResultButton,exports.default=Result;const styles=react_native_1.StyleSheet.create({container:{flex:1,justifyContent:"center",alignItems:"center"},figure:{marginBottom:12},title:{marginBottom:5,textAlign:"center"},description:{textAlign:"center"},buttonContainer:{marginTop:16}});

package/dist/cjs/components/result/ResultButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../button';
+export type ResultButtonProps = ButtonProps;
+export declare function ResultButton({ children, size, ...restProps }: ResultButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/result/ResultButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ResultButton=ResultButton;const jsx_runtime_1=require("react/jsx-runtime"),button_1=require("../button");function ResultButton({children:t,size:e="medium",...u}){return(0,jsx_runtime_1.jsx)(button_1.Button,{...u,size:e,children:t})}

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

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

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

package/dist/cjs/components/search-field/SearchField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, TextInput, ViewStyle } from 'react-native';
+declare const SearchField: React.ForwardRefExoticComponent<{
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+    hasClearButton?: boolean;
+} & AccessibilityProps & Pick<import("react-native").TextInputProps, "defaultValue" | "value" | "onChange" | "maxLength" | "autoFocus" | "editable" | "keyboardType" | "placeholder"> & React.RefAttributes<TextInput>>;
+export default SearchField;

package/dist/cjs/components/search-field/SearchField.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),text_field_1=require("../text-field"),react_1=__importStar(require("react")),SearchField=(0,react_1.forwardRef)(function({placeholder:e,style:n,hasClearButton:t=!1,defaultValue:r,value:a,onChange:u,keyboardType:f,maxLength:d,autoFocus:_,editable:p,...x},o){let l=null;const[v,h]=react_1.default.useState(r||a),s=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(text_field_1.OldTextField,{ref:c=>{l=c,typeof o=="function"&&o(c)},style:n,defaultValue:r,value:a,onChange:c=>{u?.(c),h(c.nativeEvent.text)},keyboardType:f,maxLength:d,autoFocus:_,editable:p,placeholder:e,size:"classic",inputAccessoryViewID:"",leftItem:(0,jsx_runtime_1.jsx)(text_field_1.OldTextFieldItem.Icon,{name:"icon-search-mono",size:18,color:s.grey600},0),rightItem:t&&(v??"").length>0?(0,jsx_runtime_1.jsx)(text_field_1.OldTextFieldItem.Icon,{name:"icon-x-circle-mono",color:s.grey400,size:18,onPress:()=>{l?.clear(),u?.({nativeEvent:{text:""}})}}):null,...x})});exports.default=SearchField;

package/dist/cjs/components/search-field/index.d.ts

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

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

package/dist/cjs/components/segmented-control/components/Indicator/Indicator.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from 'react-native';
+export type IndicatorProps = ViewProps;
+export declare function Indicator({ style, children }: IndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/segmented-control/components/Indicator/Indicator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Indicator=Indicator;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"),AlignmentContext_1=require("../../contexts/AlignmentContext"),IndicatorContext_1=require("../../contexts/IndicatorContext"),RadioContext_1=require("../../contexts/RadioContext"),useIndicatorBackground_1=require("../../hooks/useIndicatorBackground"),useIndicatorStyle_1=require("./useIndicatorStyle");function Indicator({style:s,children:a}){const{indicatorX:c,setIndicatorX:n,indicatorWidth:u,setIndicatorWidth:r}=(0,react_1.useContext)(IndicatorContext_1.IndicatorContext),{selectedElementLayout:t}=(0,react_1.useContext)(RadioContext_1.RadioContext),{indicatorStyle:d}=(0,useIndicatorStyle_1.useIndicatorStyle)(),{colorPreference:l}=(0,core_1.useColorPreference)(),{alignment:g}=(0,react_1.useContext)(AlignmentContext_1.AlignmentContext),x=(0,useIndicatorBackground_1.useIndicatorBackground)(),i=(0,react_1.useRef)(!0),o=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,h=e.interpolate({inputRange:[0,1],outputRange:[c,t?.x??0]}),f=e.interpolate({inputRange:[0,1],outputRange:[u,t?.width??0]});(0,react_1.useEffect)(()=>{t!=null&&(i.current===!0?(r(t.width),n(t.x),i.current=!1,react_native_1.Animated.spring(o,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick}).start()):(e.setValue(0),react_native_1.Animated.spring(e,{toValue:1,useNativeDriver:!1,...easings_1.spring.quick}).start(()=>{n(t.x),r(t.width)})))},[t,o,e,r,n]);const p={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:x,width:f,opacity:o,transform:[{translateX:h}]};return(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[d,p,{shadowColor:l==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},s],children:a})}

package/dist/cjs/components/segmented-control/components/Indicator/index.d.ts

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

package/dist/cjs/components/segmented-control/components/Indicator/index.js

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

package/dist/cjs/components/segmented-control/components/Indicator/useIndicatorStyle.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+interface IndicatorStyles {
+    indicatorStyle: ViewProps['style'];
+}
+export declare function useIndicatorStyle(): IndicatorStyles;
+export {};

package/dist/cjs/components/segmented-control/components/Indicator/useIndicatorStyle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useIndicatorStyle=useIndicatorStyle;const react_1=require("react"),react_native_1=require("react-native"),SizeContext_1=require("../../contexts/SizeContext"),indicatorStyleBase={position:"absolute",zIndex:0,left:0},indicatorStyleSmall={top:3,bottom:3,borderRadius:8},indicatorStyleLarge={top:4,bottom:4,borderRadius:10};function useIndicatorStyle(){const t=(0,react_1.useContext)(SizeContext_1.SizeContext)==="small"?indicatorStyleSmall:indicatorStyleLarge;return{indicatorStyle:react_native_1.StyleSheet.compose(indicatorStyleBase,t)}}

package/dist/cjs/components/segmented-control/components/Item/Item.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export interface ItemProps {
+    value: string;
+    size?: 'small' | 'large';
+    disabled?: boolean;
+}
+interface Props extends ItemProps {
+    children: ReactNode;
+    style?: ViewProps['style'];
+}
+export declare function Item({ style, children, value, disabled: _disabled, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};