@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/select.jsx

@@ -0,0 +1,555 @@
+import { c as _c } from "react/compiler-runtime";
+import * as SelectPrimitive from "@rn-primitives/select";
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react-native";
+import * as React from "react";
+import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { NativeOnlyAnimatedView } from "./native-only-animated-view";
+import { SelectHost } from "./select-host";
+import { TextClassContext } from "./text";
+import { LiquidGlass } from "../LiquidGlass";
+import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { useLargerText } from "../theme";
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = React.forwardRef((t0, ref) => {
+  const $ = _c(18);
+  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];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("line-clamp-1 text-sm text-foreground", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const classes = t1;
+  if (Platform.OS === "web") {
+    let t2;
+    if ($[6] !== props || $[7] !== ref) {
+      t2 = <SelectPrimitive.Value ref={ref} {...props} />;
+      $[6] = props;
+      $[7] = ref;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== classes || $[10] !== style || $[11] !== t2) {
+      t3 = <Text className={classes} style={style}>{t2}</Text>;
+      $[9] = classes;
+      $[10] = style;
+      $[11] = t2;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    return t3;
+  }
+  let t2;
+  if ($[13] !== classes || $[14] !== props || $[15] !== ref || $[16] !== style) {
+    t2 = <SelectPrimitive.Value ref={ref} className={classes} style={style} {...props} />;
+    $[13] = classes;
+    $[14] = props;
+    $[15] = ref;
+    $[16] = style;
+    $[17] = t2;
+  } else {
+    t2 = $[17];
+  }
+  return t2;
+});
+const SelectTrigger = React.forwardRef((t0, ref) => {
+  const $ = _c(21);
+  let children;
+  let className;
+  let disabled;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      size: t1,
+      disabled,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    disabled = $[3];
+    props = $[4];
+    t1 = $[5];
+  }
+  const size = t1 === undefined ? "default" : t1;
+  const scheme = useScheme();
+  const t2 = size === "sm" && "h-8 py-1.5";
+  const t3 = disabled && "opacity-50";
+  let t4;
+  if ($[6] !== className || $[7] !== t2 || $[8] !== t3) {
+    t4 = cn("h-10 flex-row items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2", t2, t3, className);
+    $[6] = className;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== children) {
+    t5 = <>{children}</>;
+    $[10] = children;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const t6 = tokens.color.muted[scheme];
+  let t7;
+  if ($[12] !== t6) {
+    t7 = <IconChevronDown size={16} color={t6} />;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== disabled || $[15] !== props || $[16] !== ref || $[17] !== t4 || $[18] !== t5 || $[19] !== t7) {
+    t8 = <SelectPrimitive.Trigger ref={ref} disabled={disabled} className={t4} {...props}>{t5}{t7}</SelectPrimitive.Trigger>;
+    $[14] = disabled;
+    $[15] = props;
+    $[16] = ref;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  return t8;
+});
+const SelectContent = React.forwardRef((t0, ref) => {
+  const $ = _c(31);
+  let children;
+  let className;
+  let portalHost;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      position: t1,
+      portalHost,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = portalHost;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    portalHost = $[3];
+    props = $[4];
+    t1 = $[5];
+  }
+  const position = t1 === undefined ? "popper" : t1;
+  let t2;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = Platform.select({
+      native: StyleSheet.absoluteFill
+    });
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const overlayFill = t2;
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = Platform.select({
+      native: "box-none"
+    });
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== className) {
+    t4 = cn("z-50 min-w-[8rem] rounded-lg", Platform.select({
+      native: "p-1",
+      web: "max-h-52 overflow-hidden"
+    }), className);
+    $[8] = className;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  let t6;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = <LiquidGlass pointerEvents="none" elevated={false} className="absolute inset-0 rounded-lg" />;
+    t6 = <SelectScrollUpButton />;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t5 = $[10];
+    t6 = $[11];
+  }
+  const t7 = position === "popper" && "w-full";
+  let t8;
+  if ($[12] !== t7) {
+    t8 = cn("p-1", t7);
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== children || $[15] !== t8) {
+    t9 = <SelectPrimitive.Viewport className={t8}>{children}</SelectPrimitive.Viewport>;
+    $[14] = children;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = <SelectScrollDownButton />;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== position || $[19] !== props || $[20] !== ref || $[21] !== t4 || $[22] !== t9) {
+    t11 = <SelectPrimitive.Overlay style={overlayFill}><TextClassContext.Provider value="text-popover-foreground"><NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut} className="z-50" style={overlayFill} pointerEvents={t3}><SelectPrimitive.Content ref={ref} position={position} className={t4} {...props}>{t5}{t6}{t9}{t10}</SelectPrimitive.Content></NativeOnlyAnimatedView></TextClassContext.Provider></SelectPrimitive.Overlay>;
+    $[18] = position;
+    $[19] = props;
+    $[20] = ref;
+    $[21] = t4;
+    $[22] = t9;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  const content = t11;
+  if (Platform.OS === "android") {
+    let t12;
+    if ($[24] !== content) {
+      t12 = <SelectHost>{content}</SelectHost>;
+      $[24] = content;
+      $[25] = t12;
+    } else {
+      t12 = $[25];
+    }
+    return t12;
+  }
+  let t12;
+  if ($[26] !== content) {
+    t12 = <SelectHost>{content}</SelectHost>;
+    $[26] = content;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] !== portalHost || $[29] !== t12) {
+    t13 = <SelectPrimitive.Portal hostName={portalHost}>{t12}</SelectPrimitive.Portal>;
+    $[28] = portalHost;
+    $[29] = t12;
+    $[30] = t13;
+  } else {
+    t13 = $[30];
+  }
+  return t13;
+});
+const SelectLabel = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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("px-2 py-2 text-xs text-muted-foreground", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <SelectPrimitive.Label ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+
+/**
+ * On web `SelectPrimitive.Item` passes these props to a Radix DOM node, not a
+ * React Native view, so give it `aria-label` and `data-testid` there, not
+ * `accessibilityLabel` or `testID` (`selectItemA11yProps`).
+ */
+
+const SelectItem = React.forwardRef((t0, ref) => {
+  const $ = _c(22);
+  let className;
+  let disabled;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      disabled,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = props;
+  } else {
+    className = $[1];
+    disabled = $[2];
+    props = $[3];
+  }
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const t1 = largerText && "min-h-[56px]";
+  const t2 = disabled && "opacity-50";
+  let t3;
+  if ($[4] !== className || $[5] !== t1 || $[6] !== t2) {
+    t3 = cn("relative min-h-[44px] flex-row items-center gap-2 rounded-sm py-3 pl-2 pr-8 active:opacity-70", t1, t2, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const t4 = tokens.color.muted[scheme];
+  let t5;
+  if ($[8] !== t4) {
+    t5 = <View className="absolute right-2 size-3.5 items-center justify-center"><SelectPrimitive.ItemIndicator><IconCheck size={16} color={t4} /></SelectPrimitive.ItemIndicator></View>;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== scheme) {
+    t6 = textStyle("foreground", scheme);
+    $[10] = scheme;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = typeStyle("medium");
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t6) {
+    t8 = <SelectPrimitive.ItemText className="select-none text-sm font-instrument-sans-medium" style={{
+      ...t6,
+      ...t7
+    }} />;
+    $[13] = t6;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== disabled || $[16] !== props || $[17] !== ref || $[18] !== t3 || $[19] !== t5 || $[20] !== t8) {
+    t9 = <SelectPrimitive.Item ref={ref} disabled={disabled} className={t3} {...props}>{t5}{t8}</SelectPrimitive.Item>;
+    $[15] = disabled;
+    $[16] = props;
+    $[17] = ref;
+    $[18] = t3;
+    $[19] = t5;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  return t9;
+});
+const SelectSeparator = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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("-mx-1 my-1 h-px bg-border", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <SelectPrimitive.Separator ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+function SelectScrollUpButton(props) {
+  const $ = _c(3);
+  if (Platform.OS !== "web") {
+    return null;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <IconChevronUp size={16} color="#737373" />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props) {
+    t1 = <SelectPrimitive.ScrollUpButton className="items-center justify-center py-1" {...props}>{t0}</SelectPrimitive.ScrollUpButton>;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function SelectScrollDownButton(props) {
+  const $ = _c(3);
+  if (Platform.OS !== "web") {
+    return null;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <IconChevronDown size={16} color="#737373" />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props) {
+    t1 = <SelectPrimitive.ScrollDownButton className="items-center justify-center py-1" {...props}>{t0}</SelectPrimitive.ScrollDownButton>;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function NativeSelectScrollView(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  if (Platform.OS === "web") {
+    let t1;
+    if ($[3] !== props.children) {
+      t1 = <>{props.children}</>;
+      $[3] = props.children;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = cn("max-h-52", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = <ScrollView className={t1} {...props} />;
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
+}
+SelectValue.displayName = "SelectValue";
+SelectTrigger.displayName = "SelectTrigger";
+SelectContent.displayName = "SelectContent";
+SelectLabel.displayName = "SelectLabel";
+SelectItem.displayName = "SelectItem";
+SelectSeparator.displayName = "SelectSeparator";
+export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };