@vvedantb/native-ui 0.0.0-stage → 0.1.0

package/src/primitives/select.tsx

@@ -0,0 +1,265 @@
+import * as SelectPrimitive from "@rn-primitives/select";
+import {
+  Check,
+  ChevronDown,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "lucide-react-native";
+import * as React from "react";
+import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { NativeOnlyAnimatedView } from "./native-only-animated-view";
+import { TextClassContext } from "./text";
+import { LiquidGlass } from "../LiquidGlass";
+import { cn } from "../cn";
+
+type Option = SelectPrimitive.Option;
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const FullWindowOverlay =
+  Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+type SelectValueProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Value
+> & {
+  className?: string;
+};
+
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  SelectValueProps
+>(({ className, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Value
+      ref={ref}
+      className={cn("line-clamp-1 text-sm text-foreground", className)}
+      {...props}
+    />
+  );
+});
+
+type SelectTriggerProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Trigger
+> & {
+  className?: string;
+  size?: "default" | "sm";
+};
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, size = "default", disabled, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      disabled={disabled}
+      className={cn(
+        "h-10 flex-row items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2",
+        size === "sm" && "h-8 py-1.5",
+        disabled && "opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <>{children}</>
+      <ChevronDown size={16} color="#737373" />
+    </SelectPrimitive.Trigger>
+  );
+});
+
+type SelectContentProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Content
+> & {
+  className?: string;
+  portalHost?: string;
+};
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  SelectContentProps
+>(({ className, children, position = "popper", portalHost, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <SelectPrimitive.Overlay
+          style={Platform.select({ native: StyleSheet.absoluteFill })}
+        >
+          <TextClassContext.Provider value="text-popover-foreground">
+            <NativeOnlyAnimatedView
+              entering={FadeIn}
+              exiting={FadeOut}
+              className="z-50"
+            >
+              <SelectPrimitive.Content
+                ref={ref}
+                position={position}
+                className={cn(
+                  "z-50 min-w-[8rem] rounded-lg",
+                  Platform.select({
+                    native: "p-1",
+                    web: "max-h-52 overflow-hidden",
+                  }),
+                  className,
+                )}
+                {...props}
+              >
+                <LiquidGlass
+                  pointerEvents="none"
+                  elevated={false}
+                  className="absolute inset-0 rounded-lg"
+                />
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                  className={cn("p-1", position === "popper" && "w-full")}
+                >
+                  {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+              </SelectPrimitive.Content>
+            </NativeOnlyAnimatedView>
+          </TextClassContext.Provider>
+        </SelectPrimitive.Overlay>
+      </FullWindowOverlay>
+    </SelectPrimitive.Portal>
+  );
+});
+
+type SelectLabelProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Label
+> & {
+  className?: string;
+};
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  SelectLabelProps
+>(({ className, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={cn("px-2 py-2 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+
+type SelectItemProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Item
+> & {
+  className?: string;
+};
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  SelectItemProps
+>(({ className, disabled, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      disabled={disabled}
+      className={cn(
+        "relative flex-row items-center gap-2 rounded-sm py-3 pl-2 pr-8 active:opacity-70",
+        disabled && "opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute right-2 size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check size={16} color="#737373" />
+        </SelectPrimitive.ItemIndicator>
+      </View>
+      <SelectPrimitive.ItemText className="select-none text-sm font-instrument-sans-medium text-foreground" />
+    </SelectPrimitive.Item>
+  );
+});
+
+type SelectSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Separator
+> & {
+  className?: string;
+};
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  SelectSeparatorProps
+>(({ className, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+});
+
+function SelectScrollUpButton(
+  props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>,
+) {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className="items-center justify-center py-1"
+      {...props}
+    >
+      <ChevronUpIcon size={16} color="#737373" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton(
+  props: React.ComponentPropsWithoutRef<
+    typeof SelectPrimitive.ScrollDownButton
+  >,
+) {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className="items-center justify-center py-1"
+      {...props}
+    >
+      <ChevronDownIcon size={16} color="#737373" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+function NativeSelectScrollView({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ScrollView> & { className?: string }) {
+  if (Platform.OS === "web") {
+    return <>{props.children}</>;
+  }
+
+  return <ScrollView className={cn("max-h-52", className)} {...props} />;
+}
+
+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,
+  type Option,
+};

package/src/primitives/switch.tsx

@@ -0,0 +1,77 @@
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import * as React from "react";
+import { Platform } from "react-native";
+import { cn } from "../cn";
+
+type SwitchProps = React.ComponentPropsWithoutRef<
+  typeof SwitchPrimitives.Root
+> & {
+  className?: string;
+  thumbClassName?: string;
+  onColor?: string;
+  offColor?: string;
+};
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(
+  (
+    {
+      className,
+      thumbClassName,
+      onColor,
+      offColor,
+      checked,
+      style,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const isChecked = Boolean(checked);
+    const trackColor =
+      Platform.OS !== "web" && (onColor || offColor)
+        ? { backgroundColor: isChecked ? onColor : offColor }
+        : null;
+    const resolvedStyle =
+      Platform.OS === "web" || typeof style === "function"
+        ? undefined
+        : trackColor
+          ? [trackColor, style]
+          : style;
+
+    return (
+      <SwitchPrimitives.Root
+        ref={ref}
+        checked={checked}
+        disabled={disabled}
+        style={resolvedStyle}
+        className={cn(
+          "h-[1.15rem] w-8 shrink-0 rounded-full border border-transparent",
+          Platform.select({
+            web: "outline-none transition-all",
+          }),
+          isChecked ? "bg-primary" : "bg-input dark:bg-input/80",
+          disabled && "opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "h-4 w-4 rounded-full bg-background transition-transform",
+            isChecked
+              ? "translate-x-3.5 dark:bg-primary-foreground"
+              : "translate-x-0 dark:bg-foreground",
+            thumbClassName,
+          )}
+        />
+      </SwitchPrimitives.Root>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/primitives/text.tsx

@@ -0,0 +1,95 @@
+import * as Slot from "@rn-primitives/slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Platform, Text as RNText, type Role } from "react-native";
+import { cn } from "../cn";
+
+const textVariants = cva(
+  cn(
+    "text-foreground text-base",
+    Platform.select({
+      web: "select-text",
+    }),
+  ),
+  {
+    variants: {
+      variant: {
+        default: "",
+        h1: cn(
+          "text-4xl font-extrabold tracking-tight",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        h2: cn(
+          "text-3xl font-semibold tracking-tight border-border border-b pb-2",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        h3: cn(
+          "text-2xl font-semibold tracking-tight",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        h4: cn(
+          "text-xl font-semibold tracking-tight",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        p: "leading-7",
+        blockquote: "border-l-2 border-border pl-4 italic",
+        code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold",
+        lead: "text-xl text-muted-foreground",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium",
+        muted: "text-sm text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type TextVariantProps = VariantProps<typeof textVariants>;
+type TextVariant = NonNullable<TextVariantProps["variant"]>;
+
+const ROLE: Partial<Record<TextVariant, Role>> = {
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  blockquote: Platform.select({ web: "blockquote" as Role }),
+  code: Platform.select({ web: "code" as Role }),
+};
+
+const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
+  h1: "1",
+  h2: "2",
+  h3: "3",
+  h4: "4",
+};
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
+  TextVariantProps & {
+    asChild?: boolean;
+    className?: string;
+  };
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
+  ({ className, asChild = false, variant = "default", ...props }, ref) => {
+    const textClass = React.useContext(TextClassContext);
+    const Component = asChild ? Slot.Text : RNText;
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(textVariants({ variant }), textClass, className)}
+        role={variant ? ROLE[variant] : undefined}
+        aria-level={variant ? ARIA_LEVEL[variant] : undefined}
+        {...props}
+      />
+    );
+  },
+);
+
+Text.displayName = "Text";
+
+export { Text, TextClassContext };

package/src/settings/SettingsField.tsx

@@ -0,0 +1,33 @@
+import { View, Text } from "react-native";
+
+export function SettingsField({
+  label,
+  description,
+  children,
+}: {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <View>
+      {typeof label === "string" ? (
+        <Text className="mb-2 text-base font-instrument-sans-semibold text-foreground">
+          {label}
+        </Text>
+      ) : (
+        label
+      )}
+      {children}
+      {description != null ? (
+        typeof description === "string" ? (
+          <Text className="mt-1.5 text-sm font-instrument-sans text-muted-foreground">
+            {description}
+          </Text>
+        ) : (
+          description
+        )
+      ) : null}
+    </View>
+  );
+}

package/src/settings/SettingsSection.tsx

@@ -0,0 +1,75 @@
+import { View, Text } from "react-native";
+import { cn } from "../cn";
+import { FloatingSurface } from "../FloatingSurface";
+
+type SettingsSectionBodyVariant = "form" | "list" | "compact";
+
+export function SettingsSection({
+  title,
+  description,
+  action,
+  footer,
+  children,
+  bodyVariant = "form",
+  className,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  bodyVariant?: SettingsSectionBodyVariant;
+  className?: string;
+}) {
+  const hasBody = children != null;
+  const hasCard = hasBody || footer != null;
+
+  return (
+    <View className={cn("flex-col gap-2", className)}>
+      <View className="flex-row items-start justify-between gap-4 px-4">
+        <View className="min-w-0 flex-1">
+          {typeof title === "string" ? (
+            <Text className="text-lg font-instrument-sans-bold text-foreground">
+              {title}
+            </Text>
+          ) : (
+            title
+          )}
+          {description != null ? (
+            typeof description === "string" ? (
+              <Text className="mt-0.5 text-base font-instrument-sans text-muted-foreground">
+                {description}
+              </Text>
+            ) : (
+              description
+            )
+          ) : null}
+        </View>
+        {action != null ? <View className="shrink-0">{action}</View> : null}
+      </View>
+
+      {hasCard ? (
+        <FloatingSurface>
+          {hasBody ? (
+            <View
+              className={
+                bodyVariant === "list"
+                  ? "flex-col"
+                  : bodyVariant === "compact"
+                    ? "px-4 py-3"
+                    : "px-4 py-5"
+              }
+            >
+              {children}
+            </View>
+          ) : null}
+          {footer != null ? (
+            <View className="flex-row items-center justify-end gap-2 bg-background px-4 py-3">
+              {footer}
+            </View>
+          ) : null}
+        </FloatingSurface>
+      ) : null}
+    </View>
+  );
+}

package/src/settings/SettingsStack.tsx

@@ -0,0 +1,5 @@
+import { View } from "react-native";
+
+export function SettingsStack({ children }: { children: React.ReactNode }) {
+  return <View className="flex-col gap-8 px-4 pt-2 pb-8">{children}</View>;
+}

package/src/settings/SettingsToggleRow.tsx

@@ -0,0 +1,58 @@
+import { View, Text } from "react-native";
+import { cn } from "../cn";
+import { useLargerText } from "../theme";
+
+export function SettingsToggleRow({
+  title,
+  description,
+  action,
+  className,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action: React.ReactNode;
+  className?: string;
+}) {
+  const largerText = useLargerText();
+  return (
+    <View
+      className={cn(
+        "flex-row items-center justify-between gap-4 px-4 py-3",
+        largerText ? "min-h-[72px]" : "min-h-16",
+        className,
+      )}
+    >
+      <View className="min-w-0 flex-1">
+        {typeof title === "string" ? (
+          <Text
+            className={cn(
+              "font-instrument-sans-semibold text-foreground",
+              largerText ? "text-xl" : "text-lg",
+            )}
+          >
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+        {description != null ? (
+          typeof description === "string" ? (
+            <Text
+              className={cn(
+                "mt-1 font-instrument-sans text-muted-foreground",
+                largerText ? "text-lg" : "text-base",
+              )}
+            >
+              {description}
+            </Text>
+          ) : (
+            description
+          )
+        ) : null}
+      </View>
+      <View className={cn("shrink-0 items-center justify-center", "min-h-12")}>
+        {action}
+      </View>
+    </View>
+  );
+}

package/src/theme.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { tokens } from "@vvedantb/tokens/native";
+
+export const DEFAULT_ACCENT = "#db2777";
+
+export type NativeUiTheme = {
+  largerText: boolean;
+  accentColor: string;
+};
+
+const NativeUiContext = createContext<NativeUiTheme>({
+  largerText: false,
+  accentColor: DEFAULT_ACCENT,
+});
+
+export function NativeUiProvider({
+  largerText = false,
+  accentColor = DEFAULT_ACCENT,
+  children,
+}: {
+  largerText?: boolean;
+  accentColor?: string;
+  children: ReactNode;
+}) {
+  return (
+    <NativeUiContext.Provider value={{ largerText, accentColor }}>
+      {children}
+    </NativeUiContext.Provider>
+  );
+}
+
+export function useNativeUi() {
+  return useContext(NativeUiContext);
+}
+
+export function useLargerText() {
+  return useContext(NativeUiContext).largerText;
+}
+
+export function useAccentColor() {
+  return useContext(NativeUiContext).accentColor;
+}
+
+export { tokens };

package/src/useReduceTransparency.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo, Platform } from "react-native";
+
+export function useReduceTransparency() {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    if (
+      Platform.OS !== "ios" ||
+      typeof AccessibilityInfo.isReduceTransparencyEnabled !== "function"
+    ) {
+      return;
+    }
+
+    void AccessibilityInfo.isReduceTransparencyEnabled().then(setEnabled);
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceTransparencyChanged",
+      setEnabled,
+    );
+    return () => subscription.remove();
+  }, []);
+
+  return enabled;
+}