@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Card.jsx

@@ -0,0 +1,371 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { Card as PrimitiveCard, CardContent as PrimitiveCardContent, CardHeader as PrimitiveCardHeader, CardTitle as PrimitiveCardTitle } from "./primitives/card";
+import { cn } from "./cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useAccentColor, useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+export function Card(t0) {
+  const $ = _c(30);
+  const {
+    children,
+    title,
+    description,
+    action,
+    leftIcon: Icon,
+    className,
+    onPress,
+    accessibilityLabel,
+    testID
+  } = t0;
+  const largerText = useLargerText();
+  const accentColor = useAccentColor();
+  const scheme = useScheme();
+  const hasHeader = Boolean(title || action);
+  const titleSize = largerText ? "text-2xl" : "text-base";
+  const t1 = onPress ? undefined : testID;
+  let t2;
+  if ($[0] !== className) {
+    t2 = cn("gap-4 overflow-hidden border-0 py-4", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== scheme) {
+    t3 = cardStyle(scheme);
+    $[2] = scheme;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== Icon || $[5] !== accentColor || $[6] !== action || $[7] !== description || $[8] !== hasHeader || $[9] !== largerText || $[10] !== scheme || $[11] !== title || $[12] !== titleSize) {
+    t4 = hasHeader && <PrimitiveCardHeader className="px-4 py-0"><View className="flex-row items-center justify-between"><View className="flex-row items-center gap-2">{Icon && <Icon size={largerText ? 28 : 24} color={accentColor} />}{title ? <PrimitiveCardTitle className={cn("font-instrument-sans-semibold leading-tight", titleSize)} style={[textStyle("foreground", scheme), sizeStyle(titleSize, "tight"), typeStyle("semibold")]}>{title}</PrimitiveCardTitle> : null}</View>{action}</View>{description ? <CardDescription>{description}</CardDescription> : null}</PrimitiveCardHeader>;
+    $[4] = Icon;
+    $[5] = accentColor;
+    $[6] = action;
+    $[7] = description;
+    $[8] = hasHeader;
+    $[9] = largerText;
+    $[10] = scheme;
+    $[11] = title;
+    $[12] = titleSize;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const t5 = hasHeader && "pt-0";
+  let t6;
+  if ($[14] !== t5) {
+    t6 = cn(t5, "px-4");
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== children || $[17] !== t6) {
+    t7 = <PrimitiveCardContent className={t6}>{children}</PrimitiveCardContent>;
+    $[16] = children;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== t1 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t7) {
+    t8 = <PrimitiveCard testID={t1} className={t2} style={t3}>{t4}{t7}</PrimitiveCard>;
+    $[19] = t1;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t7;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  const card = t8;
+  if (!onPress) {
+    return card;
+  }
+  const t9 = accessibilityLabel ?? title;
+  let t10;
+  if ($[25] !== card || $[26] !== onPress || $[27] !== t9 || $[28] !== testID) {
+    t10 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={t9} onPress={onPress} className="active:opacity-70">{card}</Pressable>;
+    $[25] = card;
+    $[26] = onPress;
+    $[27] = t9;
+    $[28] = testID;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  return t10;
+}
+
+// Parts for composing a card body with the web part names. They sit inside
+// `Card`'s padded content, so they add no side padding of their own. Text
+// colours are styles that follow the colour scheme; recolour with `style`.
+
+export function CardHeader(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("gap-1 pb-3", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+/**
+ * Web `font-semibold leading-none` at the inherited 16. The line height is
+ * `leading-tight` (20), not 16: below the face's ascent and descent, iOS and
+ * Android can clip the glyphs.
+ */
+export function CardTitle(t0) {
+  const $ = _c(20);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-2xl" : "text-base";
+  let t1;
+  if ($[4] !== className || $[5] !== size) {
+    t1 = cn("font-instrument-sans-semibold leading-tight", size, className);
+    $[4] = className;
+    $[5] = size;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== scheme) {
+    t2 = textStyle("foreground", scheme);
+    $[7] = scheme;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== size) {
+    t3 = sizeStyle(size, "tight");
+    $[9] = size;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = typeStyle("semibold");
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== style || $[13] !== t2 || $[14] !== t3) {
+    t5 = [t2, t3, t4, style];
+    $[12] = style;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== props || $[17] !== t1 || $[18] !== t5) {
+    t6 = <Text accessibilityRole="header" className={t1} style={t5} {...props} />;
+    $[16] = props;
+    $[17] = t1;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
+}
+
+/** Web `text-sm` (14 / 20) in the muted colour. */
+export function CardDescription(t0) {
+  const $ = _c(19);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-lg" : "text-sm";
+  let t1;
+  if ($[4] !== className || $[5] !== size) {
+    t1 = cn("font-instrument-sans", size, className);
+    $[4] = className;
+    $[5] = size;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== scheme) {
+    t2 = textStyle("muted", scheme);
+    $[7] = scheme;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== size) {
+    t3 = sizeStyle(size);
+    $[9] = size;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== style || $[12] !== t2 || $[13] !== t3) {
+    t4 = [t2, t3, style];
+    $[11] = style;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== props || $[16] !== t1 || $[17] !== t4) {
+    t5 = <Text className={t1} style={t4} {...props} />;
+    $[15] = props;
+    $[16] = t1;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  return t5;
+}
+export function CardContent(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("gap-3", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+export function CardFooter(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex-row items-center justify-end gap-2 pt-4", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}

package/dist/Checkbox.jsx

@@ -0,0 +1,177 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable } from "react-native";
+import { IconCheck, IconMinus } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { checkboxColors, touchSlop } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/**
+ * Controlled checkbox with a Pressable and a Tabler check, as the web
+ * `Checkbox` (`checked` / `onCheckedChange`). Colours from `checkboxColors`:
+ * the palette primary when checked, as on the web (not the theme accent).
+ * 16 square with a 14 check, as on the web (24 and 18 with larger text), plus
+ * a hit slop (`touchSlop`) that makes the target 44.
+ */
+export function Checkbox(t0) {
+  const $ = _c(47);
+  let checked;
+  let className;
+  let disabled;
+  let icon;
+  let onCheckedChange;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      checked,
+      onCheckedChange,
+      icon,
+      disabled,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = icon;
+    $[5] = onCheckedChange;
+    $[6] = props;
+    $[7] = style;
+  } else {
+    checked = $[1];
+    className = $[2];
+    disabled = $[3];
+    icon = $[4];
+    onCheckedChange = $[5];
+    props = $[6];
+    style = $[7];
+  }
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const on = checked !== false;
+  let t1;
+  if ($[8] !== on || $[9] !== scheme) {
+    t1 = checkboxColors(on, scheme);
+    $[8] = on;
+    $[9] = scheme;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  let color;
+  let fill;
+  if ($[11] !== t1) {
+    ({
+      color,
+      ...fill
+    } = t1);
+    $[11] = t1;
+    $[12] = color;
+    $[13] = fill;
+  } else {
+    color = $[12];
+    fill = $[13];
+  }
+  const t2 = largerText ? 6 : 4;
+  let t3;
+  if ($[14] !== fill || $[15] !== t2) {
+    t3 = {
+      borderRadius: t2,
+      ...fill
+    };
+    $[14] = fill;
+    $[15] = t2;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  const boxStyle = t3;
+  const box = largerText ? 24 : 16;
+  const iconSize = largerText ? 18 : 14;
+  const t4 = checked === "indeterminate" ? "mixed" : checked;
+  const t5 = Boolean(disabled);
+  let t6;
+  if ($[17] !== t4 || $[18] !== t5) {
+    t6 = {
+      checked: t4,
+      disabled: t5
+    };
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== box) {
+    t7 = touchSlop(box);
+    $[20] = box;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== checked || $[23] !== onCheckedChange) {
+    t8 = () => {
+      selectionHaptic();
+      onCheckedChange?.(checked !== true);
+    };
+    $[22] = checked;
+    $[23] = onCheckedChange;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  const t9 = largerText ? "h-6 w-6" : "h-4 w-4";
+  const t10 = disabled && "opacity-50";
+  let t11;
+  if ($[25] !== className || $[26] !== t10 || $[27] !== t9) {
+    t11 = cn("items-center justify-center border active:opacity-70", t9, t10, className);
+    $[25] = className;
+    $[26] = t10;
+    $[27] = t9;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  let t12;
+  if ($[29] !== boxStyle || $[30] !== style) {
+    t12 = typeof style === "function" ? state => [boxStyle, style(state)] : [boxStyle, style];
+    $[29] = boxStyle;
+    $[30] = style;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== checked || $[33] !== color || $[34] !== icon || $[35] !== iconSize || $[36] !== on) {
+    t13 = on ? icon ?? (checked === "indeterminate" ? <IconMinus size={iconSize} color={color} strokeWidth={2} /> : <IconCheck size={iconSize} color={color} strokeWidth={2} />) : null;
+    $[32] = checked;
+    $[33] = color;
+    $[34] = icon;
+    $[35] = iconSize;
+    $[36] = on;
+    $[37] = t13;
+  } else {
+    t13 = $[37];
+  }
+  let t14;
+  if ($[38] !== disabled || $[39] !== props || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t6 || $[44] !== t7 || $[45] !== t8) {
+    t14 = <Pressable accessibilityRole="checkbox" accessibilityState={t6} hitSlop={t7} disabled={disabled} onPress={t8} className={t11} style={t12} {...props}>{t13}</Pressable>;
+    $[38] = disabled;
+    $[39] = props;
+    $[40] = t11;
+    $[41] = t12;
+    $[42] = t13;
+    $[43] = t6;
+    $[44] = t7;
+    $[45] = t8;
+    $[46] = t14;
+  } else {
+    t14 = $[46];
+  }
+  return t14;
+}

package/dist/Chip.jsx

@@ -0,0 +1,79 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text } from "react-native";
+import { textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+export function Chip(t0) {
+  const $ = _c(19);
+  const {
+    label,
+    selected,
+    onPress,
+    testID,
+    round: t1
+  } = t0;
+  const round = t1 === undefined ? false : t1;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = round ? largerText ? "h-14 w-14" : "h-12 w-12" : largerText ? "min-h-14 px-5 py-3" : "min-h-12 px-4 py-2";
+  let t2;
+  if ($[0] !== selected) {
+    t2 = {
+      selected
+    };
+    $[0] = selected;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = `items-center justify-center rounded-full border border-white/40 active:opacity-70 dark:border-white/10 ${size} ${selected ? "bg-pink-100 dark:bg-pink-900/40" : "bg-secondary"}`;
+  const t4 = `font-instrument-sans-semibold ${largerText ? "text-xl" : "text-lg"} ${selected ? "text-pink-700 dark:text-pink-300" : ""}`;
+  let t5;
+  if ($[2] !== scheme || $[3] !== selected) {
+    t5 = selected ? null : textStyle("muted", scheme);
+    $[2] = scheme;
+    $[3] = selected;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = typeStyle("semibold");
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== t5) {
+    t7 = [t5, t6];
+    $[6] = t5;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== label || $[9] !== t4 || $[10] !== t7) {
+    t8 = <Text className={t4} style={t7}>{label}</Text>;
+    $[8] = label;
+    $[9] = t4;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] !== label || $[13] !== onPress || $[14] !== t2 || $[15] !== t3 || $[16] !== t8 || $[17] !== testID) {
+    t9 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={label} accessibilityState={t2} onPress={onPress} className={t3}>{t8}</Pressable>;
+    $[12] = label;
+    $[13] = onPress;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t8;
+    $[17] = testID;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}