@vvedantb/native-ui 0.0.0-stage → 0.2.0

package/src/Skeleton.tsx

@@ -0,0 +1,37 @@
+import { View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { useEffect } from "react";
+import { cn } from "./cn";
+
+export function Skeleton({ className }: { className?: string }) {
+  const opacity = useSharedValue(0.4);
+
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
+  }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className={cn("bg-neutral-200 dark:bg-neutral-700 rounded-lg", className)}
+    />
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <View className="rounded-lg bg-surface p-5 gap-3">
+      <Skeleton className="h-4 w-32" />
+      <Skeleton className="h-16 w-full" />
+    </View>
+  );
+}

package/src/Switch.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Switch as PrimitiveSwitch } from "./primitives/switch";
+import { cn } from "./cn";
+
+type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<typeof PrimitiveSwitch>,
+  "checked" | "onCheckedChange"
+> & {
+  value?: boolean;
+  checked?: boolean;
+  onValueChange?: (value: boolean) => void;
+  onCheckedChange?: (value: boolean) => void;
+};
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof PrimitiveSwitch>,
+  SwitchProps
+>(({ value, checked, onValueChange, onCheckedChange, ...props }, ref) => {
+  const resolvedValue = checked ?? value ?? false;
+
+  const handleCheckedChange = (nextValue: boolean) => {
+    onCheckedChange?.(nextValue);
+    onValueChange?.(nextValue);
+  };
+
+  return (
+    <PrimitiveSwitch
+      ref={ref}
+      checked={resolvedValue}
+      onCheckedChange={handleCheckedChange}
+      hitSlop={12}
+      className="h-8 w-14"
+      thumbClassName={cn(
+        "h-7 w-7",
+        resolvedValue ? "translate-x-6" : "translate-x-0",
+      )}
+      {...props}
+    />
+  );
+});
+
+Switch.displayName = "Switch";
+
+export { Switch };
+export type { SwitchProps };

package/src/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/colors.ts

@@ -0,0 +1,17 @@
+import { tokens } from "./tokens";
+
+export const NEUTRAL_100 = "#f5f5f5";
+export const NEUTRAL_500 = tokens.color.muted.light;
+export const NEUTRAL_900 = "#171717";
+export const PINK_50 = "#fdf2f8";
+export const PINK_100 = "#fce7f3";
+export const PINK_600 = "#db2777";
+export const PINK_700 = "#be185d";
+
+export const Colors = {
+  white: tokens.color.white,
+  black: tokens.color.black,
+  neutral: {
+    800: "#262626",
+  },
+} as const;

package/src/floating.ts

@@ -0,0 +1,40 @@
+import { Platform, type ViewStyle } from "react-native";
+import { tokens } from "./tokens";
+
+export const FLOATING_INSET = tokens.spacing.unit;
+export const FLOATING_TAB_BAR_HEIGHT = 64;
+export const FLOATING_TAB_BAR_HEIGHT_LARGE = 72;
+export const FLOATING_RADIUS = tokens.radius.card;
+export const FLOATING_ROW_RADIUS = tokens.radius.field;
+export const FLOATING_PILL_RADIUS = tokens.radius.pill;
+
+const FLOATING_BOX_SHADOW = "0px 8px 24px rgba(10, 10, 10, 0.12)";
+
+export const floatingShadow: ViewStyle =
+  Platform.select({
+    ios: {
+      shadowColor: "#0a0a0a",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 20,
+    },
+    default: {
+      boxShadow: FLOATING_BOX_SHADOW,
+    },
+  }) ?? {};
+
+export const floatingHairline = tokens.color.hairline;
+
+export const floatingFill = tokens.color.fill;
+
+export const floatingSolidFill = {
+  light: tokens.color.surface.light,
+  dark: tokens.color.surface.dark,
+} as const;
+
+export function tabBarReserve(largerText: boolean, bottomInset: number) {
+  const bar = largerText
+    ? FLOATING_TAB_BAR_HEIGHT_LARGE
+    : FLOATING_TAB_BAR_HEIGHT;
+  return bar + FLOATING_INSET + Math.max(bottomInset, 8) + 28;
+}

