@vvedantb/native-ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vvedantb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,90 @@
-# Temporary Holding Version
+# `@vvedantb/native-ui`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React Native + Expo primitives extracted from a React Native app. Floating pill chrome, Android-safe shadows, forms, list rows, and settings sections.
+
+Web apps should keep using `@vvedantb/ui`. This package is native-only.
+
+## Install
+
+```sh
+npm install @vvedantb/native-ui
+```
+
+Peers the app must already have (Expo SDK 57 / RN 0.76+):
+
+- `react`, `react-native`
+- `nativewind` `>=4`
+- `expo-blur`, `expo-haptics`, `expo-linear-gradient`
+- `react-native-reanimated`, `react-native-safe-area-context`, `react-native-screens`
+- `@rn-primitives/slot`, `@rn-primitives/switch`, `@rn-primitives/select`
+- `@expo/vector-icons`, `@tabler/icons-react-native`, `lucide-react-native`
+- `class-variance-authority`, `clsx`, `tailwind-merge`
+
+Optional, only if you import those components:
+
+- `expo-router` — `FloatingTabBar`
+- `@gorhom/bottom-sheet` — `BottomSheetContainer`
+- `@react-native-community/datetimepicker` and `dayjs` — `DateTimeField`
+
+## Expo / NativeWind
+
+Source-exported. Point Tailwind at the package so class names are generated:
+
+```js
+// tailwind.config.js
+content: [
+  "./app/**/*.{js,ts,tsx}",
+  "./components/**/*.{js,ts,tsx}",
+  "./node_modules/@vvedantb/native-ui/src/**/*.{js,ts,tsx}",
+],
+```
+
+Metro already resolves `node_modules`. In a pnpm monorepo, if a peer resolves to the wrong copy, add:
+
+```js
+const path = require("node:path");
+config.watchFolders = [path.resolve(__dirname, "../..")];
+config.resolver.nodeModulesPaths = [
+  path.resolve(__dirname, "node_modules"),
+  path.resolve(__dirname, "../../node_modules"),
+];
+```
+
+The app must define NativeWind tokens (`bg-surface`, `bg-secondary`, `text-foreground`, pink utilities) and Instrument Sans font classes (`font-instrument-sans-*`). Accent pink stays in the app stylesheet.
+
+## Theme
+
+Wrap the tree (inside your colour-scheme provider):
+
+```tsx
+import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
+
+<NativeUiProvider largerText={false} accentColor="#db2777">
+  <Card title="Today">
+    <Button onPress={() => {}}>Record a dose</Button>
+  </Card>
+</NativeUiProvider>
+```
+
+`useLargerText()` steps type and tap targets up. `accentColor` tints FABs and card icons. Surfaces use the tokens in `src/tokens.ts` for fill, radius (card 24, row 20, pill 999) and spacing (16).
+
+## Floating UI / Android shadows
+
+Do not put `elevation` or NativeWind `shadow-*` on nested or translucent chrome. `floatingShadow` is iOS `shadow*` and Android/web `boxShadow`. `FloatingSurface` paints an opaque fill on Android and clips on an inner view. Blur is iOS-only.
+
+## Tokens
+
+The JS tokens (colours, radii, spacing) live in `src/tokens.ts`. It is a copy of `@vvedantb/ui/tokens/native`, kept inside this package so React Native apps do not install `@vvedantb/ui` (Radix, react-dom and the rest of the web stack) for colour values. A test in `@vvedantb/ui` fails when the two files differ, so change both together.
+
+Apps that already depend on `@vvedantb/ui` can import the same values from `@vvedantb/ui/tokens/native`.
+
+## Publish
+
+There is no CI publish workflow. From a machine with npm access:
+
+```sh
+export NPM_CONFIG_USERCONFIG="$HOME/.npmrc"   # if you keep the token there
+cd packages/native-ui && npm publish --access public
+```
+
+`@vvedantb/native-ui` `0.2.0` has no `@vvedantb/tokens` peer. See `MIGRATION.md` at the repository root.

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "license": "MIT",
+  "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, settings chrome, and tab bar.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vvedantb/ui.git",
+    "directory": "packages/native-ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "@gorhom/bottom-sheet": ">=5",
+    "@react-native-community/datetimepicker": "*",
+    "@rn-primitives/select": "*",
+    "@rn-primitives/slot": "*",
+    "@rn-primitives/switch": "*",
+    "@tabler/icons-react-native": "*",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "dayjs": ">=1.11.0",
+    "expo-blur": "*",
+    "expo-haptics": "*",
+    "expo-linear-gradient": "*",
+    "expo-router": "*",
+    "lucide-react-native": "*",
+    "nativewind": ">=4.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "tailwind-merge": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0",
+    "typescript": "^5.9.0",
+    "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').accessSync('src/index.ts')\"",
+    "test": "vitest run"
+  }
 }

