@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/PageTitle.jsx

@@ -0,0 +1,205 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import { PAGE_HEADER_HEIGHT, PAGE_TITLE_CLASS, pageTitleStyle, textStyle } from "./controlStyles";
+import { useScheme } from "./useScheme";
+/**
+ * The web page title (`Breadcrumb`: `text-xl font-semibold leading-tight
+ * tracking-tight`): Instrument Sans 600 at 20 / 25 with -0.5 letter spacing,
+ * in the scheme's foreground. A header for VoiceOver and TalkBack. One line,
+ * cut off at the end as the web `truncate`; pass `numberOfLines={0}` to wrap.
+ * It scales with the system font size.
+ */
+export function PageTitle(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 scheme = useScheme();
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn(PAGE_TITLE_CLASS, className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== scheme) {
+    t2 = textStyle("foreground", scheme);
+    $[6] = scheme;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = pageTitleStyle();
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== style || $[10] !== t2) {
+    t4 = [t2, t3, style];
+    $[9] = style;
+    $[10] = t2;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== props || $[13] !== t1 || $[14] !== t4) {
+    t5 = <Text accessibilityRole="header" numberOfLines={1} className={t1} style={t4} {...props} />;
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
+}
+/**
+ * A screen's title row: an optional `leading` part, `PageTitle` and an
+ * optional `action` at the end, with the `ScreenContainer` side padding (`px-4`). The row is at
+ * least `PAGE_HEADER_HEIGHT` (56) high below the top inset, so tab roots with
+ * and without an action put their titles at the same height.
+ */
+export function PageHeader(t0) {
+  const $ = _c(33);
+  let action;
+  let className;
+  let leading;
+  let props;
+  let style;
+  let t1;
+  let title;
+  let titleClassName;
+  if ($[0] !== t0) {
+    ({
+      title,
+      leading,
+      action,
+      safeTop: t1,
+      className,
+      titleClassName,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = action;
+    $[2] = className;
+    $[3] = leading;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = title;
+    $[8] = titleClassName;
+  } else {
+    action = $[1];
+    className = $[2];
+    leading = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+    title = $[7];
+    titleClassName = $[8];
+  }
+  const safeTop = t1 === undefined ? true : t1;
+  const insets = useSafeAreaInsets();
+  const top = safeTop ? insets.top : 0;
+  let t2;
+  if ($[9] !== className) {
+    t2 = cn("flex-row items-center justify-between gap-3 px-4", className);
+    $[9] = className;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const t3 = top + PAGE_HEADER_HEIGHT;
+  let t4;
+  if ($[11] !== t3 || $[12] !== top) {
+    t4 = {
+      paddingTop: top,
+      minHeight: t3
+    };
+    $[11] = t3;
+    $[12] = top;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== style || $[15] !== t4) {
+    t5 = [t4, style];
+    $[14] = style;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== leading) {
+    t6 = leading ? <View className="shrink-0">{leading}</View> : null;
+    $[17] = leading;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== titleClassName) {
+    t7 = cn("min-w-0 flex-1", titleClassName);
+    $[19] = titleClassName;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[21] !== t7 || $[22] !== title) {
+    t8 = <PageTitle className={t7}>{title}</PageTitle>;
+    $[21] = t7;
+    $[22] = title;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== action) {
+    t9 = action ? <View className="shrink-0">{action}</View> : null;
+    $[24] = action;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  let t10;
+  if ($[26] !== props || $[27] !== t2 || $[28] !== t5 || $[29] !== t6 || $[30] !== t8 || $[31] !== t9) {
+    t10 = <View className={t2} style={t5} {...props}>{t6}{t8}{t9}</View>;
+    $[26] = props;
+    $[27] = t2;
+    $[28] = t5;
+    $[29] = t6;
+    $[30] = t8;
+    $[31] = t9;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  return t10;
+}

package/dist/Pager.jsx

@@ -0,0 +1,105 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect } from "react";
+import { View } from "react-native";
+/**
+ * The Gesture Handler pager, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`.
+ */
+export const PagerGestureContext = createContext(null);
+
+/** Set inside a swiped `Pager`: a `SwipeableRow` there leaves the directions it has no actions for to the pager. */
+export const InsidePagerContext = createContext(false);
+
+/**
+ * Side-by-side pages a horizontal swipe moves between, such as the sections
+ * under a row of `PillTabs`. The pages follow the finger 1:1 and, on release,
+ * spring on at the finger's speed to the nearest page (a flick turns one
+ * page); past the first and last page they rubber-band. The linked
+ * `progress` moves the `PillTabs` indicator with them. Only a clearly
+ * sideways drag takes the pages: a vertical drag scrolls the page, and a
+ * `SwipeableRow` under the finger takes its own swipe first (it lets a drag
+ * toward a side it has no actions for through to the pager). A settled page
+ * fires a selection haptic and `onIndexChange`. With Reduce Motion on the
+ * pages still follow the finger, and the release settles at once.
+ *
+ * The swipe needs `GestureHandlerProvider`; without it only the current page
+ * is drawn, with no swipe.
+ */
+export function Pager(props) {
+  const $ = _c(5);
+  const GesturePager = useContext(PagerGestureContext);
+  if (GesturePager) {
+    let t0;
+    if ($[0] !== GesturePager || $[1] !== props) {
+      t0 = <GesturePager {...props} />;
+      $[0] = GesturePager;
+      $[1] = props;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    return t0;
+  }
+  let t0;
+  if ($[3] !== props) {
+    t0 = <StaticPager {...props} />;
+    $[3] = props;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+function StaticPager(t0) {
+  const $ = _c(11);
+  const {
+    index,
+    progress,
+    renderPage
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== index || $[1] !== progress) {
+    t1 = () => {
+      progress.set(index);
+    };
+    t2 = [index, progress];
+    $[0] = index;
+    $[1] = progress;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flex: 1
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== index || $[6] !== renderPage) {
+    t4 = renderPage(index);
+    $[5] = index;
+    $[6] = renderPage;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== index || $[9] !== t4) {
+    t5 = <View key={index} style={t3}>{t4}</View>;
+    $[8] = index;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}

package/dist/PasswordInput.jsx

@@ -0,0 +1,120 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Pressable, View } from "react-native";
+import { IconEye, IconEyeOff } from "@tabler/icons-react-native";
+import { Input } from "./Input";
+import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, touchSlop, typeStyle } from "./controlStyles";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/** Toggle metrics: painted 24 (32 with larger text), 44 with its hit slop. */
+function passwordToggleSize(largerText) {
+  return largerText ? {
+    button: 32,
+    icon: 20,
+    right: 12,
+    paddingRight: 56
+  } : {
+    button: 24,
+    icon: 18,
+    right: 8,
+    paddingRight: 44
+  };
+}
+
+/**
+ * `Input` for a password, with a show/hide eye button at the end. The text is
+ * hidden at first. The toggle flips `secureTextEntry` on the same mounted
+ * field, so focus and the cursor stay where they were. The `secureTextEntry`
+ * prop is not accepted: the toggle owns it. Every other `Input` prop, `ref`
+ * and `testID` pass through. The toggle is labelled "Show password" while the
+ * text is hidden and "Hide password" while it shows, has the test ID
+ * `${testID}-toggle` (`password-input-toggle` without a `testID`), is painted
+ * at 24 and reaches 44 with its hit slop (`touchSlop`). It is hidden when the
+ * field is not editable. Inside a `ScrollView`, set
+ * `keyboardShouldPersistTaps="handled"` so the first tap toggles while the
+ * keyboard is up.
+ */
+const PasswordInput = React.forwardRef((t0, ref) => {
+  const $ = _c(21);
+  let className;
+  let props;
+  let style;
+  let testID;
+  let wrapperClassName;
+  if ($[0] !== t0) {
+    ({
+      wrapperClassName,
+      className,
+      style,
+      testID,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = testID;
+    $[5] = wrapperClassName;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    testID = $[4];
+    wrapperClassName = $[5];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const [visible, setVisible] = React.useState(false);
+  let t1;
+  if ($[6] !== className || $[7] !== largerText || $[8] !== props || $[9] !== ref || $[10] !== scheme || $[11] !== style || $[12] !== testID || $[13] !== visible || $[14] !== wrapperClassName) {
+    const metrics = passwordToggleSize(largerText);
+    const muted = tokens.color.muted[scheme];
+    const Icon = visible ? IconEyeOff : IconEye;
+    let t2;
+    if ($[16] !== wrapperClassName) {
+      t2 = cn("relative w-full", wrapperClassName);
+      $[16] = wrapperClassName;
+      $[17] = t2;
+    } else {
+      t2 = $[17];
+    }
+    const t3 = largerText && "min-h-16 px-4 py-4 text-xl font-instrument-sans-medium";
+    let t4;
+    if ($[18] !== className || $[19] !== t3) {
+      t4 = cn("min-h-11 border px-3.5 py-2 text-base font-instrument-sans", t3, className);
+      $[18] = className;
+      $[19] = t3;
+      $[20] = t4;
+    } else {
+      t4 = $[20];
+    }
+    t1 = <View className={t2}><Input {...props} ref={ref} testID={testID} className={t4} secureTextEntry={!visible} style={[fieldStyle(scheme), fieldTextStyle(scheme), largerText ? typeStyle("medium") : null, {
+        paddingRight: metrics.paddingRight
+      }, style]} />{props.editable !== false ? <View pointerEvents="box-none" className="absolute bottom-0 top-0 justify-center" style={{
+        right: metrics.right
+      }}><Pressable testID={testID ? `${testID}-toggle` : "password-input-toggle"} accessibilityRole="button" accessibilityLabel={visible ? "Hide password" : "Show password"} hitSlop={touchSlop(metrics.button)} onPress={() => setVisible(_temp)} className="items-center justify-center rounded-md active:opacity-70" style={{
+          width: metrics.button,
+          height: metrics.button
+        }}><Icon size={metrics.icon} color={muted} strokeWidth={1.75} /></Pressable></View> : null}</View>;
+    $[6] = className;
+    $[7] = largerText;
+    $[8] = props;
+    $[9] = ref;
+    $[10] = scheme;
+    $[11] = style;
+    $[12] = testID;
+    $[13] = visible;
+    $[14] = wrapperClassName;
+    $[15] = t1;
+  } else {
+    t1 = $[15];
+  }
+  return t1;
+});
+PasswordInput.displayName = "PasswordInput";
+export { PasswordInput };
+function _temp(current) {
+  return !current;
+}