@toss/tds-react-native 1.0.0

package/dist/esm/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/esm/components/post/List/PostOl.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as m}from"react/jsx-runtime";import{StyleSheet as a,View as y}from"react-native";import{useAdaptive as c}from"../../../core";import{Txt as n}from"../../txt";import{POST_OL as f,POST_OL_LI as x}from"../constants";import{PostList as g}from"./PostList";import{usePostList as h}from"./PostListProvider";export function PostOl(t){return e(g,{listType:"ol",...t})}export function PostOlLi({children:t,style:p,color:o,order:l}){const i=c(),{typography:s}=h();return m(y,{style:[r.container,p],children:[e(n,{typography:s,color:o??i.grey700,style:r.prefix,fontWeight:"medium",children:`${l}.`}),e(n,{typography:s,color:o??i.grey700,style:r.content,children:t})]})}const r=a.create({container:{flexDirection:"row",alignItems:"flex-start"},prefix:{width:24,textAlign:"right",marginRight:8},content:{flex:1}});PostOl.displayName=f,PostOlLi.displayName=x;

package/dist/esm/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/esm/components/post/List/PostUl.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as p}from"react/jsx-runtime";import{StyleSheet as a,View as m}from"react-native";import{useAdaptive as c}from"../../../core";import{Txt as s}from"../../txt";import{POST_UL as y,POST_UL_LI as f}from"../constants";import{PostList as x}from"./PostList";import{usePostList as g}from"./PostListProvider";export function PostUl(t){return o(x,{listType:"ul",...t})}export function PostUlLi({color:t,style:n,children:l}){const e=c(),{typography:i}=g();return p(m,{style:[r.container,n],children:[o(s,{typography:i,color:e.grey700,style:r.prefix,fontWeight:"bold",children:"\u2022"}),o(s,{typography:i,color:t??e.grey700,style:r.content,children:l})]})}const r=a.create({container:{flexDirection:"row",alignItems:"flex-start"},prefix:{width:16,textAlign:"right",marginRight:8},content:{flex:1}});PostUl.displayName=y,PostUlLi.displayName=f;

package/dist/esm/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/esm/components/post/Paragraph.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d}from"react/jsx-runtime";import{useAdaptive as g}from"../../core";import{Txt as n}from"../txt";export function PostParagraph({typography:t="t5",children:r,color:o,paddingBottom:p=24,style:a,...i}){const e=g();return d(n,{typography:t,fontWeight:"regular",color:o??e.grey700,style:[{paddingTop:0,paddingRight:24,paddingLeft:24,paddingBottom:p},a],...i,children:r})}

package/dist/esm/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/esm/components/post/Post.js

@@ -0,0 +1 @@
+"use strict";import{PostH1 as o,PostH2 as r,PostH3 as t,PostH4 as m}from"./Header";import{PostHr as P}from"./Hr";import{PostLi as s}from"./List/PostLi";import{PostOl as H}from"./List/PostOl";import{PostUl as p}from"./List/PostUl";import{PostParagraph as i}from"./Paragraph";export const Post={H1:o,H2:r,H3:t,H4:m,Paragraph:i,Ol:H,Li:s,Ul:p,Hr:P};

package/dist/esm/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/esm/components/post/constants.js

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

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

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

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

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

package/dist/esm/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/esm/components/progress-bar/ProgressBar.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import c,{Rect as s}from"@granite-js/native/react-native-svg";import{colors as f}from"@toss-design-system/colors";import{useAdaptive as g}from"../../core";import{useEffect as p,useRef as w}from"react";import{Animated as i,Easing as v,View as A}from"react-native";function R({progress:r,size:t,color:a=f.blue500,withAnimation:m,style:d,...u}){const l=g(),n=w(new i.Value(r)).current,h=n.interpolate({inputRange:[0,100],outputRange:["0%","100%"]});return p(()=>{i.timing(n,{toValue:r,duration:m?500:0,easing:v.ease,useNativeDriver:!0}).start()},[r]),o(A,{style:[{height:e[t],backgroundColor:l.grey100,borderRadius:e[t],overflow:"hidden"},d],role:"progressbar",...u,children:o(c,{width:"100%",height:e[t],children:o(b,{fill:a,width:h,height:e[t],rx:e[t]/2,ry:e[t]/2})})})}const e={light:2,normal:5,bold:8},b=i.createAnimatedComponent(s);export default R;

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

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

