@toss/tds-react-native 1.0.0

package/dist/esm/components/list-header/ListHeaderContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const ListHeaderContext=t({setIsMultilineTitle:()=>{}});

package/dist/esm/components/list-header/ListHeaderDescriptionParagraph.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ListHeaderDescriptionParagraphProps {
+    /**
+     * `ListHeader.Description` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+}
+export declare function ListHeaderDescriptionParagraph({ ...props }: ListHeaderDescriptionParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-header/ListHeaderDescriptionParagraph.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{useAdaptive as e}from"../../core";import*as t from"../paragraph";export function ListHeaderDescriptionParagraph({...o}){const a=e();return r(t.Root,{typography:"t7",children:r(t.Text,{fontWeight:"regular",color:a.grey600,...o})})}

package/dist/esm/components/list-header/ListHeaderRight.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface ListHeaderRightTextProps {
+    /**
+     * `ListHeader.RightText` 컴포넌트의 텍스트 스타일을 설정해요.
+     */
+    typography: 't6' | 't7';
+    /**
+     * `ListHeader.RightText` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+    /**
+     * `ListHeader.RightText` 컴포넌트의 텍스트 색상을 설정해요.
+     *
+     * @default adaptive.grey700
+     */
+    color?: string;
+    /**
+     * `ListHeader.RightText` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<TextStyle>;
+}
+export declare function ListHeaderRightText({ typography, color, style, ...textProps }: ListHeaderRightTextProps): import("react/jsx-runtime").JSX.Element;
+export interface ListHeaderRightArrowProps {
+    /**
+     * `ListHeader.RightArrow` 컴포넌트의 텍스트 스타일을 설정해요.
+     */
+    typography: 't6' | 't7';
+    /**
+     * `ListHeader.RightArrow` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+    /**
+     * `ListHeader.RightArrow` 컴포넌트의 텍스트 색상을 설정해요.
+     *
+     * @default adaptive.grey700
+     */
+    color?: string;
+    /**
+     * `ListHeader.RightArrow` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * `ListHeader.RightArrow` 컴포넌트를 눌렀을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+}
+export declare function ListHeaderRightArrow(props: ListHeaderRightArrowProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-header/ListHeaderRight.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as h}from"react/jsx-runtime";import{Pressable as c,StyleSheet as g,View as m}from"react-native";import{useAdaptive as a}from"../../core";import{Icon as y}from"../icon";import*as o from"../paragraph";export function ListHeaderRightText({typography:r,color:t,style:n,...s}){const l=a();return e(o.Root,{style:[i.base,n],typography:r,children:e(o.Text,{fontWeight:"regular",color:t??l.grey700,...s})})}export function ListHeaderRightArrow(r){const t=a(),n=r.onPress!=null?c:m;return h(n,{style:[i.base,i.arrow,r.style],onPress:r.onPress,hitSlop:{right:16},children:[f(r)?e(o.Root,{typography:r.typography,style:i.arrowText,children:e(o.Text,{color:r?.color??t.grey700,fontWeight:"regular",children:r.children})}):null,e(y,{color:t.grey400,name:"icon-arrow-right-mono",size:24})]})}const i=g.create({base:{flexDirection:"row",alignItems:"center"},arrow:{marginRight:-8},arrowText:{flexShrink:1,marginRight:4}});function f(r){return!!Object.hasOwn(r??{},"children")}

package/dist/esm/components/list-header/ListHeaderRoot.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { ListHeaderDescriptionParagraph } from './ListHeaderDescriptionParagraph';
+import { ListHeaderRightArrow, ListHeaderRightText } from './ListHeaderRight';
+import { ListHeaderTitleParagraph } from './ListHeaderTitleParagraph';
+import { ListHeaderTitleSelector } from './ListHeaderTitleSelector';
+import { ListHeaderTitleTextButton } from './ListHeaderTitleTextButton';
+export interface ListHeaderRootProps {
+    /**
+     * `ListHeader`의 상단에 표시될 보조 설명 영역이에요.
+     * `ListHeader.Description` 컴포넌트를 사용해서 보조 설명을 추가할 수 있어요.
+     *
+     * @example
+     * ```tsx
+     * <ListHeader.Description>보조 설명</ListHeader.Description>
+     * ```
+     */
+    upper?: ReactNode;
+    /**
+     * `ListHeader`의 제목을 설정해요.
+     * 제목 영역에는 주로 `ListHeader.TitleParagraph`, `ListHeader.TitleSelector`, `ListHeader.TitleTextButton` 컴포넌트가 사용돼요.
+     *
+     * @example
+     * ```tsx
+     * <ListHeader.TitleParagraph typography="t4">
+     *   타이틀
+     * </ListHeader.TitleParagraph>
+     * ```
+     */
+    title: ReactNode;
+    /**
+     * 제목 영역의 스타일을 설정해요.
+     */
+    titleViewStyle?: StyleProp<ViewStyle>;
+    /**
+     * `ListHeader`의 오른쪽에 표시될 요소를 설정해요.
+     * 오른쪽 영역에는 주로 `ListHeader.RightArrow` 또는 `ListHeader.RightText` 컴포넌트가 사용돼요.
+     *
+     * @example
+     * ```tsx
+     * <ListHeader.RightArrow typography="t6" color={adaptive.grey600}>
+     *   오른쪽
+     * </ListHeader.RightArrow>
+     * ```
+     */
+    right?: ReactNode;
+    /**
+     * 오른쪽 영역의 스타일을 설정해요.
+     */
+    rightViewStyle?: StyleProp<ViewStyle>;
+    /**
+     * `ListHeader`의 하단에 표시될 보조 설명 영역이에요.
+     * `ListHeader.Description` 컴포넌트를 사용해서 보조 설명을 추가할 수 있어요.
+     *
+     * @example
+     * ```tsx
+     * <ListHeader.Description>보조 설명</ListHeader.Description>
+     * ```
+     */
+    lower?: ReactNode;
+    /**
+     * `ListHeader` 컴포넌트를 눌렀을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+}
+/**
+ *
+ * @example
+ * <ListHeader
+ *   upper={
+ *     <ListHeader.Description>보조설명</ListHeader.Description>
+ *   }
+ *   title={
+ *     <ListHeader.TitleParagraph typography="t4">
+ *       타이틀
+ *     </ListHeader.TitleParagraph>
+ *   }
+ *   right={
+ *     <ListHeader.RightArrow typography="t6" color={adaptive.grey600}>
+ *       오른쪽
+ *     </ListHeader.RightArrow>
+ *   }
+ * />
+ */
+declare const _ListHeaderRoot: ({ upper, title, right, lower, onPress, rightViewStyle, titleViewStyle, }: ListHeaderRootProps) => import("react/jsx-runtime").JSX.Element;
+type ListHeaderRootType = typeof _ListHeaderRoot & {
+    Root: typeof _ListHeaderRoot;
+    TitleParagraph: typeof ListHeaderTitleParagraph;
+    TitleSelector: typeof ListHeaderTitleSelector;
+    TitleTextButton: typeof ListHeaderTitleTextButton;
+    DescriptionParagraph: typeof ListHeaderDescriptionParagraph;
+    RightText: typeof ListHeaderRightText;
+    RightArrow: typeof ListHeaderRightArrow;
+};
+declare const ListHeaderRoot: ListHeaderRootType;
+export { ListHeaderRoot };

package/dist/esm/components/list-header/ListHeaderRoot.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as s}from"react/jsx-runtime";import{useState as h}from"react";import{Pressable as x,StyleSheet as T,View as t}from"react-native";import{ListHeaderContext as u}from"./ListHeaderContext";import{ListHeaderDescriptionParagraph as H}from"./ListHeaderDescriptionParagraph";import{ListHeaderRightArrow as y,ListHeaderRightText as L}from"./ListHeaderRight";import{ListHeaderTitleParagraph as R}from"./ListHeaderTitleParagraph";import{ListHeaderTitleSelector as w}from"./ListHeaderTitleSelector";import{ListHeaderTitleTextButton as P}from"./ListHeaderTitleTextButton";const j=({upper:l,title:m,right:o,lower:n,onPress:a,rightViewStyle:c,titleViewStyle:d})=>{const[p,f]=h(!1),g=a!=null?x:t;return i(u.Provider,{value:{setIsMultilineTitle:f},children:s(g,{style:[r.container],onPress:a,children:[l&&i(t,{style:r.upper,children:l}),s(t,{style:[r.body,{alignItems:p?"flex-end":"center"}],children:[i(t,{style:[r.title,o==null?{flex:0}:void 0,d],children:m}),o&&i(t,{style:[r.right,c],children:o})]}),n&&i(t,{style:r.lower,children:n})]})})},r=T.create({container:{marginTop:24,marginBottom:8},upper:{marginBottom:4,marginHorizontal:24},body:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginHorizontal:24},title:{flex:2},right:{flex:1,alignItems:"flex-end"},lower:{marginTop:4,marginHorizontal:24}}),e=j;e.Root=e,e.TitleParagraph=R,e.TitleSelector=w,e.TitleTextButton=P,e.DescriptionParagraph=H,e.RightText=L,e.RightArrow=y;export{e as ListHeaderRoot};

package/dist/esm/components/list-header/ListHeaderTitleParagraph.d.ts

@@ -0,0 +1,45 @@
+import type { ParagraphTextProps } from '../paragraph';
+import { ReactNode } from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface ListHeaderTitleParagraphProps {
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 텍스트 크기를 설정해요.
+     */
+    size?: 20 | 17 | 13;
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 텍스트 스타일을 설정해요.
+     *
+     * @default 't5'
+     */
+    typography?: 't4' | 't5' | 't7';
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 텍스트 굵기를 설정해요.
+     *
+     * @default 'regular'
+     */
+    fontWeight?: ParagraphTextProps['fontWeight'];
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 텍스트 라인 수를 제한할 때 사용해요.
+     */
+    numberOfLines?: number;
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 텍스트 색상을 설정해요.
+     *
+     * @default adaptive.grey800
+     */
+    color?: string;
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+    /**
+     * `ListHeader.TitleParagraph` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<TextStyle>;
+}
+/**
+ *
+ * @example
+ * <ListHeader.TitleParagraph typography="t4" >타이틀</ListHeader.TitleParagraph>
+ */
+export declare function ListHeaderTitleParagraph({ size, typography: _typography, color, fontWeight, numberOfLines, children, style, }: ListHeaderTitleParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-header/ListHeaderTitleParagraph.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useAdaptive as h}from"../../core";import*as n from"../paragraph";import{useCallback as x,useContext as y,useMemo as g}from"react";import{ListHeaderContext as d}from"./ListHeaderContext";export function ListHeaderTitleParagraph({size:t,typography:e,color:a,fontWeight:s,numberOfLines:i,children:u,style:l}){const{setIsMultilineTitle:r}=y(d),p=h(),c=g(()=>{if(t!=null)switch(t){case 20:return"t4";case 17:return"t5";case 13:return"t7"}return e??"t5"},[t,e]),m=x(f=>{r(f.nativeEvent.lines.length>1)},[r]);return o(n.Root,{typography:c,style:l,onTextLayout:m,numberOfLines:i,children:o(n.Text,{color:a??p.grey800,fontWeight:s,children:u})})}

package/dist/esm/components/list-header/ListHeaderTitleSelector.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, TextStyle, View } from 'react-native';
+import type { ParagraphTextProps } from '../paragraph';
+export interface ListHeaderTitleSelectorProps {
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트의 텍스트 스타일을 설정해요.
+     */
+    typography: 't4' | 't5' | 't7';
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트의 텍스트 굵기를 설정해요.
+     *
+     * @default 'regular'
+     */
+    fontWeight: ParagraphTextProps['fontWeight'];
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트의 텍스트 라인 수를 제한할 때 사용해요.
+     */
+    numberOfLines?: number;
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트가 눌렸을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트의 텍스트 색상을 설정해요.
+     *
+     * @default adaptive.grey900
+     */
+    color?: string;
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+    /**
+     * `ListHeader.TitleSelector` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<TextStyle>;
+}
+export declare const ListHeaderTitleSelector: import("react").ForwardRefExoticComponent<ListHeaderTitleSelectorProps & import("react").RefAttributes<View>>;

package/dist/esm/components/list-header/ListHeaderTitleSelector.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{forwardRef as l}from"react";import{Pressable as p}from"react-native";import{useAdaptive as d}from"../../core";import*as e from"../paragraph";export const ListHeaderTitleSelector=l(function({color:t,fontWeight:i,children:n,typography:a,style:s,numberOfLines:m,onPress:c},f){const o=d();return r(p,{onPress:c,style:s,ref:f,children:r(e.Root,{typography:a,numberOfLines:m,afterText:r(e.Icon,{name:"icon-arrow-down-mono",color:o.grey600}),children:r(e.Text,{color:t??o.grey800,fontWeight:i,children:n})})})});

package/dist/esm/components/list-header/ListHeaderTitleTextButton.d.ts

@@ -0,0 +1,8 @@
+import { TextButtonProps } from '../text-button';
+export interface ListHeaderTitleTextButtonProps extends TextButtonProps {
+    /**
+     * `ListHeader.TitleTextButton` 컴포넌트의 텍스트 스타일을 설정해요.
+     */
+    typography: 't4' | 't5' | 't7';
+}
+export declare function ListHeaderTitleTextButton({ ...props }: ListHeaderTitleTextButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-header/ListHeaderTitleTextButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{TextButton as e}from"../text-button";export function ListHeaderTitleTextButton({...t}){return r(e,{variant:"underline",...t})}

package/dist/esm/components/list-header/index.d.ts

@@ -0,0 +1 @@
+export { ListHeaderRoot as ListHeader } from './ListHeaderRoot';

package/dist/esm/components/list-header/index.js

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

package/dist/esm/components/list-row/ListRow.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AccessibilityState, StyleProp, TouchableHighlight, ViewStyle } from 'react-native';
+export interface ListRowRef {
+    blink: (duration?: number) => void;
+    shine: (playCount?: number) => void;
+}
+export interface ListRowProps {
+    left?: ReactNode;
+    contents?: ReactNode;
+    right?: ReactNode;
+    withArrow?: boolean;
+    leftAlignment?: 'top' | 'center';
+    rightAlignment?: 'top' | 'center';
+    /** ListRow 의 paddingHorizontal 을 제거하고 싶은경우 0을 줍니다. */
+    horizontalPadding?: 0;
+    verticalPadding?: 'extraSmall' | 8 | 'small' | 16 | 'medium' | 24 | 'large' | 32;
+    containerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    onPress?: ComponentProps<typeof TouchableHighlight>['onPress'];
+    preferReducedMotion?: boolean;
+    disabledStyle?: 'type1' | 'type2';
+    disabled?: boolean;
+    accessibilityState?: AccessibilityState;
+}
+export declare const ListRow: import("react").ForwardRefExoticComponent<ListRowProps & import("react").RefAttributes<ListRowRef>>;

