@toss/tds-react-native 1.3.4 → 1.3.5

package/dist/esm/components/highlight/HighlightUI.js

@@ -1 +1 @@
-"use strict";import{jsx as i,jsxs as c,Fragment as I}from"react/jsx-runtime";import{forwardRef as U}from"react";import{Dimensions as X,StyleSheet as Y,View as _}from"react-native";import{colors as M}from"@toss/tds-colors";import{useAnimatePresence as T}from"../../utils/index.js";import{Message as W,MessageBox as k,PassClickEventThroughHoleOverlay as B,SvgHighlightOverlay as C}from"./components/index.js";import{useHighlightUIAnimation as D}from"./hooks/index.js";import{addLayoutPadding as L,getElementXAlignment as R,getElementYAlignment as V}from"./utils/index.js";export const HighlightUI=U(function({open:y,x:l,y:r,width:s,height:a,padding:e=0,paddingLeft:p=e,paddingTop:u=e,paddingRight:f=e,paddingBottom:A=e,message:t,messageColor:d=M.white,messageXAlignment:v,messageYAlignment:w,onPress:x,onExited:H,onTargetPress:S,...m},E){const n=L({layout:{x:l,y:r,width:s,height:a},padding:{paddingLeft:p,paddingTop:u,paddingRight:f,paddingBottom:A}}),{style:o,enter:j,exit:O}=D(),{width:P,height:b}=X.get("window"),F=v??R({x:l,width:s,parentWidth:P}),g=w??V({y:r,height:a,parentHeight:b}),{presenceState:h}=T(y,{enter:j,exit:O,onExited:H});return h==="invisible"?null:c(I,{children:[c(_,{ref:E,...m,style:[Y.absoluteFill,{pointerEvents:"none"},m.style],children:[i(C,{layout:n,opacity:o.overlayOpacity,holeStep:o.holeStep}),t&&i(k,{layout:n,opacity:o.messageOpacity,yAlignment:g,children:typeof t=="string"?i(W,{layout:n,color:d,xAlignment:F,yAlignment:g,children:t}):t})]}),i(B,{layout:n,onPress:x,onTargetPress:S,style:{pointerEvents:h==="invisible-animation"?"none":"auto"}})]})});
+"use strict";import{jsx as i,jsxs as c,Fragment as I}from"react/jsx-runtime";import{forwardRef as U}from"react";import{Dimensions as X,StyleSheet as Y,View as _}from"react-native";import{colors as M}from"@toss/tds-colors";import{useAnimatePresence as T}from"../../utils";import{Message as W,MessageBox as k,PassClickEventThroughHoleOverlay as B,SvgHighlightOverlay as C}from"./components";import{useHighlightUIAnimation as D}from"./hooks";import{addLayoutPadding as L,getElementXAlignment as R,getElementYAlignment as V}from"./utils";export const HighlightUI=U(function({open:y,x:l,y:r,width:s,height:a,padding:e=0,paddingLeft:p=e,paddingTop:u=e,paddingRight:f=e,paddingBottom:A=e,message:t,messageColor:d=M.white,messageXAlignment:v,messageYAlignment:w,onPress:x,onExited:H,onTargetPress:S,...m},E){const n=L({layout:{x:l,y:r,width:s,height:a},padding:{paddingLeft:p,paddingTop:u,paddingRight:f,paddingBottom:A}}),{style:o,enter:j,exit:O}=D(),{width:P,height:b}=X.get("window"),F=v??R({x:l,width:s,parentWidth:P}),g=w??V({y:r,height:a,parentHeight:b}),{presenceState:h}=T(y,{enter:j,exit:O,onExited:H});return h==="invisible"?null:c(I,{children:[c(_,{ref:E,...m,style:[Y.absoluteFill,{pointerEvents:"none"},m.style],children:[i(C,{layout:n,opacity:o.overlayOpacity,holeStep:o.holeStep}),t&&i(k,{layout:n,opacity:o.messageOpacity,yAlignment:g,children:typeof t=="string"?i(W,{layout:n,color:d,xAlignment:F,yAlignment:g,children:t}):t})]}),i(B,{layout:n,onPress:x,onTargetPress:S,style:{pointerEvents:h==="invisible-animation"?"none":"auto"}})]})});