package/dist/esm/components/progress-bar/index.js

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

package/dist/esm/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/esm/components/radio/Radio.js

@@ -0,0 +1 @@
+"use strict";import{jsx as g,jsxs as O}from"react/jsx-runtime";import{colors as C}from"@toss-design-system/colors";import{useAdaptive as T,useColorPreference as V}from"../../core";import l,{useCallback as k,useEffect as P,useRef as v,useState as z}from"react";import{useController as E}from"react-hook-form";import{Animated as d,StyleSheet as y}from"react-native";import N from"./RadioOption";const _={shadowColor:"#000",shadowOffset:{width:1,height:1},shadowOpacity:.09,shadowRadius:1,elevation:1},j={stiffness:150,damping:20,mass:1,overshootClamping:!1,restSpeedThreshold:.001,restDisplacementThreshold:.001},A=1,m=({value:o,children:r,disabled:c=!1,onChange:n,horizontalMargin:s=0})=>{const[t,a]=z(0),u=l.Children.map(r,e=>e.props),S=u.length,p=t/S,f=u.findIndex(e=>e.value===o),h=v(!0),i=v(new d.Value(0)).current,b=l.useCallback(e=>{n(e)},[n]),w=k(e=>{d.spring(i,{toValue:e,useNativeDriver:!0,...j}).start()},[i]);P(()=>{if(t===0)return;const e=f*(p*A);h.current===!0?(i.setValue(e),h.current=!1):w(e)},[f,p]);const x=T(),{colorPreference:I}=V();return O(d.View,{style:[R.defaultSegmentedControlWrapper,{backgroundColor:x.grey100,marginHorizontal:s}],onLayout:e=>{a(e.nativeEvent.layout.width)},accessibilityRole:"radiogroup",children:[g(d.View,{style:[R.movingSegmentStyle,_,y.absoluteFill,{backgroundColor:I==="light"?C.inverseGrey900:C.inverseGrey300,width:t/u.length-8},{transform:[{translateX:i}]}]}),l.Children.map(r,e=>l.cloneElement(e,{checked:e.props.value===o,disabled:e.props.disabled??c,onPress:b}))]})},R=y.create({defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:24,height:48},movingSegmentStyle:{top:0,marginVertical:4,marginHorizontal:4,borderRadius:20}});export function RadioInput({controlerProps:o,control:r,name:c,children:n,...s}){const{field:t}=E({control:r,name:c,...o});return g(m,{horizontalMargin:s.horizontalMargin,value:t.value,onChange:a=>{t.onChange(a),s.onChange?.(a)},children:n})}m.Option=N;export{m as Radio};

package/dist/esm/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/esm/components/radio/RadioOption.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as f}from"../../core";import{Txt as n}from"../txt";import{PreventFontScaling as a}from"../../extensions/prevent-font-scaling";import{noop as p}from"@toss/utils";import{Pressable as y,View as g}from"react-native";function u({children:o,value:l,checked:r=!1,disabled:e,onPress:s}){const i=f(),c={typography:"t5",fontWeight:"semiBold",color:e?i.grey400:i.grey800},m={typography:"t5",fontWeight:"medium",color:e?i.grey400:i.grey800};return t(y,{onPress:e?p:()=>s?.(l),style:{flex:1,elevation:9},disabled:e,accessibilityRole:"radio",accessibilityState:{selected:r,disabled:e},children:t(g,{style:{flexDirection:"row",alignItems:"center",justifyContent:"center"},children:t(a,{limit:135,children:r?t(n,{...c,numberOfLines:1,children:o}):t(n,{...m,numberOfLines:1,children:o})})})})}export default u;

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

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

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

@@ -0,0 +1 @@
+"use strict";export{Radio,RadioInput}from"./Radio";

package/dist/esm/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/esm/components/rating/EditableRating.js

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

package/dist/esm/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/esm/components/rating/Rating.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{forwardRef as n}from"react";import{EditableRating as a}from"./EditableRating";import{ReadOnlyRating as i}from"./ReadOnlyRating";export const Rating=n((r,t)=>{if(r.readonly){const{readonly:f,...e}=r;return o(i,{ref:t,...e})}return o(a,{ref:t,...r})});