package/dist/esm/components/list-row/ListRow.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as l,Fragment as h}from"react/jsx-runtime";import{forwardRef as O,useCallback as z,useEffect as U,useImperativeHandle as q,useMemo as y,useRef as G,useState as J}from"react";import{Platform as K,StyleSheet as N,TouchableHighlight as Q,useWindowDimensions as X,View as f}from"react-native";import{useAdaptive as Y,useColorPreference as Z,useTypographyTheme as $}from"../../core";import{Animated as ee}from"../../interactions/animated";import{PressableEffect as C}from"../../interactions/pressable-effect";import{ListRowDisabled as D}from"./ListRowDisabled";import{ListRowRightArrow as te}from"./ListRowRightArrow";import{BlinkEffect as ne}from"./animation/BlinkEffect";import{ShineEffect as H}from"./animation/ShineEffect";import{sToMs as ie}from"./animation/sToMs";import{useBlinkAnimation as re}from"./animation/useBlinkAnimation";import{useShineAnimation as oe}from"./animation/useShineAnimation";export const ListRow=O(function({left:c,right:i,contents:m,withArrow:p=!1,horizontalPadding:I,verticalPadding:g=24,leftAlignment:w="center",rightAlignment:x="center",onPress:v,containerStyle:A,style:W,preferReducedMotion:B=!1,disabled:n,disabledStyle:d="type1",accessibilityState:S},M){const{colorPreference:E}=Z(),_=Y(),k=se(),L=y(()=>{switch(g){case"extraSmall":case 8:return 8;case"small":case 16:return 16;case"medium":case 24:return 24;case"large":case 32:return 32}},[g]),[R,T]=J({width:0,height:0}),s=re({containerSize:R}),u=oe({containerSize:R}),a=G(null),b=z((t=1.5)=>{s.start(),a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{s.exit(),a.current=null},ie(t))},[s]);U(()=>()=>{a.current&&clearTimeout(a.current)},[]);const F=z((t=1)=>{E==="light"?u.light.start(t):u.dark.start(t)},[E,u]);q(M,()=>({blink:b,shine:F}));const V=y(()=>l(ee.View,{pointerEvents:n?"none":void 0,style:[{paddingVertical:L,position:"relative"},r.container,A,s.container],children:[e(ne,{blinkAnimation:s}),c!=null?e(f,{style:[r.left,w==="top"?{alignSelf:"flex-start"}:void 0],children:c}):void 0,k?l(f,{style:[r.content],children:[m,i!==void 0&&e(f,{style:[r.rightVertical],children:i})]}):l(h,{children:[m!==void 0&&e(f,{style:r.content,children:m}),i!==void 0&&e(f,{style:[r.right,x==="top"?{alignItems:"flex-start"}:void 0],children:i})]}),p&&e(te,{})]}),[n,L,A,s,c,w,k,m,i,x,p]),j=y(()=>l(h,{children:[n&&d==="type1"?e(D.Style1,{}):void 0,n&&d==="type2"?e(D.Style2,{}):void 0]}),[n,d]),P=[W,I===0?{marginHorizontal:-24}:void 0,{overflow:"hidden"}];return B?e(Q,{role:"button",onLayout:t=>{T({width:t.nativeEvent.layout.width,height:t.nativeEvent.layout.height})},accessibilityState:{disabled:n,...S},onPress:n?void 0:v,underlayColor:_.greyOpacity100,style:P,children:l(h,{children:[V,e(H,{shineAnimation:u}),j]})}):l(C,{onLayout:t=>{T({width:t.nativeEvent.layout.width,height:t.nativeEvent.layout.height})},accessibilityState:{disabled:n,...S},underlay:e(C.Underlay,{style:r.underlay}),style:P,onPress:n?void 0:v,children:[V,e(H,{shineAnimation:u}),j]})});const se=()=>{const{typographyLevel:o}=$(),{width:c}=X(),i=K.OS==="android";return c>=560?i?o>=200:o?.startsWith("A11y")&&o!=="A11y_Medium":i?o>=135:o?.startsWith("A11y")},r=N.create({underlay:{marginHorizontal:6,marginVertical:4,borderRadius:12},container:{flexDirection:"row",alignItems:"center",paddingHorizontal:24},content:{flex:1,justifyContent:"center"},left:{flexDirection:"row"},right:{marginLeft:16,height:"100%",flexDirection:"row",alignItems:"center",maxWidth:"80%",justifyContent:"flex-end"},rightVertical:{maxWidth:"100%",width:"100%",marginLeft:0}});