package/dist/esm/components/highlight/components/Message.d.ts

@@ -1,4 +1,4 @@
-import type { Layout, XAlignmentValue, YAlignmentValue } from '../types.js';
+import type { Layout, XAlignmentValue, YAlignmentValue } from '../types';
 type MessageProps = {
     color: string;
     children: string;

package/dist/esm/components/highlight/components/Message.js

@@ -1 +1 @@
-"use strict";import{jsx as f}from"react/jsx-runtime";import{Txt as p}from"../../txt/index.js";import{useState as l}from"react";import{Dimensions as m}from"react-native";export const Message=({color:r,children:s,layout:o,xAlignment:t,yAlignment:n})=>{const[d,a]=l(null),e=t==="center"?-(d?.width??0)/2+o.x+o.width/2:t==="left"?10:0,i=t==="right"?10:0;return f(p,{onLayout:h=>{a(h.nativeEvent.layout)},color:r,typography:"t6",fontWeight:"bold",textAlign:t,style:{position:"absolute",maxWidth:m.get("window").width-(i+e),left:e,right:i,bottom:n==="top"?0:void 0},children:s})};
+"use strict";import{jsx as f}from"react/jsx-runtime";import{Txt as p}from"../../txt";import{useState as l}from"react";import{Dimensions as m}from"react-native";export const Message=({color:r,children:s,layout:o,xAlignment:t,yAlignment:n})=>{const[d,a]=l(null),e=t==="center"?-(d?.width??0)/2+o.x+o.width/2:t==="left"?10:0,i=t==="right"?10:0;return f(p,{onLayout:h=>{a(h.nativeEvent.layout)},color:r,typography:"t6",fontWeight:"bold",textAlign:t,style:{position:"absolute",maxWidth:m.get("window").width-(i+e),left:e,right:i,bottom:n==="top"?0:void 0},children:s})};

package/dist/esm/components/highlight/components/MessageBox.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout, YAlignmentValue } from '../types.js';
+import type { Layout, YAlignmentValue } from '../types';
 type MessageBoxProps = {
     layout: Layout;
     yAlignment: YAlignmentValue;

package/dist/esm/components/highlight/components/MessageBox.js

@@ -1 +1 @@
-"use strict";import{jsx as m,jsxs as w}from"react/jsx-runtime";import{useEffect as v,useRef as x}from"react";import{Dimensions as D,Easing as i,View as b}from"react-native";import{bezier as r}from"@toss/tds-easings";import{Animated as e}from"../../../interactions/animated/index.js";import{Asset as u}from"../../asset/index.js";import{sToMs as s}from"../utils/index.js";const n=12;export const MessageBox=({layout:{x:l,y:a,width:f,height:c},yAlignment:p,opacity:g,children:d})=>{const{height:h}=D.get("window"),o=x(new e.Value(0)).current,t=p==="top";return v(()=>{e.sequence([e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.6)}),e.timing(o,{toValue:t?-5:5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)}),e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)})]).start()},[]),w(e.View,{style:[{position:"absolute",left:0,right:0},t?{bottom:h-a+n,flexDirection:"column-reverse"}:{top:a+c+n,flexDirection:"column"},{transform:[{translateY:o}],opacity:g}],children:[m(u.Icon,{style:{left:l+f/2-n,transform:[{rotateX:t?"180deg":"0deg"}]},frameShape:u.frameShape.CleanW24,name:"icon-arrow-up-sidebar-mono",color:"white"}),m(b,{style:[{position:"relative",width:"100%"}],children:d})]})};
+"use strict";import{jsx as m,jsxs as w}from"react/jsx-runtime";import{useEffect as v,useRef as x}from"react";import{Dimensions as D,Easing as i,View as b}from"react-native";import{bezier as r}from"@toss/tds-easings";import{Animated as e}from"../../../interactions/animated";import{Asset as u}from"../../asset";import{sToMs as s}from"../utils";const n=12;export const MessageBox=({layout:{x:l,y:a,width:f,height:c},yAlignment:p,opacity:g,children:d})=>{const{height:h}=D.get("window"),o=x(new e.Value(0)).current,t=p==="top";return v(()=>{e.sequence([e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.6)}),e.timing(o,{toValue:t?-5:5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)}),e.timing(o,{toValue:t?5:-5,useNativeDriver:!0,easing:i.bezier(...r.out),duration:s(.8)})]).start()},[]),w(e.View,{style:[{position:"absolute",left:0,right:0},t?{bottom:h-a+n,flexDirection:"column-reverse"}:{top:a+c+n,flexDirection:"column"},{transform:[{translateY:o}],opacity:g}],children:[m(u.Icon,{style:{left:l+f/2-n,transform:[{rotateX:t?"180deg":"0deg"}]},frameShape:u.frameShape.CleanW24,name:"icon-arrow-up-sidebar-mono",color:"white"}),m(b,{style:[{position:"relative",width:"100%"}],children:d})]})};