package/src/haptics.ts

@@ -0,0 +1,9 @@
+import { Platform } from "react-native";
+import * as Haptics from "expo-haptics";
+
+export function selectionHaptic() {
+  if (Platform.OS === "web") {
+    return;
+  }
+  void Haptics.selectionAsync();
+}

package/src/index.ts

@@ -0,0 +1,58 @@
+export { cn } from "./cn";
+export {
+  tokens,
+  NativeUiProvider,
+  useNativeUi,
+  useLargerText,
+  useAccentColor,
+  DEFAULT_ACCENT,
+} from "./theme";
+export type { NativeUiTheme } from "./theme";
+export {
+  FLOATING_INSET,
+  FLOATING_TAB_BAR_HEIGHT,
+  FLOATING_TAB_BAR_HEIGHT_LARGE,
+  FLOATING_RADIUS,
+  FLOATING_ROW_RADIUS,
+  FLOATING_PILL_RADIUS,
+  floatingShadow,
+  floatingHairline,
+  floatingFill,
+  floatingSolidFill,
+  tabBarReserve,
+} from "./floating";
+export { selectionHaptic } from "./haptics";
+export { useReduceTransparency } from "./useReduceTransparency";
+export { FloatingSurface, GlassSheetBackground } from "./FloatingSurface";
+export {
+  LiquidGlass,
+  GlassBlurProvider,
+  GlassBlurTarget,
+} from "./LiquidGlass";
+export { AmbientBackground } from "./AmbientBackground";
+export { FloatingTabBar } from "./FloatingTabBar";
+export { FloatingFAB } from "./FloatingFAB";
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";
+export { Input } from "./Input";
+export type { InputProps } from "./Input";
+export { Select } from "./Select";
+export type { SelectOption, SelectProps } from "./Select";
+export { Switch } from "./Switch";
+export type { SwitchProps } from "./Switch";
+export { Chip } from "./Chip";
+export { PillTabs } from "./PillTabs";
+export { ListRow } from "./ListRow";
+export { HeaderIconButton } from "./HeaderIconButton";
+export { Card } from "./Card";
+export { Skeleton, CardSkeleton } from "./Skeleton";
+export { EmptyState } from "./EmptyState";
+export { DateTimeField } from "./DateTimeField";
+export { BottomSheetContainer } from "./BottomSheetContainer";
+export { SafeAreaContainer } from "./SafeAreaContainer";
+export { ScreenContainer } from "./ScreenContainer";
+export { SettingsSection } from "./settings/SettingsSection";
+export { SettingsField } from "./settings/SettingsField";
+export { SettingsToggleRow } from "./settings/SettingsToggleRow";
+export { SettingsStack } from "./settings/SettingsStack";
+export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "./colors";

package/src/primitives/button.tsx

