@otfdashkit/ui-native 0.1.1 → 0.1.2

package/dist/index.js

@@ -31,77 +31,77 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Accordion: () => import_tamagui76.Accordion,
+  Accordion: () => import_tamagui78.Accordion,
   ActionSheet: () => ActionSheet,
-  Adapt: () => import_tamagui76.Adapt,
-  AlertDialog: () => import_tamagui76.AlertDialog,
-  Anchor: () => import_tamagui76.Anchor,
-  AnimatePresence: () => import_tamagui76.AnimatePresence,
+  Adapt: () => import_tamagui78.Adapt,
+  AlertDialog: () => import_tamagui78.AlertDialog,
+  Anchor: () => import_tamagui78.Anchor,
+  AnimatePresence: () => import_tamagui78.AnimatePresence,
   AnimatedView: () => AnimatedView,
   AppHeader: () => AppHeader,
   AppleLogo: () => AppleLogo,
-  Article: () => import_tamagui76.Article,
-  Aside: () => import_tamagui76.Aside,
-  Avatar: () => import_tamagui76.Avatar,
+  Article: () => import_tamagui78.Article,
+  Aside: () => import_tamagui78.Aside,
+  Avatar: () => import_tamagui78.Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BottomSheet: () => BottomSheet,
-  Button: () => import_tamagui76.Button,
-  Card: () => import_tamagui76.Card,
+  Button: () => import_tamagui78.Button,
+  Card: () => import_tamagui78.Card,
   CardScroller: () => CardScroller,
   Carousel: () => Carousel,
   ChatBubble: () => ChatBubble,
-  Checkbox: () => import_tamagui76.Checkbox,
+  Checkbox: () => import_tamagui78.Checkbox,
   Chip: () => Chip,
   ChipGroup: () => ChipGroup,
   ChipsTabBar: () => ChipsTabBar,
-  Circle: () => import_tamagui76.Circle,
+  Circle: () => import_tamagui78.Circle,
   ConfirmDialog: () => ConfirmDialog,
   Container: () => Container,
   CountdownBanner: () => CountdownBanner,
   DataTable: () => DataTable,
   DatePicker: () => DatePicker,
-  Dialog: () => import_tamagui76.Dialog,
+  Dialog: () => import_tamagui78.Dialog,
   DialogProvider: () => DialogProvider,
   Divider: () => Divider,
   EmptyState: () => EmptyState,
-  EnsureFlexed: () => import_tamagui76.EnsureFlexed,
+  EnsureFlexed: () => import_tamagui78.EnsureFlexed,
   EventCard: () => EventCard,
   Expandable: () => Expandable,
-  Fieldset: () => import_tamagui76.Fieldset,
+  Fieldset: () => import_tamagui78.Fieldset,
   FinanceDashboard: () => FinanceDashboard,
   FloatingActionButton: () => FloatingActionButton,
-  Footer: () => import_tamagui76.Footer,
-  Form: () => import_tamagui76.Form,
+  Footer: () => import_tamagui78.Footer,
+  Form: () => import_tamagui78.Form,
   FormField: () => FormField,
-  Frame: () => import_tamagui76.Frame,
+  Frame: () => import_tamagui78.Frame,
   GitHubLogo: () => GitHubLogo,
   GlassCard: () => GlassCard,
   GoogleLogo: () => GoogleLogo,
   Grid: () => Grid,
-  Group: () => import_tamagui76.Group,
-  H1: () => import_tamagui76.H1,
-  H2: () => import_tamagui76.H2,
-  H3: () => import_tamagui76.H3,
-  H4: () => import_tamagui76.H4,
-  H5: () => import_tamagui76.H5,
-  H6: () => import_tamagui76.H6,
-  Header: () => import_tamagui76.Header,
-  Heading: () => import_tamagui76.Heading,
+  Group: () => import_tamagui78.Group,
+  H1: () => import_tamagui78.H1,
+  H2: () => import_tamagui78.H2,
+  H3: () => import_tamagui78.H3,
+  H4: () => import_tamagui78.H4,
+  H5: () => import_tamagui78.H5,
+  H6: () => import_tamagui78.H6,
+  Header: () => import_tamagui78.Header,
+  Heading: () => import_tamagui78.Heading,
   ICONS: () => ICONS,
   Icon: () => Icon,
   Image: () => import_tamagui11.Image,
   ImmersiveMediaScreen: () => ImmersiveMediaScreen,