package/dist/esm/components/highlight/components/PassClickEventThroughHoleOverlay.d.ts

@@ -1,5 +1,5 @@
 import { type ViewProps } from 'react-native';
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 type PassClickEventThroughHoleOverlayProps = {
     layout: Layout;
     onPress?: () => void;

package/dist/esm/components/highlight/components/PassClickEventThroughHoleOverlay.js

@@ -1 +1 @@
-"use strict";import{jsx as e}from"react/jsx-runtime";import{Pressable as o,StyleSheet as a}from"react-native";import{getHoleAnimateVariants as h}from"./getHoleAnimateVariants.js";export const PassClickEventThroughHoleOverlay=({layout:s,onPress:r,onTargetPress:i,style:l})=>{const{default:t}=h(s);return e(o,{onPress:r,style:[a.absoluteFill,l],children:e(o,{onPress:i,style:[{position:"absolute",left:t.x,top:t.y,width:t.width,height:t.height,borderRadius:t.radius}]})})};
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Pressable as o,StyleSheet as a}from"react-native";import{getHoleAnimateVariants as h}from"./getHoleAnimateVariants";export const PassClickEventThroughHoleOverlay=({layout:s,onPress:r,onTargetPress:i,style:l})=>{const{default:t}=h(s);return e(o,{onPress:r,style:[a.absoluteFill,l],children:e(o,{onPress:i,style:[{position:"absolute",left:t.x,top:t.y,width:t.width,height:t.height,borderRadius:t.radius}]})})};

package/dist/esm/components/highlight/components/SvgHighlightOverlay.d.ts

