@toss/tds-react-native 1.0.0

package/dist/esm/components/highlight/utils/generateSvgPath.js

@@ -0,0 +1,17 @@
+"use strict";import{Dimensions as p}from"react-native";const{width:M,height:m}=p.get("window");export const generateRadiusRectanglePath=({x:n,y:e,width:t,height:o,radius:$})=>{const c=Math.min($,t/2),L=Math.min($,o/2);return`
+  M ${n} ${e+L} 
+  Q ${n} ${e} ${n+c} ${e}
+  L ${n+t-c} ${e}
+  Q ${n+t} ${e} ${n+t} ${e+L}
+  L ${n+t} ${e+o-L}
+  Q ${n+t} ${e+o} ${n+t-c} ${e+o}
+  L ${n+c} ${e+o}
+  Q ${n} ${e+o} ${n} ${e+o-L}
+  Z
+`},generateWindowPath=()=>`
+  M 0 0
+  L ${M} 0
+  L ${M} ${m}
+  L 0 ${m}
+  Z
+  `,generateOverlayPath=({width:n,height:e,x:t,y:o,radius:$})=>`M${M},${m}H0V0H${M}V${m}ZM${t+$},${o}a${$},${$},0,0,0-${$},${$}V${e+o-$}a${$},${$},0,0,0,${$},${$}H${n+t-$}a${$},${$},0,0,0,${$}-${$}V${o+$}a${$},${$},0,0,0-${$}-${$}Z`;

package/dist/esm/components/highlight/utils/getElementAlignment.d.ts

@@ -0,0 +1,10 @@
+export declare function getElementXAlignment({ x, width, parentWidth }: {
+    x: number;
+    width: number;
+    parentWidth: number;
+}): "right" | "left" | "center";
+export declare function getElementYAlignment({ y, height, parentHeight }: {
+    y: number;
+    height: number;
+    parentHeight: number;
+}): "top" | "bottom";

package/dist/esm/components/highlight/utils/getElementAlignment.js

@@ -0,0 +1 @@
+"use strict";export function getElementXAlignment({x:n,width:r,parentWidth:o}){const t=n+r/2,e=o/2;return Math.abs(t-e)<=10?"center":t<e?"left":"right"}export function getElementYAlignment({y:n,height:r,parentHeight:o}){const t=n+r/2,e=o/2;return t>=e?"top":"bottom"}

package/dist/esm/components/highlight/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { addLayoutPadding } from './addLayoutPadding';
+export { calculateOffset } from './calculateOffset';
+export { generateOverlayPath, generateRadiusRectanglePath, generateWindowPath } from './generateSvgPath';
+export { getElementXAlignment, getElementYAlignment } from './getElementAlignment';
+export { sToMs } from './sToMs';

package/dist/esm/components/highlight/utils/index.js

@@ -0,0 +1 @@
+"use strict";export{addLayoutPadding}from"./addLayoutPadding";export{calculateOffset}from"./calculateOffset";export{generateOverlayPath,generateRadiusRectanglePath,generateWindowPath}from"./generateSvgPath";export{getElementXAlignment,getElementYAlignment}from"./getElementAlignment";export{sToMs}from"./sToMs";

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

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

package/dist/esm/components/highlight/utils/mergeRefs.js

@@ -0,0 +1 @@
+"use strict";export function mergeRefs(...e){return t=>{e.forEach(n=>{typeof n=="function"?n(t):n!=null&&(n.current=t)})}}

package/dist/esm/components/highlight/utils/sToMs.d.ts

@@ -0,0 +1 @@
+export declare const sToMs: (s: number) => number;

package/dist/esm/components/highlight/utils/sToMs.js

@@ -0,0 +1 @@
+"use strict";export const sToMs=o=>o*1e3;

package/dist/esm/components/icon/Icon.d.ts

@@ -0,0 +1,12 @@
+import { View, ViewProps } from 'react-native';
+export interface IconProps extends Pick<ViewProps, 'accessibilityLabel' | 'accessible' | 'style'> {
+    size?: number;
+    color?: string;
+    /** @default default */
+    type?: 'default' | 'circle';
+    name: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<View>> & {
+    prefetchIcon: (name: string) => Promise<void>;
+};
+export default _default;

package/dist/esm/components/icon/Icon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as c,jsxs as x}from"react/jsx-runtime";import{SvgUri as R,SvgXml as _}from"@granite-js/native/react-native-svg";import{forwardRef as y,useMemo as I}from"react";import{View as U}from"react-native";import{useCachedData as $}from"./useCachedData";const A="https://static.toss.im/icons/svg",a={},j=t=>t.includes("<pattern")?{isUnsupported:!0,tagName:"pattern"}:{isUnsupported:!1},k=y(function({name:e,color:s,size:n=24,accessible:f,accessibilityLabel:d,type:p="default",style:i},h){const{data:r,showFallback:g}=$(a,e,u,[e]),o=j(r??"");if(o.isUnsupported&&__DEV__)throw new Error(`\uC544\uC774\uCF58 \uB9AC\uC18C\uC2A4\uC5D0 \uBBF8\uC9C0\uC6D0\uB418\uB294 \uD0DC\uADF8\uAC00 \uC788\uC5B4 \uC548\uC804\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. #request-\uADF8\uB798\uD53D \uCC44\uB110\uC5D0 \uB300\uCCB4 \uC544\uC774\uCF58\uC744 \uC694\uCCAD \uD574\uC8FC\uC138\uC694. (\uC544\uC774\uCF58\uBA85: ${e}, \uBBF8\uC9C0\uC6D0 \uD0DC\uADF8: ${o.tagName})`);const m=I(()=>{if(r===void 0)return;const w=/fill="#[0-9a-fA-F]{6}"/g,b=/stroke="#[0-9a-fA-F]{6}"/g;return s!==void 0?r.replace(w,`fill="${s}"`).replace(b,`stroke="${s}"`):r},[r,s]);return x(U,{ref:h,style:[p==="circle"?{borderRadius:n/2,overflow:"hidden"}:void 0,{width:n,aspectRatio:1},...Array.isArray(i)?i:[i]],accessibilityRole:"image",accessibilityLabel:d,accessible:f,children:[c(_,{width:"100%",height:"100%",color:s,fill:s,xml:m??null}),g?c(R,{width:"100%",height:"100%",uri:l(e),style:{backgroundColor:"yellow"}}):null]})});async function u(t){return(await fetch(l(t))).text()}function l(t){const e=t.startsWith("icn-")||t.startsWith("icon-")?t:`icn-${t}`;return`${A}/${e}.svg`}export default Object.assign(k,{prefetchIcon:async t=>{const e=await u(t);a[t]=e}});

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

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

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

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