package/dist/esm/components/list-row/ListRowDisabled.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+import { View } from 'react-native';
+/**
+ * ListRow 의 disabled 영역 - disabledStyle1
+ */
+declare function ListRowDisabledStyle1({ ...props }: ComponentProps<typeof View>): import("react/jsx-runtime").JSX.Element;
+/**
+ * ListRow 의 disabled 영역 - disabledStyle1
+ */
+declare function ListRowDisabledStyle2({ ...props }: ComponentProps<typeof View>): import("react/jsx-runtime").JSX.Element;
+export declare const ListRowDisabled: {
+    Style1: typeof ListRowDisabledStyle1;
+    Style2: typeof ListRowDisabledStyle2;
+};
+export {};

package/dist/esm/components/list-row/ListRowDisabled.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{colors as r}from"@toss-design-system/colors";import{useColorPreference as s,useAdaptive as l}from"../../core";import a from"hex-to-rgba";import{useMemo as c}from"react";import{View as i}from"react-native";function p({...t}){const{colorPreference:o}=s(),n=c(()=>o==="light"?r.whiteOpacity700:a(r.darkBackground,.7),[o]);return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:n}],...t})}function m({...t}){const o=l();return e(i,{pointerEvents:"none",style:[{position:"absolute",width:"100%",height:"100%",backgroundColor:o.greyOpacity50}],...t})}export const ListRowDisabled={Style1:p,Style2:m};

