@otfdashkit/ui-native 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -186,13 +186,13 @@ function getOtfDesignTheme(themeId) {
 
 // src/index.ts
 import {
-  View as View12,
+  View as View14,
   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,221 @@ function useCollapsibleHeader(opts = {}) {
   });
   return { scrollHandler, headerStyle, titleStyle, scrollY };
 }
+
+// src/patterns/StayCard/StayBrowseScreen.tsx
+import { Image as Image9, View as View12 } 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 jsx69, jsxs as jsxs58 } 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__ */ jsxs58(YStack56, { flex: 1, backgroundColor, padding: 18, gap: 14, children: [
+    /* @__PURE__ */ jsxs58(YStack56, { gap: 4, marginTop: 28, children: [
+      /* @__PURE__ */ jsx69(SizableText55, { size: "$2", color: "#737373", children: greeting }),
+      /* @__PURE__ */ jsx69(H32, { color: "#0a0a0a", size: "$7", lineHeight: 28, children: headline })
+    ] }),
+    /* @__PURE__ */ jsx69(XStack50, { gap: 8, flexWrap: "wrap", children: categories.map((c) => /* @__PURE__ */ jsx69(
+      View12,
+      {
+        onTouchEnd: c.onPress,
+        style: {
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          borderRadius: 999,
+          backgroundColor: c.active ? "#d9f99d" : "#f4f4f5"
+        },
+        children: /* @__PURE__ */ jsx69(
+          SizableText55,
+          {
+            size: "$2",
+            color: c.active ? "#365314" : "#52525b",
+            fontWeight: "600",
+            children: c.label
+          }
+        )
+      },
+      c.label
+    )) }),
+    /* @__PURE__ */ jsxs58(
+      YStack56,
+      {
+        flex: 1,
+        borderRadius: 20,
+        overflow: "hidden",
+        backgroundColor: "#e7e5e4",
+        marginTop: 4,
+        children: [
+          /* @__PURE__ */ jsx69(
+            Image9,
+            {
+              source: { uri: listing.image },
+              style: { width: "100%", height: "60%" },
+              resizeMode: "cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs58(YStack56, { flex: 1, padding: 14, gap: 8, children: [
+            /* @__PURE__ */ jsxs58(XStack50, { alignItems: "center", justifyContent: "space-between", children: [
+              /* @__PURE__ */ jsx69(H42, { color: "#0a0a0a", size: "$5", children: listing.title }),
+              /* @__PURE__ */ jsx69(View12, { onTouchEnd: onFavorite, children: /* @__PURE__ */ jsx69(Heart, { size: 18, color: "#ef4444" }) })
+            ] }),
+            /* @__PURE__ */ jsxs58(XStack50, { alignItems: "center", gap: 4, children: [
+              /* @__PURE__ */ jsx69(MapPin, { size: 12, color: "#737373" }),
+              /* @__PURE__ */ jsx69(SizableText55, { size: "$1", color: "#737373", children: listing.address })
+            ] }),
+            /* @__PURE__ */ jsxs58(XStack50, { gap: 14, marginTop: 6, children: [
+              typeof listing.bed === "number" ? /* @__PURE__ */ jsxs58(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx69(Bed, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ jsxs58(SizableText55, { size: "$1", color: "#525252", children: [
+                  "Bed: ",
+                  listing.bed
+                ] })
+              ] }) : null,
+              typeof listing.bath === "number" ? /* @__PURE__ */ jsxs58(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx69(Bath, { size: 14, color: "#737373" }),
+                /* @__PURE__ */ jsxs58(SizableText55, { size: "$1", color: "#525252", children: [
+                  "Bath: ",
+                  listing.bath
+                ] })
+              ] }) : null,
+              typeof listing.rating === "number" ? /* @__PURE__ */ jsxs58(XStack50, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsx69(Star, { size: 14, color: "#f59e0b", fill: "#f59e0b" }),
+                /* @__PURE__ */ jsx69(SizableText55, { size: "$1", color: "#525252", children: listing.rating.toFixed(1) })
+              ] }) : null
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/patterns/StayCard/StayDetailScreen.tsx
+import { Image as Image10, View as View13 } 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 jsx70, jsxs as jsxs59 } 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__ */ jsx70(Bed2, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bed
+    });
+  }
+  if (typeof props.listing.bath === "number") {
+    out.push({
+      label: "Baths",
+      icon: /* @__PURE__ */ jsx70(Bath2, { size: 14, color: "#fafaf9" }),
+      value: props.listing.bath
+    });
+  }
+  out.push({
+    label: "Wifi",
+    icon: /* @__PURE__ */ jsx70(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__ */ jsxs59(YStack57, { flex: 1, backgroundColor, children: [
+    /* @__PURE__ */ jsxs59(View13, { style: { position: "relative", height: "50%" }, children: [
+      /* @__PURE__ */ jsx70(
+        Image10,
+        {
+          source: { uri: listing.image },
+          style: { width: "100%", height: "100%" },
+          resizeMode: "cover"
+        }
+      ),
+      typeof listing.rating === "number" ? /* @__PURE__ */ jsxs59(
+        View13,
+        {
+          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__ */ jsx70(Star2, { size: 12, color: "#f59e0b", fill: "#f59e0b" }),
+            /* @__PURE__ */ jsx70(SizableText56, { size: "$1", color: "#0a0a0a", fontWeight: "700", children: listing.rating.toFixed(1) })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs59(YStack57, { flex: 1, padding: 18, gap: 10, children: [
+      /* @__PURE__ */ jsx70(SizableText56, { size: "$2", color: "#a3a3a3", children: eyebrow }),
+      typeof listing.pricePerNight === "number" ? /* @__PURE__ */ jsxs59(H33, { color: "#fafaf9", size: "$7", children: [
+        formatPrice(listing.pricePerNight),
+        "/night"
+      ] }) : /* @__PURE__ */ jsx70(H33, { color: "#fafaf9", size: "$7", children: listing.title }),
+      /* @__PURE__ */ jsxs59(SizableText56, { size: "$2", color: "#a3a3a3", children: [
+        listing.ownerName ? listing.ownerName + " \xB7 " : "",
+        listing.address
+      ] }),
+      /* @__PURE__ */ jsx70(XStack51, { gap: 20, marginTop: 6, children: resolvedMetrics.map((m, i) => /* @__PURE__ */ jsxs59(YStack57, { gap: 2, children: [
+        /* @__PURE__ */ jsx70(SizableText56, { size: "$1", color: "#737373", children: m.label }),
+        m.icon ? /* @__PURE__ */ jsxs59(XStack51, { alignItems: "center", gap: 4, children: [
+          m.icon,
+          /* @__PURE__ */ jsx70(SizableText56, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+        ] }) : /* @__PURE__ */ jsx70(SizableText56, { size: "$3", color: "#fafaf9", fontWeight: "600", children: m.value })
+      ] }, i)) }),
+      /* @__PURE__ */ jsx70(
+        YStack57,
+        {
+          marginTop: "auto",
+          padding: 14,
+          borderRadius: 14,
+          backgroundColor: ctaColor,
+          alignItems: "center",
+          onPress: onReserve,
+          children: /* @__PURE__ */ jsx70(SizableText56, { size: "$3", color: "#fff", fontWeight: "700", children: ctaLabel })
+        }
+      )
+    ] })
+  ] });
+}
 export {
   Accordion,
   ActionSheet,
@@ -5933,8 +6148,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,
@@ -6004,7 +6219,7 @@ export {
   SettingsScreen,
   Sheet5 as Sheet,
   SizableStack,
-  SizableText55 as SizableText,
+  SizableText57 as SizableText,
   Skeleton,
   Slider2 as Slider,
   Spacer,
@@ -6012,6 +6227,8 @@ export {
   Square,
   Stack,
   StatusBadge,
+  StayBrowseScreen,
+  StayDetailScreen,
   Step,
   StepPageLayout,
   SubHeading,
@@ -6020,7 +6237,7 @@ export {
   Switch4 as Switch,
   TabBar,
   Tabs,
-  Image9 as TamaguiImage,
+  Image11 as TamaguiImage,
   ListItem2 as TamaguiListItem,
   TamaguiProvider,
   TestimonialCard2 as TestimonialCard,
@@ -6033,13 +6250,13 @@ export {
   TooltipSimple,
   Unspaced,
   UserPreferences,
-  View12 as View,
+  View14 as View,
   VisuallyHidden,
   WheelPicker,
   XGroup,
-  XStack50 as XStack,
+  XStack52 as XStack,
   YGroup,
-  YStack56 as YStack,
+  YStack58 as YStack,
   ZStack,
   addTheme,
   composeEventHandlers,