package/src/AmbientBackground.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, View, type ViewProps } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useColorScheme } from "nativewind";
+import { cn } from "./cn";
+
+const LIGHT = ["#f6f6f7", "#fde8f0", "#f4f5f7"] as const;
+const DARK = ["#1c1c1e", "#2a1820", "#1a1a1c"] as const;
+
+export function AmbientBackground({
+  children,
+  className,
+  ...props
+}: ViewProps & { className?: string }) {
+  const { colorScheme } = useColorScheme();
+  const colors = colorScheme === "dark" ? DARK : LIGHT;
+
+  return (
+    <View className={cn("flex-1", className)} {...props}>
+      <LinearGradient
+        pointerEvents="none"
+        colors={[...colors]}
+        start={{ x: 0.05, y: 0 }}
+        end={{ x: 0.95, y: 1 }}
+        style={StyleSheet.absoluteFill}
+      />
+      {children}
+    </View>
+  );
+}

package/src/BottomSheetContainer.tsx

@@ -0,0 +1,92 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { View, Text, TouchableOpacity } from "react-native";
+import { useRef, useEffect, useCallback, JSX } from "react";
+import { useColorScheme } from "nativewind";
+import { Colors } from "./colors";
+import { IconX } from "@tabler/icons-react-native";
+import { BottomSheetDefaultBackdropProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types";
+import { GlassSheetBackground } from "./LiquidGlass";
+import { useLargerText } from "./theme";
+
+export function BottomSheetContainer({
+  visible,
+  onClose,
+  title,
+  children,
+  closeTestID,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  closeTestID?: string;
+}) {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const largerText = useLargerText();
+  const { colorScheme } = useColorScheme();
+
+  useEffect(() => {
+    if (visible) {
+      bottomSheetModalRef.current?.present();
+    } else {
+      bottomSheetModalRef.current?.dismiss();
+    }
+  }, [visible]);
+
+  const renderBackdrop = useCallback(
+    (props: JSX.IntrinsicAttributes & BottomSheetDefaultBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        opacity={0.5}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      backdropComponent={renderBackdrop}
+      onDismiss={onClose}
+      backgroundComponent={GlassSheetBackground}
+      handleIndicatorStyle={{
+        backgroundColor:
+          colorScheme === "dark" ? Colors.white : Colors.neutral[800],
+      }}
+      enableContentPanningGesture={false}
+      enableHandlePanningGesture={true}
+      keyboardBehavior="interactive"
+    >
+      <BottomSheetView className="p-5 pb-12">
+        <View className="mb-4 flex-row items-center justify-between gap-3">
+          <Text
+            className={`${largerText ? "text-2xl" : "text-xl"} flex-1 font-instrument-sans-bold text-foreground`}
+          >
+            {title}
+          </Text>
+          <TouchableOpacity
+            testID={closeTestID}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            onPress={() => bottomSheetModalRef.current?.dismiss()}
+            className="-mr-2 h-12 w-12 items-center justify-center"
+            hitSlop={8}
+            activeOpacity={0.7}
+          >
+            <IconX
+              size={largerText ? 32 : 28}
+              color={colorScheme === "dark" ? "white" : "black"}
+            />
+          </TouchableOpacity>
+        </View>
+        {children}
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+}

package/src/Button.tsx

@@ -0,0 +1,111 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { PINK_600 } from "./colors";
+import { ActivityIndicator, View } from "react-native";
+import { Button as PrimitiveButton } from "./primitives/button";
+import { Text as PrimitiveText } from "./primitives/text";
+import { cn } from "./cn";
+import { floatingShadow } from "./floating";
+import { useLargerText } from "./theme";
+
+interface ButtonProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof PrimitiveButton>,
+  "variant" | "size" | "children" | "onPress"
+> {
+  onPress?: () => void;
+  variant?: "primary" | "secondary" | "outline";
+  icon?: keyof typeof MaterialIcons.glyphMap;
+  leftIcon?: React.ReactNode;
+  loading?: boolean;
+  size?: "small" | "medium" | "large";
+  fullWidth?: boolean;
+  children: React.ReactNode;
+  shadowType?: "flat" | "shadow";
+  className?: string;
+}
+
+const HEIGHT = {
+  regular: { small: "h-12 px-5", medium: "h-14 px-6", large: "h-16 px-6" },
+  larger: { small: "h-14 px-5", medium: "h-16 px-6", large: "h-[72px] px-6" },
+};
+
+const TEXT = {
+  regular: { small: "text-sm", medium: "text-lg", large: "text-xl" },
+  larger: { small: "text-base", medium: "text-xl", large: "text-2xl" },
+};
+
+export type { ButtonProps };
+
+export function Button({
+  onPress,
+  variant = "primary",
+  icon,
+  leftIcon,
+  loading,
+  size = "medium",
+  fullWidth = true,
+  children,
+  shadowType = "shadow",
+  className,
+  ...props
+}: ButtonProps) {
+  const scale = useLargerText() ? "larger" : "regular";
+  const isTinted = variant === "outline" || variant === "secondary";
+  const contentColor = isTinted ? PINK_600 : "#fff";
+  const elevate = shadowType === "shadow" && variant === "primary";
+
+  const variantClassName =
+    variant === "outline"
+      ? "border-0 bg-pink-50 dark:bg-pink-900/20"
+      : variant === "secondary"
+        ? "bg-neutral-100 dark:bg-neutral-800"
+        : "";
+
+  return (
+    <PrimitiveButton
+      onPress={onPress}
+      variant={variant === "primary" ? "default" : "secondary"}
+      hitSlop={size === "small" ? 8 : undefined}
+      className={cn(
+        "relative rounded-full border border-white/40 dark:border-white/10",
+        HEIGHT[scale][size],
+        fullWidth && "w-full",
+        variantClassName,
+        className,
+      )}
+      {...props}
+      disabled={loading || props.disabled}
+      style={elevate ? floatingShadow : props.style}
+    >
+      <View className="flex-row items-center justify-center gap-2">
+        {loading ? (
+          <ActivityIndicator size="small" color={contentColor} />
+        ) : (
+          <>
+            {leftIcon ??
+              (icon ? (
+                <MaterialIcons
+                  name={icon}
+                  size={scale === "larger" ? 26 : 22}
+                  color={contentColor}
+                />
+              ) : null)}
+            {typeof children === "string" || typeof children === "number" ? (
+              <PrimitiveText
+                className={cn(
+                  TEXT[scale][size],
+                  "font-instrument-sans-semibold",
+                  isTinted ? "text-pink-700 dark:text-pink-300" : "text-white",
+                )}
+              >
+                {children}
+              </PrimitiveText>
+            ) : (
+              children
+            )}
+          </>
+        )}
+      </View>
+    </PrimitiveButton>
+  );
+}

package/src/Card.tsx

@@ -0,0 +1,64 @@
+import type { ComponentType, ReactNode } from "react";
+import type { IconProps } from "@tabler/icons-react-native";
+import { View } from "react-native";
+import {
+  Card as PrimitiveCard,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "./primitives/card";
+import { FloatingSurface } from "./FloatingSurface";
+import { cn } from "./cn";
+import { useAccentColor, useLargerText } from "./theme";
+
+export function Card({
+  children,
+  title,
+  action,
+  leftIcon: Icon,
+  testID,
+}: {
+  children: ReactNode;
+  title?: string;
+  action?: ReactNode;
+  leftIcon?: ComponentType<IconProps>;
+  testID?: string;
+}) {
+  const largerText = useLargerText();
+  const accentColor = useAccentColor();
+  const hasHeader = Boolean(title || action);
+  return (
+    <FloatingSurface>
+      <PrimitiveCard
+        testID={testID}
+        className="gap-4 rounded-none border-0 bg-transparent py-4"
+      >
+        {hasHeader && (
+          <CardHeader 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 ? (
+                  <CardTitle
+                    className={cn(
+                      "font-instrument-sans-bold text-foreground",
+                      largerText ? "text-2xl" : "text-xl",
+                    )}
+                  >
+                    {title}
+                  </CardTitle>
+                ) : null}
+              </View>
+              {action}
+            </View>
+          </CardHeader>
+        )}
+        <CardContent className={cn(hasHeader && "pt-0", "px-4")}>
+          {children}
+        </CardContent>
+      </PrimitiveCard>
+    </FloatingSurface>
+  );
+}

package/src/Chip.tsx

@@ -0,0 +1,49 @@
+import { Pressable, Text } from "react-native";
+import { useLargerText } from "./theme";
+
+export function Chip({
+  label,
+  selected,
+  onPress,
+  testID,
+  round = false,
+}: {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  testID?: string;
+  round?: boolean;
+}) {
+  const largerText = useLargerText();
+  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";
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ selected }}
+      onPress={onPress}
+      className={`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"}`}
+    >
+      <Text
+        className={`font-instrument-sans-semibold ${
+          largerText ? "text-xl" : "text-lg"
+        } ${
+          selected
+            ? "text-pink-700 dark:text-pink-300"
+            : "text-muted-foreground"
+        }`}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}

package/src/DateTimeField.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Platform, Pressable, Text, View } from "react-native";
+import DateTimePicker, {
+  type DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import { useLargerText } from "./theme";
+
+type PickerMode = "date" | "time";
+type PickerButton = { mode: PickerMode; label: string };
+
+export function DateTimeField({
+  value,
+  onChange,
+  mode = "datetime",
+  maximumDate,
+  testID,
+}: {
+  value: Date;
+  onChange: (value: Date) => void;
+  mode?: "datetime" | "time";
+  maximumDate?: Date;
+  testID?: string;
+}) {
+  const largerText = useLargerText();
+  const [picker, setPicker] = useState<PickerMode | null>(null);
+
+  const handleChange = (event: DateTimePickerEvent, next?: Date) => {
+    if (Platform.OS === "android") setPicker(null);
+    if (event.type === "set" && next) onChange(next);
+  };
+
+  const timeButton: PickerButton = {
+    mode: "time",
+    label: dayjs(value).format("HH:mm"),
+  };
+  const buttons: PickerButton[] =
+    mode === "datetime"
+      ? [{ mode: "date", label: dayjs(value).format("D MMM YYYY") }, timeButton]
+      : [timeButton];
+
+  return (
+    <View className="gap-2">
+      <View className="flex-row gap-3">
+        {buttons.map((button) => (
+          <Pressable
+            key={button.mode}
+            testID={testID ? `${testID}-${button.mode}` : undefined}
+            accessibilityRole="button"
+            accessibilityLabel={button.label}
+            onPress={() =>
+              setPicker((current) =>
+                current === button.mode ? null : button.mode,
+              )
+            }
+            className={`${largerText ? "h-16" : "h-14"} flex-1 justify-center rounded-lg bg-secondary px-4 active:opacity-70`}
+          >
+            <Text
+              className={`${largerText ? "text-xl" : "text-lg"} font-instrument-sans-semibold text-foreground`}
+            >
+              {button.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      {picker ? (
+        <DateTimePicker
+          value={value}
+          mode={picker}
+          is24Hour
+          maximumDate={picker === "date" ? maximumDate : undefined}
+          display={Platform.OS === "ios" ? "spinner" : "default"}
+          onChange={handleChange}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/EmptyState.tsx

@@ -0,0 +1,51 @@
+import type { ComponentType, ReactNode } from "react";
+import { View, Text } from "react-native";
+import { IconInbox, type IconProps } from "@tabler/icons-react-native";
+import { NEUTRAL_500 } from "./colors";
+import { cn } from "./cn";
+import { useLargerText } from "./theme";
+
+export function EmptyState({
+  title,
+  description,
+  icon: Icon = IconInbox,
+  action,
+  compact = false,
+  testID,
+}: {
+  title: string;
+  description?: string;
+  icon?: ComponentType<IconProps>;
+  action?: ReactNode;
+  compact?: boolean;
+  testID?: string;
+}) {
+  const largerText = useLargerText();
+  return (
+    <View
+      testID={testID}
+      className={`items-center px-4 ${compact ? "py-6" : "py-16"}`}
+    >
+      <Icon size={largerText ? 44 : 40} color={NEUTRAL_500} />
+      <Text
+        className={cn(
+          "mt-4 text-center font-instrument-sans-semibold text-foreground",
+          largerText ? "text-xl" : "text-lg",
+        )}
+      >
+        {title}
+      </Text>
+      {description ? (
+        <Text
+          className={cn(
+            "mt-2 max-w-sm text-center font-instrument-sans text-muted-foreground",
+            largerText ? "text-lg" : "text-base",
+          )}
+        >
+          {description}
+        </Text>
+      ) : null}
+      {action ? <View className="mt-6">{action}</View> : null}
+    </View>
+  );
+}