package/dist/esm/components/list-row/ListRowIcon.d.ts

@@ -0,0 +1,29 @@
+import { Image } from '@granite-js/react-native';
+import { Icon } from '../icon';
+import { ComponentProps } from 'react';
+type IconType = 'default' | 'small' | 'border' | 'background';
+type IconProps = Omit<ComponentProps<typeof Icon>, 'size'>;
+type ImageProps = ComponentProps<typeof Image>;
+interface BaseProps {
+    /** @default default */
+    type?: IconType;
+    /**
+     * @default 'center';
+     */
+    align?: 'top' | 'center';
+}
+interface NamedIconProps extends BaseProps {
+    name: IconProps['name'];
+    color?: IconProps['color'];
+    style?: IconProps['style'];
+}
+interface UrlIconProps extends BaseProps {
+    /**
+     * react-native-fast-image 의 source 입니다.
+     */
+    source: ImageProps['source'];
+    style?: ImageProps['style'];
+}
+type Props = NamedIconProps | UrlIconProps;
+declare function ListRowIcon({ type, align, style, ...restProps }: Props): import("react/jsx-runtime").JSX.Element;
+export { ListRowIcon };

package/dist/esm/components/list-row/ListRowIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Image as s}from"@granite-js/react-native";import{useAdaptive as c}from"../../core";import{Icon as h}from"../icon";import{View as a}from"react-native";function l({type:e="default",align:r="center",style:d,...t}){const n=c(),i=e==="small"?20:24;return o(a,{style:[{flexDirection:"row",alignItems:r==="center"?"center":"flex-start",justifyContent:r==="center"?"center":"flex-start",marginRight:r==="center"?16:0},m[e],e==="border"?{borderColor:n.grey100}:void 0,e==="background"?{backgroundColor:n.grey100}:void 0,d],children:"source"in t?o(s,{source:t.source,style:[{width:i,height:i}],accessibilityRole:"none"}):o(h,{size:i,...t})})}const m={default:{width:24,height:24},small:{width:20,height:20,marginRight:16},border:{width:40,height:40,borderRadius:20,borderWidth:1,borderStyle:"solid"},background:{width:40,height:40,borderRadius:20}};export{l as ListRowIcon};

package/dist/esm/components/list-row/ListRowImage.d.ts