package/dist/esm/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/esm/components/rating/ReadOnlyRating.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as u}from"react/jsx-runtime";import{ClipPath as R,Defs as v,G as B,Rect as D,Svg as P}from"@granite-js/native/react-native-svg";import{useAdaptive as j}from"../../core";import{SvgIcon as w}from"../icon/private";import{FontWeight as f,Txt as S}from"../txt";import{forwardRef as x}from"react";import{View as d}from"react-native";const O=x(function({name:r,size:o,progress:l,color:i,...t},n){return u(P,{ref:n,width:o,height:o,...t,children:[e(v,{children:e(R,{id:"clip",children:e(D,{width:o*l,height:o})})}),e(B,{clipPath:"url(#clip)",children:e(w,{name:r,size:o,color:i})})]})}),A=x(function({name:r,size:o,progress:l,idleColor:i,activeColor:t,style:n,...s},c){return u(d,{ref:c,style:[{position:"relative"},n],...s,children:[e(w,{name:r,size:o,color:i}),e(O,{name:r,size:o,progress:l,color:t,style:{position:"absolute",top:0,left:0}})]})});export const ProgressIcons=x(function({name:r,size:o,gap:l,max:i,value:t,style:n,idleColor:s,activeColor:c,...g},p){return e(d,{ref:p,style:[{flexDirection:"row",alignItems:"center",gap:l},n],...g,children:Array.from({length:i},(m,h)=>{const a=Math.min(1,Math.max(0,t-h)),y=a<.25?0:a<.75?.5:1;return e(A,{name:r,size:o,progress:y,idleColor:s,activeColor:c},h)})})});const G={tiny:0,small:0,medium:0,large:0,big:0},M={tiny:16,small:20,medium:24,large:32,big:40},W={tiny:4,small:4,medium:4,large:4,big:2},I={tiny:{typography:"t7",fontWeight:f.Medium},small:{typography:"t5",fontWeight:f.Semibold},medium:{typography:"t4",fontWeight:f.Semibold},large:{typography:"t3",fontWeight:f.Bold},big:{typography:"st5",fontWeight:f.Bold}};export const ReadOnlyRating=x(function({variant:r,size:o="large",gap:l=G[o],max:i=5,value:t,style:n,activeColor:s,...c},g){const p=M[o],m=j(),h=m.greyOpacity200,a=s??m.yellow400,y="icon-star-mono",b={accessible:!0,accessibilityRole:"text",accessibilityLabel:`\uBCC4\uC810\uD3C9\uAC00 ${i}\uC810 \uB9CC\uC810 \uC911 ${t}\uC810`};if(r==="full")return u(d,{ref:g,style:[{flexDirection:"row",alignItems:"center",gap:W[o]},n],...b,...c,children:[e(ProgressIcons,{idleColor:h,activeColor:a,name:y,size:p,gap:l,max:i,value:t}),e(S,{typography:I[o].typography,fontWeight:I[o].fontWeight,color:m.grey800,children:t})]});if(r==="compact")return u(d,{ref:g,style:[{flexDirection:"row",alignItems:"center",gap:W[o]},n],...b,...c,children:[e(w,{name:y,size:p,color:a}),e(S,{typography:I[o].typography,fontWeight:I[o].fontWeight,color:m.grey800,children:t})]});if(r==="iconOnly")return e(d,{ref:g,style:[{flexDirection:"row",alignItems:"center"},n],...b,...c,children:e(ProgressIcons,{idleColor:h,activeColor:a,name:y,size:p,gap:l,max:i,value:t})});throw new Error("Unhandled variant")});

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

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

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

@@ -0,0 +1 @@
+"use strict";export{Rating}from"./Rating";

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

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

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

@@ -0,0 +1 @@
+"use strict";import{useState as o,useEffect as d}from"react";import{AccessibilityInfo as n}from"react-native";export function useScreenReaderMode(){const[t,r]=o(!1);return d(()=>{const s=n.addEventListener("screenReaderChanged",e=>{r(e)});return n.isScreenReaderEnabled().then(e=>{r(e)}),()=>{s.remove()}},[]),t}

