@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Button.jsx

@@ -0,0 +1,344 @@
+import { c as _c } from "react/compiler-runtime";
+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { PINK_600 } from "./colors";
+import { View } from "react-native";
+import { Button as PrimitiveButton } from "./primitives/button";
+import { Text as PrimitiveText } from "./primitives/text";
+import { cn } from "./cn";
+import { buttonColors, sizeStyle, typeStyle } from "./controlStyles";
+import { useDialogLayout } from "./dialogLayout";
+import { floatingShadow } from "./floating";
+import { Spinner } from "./Spinner";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/** `sm`, `default` and `lg` are the web names for `small`, `medium` and `large`. `icon` is a square button. */
+
+/** The web `shape`. `"pill"` (default) is fully round; `"rounded"` is radius 16, the look before 0.6.0. */
+
+const SIZE_ALIAS = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  sm: "small",
+  default: "medium",
+  lg: "large",
+  icon: "icon"
+};
+
+// `regular` is the web `Button` (`default` h-10 px-4, `lg` h-11 px-6, `icon`
+// h-10 w-10), except `sm`: the web h-8 `text-xs` is a desktop size, so here it
+// is 36 high with a 14 label (`text-sm`). `larger` is the larger-text step-up from
+// 0.3.2. Labelled sizes are minimum heights (`h-auto` drops the primitive's
+// `h-10`), so a large Dynamic Type size grows the button instead of clipping
+// the label.
+const HEIGHT = {
+  regular: {
+    small: "h-auto min-h-9 px-3",
+    medium: "h-auto min-h-10 px-4",
+    large: "h-auto min-h-11 px-6",
+    icon: "h-10 w-10 px-0"
+  },
+  larger: {
+    small: "h-auto min-h-14 px-5",
+    medium: "h-auto min-h-16 px-6",
+    large: "h-auto min-h-[72px] px-6",
+    icon: "h-14 w-14 px-0"
+  }
+};
+
+// Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
+const TEXT = {
+  regular: {
+    small: "text-sm",
+    medium: "text-sm",
+    large: "text-sm",
+    icon: "text-sm"
+  },
+  larger: {
+    small: "text-base",
+    medium: "text-xl",
+    large: "text-2xl",
+    icon: "text-base"
+  }
+};
+
+// The web sizes are under the 44 pt touch target; the slop brings each to 44
+// or more. `small` (32) slops only above and below: small buttons sit 4 apart
+// in a row (Cancel and Delete), and side slop would let one steal the other's
+// taps. The larger sizes are 56 or more and need none.
+const HIT_SLOP = {
+  regular: {
+    small: {
+      top: 6,
+      bottom: 6,
+      left: 0,
+      right: 0
+    },
+    medium: 4,
+    large: 2,
+    icon: 4
+  },
+  larger: {
+    small: undefined,
+    medium: undefined,
+    large: undefined,
+    icon: undefined
+  }
+};
+
+// The web `shape` (from @vvedantb/ui 0.31.0). `pill` is `rounded-full`:
+// `tokens.radius.pill` (999), far more than half the tallest minimum height
+// (72), so the ends are half circles. `rounded` is `rounded-lg` (`--radius`, 16). The web
+// `rounded` is `rounded-md` on `xs` and `icon-xs`, sizes native does not have,
+// so here it is 16 at every size. Styles, because apps' NativeWind themes set
+// their own `rounded-lg`.
+const RADIUS = {
+  pill: tokens.radius.pill,
+  rounded: tokens.radius.lg
+};
+
+// Colours come from `buttonColors` as styles, except `tinted`, which keeps
+// the pink classes that `outline` used before 0.3.0.
+const VARIANT_CLASS = {
+  link: "h-auto border-0 px-0",
+  tinted: "border-0 bg-pink-50 dark:bg-pink-900/20"
+};
+const TEXT_CLASS = {
+  link: "underline",
+  tinted: "text-pink-700 dark:text-pink-300"
+};
+const PRIMITIVE_VARIANT = {
+  primary: "default",
+  default: "default",
+  outline: "outline",
+  secondary: "secondary",
+  destructive: "destructive",
+  ghost: "ghost",
+  link: "link",
+  tinted: "secondary"
+};
+export function Button(t0) {
+  const $ = _c(67);
+  let children;
+  let className;
+  let endContent;
+  let icon;
+  let leftIcon;
+  let loading;
+  let onPress;
+  let props;
+  let startContent;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== t0) {
+    ({
+      onPress,
+      variant: t1,
+      icon,
+      leftIcon,
+      startContent,
+      endContent,
+      loading,
+      size: t2,
+      shape: t3,
+      fullWidth: t4,
+      children,
+      shadowType: t5,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = endContent;
+    $[4] = icon;
+    $[5] = leftIcon;
+    $[6] = loading;
+    $[7] = onPress;
+    $[8] = props;
+    $[9] = startContent;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    children = $[1];
+    className = $[2];
+    endContent = $[3];
+    icon = $[4];
+    leftIcon = $[5];
+    loading = $[6];
+    onPress = $[7];
+    props = $[8];
+    startContent = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+  }
+  const variant = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "medium" : t2;
+  const shape = t3 === undefined ? "pill" : t3;
+  const fullWidth = t4 === undefined ? true : t4;
+  const shadowType = t5 === undefined ? "flat" : t5;
+  const scale = useLargerText() ? "larger" : "regular";
+  const scheme = useScheme();
+  const dialog = useDialogLayout();
+  const resolvedSize = SIZE_ALIAS[size];
+  let t6;
+  if ($[15] !== scheme || $[16] !== variant) {
+    t6 = buttonColors(variant, scheme);
+    $[15] = scheme;
+    $[16] = variant;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const colors = t6;
+  const contentColor = colors?.color ?? PINK_600;
+  const elevate = shadowType === "shadow" && (variant === "primary" || variant === "default");
+  const t7 = RADIUS[shape];
+  let t8;
+  if ($[18] !== t7) {
+    t8 = {
+      borderRadius: t7
+    };
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  const t9 = elevate ? floatingShadow : null;
+  let t10;
+  if ($[20] !== colors) {
+    t10 = colors ? {
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor
+    } : null;
+    $[20] = colors;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== t10 || $[23] !== t8 || $[24] !== t9) {
+    t11 = [t8, t9, t10];
+    $[22] = t10;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  const baseStyle = t11;
+  const callerStyle = props.style;
+  let t12;
+  if ($[26] !== contentColor || $[27] !== icon || $[28] !== leftIcon || $[29] !== loading || $[30] !== scale || $[31] !== startContent) {
+    t12 = loading ? <Spinner size="sm" color={contentColor} decorative={true} /> : leftIcon ?? startContent ?? (icon ? <MaterialIcons name={icon} size={scale === "larger" ? 26 : 16} color={contentColor} /> : null);
+    $[26] = contentColor;
+    $[27] = icon;
+    $[28] = leftIcon;
+    $[29] = loading;
+    $[30] = scale;
+    $[31] = startContent;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  const start = t12;
+  const t13 = PRIMITIVE_VARIANT[variant];
+  const t14 = HIT_SLOP[scale][resolvedSize];
+  const t15 = HEIGHT[scale][resolvedSize];
+  const t16 = resolvedSize !== "icon" && (fullWidth || dialog.stacked ? "w-full" : "self-start");
+  const t17 = dialog.compact && scale === "regular" && resolvedSize !== "icon" && "min-h-11";
+  const t18 = VARIANT_CLASS[variant];
+  let t19;
+  if ($[33] !== className || $[34] !== t15 || $[35] !== t16 || $[36] !== t17 || $[37] !== t18) {
+    t19 = cn("relative border", t15, t16, t17, t18, className);
+    $[33] = className;
+    $[34] = t15;
+    $[35] = t16;
+    $[36] = t17;
+    $[37] = t18;
+    $[38] = t19;
+  } else {
+    t19 = $[38];
+  }
+  const t20 = loading || props.disabled;
+  const t21 = props.accessibilityState;
+  const t22 = Boolean(loading || props.disabled);
+  const t23 = Boolean(loading);
+  let t24;
+  if ($[39] !== props.accessibilityState || $[40] !== t22 || $[41] !== t23) {
+    t24 = {
+      ...t21,
+      disabled: t22,
+      busy: t23
+    };
+    $[39] = props.accessibilityState;
+    $[40] = t22;
+    $[41] = t23;
+    $[42] = t24;
+  } else {
+    t24 = $[42];
+  }
+  let t25;
+  if ($[43] !== baseStyle || $[44] !== callerStyle) {
+    t25 = typeof callerStyle === "function" ? state => [baseStyle, callerStyle(state)] : [baseStyle, callerStyle];
+    $[43] = baseStyle;
+    $[44] = callerStyle;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+  let t26;
+  if ($[46] !== children || $[47] !== colors || $[48] !== resolvedSize || $[49] !== scale || $[50] !== variant) {
+    t26 = typeof children === "string" || typeof children === "number" ? <PrimitiveText className={cn(TEXT[scale][resolvedSize], "font-instrument-sans-medium", TEXT_CLASS[variant])} style={[colors ? {
+      color: colors.color
+    } : null, sizeStyle(TEXT[scale][resolvedSize]), typeStyle("medium")]}>{children}</PrimitiveText> : children;
+    $[46] = children;
+    $[47] = colors;
+    $[48] = resolvedSize;
+    $[49] = scale;
+    $[50] = variant;
+    $[51] = t26;
+  } else {
+    t26 = $[51];
+  }
+  let t27;
+  if ($[52] !== endContent || $[53] !== start || $[54] !== t26) {
+    t27 = <View className="flex-row items-center justify-center gap-2">{start}{t26}{endContent}</View>;
+    $[52] = endContent;
+    $[53] = start;
+    $[54] = t26;
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  let t28;
+  if ($[56] !== onPress || $[57] !== props || $[58] !== shape || $[59] !== t13 || $[60] !== t14 || $[61] !== t19 || $[62] !== t20 || $[63] !== t24 || $[64] !== t25 || $[65] !== t27) {
+    t28 = <PrimitiveButton onPress={onPress} variant={t13} shape={shape} hitSlop={t14} accessibilityRole="button" className={t19} {...props} disabled={t20} accessibilityState={t24} style={t25}>{t27}</PrimitiveButton>;
+    $[56] = onPress;
+    $[57] = props;
+    $[58] = shape;
+    $[59] = t13;
+    $[60] = t14;
+    $[61] = t19;
+    $[62] = t20;
+    $[63] = t24;
+    $[64] = t25;
+    $[65] = t27;
+    $[66] = t28;
+  } else {
+    t28 = $[66];
+  }
+  return t28;
+}

package/dist/CaptureButton.jsx

@@ -0,0 +1,104 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
+import { cn } from "./cn";
+import { withAlpha } from "./palette";
+import { tokens } from "./tokens";
+/** Shutter metrics: outer diameter, ring width and the gap inside the ring. */
+export const CAPTURE_BUTTON = {
+  size: 76,
+  ring: 4,
+  gap: 4
+};
+
+/**
+ * A camera shutter: a 76 white ring around a white disc, for a live preview in
+ * light and dark alike. The disc shrinks to 90% while pressed. Larger than the
+ * 44 target, so it needs no hit slop. A labelled button, dimmed and ignoring
+ * presses when `disabled`.
+ */
+export function CaptureButton(t0) {
+  const $ = _c(15);
+  const {
+    onPress,
+    disabled: t1,
+    testID,
+    accessibilityLabel: t2
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const accessibilityLabel = t2 === undefined ? "Take photo" : t2;
+  const {
+    size,
+    ring,
+    gap
+  } = CAPTURE_BUTTON;
+  const inner = size - 2 * (ring + gap);
+  let t3;
+  if ($[0] !== disabled) {
+    t3 = {
+      disabled
+    };
+    $[0] = disabled;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = disabled && "opacity-50";
+  let t5;
+  if ($[2] !== t4) {
+    t5 = cn("items-center justify-center", t4);
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: ring,
+      borderColor: tokens.color.white,
+      backgroundColor: withAlpha(tokens.color.black, 0.15)
+    };
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== disabled) {
+    t7 = t8 => {
+      const {
+        pressed
+      } = t8;
+      return <View style={{
+        width: inner,
+        height: inner,
+        borderRadius: inner / 2,
+        backgroundColor: tokens.color.white,
+        transform: [{
+          scale: pressed && !disabled ? 0.9 : 1
+        }]
+      }} />;
+    };
+    $[5] = disabled;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== accessibilityLabel || $[8] !== disabled || $[9] !== onPress || $[10] !== t3 || $[11] !== t5 || $[12] !== t7 || $[13] !== testID) {
+    t8 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={t3} disabled={disabled} onPress={onPress} className={t5} style={t6}>{t7}</Pressable>;
+    $[7] = accessibilityLabel;
+    $[8] = disabled;
+    $[9] = onPress;
+    $[10] = t3;
+    $[11] = t5;
+    $[12] = t7;
+    $[13] = testID;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  return t8;
+}