package/dist/esm/components/icon/private/SvgIcon.d.ts

@@ -0,0 +1,21 @@
+import { SvgProps } from '@granite-js/native/react-native-svg';
+import { Component } from 'react';
+export interface SvgIconProps extends SvgProps {
+    size?: number;
+    color?: string;
+    /** @default default */
+    type?: 'default' | 'circle';
+    name: string;
+}
+/**
+ * @remarks react-native의 createAnimatedComponent가 functional component를
+ * animating 하지 못하는 이슈가 있어서 class로 wrapping 합니다
+ */
+declare class SvgIconClass extends Component<SvgIconProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare const SvgIcon: typeof SvgIconClass & {
+    Root: typeof SvgIconClass;
+    prefetchIcon: (name: string) => Promise<void>;
+};
+export {};

package/dist/esm/components/icon/private/SvgIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s,jsxs as d}from"react/jsx-runtime";import{Circle as B,ClipPath as N,Defs as U,G as h,parse as m,Svg as f,SvgUri as W}from"@granite-js/native/react-native-svg";import{Component as $,forwardRef as D,useMemo as g}from"react";import{useCachedData as L}from"../useCachedData";const M="https://static.toss.im/icons/svg",x={},v=/fill="#[0-9a-fA-F]{6}"/g,b=/stroke="#[0-9a-fA-F]{6}"/g,O=D(function({name:e,color:r,size:c=24,accessible:R,accessibilityLabel:j,type:y="default",children:o,...A},l){const{data:n,showFallback:P}=L(x,e,I,[e]),i=g(()=>n===void 0?null:r!==void 0?m(n.replace(v,"").replace(b,"")):m(n),[n,r]),S=g(()=>n===void 0||r===void 0?{}:{fill:n.match(v)?r:void 0,stroke:n.match(b)?r:void 0},[n,r]),a={width:c,height:c,accessibilityRole:"image",accessibilityLabel:j,accessible:R,...S,...A};if(i==null)return s(f,{ref:l,...a,children:o});if(P)return s(W,{uri:w(e),...a,children:o});const[,,u=c,p=c]=(i.props.viewBox??"").split(" ").map(Number);if(y==="circle"){const k=u/2,F=p/2,_=Math.min(u,p)/2;return d(f,{ref:l,...i.props,...a,children:[s(U,{children:s(N,{id:"clip",children:s(B,{cx:k,cy:F,r:_})})}),s(h,{clipPath:"url(#clip)",children:i.children}),o]})}return d(f,{ref:l,...i.props,...a,children:[s(h,{children:i.children}),o]})});async function I(t){return(await fetch(w(t))).text()}function w(t){const e=t.startsWith("icn-")||t.startsWith("icon-")?t:`icn-${t}`;return`${M}/${e}.svg`}class C extends ${render(){return s(O,{...this.props})}}export const SvgIcon=Object.assign(C,{Root:C,prefetchIcon:async t=>{const e=await I(t);x[t]=e}});

package/dist/esm/components/icon/private/index.d.ts

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

package/dist/esm/components/icon/private/index.js

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

package/dist/esm/components/icon/useCachedData.d.ts

@@ -0,0 +1,4 @@
+export declare function useCachedData<T>(cache: Record<string, any>, cacheKey: string, promise: (...inputs: any) => Promise<T>, inputs?: any[]): {
+    data: T | undefined;
+    showFallback: boolean;
+};

package/dist/esm/components/icon/useCachedData.js

