@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/StatGrid.jsx

@@ -0,0 +1,74 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { cn } from "./cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/** `items` in rows of `columns`. The last row is padded with `null`, so every tile has the same width. */
+export function statGridRows(items, columns) {
+  const rows = [];
+  for (let start = 0; start < items.length; start += columns) {
+    const row = items.slice(start, start + columns);
+    while (row.length < columns) row.push(null);
+    rows.push(row);
+  }
+  return rows;
+}
+
+/**
+ * Label and value tiles in rows of 2 or 3, each the flat web card
+ * (`cardStyle`: `surfaceCard` fill, radius 16, no shadow) with the web
+ * `Surface` padding (`p-4`). The label is muted `text-sm`; the value is
+ * semibold `text-xl` in the foreground, with tabular figures. VoiceOver and
+ * TalkBack read each tile as one element: "Steps, 8,432".
+ */
+export function StatGrid(t0) {
+  const $ = _c(13);
+  const {
+    items,
+    columns: t1,
+    testID
+  } = t0;
+  const columns = t1 === undefined ? 2 : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (items.length === 0) {
+    return null;
+  }
+  const labelSize = largerText ? "text-base" : "text-sm";
+  const valueSize = largerText ? "text-2xl" : "text-xl";
+  let t2;
+  if ($[0] !== columns || $[1] !== items || $[2] !== labelSize || $[3] !== scheme || $[4] !== valueSize) {
+    let t3;
+    if ($[6] !== labelSize || $[7] !== scheme || $[8] !== valueSize) {
+      t3 = (row, rowIndex) => <View key={rowIndex} className="flex-row gap-3">{row.map((item, index) => item ? <View key={index} testID={item.testID} accessible={true} accessibilityLabel={`${item.label}, ${item.value}`} className="min-w-0 flex-1 gap-1 p-4" style={cardStyle(scheme)}><Text className={cn("font-instrument-sans", labelSize)} style={[textStyle("muted", scheme), sizeStyle(labelSize)]}>{item.label}</Text><Text className={cn("font-instrument-sans-semibold", valueSize)} style={[textStyle("foreground", scheme), sizeStyle(valueSize, "tight"), typeStyle("semibold"), {
+            fontVariant: ["tabular-nums"]
+          }]}>{item.value}</Text></View> : <View key={index} className="flex-1" />)}</View>;
+      $[6] = labelSize;
+      $[7] = scheme;
+      $[8] = valueSize;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    t2 = statGridRows(items, columns).map(t3);
+    $[0] = columns;
+    $[1] = items;
+    $[2] = labelSize;
+    $[3] = scheme;
+    $[4] = valueSize;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[10] !== t2 || $[11] !== testID) {
+    t3 = <View testID={testID} className="gap-3">{t2}</View>;
+    $[10] = t2;
+    $[11] = testID;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+}

package/dist/StatusDot.jsx

@@ -0,0 +1,129 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { cn } from "./cn";
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/**
+ * The web `StatusTone`s, and `info` (native only, from 0.5.0): neutral news
+ * such as "synced" or "new", in blue.
+ */
+
+/**
+ * The `info` blue: Tailwind `blue-500` in light and the lighter `blue-400` in
+ * dark. Local to the dot: `tokens.css` has no `--info`, so it is not a
+ * `palette` key.
+ */
+const INFO = {
+  light: "#3b82f6",
+  dark: "#60a5fa"
+};
+function toneColor(tone, scheme) {
+  switch (tone) {
+    case "progress":
+      return palette.warning[scheme];
+    case "business-review":
+      return palette.primary[scheme];
+    case "code-review":
+      return withAlpha(palette.primary[scheme], 0.7);
+    case "done":
+    case "active":
+      return palette.success[scheme];
+    case "cancelled":
+      return withAlpha(tokens.color.muted[scheme], 0.4);
+    case "critical":
+      return palette.danger[scheme];
+    case "info":
+      return INFO[scheme];
+    default:
+      return withAlpha(tokens.color.muted[scheme], 0.6);
+  }
+}
+
+/** Small coloured dot that carries a status, so the label beside it stays neutral text. Hidden from assistive tech. */
+export function StatusDot(t0) {
+  const $ = _c(22);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let tone;
+  if ($[0] !== t0) {
+    ({
+      tone,
+      size: t1,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = tone;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    tone = $[5];
+  }
+  const size = t1 === undefined ? "sm" : t1;
+  const scheme = useScheme();
+  const diameter = size === "md" ? 8 : 6;
+  let t2;
+  if ($[6] !== className) {
+    t2 = cn("shrink-0", className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = diameter / 2;
+  let t4;
+  if ($[8] !== scheme || $[9] !== tone) {
+    t4 = toneColor(tone, scheme);
+    $[8] = scheme;
+    $[9] = tone;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== diameter || $[12] !== t3 || $[13] !== t4) {
+    t5 = {
+      width: diameter,
+      height: diameter,
+      borderRadius: t3,
+      backgroundColor: t4
+    };
+    $[11] = diameter;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== style || $[16] !== t5) {
+    t6 = [t5, style];
+    $[15] = style;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== props || $[19] !== t2 || $[20] !== t6) {
+    t7 = <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" className={t2} style={t6} {...props} />;
+    $[18] = props;
+    $[19] = t2;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
+}

package/dist/SurfaceRow.jsx

@@ -0,0 +1,143 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
+import { impactHaptic } from "./haptics";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/** The web `ListRow` metrics: a 4 wide stripe 8 in from top and bottom, the surface radius. */
+export const SURFACE_ROW = {
+  accentWidth: 4,
+  accentInset: 8,
+  radius: tokens.radius.lg
+};
+/**
+ * The shell of a status list row, as the web `ListRow`: a card surface with
+ * the surface radius, a 4 wide status stripe on the leading edge (inset 8 top
+ * and bottom, rounded on its outer side) and the body over it. The whole row
+ * is one button that fades while pressed, so put no other control in it; a
+ * long press (`onLongPress`) can open its menu.
+ */
+export function SurfaceRow(t0) {
+  const $ = _c(30);
+  const {
+    children,
+    accentColor,
+    backgroundColor,
+    borderColor,
+    accessibilityLabel,
+    accessibilityHint,
+    onPress,
+    onLongPress,
+    longPressLabel: t1,
+    className,
+    testID
+  } = t0;
+  const longPressLabel = t1 === undefined ? "More actions" : t1;
+  const scheme = useScheme();
+  const t2 = backgroundColor ?? tokens.color.surface[scheme];
+  const t3 = borderColor ? 1 : 0;
+  let t4;
+  if ($[0] !== borderColor || $[1] !== t2 || $[2] !== t3) {
+    t4 = {
+      backgroundColor: t2,
+      borderRadius: SURFACE_ROW.radius,
+      borderWidth: t3,
+      borderColor
+    };
+    $[0] = borderColor;
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const style = t4;
+  let t5;
+  if ($[4] !== accentColor || $[5] !== testID) {
+    t5 = accentColor ? <View testID={testID ? `${testID}-accent` : undefined} className="absolute left-0" style={{
+      top: SURFACE_ROW.accentInset,
+      bottom: SURFACE_ROW.accentInset,
+      width: SURFACE_ROW.accentWidth,
+      backgroundColor: accentColor,
+      borderTopRightRadius: SURFACE_ROW.accentWidth,
+      borderBottomRightRadius: SURFACE_ROW.accentWidth
+    }} /> : null;
+    $[4] = accentColor;
+    $[5] = testID;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const t6 = className ?? "p-2.5 pl-3";
+  let t7;
+  if ($[7] !== children || $[8] !== t6) {
+    t7 = <View className={t6}>{children}</View>;
+    $[7] = children;
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== t5 || $[11] !== t7) {
+    t8 = <>{t5}{t7}</>;
+    $[10] = t5;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const body = t8;
+  let t9;
+  if ($[13] !== onLongPress) {
+    t9 = onLongPress ? () => {
+      impactHaptic("light");
+      onLongPress();
+    } : undefined;
+    $[13] = onLongPress;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== longPressLabel || $[16] !== onLongPress) {
+    t10 = onLongPress ? [{
+      name: "longpress",
+      label: longPressLabel
+    }] : undefined;
+    $[15] = longPressLabel;
+    $[16] = onLongPress;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== onLongPress) {
+    t11 = event => {
+      if (event.nativeEvent.actionName === "longpress") {
+        onLongPress?.();
+      }
+    };
+    $[18] = onLongPress;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== accessibilityHint || $[21] !== accessibilityLabel || $[22] !== body || $[23] !== onPress || $[24] !== style || $[25] !== t10 || $[26] !== t11 || $[27] !== t9 || $[28] !== testID) {
+    t12 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} onPress={onPress} onLongPress={t9} accessibilityActions={t10} onAccessibilityAction={t11} className="overflow-hidden active:opacity-80" style={style}>{body}</Pressable>;
+    $[20] = accessibilityHint;
+    $[21] = accessibilityLabel;
+    $[22] = body;
+    $[23] = onPress;
+    $[24] = style;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t9;
+    $[28] = testID;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  return t12;
+}

package/dist/SwipeableRow.jsx

@@ -0,0 +1,50 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+/**
+ * The Gesture Handler row, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`.
+ */
+export const SwipeRowGestureContext = createContext(null);
+
+/**
+ * A list row that a horizontal swipe moves aside, to reveal its actions
+ * behind it, as the iOS and Android mail apps. The row follows the finger
+ * 1:1 and springs on at the finger's speed when it lifts: past half its
+ * buttons it stays open; a full swipe (half the row, with a light haptic as
+ * it arms) runs the first action, and an action that `exits` slides the row
+ * out. Toward a side with no actions it gives a little, with resistance. A
+ * vertical drag scrolls the list first. One row is open at a time: another
+ * row opening, a tap on any row, or `closeSwipeRows` (pass it to the list's
+ * `onScrollBeginDrag`) closes it. With Reduce Motion on it still follows the
+ * finger, and the release settles at once.
+ *
+ * The swipe needs `GestureHandlerProvider`; without it the row is drawn as
+ * is, with no swipe. Either way, spread `swipeActionsAccessibility(actions)`
+ * on the row's main pressable, so screen reader users get the same actions.
+ */
+export function SwipeableRow(props) {
+  const $ = _c(5);
+  const GestureRow = useContext(SwipeRowGestureContext);
+  if (!GestureRow) {
+    let t0;
+    if ($[0] !== props.children) {
+      t0 = <>{props.children}</>;
+      $[0] = props.children;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  let t0;
+  if ($[2] !== GestureRow || $[3] !== props) {
+    t0 = <GestureRow {...props} />;
+    $[2] = GestureRow;
+    $[3] = props;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}

package/dist/Switch.jsx

@@ -0,0 +1,130 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Switch as PrimitiveSwitch } from "./primitives/switch";
+import { cn } from "./cn";
+import { switchColors, switchSize, touchSlop } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+const Switch = React.forwardRef((t0, ref) => {
+  const $ = _c(34);
+  let checked;
+  let offColor;
+  let onCheckedChange;
+  let onColor;
+  let onValueChange;
+  let props;
+  let sizeName;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      checked,
+      onValueChange,
+      onCheckedChange,
+      onColor,
+      offColor,
+      size: sizeName,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = offColor;
+    $[3] = onCheckedChange;
+    $[4] = onColor;
+    $[5] = onValueChange;
+    $[6] = props;
+    $[7] = sizeName;
+    $[8] = value;
+  } else {
+    checked = $[1];
+    offColor = $[2];
+    onCheckedChange = $[3];
+    onColor = $[4];
+    onValueChange = $[5];
+    props = $[6];
+    sizeName = $[7];
+    value = $[8];
+  }
+  const resolvedValue = checked ?? value ?? false;
+  const t1 = useScheme();
+  let t2;
+  if ($[9] !== resolvedValue || $[10] !== t1) {
+    t2 = switchColors(resolvedValue, t1);
+    $[9] = resolvedValue;
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  const colors = t2;
+  const trackColor = resolvedValue ? onColor : offColor;
+  const size = switchSize(useLargerText(), sizeName);
+  let t3;
+  if ($[12] !== onCheckedChange || $[13] !== onValueChange) {
+    t3 = nextValue => {
+      onCheckedChange?.(nextValue);
+      onValueChange?.(nextValue);
+    };
+    $[12] = onCheckedChange;
+    $[13] = onValueChange;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const handleCheckedChange = t3;
+  const T0 = PrimitiveSwitch;
+  const t4 = touchSlop(size.width, size.height);
+  const t5 = "switch";
+  const t6 = cn(size.track, "justify-center");
+  let t7;
+  if ($[15] !== colors.track || $[16] !== trackColor) {
+    t7 = trackColor ? {
+      backgroundColor: trackColor,
+      borderColor: trackColor
+    } : colors.track;
+    $[15] = colors.track;
+    $[16] = trackColor;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  const t8 = colors.thumb;
+  const t9 = cn(size.thumb, resolvedValue ? size.on : size.off);
+  const t10 = props.accessibilityState;
+  const t11 = Boolean(props.disabled);
+  let t12;
+  if ($[18] !== props.accessibilityState || $[19] !== resolvedValue || $[20] !== t11) {
+    t12 = {
+      ...t10,
+      checked: resolvedValue,
+      disabled: t11
+    };
+    $[18] = props.accessibilityState;
+    $[19] = resolvedValue;
+    $[20] = t11;
+    $[21] = t12;
+  } else {
+    t12 = $[21];
+  }
+  let t13;
+  if ($[22] !== T0 || $[23] !== colors.thumb || $[24] !== handleCheckedChange || $[25] !== props || $[26] !== ref || $[27] !== resolvedValue || $[28] !== t12 || $[29] !== t4 || $[30] !== t6 || $[31] !== t7 || $[32] !== t9) {
+    t13 = <T0 ref={ref} checked={resolvedValue} onCheckedChange={handleCheckedChange} hitSlop={t4} accessibilityRole={t5} className={t6} trackStyle={t7} thumbStyle={t8} thumbClassName={t9} {...props} accessibilityState={t12} />;
+    $[22] = T0;
+    $[23] = colors.thumb;
+    $[24] = handleCheckedChange;
+    $[25] = props;
+    $[26] = ref;
+    $[27] = resolvedValue;
+    $[28] = t12;
+    $[29] = t4;
+    $[30] = t6;
+    $[31] = t7;
+    $[32] = t9;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  return t13;
+});
+Switch.displayName = "Switch";
+export { Switch };