@blinkdotnew/mobile-ui 2.0.0-alpha.12 → 2.0.0-alpha.13

package/dist/index.mjs

@@ -8,13 +8,13 @@ var blinkConfig = createTamagui({
 // src/index.ts
 import { defaultConfig as defaultConfig2 } from "@tamagui/config/v5";
 import {
-  View as View6,
+  View as View7,
   Stack,
   SizableStack,
   ThemeableStack,
   Frame,
-  XStack as XStack37,
-  YStack as YStack41,
+  XStack as XStack41,
+  YStack as YStack45,
   ZStack,
   ScrollView as ScrollView7,
   Circle as Circle9,
@@ -38,22 +38,22 @@ import {
   H6 as H62,
   Heading,
   Paragraph,
-  SizableText as SizableText44,
+  SizableText as SizableText48,
   Text,
   Label,
   Button as Button11,
   Input as Input5,
   TextArea,
-  Switch as Switch2,
+  Switch as Switch3,
   Checkbox,
-  Slider,
+  Slider as Slider2,
   RadioGroup,
   Select,
   Fieldset,
   Form,
   Card as Card2,
   Avatar as Avatar2,
-  Separator as Separator5,
+  Separator as Separator7,
   Image as Image9,
   Progress,
   Spinner as Spinner2,
@@ -76,7 +76,7 @@ import {
   Adapt,
   VisuallyHidden,
   Unspaced,
-  Theme,
+  Theme as Theme2,
   TamaguiProvider,
   TamaguiProvider as TamaguiProvider2,
   createTamagui as createTamagui2,
@@ -89,7 +89,7 @@ import {
   addTheme,
   updateTheme,
   replaceTheme,
-  styled as styled13,
+  styled as styled14,
   withStaticProperties as withStaticProperties2,
   isWeb,
   isClient,
@@ -100,7 +100,7 @@ import {
   composeRefs,
   composeEventHandlers,
   useTheme,
-  useMedia,
+  useMedia as useMedia2,
   useThemeName,
   useControllableState,
   useEvent,
@@ -2311,21 +2311,26 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
 }
 
 // src/patterns/OTPInput.tsx
-import { useCallback as useCallback4, useRef as useRef2 } from "react";
+import { useCallback as useCallback4, useRef as useRef2, useState as useState11 } from "react";
+import { Platform } from "react-native";
 import { Input as Input3, SizableText as SizableText40, XStack as XStack33, YStack as YStack37 } from "tamagui";
 import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
   const inputRef = useRef2(null);
+  const [focused, setFocused] = useState11(false);
   const digits = value.padEnd(length, " ").slice(0, length);
   const handleChange = useCallback4((text) => {
     const cleaned = text.replace(/\D/g, "").slice(0, length);
     onChange?.(cleaned);
     if (cleaned.length === length) onComplete?.(cleaned);
   }, [length, onChange, onComplete]);
-  return /* @__PURE__ */ jsxs37(YStack37, { children: [
-    /* @__PURE__ */ jsx46(XStack33, { gap: "$2", justifyContent: "center", onPress: () => inputRef.current?.focus(), children: Array.from({ length }, (_, i) => {
+  const focusInput = useCallback4(() => {
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs37(YStack37, { position: "relative", children: [
+    /* @__PURE__ */ jsx46(XStack33, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
       const char = digits[i]?.trim();
-      const focused = value.length === i;
+      const isCursor = focused && value.length === i;
       return /* @__PURE__ */ jsxs37(
         YStack37,
         {
@@ -2333,20 +2338,59 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
           height: 56,
           borderRadius: "$3",
           borderWidth: 2,
-          borderColor: error ? "$red9" : focused ? "$color9" : "$color6",
-          backgroundColor: error ? "$red2" : "$color2",
+          borderColor: error ? "$red9" : isCursor ? "$color9" : char ? "$color7" : "$color5",
+          backgroundColor: error ? "$red2" : isCursor ? "$color2" : "$color1",
           alignItems: "center",
           justifyContent: "center",
           animation: "quick",
+          pointerEvents: "none",
           children: [
             /* @__PURE__ */ jsx46(SizableText40, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
-            focused && /* @__PURE__ */ jsx46(YStack37, { position: "absolute", bottom: 10, width: 20, height: 2, backgroundColor: "$color9", animation: "quick" })
+            isCursor && /* @__PURE__ */ jsx46(
+              YStack37,
+              {
+                position: "absolute",
+                bottom: 10,
+                width: 20,
+                height: 2,
+                backgroundColor: "$color9",
+                animation: "quick"
+              }
+            )
           ]
         },
         i
       );
     }) }),
-    /* @__PURE__ */ jsx46(
+    Platform.OS === "web" ? /* @__PURE__ */ jsx46(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        autoComplete: "one-time-code",
+        maxLength: length,
+        value,
+        autoFocus,
+        onChange: (e) => handleChange(e.target.value),
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: "100%",
+          height: "100%",
+          opacity: 0,
+          fontSize: 16,
+          caretColor: "transparent",
+          cursor: "pointer"
+        }
+      }
+    ) : /* @__PURE__ */ jsx46(
       Input3,
       {
         ref: inputRef,
@@ -2355,17 +2399,22 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
         keyboardType: "number-pad",
         maxLength: length,
         autoFocus,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
         position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         opacity: 0,
-        width: 1,
-        height: 1
+        fontSize: 16
       }
     )
   ] });
 }
 
 // src/patterns/PasswordInput.tsx
-import { useState as useState11, useCallback as useCallback5 } from "react";
+import { useState as useState12, useCallback as useCallback5 } from "react";
 import { Input as Input4, SizableText as SizableText41, XStack as XStack34, YStack as YStack38 } from "tamagui";
 import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 function getStrength(pw) {
@@ -2376,7 +2425,7 @@ function getStrength(pw) {
   return { label: "Strong", color: "$green9", width: "100%" };
 }
 function PasswordInput({ value = "", onChangeText, placeholder = "Password", label, error, size = "$4", strengthIndicator }) {
-  const [visible, setVisible] = useState11(false);
+  const [visible, setVisible] = useState12(false);
   const toggle = useCallback5(() => setVisible((v) => !v), []);
   const strength = getStrength(value);
   return /* @__PURE__ */ jsxs38(YStack38, { gap: "$1.5", children: [
@@ -2475,7 +2524,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
 }
 
 // src/patterns/SwipeCards.tsx
-import { useState as useState12, useCallback as useCallback6 } from "react";
+import { useState as useState13, useCallback as useCallback6 } from "react";
 import { Circle as Circle8, SizableText as SizableText43, XStack as XStack36, YStack as YStack39 } from "tamagui";
 import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var STACK_SIZE = 3;
@@ -2494,8 +2543,8 @@ function SwipeCards({
   rightLabel = "Like",
   emptyMessage = "No more cards"
 }) {
-  const [index, setIndex] = useState12(0);
-  const [exitDir, setExitDir] = useState12(null);
+  const [index, setIndex] = useState13(0);
+  const [exitDir, setExitDir] = useState13(null);
   const remaining = items.slice(index);
   const isEmpty = remaining.length === 0;
   const handleSwipe = useCallback6((dir) => {
@@ -2650,6 +2699,442 @@ function GlassCard({
     }
   );
 }
+
+// src/patterns/DataTable.tsx
+import { useMemo, useState as useState14 } from "react";
+import { SizableText as SizableText44, Separator as Separator5, XStack as XStack37, YStack as YStack41, useMedia, styled as styled13, View as View6 } from "tamagui";
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+var TH = styled13(View6, { padding: "$3", justifyContent: "center" });
+var TD = styled13(View6, { padding: "$3", justifyContent: "center" });
+function StatusBadge({ status }) {
+  const isActive = status.toLowerCase() === "active";
+  return /* @__PURE__ */ jsxs41(XStack37, { gap: "$2", alignItems: "center", children: [
+    /* @__PURE__ */ jsx51(
+      View6,
+      {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: isActive ? "$green9" : "$orange9"
+      }
+    ),
+    /* @__PURE__ */ jsx51(SizableText44, { size: "$3", color: "$color11", children: status })
+  ] });
+}
+function HeaderCell({ col, sort, onSort }) {
+  const active = sort?.key === col.key;
+  const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
+  return /* @__PURE__ */ jsx51(
+    TH,
+    {
+      width: col.width,
+      flexDirection: "row",
+      alignItems: "center",
+      cursor: col.sortable ? "pointer" : void 0,
+      onPress: col.sortable ? onSort : void 0,
+      pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
+      children: /* @__PURE__ */ jsxs41(
+        SizableText44,
+        {
+          size: "$2",
+          fontWeight: "700",
+          color: active ? "$color12" : "$color9",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          children: [
+            col.header,
+            indicator
+          ]
+        }
+      )
+    },
+    col.key
+  );
+}
+function TableRow({ row, columns, onPress, odd }) {
+  return /* @__PURE__ */ jsx51(
+    XStack37,
+    {
+      backgroundColor: odd ? "$color2" : "transparent",
+      borderBottomWidth: 0.5,
+      borderColor: "$color4",
+      hoverStyle: { backgroundColor: "$color3" },
+      cursor: onPress ? "pointer" : void 0,
+      onPress: onPress ? () => onPress(row) : void 0,
+      pressStyle: onPress ? { opacity: 0.85 } : void 0,
+      animation: "quick",
+      children: columns.map((col) => /* @__PURE__ */ jsx51(TD, { width: col.width, flex: col.width ? void 0 : 1, children: col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx51(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") }) }, col.key))
+    }
+  );
+}
+function CardRow({ row, columns, onPress }) {
+  return /* @__PURE__ */ jsx51(
+    YStack41,
+    {
+      backgroundColor: "$color1",
+      borderRadius: "$4",
+      borderWidth: 1,
+      borderColor: "$color4",
+      padding: "$3",
+      gap: "$2",
+      onPress: onPress ? () => onPress(row) : void 0,
+      pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
+      animation: "quick",
+      children: columns.map((col, i) => /* @__PURE__ */ jsxs41(YStack41, { children: [
+        i > 0 && /* @__PURE__ */ jsx51(Separator5, { marginVertical: "$1.5", borderColor: "$color4" }),
+        /* @__PURE__ */ jsxs41(XStack37, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx51(SizableText44, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
+          col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx51(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") })
+        ] })
+      ] }, col.key))
+    }
+  );
+}
+function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
+  const [sort, setSort] = useState14(null);
+  const media = useMedia();
+  const isSmall = media.sm;
+  const sorted = useMemo(() => {
+    if (!sort) return data;
+    return [...data].sort((a, b) => {
+      const av = a[sort.key], bv = b[sort.key];
+      const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av ?? "").localeCompare(String(bv ?? ""));
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sort]);
+  const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
+  if (!data.length) {
+    return /* @__PURE__ */ jsx51(YStack41, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ jsx51(SizableText44, { size: "$4", color: "$color9", children: emptyMessage }) });
+  }
+  if (isSmall) {
+    return /* @__PURE__ */ jsx51(YStack41, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ jsx51(CardRow, { row, columns, onPress: onRowPress }, i)) });
+  }
+  return /* @__PURE__ */ jsxs41(YStack41, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx51(XStack37, { backgroundColor: "$color1", borderBottomWidth: 1, borderColor: "$color4", children: columns.map((col) => /* @__PURE__ */ jsx51(HeaderCell, { col, sort, onSort: () => toggleSort(col.key) }, col.key)) }),
+    sorted.map((row, i) => /* @__PURE__ */ jsx51(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
+  ] });
+}
+
+// src/patterns/DatePicker.tsx
+import { useCallback as useCallback7, useMemo as useMemo2, useState as useState15 } from "react";
+import { SizableText as SizableText45, XStack as XStack38, YStack as YStack42 } from "tamagui";
+import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+function daysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function sameDay(a, b) {
+  return a ? a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() : false;
+}
+function buildGrid(year, month, startDay) {
+  const total = daysInMonth(year, month);
+  const firstWeekday = new Date(year, month, 1).getDay();
+  const offset = (firstWeekday - startDay + 7) % 7;
+  const prevTotal = daysInMonth(year, month - 1);
+  const cells = [];
+  for (let i = offset - 1; i >= 0; i--)
+    cells.push({ day: prevTotal - i, month: month - 1, year: month === 0 ? year - 1 : year, outside: true });
+  for (let d = 1; d <= total; d++)
+    cells.push({ day: d, month, year, outside: false });
+  while (cells.length < 42)
+    cells.push({ day: cells.length - offset - total + 1, month: month + 1, year: month === 11 ? year + 1 : year, outside: true });
+  return cells;
+}
+function NavButton({ label, onPress }) {
+  return /* @__PURE__ */ jsx52(
+    XStack38,
+    {
+      width: 36,
+      height: 36,
+      borderRadius: "$10",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "$color3",
+      pressStyle: { scale: 0.92, backgroundColor: "$color5" },
+      animation: "quick",
+      onPress,
+      cursor: "pointer",
+      children: /* @__PURE__ */ jsx52(SizableText45, { size: "$5", color: "$color11", fontWeight: "600", children: label })
+    }
+  );
+}
+function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
+  const today = useMemo2(() => /* @__PURE__ */ new Date(), []);
+  const [viewMonth, setViewMonth] = useState15(value?.getMonth() ?? today.getMonth());
+  const [viewYear, setViewYear] = useState15(value?.getFullYear() ?? today.getFullYear());
+  const headers = startDay === 1 ? DAY_LABELS_MON : DAY_LABELS_SUN;
+  const grid = useMemo2(() => buildGrid(viewYear, viewMonth, startDay), [viewYear, viewMonth, startDay]);
+  const navigate = useCallback7((dir) => {
+    setViewMonth((m) => {
+      const next = m + dir;
+      if (next < 0) {
+        setViewYear((y) => y - 1);
+        return 11;
+      }
+      if (next > 11) {
+        setViewYear((y) => y + 1);
+        return 0;
+      }
+      return next;
+    });
+  }, []);
+  const isDisabled = useCallback7((d) => {
+    if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+    if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+    return false;
+  }, [minDate, maxDate]);
+  return /* @__PURE__ */ jsxs42(YStack42, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
+    /* @__PURE__ */ jsxs42(XStack38, { alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx52(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
+      /* @__PURE__ */ jsxs42(SizableText45, { size: "$4", fontWeight: "700", color: "$color12", children: [
+        MONTH_NAMES[viewMonth],
+        " ",
+        viewYear
+      ] }),
+      /* @__PURE__ */ jsx52(NavButton, { label: "\u203A", onPress: () => navigate(1) })
+    ] }),
+    /* @__PURE__ */ jsx52(XStack38, { children: headers.map((h) => /* @__PURE__ */ jsx52(SizableText45, { size: "$2", color: "$color8", fontWeight: "600", textAlign: "center", flex: 1, children: h }, h)) }),
+    Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ jsx52(XStack38, { children: grid.slice(row * 7, row * 7 + 7).map((cell, i) => {
+      const date = new Date(cell.year, cell.month, cell.day);
+      const selected = sameDay(value, date);
+      const isToday = sameDay(today, date);
+      const disabled = cell.outside || isDisabled(date);
+      return /* @__PURE__ */ jsx52(YStack42, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ jsx52(
+        XStack38,
+        {
+          width: 40,
+          height: 40,
+          borderRadius: "$10",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: selected ? "$color9" : "transparent",
+          borderWidth: isToday && !selected ? 1.5 : 0,
+          borderColor: "$color9",
+          pressStyle: disabled ? void 0 : { scale: 0.9, backgroundColor: selected ? "$color10" : "$color4" },
+          animation: "quick",
+          opacity: disabled ? 0.35 : 1,
+          cursor: disabled ? "default" : "pointer",
+          onPress: disabled ? void 0 : () => onDateChange?.(date),
+          children: /* @__PURE__ */ jsx52(
+            SizableText45,
+            {
+              size: "$3",
+              fontWeight: selected || isToday ? "700" : "400",
+              color: selected ? "white" : cell.outside ? "$color5" : "$color12",
+              children: cell.day
+            }
+          )
+        }
+      ) }, `${row}-${i}`);
+    }) }, row))
+  ] });
+}
+
+// src/patterns/EventCard.tsx
+import { SizableText as SizableText46, Theme, XStack as XStack39, YStack as YStack43 } from "tamagui";
+import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+var THEME_MAP = {
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  orange: "orange",
+  red: "red",
+  pink: "pink"
+};
+function ParticipantDots({ count, max }) {
+  const dots = Math.min(count, 5);
+  return /* @__PURE__ */ jsxs43(XStack39, { alignItems: "center", gap: "$1.5", children: [
+    /* @__PURE__ */ jsx53(XStack39, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx53(
+      YStack43,
+      {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: "$color7",
+        borderWidth: 2,
+        borderColor: "$color4",
+        marginLeft: i > 0 ? -8 : 0,
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsx53(SizableText46, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs43(SizableText46, { size: "$2", color: "$color11", fontWeight: "500", children: [
+      count,
+      max ? `/${max}` : ""
+    ] })
+  ] });
+}
+function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
+  return /* @__PURE__ */ jsxs43(
+    YStack43,
+    {
+      backgroundColor: "$color4",
+      borderRadius: "$5",
+      padding: "$4",
+      gap: "$3",
+      borderWidth: 1,
+      borderColor: "$color7",
+      onPress,
+      animation: "quick",
+      pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
+      cursor: onPress ? "pointer" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs43(XStack39, { justifyContent: "space-between", alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxs43(YStack43, { flex: 1, gap: "$1", children: [
+            /* @__PURE__ */ jsx53(SizableText46, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
+            subtitle && /* @__PURE__ */ jsx53(SizableText46, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
+          ] }),
+          time && /* @__PURE__ */ jsx53(YStack43, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1.5", borderRadius: "$3", children: /* @__PURE__ */ jsx53(SizableText46, { size: "$2", fontWeight: "600", color: "$color12", children: time }) })
+        ] }),
+        /* @__PURE__ */ jsxs43(XStack39, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
+          location && /* @__PURE__ */ jsxs43(XStack39, { gap: "$1.5", alignItems: "center", children: [
+            /* @__PURE__ */ jsx53(SizableText46, { size: "$3", children: "\u{1F4CD}" }),
+            /* @__PURE__ */ jsx53(SizableText46, { size: "$3", color: "$color11", children: location })
+          ] }),
+          participants !== void 0 && /* @__PURE__ */ jsx53(ParticipantDots, { count: participants, max: maxParticipants })
+        ] }),
+        (label || actions) && /* @__PURE__ */ jsxs43(XStack39, { justifyContent: "space-between", alignItems: "center", children: [
+          label ? /* @__PURE__ */ jsx53(XStack39, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx53(SizableText46, { size: "$2", fontWeight: "600", color: "$color11", children: label }) }) : /* @__PURE__ */ jsx53(YStack43, {}),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+function EventCard({ theme = "purple", ...props }) {
+  return /* @__PURE__ */ jsx53(Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ jsx53(CardInner, { ...props }) });
+}
+
+// src/patterns/UserPreferences.tsx
+import { Separator as Separator6, SizableText as SizableText47, Slider, Switch as Switch2, XStack as XStack40, YStack as YStack44 } from "tamagui";
+import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+function ItemLabel({ title, description, color }) {
+  return /* @__PURE__ */ jsxs44(YStack44, { flex: 1, gap: "$1", children: [
+    /* @__PURE__ */ jsx54(SizableText47, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
+    description && /* @__PURE__ */ jsx54(SizableText47, { size: "$2", color: "$color9", children: description })
+  ] });
+}
+function ToggleRow({ item }) {
+  return /* @__PURE__ */ jsxs44(XStack40, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
+    /* @__PURE__ */ jsx54(ItemLabel, { title: item.title, description: item.description }),
+    /* @__PURE__ */ jsx54(Switch2, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx54(Switch2.Thumb, { animation: "quick" }) })
+  ] });
+}
+function SelectRow({ item }) {
+  const current = item.options.find((o) => o.value === item.value);
+  return /* @__PURE__ */ jsxs44(
+    XStack40,
+    {
+      alignItems: "center",
+      gap: "$3",
+      paddingVertical: "$3",
+      paddingHorizontal: "$4",
+      pressStyle: { backgroundColor: "$color3" },
+      animation: "quick",
+      cursor: "pointer",
+      onPress: () => {
+        const idx = item.options.findIndex((o) => o.value === item.value);
+        const next = item.options[(idx + 1) % item.options.length];
+        if (next) item.onValueChange(next.value);
+      },
+      children: [
+        /* @__PURE__ */ jsx54(ItemLabel, { title: item.title, description: item.description }),
+        /* @__PURE__ */ jsx54(SizableText47, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
+        /* @__PURE__ */ jsx54(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
+      ]
+    }
+  );
+}
+function SliderRow({ item }) {
+  const min = item.min ?? 0;
+  const max = item.max ?? 100;
+  return /* @__PURE__ */ jsxs44(YStack44, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
+    /* @__PURE__ */ jsxs44(XStack40, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx54(ItemLabel, { title: item.title, description: item.description }),
+      /* @__PURE__ */ jsx54(SizableText47, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
+    ] }),
+    /* @__PURE__ */ jsxs44(
+      Slider,
+      {
+        value: [item.value],
+        min,
+        max,
+        step: 1,
+        onValueChange: ([v]) => {
+          if (v !== void 0) item.onValueChange(v);
+        },
+        children: [
+          /* @__PURE__ */ jsx54(Slider.Track, { backgroundColor: "$color4", height: 4, children: /* @__PURE__ */ jsx54(Slider.TrackActive, { backgroundColor: "$color9" }) }),
+          /* @__PURE__ */ jsx54(Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
+        ]
+      }
+    )
+  ] });
+}
+function ActionRow({ item }) {
+  return /* @__PURE__ */ jsxs44(
+    XStack40,
+    {
+      alignItems: "center",
+      gap: "$3",
+      paddingVertical: "$3",
+      paddingHorizontal: "$4",
+      pressStyle: { backgroundColor: "$color3" },
+      animation: "quick",
+      cursor: "pointer",
+      onPress: item.onPress,
+      children: [
+        /* @__PURE__ */ jsx54(
+          ItemLabel,
+          {
+            title: item.title,
+            description: item.description,
+            color: item.destructive ? "$red10" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx54(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
+      ]
+    }
+  );
+}
+function PreferenceRow({ item }) {
+  switch (item.type) {
+    case "toggle":
+      return /* @__PURE__ */ jsx54(ToggleRow, { item });
+    case "select":
+      return /* @__PURE__ */ jsx54(SelectRow, { item });
+    case "slider":
+      return /* @__PURE__ */ jsx54(SliderRow, { item });
+    case "action":
+      return /* @__PURE__ */ jsx54(ActionRow, { item });
+  }
+}
+function UserPreferences({ sections }) {
+  return /* @__PURE__ */ jsx54(YStack44, { gap: "$5", children: sections.map((section, si) => /* @__PURE__ */ jsxs44(YStack44, { gap: "$2", children: [
+    /* @__PURE__ */ jsxs44(YStack44, { paddingHorizontal: "$1", gap: "$0.5", children: [
+      /* @__PURE__ */ jsx54(SizableText47, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
+      section.description && /* @__PURE__ */ jsx54(SizableText47, { size: "$2", color: "$color8", children: section.description })
+    ] }),
+    /* @__PURE__ */ jsx54(
+      YStack44,
+      {
+        backgroundColor: "$color2",
+        borderRadius: "$4",
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor: "$color4",
+        children: section.items.map((item, ii) => /* @__PURE__ */ jsxs44(YStack44, { children: [
+          /* @__PURE__ */ jsx54(PreferenceRow, { item }),
+          ii < section.items.length - 1 && /* @__PURE__ */ jsx54(Separator6, { borderColor: "$color4" })
+        ] }, item.id))
+      }
+    )
+  ] }, si)) });
+}
 export {
   Accordion,
   ActionSheet,
@@ -2686,11 +3171,14 @@ export {
   ConfirmDialog,
   Container,
   CountdownBanner,
+  DataTable,
+  DatePicker,
   Dialog,
   DialogProvider,
   Divider,
   EmptyState,
   EnsureFlexed,
+  EventCard,
   Fieldset,
   FloatingActionButton,
   Footer,
@@ -2747,22 +3235,23 @@ export {
   Section,
   Select,
   SepHeading,
-  Separator5 as Separator,
+  Separator7 as Separator,
   SettingsScreen,
   Sheet3 as Sheet,
   SizableStack,
-  SizableText44 as SizableText,
+  SizableText48 as SizableText,
   Skeleton,
-  Slider,
+  Slider2 as Slider,
   Spacer,
   Spinner2 as Spinner,
   Square,
   Stack,
+  StatusBadge,
   StepPageLayout,
   SubHeading,
   SwipeCards,
   SwipeableRow,
-  Switch2 as Switch,
+  Switch3 as Switch,
   TabBar,
   Tabs,
   Image9 as TamaguiImage,
@@ -2771,18 +3260,19 @@ export {
   TestimonialCard,
   Text,
   TextArea,
-  Theme,
+  Theme2 as Theme,
   ThemeableStack,
   ToggleGroup,
   Tooltip,
   TooltipSimple,
   Unspaced,
-  View6 as View,
+  UserPreferences,
+  View7 as View,
   VisuallyHidden,
   XGroup,
-  XStack37 as XStack,
+  XStack41 as XStack,
   YGroup,
-  YStack41 as YStack,
+  YStack45 as YStack,
   ZStack,
   addTheme,
   blinkConfig,
@@ -2804,7 +3294,7 @@ export {
   isWeb,
   replaceTheme,
   showError,
-  styled13 as styled,
+  styled14 as styled,
   defaultConfig2 as tamaguiDefaultConfig,
   toast,
   updateTheme,
@@ -2818,7 +3308,7 @@ export {
   useForceUpdate,
   useIsPresent,
   useIsomorphicLayoutEffect,
-  useMedia,
+  useMedia2 as useMedia,
   usePresence,
   useTheme,
   useThemeName,