@otfdashkit/ui-native 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -186,13 +186,13 @@ function getOtfDesignTheme(themeId) {
 
 // src/index.ts
 import {
-  View as View12,
+  View as View15,
   Stack,
   SizableStack,
   ThemeableStack,
   Frame,
-  XStack as XStack50,
-  YStack as YStack56,
+  XStack as XStack52,
+  YStack as YStack58,
   ZStack,
   ScrollView as ScrollView7,
   Circle as Circle13,
@@ -210,13 +210,13 @@ import {
   Aside,
   H1 as H12,
   H2 as H22,
-  H3 as H32,
-  H4 as H42,
+  H3 as H34,
+  H4 as H43,
   H5 as H52,
   H6 as H62,
   Heading,
   Paragraph,
-  SizableText as SizableText55,
+  SizableText as SizableText57,
   Text as Text2,
   Label,
   Button as Button13,
@@ -232,7 +232,7 @@ import {
   Card as Card2,
   Avatar as Avatar2,
   Separator as Separator7,
-  Image as Image9,
+  Image as Image11,
   Progress,
   Spinner as Spinner2,
   ListItem as ListItem2,
@@ -5881,6 +5881,528 @@ function useCollapsibleHeader(opts = {}) {
   });
   return { scrollHandler, headerStyle, titleStyle, scrollY };
 }
+
+// src/patterns/Shockwave/Shockwave.tsx
+import {
+  createContext as createContext3,
+  memo as memo2,
+  useCallback as useCallback15,
+  useContext as useContext3,
+  useEffect as useEffect11,
+  useMemo as useMemo7,
+  useRef as useRef10,
+  useState as useState23
+} from "react";
+import { StyleSheet, View as View12 } from "react-native";
+import {
+  Canvas,
+  Fill,
+  ImageShader,
+  Shader,
+  Skia
+} from "@shopify/react-native-skia";
+import {
+  Easing as Easing4,
+  useDerivedValue,
+  useSharedValue as useSharedValue7,
+  withTiming as withTiming5
+} from "react-native-reanimated";
+import { scheduleOnRN } from "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
+import { Platform as Platform5 } from "react-native";
+import { makeImageFromView } from "@shopify/react-native-skia";
+var webNoopCallback = () => Promise.resolve(null);
+async function snapshotPair(fromRef, toRef, prev, next) {
+  const callback = Platform5.OS === "web" ? webNoopCallback : null;
+  const fromImg = await makeImageFromView(
+    fromRef,
+    callback
+  );
+  const toImg = await 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
+import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
+var useShockwaveShader = () => {
+  const [shader, setShader] = useState23(null);
+  useEffect11(() => {
+    let cancelled = false;
+    let attempts = 0;
+    let timer = null;
+    const tryCompile = () => {
+      if (cancelled) return;
+      try {
+        if (Skia?.RuntimeEffect?.Make) {
+          const compiled = 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 = createContext3(null);
+var useShockwaveContext = () => {
+  const ctx = useContext3(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 = memo2(function From2({ children, style }) {
+  const { fromRef, activeValue, isTransitioning } = useShockwaveContext();
+  const isActive = activeValue === "from";
+  return /* @__PURE__ */ jsx69(
+    View12,
+    {
+      ref: fromRef,
+      collapsable: false,
+      pointerEvents: isActive && !isTransitioning ? "auto" : "none",
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          zIndex: isActive ? 2 : 1,
+          transform: [{ translateX: isActive ? 0 : OFFSCREEN_OFFSET }]
+        },
+        style
+      ],
+      children
+    }
+  );
+});
+var To = memo2(function To2({ children, style }) {
+  const { toRef, activeValue, isTransitioning } = useShockwaveContext();
+  const isActive = activeValue === "to";
+  return /* @__PURE__ */ jsx69(
+    View12,
+    {
+      ref: toRef,
+      collapsable: false,
+      pointerEvents: isActive && !isTransitioning ? "auto" : "none",
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          zIndex: isActive ? 2 : 1,
+          transform: [{ translateX: isActive ? 0 : OFFSCREEN_OFFSET }]
+        },
+        style
+      ],
+      children
+    }
+  );
+});
+var Transition = { From, To };
+var ShockwaveRoot = memo2(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 = useRef10(null);
+  const toRef = useRef10(null);
+  const prevValueRef = useRef10(value);
+  const shader = useShockwaveShader();
+  const [activeValue, setActiveValue] = useState23(value);
+  const [snapshots, setSnapshots] = useState23(null);
+  const progress = useSharedValue7(0);
+  const finishTransition = useCallback15(
+    (next) => {
+      setActiveValue(next);
+      setSnapshots(null);
+      onTransitionEnd?.(next);
+    },
+    [onTransitionEnd]
+  );
+  useEffect11(() => {
+    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 = withTiming5(
+        1,
+        { duration, easing: Easing4.linear },
+        (done) => {
+          if (done) scheduleOnRN(finishTransition, next);
+        }
+      );
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, duration, finishTransition, progress]);
+  const ox = origin?.x ?? width / 2;
+  const oy = origin?.y ?? height / 2;
+  const uniforms = useDerivedValue(() => ({
+    iResolution: [width, height],
+    iTime: progress.value,
+    iMouse: [ox, oy],
+    uShockStrength: shockStrength,
+    uLensingSpread: lensingSpread
+  }));
+  const ctxValue = useMemo7(
+    () => ({
+      fromRef,
+      toRef,
+      activeValue,
+      isTransitioning: snapshots !== null
+    }),
+    [activeValue, snapshots]
+  );
+  return /* @__PURE__ */ jsxs58(View12, { style: [styles.wrapper, { width, height }, style], children: [
+    /* @__PURE__ */ jsx69(ShockwaveContext.Provider, { value: ctxValue, children }),
+    snapshots && shader ? /* @__PURE__ */ jsx69(
+      Canvas,
+      {
+        style: [StyleSheet.absoluteFill, styles.canvasOverlay],
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsx69(Fill, { children: /* @__PURE__ */ jsxs58(Shader, { source: shader, uniforms, children: [
+          /* @__PURE__ */ jsx69(
+            ImageShader,
+            {
+              image: snapshots.from,
+              fit: "cover",
+              rect: { x: 0, y: 0, width, height }
+            }
+          ),
+          /* @__PURE__ */ jsx69(
+            ImageShader,
+            {
+              image: snapshots.to,
+              fit: "cover",
+              rect: { x: 0, y: 0, width, height }
+            }
+          )
+        ] }) })
+      }
+    ) : null
+  ] });
+});
+var styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "transparent"
+  },
+  canvasOverlay: {
+    zIndex: 3
+  }
+});
+var Shockwave = Object.assign(ShockwaveRoot, { Transition });
+
+// src/patterns/StayCard/StayBrowseScreen.tsx
+import { Image as Image9, View as View13 } from "react-native";
+import {
+  YStack as YStack56,
+  XStack as XStack50,
+  H3 as H32,
+  H4 as H42,
+  SizableText as SizableText55
+} from "tamagui";
+import { Bed, Bath, Heart, MapPin, Star } from "@tamagui/lucide-icons";
+import { jsx as jsx70, jsxs as jsxs59 } from "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__ */ jsxs59(YStack56, { flex: 1, backgroundColor, padding: 18, gap: 14, children: [
+    /* @__PURE__ */ jsxs59(YStack56, { gap: 4, marginTop: 28, children: [
+      /* @__PURE__ */ jsx70(SizableText55, { size: "$2", color: "#737373", children: greeting }),
+      /* @__PURE__ */ jsx70(H32, { color: "#0a0a0a", size: "$7", lineHeight: 28, children: headline })
+    ] }),
+    /* @__PURE__ */ jsx70(XStack50, { gap: 8, flexWrap: "wrap", children: categories.map((c) => /* @__PURE__ */ jsx70(
+      View13,
+      {
+        onTouchEnd: c.onPress,
+        style: {
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          borderRadius: 999,
+          backgroundColor: c.active ? "#d9f99d" : "#f4f4f5"
+        },
+        children: /* @__PURE__ */ jsx70(
+          SizableText55,
+          {
+            size: "$2",
+            color: c.active ? "#365314" : "#52525b",
+            fontWeight: "600",
+            children: c.label
+          }
+        )
+      },
+      c.label
+    )) }),
+    /* @__PURE__ */ jsxs59(
+      YStack56,
+      {
+        flex: 1,
+        borderRadius: 20,
+        overflow: "hidden",
+        backgroundColor: "#e7e5e4",
+        marginTop: 4,
+        children: [
+          /* @__PURE__ */ jsx70(
+            Image9,
+            {
+              source: { uri: listing.image },
+              style: { width: "100%", height: "60%" },
+              resizeMode: "cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs59(YStack56, { flex: 1, padding: 14, gap: 8, children: [
+            /* @__PURE__ */ jsxs59(XStack50, { alignItems: "center", justifyContent: "space-between", children: [
+              /* @__PURE__ */ jsx70(H42, { color: "#0a0a0a", size: "$5", children: listing.title }),
+              /* @__PURE__ */ jsx70(View13, { onTouchEnd: onFavorite, children: /* @__PURE__ */ jsx70(Heart, { size: 18, color: "#ef4444" }) })
+            ] }),
+            /* @__PURE__ */ jsxs59(XStack50, { alignItems: "center", gap: 4, children: [
+              /* @__PURE__ */ jsx70(MapPin, { size: 12, color: "#737373" }),
+              /* @__PURE__ */ jsx70(SizableText55, { size: "$1", color: "#737373", children: listing.address })
+            ] }),
+            /* @__PURE__ */ jsxs59(XStack50, { gap: 14, marginTop: 6, children: [
+              typeof listing.bed === "number" ? /* @__PURE__ */ jsxs59(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx70(Bed, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ jsxs59(SizableText55, { size: "$1", color: "#525252", children: [
+                  "Bed: ",
+                  listing.bed
+                ] })
+              ] }) : null,
+              typeof listing.bath === "number" ? /* @__PURE__ */ jsxs59(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx70(Bath, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ jsxs59(SizableText55, { size: "$1", color: "#525252", children: [
+                  "Bath: ",
+                  listing.bath
+                ] })
+              ] }) : null,
+              typeof listing.rating === "number" ? /* @__PURE__ */ jsxs59(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx70(Star, { size: 14, color: "#f59e0b", fill: "#f59e0b" }),
+                /* @__PURE__ */ jsx70(SizableText55, { size: "$1", color: "#525252", children: listing.rating.toFixed(1) })
+              ] }) : null
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/patterns/StayCard/StayDetailScreen.tsx
+import { Image as Image10, View as View14 } from "react-native";
+import { YStack as YStack57, XStack as XStack51, H3 as H33, SizableText as SizableText56 } from "tamagui";
+import { Bed as Bed2, Bath as Bath2, Star as Star2, Wifi } from "@tamagui/lucide-icons";
+import { jsx as jsx71, jsxs as jsxs60 } from "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__ */ jsx71(Bed2, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bed
+    });
+  }
+  if (typeof props.listing.bath === "number") {
+    out.push({
+      label: "Baths",
+      icon: /* @__PURE__ */ jsx71(Bath2, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bath
+    });
+  }
+  out.push({
+    label: "Wifi",
+    icon: /* @__PURE__ */ jsx71(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__ */ jsxs60(YStack57, { flex: 1, backgroundColor, children: [
+    /* @__PURE__ */ jsxs60(View14, { style: { position: "relative", height: "50%" }, children: [
+      /* @__PURE__ */ jsx71(
+        Image10,
+        {
+          source: { uri: listing.image },
+          style: { width: "100%", height: "100%" },
+          resizeMode: "cover"
+        }
+      ),
+      typeof listing.rating === "number" ? /* @__PURE__ */ jsxs60(
+        View14,
+        {
+          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__ */ jsx71(Star2, { size: 12, color: "#f59e0b", fill: "#f59e0b" }),
+            /* @__PURE__ */ jsx71(SizableText56, { size: "$1", color: "#0a0a0a", fontWeight: "700", children: listing.rating.toFixed(1) })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs60(YStack57, { flex: 1, padding: 18, gap: 10, children: [
+      /* @__PURE__ */ jsx71(SizableText56, { size: "$2", color: "#a3a3a3", children: eyebrow }),
+      typeof listing.pricePerNight === "number" ? /* @__PURE__ */ jsxs60(H33, { color: "#fafaf9", size: "$7", children: [
+        formatPrice(listing.pricePerNight),
+        "/night"
+      ] }) : /* @__PURE__ */ jsx71(H33, { color: "#fafaf9", size: "$7", children: listing.title }),
+      /* @__PURE__ */ jsxs60(SizableText56, { size: "$2", color: "#a3a3a3", children: [
+        listing.ownerName ? listing.ownerName + " \xB7 " : "",
+        listing.address
+      ] }),
+      /* @__PURE__ */ jsx71(XStack51, { gap: 20, marginTop: 6, children: resolvedMetrics.map((m, i) => /* @__PURE__ */ jsxs60(YStack57, { gap: 2, children: [
+        /* @__PURE__ */ jsx71(SizableText56, { size: "$1", color: "#737373", children: m.label }),
+        m.icon ? /* @__PURE__ */ jsxs60(XStack51, { alignItems: "center", gap: 4, children: [
+          m.icon,
+          /* @__PURE__ */ jsx71(SizableText56, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+        ] }) : /* @__PURE__ */ jsx71(SizableText56, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+      ] }, i)) }),
+      /* @__PURE__ */ jsx71(
+        YStack57,
+        {
+          marginTop: "auto",
+          padding: 14,
+          borderRadius: 14,
+          backgroundColor: ctaColor,
+          alignItems: "center",
+          onPress: onReserve,
+          children: /* @__PURE__ */ jsx71(SizableText56, { size: "$3", color: "#fff", fontWeight: "700", children: ctaLabel })
+        }
+      )
+    ] })
+  ] });
+}
 export {
   Accordion,
   ActionSheet,
@@ -5933,8 +6455,8 @@ export {
   Group,
   H12 as H1,
   H22 as H2,
-  H32 as H3,
-  H42 as H4,
+  H34 as H3,
+  H43 as H4,
   H52 as H5,
   H62 as H6,
   Header,
@@ -6003,8 +6525,9 @@ export {
   Separator7 as Separator,
   SettingsScreen,
   Sheet5 as Sheet,
+  Shockwave,
   SizableStack,
-  SizableText55 as SizableText,
+  SizableText57 as SizableText,
   Skeleton,
   Slider2 as Slider,
   Spacer,
@@ -6012,6 +6535,8 @@ export {
   Square,
   Stack,
   StatusBadge,
+  StayBrowseScreen,
+  StayDetailScreen,
   Step,
   StepPageLayout,
   SubHeading,
@@ -6020,7 +6545,7 @@ export {
   Switch4 as Switch,
   TabBar,
   Tabs,
-  Image9 as TamaguiImage,
+  Image11 as TamaguiImage,
   ListItem2 as TamaguiListItem,
   TamaguiProvider,
   TestimonialCard2 as TestimonialCard,
@@ -6033,13 +6558,13 @@ export {
   TooltipSimple,
   Unspaced,
   UserPreferences,
-  View12 as View,
+  View15 as View,
   VisuallyHidden,
   WheelPicker,
   XGroup,
-  XStack50 as XStack,
+  XStack52 as XStack,
   YGroup,
-  YStack56 as YStack,
+  YStack58 as YStack,
   ZStack,
   addTheme,
   composeEventHandlers,