@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Tabs.jsx

@@ -0,0 +1,385 @@
+import { c as _c } from "react/compiler-runtime";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { Pressable, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { cn } from "./cn";
+import { MIN_TOUCH_TARGET, tabColors, tabTrackStyle, tabTriggerSize, touchSlop, typeStyle } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { useControllableState } from "./primitives/use-controllable-state";
+import { useTabIndicator, useTabLabelStyle } from "./tabIndicator";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+/** `pills` (default): separate pills, the `PillTabs` look. `segmented`: one track with the active segment raised. `soft`: wrapping pills, the active one filled. `pills` and `segmented` are as wide as their tabs, at the start, as on the web. */
+
+const TabsContext = createContext(null);
+const TabsListContext = createContext({
+  variant: "pills",
+  size: "default"
+});
+
+/** A trigger's place in its list, for the linked indicator and label colour. */
+const TabIndexContext = createContext(0);
+function useTabs(part) {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(`${part} must be inside Tabs.`);
+  }
+  return context;
+}
+/** Composable tabs with the web part names (`Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`). For a flat options array use `PillTabs`. */
+export function Tabs(t0) {
+  const $ = _c(21);
+  let className;
+  let onValueChange;
+  let props;
+  let t1;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      defaultValue: t1,
+      onValueChange,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = onValueChange;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = value;
+  } else {
+    className = $[1];
+    onValueChange = $[2];
+    props = $[3];
+    t1 = $[4];
+    value = $[5];
+  }
+  const defaultValue = t1 === undefined ? "" : t1;
+  let t2;
+  if ($[6] !== defaultValue || $[7] !== onValueChange || $[8] !== value) {
+    t2 = {
+      value,
+      defaultValue,
+      onChange: onValueChange
+    };
+    $[6] = defaultValue;
+    $[7] = onValueChange;
+    $[8] = value;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const [current, setValue] = useControllableState(t2);
+  let t3;
+  if ($[10] !== current || $[11] !== setValue) {
+    t3 = {
+      value: current,
+      setValue
+    };
+    $[10] = current;
+    $[11] = setValue;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== className) {
+    t4 = cn("gap-3", className);
+    $[13] = className;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== props || $[16] !== t4) {
+    t5 = <View className={t4} {...props} />;
+    $[15] = props;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== t3 || $[19] !== t5) {
+    t6 = <TabsContext.Provider value={t3}>{t5}</TabsContext.Provider>;
+    $[18] = t3;
+    $[19] = t5;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  return t6;
+}
+export function TabsList(t0) {
+  const $ = _c(36);
+  let children;
+  let className;
+  let progress;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      size: t2,
+      progress,
+      className,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = progress;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    progress = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+    t2 = $[7];
+  }
+  const variant = t1 === undefined ? "pills" : t1;
+  const size = t2 === undefined ? "default" : t2;
+  const scheme = useScheme();
+  const triggers = Children.toArray(children);
+  const indicator = useTabIndicator(progress, triggers.length);
+  const t3 = TabsListContext;
+  let t4;
+  if ($[8] !== indicator || $[9] !== progress || $[10] !== size || $[11] !== variant) {
+    t4 = {
+      variant,
+      size,
+      progress,
+      indicator
+    };
+    $[8] = indicator;
+    $[9] = progress;
+    $[10] = size;
+    $[11] = variant;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const T0 = View;
+  const t5 = "tablist";
+  const t6 = variant === "segmented" ? "max-w-full gap-[3px] self-start rounded-full p-[3px]" : variant === "soft" ? "flex-wrap items-center justify-center gap-1.5" : progress ? "max-w-full gap-1.5 self-start" : "max-w-full flex-wrap gap-1.5 self-start";
+  let t7;
+  if ($[13] !== className || $[14] !== t6) {
+    t7 = cn("flex-row", t6, className);
+    $[13] = className;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== scheme || $[17] !== style || $[18] !== variant) {
+    t8 = variant === "segmented" ? [tabTrackStyle(scheme), style] : style;
+    $[16] = scheme;
+    $[17] = style;
+    $[18] = variant;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== indicator.measured || $[21] !== indicator.style || $[22] !== scheme || $[23] !== variant) {
+    t9 = indicator.measured ? <Animated.View pointerEvents="none" style={[{
+      position: "absolute",
+      left: 0,
+      borderRadius: 9999
+    }, {
+      backgroundColor: tabColors(variant, true, scheme).backgroundColor
+    }, indicator.style]} /> : null;
+    $[20] = indicator.measured;
+    $[21] = indicator.style;
+    $[22] = scheme;
+    $[23] = variant;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  const t10 = triggers.map(_temp);
+  let t11;
+  if ($[25] !== T0 || $[26] !== props || $[27] !== t10 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+    t11 = <T0 accessibilityRole={t5} className={t7} style={t8} {...props}>{t9}{t10}</T0>;
+    $[25] = T0;
+    $[26] = props;
+    $[27] = t10;
+    $[28] = t7;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  let t12;
+  if ($[32] !== t11 || $[33] !== t3.Provider || $[34] !== t4) {
+    t12 = <t3.Provider value={t4}>{t11}</t3.Provider>;
+    $[32] = t11;
+    $[33] = t3.Provider;
+    $[34] = t4;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  return t12;
+}
+function _temp(trigger, index) {
+  return <TabIndexContext.Provider key={isValidElement(trigger) && trigger.key !== null ? trigger.key : index} value={index}>{trigger}</TabIndexContext.Provider>;
+}
+export function TabsTrigger(t0) {
+  const $ = _c(20);
+  const {
+    value,
+    children,
+    disabled,
+    className,
+    minHeight,
+    testID,
+    accessibilityLabel
+  } = t0;
+  const {
+    value: current,
+    setValue
+  } = useTabs("TabsTrigger");
+  const {
+    variant,
+    size,
+    progress,
+    indicator
+  } = useContext(TabsListContext);
+  const index = useContext(TabIndexContext);
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const selected = current === value;
+  const colors = tabColors(variant, selected, scheme);
+  let t1;
+  if ($[0] !== scheme || $[1] !== variant) {
+    t1 = tabColors(variant, true, scheme);
+    $[0] = scheme;
+    $[1] = variant;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const t2 = t1.color;
+  let t3;
+  if ($[3] !== scheme || $[4] !== variant) {
+    t3 = tabColors(variant, false, scheme);
+    $[3] = scheme;
+    $[4] = variant;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t1.color || $[7] !== t3.color) {
+    t4 = {
+      selected: t2,
+      muted: t3.color
+    };
+    $[6] = t1.color;
+    $[7] = t3.color;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const labelStyle = useTabLabelStyle(progress, index, t4, colors.color);
+  const trigger = tabTriggerSize(variant, size, largerText);
+  const height = minHeight ?? trigger.minHeight;
+  const medium = variant !== "soft";
+  const t5 = Boolean(disabled);
+  let t6;
+  if ($[9] !== selected || $[10] !== t5) {
+    t6 = {
+      selected,
+      disabled: t5
+    };
+    $[9] = selected;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== selected || $[13] !== setValue || $[14] !== value) {
+    t7 = () => {
+      if (selected) {
+        return;
+      }
+      selectionHaptic();
+      setValue(value);
+    };
+    $[12] = selected;
+    $[13] = setValue;
+    $[14] = value;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== index || $[17] !== indicator || $[18] !== progress) {
+    t8 = progress ? indicator?.onLayout(index) : undefined;
+    $[16] = index;
+    $[17] = indicator;
+    $[18] = progress;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  return <Pressable testID={testID} accessibilityRole="tab" accessibilityLabel={accessibilityLabel ?? (typeof children === "string" ? children : undefined)} accessibilityState={t6} hitSlop={touchSlop(MIN_TOUCH_TARGET, height)} disabled={disabled} onPress={t7} className={cn("shrink items-center justify-center rounded-full", trigger.className, variant === "pills" && "border border-white/40 dark:border-white/10", disabled ? "opacity-50" : "active:opacity-70", className)} style={{
+    backgroundColor: indicator?.measured ? "transparent" : colors.backgroundColor,
+    minHeight: height
+  }} onLayout={t8}>{typeof children === "string" || typeof children === "number" ? <Animated.Text numberOfLines={1} className={cn("text-center", medium ? "font-instrument-sans-medium" : "font-instrument-sans", trigger.textClassName)} style={[{
+      letterSpacing: trigger.letterSpacing
+    }, medium ? typeStyle("medium") : null, labelStyle]}>{children}</Animated.Text> : children}</Pressable>;
+}
+/** Renders only while its tab is active. */
+export function TabsContent(t0) {
+  const $ = _c(7);
+  let className;
+  let props;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = value;
+  } else {
+    className = $[1];
+    props = $[2];
+    value = $[3];
+  }
+  const {
+    value: current
+  } = useTabs("TabsContent");
+  if (current !== value) {
+    return null;
+  }
+  let t1;
+  if ($[4] !== className || $[5] !== props) {
+    t1 = <View className={className} {...props} />;
+    $[4] = className;
+    $[5] = props;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}

package/dist/Textarea.jsx

@@ -0,0 +1,103 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/** Multiline `Input`: same fill, border, radius and type. Grows from 4 lines. */
+const Textarea = React.forwardRef((t0, ref) => {
+  const $ = _c(27);
+  let className;
+  let placeholderTextColor;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      placeholderTextColor,
+      numberOfLines: t1,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = placeholderTextColor;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+  } else {
+    className = $[1];
+    placeholderTextColor = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+  }
+  const numberOfLines = t1 === undefined ? 4 : t1;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t2 = placeholderTextColor ?? palette.fieldPlaceholder[scheme];
+  const t3 = largerText && "min-h-32 px-4 py-3 text-xl font-instrument-sans-medium";
+  let t4;
+  if ($[6] !== className || $[7] !== t3) {
+    t4 = cn("min-h-20 border px-3.5 py-2.5 text-base font-instrument-sans", t3, className);
+    $[6] = className;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== scheme) {
+    t5 = fieldStyle(scheme);
+    $[9] = scheme;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== scheme) {
+    t6 = fieldTextStyle(scheme);
+    $[11] = scheme;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== largerText) {
+    t7 = largerText ? typeStyle("medium") : null;
+    $[13] = largerText;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== style || $[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+    t8 = [t5, t6, t7, style];
+    $[15] = style;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== numberOfLines || $[21] !== props || $[22] !== ref || $[23] !== t2 || $[24] !== t4 || $[25] !== t8) {
+    t9 = <PrimitiveInput ref={ref} multiline={true} numberOfLines={numberOfLines} textAlignVertical="top" placeholderTextColor={t2} className={t4} style={t8} {...props} />;
+    $[20] = numberOfLines;
+    $[21] = props;
+    $[22] = ref;
+    $[23] = t2;
+    $[24] = t4;
+    $[25] = t8;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

package/dist/ThemeToggle.jsx

@@ -0,0 +1,78 @@
+import { c as _c } from "react/compiler-runtime";
+import { IconMoon, IconSun } from "@tabler/icons-react-native";
+import { useColorScheme } from "nativewind";
+import { HeaderIconButton } from "./HeaderIconButton";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** Logged when NativeWind's `setColorScheme` throws. */
+const DARK_MODE_CLASS_HINT = 'ThemeToggle could not set the colour scheme. NativeWind throws while Tailwind darkMode is "media" (the default): set darkMode: "class" in tailwind.config.js. See the @vvedantb/native-ui README, Theme.';
+
+/**
+ * A `HeaderIconButton` that switches between light and dark with NativeWind's
+ * `setColorScheme`, the scheme `useScheme` reads. It shows and names the
+ * scheme it switches to: a moon and "Switch to dark mode" in light, a sun and
+ * "Switch to light mode" in dark. The choice lasts only as long as NativeWind
+ * keeps it; an app that restores it on the next launch stores
+ * `useColorScheme().colorScheme` itself.
+ *
+ * `setColorScheme` throws unless the app sets Tailwind `darkMode: "class"`.
+ * The press then logs that fix with `console.error` and leaves the scheme as
+ * it is, instead of throwing from the press handler.
+ */
+export function ThemeToggle(t0) {
+  const $ = _c(12);
+  const {
+    testID
+  } = t0;
+  const {
+    setColorScheme
+  } = useColorScheme();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const next = scheme === "dark" ? "light" : "dark";
+  const Icon = next === "dark" ? IconMoon : IconSun;
+  let t1;
+  if ($[0] !== next || $[1] !== setColorScheme) {
+    t1 = () => {
+      ;
+      try {
+        setColorScheme(next);
+      } catch (t2) {
+        const error = t2;
+        console.error(DARK_MODE_CLASS_HINT, error);
+      }
+    };
+    $[0] = next;
+    $[1] = setColorScheme;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const toggle = t1;
+  const t2 = `Switch to ${next} mode`;
+  const t3 = largerText ? 26 : 22;
+  const t4 = tokens.color.foreground[scheme];
+  let t5;
+  if ($[3] !== Icon || $[4] !== t3 || $[5] !== t4) {
+    t5 = <Icon size={t3} color={t4} />;
+    $[3] = Icon;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t2 || $[8] !== t5 || $[9] !== testID || $[10] !== toggle) {
+    t6 = <HeaderIconButton label={t2} testID={testID} onPress={toggle}>{t5}</HeaderIconButton>;
+    $[7] = t2;
+    $[8] = t5;
+    $[9] = testID;
+    $[10] = toggle;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
+}