@vvedantb/native-ui 0.2.0 → 0.3.12

package/src/floating.ts

@@ -5,7 +5,11 @@ 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;
+/**
+ * List rows: 20, the field radius before 0.3.3 (web fields are 10). Toasts
+ * used it until 0.3.12 and the upgrade card until 0.3.8; both are 16 now.
+ */
+export const FLOATING_ROW_RADIUS = 20;
 export const FLOATING_PILL_RADIUS = tokens.radius.pill;
 
 const FLOATING_BOX_SHADOW = "0px 8px 24px rgba(10, 10, 10, 0.12)";

package/src/glassBlur.tsx

@@ -0,0 +1,95 @@
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import { StyleSheet, View, type ViewProps } from "react-native";
+import { loadBlur } from "./blur";
+
+type BlurTargetRef = RefObject<ComponentRef<typeof View> | null>;
+
+type GlassBlurContextValue = {
+  target: BlurTargetRef | null;
+  setTarget: Dispatch<SetStateAction<BlurTargetRef | null>> | null;
+};
+
+const NO_TARGET: GlassBlurContextValue = { target: null, setTarget: null };
+
+const GlassBlurContext = createContext<GlassBlurContextValue>(NO_TARGET);
+
+/**
+ * The mounted `GlassBlurTarget` that floating glass blurs on Android, or
+ * `null` outside a `GlassBlurProvider` and inside the target itself.
+ */
+export function useGlassBlurTarget() {
+  return useContext(GlassBlurContext).target;
+}
+
+export function GlassBlurProvider({ children }: { children: ReactNode }) {
+  const [target, setTarget] = useState<BlurTargetRef | null>(null);
+  const value = useMemo(() => ({ target, setTarget }), [target]);
+
+  return (
+    <GlassBlurContext.Provider value={value}>{children}</GlassBlurContext.Provider>
+  );
+}
+
+export type GlassBlurTargetProps = ViewProps & {
+  /** Set `false` while the content is hidden, such as an unfocused tab. */
+  active?: boolean;
+};
+
+/**
+ * Content that floating glass blurs on Android (an expo-blur
+ * `BlurTargetView`). Render the floating chrome outside it, inside the same
+ * `GlassBlurProvider`: a blur view must not sit inside its own target, so
+ * surfaces in here get no target. The last active target wins.
+ */
+export function GlassBlurTarget({
+  active = true,
+  style,
+  children,
+  ...props
+}: GlassBlurTargetProps) {
+  const { setTarget } = useContext(GlassBlurContext);
+  const ref = useRef<ComponentRef<typeof View>>(null);
+  const BlurTargetView = loadBlur()?.BlurTargetView;
+
+  // Publish the ref only once it is attached: expo-blur compares
+  // `blurTarget.current` between renders to pick up a new target.
+  useLayoutEffect(() => {
+    if (!setTarget || !active) {
+      return;
+    }
+    setTarget(ref);
+    return () => setTarget((current) => (current === ref ? null : current));
+  }, [setTarget, active]);
+
+  const content = (
+    <GlassBlurContext.Provider value={NO_TARGET}>{children}</GlassBlurContext.Provider>
+  );
+
+  return BlurTargetView ? (
+    <BlurTargetView ref={ref} style={[styles.fill, style]} {...props}>
+      {content}
+    </BlurTargetView>
+  ) : (
+    <View ref={ref} style={[styles.fill, style]} {...props}>
+      {content}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/gradient.ts

@@ -0,0 +1,21 @@
+import type * as ExpoLinearGradient from "expo-linear-gradient";
+
+export type ExpoLinearGradientModule = typeof ExpoLinearGradient;
+
+let expoLinearGradient: ExpoLinearGradientModule | null | undefined;
+
+/**
+ * `expo-linear-gradient`, or `null` when the optional peer is not installed.
+ * Metro bundles a `require` placed directly in a `try` block as an optional
+ * dependency, so a missing peer does not break the bundle.
+ */
+export function loadLinearGradient(): ExpoLinearGradientModule | null {
+  if (expoLinearGradient === undefined) {
+    try {
+      expoLinearGradient = require("expo-linear-gradient") as ExpoLinearGradientModule;
+    } catch {
+      expoLinearGradient = null;
+    }
+  }
+  return expoLinearGradient;
+}

package/src/haptics.ts

@@ -1,9 +1,29 @@
 import { Platform } from "react-native";
-import * as Haptics from "expo-haptics";
+import type * as ExpoHaptics from "expo-haptics";
+
+export type ExpoHapticsModule = typeof ExpoHaptics;
+
+let expoHaptics: ExpoHapticsModule | null | undefined;
+
+/**
+ * `expo-haptics`, or `null` when the optional peer is not installed. Metro
+ * bundles a `require` placed directly in a `try` block as an optional
+ * dependency, so a missing peer does not break the bundle.
+ */
+export function loadHaptics(): ExpoHapticsModule | null {
+  if (expoHaptics === undefined) {
+    try {
+      expoHaptics = require("expo-haptics") as ExpoHapticsModule;
+    } catch {
+      expoHaptics = null;
+    }
+  }
+  return expoHaptics;
+}
 
 export function selectionHaptic() {
   if (Platform.OS === "web") {
     return;
   }
-  void Haptics.selectionAsync();
+  void loadHaptics()?.selectionAsync();
 }

package/src/index.ts

@@ -8,6 +8,9 @@ export {
   DEFAULT_ACCENT,
 } from "./theme";
 export type { NativeUiTheme } from "./theme";
+export { palette, withAlpha } from "./palette";
+export type { Palette } from "./palette";
+export { fontClass } from "./typography";
 export {
   FLOATING_INSET,
   FLOATING_TAB_BAR_HEIGHT,
@@ -29,24 +32,107 @@ export {
   GlassBlurProvider,
   GlassBlurTarget,
 } from "./LiquidGlass";
+export type { GlassBlurTargetProps } from "./LiquidGlass";
 export { AmbientBackground } from "./AmbientBackground";
 export { FloatingTabBar } from "./FloatingTabBar";
+export type { FloatingTabBarProps } from "./FloatingTabBar";
 export { FloatingFAB } from "./FloatingFAB";
 export { Button } from "./Button";
-export type { ButtonProps } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 export { Input } from "./Input";
 export type { InputProps } from "./Input";
+export { SearchInput } from "./SearchInput";
+export type { SearchInputProps } from "./SearchInput";
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";
+export { Label } from "./Label";
+export type { LabelProps } from "./Label";
 export { Select } from "./Select";
 export type { SelectOption, SelectProps } from "./Select";
 export { Switch } from "./Switch";
 export type { SwitchProps } from "./Switch";
+export { LabeledSwitchRow } from "./LabeledSwitchRow";
+export type { LabeledSwitchRowProps } from "./LabeledSwitchRow";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeVariant } from "./Badge";
+export { StatusDot } from "./StatusDot";
+export type { StatusDotProps, StatusTone } from "./StatusDot";
+export { Separator } from "./Separator";
+export type { SeparatorProps } from "./Separator";
+export { Progress } from "./Progress";
+export type { ProgressProps } from "./Progress";
+export { Spinner, CenteredSpinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";
+export { Avatar, AvatarImage, AvatarFallback } from "./Avatar";
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./Avatar";
+export { initials } from "./initials";
 export { Chip } from "./Chip";
 export { PillTabs } from "./PillTabs";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsListVariant,
+  TabsTriggerProps,
+  TabsContentProps,
+} from "./Tabs";
 export { ListRow } from "./ListRow";
 export { HeaderIconButton } from "./HeaderIconButton";
-export { Card } from "./Card";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "./Card";
 export { Skeleton, CardSkeleton } from "./Skeleton";
 export { EmptyState } from "./EmptyState";
+export type { EmptyStateVariant } from "./EmptyState";
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+} from "./Dialog";
+export type { DialogProps, DialogContentProps } from "./Dialog";
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./AlertDialog";
+export type { AlertDialogProps, AlertDialogContentProps } from "./AlertDialog";
+export { ConfirmDialog } from "./ConfirmDialog";
+export type { ConfirmDialogProps } from "./ConfirmDialog";
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHandle,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetFooter,
+} from "./Sheet";
+export type { SheetProps, SheetContentProps } from "./Sheet";
+export { Toaster } from "./Toast";
+export { toast } from "./toastStore";
+export type { ToastOptions, ToastVariant } from "./toastStore";
 export { DateTimeField } from "./DateTimeField";
 export { BottomSheetContainer } from "./BottomSheetContainer";
 export { SafeAreaContainer } from "./SafeAreaContainer";
@@ -56,3 +142,14 @@ 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";
+// Family app marks and their pure data (copied from `@vvedantb/ui/brand`).
+export * from "./brand";
+export { UpgradeToProCard } from "./marketing/UpgradeToProCard";
+export type { UpgradeToProCardProps } from "./marketing/UpgradeToProCard";
+export { PricingModal } from "./marketing/PricingModal";
+export type { PricingModalProps } from "./marketing/PricingModal";
+export type {
+  PricingModalPeriod,
+  PricingPlan,
+  PricingPlanBenefit,
+} from "./marketing/pricing";

package/src/initials.ts

@@ -0,0 +1,10 @@
+/** Up to `max` uppercase initials from a name: "Ada Lovelace" → "AL", "  cher " → "C". Empty for a blank name. */
+export function initials(name: string, max = 2): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, max)
+    .map((word) => Array.from(word)[0]!.toUpperCase())
+    .join("");
+}