-  Input: () => import_tamagui76.Input,
+  Input: () => import_tamagui78.Input,
   KeyboardStickyFooter: () => KeyboardStickyFooter,
-  Label: () => import_tamagui76.Label,
+  Label: () => import_tamagui78.Label,
   ListItem: () => ListItem,
   LoginScreen: () => LoginScreen,
-  Main: () => import_tamagui76.Main,
+  Main: () => import_tamagui78.Main,
   MediaCard: () => MediaCard,
   MicrosoftLogo: () => MicrosoftLogo,
   MultiStep: () => MultiStep,
-  Nav: () => import_tamagui76.Nav,
+  Nav: () => import_tamagui78.Nav,
   NotificationBanner: () => NotificationBanner,
   OTF_DESIGN_THEMES: () => OTF_DESIGN_THEMES,
   OTF_DESIGN_THEME_IDS: () => OTF_DESIGN_THEME_IDS,
@@ -114,7 +114,7 @@ __export(index_exports, {
   OtfDialog: () => OtfDialog,
   OtfInput: () => Input,
   OtfPopover: () => OtfPopover,
-  OtfProvider: () => import_tamagui76.TamaguiProvider,
+  OtfProvider: () => import_tamagui78.TamaguiProvider,
   OtfSelect: () => OtfSelect,
   OtfTabs: () => OtfTabs,
   OtfText: () => OtfText,
@@ -123,117 +123,120 @@ __export(index_exports, {
   OtfTooltip: () => OtfTooltip,
   PageContainer: () => PageContainer,
   PageMainContainer: () => PageMainContainer,
-  Paragraph: () => import_tamagui76.Paragraph,
+  Paragraph: () => import_tamagui78.Paragraph,
   PasswordInput: () => PasswordInput,
   PaywallScreen: () => PaywallScreen,
-  Popover: () => import_tamagui76.Popover,
-  Portal: () => import_tamagui76.Portal,
-  PortalHost: () => import_tamagui76.PortalHost,
-  PortalItem: () => import_tamagui76.PortalItem,
-  PortalProvider: () => import_tamagui76.PortalProvider,
+  Popover: () => import_tamagui78.Popover,
+  Portal: () => import_tamagui78.Portal,
+  PortalHost: () => import_tamagui78.PortalHost,
+  PortalItem: () => import_tamagui78.PortalItem,
+  PortalProvider: () => import_tamagui78.PortalProvider,
   Pressable: () => Pressable,
   PricingTable: () => PricingTable,
   ProductCard: () => ProductCard,
   ProfileHeader: () => ProfileHeader,
-  Progress: () => import_tamagui76.Progress,
+  Progress: () => import_tamagui78.Progress,
   ProgressSteps: () => ProgressSteps,
   PullToRefresh: () => PullToRefresh,
-  RadioGroup: () => import_tamagui76.RadioGroup,
+  RadioGroup: () => import_tamagui78.RadioGroup,
   RulerScrubber: () => RulerScrubber,
   SafeArea: () => SafeArea,
   ScreenLayout: () => ScreenLayout,
-  ScrollView: () => import_tamagui76.ScrollView,
+  ScrollView: () => import_tamagui78.ScrollView,
   SearchBar: () => SearchBar,
   Section: () => Section,
-  Select: () => import_tamagui76.Select,
+  Select: () => import_tamagui78.Select,
   Selectable: () => Selectable,
   SelectableGroup: () => SelectableGroup,
   SepHeading: () => SepHeading,
-  Separator: () => import_tamagui76.Separator,
+  Separator: () => import_tamagui78.Separator,
   SettingsScreen: () => SettingsScreen,
-  Sheet: () => import_tamagui76.Sheet,
-  SizableStack: () => import_tamagui76.SizableStack,
-  SizableText: () => import_tamagui76.SizableText,
+  Sheet: () => import_tamagui78.Sheet,
+  Shockwave: () => Shockwave,
+  SizableStack: () => import_tamagui78.SizableStack,
+  SizableText: () => import_tamagui78.SizableText,
   Skeleton: () => Skeleton,
-  Slider: () => import_tamagui76.Slider,
-  Spacer: () => import_tamagui76.Spacer,
-  Spinner: () => import_tamagui76.Spinner,
-  Square: () => import_tamagui76.Square,
-  Stack: () => import_tamagui76.Stack,
+  Slider: () => import_tamagui78.Slider,
+  Spacer: () => import_tamagui78.Spacer,
+  Spinner: () => import_tamagui78.Spinner,
+  Square: () => import_tamagui78.Square,
+  Stack: () => import_tamagui78.Stack,
   StatusBadge: () => StatusBadge,
+  StayBrowseScreen: () => StayBrowseScreen,
+  StayDetailScreen: () => StayDetailScreen,
   Step: () => Step,
   StepPageLayout: () => StepPageLayout,
   SubHeading: () => SubHeading,
   SwipeCards: () => SwipeCards,
   SwipeableRow: () => SwipeableRow,
-  Switch: () => import_tamagui76.Switch,
+  Switch: () => import_tamagui78.Switch,
   TabBar: () => TabBar,
-  Tabs: () => import_tamagui76.Tabs,
-  TamaguiImage: () => import_tamagui76.Image,
-  TamaguiListItem: () => import_tamagui76.ListItem,
-  TamaguiProvider: () => import_tamagui76.TamaguiProvider,
+  Tabs: () => import_tamagui78.Tabs,
+  TamaguiImage: () => import_tamagui78.Image,
+  TamaguiListItem: () => import_tamagui78.ListItem,
+  TamaguiProvider: () => import_tamagui78.TamaguiProvider,
   TestimonialCard: () => TestimonialCard2,
-  Text: () => import_tamagui76.Text,
-  TextArea: () => import_tamagui76.TextArea,
-  Theme: () => import_tamagui76.Theme,
-  ThemeableStack: () => import_tamagui76.ThemeableStack,
-  ToggleGroup: () => import_tamagui76.ToggleGroup,
-  Tooltip: () => import_tamagui76.Tooltip,
-  TooltipSimple: () => import_tamagui76.TooltipSimple,
-  Unspaced: () => import_tamagui76.Unspaced,
+  Text: () => import_tamagui78.Text,
+  TextArea: () => import_tamagui78.TextArea,
+  Theme: () => import_tamagui78.Theme,
+  ThemeableStack: () => import_tamagui78.ThemeableStack,
+  ToggleGroup: () => import_tamagui78.ToggleGroup,
+  Tooltip: () => import_tamagui78.Tooltip,
+  TooltipSimple: () => import_tamagui78.TooltipSimple,
+  Unspaced: () => import_tamagui78.Unspaced,
   UserPreferences: () => UserPreferences,
-  View: () => import_tamagui76.View,
-  VisuallyHidden: () => import_tamagui76.VisuallyHidden,
+  View: () => import_tamagui78.View,
+  VisuallyHidden: () => import_tamagui78.VisuallyHidden,
   WheelPicker: () => WheelPicker,
-  XGroup: () => import_tamagui76.XGroup,
-  XStack: () => import_tamagui76.XStack,
-  YGroup: () => import_tamagui76.YGroup,
-  YStack: () => import_tamagui76.YStack,
-  ZStack: () => import_tamagui76.ZStack,
-  addTheme: () => import_tamagui76.addTheme,
-  composeEventHandlers: () => import_tamagui76.composeEventHandlers,
-  composeRefs: () => import_tamagui76.composeRefs,
-  createFont: () => import_tamagui76.createFont,
-  createMedia: () => import_tamagui76.createMedia,
-  createStyledContext: () => import_tamagui76.createStyledContext,
-  createTamagui: () => import_tamagui76.createTamagui,
-  createTheme: () => import_tamagui76.createTheme,
-  createTokens: () => import_tamagui76.createTokens,
-  createVariable: () => import_tamagui76.createVariable,
+  XGroup: () => import_tamagui78.XGroup,
+  XStack: () => import_tamagui78.XStack,
+  YGroup: () => import_tamagui78.YGroup,
+  YStack: () => import_tamagui78.YStack,
+  ZStack: () => import_tamagui78.ZStack,
+  addTheme: () => import_tamagui78.addTheme,
+  composeEventHandlers: () => import_tamagui78.composeEventHandlers,
+  composeRefs: () => import_tamagui78.composeRefs,
+  createFont: () => import_tamagui78.createFont,
+  createMedia: () => import_tamagui78.createMedia,
+  createStyledContext: () => import_tamagui78.createStyledContext,
+  createTamagui: () => import_tamagui78.createTamagui,
+  createTheme: () => import_tamagui78.createTheme,
+  createTokens: () => import_tamagui78.createTokens,
+  createVariable: () => import_tamagui78.createVariable,
   dialogConfirm: () => dialogConfirm,
-  getConfig: () => import_tamagui76.getConfig,
+  getConfig: () => import_tamagui78.getConfig,
   getOtfDesignTheme: () => getOtfDesignTheme,
   getOtfThemePalettes: () => getOtfThemePalettes,
-  getToken: () => import_tamagui76.getToken,
-  getTokenValue: () => import_tamagui76.getTokenValue,
-  getTokens: () => import_tamagui76.getTokens,
-  isClient: () => import_tamagui76.isClient,
-  isWeb: () => import_tamagui76.isWeb,
+  getToken: () => import_tamagui78.getToken,
+  getTokenValue: () => import_tamagui78.getTokenValue,
+  getTokens: () => import_tamagui78.getTokens,
+  isClient: () => import_tamagui78.isClient,
+  isWeb: () => import_tamagui78.isWeb,
   otfConfig: () => otfConfig,
-  replaceTheme: () => import_tamagui76.replaceTheme,
+  replaceTheme: () => import_tamagui78.replaceTheme,
   showError: () => showError,
-  styled: () => import_tamagui76.styled,
+  styled: () => import_tamagui78.styled,
   tamaguiDefaultConfig: () => import_v52.defaultConfig,
   toast: () => toast,
-  updateTheme: () => import_tamagui76.updateTheme,
+  updateTheme: () => import_tamagui78.updateTheme,
   useCollapsibleHeader: () => useCollapsibleHeader,
-  useComposedRefs: () => import_tamagui76.useComposedRefs,
-  useControllableState: () => import_tamagui76.useControllableState,
-  useDebounce: () => import_tamagui76.useDebounce,
-  useDebounceValue: () => import_tamagui76.useDebounceValue,
-  useDidFinishSSR: () => import_tamagui76.useDidFinishSSR,
-  useEvent: () => import_tamagui76.useEvent,
-  useForceUpdate: () => import_tamagui76.useForceUpdate,
-  useIsPresent: () => import_tamagui76.useIsPresent,
-  useIsomorphicLayoutEffect: () => import_tamagui76.useIsomorphicLayoutEffect,
-  useMedia: () => import_tamagui76.useMedia,
+  useComposedRefs: () => import_tamagui78.useComposedRefs,
+  useControllableState: () => import_tamagui78.useControllableState,
+  useDebounce: () => import_tamagui78.useDebounce,
+  useDebounceValue: () => import_tamagui78.useDebounceValue,
+  useDidFinishSSR: () => import_tamagui78.useDidFinishSSR,
+  useEvent: () => import_tamagui78.useEvent,
+  useForceUpdate: () => import_tamagui78.useForceUpdate,
+  useIsPresent: () => import_tamagui78.useIsPresent,
+  useIsomorphicLayoutEffect: () => import_tamagui78.useIsomorphicLayoutEffect,
+  useMedia: () => import_tamagui78.useMedia,
   useMultiStep: () => useMultiStep,
   useOtfToast: () => useOtfToast,
-  usePresence: () => import_tamagui76.usePresence,
-  useTheme: () => import_tamagui76.useTheme,
-  useThemeName: () => import_tamagui76.useThemeName,
-  useWindowDimensions: () => import_tamagui76.useWindowDimensions,
-  withStaticProperties: () => import_tamagui76.withStaticProperties
+  usePresence: () => import_tamagui78.usePresence,
+  useTheme: () => import_tamagui78.useTheme,
+  useThemeName: () => import_tamagui78.useThemeName,
+  useWindowDimensions: () => import_tamagui78.useWindowDimensions,
+  withStaticProperties: () => import_tamagui78.withStaticProperties
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -417,7 +420,7 @@ function getOtfDesignTheme(themeId) {
 }
 
 // src/index.ts
-var import_tamagui76 = require("tamagui");
+var import_tamagui78 = require("tamagui");
 
 // src/primitives/Button.tsx
 var import_tamagui2 = require("tamagui");
@@ -5907,6 +5910,502 @@ function useCollapsibleHeader(opts = {}) {
   });
   return { scrollHandler, headerStyle, titleStyle, scrollY };
 }
+
+// src/patterns/Shockwave/Shockwave.tsx
+var import_react27 = require("react");
+var import_react_native14 = require("react-native");
+var import_react_native_skia2 = require("@shopify/react-native-skia");
+var import_react_native_reanimated11 = require("react-native-reanimated");
+var import_react_native_worklets = require("react-native-worklets");
+
+// src/patterns/Shockwave/conf.ts
+var SHOCKWAVE_DEFAULTS = {
+  WIDTH: 320,
+  HEIGHT: 320,
+  DURATION: 900,
+  SHOCK_STRENGTH: 0.12,
+  LENSING_SPREAD: 0.2
+};
+
+// src/patterns/Shockwave/shader.ts
+var SHOCKWAVE_SHADER_SOURCE = `
+uniform float2 iResolution;
+uniform float  iTime;
+uniform float2 iMouse;
+uniform float  uShockStrength;
+uniform float  uLensingSpread;
+uniform shader iChannel0;
+uniform shader iChannel1;
+
+half4 main(float2 fragCoord) {
+  float2 uv = fragCoord / iResolution;
+  float2 origin = iMouse / iResolution;
+
+  float t = clamp(iTime, 0.0, 1.0);
+  float radius = sqrt(2.0) * t;
+  float circle = radius - distance(origin, uv);
+  float factor = uShockStrength
+                 * sin(t * 3.14159265)
+                 * pow(clamp(1.0 - abs(circle), 0.0, 1.0), 20.0);
+
+  float2 delta = origin - uv;
+  float2 dir = delta / (length(delta) + 1e-6);
+
+  float2 d0 = (uLensingSpread)        * factor * dir * iResolution;
+  float2 d1 = (uLensingSpread * 1.2)  * factor * dir * iResolution;
+  float2 d2 = (uLensingSpread * 1.5)  * factor * dir * iResolution;
+
+  half4 a = half4(
+    iChannel0.eval(fragCoord + d0).r,
+    iChannel0.eval(fragCoord + d1).g,
+    iChannel0.eval(fragCoord + d2).b,
+    1.0
+  );
+  half4 b = half4(
+    iChannel1.eval(fragCoord + d0).r,
+    iChannel1.eval(fragCoord + d1).g,
+    iChannel1.eval(fragCoord + d2).b,
+    1.0
+  );
+
+  half mixT = half(clamp(t + circle * 5.0, 0.0, 1.0));
+  return mix(a, b, mixT);
+}
+`;
+
+// src/patterns/Shockwave/utils.ts
+var import_react_native13 = require("react-native");
+var import_react_native_skia = require("@shopify/react-native-skia");
+var webNoopCallback = () => Promise.resolve(null);
+async function snapshotPair(fromRef, toRef, prev, next) {
+  const callback = import_react_native13.Platform.OS === "web" ? webNoopCallback : null;
+  const fromImg = await (0, import_react_native_skia.makeImageFromView)(
+    fromRef,
+    callback
+  );
+  const toImg = await (0, import_react_native_skia.makeImageFromView)(
+    toRef,
+    callback
+  );
+  if (!fromImg || !toImg) return null;
+  const fromSnapshot = prev === "from" ? fromImg : toImg;
+  const toSnapshot = next === "from" ? fromImg : toImg;
+  return { from: fromSnapshot, to: toSnapshot };
+}
+
+// src/patterns/Shockwave/Shockwave.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var useShockwaveShader = () => {
+  const [shader, setShader] = (0, import_react27.useState)(null);
+  (0, import_react27.useEffect)(() => {
+    let cancelled = false;
+    let attempts = 0;
+    let timer = null;
+    const tryCompile = () => {
+      if (cancelled) return;
+      try {
+        if (import_react_native_skia2.Skia?.RuntimeEffect?.Make) {
+          const compiled = import_react_native_skia2.Skia.RuntimeEffect.Make(SHOCKWAVE_SHADER_SOURCE);
+          if (compiled) {
+            setShader(compiled);
+            return;
+          }
+        }
+      } catch {
+      }
+      attempts += 1;
+      if (attempts < 30) {
+        timer = setTimeout(tryCompile, 80);
+      }
+    };
+    tryCompile();
+    return () => {
+      cancelled = true;
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, []);
+  return shader;
+};
+var ShockwaveContext = (0, import_react27.createContext)(null);
+var useShockwaveContext = () => {
+  const ctx = (0, import_react27.useContext)(ShockwaveContext);
+  if (!ctx) {
+    throw new Error(
+      "<Shockwave.Transition.From> / <Shockwave.Transition.To> must be rendered inside <Shockwave>"
+    );
+  }
+  return ctx;
+};
+var OFFSCREEN_OFFSET = 1e5;
+var From = (0, import_react27.memo)(function From2({ children, style }) {
+  const { fromRef, activeValue, isTransitioning } = useShockwaveContext();
+  const isActive = activeValue === "from";
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    import_react_native14.View,
+    {
+      ref: fromRef,
+      collapsable: false,
+      pointerEvents: isActive && !isTransitioning ? "auto" : "none",
+      style: [
+        import_react_native14.StyleSheet.absoluteFill,
+        {
+          zIndex: isActive ? 2 : 1,
+          transform: [{ translateX: isActive ? 0 : OFFSCREEN_OFFSET }]
+        },
+        style
+      ],
+      children
+    }
+  );
+});
+var To = (0, import_react27.memo)(function To2({ children, style }) {
+  const { toRef, activeValue, isTransitioning } = useShockwaveContext();
+  const isActive = activeValue === "to";
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    import_react_native14.View,
+    {
+      ref: toRef,
+      collapsable: false,
+      pointerEvents: isActive && !isTransitioning ? "auto" : "none",
+      style: [
+        import_react_native14.StyleSheet.absoluteFill,
+        {
+          zIndex: isActive ? 2 : 1,
+          transform: [{ translateX: isActive ? 0 : OFFSCREEN_OFFSET }]
+        },
+        style
+      ],
+      children
+    }
+  );
+});
+var Transition = { From, To };
+var ShockwaveRoot = (0, import_react27.memo)(function ShockwaveRoot2({
+  value,
+  width = SHOCKWAVE_DEFAULTS.WIDTH,
+  height = SHOCKWAVE_DEFAULTS.HEIGHT,
+  duration = SHOCKWAVE_DEFAULTS.DURATION,
+  origin,
+  shockStrength = SHOCKWAVE_DEFAULTS.SHOCK_STRENGTH,
+  lensingSpread = SHOCKWAVE_DEFAULTS.LENSING_SPREAD,
+  style,
+  children,
+  onTransitionEnd
+}) {
+  const fromRef = (0, import_react27.useRef)(null);
+  const toRef = (0, import_react27.useRef)(null);
+  const prevValueRef = (0, import_react27.useRef)(value);
+  const shader = useShockwaveShader();
+  const [activeValue, setActiveValue] = (0, import_react27.useState)(value);
+  const [snapshots, setSnapshots] = (0, import_react27.useState)(null);
+  const progress = (0, import_react_native_reanimated11.useSharedValue)(0);
+  const finishTransition = (0, import_react27.useCallback)(
+    (next) => {
+      setActiveValue(next);
+      setSnapshots(null);
+      onTransitionEnd?.(next);
+    },
+    [onTransitionEnd]
+  );
+  (0, import_react27.useEffect)(() => {
+    if (value === prevValueRef.current) return;
+    const prev = prevValueRef.current;
+    const next = value;
+    prevValueRef.current = value;
+    let cancelled = false;
+    void (async () => {
+      const pair = await snapshotPair(
+        fromRef,
+        toRef,
+        prev,
+        next
+      );
+      if (cancelled) return;
+      if (!pair) {
+        setActiveValue(next);
+        return;
+      }
+      setSnapshots(pair);
+      progress.value = 0;
+      progress.value = (0, import_react_native_reanimated11.withTiming)(
+        1,
+        { duration, easing: import_react_native_reanimated11.Easing.linear },
+        (done) => {
+          if (done) (0, import_react_native_worklets.scheduleOnRN)(finishTransition, next);
+        }
+      );
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, duration, finishTransition, progress]);
+  const ox = origin?.x ?? width / 2;
+  const oy = origin?.y ?? height / 2;
+  const uniforms = (0, import_react_native_reanimated11.useDerivedValue)(() => ({
+    iResolution: [width, height],
+    iTime: progress.value,
+    iMouse: [ox, oy],
+    uShockStrength: shockStrength,
+    uLensingSpread: lensingSpread
+  }));
+  const ctxValue = (0, import_react27.useMemo)(
+    () => ({
+      fromRef,
+      toRef,
+      activeValue,
+      isTransitioning: snapshots !== null
+    }),
+    [activeValue, snapshots]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_native14.View, { style: [styles.wrapper, { width, height }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ShockwaveContext.Provider, { value: ctxValue, children }),
+    snapshots && shader ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      import_react_native_skia2.Canvas,
+      {
+        style: [import_react_native14.StyleSheet.absoluteFill, styles.canvasOverlay],
+        pointerEvents: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_native_skia2.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_native_skia2.Shader, { source: shader, uniforms, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            import_react_native_skia2.ImageShader,
+            {
+              image: snapshots.from,
+              fit: "cover",
+              rect: { x: 0, y: 0, width, height }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            import_react_native_skia2.ImageShader,
+            {
+              image: snapshots.to,
+              fit: "cover",
+              rect: { x: 0, y: 0, width, height }
+            }
+          )
+        ] }) })
+      }
+    ) : null
+  ] });
+});
+var styles = import_react_native14.StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "transparent"
+  },
+  canvasOverlay: {
+    zIndex: 3
+  }
+});
+var Shockwave = Object.assign(ShockwaveRoot, { Transition });
+
+// src/patterns/StayCard/StayBrowseScreen.tsx
+var import_react_native15 = require("react-native");
+var import_tamagui75 = require("tamagui");
+var import_lucide_icons4 = require("@tamagui/lucide-icons");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var DEFAULT_CATEGORIES = [
+  { label: "Villa" },
+  { label: "Hotel", active: true },
+  { label: "Apartment" },
+  { label: "Campsite" }
+];
+function StayBrowseScreen({
+  greeting = "Good morning",
+  headline = "Unlock Your\nPerfect Stay Today!",
+  categories = DEFAULT_CATEGORIES,
+  listing,
+  onFavorite,
+  backgroundColor = "#fafaf9"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.YStack, { flex: 1, backgroundColor, padding: 18, gap: 14, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.YStack, { gap: 4, marginTop: 28, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.SizableText, { size: "$2", color: "#737373", children: greeting }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.H3, { color: "#0a0a0a", size: "$7", lineHeight: 28, children: headline })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.XStack, { gap: 8, flexWrap: "wrap", children: categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      import_react_native15.View,
+      {
+        onTouchEnd: c.onPress,
+        style: {
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          borderRadius: 999,
+          backgroundColor: c.active ? "#d9f99d" : "#f4f4f5"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          import_tamagui75.SizableText,
+          {
+            size: "$2",
+            color: c.active ? "#365314" : "#52525b",
+            fontWeight: "600",
+            children: c.label
+          }
+        )
+      },
+      c.label
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+      import_tamagui75.YStack,
+      {
+        flex: 1,
+        borderRadius: 20,
+        overflow: "hidden",
+        backgroundColor: "#e7e5e4",
+        marginTop: 4,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            import_react_native15.Image,
+            {
+              source: { uri: listing.image },
+              style: { width: "100%", height: "60%" },
+              resizeMode: "cover"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.YStack, { flex: 1, padding: 14, gap: 8, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { alignItems: "center", justifyContent: "space-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.H4, { color: "#0a0a0a", size: "$5", children: listing.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_native15.View, { onTouchEnd: onFavorite, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_icons4.Heart, { size: 18, color: "#ef4444" }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { alignItems: "center", gap: 4, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_icons4.MapPin, { size: 12, color: "#737373" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.SizableText, { size: "$1", color: "#737373", children: listing.address })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { gap: 14, marginTop: 6, children: [
+              typeof listing.bed === "number" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_icons4.Bed, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.SizableText, { size: "$1", color: "#525252", children: [
+                  "Bed: ",
+                  listing.bed
+                ] })
+              ] }) : null,
+              typeof listing.bath === "number" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_icons4.Bath, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.SizableText, { size: "$1", color: "#525252", children: [
+                  "Bath: ",
+                  listing.bath
+                ] })
+              ] }) : null,
+              typeof listing.rating === "number" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_tamagui75.XStack, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_icons4.Star, { size: 14, color: "#f59e0b", fill: "#f59e0b" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_tamagui75.SizableText, { size: "$1", color: "#525252", children: listing.rating.toFixed(1) })
+              ] }) : null
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/patterns/StayCard/StayDetailScreen.tsx
+var import_react_native16 = require("react-native");
+var import_tamagui76 = require("tamagui");
+var import_lucide_icons5 = require("@tamagui/lucide-icons");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var formatPrice = (n) => "$" + n.toLocaleString("en-US", { maximumFractionDigits: 0 });
+var buildDefaultMetrics = (props) => {
+  const out = [];
+  if (typeof props.listing.sqft === "number") {
+    out.push({
+      label: "Living",
+      value: `${props.listing.sqft} sqft`
+    });
+  } else if (typeof props.listing.bed === "number") {
+    out.push({
+      label: "Beds",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_icons5.Bed, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bed
+    });
+  }
+  if (typeof props.listing.bath === "number") {
+    out.push({
+      label: "Baths",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_icons5.Bath, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bath
+    });
+  }
+  out.push({
+    label: "Wifi",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_icons5.Wifi, { size: 14, color: "#fafaf9" }),
+    value: "Fast"
+  });
+  return out;
+};
+function StayDetailScreen(props) {
+  const {
+    listing,
+    metrics,
+    eyebrow = "BOOKING DETAILS",
+    ctaLabel = "Reserve now",
+    onReserve,
+    backgroundColor = "#0a0a0a",
+    ctaColor = "#f97316"
+  } = props;
+  const resolvedMetrics = metrics ?? buildDefaultMetrics(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.YStack, { flex: 1, backgroundColor, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react_native16.View, { style: { position: "relative", height: "50%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        import_react_native16.Image,
+        {
+          source: { uri: listing.image },
+          style: { width: "100%", height: "100%" },
+          resizeMode: "cover"
+        }
+      ),
+      typeof listing.rating === "number" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+        import_react_native16.View,
+        {
+          style: {
+            position: "absolute",
+            top: 36,
+            right: 18,
+            backgroundColor: "rgba(255,255,255,0.92)",
+            paddingHorizontal: 10,
+            paddingVertical: 6,
+            borderRadius: 999,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 4
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_icons5.Star, { size: 12, color: "#f59e0b", fill: "#f59e0b" }),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$1", color: "#0a0a0a", fontWeight: "700", children: listing.rating.toFixed(1) })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.YStack, { flex: 1, padding: 18, gap: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$2", color: "#a3a3a3", children: eyebrow }),
+      typeof listing.pricePerNight === "number" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.H3, { color: "#fafaf9", size: "$7", children: [
+        formatPrice(listing.pricePerNight),
+        "/night"
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.H3, { color: "#fafaf9", size: "$7", children: listing.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.SizableText, { size: "$2", color: "#a3a3a3", children: [
+        listing.ownerName ? listing.ownerName + " \xB7 " : "",
+        listing.address
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.XStack, { gap: 20, marginTop: 6, children: resolvedMetrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.YStack, { gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$1", color: "#737373", children: m.label }),
+        m.icon ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_tamagui76.XStack, { alignItems: "center", gap: 4, children: [
+          m.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+      ] }, i)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        import_tamagui76.YStack,
+        {
+          marginTop: "auto",
+          padding: 14,
+          borderRadius: 14,
+          backgroundColor: ctaColor,
+          alignItems: "center",
+          onPress: onReserve,
+          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_tamagui76.SizableText, { size: "$3", color: "#fff", fontWeight: "700", children: ctaLabel })
+        }
+      )
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -6030,6 +6529,7 @@ function useCollapsibleHeader(opts = {}) {
   Separator,
   SettingsScreen,
   Sheet,
+  Shockwave,
   SizableStack,
   SizableText,
   Skeleton,
@@ -6039,6 +6539,8 @@ function useCollapsibleHeader(opts = {}) {
   Square,
   Stack,
   StatusBadge,
+  StayBrowseScreen,
+  StayDetailScreen,
   Step,
   StepPageLayout,
   SubHeading,