@@ -0,0 +1,32 @@
+import { Image } from '@granite-js/react-native';
+import { ComponentProps } from 'react';
+import { ViewProps } from 'react-native';
+type ImageProps = ComponentProps<typeof Image>;
+type ImageType = 'default' | 'square' | 'rectangle' | 'rectangle-small' | 'circle' | 'circle-small' | '3d-emoji';
+interface BaseProps {
+    /**
+     * @description border 표시여부. "rectangle", "rectangle-small" 은 기본값이 true
+     * @default false
+     */
+    border?: boolean;
+    source: ImageProps['source'];
+    resizeMode?: ImageProps['resizeMode'];
+    style?: ViewProps['style'];
+}
+interface ImageTypeProps {
+    type: Exclude<ImageType, 'default'>;
+}
+interface DefaultTypeProps {
+    type: 'default';
+    /**
+     * @description LayoutShift 를 방지하기 위한 기본 width 입니다.
+     */
+    width: number;
+    /**
+     * @description LayoutShift 를 방지하기 위한 기본 height 입니다.
+     */
+    height: number;
+}
+type Props = (ImageTypeProps | DefaultTypeProps) & BaseProps;
+declare function ListRowImage({ type, border, resizeMode, source, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export { ListRowImage };

package/dist/esm/components/list-row/ListRowImage.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d}from"react/jsx-runtime";import{Image as w}from"@granite-js/react-native";import{useAdaptive as f}from"../../core";import{useState as u}from"react";import{StyleSheet as c,View as b}from"react-native";function v({type:i="default",border:o=i==="rectangle"||i==="rectangle-small",resizeMode:a,source:n,style:l,...e}){const g=f(),[t,s]=u({width:"width"in e?e.width:0,height:"height"in e?e.height:0});return d(b,{style:[h.base,r.default,r[i],o?{...h.border,borderColor:g.greyOpacity100}:void 0,i==="default"?{width:t.width,height:t.height}:void 0,l],children:d(w,{source:n,style:{width:"100%",height:"100%"},resizeMode:a,onLoad:m=>{"width"in e&&"height"in e||s(m.nativeEvent)}})})}export{v as ListRowImage};const h=c.create({base:{height:"100%",flexDirection:"row",alignItems:"center",marginRight:16},border:{borderWidth:1,borderStyle:"solid"}}),r={default:{maxWidth:108,maxHeight:54},square:{overflow:"hidden",width:54,height:54,borderRadius:10},rectangle:{overflow:"hidden",width:34,height:54,borderRadius:4},"rectangle-small":{overflow:"hidden",width:30,height:47,borderRadius:4},circle:{overflow:"hidden",width:40,height:40,borderRadius:20},"circle-small":{overflow:"hidden",width:34,height:34,borderRadius:17},"3d-emoji":{overflow:"hidden",width:40,height:40}};

package/dist/esm/components/list-row/ListRowImageContainer.d.ts

@@ -0,0 +1,26 @@
+import { ViewProps } from 'react-native';
+type ImageType = 'default' | 'square' | 'rectangle' | 'rectangle-small' | 'circle' | 'circle-small' | '3d-emoji';
+interface BaseProps extends ViewProps {
+    /**
+     * @description border 표시여부
+     * @default false
+     */
+    border?: boolean;
+}
+interface ImageTypeProps {
+    type: Exclude<ImageType, 'default'>;
+}
+interface DefaultTypeProps {
+    type: 'default';
+    /**
+     * @description LayoutShift 를 방지하기 위한 기본 width 입니다.
+     */
+    width: number;
+    /**
+     * @description LayoutShift 를 방지하기 위한 기본 height 입니다.
+     */
+    height: number;
+}
+type Props = (ImageTypeProps | DefaultTypeProps) & BaseProps;
+export declare function ListRowImageContainer({ type, border, style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/list-row/ListRowImageContainer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s}from"react/jsx-runtime";import{useAdaptive as f}from"../../core";import{StyleSheet as g,View as w}from"react-native";export function ListRowImageContainer({type:i="default",border:r=!1,style:h,children:o,...e}){const a=f(),l="width"in e?e.width:0,n="height"in e?e.height:0;return s(w,{style:[d.base,t.default,t[i],r?{...d.border,borderColor:a.greyOpacity100}:void 0,h,i==="default"?{width:l,height:n}:void 0],...e,children:o})}const t={default:{maxWidth:108,maxHeight:54},square:{overflow:"hidden",width:54,height:54,borderRadius:10},rectangle:{overflow:"hidden",width:34,height:54,borderRadius:4},"rectangle-small":{overflow:"hidden",width:30,height:47,borderRadius:4},circle:{overflow:"hidden",width:40,height:40,borderRadius:20},"circle-small":{overflow:"hidden",width:34,height:34,borderRadius:17},"3d-emoji":{overflow:"hidden",width:40,height:40}},d=g.create({base:{alignSelf:"flex-start",height:"100%",flexDirection:"row",alignItems:"center",marginRight:16},border:{borderWidth:1,borderStyle:"solid"}});

package/dist/esm/components/list-row/ListRowLeftText.d.ts

@@ -0,0 +1,6 @@
+import { TxtProps } from '../txt';
+type LeftTextProps = TxtProps & {
+    children: string;
+};
+declare function ListRowLeftText({ style, ...props }: LeftTextProps): import("react/jsx-runtime").JSX.Element;
+export { ListRowLeftText };

package/dist/esm/components/list-row/ListRowLeftText.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Txt as r}from"../txt";import{StyleSheet as i}from"react-native";function m({style:t,...o}){return e(r,{typography:"t6",fontWeight:"bold",style:[s.txt,t],...o})}const s=i.create({txt:{minWidth:47,marginRight:8}});export{m as ListRowLeftText};

package/dist/esm/components/list-row/ListRowRightArrow.d.ts

@@ -0,0 +1,2 @@
+declare function ListRowRightArrow(): import("react/jsx-runtime").JSX.Element;
+export { ListRowRightArrow };

package/dist/esm/components/list-row/ListRowRightArrow.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{Icon as e}from"../icon";import{StyleSheet as o,View as i}from"react-native";import{useAdaptive as n}from"../../core";function m(){const t=n();return r(i,{style:a.container,children:r(e,{name:"icon-arrow-right-mono",size:24,color:t.grey400})})}const a=o.create({container:{flexDirection:"row",alignItems:"center",marginLeft:4,marginRight:-8}});export{m as ListRowRightArrow};

package/dist/esm/components/list-row/ListRowRightTexts/ListRowRightTexts.d.ts

@@ -0,0 +1,13 @@
+import { RightTexts1RowTypeAProps } from './RightTexts1RowTypeA';
+import { RightTexts1RowTypeBProps } from './RightTexts1RowTypeB';
+import { RightTexts1RowTypeCProps } from './RightTexts1RowTypeC';
+import { RightTexts1RowTypeDProps } from './RightTexts1RowTypeD';
+import { RightTexts1RowTypeEProps } from './RightTexts1RowTypeE';
+import { RightTexts2RowTypeAProps } from './RightTexts2RowTypeA';
+import { RightTexts2RowTypeBProps } from './RightTexts2RowTypeB';
+import { RightTexts2RowTypeCProps } from './RightTexts2RowTypeC';
+import { RightTexts2RowTypeDProps } from './RightTexts2RowTypeD';
+import { RightTexts2RowTypeEProps } from './RightTexts2RowTypeE';
+export type ListRowRightTextsProps = RightTexts1RowTypeAProps | RightTexts1RowTypeBProps | RightTexts1RowTypeCProps | RightTexts1RowTypeDProps | RightTexts1RowTypeEProps | RightTexts2RowTypeAProps | RightTexts2RowTypeBProps | RightTexts2RowTypeCProps | RightTexts2RowTypeDProps | RightTexts2RowTypeEProps;
+declare function ListRowRightTexts(props: ListRowRightTextsProps): import("react/jsx-runtime").JSX.Element;
+export { ListRowRightTexts };

package/dist/esm/components/list-row/ListRowRightTexts/ListRowRightTexts.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{RightTexts1RowTypeA as o}from"./RightTexts1RowTypeA";import{RightTexts1RowTypeB as r}from"./RightTexts1RowTypeB";import{RightTexts1RowTypeC as R}from"./RightTexts1RowTypeC";import{RightTexts1RowTypeD as T}from"./RightTexts1RowTypeD";import{RightTexts1RowTypeE as i}from"./RightTexts1RowTypeE";import{RightTexts2RowTypeA as w}from"./RightTexts2RowTypeA";import{RightTexts2RowTypeB as m}from"./RightTexts2RowTypeB";import{RightTexts2RowTypeC as y}from"./RightTexts2RowTypeC";import{RightTexts2RowTypeD as s}from"./RightTexts2RowTypeD";import{RightTexts2RowTypeE as x}from"./RightTexts2RowTypeE";function n(e){switch(e.type){case"1RowTypeA":return t(o,{...e});case"1RowTypeB":return t(r,{...e});case"1RowTypeC":return t(R,{...e});case"1RowTypeD":return t(T,{...e});case"1RowTypeE":return t(i,{...e});case"2RowTypeA":return t(w,{...e});case"2RowTypeB":return t(m,{...e});case"2RowTypeC":return t(y,{...e});case"2RowTypeD":return t(s,{...e});case"2RowTypeE":return t(x,{...e});default:throw new Error("Unexpected type given to ListRowRightTexts")}}export{n as ListRowRightTexts};

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeA.d.ts

@@ -0,0 +1,5 @@
+import { Texts1RowProps } from '../types';
+export interface RightTexts1RowTypeAProps extends Texts1RowProps {
+    type: '1RowTypeA';
+}
+export declare function RightTexts1RowTypeA(props: RightTexts1RowTypeAProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeA.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Txt as r}from"../../txt";import{RightTextsContainer as i}from"./RightTextsContainer";export function RightTexts1RowTypeA(t){return o(i,{children:typeof t.top=="string"?o(r,{typography:"t5",...t.topProps,children:t.top}):t.top})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeB.d.ts

@@ -0,0 +1,5 @@
+import { Texts1RowProps } from '../types';
+export interface RightTexts1RowTypeBProps extends Texts1RowProps {
+    type: '1RowTypeB';
+}
+export declare function RightTexts1RowTypeB(props: RightTexts1RowTypeBProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeB.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Txt as i}from"../../txt";import{RightTextsContainer as r}from"./RightTextsContainer";export function RightTexts1RowTypeB(t){return o(r,{children:typeof t.top=="string"?o(i,{typography:"t5",fontWeight:"medium",...t.topProps,children:t.top}):t.top})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeC.d.ts

@@ -0,0 +1,5 @@
+import { Texts1RowProps } from '../types';
+export interface RightTexts1RowTypeCProps extends Texts1RowProps {
+    type: '1RowTypeC';
+}
+export declare function RightTexts1RowTypeC(props: RightTexts1RowTypeCProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeC.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Txt as r}from"../../txt";import{RightTextsContainer as e}from"./RightTextsContainer";export function RightTexts1RowTypeC(t){return o(e,{children:typeof t.top=="string"?o(r,{typography:"t6",fontWeight:"regular",...t.topProps,children:t.top}):t.top})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeD.d.ts

@@ -0,0 +1,5 @@
+import { Texts1RowProps } from '../types';
+export interface RightTexts1RowTypeDProps extends Texts1RowProps {
+    type: '1RowTypeD';
+}
+export declare function RightTexts1RowTypeD(props: RightTexts1RowTypeDProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeD.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Txt as r}from"../../txt";import{RightTextsContainer as e}from"./RightTextsContainer";export function RightTexts1RowTypeD(t){return o(e,{children:typeof t.top=="string"?o(r,{typography:"t7",fontWeight:"regular",...t.topProps,children:t.top}):t.top})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeE.d.ts

@@ -0,0 +1,5 @@
+import { Texts1RowProps } from '../types';
+export interface RightTexts1RowTypeEProps extends Texts1RowProps {
+    type: '1RowTypeE';
+}
+export declare function RightTexts1RowTypeE(props: RightTexts1RowTypeEProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts1RowTypeE.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{Txt as r}from"../../txt";import{RightTextsContainer as i}from"./RightTextsContainer";export function RightTexts1RowTypeE(t){return o(i,{children:typeof t.top=="string"?o(r,{typography:"t5",fontWeight:"bold",...t.topProps,children:t.top}):t.top})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeA.d.ts

@@ -0,0 +1,5 @@
+import { Texts2RowProps } from '../types';
+export interface RightTexts2RowTypeAProps extends Texts2RowProps {
+    type: '2RowTypeA';
+}
+export declare function RightTexts2RowTypeA(props: RightTexts2RowTypeAProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeA.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as i}from"react/jsx-runtime";import{Txt as e}from"../../txt";import{RightTextsContainer as r}from"./RightTextsContainer";export function RightTexts2RowTypeA(t){return i(r,{children:[typeof t.top=="string"?o(e,{typography:"t5",fontWeight:"bold",...t.topProps,children:t.top}):t.top,typeof t.bottom=="string"?o(e,{typography:"t6",fontWeight:"regular",style:{marginTop:2},...t.bottomProps,children:t.bottom}):t.bottom]})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeB.d.ts

@@ -0,0 +1,5 @@
+import { Texts2RowProps } from '../types';
+export interface RightTexts2RowTypeBProps extends Texts2RowProps {
+    type: '2RowTypeB';
+}
+export declare function RightTexts2RowTypeB(props: RightTexts2RowTypeBProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeB.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{Txt as i}from"../../txt";import{RightTextsContainer as m}from"./RightTextsContainer";export function RightTexts2RowTypeB(t){return e(m,{children:[typeof t.top=="string"?o(i,{typography:"t5",fontWeight:"bold",...t.topProps,children:t.top}):t.top,typeof t.bottom=="string"?o(i,{typography:"t7",fontWeight:"medium",...t.bottomProps,children:t.bottom}):t.bottom]})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeC.d.ts

@@ -0,0 +1,5 @@
+import { Texts2RowProps } from '../types';
+export interface RightTexts2RowTypeCProps extends Texts2RowProps {
+    type: '2RowTypeC';
+}
+export declare function RightTexts2RowTypeC(props: RightTexts2RowTypeCProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeC.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{Txt as r}from"../../txt";import{RightTextsContainer as i}from"./RightTextsContainer";export function RightTexts2RowTypeC(t){return e(i,{children:[typeof t.top=="string"?o(r,{typography:"t6",fontWeight:"regular",...t.topProps,children:t.top}):t.top,typeof t.bottom=="string"?o(r,{typography:"t6",fontWeight:"regular",style:{marginTop:2},...t.bottomProps,children:t.bottom}):t.bottom]})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeD.d.ts

@@ -0,0 +1,5 @@
+import { Texts2RowProps } from '../types';
+export interface RightTexts2RowTypeDProps extends Texts2RowProps {
+    type: '2RowTypeD';
+}
+export declare function RightTexts2RowTypeD(props: RightTexts2RowTypeDProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeD.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{Txt as i}from"../../txt";import{RightTextsContainer as m}from"./RightTextsContainer";export function RightTexts2RowTypeD(t){return e(m,{children:[typeof t.top=="string"?o(i,{typography:"t7",fontWeight:"medium",...t.topProps,children:t.top}):t.top,typeof t.bottom=="string"?o(i,{typography:"t5",fontWeight:"bold",style:{marginTop:2},...t.bottomProps,children:t.bottom}):t.bottom]})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeE.d.ts

@@ -0,0 +1,5 @@
+import { Texts2RowProps } from '../types';
+export interface RightTexts2RowTypeEProps extends Texts2RowProps {
+    type: '2RowTypeE';
+}
+export declare function RightTexts2RowTypeE(props: RightTexts2RowTypeEProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTexts2RowTypeE.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as i}from"react/jsx-runtime";import{Txt as e}from"../../txt";import{RightTextsContainer as r}from"./RightTextsContainer";export function RightTexts2RowTypeE(t){return i(r,{children:[typeof t.top=="string"?o(e,{typography:"t6",fontWeight:"regular",...t.topProps,children:t.top}):t.top,typeof t.bottom=="string"?o(e,{typography:"t5",fontWeight:"bold",style:{marginTop:2},...t.bottomProps,children:t.bottom}):t.bottom]})}

package/dist/esm/components/list-row/ListRowRightTexts/RightTextsContainer.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function RightTextsContainer(props: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-row/ListRowRightTexts/RightTextsContainer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{View as t}from"react-native";export function RightTextsContainer(e){return r(t,{style:{alignItems:"flex-end"},children:e.children})}

package/dist/esm/components/list-row/ListRowRightTexts/index.d.ts

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

package/dist/esm/components/list-row/ListRowRightTexts/index.js

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