package/dist/esm/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/esm/components/result/Result.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as u}from"react/jsx-runtime";import{useAdaptive as p}from"../../core";import{Txt as l}from"../txt";import{StyleSheet as y,View as n}from"react-native";import{ResultButton as g}from"./ResultButton";function s({figure:r,title:m,description:c,button:o,style:a}){const i=p();return u(n,{style:[t.container,a],children:[r!=null?e(n,{style:t.figure,children:r}):null,e(l,{typography:"t5",color:i.grey800,fontWeight:"medium",style:t.title,children:m}),e(l,{typography:"t6",color:i.grey600,fontWeight:"medium",style:t.description,children:c}),o!=null?e(n,{style:t.buttonContainer,children:o}):null]})}s.Button=g;export default s;const t=y.create({container:{flex:1,justifyContent:"center",alignItems:"center"},figure:{marginBottom:12},title:{marginBottom:5,textAlign:"center"},description:{textAlign:"center"},buttonContainer:{marginTop:16}});

package/dist/esm/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/esm/components/result/ResultButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Button as i}from"../button";export function ResultButton({children:t,size:o="medium",...r}){return e(i,{...r,size:o,children:t})}

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

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

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

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

package/dist/esm/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/esm/components/search-field/SearchField.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as I}from"../../core";import{OldTextField as g,OldTextFieldItem as l}from"../text-field";import F,{forwardRef as T}from"react";const z=T(function({placeholder:s,style:m,hasClearButton:d=!1,defaultValue:o,value:r,onChange:i,keyboardType:f,maxLength:x,autoFocus:p,editable:u,...h},n){let a=null;const[y,v]=F.useState(o||r),c=I();return t(g,{ref:e=>{a=e,typeof n=="function"&&n(e)},style:m,defaultValue:o,value:r,onChange:e=>{i?.(e),v(e.nativeEvent.text)},keyboardType:f,maxLength:x,autoFocus:p,editable:u,placeholder:s,size:"classic",inputAccessoryViewID:"",leftItem:t(l.Icon,{name:"icon-search-mono",size:18,color:c.grey600},0),rightItem:d&&(y??"").length>0?t(l.Icon,{name:"icon-x-circle-mono",color:c.grey400,size:18,onPress:()=>{a?.clear(),i?.({nativeEvent:{text:""}})}}):null,...h})});export default z;

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

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

package/dist/esm/components/search-field/index.js

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

package/dist/esm/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/esm/components/segmented-control/components/Indicator/Indicator.js

