@vvedantb/native-ui 0.0.0-stage → 0.2.0

package/src/FloatingFAB.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { Platform, Pressable, View } from "react-native";
+import { cn } from "./cn";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FloatingSurface } from "./FloatingSurface";
+import { useAccentColor, useLargerText } from "./theme";
+import {
+  FLOATING_INSET,
+  FLOATING_TAB_BAR_HEIGHT,
+  FLOATING_TAB_BAR_HEIGHT_LARGE,
+} from "./floating";
+
+export function FloatingFAB({
+  onPress,
+  label,
+  testID,
+  children,
+}: {
+  onPress: () => void;
+  label: string;
+  testID?: string;
+  children: ReactNode;
+}) {
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const accentColor = useAccentColor();
+  const size = largerText ? 64 : 56;
+  const tabBar = largerText
+    ? FLOATING_TAB_BAR_HEIGHT_LARGE
+    : FLOATING_TAB_BAR_HEIGHT;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      className={cn(
+        "right-4 z-10",
+        Platform.OS === "web" ? "fixed" : "absolute",
+      )}
+      style={{
+        bottom: FLOATING_INSET + Math.max(insets.bottom, 8) + tabBar + 20,
+      }}
+    >
+      <FloatingSurface radius={size / 2} blur={false}>
+        <Pressable
+          testID={testID}
+          accessibilityRole="button"
+          accessibilityLabel={label}
+          onPress={onPress}
+          className="items-center justify-center"
+          style={({ pressed }) => ({
+            width: size,
+            height: size,
+            backgroundColor: accentColor,
+            opacity: pressed ? 0.7 : 1,
+          })}
+        >
+          {children}
+        </Pressable>
+      </FloatingSurface>
+    </View>
+  );
+}

package/src/FloatingSurface.tsx