@@ -1,5 +1,5 @@
 import type { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 type SvgHighlightOverlayProps = {
     layout: Layout;
     opacity: ReactNativeAnimated.Value;

package/dist/esm/components/highlight/components/SvgHighlightOverlay.js

@@ -1 +1 @@
-"use strict";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{Svg as m,ClipPath as p,Defs as d,Rect as h}from"@granite-js/native/react-native-svg";import{StyleSheet as f}from"react-native";import{Animated as e}from"../../../interactions/animated/index.js";import{useAdaptive as g,useColorPreference as _}from"../../../core/index.js";import{SvgHolePath as H}from"./SvgHolePath.js";const P=e.createAnimatedComponent(m),y=e.createAnimatedComponent(h),o="HIGHLIGHT_SVG_HOLE_CLIP_PATH_ID";export const SvgHighlightOverlay=({layout:r,opacity:i,holeStep:a})=>{const{colorPreference:n}=_(),l=g(),c=n==="dark"?"rgba(33, 33, 38, 0.87)":l.greyOpacity700;return s(P,{width:"100%",height:"100%",style:f.absoluteFill,children:[t(d,{children:t(p,{id:o,children:t(H,{step:a,layout:r})})}),t(y,{x:"0",y:"0",width:"100%",height:"100%",fillOpacity:i,fill:c,clipPath:`url(#${o})`})]})};
+"use strict";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{Svg as m,ClipPath as p,Defs as d,Rect as h}from"@granite-js/native/react-native-svg";import{StyleSheet as f}from"react-native";import{Animated as e}from"../../../interactions/animated";import{useAdaptive as g,useColorPreference as _}from"../../../core";import{SvgHolePath as H}from"./SvgHolePath";const P=e.createAnimatedComponent(m),y=e.createAnimatedComponent(h),o="HIGHLIGHT_SVG_HOLE_CLIP_PATH_ID";export const SvgHighlightOverlay=({layout:r,opacity:i,holeStep:a})=>{const{colorPreference:n}=_(),l=g(),c=n==="dark"?"rgba(33, 33, 38, 0.87)":l.greyOpacity700;return s(P,{width:"100%",height:"100%",style:f.absoluteFill,children:[t(d,{children:t(p,{id:o,children:t(H,{step:a,layout:r})})}),t(y,{x:"0",y:"0",width:"100%",height:"100%",fillOpacity:i,fill:c,clipPath:`url(#${o})`})]})};

package/dist/esm/components/highlight/components/SvgHolePath.d.ts

@@ -1,5 +1,5 @@
 import type { Animated as ReactNativeAnimated } from 'react-native';
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 type Props = {
     step: ReactNativeAnimated.Value;
     layout: Layout;

package/dist/esm/components/highlight/components/SvgHolePath.js

@@ -1,4 +1,4 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{Path as s}from"@granite-js/native/react-native-svg";import{Animated as c}from"../../../interactions/animated/index.js";import{generateRadiusRectanglePath as h,generateWindowPath as d}from"../utils/index.js";import{getHoleAnimateVariants as l}from"./getHoleAnimateVariants.js";const P=c.createAnimatedComponent(s);export const SvgHolePath=({step:e,layout:a})=>{const t=l(a),o=n(t.initial),i=n(t.default),r=n(t.exit);return m(P,{clipRule:"evenodd",d:e.interpolate({inputRange:[0,1,2],outputRange:[o,i,r]})})};const n=e=>{const a=h(e);return`
+"use strict";import{jsx as m}from"react/jsx-runtime";import{Path as s}from"@granite-js/native/react-native-svg";import{Animated as c}from"../../../interactions/animated";import{generateRadiusRectanglePath as h,generateWindowPath as d}from"../utils";import{getHoleAnimateVariants as l}from"./getHoleAnimateVariants";const P=c.createAnimatedComponent(s);export const SvgHolePath=({step:e,layout:a})=>{const t=l(a),o=n(t.initial),i=n(t.default),r=n(t.exit);return m(P,{clipRule:"evenodd",d:e.interpolate({inputRange:[0,1,2],outputRange:[o,i,r]})})};const n=e=>{const a=h(e);return`
   ${d()}
   ${a}
   `};

package/dist/esm/components/highlight/components/getHoleAnimateVariants.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 export declare const getHoleAnimateVariants: ({ x, y, width, height }: Layout) => {
     initial: {
         x: number;

package/dist/esm/components/highlight/components/getHoleAnimateVariants.js

@@ -1 +1 @@
-"use strict";import{Dimensions as z}from"react-native";import{calculateOffset as t}from"../utils/index.js";export const getHoleAnimateVariants=({x:n,y:s,width:i,height:e})=>{const{width:c,height:x}=z.get("window"),a=i*.9,o=e*.9,r=c*2.5,d=x*1.5;return{initial:{x:t({base:n,prevSize:i,nextSize:a}),y:t({base:s,prevSize:e,nextSize:o}),width:a,height:o,radius:16},default:{x:n,y:s,width:i,height:e,radius:16},exit:{x:t({base:n,prevSize:i,nextSize:r}),y:t({base:s,prevSize:e,nextSize:d}),width:r,height:d,radius:1e3}}};
+"use strict";import{Dimensions as z}from"react-native";import{calculateOffset as t}from"../utils";export const getHoleAnimateVariants=({x:n,y:s,width:i,height:e})=>{const{width:c,height:x}=z.get("window"),a=i*.9,o=e*.9,r=c*2.5,d=x*1.5;return{initial:{x:t({base:n,prevSize:i,nextSize:a}),y:t({base:s,prevSize:e,nextSize:o}),width:a,height:o,radius:16},default:{x:n,y:s,width:i,height:e,radius:16},exit:{x:t({base:n,prevSize:i,nextSize:r}),y:t({base:s,prevSize:e,nextSize:d}),width:r,height:d,radius:1e3}}};

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

@@ -1,4 +1,4 @@
-export { Message } from './Message.js';
-export { MessageBox } from './MessageBox.js';
-export { PassClickEventThroughHoleOverlay } from './PassClickEventThroughHoleOverlay.js';
-export { SvgHighlightOverlay } from './SvgHighlightOverlay.js';
+export { Message } from './Message';
+export { MessageBox } from './MessageBox';
+export { PassClickEventThroughHoleOverlay } from './PassClickEventThroughHoleOverlay';
+export { SvgHighlightOverlay } from './SvgHighlightOverlay';

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

@@ -1 +1 @@
-"use strict";export{Message}from"./Message.js";export{MessageBox}from"./MessageBox.js";export{PassClickEventThroughHoleOverlay}from"./PassClickEventThroughHoleOverlay.js";export{SvgHighlightOverlay}from"./SvgHighlightOverlay.js";
+"use strict";export{Message}from"./Message";export{MessageBox}from"./MessageBox";export{PassClickEventThroughHoleOverlay}from"./PassClickEventThroughHoleOverlay";export{SvgHighlightOverlay}from"./SvgHighlightOverlay";

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

@@ -1,2 +1,2 @@
-export { useHighlightUIAnimation } from './useHighlightUIAnimation.js';
-export { useTimeout } from './useTimeout.js';
+export { useHighlightUIAnimation } from './useHighlightUIAnimation';
+export { useTimeout } from './useTimeout';

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

@@ -1 +1 @@
-"use strict";export{useHighlightUIAnimation}from"./useHighlightUIAnimation.js";export{useTimeout}from"./useTimeout.js";
+"use strict";export{useHighlightUIAnimation}from"./useHighlightUIAnimation";export{useTimeout}from"./useTimeout";

package/dist/esm/components/highlight/hooks/useHighlightUIAnimation.js

@@ -1 +1 @@
-"use strict";import{useRef as o}from"react";import{Platform as u}from"react-native";import{spring as r}from"@toss/tds-easings";import{Animated as e}from"../../../interactions/animated/index.js";export const useHighlightUIAnimation=()=>{const t=u.OS==="android",i=o(new e.Value(t?1:0)).current,a=o(new e.Value(0)).current,n=o(new e.Value(0)).current;return{style:{overlayOpacity:a,holeStep:i,messageOpacity:n},enter:()=>new Promise(s=>e.parallel([...t?[]:[e.spring(i,{...r.basic,toValue:1,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:1,useNativeDriver:!0}),e.spring(n,{...r.quick,toValue:1,useNativeDriver:!0})]).start(()=>{s()})),exit:()=>new Promise(s=>{e.parallel([...t?[]:[e.spring(i,{...r.slow,toValue:2,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:0,useNativeDriver:!0}),e.spring(n,{...r.rapid,toValue:0,useNativeDriver:!0})]).start(()=>{s()})})}};
+"use strict";import{useRef as o}from"react";import{Platform as u}from"react-native";import{spring as r}from"@toss/tds-easings";import{Animated as e}from"../../../interactions/animated";export const useHighlightUIAnimation=()=>{const t=u.OS==="android",i=o(new e.Value(t?1:0)).current,a=o(new e.Value(0)).current,n=o(new e.Value(0)).current;return{style:{overlayOpacity:a,holeStep:i,messageOpacity:n},enter:()=>new Promise(s=>e.parallel([...t?[]:[e.spring(i,{...r.basic,toValue:1,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:1,useNativeDriver:!0}),e.spring(n,{...r.quick,toValue:1,useNativeDriver:!0})]).start(()=>{s()})),exit:()=>new Promise(s=>{e.parallel([...t?[]:[e.spring(i,{...r.slow,toValue:2,useNativeDriver:!0})],e.spring(a,{...r.basic,toValue:0,useNativeDriver:!0}),e.spring(n,{...r.rapid,toValue:0,useNativeDriver:!0})]).start(()=>{s()})})}};

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

@@ -1,2 +1,2 @@
-export { Highlight } from './Highlight.js';
-export type { HighlightProps } from './types.js';
+export { Highlight } from './Highlight';
+export type { HighlightProps } from './types';

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

@@ -1 +1 @@
-"use strict";export{Highlight}from"./Highlight.js";
+"use strict";export{Highlight}from"./Highlight";

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

@@ -1,4 +1,4 @@
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 type AddLayoutPaddingProps = {
     layout: Layout;
     padding: {

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

@@ -1,4 +1,4 @@
-import type { Layout } from '../types.js';
+import type { Layout } from '../types';
 export declare const generateRadiusRectanglePath: ({ x, y, width, height, radius }: Layout & {
     radius: number;
 }) => string;

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

@@ -1,5 +1,5 @@
-export { addLayoutPadding } from './addLayoutPadding.js';
-export { calculateOffset } from './calculateOffset.js';
-export { generateOverlayPath, generateRadiusRectanglePath, generateWindowPath } from './generateSvgPath.js';
-export { getElementXAlignment, getElementYAlignment } from './getElementAlignment.js';
-export { sToMs } from './sToMs.js';
+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

@@ -1 +1 @@
-"use strict";export{addLayoutPadding}from"./addLayoutPadding.js";export{calculateOffset}from"./calculateOffset.js";export{generateOverlayPath,generateRadiusRectanglePath,generateWindowPath}from"./generateSvgPath.js";export{getElementXAlignment,getElementYAlignment}from"./getElementAlignment.js";export{sToMs}from"./sToMs.js";
+"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/icon/Icon.d.ts

@@ -1,6 +1,6 @@
-import type { ViewProps } from 'react-native';
+import type { AccessibilityProps, ViewProps } from 'react-native';
 import { View } from 'react-native';
-export interface IconProps extends Pick<ViewProps, 'accessibilityLabel' | 'accessible' | 'style'> {
+export interface IconProps extends Pick<ViewProps, 'style'>, AccessibilityProps {
     size?: number;
     color?: string;
     /** @default default */

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

@@ -1 +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.js";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}});
+"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

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

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

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

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

@@ -1 +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.js";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}});
+"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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as u,jsxs as w,Fragment as _}from"react/jsx-runtime";import{Mask as W,Rect as Y,Svg as E,Image as H}from"@granite-js/native/react-native-svg";import{getNextColorValue as x}from"@toss/tds-color-utils";import{bezier as I,spring as o}from"@toss/tds-easings";import{forwardRef as L,memo as G,useCallback as p,useRef as g}from"react";import{Easing as V,Pressable as J}from"react-native";import{useAdaptive as Q}from"../../core/index.js";import{Animated as e}from"../../interactions/animated/index.js";import{generateHapticFeedback as T}from"../../native/generateHapticFeedback.js";import{SvgIcon as U}from"../icon/private/index.js";const X=e.createAnimatedComponent(E),Z=e.createAnimatedComponent(Y),$=e.createAnimatedComponent(J),z=L(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=Q(),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,x({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?x({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(...I.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(...I.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),T({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(W,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[h!==void 0&&u(H,{href:h,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),b!==void 0&&u(U,{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=G(z);function ee(t){return 18<=t&&t<=20?9:t/2}function te(t){return t<=16?6:t<=20?8:12}
+"use strict";import{jsx as u,jsxs as w,Fragment as _}from"react/jsx-runtime";import{Mask as W,Rect as Y,Svg as E,Image as H}from"@granite-js/native/react-native-svg";import{getNextColorValue as x}from"@toss/tds-color-utils";import{bezier as I,spring as o}from"@toss/tds-easings";import{forwardRef as L,memo as G,useCallback as p,useRef as g}from"react";import{Easing as V,Pressable as J}from"react-native";import{useAdaptive as Q}from"../../core";import{Animated as e}from"../../interactions/animated";import{generateHapticFeedback as T}from"../../native/generateHapticFeedback";import{SvgIcon as U}from"../icon/private";const X=e.createAnimatedComponent(E),Z=e.createAnimatedComponent(Y),$=e.createAnimatedComponent(J),z=L(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=Q(),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,x({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?x({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(...I.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(...I.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),T({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(W,{id:"mask",x:"0",y:"0",width:"100",height:"100",children:[h!==void 0&&u(H,{href:h,x:"0",y:"0",height:"100",width:"100",preserveAspectRatio:"xMidYMid meet"}),b!==void 0&&u(U,{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=G(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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as e}from"react/jsx-runtime";import{Txt as n}from"../../txt/index.js";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})}
+"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/SecureKeyButton.d.ts

@@ -1,4 +1,4 @@
-import type { RequiredExcept, SecureKey } from './keys.js';
+import type { RequiredExcept, SecureKey } from './keys';
 type Props = {
     secureKey: RequiredExcept<SecureKey, 'subText'>;
     onPressIn: (value: string) => void;

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

@@ -1 +1 @@
-"use strict";import{jsx as e,Fragment as p,jsxs as d}from"react/jsx-runtime";import{Txt as i}from"../../txt/index.js";import{Pressable as h,StyleSheet as x,View as u}from"react-native";import{BackspaceIcon as y}from"./BackspaceIcon.js";import{SPECIAL_KEY as g}from"./keys.js";import{useAccessibilityInfo as S}from"../../../utils/index.js";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}});
+"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/getGridTemplateForRow.d.ts

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

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

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as f}from"react/jsx-runtime";import{colors as A}from"@toss/tds-colors";import{forwardRef as S,memo as g,useCallback as P,useImperativeHandle as K,useRef as x}from"react";import{View as t}from"react-native";import{useAdaptive as L}from"../../../core/index.js";import{ControlKeyButton as d}from"./ControlKeyButton.js";import{GridItem as i}from"./GridItem.js";import{GridRow as h}from"./GridRow.js";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.js";import{SecureKeyButton as Y}from"./SecureKeyButton.js";import{ShiftIcon as j}from"./ShiftIcon.js";import{KeypadStatus as n,useKeypad as w}from"./useKeypad.js";export const FullSecureKeypad=g(S(({style:u,onKeyPress:m,onBackspacePress:a,onSpacePress:I,onSubmit:C,submitButtonText:_="\uC785\uB825 \uC644\uB8CC",submitDisabled:p=!1},y)=>{const s=L(),r=w(),c=x(null);K(y,()=>({reorderEmptyCells:r.reorderEmptyCells,element:c.current}),[r]);const E=P(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:A.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:_})})]})})]})}));
+"use strict";import{jsx as e,jsxs as f}from"react/jsx-runtime";import{colors as A}from"@toss/tds-colors";import{forwardRef as S,memo as g,useCallback as P,useImperativeHandle as K,useRef as x}from"react";import{View as t}from"react-native";import{useAdaptive as L}from"../../../core";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=g(S(({style:u,onKeyPress:m,onBackspacePress:a,onSpacePress:I,onSubmit:C,submitButtonText:_="\uC785\uB825 \uC644\uB8CC",submitDisabled:p=!1},y)=>{const s=L(),r=w(),c=x(null);K(y,()=>({reorderEmptyCells:r.reorderEmptyCells,element:c.current}),[r]);const E=P(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:A.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/useKeypad.d.ts

@@ -6,20 +6,20 @@ export declare enum KeypadStatus {
 export declare function useKeypad(): {
     mode: KeypadStatus;
     keys: {
-        keys: import("./keys.js").RequiredExcept<import("./keys.js").SecureKey, "subText">[];
+        keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
         emptyCellCount: number;
     }[];
     shuffledKeys: {
         0: {
-            keys: import("./keys.js").RequiredExcept<import("./keys.js").SecureKey, "subText">[];
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
             emptyCellCount: number;
         }[];
         1: {
-            keys: import("./keys.js").RequiredExcept<import("./keys.js").SecureKey, "subText">[];
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
             emptyCellCount: number;
         }[];
         2: {
-            keys: import("./keys.js").RequiredExcept<import("./keys.js").SecureKey, "subText">[];
+            keys: import("./keys").RequiredExcept<import("./keys").SecureKey, "subText">[];
             emptyCellCount: number;
         }[];
     };

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

@@ -1 +1 @@
-"use strict";import{useCallback as E,useMemo as i,useState as n}from"react";import{withShuffledEmptyCells as L}from"./getGridTemplateForRow.js";import{capitalize as B,englishCharacterKeys as o,fillInDefaults as P,specialCharacterKeys as H}from"./keys.js";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}}
+"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.js

@@ -1 +1 @@
-"use strict";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{Svg as s,ClipPath as a,G as o,Path as c}from"@granite-js/native/react-native-svg";import{useAdaptive as l}from"../../../core/index.js";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})})]})});
+"use strict";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{Svg as 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.js

@@ -1 +1 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import{forwardRef as f}from"react";import{VirtualKeypad as p}from"./VirtualKeypad.js";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}));
+"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.js

@@ -1 +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.js";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}
+"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.js

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{Txt as i}from"../../txt/index.js";import{memo as c,useMemo as a}from"react";import{Pressable as l}from"react-native";import{Backspace as m}from"./Backspace.js";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})})});
+"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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";export*from"./FullSecureKeypad/index.js";export*from"./NumberKeypad/index.js";
+"use strict";export*from"./FullSecureKeypad";export*from"./NumberKeypad";

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { TouchableHighlightProps } from 'react-native';
-import { ListFooterRight } from './ListFooterRight.js';
-import { ListFooterTitle } from './ListFooterTitle.js';
+import { ListFooterRight } from './ListFooterRight';
+import { ListFooterTitle } from './ListFooterTitle';
 export interface ListFooterProps {
     /**
      * `ListFooter` 컴포넌트의 제목을 설정해요.

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

@@ -1 +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/index.js";import{ListFooterRight as u}from"./ListFooterRight.js";import{ListFooterTitle as c}from"./ListFooterTitle.js";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;
+"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/ListFooterTitle.d.ts

@@ -1,4 +1,4 @@
-import type { TxtProps } from '../txt/index.js';
+import type { TxtProps } from '../txt';
 export interface ListFooterTitleProps extends TxtProps {
     /**
      * `ListFooter.Title` 컴포넌트의 텍스트 스타일을 설정해요.

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

@@ -1 +1 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{colors as p}from"@toss/tds-colors";import{Txt as f}from"../txt/index.js";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})}
+"use strict";import{jsx as m}from"react/jsx-runtime";import{colors as p}from"@toss/tds-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

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

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

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

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

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

@@ -1 +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/index.js";import{Icon as y}from"../icon/index.js";import*as o from"../paragraph/index.js";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")}
+"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

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
-import { ListHeaderDescriptionParagraph } from './ListHeaderDescriptionParagraph.js';
-import { ListHeaderRightArrow, ListHeaderRightText } from './ListHeaderRight.js';
-import { ListHeaderTitleParagraph } from './ListHeaderTitleParagraph.js';
-import { ListHeaderTitleSelector } from './ListHeaderTitleSelector.js';
-import { ListHeaderTitleTextButton } from './ListHeaderTitleTextButton.js';
+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`의 상단에 표시될 보조 설명 영역이에요.

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

@@ -1 +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.js";import{ListHeaderDescriptionParagraph as H}from"./ListHeaderDescriptionParagraph.js";import{ListHeaderRightArrow as y,ListHeaderRightText as L}from"./ListHeaderRight.js";import{ListHeaderTitleParagraph as R}from"./ListHeaderTitleParagraph.js";import{ListHeaderTitleSelector as w}from"./ListHeaderTitleSelector.js";import{ListHeaderTitleTextButton as P}from"./ListHeaderTitleTextButton.js";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};
+"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

@@ -1,4 +1,4 @@
-import type { ParagraphTextProps } from '../paragraph/index.js';
+import type { ParagraphTextProps } from '../paragraph';
 import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 export interface ListHeaderTitleParagraphProps {

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

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{useAdaptive as h}from"../../core/index.js";import*as n from"../paragraph/index.js";import{useCallback as x,useContext as y,useMemo as g}from"react";import{ListHeaderContext as d}from"./ListHeaderContext.js";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})})}
+"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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { PressableProps, StyleProp, TextStyle, View } from 'react-native';
-import type { ParagraphTextProps } from '../paragraph/index.js';
+import type { ParagraphTextProps } from '../paragraph';
 export interface ListHeaderTitleSelectorProps {
     /**
      * `ListHeader.TitleSelector` 컴포넌트의 텍스트 스타일을 설정해요.

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

@@ -1 +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/index.js";import*as e from"../paragraph/index.js";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})})})});
+"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

@@ -1,4 +1,4 @@
-import type { TextButtonProps } from '../text-button/index.js';
+import type { TextButtonProps } from '../text-button';
 export interface ListHeaderTitleTextButtonProps extends TextButtonProps {
     /**
      * `ListHeader.TitleTextButton` 컴포넌트의 텍스트 스타일을 설정해요.

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

@@ -1 +1 @@
-"use strict";import{jsx as r}from"react/jsx-runtime";import{TextButton as e}from"../text-button/index.js";export function ListHeaderTitleTextButton({...t}){return r(e,{variant:"underline",...t})}
+"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

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

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

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

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

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