@@ -0,0 +1 @@
+"use strict";import{jsx as y}from"react/jsx-runtime";import{spring as d}from"@toss-design-system/easings";import{useContext as a,useEffect as C,useRef as s}from"react";import{Animated as r}from"react-native";import{useColorPreference as R}from"../../../../core";import{AlignmentContext as P}from"../../contexts/AlignmentContext";import{IndicatorContext as V}from"../../contexts/IndicatorContext";import{RadioContext as X}from"../../contexts/RadioContext";import{useIndicatorBackground as k}from"../../hooks/useIndicatorBackground";import{useIndicatorStyle as W}from"./useIndicatorStyle";export function Indicator({style:u,children:l}){const{indicatorX:f,setIndicatorX:o,indicatorWidth:m,setIndicatorWidth:i}=a(V),{selectedElementLayout:t}=a(X),{indicatorStyle:p}=W(),{colorPreference:h}=R(),{alignment:g}=a(P),w=k(),c=s(!0),n=s(new r.Value(0)).current,e=s(new r.Value(0)).current,x=e.interpolate({inputRange:[0,1],outputRange:[f,t?.x??0]}),I=e.interpolate({inputRange:[0,1],outputRange:[m,t?.width??0]});C(()=>{t!=null&&(c.current===!0?(i(t.width),o(t.x),c.current=!1,r.spring(n,{toValue:1,useNativeDriver:!1,...d.quick}).start()):(e.setValue(0),r.spring(e,{toValue:1,useNativeDriver:!1,...d.quick}).start(()=>{o(t.x),i(t.width)})))},[t,n,e,i,o]);const v={zIndex:0,top:g==="fluid"?0:void 0,height:t?.height,backgroundColor:w,width:I,opacity:n,transform:[{translateX:x}]};return y(r.View,{style:[p,v,{shadowColor:h==="light"?"rgba(0, 0, 0, 0.09)":"rgba(1, 1, 1, 0.09)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:2},u],children:l})}

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

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

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

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

package/dist/esm/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/esm/components/segmented-control/components/Indicator/useIndicatorStyle.js

@@ -0,0 +1 @@
+"use strict";import{useContext as o}from"react";import{StyleSheet as e}from"react-native";import{SizeContext as i}from"../../contexts/SizeContext";const r={position:"absolute",zIndex:0,left:0},n={top:3,bottom:3,borderRadius:8},s={top:4,bottom:4,borderRadius:10};export function useIndicatorStyle(){const t=o(i)==="small"?n:s;return{indicatorStyle:e.compose(r,t)}}

package/dist/esm/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 {};

package/dist/esm/components/segmented-control/components/Item/Item.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useCallback as y,useContext as u,useEffect as C,useState as E}from"react";import{View as T}from"react-native";import{useAdaptive as V}from"../../../../core";import{PreventFontScaling as j}from"../../../../extensions/prevent-font-scaling";import{PressableEffect as A}from"../../../../interactions/pressable-effect";import{Root as I,Text as R}from"../../../paragraph";import{AlignmentContext as w}from"../../contexts/AlignmentContext";import{RadioContext as F}from"../../contexts/RadioContext";import{useItemStyle as k}from"./useItemStyle";export function Item({style:f,children:p,value:i,disabled:g=!1,size:b,...h}){const{ensureFluidAlignment:x}=u(w),[s,S]=E(null),{setSelectedValue:c,selectedValue:L,setSelectedElementLayout:n,disabled:P}=u(F),t=P||g,l=k({size:b,disabled:t}),a=V(),e=L===i,v=y(()=>{c(i)},[i,c]),m=y(()=>{s!=null&&n(s)},[s,n]);return C(()=>{e&&m()},[e,m]),o(A,{onPress:t||e?void 0:v,onLayout:r=>{const d=r.nativeEvent.layout;S(d),e&&n(d)},style:[l.containerStyle,f],accessibilityRole:"radio",accessibilityValue:{text:i},accessibilityState:{selected:e,disabled:t},disabled:t,...h,children:o(T,{style:{justifyContent:"center",alignItems:"center"},children:o(j,{limit:140,children:o(I,{typography:l.labelTypography,style:l.labelStyle,onTextLayout:r=>{x(r.nativeEvent.lines.length>1)},children:o(R,{color:t?a.grey400:e?a.grey800:a.grey600,fontWeight:e?"semiBold":"medium",children:p})})})})})}

package/dist/esm/components/segmented-control/components/Item/index.d.ts

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

package/dist/esm/components/segmented-control/components/Item/index.js

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

package/dist/esm/components/segmented-control/components/Item/useItemStyle.d.ts

@@ -0,0 +1,9 @@
+import { ViewProps } from 'react-native';
+import { ItemProps } from './Item';
+interface ItemStyles {
+    containerStyle: ViewProps['style'];
+    labelStyle: ViewProps['style'];
+    labelTypography: 't6' | 't5';
+}
+export declare function useItemStyle(props: Omit<ItemProps, 'value'>): ItemStyles;
+export {};

package/dist/esm/components/segmented-control/components/Item/useItemStyle.js

@@ -0,0 +1 @@
+"use strict";import{useContext as n}from"react";import{StyleSheet as o}from"react-native";import{AlignmentContext as r}from"../../contexts/AlignmentContext";import{SizeContext as s}from"../../contexts/SizeContext";const c={zIndex:1,overflow:"hidden",borderRadius:12},d={flex:1},m={flexGrow:0,flexShrink:0,flexBasis:"auto"},S={display:"flex",alignItems:"center",justifyContent:"center"},p={paddingVertical:5,paddingHorizontal:14},y={paddingVertical:7,paddingHorizontal:14};export function useItemStyle(i){const a=n(s),{alignment:e}=n(r),t=i.size??a,l=t==="small"?p:y;return{containerStyle:o.compose(c,e==="fixed"?d:m),labelStyle:e==="fixed"?o.compose(S,l):l,labelTypography:t==="small"?"t6":"t5"}}