@@ -0,0 +1,101 @@
+import { TextClassContext } from "./text";
+import { cn } from "../cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Platform, Pressable } from "react-native";
+
+const buttonVariants = cva(
+  cn(
+    "group flex-row items-center justify-center gap-2 rounded-lg shadow-none active:opacity-80",
+    Platform.select({
+      web: "outline-none transition-all",
+    }),
+  ),
+  {
+    variants: {
+      variant: {
+        default: cn(
+          "bg-primary",
+          Platform.select({ web: "hover:bg-primary/90" }),
+        ),
+        destructive: cn(
+          "bg-destructive",
+          Platform.select({ web: "hover:bg-destructive/90" }),
+        ),
+        outline: cn(
+          "border border-border bg-background",
+          Platform.select({ web: "hover:bg-accent" }),
+        ),
+        secondary: cn(
+          "bg-secondary",
+          Platform.select({ web: "hover:bg-secondary/80" }),
+        ),
+        ghost: cn(Platform.select({ web: "hover:bg-accent" })),
+        link: "",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 px-3",
+        lg: "h-11 px-6",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonTextVariants = cva("text-sm font-medium text-foreground", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-white",
+      outline: "text-accent-foreground",
+      secondary: "text-secondary-foreground",
+      ghost: "text-accent-foreground",
+      link: "text-primary underline",
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: "",
+      icon: "",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants> & {
+    className?: string;
+  };
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
+      <Pressable
+        ref={ref}
+        className={cn(
+          buttonVariants({ variant, size }),
+          props.disabled && "opacity-45",
+          className,
+        )}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/src/primitives/card.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { View } from "react-native";
+import { Text, TextClassContext } from "./text";
+import { cn } from "../cn";
+
+type CardViewProps = React.ComponentPropsWithoutRef<typeof View> & {
+  className?: string;
+};
+
+const Card = React.forwardRef<React.ElementRef<typeof View>, CardViewProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <TextClassContext.Provider value="text-card-foreground">
+        <View
+          ref={ref}
+          className={cn(
+            "flex flex-col gap-6 rounded-lg bg-surface py-6",
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  },
+);
+
+const CardHeader = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CardViewProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  );
+});
+
+const CardTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & { className?: string }
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      aria-level={3}
+      className={cn("font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+});
+
+const CardDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & { className?: string }
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+
+const CardContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CardViewProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={cn("px-6", className)} {...props} />;
+});
+
+const CardFooter = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CardViewProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={cn("flex flex-row items-center px-6", className)}
+      {...props}
+    />
+  );
+});
+
+Card.displayName = "Card";
+CardHeader.displayName = "CardHeader";
+CardTitle.displayName = "CardTitle";
+CardDescription.displayName = "CardDescription";
+CardContent.displayName = "CardContent";
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/primitives/icon.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { LucideIcon, LucideProps } from "lucide-react-native";
+
+type IconProps = LucideProps & {
+  as: LucideIcon;
+  className?: string;
+};
+
+function Icon({ as: Component, className: _className, ...props }: IconProps) {
+  return <Component {...props} />;
+}
+
+export { Icon };
+export type { IconProps };

package/src/primitives/input.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Platform, TextInput } from "react-native";
+import { cn } from "../cn";
+
+type InputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
+  className?: string;
+};
+
+const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          "flex w-full flex-row items-center rounded-lg border-0 bg-secondary px-3 py-2 text-base text-foreground",
+          props.editable === false &&
+            cn(
+              "opacity-50",
+              Platform.select({
+                web: "cursor-not-allowed pointer-events-none",
+              }),
+            ),
+          Platform.select({
+            web: "outline-none transition-[color,box-shadow] md:text-sm",
+            native: "placeholder:text-muted-foreground/50",
+          }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input };

package/src/primitives/native-only-animated-view.tsx

@@ -0,0 +1,33 @@
+import { Platform, View, type ViewProps } from "react-native";
+import Animated, { type AnimatedProps } from "react-native-reanimated";
+
+type NativeOnlyAnimatedViewProps = ViewProps & {
+  entering?: AnimatedProps<ViewProps>["entering"];
+  exiting?: AnimatedProps<ViewProps>["exiting"];
+  layout?: AnimatedProps<ViewProps>["layout"];
+};
+
+function NativeOnlyAnimatedView({
+  children,
+  entering,
+  exiting,
+  layout,
+  ...props
+}: NativeOnlyAnimatedViewProps) {
+  if (Platform.OS === "web") {
+    return <View {...props}>{children}</View>;
+  }
+
+  return (
+    <Animated.View
+      entering={entering}
+      exiting={exiting}
+      layout={layout}
+      {...props}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export { NativeOnlyAnimatedView };