@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/EmptyState.jsx

@@ -0,0 +1,434 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { View, Text } from "react-native";
+import { IconInbox } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+function EmptyStateView(t0) {
+  const $ = _c(28);
+  const {
+    title,
+    description,
+    icon: t1,
+    action,
+    compact: t2,
+    testID
+  } = t0;
+  const Icon = t1 === undefined ? IconInbox : t1;
+  const compact = t2 === undefined ? false : t2;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t3 = `items-center px-4 ${compact ? "py-6" : "py-16"}`;
+  const t4 = largerText ? 44 : 40;
+  const t5 = tokens.color.muted[scheme];
+  let t6;
+  if ($[0] !== Icon || $[1] !== t4 || $[2] !== t5) {
+    t6 = <Icon size={t4} color={t5} />;
+    $[0] = Icon;
+    $[1] = t4;
+    $[2] = t5;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const t7 = largerText ? "text-xl" : "text-lg";
+  let t8;
+  if ($[4] !== t7) {
+    t8 = cn("mt-4 text-center font-instrument-sans-semibold", t7);
+    $[4] = t7;
+    $[5] = t8;
+  } else {
+    t8 = $[5];
+  }
+  let t9;
+  if ($[6] !== scheme) {
+    t9 = textStyle("foreground", scheme);
+    $[6] = scheme;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+  let t10;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = typeStyle("semibold");
+    $[8] = t10;
+  } else {
+    t10 = $[8];
+  }
+  let t11;
+  if ($[9] !== t9) {
+    t11 = [t9, t10];
+    $[9] = t9;
+    $[10] = t11;
+  } else {
+    t11 = $[10];
+  }
+  let t12;
+  if ($[11] !== t11 || $[12] !== t8 || $[13] !== title) {
+    t12 = <Text className={t8} style={t11}>{title}</Text>;
+    $[11] = t11;
+    $[12] = t8;
+    $[13] = title;
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  let t13;
+  if ($[15] !== description || $[16] !== largerText || $[17] !== scheme) {
+    t13 = description ? <Text className={cn("mt-2 max-w-sm text-center font-instrument-sans", largerText ? "text-lg" : "text-base")} style={textStyle("muted", scheme)}>{description}</Text> : null;
+    $[15] = description;
+    $[16] = largerText;
+    $[17] = scheme;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== action) {
+    t14 = action ? <View className="mt-6">{action}</View> : null;
+    $[19] = action;
+    $[20] = t14;
+  } else {
+    t14 = $[20];
+  }
+  let t15;
+  if ($[21] !== t12 || $[22] !== t13 || $[23] !== t14 || $[24] !== t3 || $[25] !== t6 || $[26] !== testID) {
+    t15 = <View testID={testID} className={t3}>{t6}{t12}{t13}{t14}</View>;
+    $[21] = t12;
+    $[22] = t13;
+    $[23] = t14;
+    $[24] = t3;
+    $[25] = t6;
+    $[26] = testID;
+    $[27] = t15;
+  } else {
+    t15 = $[27];
+  }
+  return t15;
+}
+
+// Composable parts with the web names (`EmptyState.Root`, `.Icon`, `.Title`,
+// `.Description`, `.Actions`). `Root` sets the variant, the parts read it.
+
+/** `default`: open centred block with a large bare icon. `panel`: filled rounded block, icon in a tile. */
+
+const EmptyStateContext = createContext("default");
+function Root(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const variant = t1 === undefined ? "default" : t1;
+  const t2 = variant === "panel" ? "rounded-[20px] bg-surface-secondary px-4 py-10" : "px-4 py-16";
+  let t3;
+  if ($[4] !== className || $[5] !== t2) {
+    t3 = cn("items-center justify-center", t2, className);
+    $[4] = className;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== props || $[8] !== t3) {
+    t4 = <View className={t3} {...props} />;
+    $[7] = props;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== t4 || $[11] !== variant) {
+    t5 = <EmptyStateContext.Provider value={variant}>{t4}</EmptyStateContext.Provider>;
+    $[10] = t4;
+    $[11] = variant;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+function Icon(t0) {
+  const $ = _c(23);
+  const {
+    icon: IconComponent,
+    size,
+    stroke,
+    className
+  } = t0;
+  const variant = useContext(EmptyStateContext);
+  const scheme = useScheme();
+  if (variant === "panel") {
+    let t1;
+    if ($[0] !== className) {
+      t1 = cn("mb-3 h-11 w-11 items-center justify-center rounded-xl", className);
+      $[0] = className;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    const t2 = palette.surfaceTertiary[scheme];
+    let t3;
+    if ($[2] !== t2) {
+      t3 = {
+        backgroundColor: t2
+      };
+      $[2] = t2;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    const t4 = size ?? 22;
+    const t5 = stroke ?? 1.5;
+    const t6 = tokens.color.muted[scheme];
+    let t7;
+    if ($[4] !== IconComponent || $[5] !== t4 || $[6] !== t5 || $[7] !== t6) {
+      t7 = <IconComponent size={t4} strokeWidth={t5} color={t6} />;
+      $[4] = IconComponent;
+      $[5] = t4;
+      $[6] = t5;
+      $[7] = t6;
+      $[8] = t7;
+    } else {
+      t7 = $[8];
+    }
+    let t8;
+    if ($[9] !== t1 || $[10] !== t3 || $[11] !== t7) {
+      t8 = <View className={t1} style={t3}>{t7}</View>;
+      $[9] = t1;
+      $[10] = t3;
+      $[11] = t7;
+      $[12] = t8;
+    } else {
+      t8 = $[12];
+    }
+    return t8;
+  }
+  let t1;
+  if ($[13] !== className) {
+    t1 = cn("mb-4", className);
+    $[13] = className;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const t2 = size ?? 40;
+  const t3 = tokens.color.muted[scheme];
+  let t4;
+  if ($[15] !== IconComponent || $[16] !== stroke || $[17] !== t2 || $[18] !== t3) {
+    t4 = <IconComponent size={t2} strokeWidth={stroke} color={t3} />;
+    $[15] = IconComponent;
+    $[16] = stroke;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+  } else {
+    t4 = $[19];
+  }
+  let t5;
+  if ($[20] !== t1 || $[21] !== t4) {
+    t5 = <View className={t1}>{t4}</View>;
+    $[20] = t1;
+    $[21] = t4;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  return t5;
+}
+function Title(t0) {
+  const $ = _c(17);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = largerText ? "text-xl" : "text-lg";
+  let t2;
+  if ($[4] !== className || $[5] !== t1) {
+    t2 = cn("text-center font-instrument-sans-semibold", t1, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== scheme) {
+    t3 = textStyle("foreground", scheme);
+    $[7] = scheme;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = typeStyle("semibold");
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== style || $[11] !== t3) {
+    t5 = [t3, t4, style];
+    $[10] = style;
+    $[11] = t3;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== props || $[14] !== t2 || $[15] !== t5) {
+    t6 = <Text className={t2} style={t5} {...props} />;
+    $[13] = props;
+    $[14] = t2;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+function Description(t0) {
+  const $ = _c(16);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = largerText ? "text-lg" : "text-base";
+  let t2;
+  if ($[4] !== className || $[5] !== t1) {
+    t2 = cn("mt-2 max-w-sm text-center font-instrument-sans", t1, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== scheme) {
+    t3 = textStyle("muted", scheme);
+    $[7] = scheme;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== style || $[10] !== t3) {
+    t4 = [t3, style];
+    $[9] = style;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== props || $[13] !== t2 || $[14] !== t4) {
+    t5 = <Text className={t2} style={t4} {...props} />;
+    $[12] = props;
+    $[13] = t2;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
+}
+function Actions(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("mt-6", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+/**
+ * "Nothing here yet" block. Call it with `title`, `description`, `icon` and
+ * `action`, or compose `EmptyState.Root` and its parts as on the web.
+ */
+export const EmptyState = Object.assign(EmptyStateView, {
+  Root,
+  Icon,
+  Title,
+  Description,
+  Actions
+});

package/dist/ExpoWebRoot.jsx

@@ -0,0 +1,134 @@
+import { c as _c } from "react/compiler-runtime";
+import { ScrollViewStyleReset } from "expo-router/html";
+import { tokens } from "./tokens";
+
+/** `"native"` stops pinch-zoom so the page acts like the app; `"accessible"` allows it (WCAG 1.4.4). Both cover the notch. */
+
+export const EXPO_WEB_VIEWPORT = {
+  native: "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover",
+  accessible: "width=device-width, initial-scale=1.0, viewport-fit=cover"
+};
+/**
+ * The body fill as raw CSS, so the background does not flash in dark mode
+ * before the app paints. Dark follows the system, and the NativeWind `dark`
+ * class on `<html>` when the app sets the scheme (`darkMode: "class"`).
+ */
+export function expoWebBackgroundCss(light, dark) {
+  return `
+body {
+  background-color: ${light};
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: ${dark};
+  }
+}
+html.dark body {
+  background-color: ${dark};
+}`;
+}
+
+/**
+ * The root HTML for Expo web static rendering. Use it as the whole of
+ * `app/+html.tsx`:
+ *
+ *   export default function Root({ children }: { children: React.ReactNode }) {
+ *     return <ExpoWebRoot>{children}</ExpoWebRoot>;
+ *   }
+ *
+ * Runs in Node during the static render, with no DOM.
+ */
+export function ExpoWebRoot(t0) {
+  const $ = _c(22);
+  const {
+    children,
+    lang: t1,
+    viewport: t2,
+    scrollReset: t3,
+    lightBackground: t4,
+    darkBackground: t5,
+    head
+  } = t0;
+  const lang = t1 === undefined ? "en" : t1;
+  const viewport = t2 === undefined ? "native" : t2;
+  const scrollReset = t3 === undefined ? true : t3;
+  const lightBackground = t4 === undefined ? tokens.color.background.light : t4;
+  const darkBackground = t5 === undefined ? tokens.color.background.dark : t5;
+  let t6;
+  let t7;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = <meta charSet="utf-8" />;
+    t7 = <meta httpEquiv="X-UA-Compatible" content="IE=edge" />;
+    $[0] = t6;
+    $[1] = t7;
+  } else {
+    t6 = $[0];
+    t7 = $[1];
+  }
+  const t8 = EXPO_WEB_VIEWPORT[viewport];
+  let t9;
+  if ($[2] !== t8) {
+    t9 = <meta name="viewport" content={t8} />;
+    $[2] = t8;
+    $[3] = t9;
+  } else {
+    t9 = $[3];
+  }
+  let t10;
+  if ($[4] !== scrollReset) {
+    t10 = scrollReset ? <ScrollViewStyleReset /> : null;
+    $[4] = scrollReset;
+    $[5] = t10;
+  } else {
+    t10 = $[5];
+  }
+  let t11;
+  if ($[6] !== darkBackground || $[7] !== lightBackground) {
+    t11 = expoWebBackgroundCss(lightBackground, darkBackground);
+    $[6] = darkBackground;
+    $[7] = lightBackground;
+    $[8] = t11;
+  } else {
+    t11 = $[8];
+  }
+  let t12;
+  if ($[9] !== t11) {
+    t12 = <style dangerouslySetInnerHTML={{
+      __html: t11
+    }} />;
+    $[9] = t11;
+    $[10] = t12;
+  } else {
+    t12 = $[10];
+  }
+  let t13;
+  if ($[11] !== head || $[12] !== t10 || $[13] !== t12 || $[14] !== t9) {
+    t13 = <head>{t6}{t7}{t9}{t10}{t12}{head}</head>;
+    $[11] = head;
+    $[12] = t10;
+    $[13] = t12;
+    $[14] = t9;
+    $[15] = t13;
+  } else {
+    t13 = $[15];
+  }
+  let t14;
+  if ($[16] !== children) {
+    t14 = <body>{children}</body>;
+    $[16] = children;
+    $[17] = t14;
+  } else {
+    t14 = $[17];
+  }
+  let t15;
+  if ($[18] !== lang || $[19] !== t13 || $[20] !== t14) {
+    t15 = <html lang={lang}>{t13}{t14}</html>;
+    $[18] = lang;
+    $[19] = t13;
+    $[20] = t14;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  return t15;
+}

package/dist/FloatingFAB.jsx

@@ -0,0 +1,95 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform, Pressable, View } from "react-native";
+import { cn } from "./cn";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FloatingSurface } from "./FloatingSurface";
+import { useAccentColor, useLargerText } from "./theme";
+import { FLOATING_INSET, FLOATING_TAB_BAR_HEIGHT, FLOATING_TAB_BAR_HEIGHT_LARGE } from "./floating";
+export function FloatingFAB(t0) {
+  const $ = _c(19);
+  const {
+    onPress,
+    label,
+    testID,
+    children
+  } = t0;
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const accentColor = useAccentColor();
+  const size = largerText ? 64 : 56;
+  const tabBar = largerText ? FLOATING_TAB_BAR_HEIGHT_LARGE : FLOATING_TAB_BAR_HEIGHT;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = cn("z-10", Platform.OS === "web" ? "fixed" : "absolute");
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = insets.right + FLOATING_INSET;
+  const t3 = FLOATING_INSET + Math.max(insets.bottom, 8) + tabBar + 20;
+  let t4;
+  if ($[1] !== t2 || $[2] !== t3) {
+    t4 = {
+      right: t2,
+      bottom: t3
+    };
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const t5 = size / 2;
+  let t6;
+  if ($[4] !== accentColor || $[5] !== size) {
+    t6 = t7 => {
+      const {
+        pressed
+      } = t7;
+      return {
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        backgroundColor: accentColor,
+        opacity: pressed ? 0.7 : 1
+      };
+    };
+    $[4] = accentColor;
+    $[5] = size;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== children || $[8] !== label || $[9] !== onPress || $[10] !== t6 || $[11] !== testID) {
+    t7 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={t6}>{children}</Pressable>;
+    $[7] = children;
+    $[8] = label;
+    $[9] = onPress;
+    $[10] = t6;
+    $[11] = testID;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t5 || $[14] !== t7) {
+    t8 = <FloatingSurface radius={t5} blur={false}>{t7}</FloatingSurface>;
+    $[13] = t5;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t4 || $[17] !== t8) {
+    t9 = <View pointerEvents="box-none" className={t1} style={t4}>{t8}</View>;
+    $[16] = t4;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}