@@ -0,0 +1 @@
+"use strict";import{useEffect as g,useState as i}from"react";const s={};export function useCachedData(n,t,a,u=[]){const[l,o]=i(n[t]),[d,r]=i(!1);return g(()=>{if(n[t]!=null){o(n[t]),r(!1);return}let f=!1;async function w(){s[t]===void 0&&(s[t]=a(...u));try{const e=await s[t];f||(n[t]=e,o(n[t]),r(!1))}catch{f||r(!0)}}return w(),()=>{f=!0}},[a,u]),{data:l,showFallback:d}}function D(n){return n.map(t=>JSON.stringify(t)).join(",")}

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -0,0 +1,21 @@
+import { ImageProps as SvgImageProps } from '@granite-js/native/react-native-svg';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+type Variant = 'fill' | 'clear' | 'border';
+type Asset = {
+    source: SvgImageProps['href'];
+    name?: never;
+} | {
+    source?: never;
+    name: string;
+};
+interface IconButtonBaseProps extends PressableProps {
+    color?: string;
+    bgColor?: string;
+    variant?: Variant;
+    iconSize?: number;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export type IconButtonProps = IconButtonBaseProps & Asset;
+export declare const IconButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<View>>>;
+export {};

package/dist/esm/components/icon-button/IconButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as u,jsxs as w,Fragment as _}from"react/jsx-runtime";import{Image as W,Mask as Y,Rect as E,Svg as H}from"@granite-js/native/react-native-svg";import{bezier as x,spring as o}from"@toss-design-system/easings";import{Animated as e}from"../../interactions/animated";import{getNextColorValue as I}from"@toss-design-system/color-utils";import{useAdaptive as L}from"../../core";import{SvgIcon as G}from"../icon/private";import{generateHapticFeedback as J}from"../../native/generateHapticFeedback";import{forwardRef as Q,memo as T,useCallback as p,useRef as g}from"react";import{Easing as V,Pressable as U}from"react-native";const X=e.createAnimatedComponent(H),Z=e.createAnimatedComponent(E),$=e.createAnimatedComponent(U),z=Q(function({source:h,name:b,color:i,bgColor:A,variant:r="clear",label:M,iconSize:c=24,children:N,style:D,onPressIn:v,onPressOut:y,...B},P){const C=L(),m=A??C.greyOpacity100,j={borderWidth:1,borderStyle:"solid",borderColor:C.greyOpacity100},n=g(new e.Value(0)).current,a=g(new e.Value(1)).current,F=n.interpolate({inputRange:[0,1],outputRange:[m,I({color:m})]}),s=g(new e.Value(0)).current,S=s.interpolate({inputRange:[0,1],outputRange:["transparent",m]}),d=i!=null,l=g(new e.Value(0)).current,q=l.interpolate({inputRange:[0,1],outputRange:[i??"grey",i?I({color:i}):"grey"]}),R=p(()=>{e.spring(a,{toValue:.9,useNativeDriver:!1,...o.rapid}).start(),r==="fill"?e.timing(n,{toValue:1,useNativeDriver:!1,easing:V.bezier(...x.out),duration:500}).start():e.spring(s,{toValue:1,useNativeDriver:!1,...o.rapid}).start(),d&&e.spring(l,{toValue:1,useNativeDriver:!1,...o.rapid}).start()},[n,s,l,a,r,d]),k=p(()=>{e.spring(a,{toValue:1,useNativeDriver:!1,...o.quick}).start(),r==="fill"?e.timing(n,{toValue:0,useNativeDriver:!1,easing:V.bezier(...x.out),duration:500}).start():e.spring(s,{toValue:0,useNativeDriver:!1,...o.quick}).start(),d&&e.spring(l,{toValue:0,useNativeDriver:!1,...o.quick}).start()},[n,s,l,a,r,d]),K=p(f=>{R(),v?.(f),J({type:"tickWeak"})},[R,v]),O=p(f=>{k(),y?.(f)},[y,k]);return u($,{ref:P,style:[{borderRadius:te(c),transform:[{scale:a}],padding:ee(c),backgroundColor:r==="fill"?F:S,...r==="border"?j:void 0},D],onPressIn:K,onPressOut:O,accessible:!0,accessibilityRole:"button",accessibilityLabel:M,...B,children:u(X,{height:c,width:c,viewBox:"0 0 100 100",children:w(_,{children:[w(Y,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[h!==void 0&&u(W,{href:h,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),b!==void 0&&u(G,{name:b,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"})]}),u(Z,{x:"0",y:"0",width:"100%",height:"100%",mask:"url(#mask)",fill:i&&q}),N]})})})});export const IconButton=T(z);function ee(t){return 18<=t&&t<=20?9:t/2}function te(t){return t<=16?6:t<=20?8:12}

package/dist/esm/components/icon-button/index.d.ts

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

package/dist/esm/components/icon-button/index.js

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

package/dist/esm/components/keypad/FullSecureKeypad/BackspaceIcon.d.ts

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

package/dist/esm/components/keypad/FullSecureKeypad/BackspaceIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import l,{Path as r}from"@granite-js/native/react-native-svg";import{colors as a}from"@toss-design-system/colors";export function BackspaceIcon(){return o(l,{viewBox:"0 0 24 24","aria-label":"\uC9C0\uC6B0\uAE30",children:o(r,{fill:a.white,fillRule:"evenodd",d:"M20.966 10.8H6.93l5.451-5.451a1.2 1.2 0 10-1.697-1.697l-7.5 7.5c-.003.002-.004.006-.007.009a1.2 1.2 0 00-.252 1.298c.06.143.145.27.252.38l.007.01 7.5 7.5c.235.234.542.35.848.35a1.2 1.2 0 00.849-2.048L6.931 13.2h14.036a1.2 1.2 0 100-2.4"})})}

package/dist/esm/components/keypad/FullSecureKeypad/ControlKeyButton.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    onPressIn: () => void;
+    disabled?: boolean;
+    color?: string;
+};
+export declare function ControlKeyButton({ children, onPressIn, color, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/keypad/FullSecureKeypad/ControlKeyButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Txt as n}from"../../txt";import{Pressable as s}from"react-native";export function ControlKeyButton({children:t,onPressIn:o,color:r,disabled:i=!1}){return e(s,{onPressIn:o,style:[{borderWidth:0,padding:0,display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",backgroundColor:r}],accessibilityRole:"button",disabled:i,children:typeof t=="string"?e(n,{style:{color:"white",fontSize:17},children:t}):t})}

package/dist/esm/components/keypad/FullSecureKeypad/GridItem.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type Props = {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function GridItem({ style, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/keypad/FullSecureKeypad/GridItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{View as i}from"react-native";export function GridItem({style:r,children:e}){return t(i,{style:[{height:"100%",flex:1},r],children:e})}

package/dist/esm/components/keypad/FullSecureKeypad/GridRow.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    height: number;
+    horizontalPadding?: number;
+};
+export declare function GridRow({ children, height, horizontalPadding }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/keypad/FullSecureKeypad/GridRow.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{View as t}from"react-native";export function GridRow({children:r,height:i,horizontalPadding:o=0}){return n(t,{style:{margin:0,height:i,paddingVertical:0,paddingHorizontal:o,flexDirection:"row"},children:r})}

package/dist/esm/components/keypad/FullSecureKeypad/SecureKeyButton.d.ts

@@ -0,0 +1,7 @@
+import type { RequiredExcept, SecureKey } from './keys';
+type Props = {
+    secureKey: RequiredExcept<SecureKey, 'subText'>;
+    onPressIn: (value: string) => void;
+};
+export declare function SecureKeyButton({ secureKey: { value, label, subText }, onPressIn }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/keypad/FullSecureKeypad/SecureKeyButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,Fragment as p,jsxs as d}from"react/jsx-runtime";import{Txt as i}from"../../txt";import{Pressable as h,StyleSheet as x,View as u}from"react-native";import{BackspaceIcon as y}from"./BackspaceIcon";import{SPECIAL_KEY as g}from"./keys";import{useAccessibilityInfo as S}from"../../../utils";export function SecureKeyButton({secureKey:{value:t,label:c,subText:r},onPressIn:s}){const{screenReaderEnabled:l}=S(),o=t===g.backspace,a=o?2:1,m=()=>{s(String(t))},f=()=>{l&&s(String(t))};return e(h,{style:[n.wrapper,{flex:a}],onPressIn:m,onPress:f,children:o?e(u,{style:{width:20},children:e(y,{})}):d(p,{children:[e(i,{style:n.mainText,children:c}),r!=null&&e(i,{style:n.subText,children:r})]})})}const n=x.create({wrapper:{background:"none",border:0,padding:0,outline:"none",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},mainText:{color:"white",fontSize:20},subText:{color:"#93939f",fontSize:13,marginTop:2}});

package/dist/esm/components/keypad/FullSecureKeypad/ShiftIcon.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    color: string;
+    filled?: boolean;
+};
+export declare function ShiftIcon({ color, filled }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/keypad/FullSecureKeypad/ShiftIcon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as e}from"react/jsx-runtime";import l,{ClipPath as n,Defs as c,G as s,Path as a,Use as r}from"@granite-js/native/react-native-svg";export function ShiftIcon({color:t,filled:h=!1}){return h?i(l,{width:"21",height:"20",fill:t,accessibilityRole:"imagebutton",accessibilityLabel:"shift",children:i(s,{children:i(a,{d:"M 10.286 1.761 C 10.68 1.347 11.341 1.347 11.735 1.762 L 19.395 9.82 C 20 10.457 19.548 11.509 18.67 11.509 L 15.579 11.509 L 15.579 19 C 15.579 19.552 15.131 20 14.579 20 L 7.487 20 C 6.935 20 6.487 19.552 6.487 19 L 6.487 11.509 L 3.334 11.509 C 2.455 11.509 2.003 10.456 2.61 9.819 Z",id:"a1000z"})})}):i(l,{width:"21",height:"20",fill:t,accessibilityRole:"imagebutton",accessibilityLabel:"shift",children:e(s,{children:[e(c,{children:[i(a,{d:"M 10.286 1.761 C 10.68 1.347 11.341 1.347 11.735 1.762 L 19.395 9.82 C 20 10.457 19.548 11.509 18.67 11.509 L 15.579 11.509 L 15.579 19 C 15.579 19.552 15.131 20 14.579 20 L 7.487 20 C 6.935 20 6.487 19.552 6.487 19 L 6.487 11.509 L 3.334 11.509 C 2.455 11.509 2.003 10.456 2.61 9.819 Z",id:"a1000z"}),i(n,{id:"a1001z",children:i(r,{xlinkHref:"#a1000z"})})]}),i(r,{xlinkHref:"#a1000z",fill:"transparent",clipPath:"url(#a1001z)",strokeWidth:"3",stroke:t,strokeMiterlimit:"10"})]})})}

package/dist/esm/components/keypad/FullSecureKeypad/getGridTemplateForRow.d.ts

@@ -0,0 +1,5 @@
+import type { SecureKeyRowRequired } from './keys';
+export declare function withShuffledEmptyCells(row: SecureKeyRowRequired): {
+    keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
+    emptyCellCount: number;
+};

package/dist/esm/components/keypad/FullSecureKeypad/getGridTemplateForRow.js

@@ -0,0 +1 @@
+"use strict";const s=".";function r(e,n){if(n.length===0)return e;const t=e.slice();for(const o of n){const l=Math.floor(Math.random()*e.length);t.splice(l,0,o)}return t}export function withShuffledEmptyCells(e){const n=Array.from({length:e.emptyCellCount}).map((o,l)=>({label:"",templateKey:"",value:"."+l,width:1})),t=r([...e.keys],n);return{...e,keys:t}}

package/dist/esm/components/keypad/FullSecureKeypad/index.d.ts

@@ -0,0 +1,30 @@
+import { StyleProp, View, ViewStyle } from 'react-native';
+export interface FullSecureKeypadProps {
+    /**
+     * Key를 클릭하면 발생하는 이벤트
+     *
+     * @param value string
+     */
+    onKeyPress: (value: string) => void;
+    /**
+     * Backspace를 클릭하면 발생하는 이벤트
+     */
+    onBackspacePress: () => void;
+    /**
+     * Space를 클릭하면 발생하는 이벤트
+     */
+    onSpacePress: () => void;
+    /**
+     * 입력 완료를 클릭하면 발생하는 이벤트
+     */
+    onSubmit: () => void;
+    submitDisabled?: boolean;
+    submitButtonText?: string;
+    open?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export type FullSecureKeypadRef = {
+    reorderEmptyCells: () => void;
+    element: View | null;
+};
+export declare const FullSecureKeypad: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<FullSecureKeypadProps & import("react").RefAttributes<FullSecureKeypadRef>>>;

package/dist/esm/components/keypad/FullSecureKeypad/index.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as f}from"react/jsx-runtime";import{useAdaptive as A}from"../../../core";import{colors as S}from"@toss-design-system/colors";import{forwardRef as g,memo as P,useCallback as K,useImperativeHandle as x,useRef as L}from"react";import{View as t}from"react-native";import{ControlKeyButton as d}from"./ControlKeyButton";import{GridItem as i}from"./GridItem";import{GridRow as h}from"./GridRow";import{CONTROL_KEY_CHARACTER_TYPE_WIDTH as R,CONTROL_KEY_SHIFT_WIDTH as H,CONTROL_KEY_SPACE_WIDTH as O,CONTROL_KEY_SUBMIT_WIDTH as b,SPECIAL_KEY as v}from"./keys";import{SecureKeyButton as Y}from"./SecureKeyButton";import{ShiftIcon as j}from"./ShiftIcon";import{KeypadStatus as n,useKeypad as w}from"./useKeypad";export const FullSecureKeypad=P(g(({style:u,onKeyPress:m,onBackspacePress:a,onSpacePress:I,onSubmit:C,submitButtonText:_="\uC785\uB825 \uC644\uB8CC",submitDisabled:p=!1},y)=>{const s=A(),r=w(),c=L(null);x(y,()=>({reorderEmptyCells:r.reorderEmptyCells,element:c.current}),[r]);const E=K(o=>{o===v.backspace?a():m(o)},[m,a]);return f(t,{style:[{backgroundColor:"#283447"},u],ref:c,children:[e(t,{style:{paddingTop:6,paddingHorizontal:0,paddingBottom:10},children:r.keys.map((o,T)=>e(h,{height:52,horizontalPadding:10,children:o.keys.map(l=>l.value===""?e(t,{style:{flex:1}},l.value):e(Y,{secureKey:l,onPressIn:E},l.value))},`${r.mode}-${T}`))}),e(t,{children:f(h,{height:56,children:[e(i,{style:{flex:H},children:e(d,{onPressIn:r.toggleShift,disabled:r.mode===n.SPECIAL,children:e(j,{color:r.mode===n.SPECIAL?s.grey500:S.white,filled:r.mode===n.ALPHABET_CAPITALIZED})})}),e(i,{style:{flex:R},children:e(d,{onPressIn:r.toggleSpecialAndAlphabet,children:r.mode===n.SPECIAL?"\uC601\uBB38":"\uD2B9\uC218"})}),e(i,{style:{flex:O},children:e(d,{onPressIn:I,children:"Space"})}),e(i,{style:{flex:b},children:e(d,{onPressIn:()=>{C()},color:p?s.blue100:s.blue500,disabled:p,children:_})})]})})]})}));

package/dist/esm/components/keypad/FullSecureKeypad/keys.d.ts

@@ -0,0 +1,36 @@
+export type RequiredExcept<T, E extends keyof T> = Required<Omit<T, E>> & Pick<T, E>;
+export declare enum SPECIAL_KEY {
+    space = "space",
+    backspace = "backspace"
+}
+export declare enum CONTROL_KEY {
+    shift = "shift",
+    characterType = "characterType",
+    submit = "submit"
+}
+export type SecureKey = {
+    /** @default value와 같은 값 */
+    label?: string;
+    value: string | number;
+    /** @default 1 */
+    width?: number;
+    subText?: string;
+    templateKey?: string;
+};
+export type SecureKeyRow = {
+    emptyCellCount: number;
+    keys: SecureKey[];
+};
+export type SecureKeyRowRequired = {
+    emptyCellCount: number;
+    keys: Array<RequiredExcept<SecureKey, 'subText'>>;
+};
+export declare const englishCharacterKeys: SecureKeyRow[];
+export declare const specialCharacterKeys: SecureKeyRow[];
+export declare const CONTROL_KEY_SHIFT_WIDTH = 2;
+export declare const CONTROL_KEY_CHARACTER_TYPE_WIDTH = 2;
+export declare const CONTROL_KEY_SPACE_WIDTH = 5;
+export declare const CONTROL_KEY_SUBMIT_WIDTH = 5;
+export declare const controlKeyRow: SecureKeyRow;
+export declare function fillInDefaults(rows: SecureKeyRow[]): SecureKeyRowRequired[];
+export declare function capitalize(rows: SecureKeyRowRequired[]): SecureKeyRowRequired[];

package/dist/esm/components/keypad/FullSecureKeypad/keys.js

@@ -0,0 +1 @@
+"use strict";export var SPECIAL_KEY;(function(e){e.space="space",e.backspace="backspace"})(SPECIAL_KEY||(SPECIAL_KEY={}));export var CONTROL_KEY;(function(e){e.shift="shift",e.characterType="characterType",e.submit="submit"})(CONTROL_KEY||(CONTROL_KEY={}));export const englishCharacterKeys=[{emptyCellCount:1,keys:[{value:1,templateKey:"n1"},{value:2,templateKey:"n2"},{value:3,templateKey:"n3"},{value:4,templateKey:"n4"},{value:5,templateKey:"n5"},{value:6,templateKey:"n6"},{value:7,templateKey:"n7"},{value:8,templateKey:"n8"},{value:9,templateKey:"n9"},{value:0,templateKey:"n0"}]},{emptyCellCount:1,keys:[{value:"q",subText:"\u3142"},{value:"w",subText:"\u3148"},{value:"e",subText:"\u3137"},{value:"r",subText:"\u3131"},{value:"t",subText:"\u3145"},{value:"y",subText:"\u315B"},{value:"u",subText:"\u3155"},{value:"i",subText:"\u3151"},{value:"o",subText:"\u3150"},{value:"p",subText:"\u3154"}]},{emptyCellCount:1,keys:[{value:"a",subText:"\u3141"},{value:"s",subText:"\u3134"},{value:"d",subText:"\u3147"},{value:"f",subText:"\u3139"},{value:"g",subText:"\u314E"},{value:"h",subText:"\u3157"},{value:"j",subText:"\u3153"},{value:"k",subText:"\u314F"},{value:"l",subText:"\u3163"}]},{emptyCellCount:1,keys:[{value:"z",subText:"\u314B"},{value:"x",subText:"\u314C"},{value:"c",subText:"\u314A"},{value:"v",subText:"\u314D"},{value:"b",subText:"\u3160"},{value:"n",subText:"\u315C"},{value:"m",subText:"\u3161"},{value:SPECIAL_KEY.backspace,width:2}]}],specialCharacterKeys=[{emptyCellCount:1,keys:[{value:"!",templateKey:"exclamation"},{value:"@",templateKey:"at"},{value:"#",templateKey:"sharp"},{value:"$",templateKey:"dollar"},{value:"%",templateKey:"percent"},{value:"^",templateKey:"circumflex"},{value:"&",templateKey:"ampersand"},{value:"*",templateKey:"asterisk"},{value:"(",templateKey:"parenthesis-open"},{value:")",templateKey:"parenthesis-close"}]},{emptyCellCount:2,keys:[{value:"`",templateKey:"backquote"},{value:"-",templateKey:"dash"},{value:"=",templateKey:"equals"},{value:"\\",templateKey:"backslash"},{value:"[",templateKey:"squarebracket-open"},{value:"]",templateKey:"squarebracket-close"},{value:";",templateKey:"semicolon"},{value:"'",templateKey:"apostrophe"},{value:",",templateKey:"comma"}]},{emptyCellCount:2,keys:[{value:".",templateKey:"dot"},{value:"/",templateKey:"slash"},{value:"~",templateKey:"tilde"},{value:"+",templateKey:"plus"},{value:"|",templateKey:"verticalbar"},{value:"{",templateKey:"bracket-open"},{value:"}",templateKey:"bracket-close"},{value:":",templateKey:"colon"}]},{emptyCellCount:2,keys:[{value:"\u20A9",templateKey:"won"},{value:"_",templateKey:"underbar"},{value:'"',templateKey:"dittomark"},{value:"<",templateKey:"less-than"},{value:">",templateKey:"greater-than"},{value:"?",templateKey:"question"},{value:SPECIAL_KEY.backspace,width:2}]}],CONTROL_KEY_SHIFT_WIDTH=2,CONTROL_KEY_CHARACTER_TYPE_WIDTH=2,CONTROL_KEY_SPACE_WIDTH=5,CONTROL_KEY_SUBMIT_WIDTH=5,controlKeyRow={emptyCellCount:0,keys:[{value:CONTROL_KEY.shift,width:CONTROL_KEY_SHIFT_WIDTH},{value:CONTROL_KEY.characterType,width:CONTROL_KEY_CHARACTER_TYPE_WIDTH},{value:SPECIAL_KEY.space,width:CONTROL_KEY_SPACE_WIDTH},{value:CONTROL_KEY.submit,width:CONTROL_KEY_SUBMIT_WIDTH}]};export function fillInDefaults(e){return e.map(a=>({...a,keys:a.keys.map(({value:t,label:l=t.toString(),width:u=1,templateKey:p=t.toString(),...s})=>({...s,value:t,label:l,width:u,templateKey:p}))}))}export function capitalize(e){return e.map(a=>({...a,keys:a.keys.map(({value:t,label:l,...u})=>({...u,value:typeof t=="string"&&t!==SPECIAL_KEY.backspace?t.toUpperCase():t,label:l.toUpperCase()}))}))}

package/dist/esm/components/keypad/FullSecureKeypad/useKeypad.d.ts

@@ -0,0 +1,29 @@
+export declare enum KeypadStatus {
+    ALPHABET = 0,
+    ALPHABET_CAPITALIZED = 1,
+    SPECIAL = 2
+}
+export declare function useKeypad(): {
+    mode: KeypadStatus;
+    keys: {
+        keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
+        emptyCellCount: number;
+    }[];
+    shuffledKeys: {
+        0: {
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
+            emptyCellCount: number;
+        }[];
+        1: {
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
+            emptyCellCount: number;
+        }[];
+        2: {
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
+            emptyCellCount: number;
+        }[];
+    };
+    toggleShift: () => void;
+    toggleSpecialAndAlphabet: () => void;
+    reorderEmptyCells: () => void;
+};

package/dist/esm/components/keypad/FullSecureKeypad/useKeypad.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as E,useMemo as i,useState as n}from"react";import{withShuffledEmptyCells as L}from"./getGridTemplateForRow";import{capitalize as B,englishCharacterKeys as o,fillInDefaults as P,specialCharacterKeys as H}from"./keys";export var KeypadStatus;(function(A){A[A.ALPHABET=0]="ALPHABET",A[A.ALPHABET_CAPITALIZED=1]="ALPHABET_CAPITALIZED",A[A.SPECIAL=2]="SPECIAL"})(KeypadStatus||(KeypadStatus={}));const r={[KeypadStatus.ALPHABET]:P(o),[KeypadStatus.ALPHABET_CAPITALIZED]:B(P(o)),[KeypadStatus.SPECIAL]:P(H)};function c(){const A=r[KeypadStatus.ALPHABET].map(L),t=r[KeypadStatus.ALPHABET_CAPITALIZED].map(L),e=r[KeypadStatus.SPECIAL].map(L);return{[KeypadStatus.ALPHABET]:A,[KeypadStatus.ALPHABET_CAPITALIZED]:t,[KeypadStatus.SPECIAL]:e}}export function useKeypad(){const[A,t]=n(KeypadStatus.ALPHABET),[e,T]=n(c()),a=i(()=>e[A],[e,A]),l=E(()=>{t(s=>{switch(s){case KeypadStatus.ALPHABET:return KeypadStatus.ALPHABET_CAPITALIZED;case KeypadStatus.ALPHABET_CAPITALIZED:return KeypadStatus.ALPHABET;default:return s}})},[]),I=E(()=>{t(s=>{switch(s){case KeypadStatus.ALPHABET:case KeypadStatus.ALPHABET_CAPITALIZED:return KeypadStatus.SPECIAL;case KeypadStatus.SPECIAL:return KeypadStatus.ALPHABET}})},[]),C=E(()=>{T(c())},[]);return{mode:A,keys:a,shuffledKeys:e,toggleShift:l,toggleSpecialAndAlphabet:I,reorderEmptyCells:C}}

package/dist/esm/components/keypad/NumberKeypad/Backspace.d.ts

@@ -0,0 +1 @@
+export declare const Backspace: import("react").NamedExoticComponent<object>;

package/dist/esm/components/keypad/NumberKeypad/Backspace.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as e}from"react/jsx-runtime";import s,{ClipPath as a,G as o,Path as c}from"@granite-js/native/react-native-svg";import{useAdaptive as l}from"../../../core";import{memo as r}from"react";export const Backspace=r(function(){const t=l();return e(s,{viewBox:"0 0 16 16",width:"20px",height:"20px",accessibilityLabel:"\uC9C0\uC6B0\uAE30",children:[i(a,{id:"a",children:i(c,{d:"m0 0h16v16h-16z"})}),i(o,{clipPath:"url(#a)",children:i(c,{d:"m14.9989 7.00018h-11.58998l4.3-4.29c.39212-.39212.39212-1.0279 0-1.42-.39212-.392116-1.0279-.392116-1.42 0l-5.999999 6c-.091041.09511-.16241.20725-.2099997.33-.10002.24346-.10002.51654 0 .76.0458137.12364.1173997.23613.2099997.33l5.999999 6.00002c.18777.1893.44336.2958.71.2958s.52223-.1065.71-.2958c.18931-.1878.2958-.4434.2958-.71 0-.2667-.10649-.5222-.2958-.71l-4.3-4.29002h11.58998c.5523 0 1-.44772 1-1s-.4477-1-1-1z",fill:t.blue500})})]})});

package/dist/esm/components/keypad/NumberKeypad/NumberKeypad.d.ts

@@ -0,0 +1,24 @@
+import { StyleProp, View, ViewStyle } from 'react-native';
+export type NumberKey = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export type NumberKeypadRef = React.Ref<View>;
+export type NumberKeypadProps = {
+    /**
+     * 숫자 키패드의 순서
+     * - 1, 2, 3, 4, 5, 6, 7, 8, 9, 0
+     */
+    numbers?: NumberKey[];
+    /**
+     * Key를 클릭하면 발생하는 이벤트
+     *
+     * @param value string
+     */
+    onKeyPress: (value: number) => void;
+    /**
+     * Backspace를 클릭하면 발생하는 이벤트
+     */
+    onBackspacePress: () => void;
+    forwardedRef: NumberKeypadRef;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function NumberKeypadComponent({ numbers, onKeyPress, onBackspacePress, forwardedRef, style, }: NumberKeypadProps): import("react/jsx-runtime").JSX.Element;
+export declare const NumberKeypad: import("react").ForwardRefExoticComponent<Omit<NumberKeypadProps, "forwardedRef"> & import("react").RefAttributes<View>>;

package/dist/esm/components/keypad/NumberKeypad/NumberKeypad.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{forwardRef as f}from"react";import{VirtualKeypad as p}from"./VirtualKeypad";const u=[1,2,3,4,5,6,7,8,9,0];export function NumberKeypadComponent({numbers:r=u,onKeyPress:e,onBackspacePress:a,forwardedRef:n,style:c}){function m(o){e(parseInt(o,10))}const s=r.map(o=>`${o}`);return t(p,{numberOfColumns:3,characters:s,onKeyClick:m,onBackspaceClick:a,ref:n,style:c})}export const NumberKeypad=f((r,e)=>t(NumberKeypadComponent,{...r,forwardedRef:e}));

package/dist/esm/components/keypad/NumberKeypad/VirtualKeypad.d.ts

@@ -0,0 +1,11 @@
+import { StyleProp, View, ViewStyle } from 'react-native';
+type Props = {
+    characters: string[];
+    numberOfColumns: number;
+    onKeyClick: (value: string) => void;
+    onBackspaceClick: () => void;
+    forwardedRef: React.Ref<View>;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const VirtualKeypad: import("react").ForwardRefExoticComponent<Omit<Props, "forwardedRef"> & import("react").RefAttributes<View>>;
+export {};

package/dist/esm/components/keypad/NumberKeypad/VirtualKeypad.js

@@ -0,0 +1 @@
+"use strict";import{jsx as a}from"react/jsx-runtime";import{forwardRef as m}from"react";import{View as c}from"react-native";import{SPECIAL_KEY as i,VirtualKeypadKey as y}from"./VirtualKeypadKey";const w=340;function h({characters:t,numberOfColumns:e,onKeyClick:r,onBackspaceClick:n,forwardedRef:s,style:d}){function f(o){if(o!==i.blank){if(o===i.backspace){n();return}r(o)}}const p=R(t,e);return a(c,{style:[{paddingVertical:0,paddingHorizontal:10,justifyContent:"center",alignItems:"center"},d],ref:s,children:p.map((o,u)=>a(c,{style:{flexDirection:"row",maxWidth:w},children:o.map(l=>a(c,{style:{flex:1},children:a(y,{char:l,onKeyPressIn:f})},l))},u))})}export const VirtualKeypad=m((t,e)=>a(h,{...t,forwardedRef:e}));function R(t,e){const r=K(t,e),n=g(r,e);return[...r.slice(0,-1),n]}function g(t,e){const r=t[t.length-1];return[...Array.from({length:e-r.length-1}).map(()=>i.blank),...r,i.backspace]}function K(t,e){const r=[];let n,s;for(n=0,s=t.length;n<s;n+=e)r.push(t.slice(n,n+e));return r}

package/dist/esm/components/keypad/NumberKeypad/VirtualKeypadKey.d.ts

@@ -0,0 +1,10 @@
+export declare enum SPECIAL_KEY {
+    blank = "blank",
+    backspace = "backspace"
+}
+type Props = {
+    char: string;
+    onKeyPressIn: (value: string) => void;
+};
+export declare const VirtualKeypadKey: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/esm/components/keypad/NumberKeypad/VirtualKeypadKey.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Txt as i}from"../../txt";import{memo as c,useMemo as a}from"react";import{Pressable as l}from"react-native";import{Backspace as m}from"./Backspace";const o=64,p=30;export var SPECIAL_KEY;(function(t){t.blank="blank",t.backspace="backspace"})(SPECIAL_KEY||(SPECIAL_KEY={}));export const VirtualKeypadKey=c(function({char:e,onKeyPressIn:r}){const s=a(()=>{switch(e){case SPECIAL_KEY.backspace:return n(m,{});case SPECIAL_KEY.blank:return null;default:return e}},[e]);return n(l,{style:{height:o,justifyContent:"center",alignItems:"center",overflow:"visible"},onPressIn:()=>r(e),children:n(i,{style:{fontSize:p,lineHeight:o,textAlign:"center"},children:s})})});

package/dist/esm/components/keypad/NumberKeypad/index.d.ts

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

package/dist/esm/components/keypad/NumberKeypad/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './FullSecureKeypad';
+export * from './NumberKeypad';

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

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

package/dist/esm/components/list/List.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    /**
+     * @description 리스트의 `row` 엘리먼트의 기본 하단 구분자를 지정합니다.
+     * @defualt intented
+     */
+    rowSeparator?: 'full' | 'indented' | 'none';
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function List({ children, rowSeparator, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/list/List.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Border as r}from"../border";import{Childrens as d}from"../../utils";import{View as l}from"react-native";export function List({children:n,rowSeparator:i="indented",style:t}){return e(l,{style:[t],children:e(d.Gap,{children:n,gap:i==="full"?e(r,{type:"full"}):i==="indented"?e(r,{type:"padding24"}):null})})}

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

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

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

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

package/dist/esm/components/list-footer/ListFooter.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { TouchableHighlightProps } from 'react-native';
+import { ListFooterRight } from './ListFooterRight';
+import { ListFooterTitle } from './ListFooterTitle';
+export interface ListFooterProps {
+    /**
+     * `ListFooter` 컴포넌트의 제목을 설정해요.
+     * 주로 `ListFooter.Title` 컴포넌트를 사용해요.
+     */
+    title: ReactNode;
+    /**
+     * `ListFooter` 컴포넌트의 오른쪽 영역에 표시할 요소를 설정해요.
+     * 주로 `ListFooter.Right` 컴포넌트를 사용해요.
+     */
+    right?: ReactNode;
+    /**
+     * `ListFooter` 컴포넌트의 하단 구분선 스타일을 설정해요.
+     * - `full`: 전체 너비로 표시해요.
+     * - `none`: 구분선을 표시하지 않아요.
+     *
+     * @default 'full'
+     */
+    borderType?: 'full' | 'none';
+    /**
+     * `ListFooter` 컴포넌트를 눌렀을 때 실행되는 함수예요.
+     */
+    onPress?: TouchableHighlightProps['onPress'];
+}
+/**
+ *
+ * @example
+ * <ListFooter
+ *   borderType="full"
+ *   title={<ListFooter.Title>더 보기</ListFooter.Title>}
+ *   right={
+ *     <ListFooter.Right>
+ *       <Icon name="icon-plus" size={16} />
+ *     </ListFooter.Right>
+ *   }
+ * />
+ */
+declare function ListFooter({ title, right, borderType, onPress }: ListFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListFooter {
+    var Title: typeof ListFooterTitle;
+    var Right: typeof ListFooterRight;
+}
+export default ListFooter;

package/dist/esm/components/list-footer/ListFooter.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{TouchableHighlight as f,View as l}from"react-native";import{Border as m}from"../border";import{ListFooterRight as u}from"./ListFooterRight";import{ListFooterTitle as c}from"./ListFooterTitle";function t({title:n,right:s,borderType:e="full",onPress:i}){return o(f,{accessibilityRole:i!=null?"button":void 0,underlayColor:"rgba(0,0,0,0.26)",onPress:i,children:r(l,{children:[e==="full"&&o(m,{type:e}),r(l,{style:{flexDirection:"row",alignItems:"center",justifyContent:"center",height:59},children:[n,s]})]})})}t.Title=c,t.Right=u;export default t;

package/dist/esm/components/list-footer/ListFooterRight.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ListFooterRightProps {
+    /**
+     * `ListFooter.Right` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * `ListFooter.Right` 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: ReactNode;
+}
+export declare function ListFooterRight({ children, style }: ListFooterRightProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-footer/ListFooterRight.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i}from"react/jsx-runtime";import{View as o}from"react-native";export function ListFooterRight({children:r,style:t}){return i(o,{style:[{marginLeft:2},t],children:r})}

package/dist/esm/components/list-footer/ListFooterTitle.d.ts

@@ -0,0 +1,23 @@
+import { TxtProps } from '../txt';
+export interface ListFooterTitleProps extends TxtProps {
+    /**
+     * `ListFooter.Title` 컴포넌트의 텍스트 스타일을 설정해요.
+     * @default 't5'
+     */
+    typography?: TxtProps['typography'];
+    /**
+     * `ListFooter.Title` 컴포넌트의 텍스트 색상을 지정해요
+     * @default colors.blue500
+     */
+    color?: string;
+    /**
+     * `ListFooter.Title` 컴포넌트의 텍스트 굵기를 설정해요.
+     * @default 'medium'
+     */
+    fontWeight?: TxtProps['fontWeight'];
+    /**
+     * `ListFooter.Title` 컴포넌트 내부에 표시될 내용을 지정해요.
+     */
+    children: string;
+}
+export declare function ListFooterTitle({ typography, color, fontWeight, children, ...restProps }: ListFooterTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/list-footer/ListFooterTitle.js

@@ -0,0 +1 @@
+"use strict";import{jsx as m}from"react/jsx-runtime";import{colors as p}from"@toss-design-system/colors";import{Txt as f}from"../txt";export function ListFooterTitle({typography:o="t5",color:r=p.blue500,fontWeight:t="medium",children:i,...e}){return m(f,{typography:o,color:r,fontWeight:t,...e,children:i})}

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

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

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

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

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

@@ -0,0 +1,4 @@
+export interface ListHeaderContext {
+    setIsMultilineTitle: (isMultilineTitle: boolean) => void;
+}
+export declare const ListHeaderContext: import("react").Context<ListHeaderContext>;