@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ColorSwatches.jsx

@@ -0,0 +1,159 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
+import { IconCheck } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { touchSlop } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** Swatch diameters, one step up with larger text. */
+const DIAMETER = {
+  regular: {
+    sm: 24,
+    md: 32,
+    lg: 40
+  },
+  larger: {
+    sm: 32,
+    md: 40,
+    lg: 48
+  }
+};
+
+/** Selection ring width and the gap between the ring and the swatch. */
+const RING = 2;
+const RING_GAP = 2;
+
+/**
+ * The check colour on a swatch: black or white, whichever has the higher WCAG
+ * contrast with it. `null` when the colour is not `#rgb` or `#rrggbb`, and the
+ * ring alone marks the selection.
+ */
+export function swatchCheckColor(color) {
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color);
+  const hex = short ? `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}` : color;
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return null;
+  const n = Number.parseInt(hex.slice(1), 16);
+  const linear = channel => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance = 0.2126 * linear(n >> 16 & 255) + 0.7152 * linear(n >> 8 & 255) + 0.0722 * linear(n & 255);
+  // Contrast with white is 1.05 / (L + 0.05); with black, (L + 0.05) / 0.05.
+  return 1.05 / (luminance + 0.05) >= (luminance + 0.05) / 0.05 ? tokens.color.white : tokens.color.black;
+}
+
+/**
+ * Pick one colour from a row of round swatches that wraps. The selected swatch
+ * has a ring in the foreground colour and a check in black or white, whichever
+ * reads on it. Each swatch has a faint outline, so white shows on a white
+ * surface. A radio group for VoiceOver and TalkBack: each swatch is a radio
+ * named by `labels` (or its colour string). A `md` swatch is 32 across and 40
+ * with its ring, and reaches 44 with its hit slop; the 12 gap keeps the slops
+ * of neighbouring swatches apart.
+ */
+export function ColorSwatches(t0) {
+  const $ = _c(28);
+  const {
+    value,
+    onChange,
+    colors,
+    size: t1,
+    labels,
+    accessibilityLabel,
+    testID,
+    disabled: t2
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const diameter = DIAMETER[largerText ? "larger" : "regular"][size];
+  const outer = diameter + 2 * (RING + RING_GAP);
+  let t3;
+  if ($[0] !== value) {
+    t3 = value.toLowerCase();
+    $[0] = value;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const selected = t3;
+  const t4 = disabled && "opacity-50";
+  let t5;
+  if ($[2] !== t4) {
+    t5 = cn("flex-row flex-wrap gap-3", t4);
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== colors || $[5] !== diameter || $[6] !== disabled || $[7] !== labels || $[8] !== onChange || $[9] !== outer || $[10] !== scheme || $[11] !== selected || $[12] !== testID) {
+    let t7;
+    if ($[14] !== diameter || $[15] !== disabled || $[16] !== labels || $[17] !== onChange || $[18] !== outer || $[19] !== scheme || $[20] !== selected || $[21] !== testID) {
+      t7 = (color, index) => {
+        const isSelected = color.toLowerCase() === selected;
+        const check = isSelected ? swatchCheckColor(color) : null;
+        return <Pressable key={`${color}-${index}`} testID={testID ? `${testID}-${index}` : undefined} accessibilityRole="radio" accessibilityLabel={labels?.[index] ?? color} accessibilityState={{
+          checked: isSelected,
+          disabled
+        }} hitSlop={touchSlop(outer)} disabled={disabled} onPress={() => {
+          selectionHaptic();
+          onChange(color);
+        }} className="items-center justify-center active:opacity-70" style={{
+          width: outer,
+          height: outer,
+          borderRadius: outer / 2,
+          borderWidth: RING,
+          borderColor: isSelected ? tokens.color.foreground[scheme] : "transparent"
+        }}><View className="items-center justify-center" style={{
+            width: diameter,
+            height: diameter,
+            borderRadius: diameter / 2,
+            backgroundColor: color,
+            borderWidth: 1,
+            borderColor: withAlpha(tokens.color.foreground[scheme], 0.12)
+          }}>{check ? <IconCheck size={Math.round(diameter / 2)} color={check} strokeWidth={2} /> : null}</View></Pressable>;
+      };
+      $[14] = diameter;
+      $[15] = disabled;
+      $[16] = labels;
+      $[17] = onChange;
+      $[18] = outer;
+      $[19] = scheme;
+      $[20] = selected;
+      $[21] = testID;
+      $[22] = t7;
+    } else {
+      t7 = $[22];
+    }
+    t6 = colors.map(t7);
+    $[4] = colors;
+    $[5] = diameter;
+    $[6] = disabled;
+    $[7] = labels;
+    $[8] = onChange;
+    $[9] = outer;
+    $[10] = scheme;
+    $[11] = selected;
+    $[12] = testID;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[23] !== accessibilityLabel || $[24] !== t5 || $[25] !== t6 || $[26] !== testID) {
+    t7 = <View testID={testID} accessibilityRole="radiogroup" accessibilityLabel={accessibilityLabel} className={t5}>{t6}</View>;
+    $[23] = accessibilityLabel;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = testID;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  return t7;
+}

package/dist/ConfirmDialog.jsx

@@ -0,0 +1,157 @@
+import { c as _c } from "react/compiler-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "./AlertDialog";
+import { impactHaptic } from "./haptics";
+import { useControllableState } from "./primitives/use-controllable-state";
+/**
+ * Blocking confirm dialog that closes on either button: the web `ConfirmDialog`
+ * legacy props with `size="default"`. Every close but Confirm (Cancel, Android
+ * back, the VoiceOver escape) calls `onCancel`, as the web `onOpenChange`
+ * close does. The `sm` / `md` sizes and the composable `ConfirmDialog.*`
+ * parts are web-only; compose `AlertDialog` parts instead.
+ */
+export function ConfirmDialog(t0) {
+  const $ = _c(39);
+  const {
+    open,
+    defaultOpen,
+    onOpenChange,
+    title,
+    description,
+    cancelLabel: t1,
+    confirmLabel: t2,
+    onCancel,
+    onConfirm,
+    variant: t3,
+    confirmDisabled,
+    children,
+    testID
+  } = t0;
+  const cancelLabel = t1 === undefined ? "Cancel" : t1;
+  const confirmLabel = t2 === undefined ? "Confirm" : t2;
+  const variant = t3 === undefined ? "default" : t3;
+  const t4 = defaultOpen ?? false;
+  let t5;
+  if ($[0] !== onOpenChange || $[1] !== open || $[2] !== t4) {
+    t5 = {
+      value: open,
+      defaultValue: t4,
+      onChange: onOpenChange
+    };
+    $[0] = onOpenChange;
+    $[1] = open;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const [isOpen, setOpen] = useControllableState(t5);
+  let t6;
+  if ($[4] !== onCancel || $[5] !== setOpen) {
+    t6 = next => {
+      if (!next) {
+        onCancel?.();
+      }
+      setOpen(next);
+    };
+    $[4] = onCancel;
+    $[5] = setOpen;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== title) {
+    t7 = <AlertDialogTitle>{title}</AlertDialogTitle>;
+    $[7] = title;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== description) {
+    t8 = description != null ? <AlertDialogDescription>{description}</AlertDialogDescription> : null;
+    $[9] = description;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== t7 || $[12] !== t8) {
+    t9 = <AlertDialogHeader>{t7}{t8}</AlertDialogHeader>;
+    $[11] = t7;
+    $[12] = t8;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  const t10 = testID ? `${testID}-cancel` : undefined;
+  let t11;
+  if ($[14] !== cancelLabel || $[15] !== t10) {
+    t11 = <AlertDialogCancel testID={t10}>{cancelLabel}</AlertDialogCancel>;
+    $[14] = cancelLabel;
+    $[15] = t10;
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  const t12 = testID ? `${testID}-confirm` : undefined;
+  let t13;
+  if ($[17] !== onConfirm || $[18] !== setOpen || $[19] !== variant) {
+    t13 = () => {
+      if (variant === "destructive") {
+        impactHaptic("medium");
+      }
+      onConfirm?.();
+      setOpen(false);
+    };
+    $[17] = onConfirm;
+    $[18] = setOpen;
+    $[19] = variant;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== confirmDisabled || $[22] !== confirmLabel || $[23] !== t12 || $[24] !== t13 || $[25] !== variant) {
+    t14 = <AlertDialogAction testID={t12} variant={variant} disabled={confirmDisabled} onPress={t13}>{confirmLabel}</AlertDialogAction>;
+    $[21] = confirmDisabled;
+    $[22] = confirmLabel;
+    $[23] = t12;
+    $[24] = t13;
+    $[25] = variant;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  let t15;
+  if ($[27] !== t11 || $[28] !== t14) {
+    t15 = <AlertDialogFooter>{t11}{t14}</AlertDialogFooter>;
+    $[27] = t11;
+    $[28] = t14;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  let t16;
+  if ($[30] !== t15 || $[31] !== t9 || $[32] !== testID) {
+    t16 = <AlertDialogContent testID={testID}>{t9}{t15}</AlertDialogContent>;
+    $[30] = t15;
+    $[31] = t9;
+    $[32] = testID;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  let t17;
+  if ($[34] !== children || $[35] !== isOpen || $[36] !== t16 || $[37] !== t6) {
+    t17 = <AlertDialog open={isOpen} onOpenChange={t6}>{children}{t16}</AlertDialog>;
+    $[34] = children;
+    $[35] = isOpen;
+    $[36] = t16;
+    $[37] = t6;
+    $[38] = t17;
+  } else {
+    t17 = $[38];
+  }
+  return t17;
+}

package/dist/DateTimeField.jsx

@@ -0,0 +1,204 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Platform, Pressable, Text, View } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import { IconX } from "@tabler/icons-react-native";
+import { MIN_TOUCH_TARGET, textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+const DEFAULT_PLACEHOLDER = {
+  date: "Select date",
+  time: "Select time"
+};
+
+/**
+ * The date the picker opens on: `value`, or with no value `now`, held back to
+ * `maximumDate` when that is earlier.
+ */
+export function pickerSeed(value, maximumDate, now = new Date()) {
+  if (value) return value;
+  return maximumDate && maximumDate.getTime() < now.getTime() ? maximumDate : now;
+}
+
+/**
+ * Date and time buttons that open the system picker below them. `mode="date"`
+ * shows the date button only. A `null` value shows `placeholder` in the field
+ * placeholder colour, and the picker opens on today (or `maximumDate`, if
+ * earlier); picking calls `onChange`. With `onClear`, a 44 clear button
+ * follows the buttons while there is a value. On iOS the spinner sets the
+ * value when it is turned. The buttons have the web `bg-secondary` fill
+ * (`palette.default`) as a style, so it follows the scheme.
+ */
+export function DateTimeField(t0) {
+  const $ = _c(45);
+  const {
+    value,
+    onChange,
+    mode: t1,
+    maximumDate,
+    placeholder,
+    onClear,
+    clearLabel,
+    testID
+  } = t0;
+  const mode = t1 === undefined ? "datetime" : t1;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const [picker, setPicker] = useState(null);
+  let t2;
+  if ($[0] !== onChange) {
+    t2 = (event, next) => {
+      if (Platform.OS === "android") {
+        setPicker(null);
+      }
+      if (event.type === "set" && next) {
+        onChange(next);
+      }
+    };
+    $[0] = onChange;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleChange = t2;
+  let t3;
+  if ($[2] !== placeholder || $[3] !== value) {
+    t3 = (button, format) => value ? dayjs(value).format(format) : placeholder ?? DEFAULT_PLACEHOLDER[button];
+    $[2] = placeholder;
+    $[3] = value;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const label = t3;
+  let t4;
+  if ($[5] !== label) {
+    t4 = label("date", "D MMM YYYY");
+    $[5] = label;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== t4) {
+    t5 = {
+      mode: "date",
+      label: t4
+    };
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const dateButton = t5;
+  let t6;
+  if ($[9] !== label) {
+    t6 = label("time", "HH:mm");
+    $[9] = label;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t6) {
+    t7 = {
+      mode: "time",
+      label: t6
+    };
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  const timeButton = t7;
+  let t8;
+  if ($[13] !== dateButton || $[14] !== mode || $[15] !== timeButton) {
+    t8 = mode === "datetime" ? [dateButton, timeButton] : mode === "date" ? [dateButton] : [timeButton];
+    $[13] = dateButton;
+    $[14] = mode;
+    $[15] = timeButton;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const buttons = t8;
+  let t9;
+  if ($[17] !== scheme || $[18] !== value) {
+    t9 = value ? textStyle("foreground", scheme) : {
+      color: palette.fieldPlaceholder[scheme]
+    };
+    $[17] = scheme;
+    $[18] = value;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  const textColor = t9;
+  let t10;
+  if ($[20] !== buttons || $[21] !== largerText || $[22] !== scheme || $[23] !== testID || $[24] !== textColor) {
+    t10 = buttons.map(button_0 => <Pressable key={button_0.mode} testID={testID ? `${testID}-${button_0.mode}` : undefined} accessibilityRole="button" accessibilityLabel={button_0.label} onPress={() => setPicker(current => current === button_0.mode ? null : button_0.mode)} className={`${largerText ? "min-h-16" : "min-h-14"} flex-1 justify-center rounded-lg px-4 py-2 active:opacity-70`} style={{
+      backgroundColor: palette.default[scheme]
+    }}><Text className={`${largerText ? "text-xl" : "text-lg"} font-instrument-sans-semibold`} style={[textColor, typeStyle("semibold")]}>{button_0.label}</Text></Pressable>);
+    $[20] = buttons;
+    $[21] = largerText;
+    $[22] = scheme;
+    $[23] = testID;
+    $[24] = textColor;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  let t11;
+  if ($[26] !== clearLabel || $[27] !== largerText || $[28] !== mode || $[29] !== onClear || $[30] !== scheme || $[31] !== testID || $[32] !== value) {
+    t11 = onClear && value ? <Pressable testID={testID ? `${testID}-clear` : undefined} accessibilityRole="button" accessibilityLabel={clearLabel ?? (mode === "time" ? "Clear time" : "Clear date")} onPress={() => {
+      setPicker(null);
+      onClear();
+    }} className="items-center justify-center rounded-full active:opacity-70" style={{
+      width: MIN_TOUCH_TARGET,
+      height: MIN_TOUCH_TARGET
+    }}><IconX size={largerText ? 24 : 20} color={tokens.color.muted[scheme]} /></Pressable> : null;
+    $[26] = clearLabel;
+    $[27] = largerText;
+    $[28] = mode;
+    $[29] = onClear;
+    $[30] = scheme;
+    $[31] = testID;
+    $[32] = value;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== t10 || $[35] !== t11) {
+    t12 = <View className="flex-row items-center gap-3">{t10}{t11}</View>;
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t12;
+  } else {
+    t12 = $[36];
+  }
+  let t13;
+  if ($[37] !== handleChange || $[38] !== maximumDate || $[39] !== picker || $[40] !== value) {
+    t13 = picker ? <DateTimePicker value={pickerSeed(value, maximumDate)} mode={picker} is24Hour={true} maximumDate={picker === "date" ? maximumDate : undefined} display={Platform.OS === "ios" ? "spinner" : "default"} onChange={handleChange} /> : null;
+    $[37] = handleChange;
+    $[38] = maximumDate;
+    $[39] = picker;
+    $[40] = value;
+    $[41] = t13;
+  } else {
+    t13 = $[41];
+  }
+  let t14;
+  if ($[42] !== t12 || $[43] !== t13) {
+    t14 = <View className="gap-2">{t12}{t13}</View>;
+    $[42] = t12;
+    $[43] = t13;
+    $[44] = t14;
+  } else {
+    t14 = $[44];
+  }
+  return t14;
+}