@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/IconButton.jsx

@@ -0,0 +1,157 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable } from "react-native";
+import { cn } from "./cn";
+import { touchSlop } from "./controlStyles";
+import { withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** Diameter and icon size per size, a step up with larger text. */
+const METRICS = {
+  regular: {
+    sm: [32, 16],
+    md: [40, 20],
+    lg: [48, 24]
+  },
+  larger: {
+    sm: [44, 20],
+    md: [48, 24],
+    lg: [56, 28]
+  }
+};
+
+/** Fill, border and icon colour per variant. */
+export function iconButtonColors(variant, scheme) {
+  return variant === "overlay" ? {
+    backgroundColor: withAlpha(tokens.color.black, 0.35),
+    borderColor: withAlpha(tokens.color.white, 0.2),
+    color: tokens.color.white
+  } : {
+    backgroundColor: tokens.color.surface[scheme],
+    borderColor: tokens.color.border[scheme],
+    color: tokens.color.foreground[scheme]
+  };
+}
+
+/**
+ * A round icon-only button. `default` is a bordered surface, like
+ * `HeaderIconButton` in `tokens` colours. `overlay` is a translucent black
+ * circle with a white icon, the same in light and dark, for camera chrome over
+ * a live preview (close, flash, flip). Sizes are the web icon buttons (`sm`
+ * 32, `md` 40) and 48, each reaching 44 with its hit slop. Not the AI chat
+ * `ChatIconButton`.
+ */
+export function IconButton(t0) {
+  const $ = _c(30);
+  const {
+    icon: Icon,
+    label,
+    onPress,
+    disabled: t1,
+    variant: t2,
+    size: t3,
+    testID,
+    iconColor
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const size = t3 === undefined ? "md" : t3;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [diameter, iconSize] = METRICS[largerText ? "larger" : "regular"][size];
+  let t4;
+  if ($[0] !== scheme || $[1] !== variant) {
+    t4 = iconButtonColors(variant, scheme);
+    $[0] = scheme;
+    $[1] = variant;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let color;
+  let frame;
+  if ($[3] !== t4) {
+    ({
+      color,
+      ...frame
+    } = t4);
+    $[3] = t4;
+    $[4] = color;
+    $[5] = frame;
+  } else {
+    color = $[4];
+    frame = $[5];
+  }
+  let t5;
+  if ($[6] !== disabled) {
+    t5 = {
+      disabled
+    };
+    $[6] = disabled;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== diameter) {
+    t6 = touchSlop(diameter);
+    $[8] = diameter;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const t7 = disabled && "opacity-50";
+  let t8;
+  if ($[10] !== t7) {
+    t8 = cn("items-center justify-center active:opacity-70", t7);
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  const t9 = diameter / 2;
+  let t10;
+  if ($[12] !== diameter || $[13] !== frame || $[14] !== t9) {
+    t10 = {
+      width: diameter,
+      height: diameter,
+      borderRadius: t9,
+      borderWidth: 1,
+      ...frame
+    };
+    $[12] = diameter;
+    $[13] = frame;
+    $[14] = t9;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  const t11 = iconColor ?? color;
+  let t12;
+  if ($[16] !== Icon || $[17] !== iconSize || $[18] !== t11) {
+    t12 = <Icon size={iconSize} color={t11} />;
+    $[16] = Icon;
+    $[17] = iconSize;
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== disabled || $[21] !== label || $[22] !== onPress || $[23] !== t10 || $[24] !== t12 || $[25] !== t5 || $[26] !== t6 || $[27] !== t8 || $[28] !== testID) {
+    t13 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={label} accessibilityState={t5} hitSlop={t6} disabled={disabled} onPress={onPress} className={t8} style={t10}>{t12}</Pressable>;
+    $[20] = disabled;
+    $[21] = label;
+    $[22] = onPress;
+    $[23] = t10;
+    $[24] = t12;
+    $[25] = t5;
+    $[26] = t6;
+    $[27] = t8;
+    $[28] = testID;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  return t13;
+}

package/dist/Input.jsx

@@ -0,0 +1,96 @@
+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";
+const Input = React.forwardRef((t0, ref) => {
+  const $ = _c(25);
+  let className;
+  let placeholderTextColor;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      placeholderTextColor,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = placeholderTextColor;
+    $[3] = props;
+    $[4] = style;
+  } else {
+    className = $[1];
+    placeholderTextColor = $[2];
+    props = $[3];
+    style = $[4];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = placeholderTextColor ?? palette.fieldPlaceholder[scheme];
+  const t2 = largerText && "min-h-16 px-4 py-4 text-xl font-instrument-sans-medium";
+  let t3;
+  if ($[5] !== className || $[6] !== t2) {
+    t3 = cn("min-h-11 border px-3.5 py-2 text-base font-instrument-sans", t2, className);
+    $[5] = className;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== scheme) {
+    t4 = fieldStyle(scheme);
+    $[8] = scheme;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== scheme) {
+    t5 = fieldTextStyle(scheme);
+    $[10] = scheme;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== largerText) {
+    t6 = largerText ? typeStyle("medium") : null;
+    $[12] = largerText;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== style || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
+    t7 = [t4, t5, t6, style];
+    $[14] = style;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== props || $[20] !== ref || $[21] !== t1 || $[22] !== t3 || $[23] !== t7) {
+    t8 = <PrimitiveInput ref={ref} placeholderTextColor={t1} className={t3} style={t7} {...props} />;
+    $[19] = props;
+    $[20] = ref;
+    $[21] = t1;
+    $[22] = t3;
+    $[23] = t7;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  return t8;
+});
+Input.displayName = "Input";
+export { Input };

package/dist/Label.jsx

@@ -0,0 +1,96 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text } from "react-native";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/**
+ * Field label, the web `Label` type: `text-sm` medium (14 / 500), `text-lg`
+ * with larger text. Link it to a field with
+ * `nativeID` here and `accessibilityLabelledBy` on the field (Android), or
+ * give the field its own `accessibilityLabel`. The colour is a style that
+ * follows the colour scheme; recolour with `style`.
+ */
+export function Label(t0) {
+  const $ = _c(22);
+  let className;
+  let disabled;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      disabled,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = props;
+    $[4] = style;
+  } else {
+    className = $[1];
+    disabled = $[2];
+    props = $[3];
+    style = $[4];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-lg" : "text-sm";
+  const t1 = disabled && "opacity-70";
+  let t2;
+  if ($[5] !== className || $[6] !== size || $[7] !== t1) {
+    t2 = cn("font-instrument-sans-medium", size, t1, className);
+    $[5] = className;
+    $[6] = size;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== scheme) {
+    t3 = textStyle("foreground", scheme);
+    $[9] = scheme;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== size) {
+    t4 = sizeStyle(size);
+    $[11] = size;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = typeStyle("medium");
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== style || $[15] !== t3 || $[16] !== t4) {
+    t6 = [t3, t4, t5, style];
+    $[14] = style;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== props || $[19] !== t2 || $[20] !== t6) {
+    t7 = <Text className={t2} style={t6} {...props} />;
+    $[18] = props;
+    $[19] = t2;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
+}

package/dist/LabeledSwitchRow.jsx

@@ -0,0 +1,170 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
+import { Switch } from "./Switch";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/**
+ * Label, optional description and a `Switch`, as the web `LabeledSwitchRow`.
+ * The text toggles the switch too (the web `<label htmlFor>`). Use
+ * `SettingsToggleRow` inside a `SettingsSection` list instead.
+ */
+export function LabeledSwitchRow(t0) {
+  const $ = _c(49);
+  const {
+    label,
+    description,
+    checked,
+    onCheckedChange,
+    disabled,
+    icon,
+    trailing,
+    className,
+    testID
+  } = t0;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== checked || $[1] !== onCheckedChange) {
+    t1 = () => onCheckedChange?.(!checked);
+    $[0] = checked;
+    $[1] = onCheckedChange;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const toggle = t1;
+  let t2;
+  if ($[3] !== className) {
+    t2 = cn("flex-row items-center justify-between gap-3", className);
+    $[3] = className;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const t3 = trailing ? undefined : "switch";
+  let t4;
+  if ($[5] !== checked || $[6] !== disabled || $[7] !== trailing) {
+    t4 = trailing ? undefined : {
+      checked,
+      disabled: Boolean(disabled)
+    };
+    $[5] = checked;
+    $[6] = disabled;
+    $[7] = trailing;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const t5 = disabled || trailing != null;
+  let t6;
+  if ($[9] !== icon) {
+    t6 = icon ? <View className="mt-0.5 shrink-0">{icon}</View> : null;
+    $[9] = icon;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const t7 = largerText ? "text-xl" : "text-lg";
+  const t8 = disabled && "opacity-70";
+  let t9;
+  if ($[11] !== t7 || $[12] !== t8) {
+    t9 = cn("font-instrument-sans-semibold", t7, t8);
+    $[11] = t7;
+    $[12] = t8;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] !== scheme) {
+    t10 = textStyle("foreground", scheme);
+    $[14] = scheme;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = typeStyle("semibold");
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] !== t10) {
+    t12 = [t10, t11];
+    $[17] = t10;
+    $[18] = t12;
+  } else {
+    t12 = $[18];
+  }
+  let t13;
+  if ($[19] !== label || $[20] !== t12 || $[21] !== t9) {
+    t13 = <Text className={t9} style={t12}>{label}</Text>;
+    $[19] = label;
+    $[20] = t12;
+    $[21] = t9;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== description || $[24] !== largerText || $[25] !== scheme) {
+    t14 = description ? <Text className={cn("mt-1 font-instrument-sans", largerText ? "text-lg" : "text-base")} style={textStyle("muted", scheme)}>{description}</Text> : null;
+    $[23] = description;
+    $[24] = largerText;
+    $[25] = scheme;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  let t15;
+  if ($[27] !== t13 || $[28] !== t14) {
+    t15 = <View className="min-w-0 flex-1">{t13}{t14}</View>;
+    $[27] = t13;
+    $[28] = t14;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  let t16;
+  if ($[30] !== description || $[31] !== label || $[32] !== t15 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t6 || $[37] !== testID || $[38] !== toggle) {
+    t16 = <Pressable testID={testID} accessibilityRole={t3} accessibilityLabel={label} accessibilityHint={description} accessibilityState={t4} disabled={t5} onPress={toggle} className="min-w-0 flex-1 flex-row items-start gap-2">{t6}{t15}</Pressable>;
+    $[30] = description;
+    $[31] = label;
+    $[32] = t15;
+    $[33] = t3;
+    $[34] = t4;
+    $[35] = t5;
+    $[36] = t6;
+    $[37] = testID;
+    $[38] = toggle;
+    $[39] = t16;
+  } else {
+    t16 = $[39];
+  }
+  let t17;
+  if ($[40] !== checked || $[41] !== disabled || $[42] !== onCheckedChange || $[43] !== trailing) {
+    t17 = trailing ?? <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" className="min-h-12 shrink-0 items-center justify-center"><Switch checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} /></View>;
+    $[40] = checked;
+    $[41] = disabled;
+    $[42] = onCheckedChange;
+    $[43] = trailing;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  let t18;
+  if ($[45] !== t16 || $[46] !== t17 || $[47] !== t2) {
+    t18 = <View className={t2}>{t16}{t17}</View>;
+    $[45] = t16;
+    $[46] = t17;
+    $[47] = t2;
+    $[48] = t18;
+  } else {
+    t18 = $[48];
+  }
+  return t18;
+}

package/dist/LiquidGlass.jsx

@@ -0,0 +1,2 @@
+export { FloatingSurface as LiquidGlass, GlassSheetBackground } from "./FloatingSurface";
+export { GlassBlurProvider, GlassBlurTarget } from "./glassBlur";