@@ -0,0 +1,114 @@
+import { Platform, StyleSheet, View, type ViewProps } from "react-native";
+import { BlurView } from "expo-blur";
+import { useColorScheme } from "nativewind";
+import { cn } from "./cn";
+import {
+  floatingFill,
+  floatingHairline,
+  floatingShadow,
+  floatingSolidFill,
+  FLOATING_RADIUS,
+} from "./floating";
+import { useReduceTransparency } from "./useReduceTransparency";
+
+type FloatingSurfaceProps = ViewProps & {
+  className?: string;
+  radius?: number;
+  blur?: boolean;
+  elevated?: boolean;
+};
+
+export function FloatingSurface({
+  className,
+  style,
+  children,
+  radius = FLOATING_RADIUS,
+  blur = true,
+  elevated = true,
+  ...props
+}: FloatingSurfaceProps) {
+  const { colorScheme } = useColorScheme();
+  const reduceTransparency = useReduceTransparency();
+  const isDark = colorScheme === "dark";
+  const opaqueFill = isDark ? floatingSolidFill.dark : floatingSolidFill.light;
+  const translucentFill = isDark ? floatingFill.dark : floatingFill.light;
+  const border = isDark ? floatingHairline.dark : floatingHairline.light;
+  const useBlur = blur && !reduceTransparency && Platform.OS === "ios";
+  const fill =
+    Platform.OS === "android" || reduceTransparency || !blur
+      ? opaqueFill
+      : translucentFill;
+
+  return (
+    <View
+      className={cn(className)}
+      {...props}
+      style={[
+        { borderRadius: radius },
+        elevated ? floatingShadow : null,
+        style,
+        { backgroundColor: fill },
+      ]}
+    >
+      <View
+        style={[
+          styles.clip,
+          {
+            borderRadius: radius,
+            borderWidth: StyleSheet.hairlineWidth,
+            borderColor: border,
+            backgroundColor: useBlur ? "transparent" : fill,
+          },
+          Platform.OS === "ios" ? styles.continuous : null,
+          style != null ? styles.fill : null,
+        ]}
+      >
+        {useBlur ? (
+          <BlurView
+            pointerEvents="none"
+            tint={isDark ? "systemMaterialDark" : "systemMaterialLight"}
+            intensity={70}
+            style={StyleSheet.absoluteFill}
+          />
+        ) : null}
+        {Platform.OS === "web" && blur && !reduceTransparency ? (
+          <View
+            pointerEvents="none"
+            className="absolute inset-0 backdrop-blur-xl"
+            style={{ backgroundColor: translucentFill }}
+          />
+        ) : null}
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export function GlassSheetBackground({
+  style,
+  pointerEvents,
+}: {
+  style?: ViewProps["style"];
+  pointerEvents?: ViewProps["pointerEvents"];
+}) {
+  return (
+    <FloatingSurface
+      style={style}
+      pointerEvents={pointerEvents}
+      radius={20}
+      className="rounded-t-[20px]"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  clip: {
+    overflow: "hidden",
+  },
+  fill: {
+    flex: 1,
+  },
+  continuous: {
+    borderCurve: "continuous",
+  },
+});

package/src/FloatingTabBar.tsx

@@ -0,0 +1,107 @@
+import type { ComponentProps } from "react";
+import { Pressable, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Tabs } from "expo-router";
+import { selectionHaptic } from "./haptics";
+import { FloatingSurface } from "./FloatingSurface";
+import { useLargerText } from "./theme";
+import {
+  FLOATING_INSET,
+  FLOATING_PILL_RADIUS,
+  FLOATING_TAB_BAR_HEIGHT,
+  FLOATING_TAB_BAR_HEIGHT_LARGE,
+} from "./floating";
+
+type TabBarProps = Parameters<
+  NonNullable<ComponentProps<typeof Tabs>["tabBar"]>
+>[0];
+
+export function FloatingTabBar({
+  state,
+  descriptors,
+  navigation,
+}: TabBarProps) {
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const height = largerText
+    ? FLOATING_TAB_BAR_HEIGHT_LARGE
+    : FLOATING_TAB_BAR_HEIGHT;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={{
+        position: "absolute",
+        left: FLOATING_INSET,
+        right: FLOATING_INSET,
+        bottom: FLOATING_INSET + Math.max(insets.bottom, 8),
+      }}
+    >
+      <FloatingSurface radius={FLOATING_PILL_RADIUS}>
+        <View
+          className="flex-row items-center justify-around px-2"
+          style={{ height }}
+          accessibilityRole="tablist"
+        >
+          {state.routes.map((route, index) => {
+            const focused = state.index === index;
+            const options = descriptors[route.key]?.options;
+            if (!options) {
+              return null;
+            }
+            const label =
+              typeof options.tabBarLabel === "string"
+                ? options.tabBarLabel
+                : typeof options.title === "string"
+                  ? options.title
+                  : route.name;
+            const color = focused
+              ? options.tabBarActiveTintColor
+              : options.tabBarInactiveTintColor;
+            const onPress = () => {
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
+              if (!focused && !event.defaultPrevented) {
+                selectionHaptic();
+                navigation.navigate(route.name, route.params);
+              }
+            };
+
+            return (
+              <Pressable
+                key={route.key}
+                testID={options.tabBarButtonTestID}
+                accessibilityRole="tab"
+                accessibilityState={{ selected: focused }}
+                accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
+                onPress={onPress}
+                className="min-h-12 min-w-12 flex-1 items-center justify-center gap-1"
+                style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+              >
+                {options.tabBarIcon
+                  ? options.tabBarIcon({
+                      focused,
+                      color: color ?? "#737373",
+                      size: largerText ? 28 : 24,
+                    })
+                  : null}
+                <Text
+                  numberOfLines={1}
+                  className={`font-instrument-sans-semibold ${
+                    largerText ? "text-base" : "text-sm"
+                  }`}
+                  style={{ color }}
+                >
+                  {label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </FloatingSurface>
+    </View>
+  );
+}

package/src/HeaderIconButton.tsx

@@ -0,0 +1,29 @@
+import { TouchableOpacity } from "react-native";
+import { useLargerText } from "./theme";
+
+export function HeaderIconButton({
+  onPress,
+  label,
+  testID,
+  children,
+}: {
+  onPress: () => void;
+  label: string;
+  testID?: string;
+  children: React.ReactNode;
+}) {
+  const largerText = useLargerText();
+  return (
+    <TouchableOpacity
+      testID={testID}
+      className={`${largerText ? "h-14 w-14" : "h-12 w-12"} items-center justify-center rounded-full border border-white/40 bg-surface dark:border-white/10`}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      hitSlop={8}
+      activeOpacity={0.7}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import { useLargerText } from "./theme";
+
+type InputProps = React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
+  className?: string;
+};
+
+const Input = React.forwardRef<
+  React.ElementRef<typeof PrimitiveInput>,
+  InputProps
+>(({ className, placeholderTextColor, ...props }, ref) => {
+  const largerText = useLargerText();
+  return (
+    <PrimitiveInput
+      ref={ref}
+      placeholderTextColor={placeholderTextColor ?? "#737373"}
+      className={cn(
+        "min-h-14 rounded-full border border-white/40 bg-secondary px-4 py-3 text-lg font-instrument-sans-medium text-foreground dark:border-white/10",
+        largerText && "min-h-16 py-4 text-xl",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export { Input };
+export type { InputProps };

package/src/LiquidGlass.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+export {
+  FloatingSurface as LiquidGlass,
+  GlassSheetBackground,
+} from "./FloatingSurface";
+
+export function GlassBlurProvider({ children }: { children: ReactNode }) {
+  return children;
+}
+
+export function GlassBlurTarget({ children }: { children: ReactNode }) {
+  return children;
+}

package/src/ListRow.tsx

@@ -0,0 +1,85 @@
+import type { ComponentType, ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { NEUTRAL_500 } from "./colors";
+import { cn } from "./cn";
+import { FLOATING_ROW_RADIUS } from "./floating";
+import { useLargerText } from "./theme";
+
+export function ListRow({
+  title,
+  meta,
+  detail,
+  icon: Icon,
+  iconColor = NEUTRAL_500,
+  right,
+  onPress,
+  onCanvas = false,
+  testID,
+}: {
+  title: string;
+  meta?: string;
+  detail?: ReactNode;
+  icon?: ComponentType<IconProps>;
+  iconColor?: string;
+  right?: ReactNode;
+  onPress?: () => void;
+  onCanvas?: boolean;
+  testID?: string;
+}) {
+  const largerText = useLargerText();
+  const content = (
+    <>
+      {Icon ? <Icon size={largerText ? 30 : 26} color={iconColor} /> : null}
+      <View className="min-w-0 flex-1">
+        <Text
+          numberOfLines={2}
+          className={cn(
+            "font-instrument-sans-semibold text-foreground",
+            largerText ? "text-xl" : "text-lg",
+          )}
+        >
+          {title}
+        </Text>
+        {meta ? (
+          <Text
+            className={cn(
+              "font-instrument-sans text-muted-foreground",
+              largerText ? "text-lg" : "text-base",
+            )}
+          >
+            {meta}
+          </Text>
+        ) : null}
+        {detail}
+      </View>
+      {right}
+    </>
+  );
+  const className = cn(
+    "flex-row items-center gap-3 px-4",
+    largerText ? "min-h-[72px] py-4" : "min-h-16 py-3",
+    onCanvas ? "bg-surface" : "bg-surface-secondary",
+  );
+  const rowStyle = { borderRadius: FLOATING_ROW_RADIUS };
+
+  if (!onPress) {
+    return (
+      <View testID={testID} className={className} style={rowStyle}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      onPress={onPress}
+      className={cn(className, "active:opacity-70")}
+      style={rowStyle}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/PillTabs.tsx

@@ -0,0 +1,51 @@
+import { View, Text, Pressable } from "react-native";
+import { useLargerText } from "./theme";
+
+export function PillTabs<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: ReadonlyArray<{ id: T; label: string; testID?: string }>;
+  value: T;
+  onChange: (id: T) => void;
+}) {
+  const largerText = useLargerText();
+  return (
+    <View className="flex-row gap-2">
+      {options.map((tab) => {
+        const isSelected = value === tab.id;
+
+        return (
+          <Pressable
+            key={tab.id}
+            testID={tab.testID}
+            accessibilityLabel={tab.label}
+            onPress={() => onChange(tab.id)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isSelected }}
+            className={`flex-1 justify-center rounded-full border border-white/40 px-3 dark:border-white/10 ${
+              largerText ? "min-h-16 py-3" : "min-h-14 py-3"
+            } ${
+              isSelected ? "bg-pink-100 dark:bg-pink-900/40" : "bg-secondary"
+            }`}
+            style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+          >
+            <Text
+              numberOfLines={1}
+              className={`text-center font-instrument-sans-semibold ${
+                largerText ? "text-xl" : "text-lg"
+              } ${
+                isSelected
+                  ? "text-pink-700 dark:text-pink-300"
+                  : "text-muted-foreground"
+              }`}
+            >
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/SafeAreaContainer.tsx

@@ -0,0 +1,26 @@
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const SafeAreaContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      className="bg-transparent"
+      style={{
+        flex: 1,
+        justifyContent: "space-between",
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      {children}
+    </View>
+  );
+};

package/src/ScreenContainer.tsx

@@ -0,0 +1,36 @@
+import { ScrollView, View, type ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useLargerText } from "./theme";
+import { tabBarReserve } from "./floating";
+
+interface ScreenContainerProps extends ViewProps {
+  children: React.ReactNode;
+  reserveTabBar?: boolean;
+  footer?: React.ReactNode;
+}
+
+export function ScreenContainer({
+  children,
+  reserveTabBar = false,
+  footer,
+  ...props
+}: ScreenContainerProps) {
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const bottomPad = reserveTabBar
+    ? tabBarReserve(largerText, insets.bottom)
+    : 40;
+
+  return (
+    <View className="flex-1 bg-transparent" {...props}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: bottomPad }}
+      >
+        <View className="flex-col gap-4 p-4">{children}</View>
+        {footer ? <View className="pt-4">{footer}</View> : null}
+      </ScrollView>
+    </View>
+  );
+}

package/src/Select.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import {
+  NativeSelectScrollView,
+  Select as PrimitiveSelect,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./primitives/select";
+import { cn } from "./cn";
+import { useLargerText } from "./theme";
+
+interface SelectOption<TValue = string | number | null> {
+  label: string;
+  value: TValue;
+  color?: string;
+}
+
+interface SelectProps<TValue = string | number | null> {
+  value?: TValue;
+  onValueChange: (value: TValue) => void;
+  options: Array<SelectOption<TValue>>;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  testID?: string;
+}
+
+const NULL_SENTINEL = "__null__";
+
+function toPrimitiveValue<TValue>(
+  value: TValue | undefined,
+  options: Array<SelectOption<TValue>>,
+) {
+  if (value === undefined || value === "") {
+    return undefined;
+  }
+
+  const expectedValue = value === null ? NULL_SENTINEL : String(value);
+  const option = options.find(
+    (item) => String(item.value ?? NULL_SENTINEL) === expectedValue,
+  );
+
+  if (!option) return undefined;
+
+  return {
+    label: option.label,
+    value: String(option.value ?? NULL_SENTINEL),
+  };
+}
+
+function Select<TValue = string | number | null>({
+  value,
+  onValueChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+  triggerClassName,
+  contentClassName,
+  testID,
+}: SelectProps<TValue>) {
+  const largerText = useLargerText();
+  const primitiveValue = toPrimitiveValue(value, options);
+
+  return (
+    <PrimitiveSelect
+      value={primitiveValue}
+      onValueChange={(nextOption) => {
+        if (!nextOption) {
+          return;
+        }
+
+        const selectedValue =
+          nextOption.value === NULL_SENTINEL ? null : nextOption.value;
+        const match = options.find(
+          (option) =>
+            String(option.value ?? NULL_SENTINEL) === String(selectedValue),
+        );
+
+        if (match) {
+          onValueChange(match.value);
+        }
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        testID={testID}
+        className={cn(
+          "h-14 w-full rounded-lg border-0 bg-secondary px-4 py-0 shadow-none",
+          largerText && "h-16",
+          triggerClassName,
+          className,
+        )}
+      >
+        <SelectValue
+          placeholder={placeholder ?? "Select option"}
+          className={cn(
+            "font-instrument-sans-medium text-foreground",
+            largerText ? "text-xl" : "text-lg",
+          )}
+        />
+      </SelectTrigger>
+      <SelectContent className={cn("w-full", contentClassName)}>
+        <NativeSelectScrollView>
+          <SelectGroup>
+            {options.map((option) => {
+              const optionId = testID
+                ? `${testID}-${String(option.value ?? "null")}`
+                : undefined;
+              return (
+                <SelectItem
+                  key={`${String(option.value)}-${option.label}`}
+                  testID={optionId}
+                  accessibilityLabel={option.label}
+                  label={option.label}
+                  value={String(option.value ?? NULL_SENTINEL)}
+                />
+              );
+            })}
+          </SelectGroup>
+        </NativeSelectScrollView>
+      </SelectContent>
+    </PrimitiveSelect>
+  );
+}
+
+export { Select };
+export type { SelectOption, SelectProps };