@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/TimePicker/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, TimePicker } from "./TimePicker.js";
-//# sourceMappingURL=index.js.map
+export{default,TimePicker}from"./TimePicker.js";

package/lib/module/components/Timeline/Timeline.js

@@ -1,257 +1 @@
-"use strict";
-
-import React, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
-import { tintOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-
-/**
- * The status vocabulary is shared with the web library's AppTimeline so a
- * sign-off history reads identically on both surfaces.
- *
- *   upcoming  — not started yet        (muted disc)
- *   current   — in progress now        (warning)
- *   done      — completed              (success)
- *   onHold    — blocked / waiting      (info)
- *   rejected  — declined / failed      (error)
- *   cancelled — aborted                (muted)
- *   skipped   — intentionally bypassed (muted)
- *
- * Every dot sits inside a soft halo of its own colour (the accent at 16
- * percent), the web timeline's glow. The halo is a layout wrapper, not a
- * platform shadow: a shadow cannot be coloured on Android and sits outside
- * layout, while a wrapper keeps the connector spacing exact.
- */
-
-/** Same two names as the web library's AppTimeline; orthogonal to `variant`. */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const DOT = 12;
-const HALO = 6;
-const RAIL = 2;
-const GAP = 4;
-const GUTTER = 28;
-const HALO_OPACITY = 0.16;
-
-/**
- * A chronological activity feed OR a status-progress tracker. Stepper covers a
- * linear "which step am I on" flow; this covers "what has happened to this
- * record", where entries carry their own status and can end in a terminal one.
- */
-export const Timeline = ({
-  items,
-  variant = 'feed',
-  orientation = 'vertical',
-  style,
-  testID
-}) => {
-  const theme = useTheme();
-  const tokens = theme.components.timeline;
-  const dotSize = tokens?.dotSize ?? DOT;
-  const haloWidth = tokens?.haloWidth ?? HALO;
-  const gap = tokens?.connectorGap ?? GAP;
-  const discSize = dotSize + haloWidth * 2;
-  const styles = useMemo(() => buildStyles(theme, dotSize, discSize, gap), [theme, dotSize, discSize, gap]);
-  const horizontal = orientation === 'horizontal';
-  const railColor = theme.colors.border.primary;
-
-  // Horizontal columns get an explicit equal width from the measured row.
-  // `flex: 1` alone let a column with a long unbreakable word or a wide meta
-  // line take more than its share, so the dots drifted apart unevenly. Until
-  // the first layout the columns flex, so nothing jumps on mount.
-  const [rowWidth, setRowWidth] = useState(0);
-  const onRowLayout = useCallback(event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    setRowWidth(prev => prev === width ? prev : width);
-  }, []);
-  const columnWidth = horizontal && rowWidth > 0 && items.length > 0 ? rowWidth / items.length : 0;
-  const colourFor = status => {
-    switch (status) {
-      case 'done':
-        return theme.colors.success;
-      case 'current':
-        return theme.colors.warning;
-      case 'onHold':
-        return theme.colors.info;
-      case 'rejected':
-        return theme.colors.error;
-      case 'cancelled':
-      case 'skipped':
-        return theme.colors.text.tertiary;
-      default:
-        return theme.colors.text.disabled;
-    }
-  };
-  const renderDisc = (item, accent) => item.icon ? /*#__PURE__*/_jsx(View, {
-    style: styles.disc,
-    children: item.icon
-  }) : /*#__PURE__*/_jsx(View, {
-    style: [styles.disc, {
-      backgroundColor: tintOf(accent, HALO_OPACITY, theme.colors.background.tertiary)
-    }],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.dot, {
-        backgroundColor: accent
-      }]
-    })
-  });
-  const renderText = (item, status) => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.title, {
-        fontSize: horizontal ? theme.typography.fontSize.sm : theme.typography.fontSize.base,
-        color: status === 'upcoming' ? theme.colors.text.secondary : theme.colors.text.primary
-      }, horizontal ? styles.centred : null],
-      children: item.title
-    }), item.meta ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.meta, {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.text.tertiary
-      }, horizontal ? styles.centred : null],
-      children: item.meta
-    }) : null, item.description ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.description, {
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.text.secondary
-      }, horizontal ? styles.centred : null],
-      children: item.description
-    }) : null, item.children]
-  });
-  const entries = items.map((item, index) => {
-    const status = item.status ?? (variant === 'feed' ? 'done' : 'upcoming');
-    const accent = item.color ?? colourFor(status);
-    const isFirst = index === 0;
-    const isLast = index === items.length - 1;
-    const key = item.key ?? `${item.title}-${index}`;
-    if (horizontal) {
-      // The connector is two half segments, this column's right and the next
-      // column's left, so it runs from one halo's edge to the next with the
-      // gap either side and nothing ever passes under a translucent halo.
-      return /*#__PURE__*/_jsxs(View, {
-        style: [styles.hColumn, columnWidth > 0 ? {
-          width: columnWidth,
-          flex: 0
-        } : null],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.hDotRow,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.hSegment, {
-              marginRight: gap,
-              backgroundColor: isFirst ? 'transparent' : railColor
-            }]
-          }), renderDisc(item, accent), /*#__PURE__*/_jsx(View, {
-            style: [styles.hSegment, {
-              marginLeft: gap,
-              backgroundColor: isLast ? 'transparent' : railColor
-            }]
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.hBody,
-          children: renderText(item, status)
-        })]
-      }, key);
-    }
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.gutter,
-        children: [renderDisc(item, accent), isLast ? null : /*#__PURE__*/_jsx(View, {
-          style: [styles.rail, {
-            backgroundColor: railColor
-          }]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.body, {
-          paddingBottom: isLast ? 0 : theme.spacing.lg
-        }],
-        children: renderText(item, status)
-      })]
-    }, key);
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: [horizontal ? styles.hRow : null, style],
-    onLayout: horizontal ? onRowLayout : undefined,
-    testID: testID,
-    children: entries
-  });
-};
-const buildStyles = (theme, dotSize, discSize, gap) => StyleSheet.create({
-  row: {
-    flexDirection: 'row'
-  },
-  gutter: {
-    width: Math.max(GUTTER, discSize + 4),
-    alignItems: 'center'
-  },
-  disc: {
-    width: discSize,
-    height: discSize,
-    borderRadius: discSize / 2,
-    ...smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  dot: {
-    width: dotSize,
-    height: dotSize,
-    borderRadius: dotSize / 2,
-    ...smoothCorners
-  },
-  rail: {
-    width: RAIL,
-    flex: 1,
-    marginTop: gap,
-    borderRadius: RAIL / 2,
-    ...smoothCorners
-  },
-  body: {
-    flex: 1,
-    gap: 2,
-    // The disc fills most of the gutter, so the text needs its own inset
-    // from the halo's edge; without it the title sits against the tint.
-    paddingLeft: theme.spacing.sm
-  },
-  hRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  hColumn: {
-    flex: 1,
-    minWidth: 0,
-    alignItems: 'center'
-  },
-  hDotRow: {
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  hSegment: {
-    flex: 1,
-    height: RAIL,
-    borderRadius: RAIL / 2,
-    ...smoothCorners
-  },
-  hBody: {
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.xs,
-    marginTop: theme.spacing.sm,
-    gap: 2
-  },
-  centred: {
-    textAlign: 'center'
-  },
-  title: {
-    ...fontFor(theme, 'semibold'),
-    fontWeight: '600'
-  },
-  meta: {
-    ...fontFor(theme, 'normal')
-  },
-  description: {
-    ...fontFor(theme, 'normal')
-  }
-});
-export default Timeline;
-//# sourceMappingURL=Timeline.js.map
+import e,{useCallback as t,useMemo as r,useState as o}from"react";import{StyleSheet as n,Text as i,View as l}from"react-native";import{fontFor as s,useTheme as c}from"../../theme/index.js";import{tintOf as a}from"../../utils/color.js";import{smoothCorners as d}from"../../utils/corners.js";import{jsx as h,Fragment as m,jsxs as g}from"react/jsx-runtime";export const Timeline=({items:e,variant:n="feed",orientation:s="vertical",style:d,testID:u})=>{const p=c(),y=p.components.timeline,f=y?.dotSize??12,x=y?.haloWidth??6,w=y?.connectorGap??4,b=f+2*x,S=r(()=>buildStyles(p,f,b,w),[p,f,b,w]),z="horizontal"===s,R=p.colors.border.primary,[j,k]=o(0),C=t(e=>{const{width:t}=e.nativeEvent.layout;k(e=>e===t?e:t)},[]),I=z&&j>0&&e.length>0?j/e.length:0,renderDisc=(e,t)=>e.icon?h(l,{style:S.disc,children:e.icon}):h(l,{style:[S.disc,{backgroundColor:a(t,.16,p.colors.background.tertiary)}],children:h(l,{style:[S.dot,{backgroundColor:t}]})}),renderText=(e,t)=>g(m,{children:[h(i,{style:[S.title,{fontSize:z?p.typography.fontSize.sm:p.typography.fontSize.base,color:"upcoming"===t?p.colors.text.secondary:p.colors.text.primary},z?S.centred:null],children:e.title}),e.meta?h(i,{style:[S.meta,{fontSize:p.typography.fontSize.xs,color:p.colors.text.tertiary},z?S.centred:null],children:e.meta}):null,e.description?h(i,{style:[S.description,{fontSize:p.typography.fontSize.sm,color:p.colors.text.secondary},z?S.centred:null],children:e.description}):null,e.children]}),D=e.map((t,r)=>{const o=t.status??("feed"===n?"done":"upcoming"),i=t.color??(e=>{switch(e){case"done":return p.colors.success;case"current":return p.colors.warning;case"onHold":return p.colors.info;case"rejected":return p.colors.error;case"cancelled":case"skipped":return p.colors.text.tertiary;default:return p.colors.text.disabled}})(o),s=0===r,c=r===e.length-1,a=t.key??`${t.title}-${r}`;return g(l,z?{style:[S.hColumn,I>0?{width:I,flex:0}:null],children:[g(l,{style:S.hDotRow,children:[h(l,{style:[S.hSegment,{marginRight:w,backgroundColor:s?"transparent":R}]}),renderDisc(t,i),h(l,{style:[S.hSegment,{marginLeft:w,backgroundColor:c?"transparent":R}]})]}),h(l,{style:S.hBody,children:renderText(t,o)})]}:{style:S.row,children:[g(l,{style:S.gutter,children:[renderDisc(t,i),c?null:h(l,{style:[S.rail,{backgroundColor:R}]})]}),h(l,{style:[S.body,{paddingBottom:c?0:p.spacing.lg}],children:renderText(t,o)})]},a)});return h(l,{style:[z?S.hRow:null,d],onLayout:z?C:void 0,testID:u,children:D})};const buildStyles=(e,t,r,o)=>n.create({row:{flexDirection:"row"},gutter:{width:Math.max(28,r+4),alignItems:"center"},disc:{width:r,height:r,borderRadius:r/2,...d,alignItems:"center",justifyContent:"center"},dot:{width:t,height:t,borderRadius:t/2,...d},rail:{width:2,flex:1,marginTop:o,borderRadius:1,...d},body:{flex:1,gap:2,paddingLeft:e.spacing.sm},hRow:{flexDirection:"row",alignItems:"flex-start"},hColumn:{flex:1,minWidth:0,alignItems:"center"},hDotRow:{alignSelf:"stretch",flexDirection:"row",alignItems:"center"},hSegment:{flex:1,height:2,borderRadius:1,...d},hBody:{alignSelf:"stretch",alignItems:"center",paddingHorizontal:e.spacing.xs,marginTop:e.spacing.sm,gap:2},centred:{textAlign:"center"},title:{...s(e,"semibold"),fontWeight:"600"},meta:{...s(e,"normal")},description:{...s(e,"normal")}});export default Timeline;

package/lib/module/components/Timeline/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Timeline } from "./Timeline.js";
-//# sourceMappingURL=index.js.map
+export{default,Timeline}from"./Timeline.js";

package/lib/module/components/Toast/Toast.js

@@ -1,321 +1 @@
-"use strict";
-
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_SWIPE_DISMISS_THRESHOLD = 80;
-const DEFAULT_SWIPE_VELOCITY_THRESHOLD = 0.5;
-const DEFAULT_STACK_OFFSET = 8;
-const DEFAULT_STACK_SCALE_STEP = 0.04;
-const DEFAULT_AUTO_DISMISS_MS = 3000;
-const Toast = ({
-  toast,
-  index,
-  onDismiss
-}) => {
-  const theme = useTheme();
-  const variant = toast.variant ?? 'default';
-  const position = toast.position ?? 'bottom';
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
-  const toastTokens = theme.components.toast;
-  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
-  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
-  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
-  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
-  const swipeDismissThreshold = toastTokens?.swipeDismissThreshold ?? DEFAULT_SWIPE_DISMISS_THRESHOLD;
-  const swipeVelocityThreshold = toastTokens?.swipeVelocityThreshold ?? DEFAULT_SWIPE_VELOCITY_THRESHOLD;
-  const stackOffset = toastTokens?.stackOffset ?? DEFAULT_STACK_OFFSET;
-  const stackScaleStep = toastTokens?.stackScaleStep ?? DEFAULT_STACK_SCALE_STEP;
-  const stackMinScale = toastTokens?.stackMinScale ?? 0.9;
-  const defaultDurationMs = toastTokens?.defaultDurationMs ?? DEFAULT_AUTO_DISMISS_MS;
-  const enableSwipeDismiss = toastTokens?.enableSwipeDismiss ?? true;
-  const enterSpringDamping = toastTokens?.enterSpringDamping ?? 18;
-  const enterSpringStiffness = toastTokens?.enterSpringStiffness ?? 180;
-  const enterSpringMass = toastTokens?.enterSpringMass ?? 1;
-  const enterFrom = position === 'top' ? -120 : 120;
-  const translateY = useRef(createAnimatedValue(enterFrom)).current;
-  const translateX = useRef(createAnimatedValue(0)).current;
-  const opacity = useRef(createAnimatedValue(0)).current;
-  const dismissedRef = useRef(false);
-  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
-  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
-
-  // The stack offset rides on its own value so the enter spring (translateY)
-  // and the layout offset compose once instead of rebuilding a fresh
-  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
-  // keeps it in sync after the node has moved to the native driver.
-  const stackTranslateY = useRef(createAnimatedValue(stackTranslate)).current;
-  useEffect(() => {
-    setNativeValue(stackTranslateY, stackTranslate);
-  }, [stackTranslate, stackTranslateY]);
-  const composedTranslateY = useMemo(() => Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
-  const dismiss = () => {
-    if (dismissedRef.current) {
-      return;
-    }
-    dismissedRef.current = true;
-    Animated.parallel([Animated.timing(opacity, {
-      toValue: 0,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate),
-      useNativeDriver: true
-    }), Animated.timing(translateY, {
-      toValue: enterFrom,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate),
-      useNativeDriver: true
-    })]).start(() => onDismiss(toast.id));
-  };
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-once: a toast enters and schedules its own auto-dismiss. `dismiss` is re-created per render, so declaring it would restart the timer on every parent render and the toast would never leave
-  useEffect(() => {
-    const enter = Animated.parallel([Animated.spring(translateY, {
-      toValue: 0,
-      damping: enterSpringDamping,
-      stiffness: enterSpringStiffness,
-      mass: enterSpringMass,
-      useNativeDriver: true
-    }), Animated.timing(opacity, {
-      toValue: 1,
-      duration: theme.motion.duration.fast,
-      useNativeDriver: true
-    })]);
-    enter.start();
-    const duration = toast.duration ?? defaultDurationMs;
-    if (duration > 0) {
-      const timer = setTimeout(() => dismiss(), duration);
-      return () => {
-        enter.stop();
-        clearTimeout(timer);
-      };
-    }
-    return () => enter.stop();
-  }, []);
-  const panResponder = useMemo(() => PanResponder.create({
-    onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
-    onPanResponderMove: (_evt, gesture) => {
-      setNativeValue(translateX, gesture.dx);
-      const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
-      setNativeValue(opacity, fade);
-    },
-    // A stolen responder (parent scroll, system gesture) otherwise leaves the
-    // toast parked mid-swipe at reduced opacity, neither dismissed nor reset.
-    onPanResponderTerminate: () => {
-      Animated.parallel([Animated.spring(translateX, {
-        toValue: 0,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      }), Animated.timing(opacity, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        useNativeDriver: true
-      })]).start();
-    },
-    onPanResponderRelease: (_evt, gesture) => {
-      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
-        const direction = gesture.dx >= 0 ? 1 : -1;
-        Animated.parallel([Animated.timing(translateX, {
-          toValue: direction * 500,
-          duration: theme.motion.duration.fast,
-          useNativeDriver: true
-        }), Animated.timing(opacity, {
-          toValue: 0,
-          duration: theme.motion.duration.fast,
-          useNativeDriver: true
-        })]).start(() => {
-          dismissedRef.current = true;
-          onDismiss(toast.id);
-        });
-      } else {
-        Animated.parallel([Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: true
-        }), Animated.spring(opacity, {
-          toValue: 1,
-          useNativeDriver: true
-        })]).start();
-      }
-    }
-  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, theme.motion.spring.snappy.damping, theme.motion.spring.snappy.stiffness, theme.motion.spring.snappy.mass, onDismiss, toast.id]);
-  const handleActionPress = () => {
-    toast.action?.onPress();
-    dismiss();
-  };
-  const renderIcon = () => {
-    if (toast.icon) {
-      return toast.icon;
-    }
-    const glyph = defaultGlyph(variant);
-    if (!glyph) {
-      return null;
-    }
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.iconCircle, {
-        width: iconCircleSize,
-        height: iconCircleSize,
-        borderRadius: iconCircleBorderRadius,
-        ...smoothCorners,
-        backgroundColor: tint + '22'
-      }, toast.iconCircleStyle],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.iconGlyph, {
-          color: tint,
-          fontSize: iconGlyphFontSize
-        }],
-        accessible: false,
-        children: glyph
-      })
-    });
-  };
-  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
-    accessibilityRole: "alert",
-    accessibilityLiveRegion: "assertive",
-    accessibilityLabel: a11yLabel,
-    testID: toast.testID,
-    style: [styles.container, {
-      backgroundColor: theme.colors.background.elevated,
-      borderRadius: theme.radius.lg,
-      ...smoothCorners,
-      padding: theme.spacing.md,
-      ...theme.shadows.md,
-      shadowColor: theme.shadows.md.shadowColor,
-      opacity,
-      transform: [{
-        translateY: composedTranslateY
-      }, {
-        translateX
-      }, {
-        scale: stackScale
-      }]
-    }, toast.style, toast.containerStyle],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.tintBar, {
-        width: tintBarWidth,
-        backgroundColor: tint
-      }]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
-        style: styles.textBlock,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.message, {
-            color: theme.colors.text.primary,
-            fontSize: theme.typography.fontSize.base,
-            ...fontFor(theme, 'semibold')
-          }, toast.textStyle, toast.messageStyle],
-          numberOfLines: 2,
-          children: toast.message
-        }), toast.description ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.description, {
-            color: theme.colors.text.secondary,
-            fontSize: theme.typography.fontSize.sm
-          }],
-          numberOfLines: 3,
-          children: toast.description
-        }) : null]
-      }), toast.action ? /*#__PURE__*/_jsx(Pressable, {
-        accessibilityRole: "button",
-        accessibilityLabel: toast.action.label,
-        onPress: handleActionPress,
-        style: ({
-          pressed
-        }) => [styles.actionBtn, {
-          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }, toast.actionButtonStyle],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: tint,
-            fontSize: theme.typography.fontSize.sm,
-            ...fontFor(theme, 'semibold')
-          },
-          numberOfLines: 1,
-          children: toast.action.label
-        })
-      }) : null]
-    })]
-  });
-};
-const tintFor = (theme, variant) => {
-  switch (variant) {
-    case 'success':
-      return theme.colors.success;
-    case 'error':
-      return theme.colors.error;
-    case 'warning':
-      return theme.colors.warning;
-    case 'info':
-      return theme.colors.info;
-    case 'default':
-    default:
-      return theme.colors.text.primary;
-  }
-};
-const defaultGlyph = variant => {
-  switch (variant) {
-    case 'success':
-      return '✓';
-    case 'error':
-      return '×';
-    case 'warning':
-      return '!';
-    case 'info':
-      return 'i';
-    case 'default':
-    default:
-      return '';
-  }
-};
-const buildStyles = _theme => StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    marginVertical: 4
-  },
-  tintBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: 8
-  },
-  iconCircle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12
-  },
-  iconGlyph: {
-    fontWeight: '700',
-    lineHeight: 18
-  },
-  textBlock: {
-    flex: 1,
-    paddingRight: 8
-  },
-  message: {
-    lineHeight: 20
-  },
-  description: {
-    marginTop: 2,
-    lineHeight: 18
-  },
-  actionBtn: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
-    ...smoothCorners,
-    marginLeft: 8
-  }
-});
-export { Toast };
-export default Toast;
-//# sourceMappingURL=Toast.js.map
+import e,{useEffect as t,useMemo as i,useRef as r}from"react";import{Animated as n,Easing as s,PanResponder as o,Pressable as a,StyleSheet as l,Text as c,View as d}from"react-native";import{createAnimatedValue as u,fontFor as p,setNativeValue as m,useTheme as g}from"../../theme/index.js";import{smoothCorners as f}from"../../utils/corners.js";import{jsx as h,jsxs as y}from"react/jsx-runtime";const Toast=({toast:e,index:l,onDismiss:b,shownAt:v})=>{const x=g(),S=e.variant??"default",w=e.position??"bottom",D=i(()=>buildStyles(x),[x]),M=i(()=>tintFor(x,S),[x,S]),R=x.components.toast,V=R?.iconCircleSize??28,z=R?.iconCircleBorderRadius??14,C=R?.iconGlyphFontSize??16,k=R?.tintBarWidth??4,N=R?.swipeDismissThreshold??80,B=R?.swipeVelocityThreshold??.5,L=R?.stackOffset??8,j=R?.stackScaleStep??.04,P=R?.stackMinScale??.9,T=R?.defaultDurationMs??3e3,H=R?.enableSwipeDismiss??!0,I=R?.enterSpringDamping??18,O=R?.enterSpringStiffness??180,G=R?.enterSpringMass??1,W="top"===w?-120:120,$=r(u(W)).current,A=r(u(0)).current,F=r(u(0)).current,X=r(!1),Y="top"===w?l*L:-l*L,q=Math.max(1-l*j,P),E=r(u(Y)).current;t(()=>{m(E,Y)},[Y,E]);const J=i(()=>n.add($,E),[$,E]),dismiss=()=>{X.current||(X.current=!0,n.parallel([n.timing(F,{toValue:0,duration:x.motion.duration.fast,easing:s.bezier(...x.motion.easing.accelerate),useNativeDriver:!0}),n.timing($,{toValue:W,duration:x.motion.duration.fast,easing:s.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>b(e.id)))};t(()=>{const t=n.parallel([n.spring($,{toValue:0,damping:I,stiffness:O,mass:G,useNativeDriver:!0}),n.timing(F,{toValue:1,duration:x.motion.duration.fast,useNativeDriver:!0})]);t.start();const i=e.duration??T;if(i>0){const e=void 0===v?0:Date.now()-v,r=setTimeout(()=>dismiss(),Math.max(i-e,0));return()=>{t.stop(),clearTimeout(r)}}return()=>t.stop()},[]);const K=i(()=>o.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderMove:(e,t)=>{m(A,t.dx);const i=1-.7*Math.min(Math.abs(t.dx)/200,1);m(F,i)},onPanResponderTerminate:()=>{n.parallel([n.spring(A,{toValue:0,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0}),n.timing(F,{toValue:1,duration:x.motion.duration.fast,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>N||Math.abs(i.vx)>B){const t=i.dx>=0?1:-1;n.parallel([n.timing(A,{toValue:500*t,duration:x.motion.duration.fast,useNativeDriver:!0}),n.timing(F,{toValue:0,duration:x.motion.duration.fast,useNativeDriver:!0})]).start(()=>{X.current=!0,b(e.id)})}else n.parallel([n.spring(A,{toValue:0,useNativeDriver:!0}),n.spring(F,{toValue:1,useNativeDriver:!0})]).start()}}),[A,F,N,B,x.motion.duration.fast,x.motion.spring.snappy.damping,x.motion.spring.snappy.stiffness,x.motion.spring.snappy.mass,b,e.id]),Q=e.description?`${e.message}. ${e.description}`:e.message;return y(n.View,{...H?K.panHandlers:{},accessibilityRole:"alert",accessibilityLiveRegion:"assertive",accessibilityLabel:Q,testID:e.testID,style:[D.container,{backgroundColor:x.colors.background.elevated,borderRadius:x.radius.lg,...f,padding:x.spacing.md,...x.shadows.md,shadowColor:x.shadows.md.shadowColor,opacity:F,transform:[{translateY:J},{translateX:A},{scale:q}]},e.style,e.containerStyle],children:[h(d,{style:[D.tintBar,{width:k,backgroundColor:M}]}),y(d,{style:D.row,children:[(()=>{if(e.icon)return e.icon;const t=defaultGlyph(S);return t?h(d,{style:[D.iconCircle,{width:V,height:V,borderRadius:z,...f,backgroundColor:M+"22"},e.iconCircleStyle],children:h(c,{style:[D.iconGlyph,{color:M,fontSize:C}],accessible:!1,children:t})}):null})(),y(d,{style:D.textBlock,children:[h(c,{style:[D.message,{color:x.colors.text.primary,fontSize:x.typography.fontSize.base,...p(x,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?h(c,{style:[D.description,{color:x.colors.text.secondary,fontSize:x.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]}),e.action?h(a,{accessibilityRole:"button",accessibilityLabel:e.action.label,onPress:()=>{e.action?.onPress(),dismiss()},style:({pressed:t})=>[D.actionBtn,{backgroundColor:t?x.colors.surface.pressed:"transparent"},e.actionButtonStyle],children:h(c,{style:{color:M,fontSize:x.typography.fontSize.sm,...p(x,"semibold")},numberOfLines:1,children:e.action.label})}):null]})]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"error":return e.colors.error;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors.text.primary}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"error":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>l.create({container:{overflow:"hidden",marginVertical:4},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:8},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:12},iconGlyph:{fontWeight:"700",lineHeight:18},textBlock:{flex:1,paddingRight:8},message:{lineHeight:20},description:{marginTop:2,lineHeight:18},actionBtn:{paddingHorizontal:10,paddingVertical:6,borderRadius:8,...f,marginLeft:8}});export{Toast};export default Toast;