From 98b7ee3dbe8057a1c3b069c6f75c943c418a18e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adel=20Rodr=C3=ADguez?= <hello@adelrodriguez.com>
Date: Sat, 14 Feb 2026 11:05:01 -0400
Subject: [PATCH] feat: add all rn-primitives components to native-ui package

---
 apps/mobile/src/app/index.tsx                 | 810 ++++++++++++++++--
 .../mobile/src/shared/components/ui/alert.tsx |  98 ---
 .../src/shared/components/ui/avatar.tsx       |  47 -
 .../src/shared/components/ui/toggle.tsx       |  24 -
 bun.lock                                      | 219 ++++-
 packages/native-ui/package.json               |  45 +-
 .../native-ui/src/components/accordion.tsx    | 144 ++++
 .../native-ui/src/components/alert-dialog.tsx | 155 ++++
 packages/native-ui/src/components/alert.tsx   |  77 ++
 .../native-ui/src/components/aspect-ratio.tsx |   3 +
 packages/native-ui/src/components/avatar.tsx  |  38 +
 packages/native-ui/src/components/badge.tsx   |  68 ++
 packages/native-ui/src/components/button.tsx  |   8 +-
 packages/native-ui/src/components/card.tsx    |  45 +
 .../native-ui/src/components/checkbox.tsx     |  49 ++
 .../native-ui/src/components/collapsible.tsx  |   7 +
 .../native-ui/src/components/context-menu.tsx | 303 +++++++
 packages/native-ui/src/components/dialog.tsx  | 144 ++++
 .../src/components/dropdown-menu.tsx          | 311 +++++++
 .../native-ui/src/components/hover-card.tsx   |  52 ++
 packages/native-ui/src/components/icon.tsx    |  30 +-
 packages/native-ui/src/components/input.tsx   |  34 +
 packages/native-ui/src/components/label.tsx   |  41 +
 .../src/components/large-title-header.tsx     |   5 -
 .../components/large-title-header/index.ts    |   2 -
 .../large-title-header.ios.tsx                | 133 ---
 .../large-title-header/large-title-header.tsx | 219 -----
 .../components/large-title-header/types.ts    | 101 ---
 packages/native-ui/src/components/menubar.tsx | 377 ++++++++
 .../components/native-only-animated-view.tsx  |  22 +
 packages/native-ui/src/components/popover.tsx |  56 ++
 .../native-ui/src/components/progress.tsx     |  85 ++
 .../native-ui/src/components/radio-group.tsx  |  33 +
 packages/native-ui/src/components/select.tsx  | 254 ++++++
 .../native-ui/src/components/separator.tsx    |  24 +
 .../native-ui/src/components/skeleton.tsx     |  38 +
 packages/native-ui/src/components/switch.tsx  |  37 +
 packages/native-ui/src/components/tabs.tsx    |  69 ++
 packages/native-ui/src/components/text.tsx    |  19 +-
 .../native-ui/src/components/textarea.tsx     |  42 +
 .../native-ui/src/components/toggle-group.tsx | 105 +++
 packages/native-ui/src/components/toggle.tsx  |  76 ++
 packages/native-ui/src/components/tooltip.tsx |  65 ++
 43 files changed, 3804 insertions(+), 710 deletions(-)
 delete mode 100644 apps/mobile/src/shared/components/ui/alert.tsx
 delete mode 100644 apps/mobile/src/shared/components/ui/avatar.tsx
 delete mode 100644 apps/mobile/src/shared/components/ui/toggle.tsx
 create mode 100644 packages/native-ui/src/components/accordion.tsx
 create mode 100644 packages/native-ui/src/components/alert-dialog.tsx
 create mode 100644 packages/native-ui/src/components/alert.tsx
 create mode 100644 packages/native-ui/src/components/aspect-ratio.tsx
 create mode 100644 packages/native-ui/src/components/avatar.tsx
 create mode 100644 packages/native-ui/src/components/badge.tsx
 create mode 100644 packages/native-ui/src/components/card.tsx
 create mode 100644 packages/native-ui/src/components/checkbox.tsx
 create mode 100644 packages/native-ui/src/components/collapsible.tsx
 create mode 100644 packages/native-ui/src/components/context-menu.tsx
 create mode 100644 packages/native-ui/src/components/dialog.tsx
 create mode 100644 packages/native-ui/src/components/dropdown-menu.tsx
 create mode 100644 packages/native-ui/src/components/hover-card.tsx
 create mode 100644 packages/native-ui/src/components/input.tsx
 create mode 100644 packages/native-ui/src/components/label.tsx
 delete mode 100644 packages/native-ui/src/components/large-title-header.tsx
 delete mode 100644 packages/native-ui/src/components/large-title-header/index.ts
 delete mode 100644 packages/native-ui/src/components/large-title-header/large-title-header.ios.tsx
 delete mode 100644 packages/native-ui/src/components/large-title-header/large-title-header.tsx
 delete mode 100644 packages/native-ui/src/components/large-title-header/types.ts
 create mode 100644 packages/native-ui/src/components/menubar.tsx
 create mode 100644 packages/native-ui/src/components/native-only-animated-view.tsx
 create mode 100644 packages/native-ui/src/components/popover.tsx
 create mode 100644 packages/native-ui/src/components/progress.tsx
 create mode 100644 packages/native-ui/src/components/radio-group.tsx
 create mode 100644 packages/native-ui/src/components/select.tsx
 create mode 100644 packages/native-ui/src/components/separator.tsx
 create mode 100644 packages/native-ui/src/components/skeleton.tsx
 create mode 100644 packages/native-ui/src/components/switch.tsx
 create mode 100644 packages/native-ui/src/components/tabs.tsx
 create mode 100644 packages/native-ui/src/components/textarea.tsx
 create mode 100644 packages/native-ui/src/components/toggle-group.tsx
 create mode 100644 packages/native-ui/src/components/toggle.tsx
 create mode 100644 packages/native-ui/src/components/tooltip.tsx

diff --git a/apps/mobile/src/app/index.tsx b/apps/mobile/src/app/index.tsx
index 83a6d7ea..608831af 100644
--- a/apps/mobile/src/app/index.tsx
+++ b/apps/mobile/src/app/index.tsx
@@ -1,65 +1,307 @@
 import Feather from "@expo/vector-icons/Feather"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@init/native-ui/components/accordion"
 import { ActivityIndicator } from "@init/native-ui/components/activity-indicator"
+import { Alert, AlertDescription, AlertTitle } from "@init/native-ui/components/alert"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@init/native-ui/components/alert-dialog"
+import { AspectRatio } from "@init/native-ui/components/aspect-ratio"
+import { Avatar, AvatarFallback, AvatarImage } from "@init/native-ui/components/avatar"
+import { Badge } from "@init/native-ui/components/badge"
 import { Button } from "@init/native-ui/components/button"
-import { Icon } from "@init/native-ui/components/icon"
 import {
-  LargeTitleHeader,
-  type LargeTitleSearchBarRef,
-} from "@init/native-ui/components/large-title-header"
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@init/native-ui/components/card"
+import { Checkbox } from "@init/native-ui/components/checkbox"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@init/native-ui/components/collapsible"
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@init/native-ui/components/context-menu"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@init/native-ui/components/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@init/native-ui/components/dropdown-menu"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@init/native-ui/components/hover-card"
+import { CheckIcon, Icon, XIcon } from "@init/native-ui/components/icon"
+import { Input } from "@init/native-ui/components/input"
+import { Label } from "@init/native-ui/components/label"
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@init/native-ui/components/menubar"
+import { Popover, PopoverContent, PopoverTrigger } from "@init/native-ui/components/popover"
+import { Progress } from "@init/native-ui/components/progress"
+import { RadioGroup, RadioGroupItem } from "@init/native-ui/components/radio-group"
+import {
+  NativeSelectScrollView,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type Option,
+} from "@init/native-ui/components/select"
+import { Separator } from "@init/native-ui/components/separator"
+import { Skeleton } from "@init/native-ui/components/skeleton"
+import { Switch } from "@init/native-ui/components/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@init/native-ui/components/tabs"
 import { Text } from "@init/native-ui/components/text"
-import { useRef, useState } from "react"
-import { View } from "react-native"
-import { useCSSVariable } from "uniwind"
+import { Textarea } from "@init/native-ui/components/textarea"
+import { Toggle, ToggleIcon } from "@init/native-ui/components/toggle"
+import {
+  ToggleGroup,
+  ToggleGroupIcon,
+  ToggleGroupItem,
+} from "@init/native-ui/components/toggle-group"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@init/native-ui/components/tooltip"
+import { Stack } from "expo-router"
+import { useState, type ReactNode } from "react"
+import { ScrollView, View } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import env from "#shared/env.ts"
 
+type ShowcaseSectionProps = {
+  children: ReactNode
+  description?: string
+  query: string
+  searchTerms?: string[]
+  title: string
+}
+
+function ShowcaseSection({
+  children,
+  description,
+  query,
+  searchTerms,
+  title,
+}: ShowcaseSectionProps) {
+  const normalizedQuery = query.trim().toLowerCase()
+  const normalizedTerms = [title, ...(searchTerms ?? [])].join(" ").toLowerCase()
+
+  if (normalizedQuery.length > 0 && !normalizedTerms.includes(normalizedQuery)) {
+    return null
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent className="gap-3">{children}</CardContent>
+    </Card>
+  )
+}
+
 export default function Screen() {
-  const backgroundValue = useCSSVariable("--color-background")
-  const background = typeof backgroundValue === "string" ? backgroundValue : undefined
-  const [isLoading, setIsLoading] = useState(false)
-  const [isSearchFocused, setIsSearchFocused] = useState(false)
   const [searchQuery, setSearchQuery] = useState("")
-  const searchBarRef = useRef<LargeTitleSearchBarRef>(null)
-  const isSearching = isSearchFocused || searchQuery.length > 0
+  const [isLoading, setIsLoading] = useState(false)
+  const [isChecked, setIsChecked] = useState(true)
+  const [isSwitchEnabled, setIsSwitchEnabled] = useState(false)
+  const [isCollapsedOpen, setIsCollapsedOpen] = useState(false)
+  const [progressValue, setProgressValue] = useState(42)
+  const [radioValue, setRadioValue] = useState("starter")
+  const [tabValue, setTabValue] = useState("preview")
+  const [togglePressed, setTogglePressed] = useState(false)
+  const [toggleGroupValue, setToggleGroupValue] = useState<string | undefined>("bold")
+  const [selectValue, setSelectValue] = useState<Option>({
+    label: "Starter",
+    value: "starter",
+  })
 
-  return (
-    <>
-      <LargeTitleHeader
-        backgroundColor={background}
-        searchBar={{
-          onBlur: () => {
-            setIsSearchFocused(false)
-          },
-          onCancelButtonPress: () => {
-            setIsSearchFocused(false)
-            setSearchQuery("")
-          },
-          onChangeText: (text) => {
-            setSearchQuery(text)
-          },
-          onFocus: () => {
-            setIsSearchFocused(true)
-          },
-          ref: searchBarRef,
-        }}
-        title="Home"
-      />
-      {isSearching ? null : (
-        <View className="flex-1 items-center justify-center gap-8 bg-background">
-          <View className="items-center justify-center gap-2">
-            <Text className="text-base leading-6 font-semibold text-primary">
-              Edit app/index.tsx to edit this screen.
-            </Text>
-            <Text className="text-base leading-6 text-primary">
-              API at {env.EXPO_PUBLIC_API_URL}
-            </Text>
-          </View>
-          <View className="items-center justify-center gap-4">
-            <View>{isLoading ? <ActivityIndicator /> : null}</View>
+  const [dropdownChecked, setDropdownChecked] = useState(true)
+  const [dropdownRadioValue, setDropdownRadioValue] = useState("balanced")
+
+  const [contextChecked, setContextChecked] = useState(false)
+  const [contextRadioValue, setContextRadioValue] = useState("compact")
+
+  const [menubarChecked, setMenubarChecked] = useState(true)
+  const [menubarRadioValue, setMenubarRadioValue] = useState("left")
+
+  const normalizedQuery = searchQuery.trim().toLowerCase()
+
+  const searchIndex = [
+    "status activity indicator",
+    "text typography",
+    "alert",
+    "avatar badge",
+    "button",
+    "input label textarea form",
+    "checkbox switch radio group",
+    "toggle toggle group",
+    "progress",
+    "skeleton",
+    "separator",
+    "aspect ratio",
+    "card",
+    "accordion",
+    "collapsible",
+    "tabs",
+    "select",
+    "dropdown menu",
+    "context menu",
+    "menubar",
+    "popover hover card tooltip",
+    "dialog",
+    "alert dialog",
+  ]
+
+  const hasSearchMatches =
+    normalizedQuery.length === 0 || searchIndex.some((entry) => entry.includes(normalizedQuery))
+
+  function decreaseProgress() {
+    setProgressValue((value) => Math.max(0, value - 10))
+  }
+
+  function increaseProgress() {
+    setProgressValue((value) => Math.min(100, value + 10))
+  }
+
+  function clearSearch() {
+    setSearchQuery("")
+  }
+
+  function renderShowcaseSections() {
+    return (
+      <>
+        <ShowcaseSection
+          query={searchQuery}
+          title="Status"
+          description={`API: ${env.EXPO_PUBLIC_API_URL}`}
+          searchTerms={["activity indicator"]}
+        >
+          <View className="flex-row items-center gap-3">
             <Button
               onPress={() => {
-                setIsLoading(!isLoading)
+                setIsLoading((value) => !value)
               }}
             >
+              <Text>{isLoading ? "Stop" : "Start"}</Text>
+            </Button>
+            {isLoading ? <ActivityIndicator /> : <Text>Idle</Text>}
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Text" searchTerms={["typography"]}>
+          <Text variant="h4">Typography Samples</Text>
+          <Text variant="p">This screen is a live playground for every native UI primitive.</Text>
+          <Text variant="muted">Use these examples as the source for mobile screens.</Text>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Alert">
+          <Alert icon={CheckIcon}>
+            <AlertTitle>Saved</AlertTitle>
+            <AlertDescription>Preferences were updated successfully.</AlertDescription>
+          </Alert>
+          <Alert icon={XIcon} variant="destructive">
+            <AlertTitle>Action failed</AlertTitle>
+            <AlertDescription>We could not complete that request. Try again.</AlertDescription>
+          </Alert>
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Avatar and Badge"
+          searchTerms={["avatar", "badge"]}
+        >
+          <View className="flex-row items-center gap-3">
+            <Avatar alt="Adel Rodriguez" className="size-12">
+              <AvatarImage source={{ uri: "https://i.pravatar.cc/120?img=8" }} />
+              <AvatarFallback>
+                <Text>AR</Text>
+              </AvatarFallback>
+            </Avatar>
+            <View className="gap-2">
+              <Badge>
+                <Text>Default</Text>
+              </Badge>
+              <Badge variant="secondary">
+                <Text>Secondary</Text>
+              </Badge>
+              <Badge variant="destructive">
+                <Text>Error</Text>
+              </Badge>
+              <Badge variant="outline">
+                <Text>Outline</Text>
+              </Badge>
+            </View>
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Button">
+          <View className="flex-row flex-wrap items-center gap-2">
+            <Button>
               <Text>Default</Text>
             </Button>
             <Button variant="destructive">
@@ -78,11 +320,477 @@ export default function Screen() {
               <Text>Link</Text>
             </Button>
             <Button size="icon">
-              <Icon as={Feather} className="size-5 text-primary-foreground" name="heart" />
+              <Icon as={Feather} className="size-4 text-primary-foreground" name="heart" />
             </Button>
           </View>
-        </View>
-      )}
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Input, Label, Textarea"
+          searchTerms={["input", "label", "textarea", "form"]}
+        >
+          <View className="gap-2">
+            <Label>Email</Label>
+            <Input placeholder="name@company.com" />
+          </View>
+          <View className="gap-2">
+            <Label>Project Notes</Label>
+            <Textarea placeholder="Write additional context for the team..." />
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Checkbox, Switch, Radio Group"
+          searchTerms={["checkbox", "switch", "radio", "group"]}
+        >
+          <View className="flex-row items-center gap-3">
+            <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+            <Label>Receive release notifications</Label>
+          </View>
+          <View className="flex-row items-center justify-between">
+            <Label>Enable background sync</Label>
+            <Switch checked={isSwitchEnabled} onCheckedChange={setIsSwitchEnabled} />
+          </View>
+          <RadioGroup value={radioValue} onValueChange={setRadioValue}>
+            <View className="flex-row items-center gap-3">
+              <RadioGroupItem value="starter" />
+              <Label>Starter</Label>
+            </View>
+            <View className="flex-row items-center gap-3">
+              <RadioGroupItem value="pro" />
+              <Label>Pro</Label>
+            </View>
+            <View className="flex-row items-center gap-3">
+              <RadioGroupItem value="enterprise" />
+              <Label>Enterprise</Label>
+            </View>
+          </RadioGroup>
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Toggle and Toggle Group"
+          searchTerms={["toggle", "toggle group"]}
+        >
+          <Toggle pressed={togglePressed} onPressedChange={setTogglePressed} variant="outline">
+            <ToggleIcon as={Feather} name="star" />
+            <Text>Favorite</Text>
+          </Toggle>
+
+          <ToggleGroup
+            type="single"
+            value={toggleGroupValue}
+            onValueChange={setToggleGroupValue}
+            variant="outline"
+          >
+            <ToggleGroupItem isFirst value="bold">
+              <ToggleGroupIcon as={Feather} name="bold" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic">
+              <ToggleGroupIcon as={Feather} name="italic" />
+            </ToggleGroupItem>
+            <ToggleGroupItem isLast value="underline">
+              <ToggleGroupIcon as={Feather} name="underline" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Progress">
+          <Progress value={progressValue} />
+          <View className="flex-row items-center gap-2">
+            <Button onPress={decreaseProgress} size="sm" variant="outline">
+              <Text>-10</Text>
+            </Button>
+            <Button onPress={increaseProgress} size="sm" variant="outline">
+              <Text>+10</Text>
+            </Button>
+            <Text>{progressValue}%</Text>
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Skeleton">
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-4 w-56" />
+          <Skeleton className="h-20 w-full" />
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Separator">
+          <View className="gap-2">
+            <Text>Horizontal separator</Text>
+            <Separator />
+          </View>
+          <View className="h-6 flex-row items-center gap-3">
+            <Text>A</Text>
+            <Separator orientation="vertical" />
+            <Text>B</Text>
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Aspect Ratio" searchTerms={["aspect ratio"]}>
+          <AspectRatio ratio={16 / 9} className="w-full overflow-hidden rounded-md bg-muted">
+            <View className="flex-1 items-center justify-center bg-secondary">
+              <Text>16:9 Preview</Text>
+            </View>
+          </AspectRatio>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Card">
+          <Card>
+            <CardHeader>
+              <CardTitle>Migration Checklist</CardTitle>
+              <CardDescription>Verify all mobile primitives are wired correctly.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Text>All showcase components now come from @init/native-ui.</Text>
+            </CardContent>
+          </Card>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Accordion">
+          <Accordion type="single" collapsible defaultValue="item-1">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>
+                <Text>What is included?</Text>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text>Every React Native Reusables primitive is configured in this package.</Text>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>
+                <Text>How should we consume components?</Text>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text>Import all components from @init/native-ui/components/* only.</Text>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Collapsible">
+          <Collapsible open={isCollapsedOpen} onOpenChange={setIsCollapsedOpen}>
+            <CollapsibleTrigger asChild>
+              <Button variant="outline">
+                <Text>{isCollapsedOpen ? "Hide" : "Show"} details</Text>
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pt-3">
+              <Text>Collapsible content is useful for compact forms and settings sections.</Text>
+            </CollapsibleContent>
+          </Collapsible>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Tabs">
+          <Tabs value={tabValue} onValueChange={setTabValue}>
+            <TabsList>
+              <TabsTrigger value="preview">
+                <Text>Preview</Text>
+              </TabsTrigger>
+              <TabsTrigger value="code">
+                <Text>Code</Text>
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="preview">
+              <Text>Preview tab content.</Text>
+            </TabsContent>
+            <TabsContent value="code">
+              <Text>Code tab content.</Text>
+            </TabsContent>
+          </Tabs>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Select">
+          <Select value={selectValue} onValueChange={setSelectValue}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a plan" />
+            </SelectTrigger>
+            <SelectContent>
+              <NativeSelectScrollView>
+                <SelectGroup>
+                  <SelectLabel>Plans</SelectLabel>
+                  <SelectItem label="Starter" value="starter" />
+                  <SelectItem label="Pro" value="pro" />
+                  <SelectSeparator />
+                  <SelectItem label="Enterprise" value="enterprise" />
+                </SelectGroup>
+              </NativeSelectScrollView>
+            </SelectContent>
+          </Select>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Dropdown Menu" searchTerms={["dropdown"]}>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <Text>Open Menu</Text>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Text>Edit</Text>
+                <DropdownMenuShortcut>E</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Text>Share</Text>
+                <DropdownMenuShortcut>S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuCheckboxItem
+                checked={dropdownChecked}
+                onCheckedChange={setDropdownChecked}
+              >
+                <Text>Enable Sync</Text>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <Text>Density</Text>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup
+                    value={dropdownRadioValue}
+                    onValueChange={setDropdownRadioValue}
+                  >
+                    <DropdownMenuRadioItem value="compact">
+                      <Text>Compact</Text>
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="balanced">
+                      <Text>Balanced</Text>
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Context Menu" searchTerms={["context"]}>
+          <ContextMenu>
+            <ContextMenuTrigger asChild>
+              <Button variant="outline">
+                <Text>Long press me</Text>
+              </Button>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuLabel>File</ContextMenuLabel>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Text>Rename</Text>
+                <ContextMenuShortcut>R</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Text>Duplicate</Text>
+                <ContextMenuShortcut>D</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuCheckboxItem checked={contextChecked} onCheckedChange={setContextChecked}>
+                <Text>Pin item</Text>
+              </ContextMenuCheckboxItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger>
+                  <Text>View</Text>
+                </ContextMenuSubTrigger>
+                <ContextMenuSubContent>
+                  <ContextMenuRadioGroup
+                    value={contextRadioValue}
+                    onValueChange={setContextRadioValue}
+                  >
+                    <ContextMenuRadioItem value="compact">
+                      <Text>Compact</Text>
+                    </ContextMenuRadioItem>
+                    <ContextMenuRadioItem value="comfortable">
+                      <Text>Comfortable</Text>
+                    </ContextMenuRadioItem>
+                  </ContextMenuRadioGroup>
+                </ContextMenuSubContent>
+              </ContextMenuSub>
+            </ContextMenuContent>
+          </ContextMenu>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Menubar">
+          <Menubar>
+            <MenubarMenu value="file">
+              <MenubarTrigger>
+                <Text>File</Text>
+              </MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <Text>New</Text>
+                </MenubarItem>
+                <MenubarItem>
+                  <Text>Open</Text>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarCheckboxItem checked={menubarChecked} onCheckedChange={setMenubarChecked}>
+                  <Text>Autosave</Text>
+                </MenubarCheckboxItem>
+                <MenubarSub>
+                  <MenubarSubTrigger>
+                    <Text>Align</Text>
+                  </MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarRadioGroup
+                      value={menubarRadioValue}
+                      onValueChange={setMenubarRadioValue}
+                    >
+                      <MenubarRadioItem value="left">
+                        <Text>Left</Text>
+                      </MenubarRadioItem>
+                      <MenubarRadioItem value="center">
+                        <Text>Center</Text>
+                      </MenubarRadioItem>
+                      <MenubarRadioItem value="right">
+                        <Text>Right</Text>
+                      </MenubarRadioItem>
+                    </MenubarRadioGroup>
+                  </MenubarSubContent>
+                </MenubarSub>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Popover, Hover Card, Tooltip"
+          searchTerms={["popover", "hover", "tooltip"]}
+        >
+          <View className="flex-row flex-wrap items-center gap-2">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  <Text>Popover</Text>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <Text className="font-medium">Team settings</Text>
+                <Text className="text-sm text-muted-foreground">Manage project visibility.</Text>
+              </PopoverContent>
+            </Popover>
+
+            <HoverCard>
+              <HoverCardTrigger asChild>
+                <Button variant="outline">
+                  <Text>@init/native-ui</Text>
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent>
+                <Text className="font-medium">Native UI Package</Text>
+                <Text className="text-sm text-muted-foreground">
+                  Shared React Native reusables for all mobile screens.
+                </Text>
+              </HoverCardContent>
+            </HoverCard>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="outline">
+                  <Icon as={Feather} name="info" className="size-4 text-foreground" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <Text>Helpful tip</Text>
+              </TooltipContent>
+            </Tooltip>
+          </View>
+        </ShowcaseSection>
+
+        <ShowcaseSection query={searchQuery} title="Dialog">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">
+                <Text>Open Dialog</Text>
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Quick Edit</DialogTitle>
+                <DialogDescription>Update the profile details.</DialogDescription>
+              </DialogHeader>
+              <View className="gap-2">
+                <Label>Display Name</Label>
+                <Input placeholder="Ada Lovelace" />
+              </View>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="secondary">
+                    <Text>Close</Text>
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </ShowcaseSection>
+
+        <ShowcaseSection
+          query={searchQuery}
+          title="Alert Dialog"
+          searchTerms={["confirm", "destructive"]}
+        >
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive">
+                <Text>Delete Project</Text>
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete project?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action is permanent and cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>
+                  <Text>Cancel</Text>
+                </AlertDialogCancel>
+                <AlertDialogAction>
+                  <Text>Delete</Text>
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </ShowcaseSection>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <SafeAreaView className="flex-1 bg-background">
+        <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
+          <View className="gap-4 p-4 pb-24">
+            <View className="gap-3">
+              <Text className="text-4xl font-semibold tracking-tight">UI Showcase</Text>
+              <View className="flex-row items-center gap-2">
+                <Input
+                  className="flex-1"
+                  onChangeText={setSearchQuery}
+                  placeholder="Search sections..."
+                  returnKeyType="search"
+                  value={searchQuery}
+                />
+                {searchQuery.length > 0 ? (
+                  <Button onPress={clearSearch} size="icon" variant="ghost">
+                    <Icon as={XIcon} className="size-4 text-muted-foreground" />
+                  </Button>
+                ) : null}
+              </View>
+            </View>
+            {renderShowcaseSections()}
+            {hasSearchMatches ? null : (
+              <Card>
+                <CardContent className="pt-4">
+                  <Text>No section matches “{searchQuery}”.</Text>
+                </CardContent>
+              </Card>
+            )}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
     </>
   )
 }
diff --git a/apps/mobile/src/shared/components/ui/alert.tsx b/apps/mobile/src/shared/components/ui/alert.tsx
deleted file mode 100644
index 2dd641b5..00000000
--- a/apps/mobile/src/shared/components/ui/alert.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { ComponentRef, ReactNode, Ref } from "react"
-import { useAugmentedRef } from "@rn-primitives/hooks"
-import * as Slot from "@rn-primitives/slot"
-import {
-  type AlertButton,
-  type AlertType,
-  type KeyboardType,
-  Pressable,
-  Alert as RNAlert,
-  type View,
-} from "react-native"
-
-type AlertRef = ComponentRef<typeof View> & {
-  show: () => void
-  prompt: (args: AlertProps & { prompt: AlertProps["prompt"] }) => void
-  alert: (args: AlertProps) => void
-}
-
-type AlertInputValue = { login: string; password: string } | string
-
-type AlertProps = {
-  title: string
-  buttons: Array<
-    Omit<AlertButton, "onPress"> & {
-      onPress?: (text: AlertInputValue) => void
-    }
-  >
-  message?: string | undefined
-  prompt?: {
-    type?: Exclude<AlertType, "default"> | undefined
-    defaultValue?: string | undefined
-    keyboardType?: KeyboardType | undefined
-  }
-  children?: ReactNode
-}
-
-function Alert({
-  children,
-  title,
-  buttons,
-  message,
-  prompt,
-  ref,
-}: AlertProps & { ref?: Ref<AlertRef> }) {
-  const augmentedRef = useAugmentedRef({
-    deps: [prompt],
-    methods: {
-      alert,
-      prompt: promptAlert,
-      show: () => {
-        onPress()
-      },
-    },
-    ref: ref ?? null,
-  })
-
-  function promptAlert(args: AlertProps & { prompt: Required<AlertProps["prompt"]> }) {
-    RNAlert.prompt(
-      args.title,
-      args.message,
-      args.buttons as AlertButton[],
-      args.prompt?.type,
-      args.prompt?.defaultValue,
-      args.prompt?.keyboardType
-    )
-  }
-
-  function alert(args: AlertProps) {
-    RNAlert.alert(args.title, args.message, args.buttons as AlertButton[])
-  }
-
-  function onPress() {
-    if (prompt) {
-      promptAlert({
-        buttons,
-        message,
-        prompt: prompt as Required<AlertProps["prompt"]>,
-        title,
-      })
-      return
-    }
-    alert({ buttons, message, title })
-  }
-
-  const Component = children ? Slot.Pressable : Pressable
-
-  return (
-    <Component onPress={onPress} ref={augmentedRef}>
-      {children}
-    </Component>
-  )
-}
-
-function AlertAnchor({ ref }: { ref: Ref<AlertRef> }) {
-  return <Alert buttons={[]} ref={ref} title="" />
-}
-
-export { Alert, AlertAnchor, type AlertRef }
diff --git a/apps/mobile/src/shared/components/ui/avatar.tsx b/apps/mobile/src/shared/components/ui/avatar.tsx
deleted file mode 100644
index 340133c6..00000000
--- a/apps/mobile/src/shared/components/ui/avatar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Ref } from "react"
-import { cn } from "@init/utils/ui"
-import * as AvatarPrimitive from "@rn-primitives/avatar"
-
-function Avatar({
-  className,
-  style,
-  ...props
-}: AvatarPrimitive.RootProps & { className?: string; ref: Ref<AvatarPrimitive.RootRef> }) {
-  return (
-    <AvatarPrimitive.Root
-      className={cn("relative size-10 shrink-0 overflow-hidden rounded-full", className)}
-      style={style}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  style,
-  ...props
-}: AvatarPrimitive.ImageProps & { className?: string; ref?: Ref<AvatarPrimitive.ImageRef> }) {
-  return (
-    <AvatarPrimitive.Image
-      className={cn("aspect-square size-full", className)}
-      style={style}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  style,
-  ...props
-}: AvatarPrimitive.FallbackProps & { className?: string; ref?: Ref<AvatarPrimitive.FallbackRef> }) {
-  return (
-    <AvatarPrimitive.Fallback
-      className={cn("size-full items-center justify-center rounded-full bg-muted", className)}
-      style={style}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }
diff --git a/apps/mobile/src/shared/components/ui/toggle.tsx b/apps/mobile/src/shared/components/ui/toggle.tsx
deleted file mode 100644
index 80339989..00000000
--- a/apps/mobile/src/shared/components/ui/toggle.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Switch, type SwitchProps } from "react-native"
-import { useCSSVariable } from "uniwind"
-
-function Toggle(props: SwitchProps) {
-  const whiteValue = useCSSVariable("--color-white")
-  const mutedValue = useCSSVariable("--color-muted")
-  const primaryValue = useCSSVariable("--color-primary")
-  const white = typeof whiteValue === "string" ? whiteValue : undefined
-  const muted = typeof mutedValue === "string" ? mutedValue : undefined
-  const primary = typeof primaryValue === "string" ? primaryValue : undefined
-
-  return (
-    <Switch
-      thumbColor={white}
-      trackColor={{
-        false: muted,
-        true: primary,
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toggle }
diff --git a/bun.lock b/bun.lock
index d5980479..b287ede0 100644
--- a/bun.lock
+++ b/bun.lock
@@ -427,25 +427,52 @@
     "packages/native-ui": {
       "name": "@init/native-ui",
       "dependencies": {
+        "@expo/vector-icons": "^15.0.2",
         "@init/utils": "workspace:*",
+        "@rn-primitives/accordion": "1.2.0",
+        "@rn-primitives/alert-dialog": "1.2.0",
+        "@rn-primitives/aspect-ratio": "1.2.0",
+        "@rn-primitives/avatar": "1.2.0",
+        "@rn-primitives/checkbox": "1.2.0",
+        "@rn-primitives/collapsible": "1.2.0",
+        "@rn-primitives/context-menu": "1.2.0",
+        "@rn-primitives/dialog": "1.2.0",
+        "@rn-primitives/dropdown-menu": "1.2.0",
+        "@rn-primitives/hover-card": "1.2.0",
+        "@rn-primitives/label": "1.2.0",
+        "@rn-primitives/menubar": "1.2.0",
+        "@rn-primitives/popover": "1.2.0",
+        "@rn-primitives/portal": "1.2.0",
+        "@rn-primitives/progress": "1.2.0",
+        "@rn-primitives/radio-group": "1.2.0",
+        "@rn-primitives/select": "1.2.0",
+        "@rn-primitives/separator": "1.2.0",
         "@rn-primitives/slot": "1.2.0",
+        "@rn-primitives/switch": "1.2.0",
+        "@rn-primitives/tabs": "1.2.0",
+        "@rn-primitives/toggle": "1.2.0",
+        "@rn-primitives/toggle-group": "1.2.0",
+        "@rn-primitives/tooltip": "1.2.0",
         "class-variance-authority": "0.7.1",
-        "expo-glass-effect": "~0.1.9",
-        "expo-router": "~6.0.20",
-        "react-native-reanimated": "~4.1.1",
-        "react-native-screens": "~4.16.0",
-        "tailwindcss": "4.1.18",
-        "uniwind": "1.3.0",
       },
       "devDependencies": {
         "@tooling/tsconfig": "workspace:*",
         "@types/react": "19.1.13",
+        "expo-glass-effect": "~0.1.9",
+        "react": "19.1.0",
+        "react-native": "0.81.5",
+        "react-native-reanimated": "~4.1.1",
+        "react-native-screens": "~4.16.0",
         "typescript": "5.9.3",
+        "uniwind": "1.3.0",
       },
       "peerDependencies": {
         "expo-glass-effect": "*",
         "react": "*",
         "react-native": "*",
+        "react-native-reanimated": "*",
+        "react-native-screens": "*",
+        "uniwind": "*",
       },
     },
     "packages/observability": {
@@ -1746,38 +1773,82 @@
 
     "@protobufjs/utf8": ["@protobufjs/utf8@1.1.0", "", {}, "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="],
 
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
+    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
+
+    "@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw=="],
+
+    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
+
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
+
+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
+
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
+    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],
+
     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
     "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
+    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg=="],
+
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
+
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
+
+    "@radix-ui/react-menubar": ["@radix-ui/react-menubar@1.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA=="],
+
+    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
+
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
+
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
+    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.8", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA=="],
+
+    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
+
     "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
 
+    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
+
+    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
+
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],
 
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
+
     "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
 
+    "@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ=="],
+
+    "@radix-ui/react-toggle-group": ["@radix-ui/react-toggle-group@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-toggle": "1.1.10", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q=="],
+
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -1788,6 +1859,16 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
+
+    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
+
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
+
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
+
+    "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
+
     "@react-email/body": ["@react-email/body@0.2.1", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ=="],
 
     "@react-email/button": ["@react-email/button@0.2.1", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A=="],
@@ -1870,16 +1951,60 @@
 
     "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
 
+    "@rn-primitives/accordion": ["@rn-primitives/accordion@1.2.0", "", { "dependencies": { "@radix-ui/react-accordion": "^1.2.11", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-gt1NQC6XTbSN6KEqX3QDbvqO4kXFDKhQGiljL/pq1WO0iJNVaV47/3E8fLOZLEuj2FSkQblNhSvVc4WU/7qHoA=="],
+
+    "@rn-primitives/alert-dialog": ["@rn-primitives/alert-dialog@1.2.0", "", { "dependencies": { "@radix-ui/react-alert-dialog": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-/XxvQVRMnIyQo29iuQ631CHjghGKY8U4k3gbsS2MCGP0hglZVFoBRiAF3Bgyr16LxWRu1DoPltvzwOrUCsB+YQ=="],
+
+    "@rn-primitives/aspect-ratio": ["@rn-primitives/aspect-ratio@1.2.0", "", { "dependencies": { "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-IUQ6MR26AV1ckN+U3m8UjlgJMxB53sqPL3ri2rrGtmFPtq+Gv2luGEL79gWXIPZuDdXiBBwiyTUg6gao3JkZtw=="],
+
     "@rn-primitives/avatar": ["@rn-primitives/avatar@1.2.0", "", { "dependencies": { "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-ic029KaJRADdjmjPzpaSaZ9QrtgGF8DnAA7TcQ/gYqUfLXjkbfzsjARKv7NtEoJLjWAcjIAK6R8JkcbMfPtYig=="],
 
+    "@rn-primitives/checkbox": ["@rn-primitives/checkbox@1.2.0", "", { "dependencies": { "@radix-ui/react-checkbox": "^1.3.2", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-FU/c81eoo6zGm4J4uCccjnqijrQ0grMkt6W3xhnOFkxqxiU2QrnlXN7ddhm2yN+s8CNnke4bOj/xr78wIaYfiw=="],
+
+    "@rn-primitives/collapsible": ["@rn-primitives/collapsible@1.2.0", "", { "dependencies": { "@radix-ui/react-collapsible": "^1.1.11", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-JLmGpQ+7VBqNVS0QqpWqHakIpwzbpbPyaWy/czCQa97mcz+TqUHXVtHXuf2UWyW/Cix/JRAro+Vpld4YN0glPg=="],
+
+    "@rn-primitives/context-menu": ["@rn-primitives/context-menu@1.2.0", "", { "dependencies": { "@radix-ui/react-context-menu": "^2.2.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-sHmqVeRyPM0UgTZIwmHmjQfRLiPZu1lIDwGmqTLPdiQNsN+P1zsDVgrMFqbd+GTBkHQWJaM03DpSe9neKAUnQQ=="],
+
+    "@rn-primitives/dialog": ["@rn-primitives/dialog@1.2.0", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-18q+SZe7ioyMQRYIL+aSleqque1Ky18LOQGA8kDPryrGMf16LYStd61SshMlluqhL2T00ZkEjsSVgpU5ZXvcnQ=="],
+
+    "@rn-primitives/dropdown-menu": ["@rn-primitives/dropdown-menu@1.2.0", "", { "dependencies": { "@radix-ui/react-dropdown-menu": "^2.1.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-TJDDr8VQfw9CRZ7xZ6kBYLVMqL1xFVC5ZZ4sfRmWP6PCT0lNks4XqGuTFLeVVlNLPSmzt9GKC2DZqzDXui8/NQ=="],
+
     "@rn-primitives/hooks": ["@rn-primitives/hooks@1.3.0", "", { "dependencies": { "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-BR97reSu7uVDpyMeQdRJHT0w8KdS6jdYnOL6xQtqS2q3H6N7vXBlX4LFERqJZphD+aziJFIAJ3HJF1vtt6XlpQ=="],
 
-    "@rn-primitives/portal": ["@rn-primitives/portal@1.3.0", "", { "dependencies": { "zustand": "^5.0.4" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-a2DSce7TcSfcs0cCngLadAJOvx/+mdH9NRu+GxkX8NPRsGGhJvDEOqouMgDqLwx7z9mjXoUaZcwaVcemUSW9/A=="],
+    "@rn-primitives/hover-card": ["@rn-primitives/hover-card@1.2.0", "", { "dependencies": { "@radix-ui/react-hover-card": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/popover": "1.2.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-YesqV3rEIhvsarA1Aq6pmkNlmQn5rWpmjHP4s4JIrceaQjSwl9Rmnvzp7qHg0CN3AOd803hNyplMn9vn8Z3g6Q=="],
+
+    "@rn-primitives/label": ["@rn-primitives/label@1.2.0", "", { "dependencies": { "@radix-ui/react-label": "^2.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-eThBr6vn2jS81ZS4JNcg0+02TkEircH4bZmjF4IZUDl4XRpevwK95NyOkbfhGYmpVbAuisAVxDmvNOQ4OVjfug=="],
+
+    "@rn-primitives/menubar": ["@rn-primitives/menubar@1.2.0", "", { "dependencies": { "@radix-ui/react-menubar": "^1.1.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-kcGHHqHHBEtC8+Oz9rUt39XSY69opxSF+VJyJtAkQra8ewKqf6gJofU2KHwQT8XmpbartxUBHkI8yjVHQ6zGkw=="],
+
+    "@rn-primitives/popover": ["@rn-primitives/popover@1.2.0", "", { "dependencies": { "@radix-ui/react-popover": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-QJ2T+RcF1FyTQy58Nz8Bwy5lnan5Rt7xQPl8rB2n7DBCGOnZNhEub5LoHm+gjmskGo9t1JyNKoEAD7I4j/7jQQ=="],
+
+    "@rn-primitives/portal": ["@rn-primitives/portal@1.2.0", "", { "dependencies": { "zustand": "^5.0.4" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-vLnidkk1EBuRwzUJ48NDzpNk+25VLm8jEao+2QVLqxtCQXlPik+RXb2GmxSb3/brF2zK5pzOp3RYbCp7g+WJkA=="],
+
+    "@rn-primitives/progress": ["@rn-primitives/progress@1.2.0", "", { "dependencies": { "@radix-ui/react-progress": "^1.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-bbO4WGSNAd2idYDW0ma4xCX9UFOjNK3U4F4hLRhMKglz3c/QVYfpKvlGQ0Y0d7kpelA7MQizvFeqGGYfxSuisw=="],
+
+    "@rn-primitives/radio-group": ["@rn-primitives/radio-group@1.2.0", "", { "dependencies": { "@radix-ui/react-radio-group": "^1.3.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-H/u3E4S6FmvDyWSgs3uLg0I5t12i8E2JGJRelbKv5QzLSLdq8684dLfCbwuNjs/OzDAi5x1l27bf9+Jw42MvNw=="],
+
+    "@rn-primitives/select": ["@rn-primitives/select@1.2.0", "", { "dependencies": { "@radix-ui/react-select": "^2.2.5", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-W3qFkdSAFPnjNMM7II5MiLCItjWOGXr8f+3obPtLAHcWrcsX/d1KogmplWXwmhBvVStCgE1OpJAD3DE2CHx9Rw=="],
+
+    "@rn-primitives/separator": ["@rn-primitives/separator@1.2.0", "", { "dependencies": { "@radix-ui/react-separator": "^1.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-1suBbXNm7cNEP/eKshh3xsn5dPNp532qU9fBfBA5mW9ZN5pUO3wrwv974heluVX/pOXBZ+li3HGN/Aos134stA=="],
 
     "@rn-primitives/slot": ["@rn-primitives/slot@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-cpbn+JLjSeq3wcA4uqgFsUimMrWYWx2Ks7r5rkwd1ds1utxynsGkLOKpYVQkATwWrYhtcoF1raxIKEqXuMN+/w=="],
 
+    "@rn-primitives/switch": ["@rn-primitives/switch@1.2.0", "", { "dependencies": { "@radix-ui/react-switch": "^1.2.5", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-M4r4LvLUFgn3SIkrMuEkDIxnRbHPLZF2cvKhdHmsk1vk6DSIw3WxYEA+0GkU6a8wnOCFzWRl4kHh5+x86bo1/w=="],
+
+    "@rn-primitives/tabs": ["@rn-primitives/tabs@1.2.0", "", { "dependencies": { "@radix-ui/react-tabs": "^1.1.12", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-sKqVYQD1s46eS8kGBsCGxJrtZ4my+sjXD5m2auGSdTJmJ8dNYqZJEI1caiMm64ZvRuQDe2bFsekAFGexBD4qUQ=="],
+
+    "@rn-primitives/toggle": ["@rn-primitives/toggle@1.2.0", "", { "dependencies": { "@radix-ui/react-toggle": "^1.1.9", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-pVhlIdGCOaxBmcrSUYF3EUTeqOoLHCYEuj/qo64Ai89DnI5aSmReBgpttY5v/r0gNrku9dJZfrOe+uGzWNUn8Q=="],
+
+    "@rn-primitives/toggle-group": ["@rn-primitives/toggle-group@1.2.0", "", { "dependencies": { "@radix-ui/react-toggle-group": "^1.1.10", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-xCbYZzGzCbr/3pu3xE9pEKzuXU5LHT0ZlK9WMdECQUHLRjSI2A6KnUiZJ+JqZ3lzcVlgCE2lZeZXmpvVyBXnNQ=="],
+
+    "@rn-primitives/tooltip": ["@rn-primitives/tooltip@1.2.0", "", { "dependencies": { "@radix-ui/react-tooltip": "^1.2.7", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-Fn1Y/maW1o64QI+nmBj2jBI/KdCEXv8kVGbDjjDFI68KUxDjuig/hACLiD7fEbLBhZqB/QnHUSRsnPUUOOVGdA=="],
+
     "@rn-primitives/types": ["@rn-primitives/types@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-b+6zKgdKVqAfaFPSfhwlQL0dnPQXPpW890m3eguC0VDI1eOsoEvUfVb6lmgH4bum9MmI0xymq4tOUI/fsKLoCQ=="],
 
+    "@rn-primitives/utils": ["@rn-primitives/utils@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-vLXV5NuxIHDeb4Bw57FzdUh89/g8gz6GERm8TsbJaSUPsDXfnC/ffeYiZJb0LxNteKE3Nr8na4Jy2n26tFil7w=="],
+
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.53", "", {}, "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
@@ -5302,26 +5427,76 @@
 
     "@pnpm/network.ca-file/graceful-fs": ["graceful-fs@4.2.10", "", {}, "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="],
 
+    "@radix-ui/react-accordion/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-alert-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-checkbox/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-collapsible/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-collection/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-context-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@radix-ui/react-dropdown-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@radix-ui/react-hover-card/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-menubar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-popover/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-progress/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
+
+    "@radix-ui/react-radio-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-roving-focus/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@radix-ui/react-select/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-switch/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@radix-ui/react-toggle/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-toggle-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@react-native/codegen/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
     "@react-native/codegen/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
@@ -5686,6 +5861,8 @@
 
     "mlly/ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
 
+    "mobile/@rn-primitives/portal": ["@rn-primitives/portal@1.3.0", "", { "dependencies": { "zustand": "^5.0.4" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-a2DSce7TcSfcs0cCngLadAJOvx/+mdH9NRu+GxkX8NPRsGGhJvDEOqouMgDqLwx7z9mjXoUaZcwaVcemUSW9/A=="],
+
     "msw/picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "msw/type-fest": ["type-fest@5.4.2", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-FLEenlVYf7Zcd34ISMLo3ZzRE1gRjY1nMDTp+bQRBiPsaKyIW8K3Zr99ioHDUgA9OGuGGJPyYpNcffGmBhJfGg=="],
@@ -6124,16 +6301,44 @@
 
     "@opentelemetry/instrumentation-socket.io/@opentelemetry/instrumentation/@opentelemetry/api-logs": ["@opentelemetry/api-logs@0.211.0", "", { "dependencies": { "@opentelemetry/api": "^1.3.0" } }, "sha512-swFdZq8MCdmdR22jTVGQDhwqDzcI4M10nhjXkLr1EsIzXgZBqm4ZlmmcWsg3TSNf+3mzgOiqveXmBLZuDi2Lgg=="],
 
+    "@radix-ui/react-accordion/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-checkbox/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-collapsible/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-context-menu/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-dropdown-menu/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-focus-scope/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-hover-card/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-menubar/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-radio-group/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-roving-focus/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-switch/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-tabs/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-toggle-group/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-toggle/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@react-native/codegen/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "@react-native/codegen/yargs/cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
diff --git a/packages/native-ui/package.json b/packages/native-ui/package.json
index 330a71f1..17bbabe9 100644
--- a/packages/native-ui/package.json
+++ b/packages/native-ui/package.json
@@ -15,24 +15,51 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@expo/vector-icons": "^15.0.2",
     "@init/utils": "workspace:*",
+    "@rn-primitives/accordion": "1.2.0",
+    "@rn-primitives/alert-dialog": "1.2.0",
+    "@rn-primitives/aspect-ratio": "1.2.0",
+    "@rn-primitives/avatar": "1.2.0",
+    "@rn-primitives/checkbox": "1.2.0",
+    "@rn-primitives/collapsible": "1.2.0",
+    "@rn-primitives/context-menu": "1.2.0",
+    "@rn-primitives/dialog": "1.2.0",
+    "@rn-primitives/dropdown-menu": "1.2.0",
+    "@rn-primitives/hover-card": "1.2.0",
+    "@rn-primitives/label": "1.2.0",
+    "@rn-primitives/menubar": "1.2.0",
+    "@rn-primitives/popover": "1.2.0",
+    "@rn-primitives/portal": "1.2.0",
+    "@rn-primitives/progress": "1.2.0",
+    "@rn-primitives/radio-group": "1.2.0",
+    "@rn-primitives/select": "1.2.0",
+    "@rn-primitives/separator": "1.2.0",
     "@rn-primitives/slot": "1.2.0",
-    "class-variance-authority": "0.7.1",
-    "expo-glass-effect": "~0.1.9",
-    "expo-router": "~6.0.20",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-screens": "~4.16.0",
-    "tailwindcss": "4.1.18",
-    "uniwind": "1.3.0"
+    "@rn-primitives/switch": "1.2.0",
+    "@rn-primitives/tabs": "1.2.0",
+    "@rn-primitives/toggle": "1.2.0",
+    "@rn-primitives/toggle-group": "1.2.0",
+    "@rn-primitives/tooltip": "1.2.0",
+    "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
     "@tooling/tsconfig": "workspace:*",
     "@types/react": "19.1.13",
-    "typescript": "5.9.3"
+    "expo-glass-effect": "~0.1.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-screens": "~4.16.0",
+    "typescript": "5.9.3",
+    "uniwind": "1.3.0"
   },
   "peerDependencies": {
     "expo-glass-effect": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": "*",
+    "react-native-screens": "*",
+    "uniwind": "*"
   }
 }
diff --git a/packages/native-ui/src/components/accordion.tsx b/packages/native-ui/src/components/accordion.tsx
new file mode 100644
index 00000000..04c11935
--- /dev/null
+++ b/packages/native-ui/src/components/accordion.tsx
@@ -0,0 +1,144 @@
+import { cn } from "@init/utils/ui"
+import * as AccordionPrimitive from "@rn-primitives/accordion"
+import { Platform, Pressable, View } from "react-native"
+import Animated, {
+  FadeOutUp,
+  LayoutAnimationConfig,
+  LinearTransition,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from "react-native-reanimated"
+import { ChevronDownIcon, Icon } from "./icon"
+import { TextClassContext } from "./text"
+
+function Accordion({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.RootProps, "asChild"> &
+  React.RefAttributes<AccordionPrimitive.RootRef>) {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root
+        {...(props as AccordionPrimitive.RootProps)}
+        asChild={Platform.OS !== "web"}
+      >
+        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  )
+}
+
+function AccordionItem({
+  children,
+  className,
+  value,
+  ...props
+}: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>) {
+  return (
+    <AccordionPrimitive.Item
+      className={cn(
+        "border-b border-border",
+        Platform.select({ web: "last:border-b-0" }),
+        className
+      )}
+      value={value}
+      asChild
+      {...props}
+    >
+      <Animated.View
+        className="native:overflow-hidden"
+        layout={Platform.select({ native: LinearTransition.duration(200) })}
+      >
+        {children}
+      </Animated.View>
+    </AccordionPrimitive.Item>
+  )
+}
+
+const Trigger = Platform.OS === "web" ? View : Pressable
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.TriggerProps & {
+  children?: React.ReactNode
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>) {
+  const { isExpanded } = AccordionPrimitive.useItemContext()
+
+  const progress = useDerivedValue(
+    () => (isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 })),
+    [isExpanded]
+  )
+  const chevronStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ rotate: `${progress.value * 180}deg` }],
+    }),
+    [progress]
+  )
+
+  return (
+    <TextClassContext.Provider
+      value={cn("text-left text-sm font-medium", Platform.select({ web: "group-hover:underline" }))}
+    >
+      <AccordionPrimitive.Header>
+        <AccordionPrimitive.Trigger {...props} asChild={Platform.OS !== "web"}>
+          <Trigger
+            className={cn(
+              "flex-row items-start justify-between gap-4 rounded-md py-4 disabled:opacity-50",
+              Platform.select({
+                web: "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180",
+              }),
+              className
+            )}
+          >
+            {children}
+            <Animated.View style={chevronStyle}>
+              <Icon
+                as={ChevronDownIcon}
+                size={16}
+                className={cn(
+                  "shrink-0 text-muted-foreground",
+                  Platform.select({
+                    web: "pointer-events-none translate-y-0.5 transition-transform duration-200",
+                  })
+                )}
+              />
+            </Animated.View>
+          </Trigger>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </TextClassContext.Provider>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>) {
+  const { isExpanded } = AccordionPrimitive.useItemContext()
+  return (
+    <TextClassContext.Provider value="text-sm">
+      <AccordionPrimitive.Content
+        className={cn(
+          "overflow-hidden",
+          Platform.select({
+            web: isExpanded ? "animate-accordion-down" : "animate-accordion-up",
+          })
+        )}
+        {...props}
+      >
+        <Animated.View
+          exiting={Platform.select({ native: FadeOutUp.duration(200) })}
+          className={cn("pb-4", className)}
+        >
+          {children}
+        </Animated.View>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  )
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
diff --git a/packages/native-ui/src/components/alert-dialog.tsx b/packages/native-ui/src/components/alert-dialog.tsx
new file mode 100644
index 00000000..fe505c77
--- /dev/null
+++ b/packages/native-ui/src/components/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import { cn } from "@init/utils/ui"
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog"
+import * as React from "react"
+import { Platform, View, type ViewProps } from "react-native"
+import { FadeIn, FadeOut } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { buttonTextVariants, buttonVariants } from "./button"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function AlertDialogOverlay({
+  className,
+  children,
+  ...props
+}: Omit<AlertDialogPrimitive.OverlayProps, "asChild"> &
+  React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <FullWindowOverlay>
+      <AlertDialogPrimitive.Overlay
+        className={cn(
+          "absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-black/50 p-2",
+          Platform.select({
+            web: "animate-in fade-in-0 fixed",
+          }),
+          className
+        )}
+        {...props}
+      >
+        <NativeOnlyAnimatedView
+          entering={FadeIn.duration(200).delay(50)}
+          exiting={FadeOut.duration(150)}
+        >
+          {children}
+        </NativeOnlyAnimatedView>
+      </AlertDialogPrimitive.Overlay>
+    </FullWindowOverlay>
+  )
+}
+
+function AlertDialogContent({
+  className,
+  portalHost,
+  ...props
+}: AlertDialogPrimitive.ContentProps &
+  React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+    portalHost?: string
+  }) {
+  return (
+    <AlertDialogPortal hostName={portalHost}>
+      <AlertDialogOverlay>
+        <AlertDialogPrimitive.Content
+          className={cn(
+            "z-50 flex flex-col gap-4 rounded-lg border border-border bg-background p-6 shadow-lg shadow-black/5 sm:max-w-lg",
+            Platform.select({
+              web: "animate-in fade-in-0 zoom-in-95 web:max-w-[calc(100%-2rem)] duration-200",
+            }),
+            className
+          )}
+          {...props}
+        />
+      </AlertDialogOverlay>
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <TextClassContext.Provider value="text-center sm:text-left">
+      <View className={cn("flex flex-col gap-2", className)} {...props} />
+    </TextClassContext.Provider>
+  )
+}
+
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.TitleProps & React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.DescriptionProps &
+  React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: AlertDialogPrimitive.ActionProps & React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ className })}>
+      <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
+    </TextClassContext.Provider>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: AlertDialogPrimitive.CancelProps & React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ className, variant: "outline" })}>
+      <AlertDialogPrimitive.Cancel
+        className={cn(buttonVariants({ variant: "outline" }), className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/packages/native-ui/src/components/alert.tsx b/packages/native-ui/src/components/alert.tsx
new file mode 100644
index 00000000..9bad3c3d
--- /dev/null
+++ b/packages/native-ui/src/components/alert.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@init/utils/ui"
+import * as React from "react"
+import { View, type ViewProps } from "react-native"
+import { Icon } from "./icon"
+import { Text, TextClassContext } from "./text"
+
+function Alert({
+  className,
+  variant,
+  children,
+  icon,
+  iconClassName,
+  ...props
+}: ViewProps &
+  React.RefAttributes<View> & {
+    icon: React.ElementType
+    variant?: "default" | "destructive"
+    iconClassName?: string
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm text-foreground",
+        variant === "destructive" && "text-destructive",
+        className
+      )}
+    >
+      <View
+        role="alert"
+        className={cn(
+          "relative w-full rounded-lg border border-border bg-card px-4 pt-3.5 pb-2",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute top-3 left-3.5">
+          <Icon
+            as={icon}
+            className={cn("size-4", variant === "destructive" && "text-destructive", iconClassName)}
+          />
+        </View>
+        {children}
+      </View>
+    </TextClassContext.Provider>
+  )
+}
+
+function AlertTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn("mb-1 ml-0.5 min-h-4 pl-6 leading-none font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  const textClass = React.useContext(TextClassContext)
+  return (
+    <Text
+      className={cn(
+        "ml-0.5 pb-1.5 pl-6 text-sm leading-relaxed text-muted-foreground",
+        textClass?.includes("text-destructive") && "text-destructive/90",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertDescription, AlertTitle }
diff --git a/packages/native-ui/src/components/aspect-ratio.tsx b/packages/native-ui/src/components/aspect-ratio.tsx
new file mode 100644
index 00000000..9defa06c
--- /dev/null
+++ b/packages/native-ui/src/components/aspect-ratio.tsx
@@ -0,0 +1,3 @@
+import { Root as AspectRatio } from "@rn-primitives/aspect-ratio"
+
+export { AspectRatio }
diff --git a/packages/native-ui/src/components/avatar.tsx b/packages/native-ui/src/components/avatar.tsx
new file mode 100644
index 00000000..d98d55cf
--- /dev/null
+++ b/packages/native-ui/src/components/avatar.tsx
@@ -0,0 +1,38 @@
+import { cn } from "@init/utils/ui"
+import * as AvatarPrimitive from "@rn-primitives/avatar"
+
+function Avatar({
+  className,
+  ...props
+}: AvatarPrimitive.RootProps & React.RefAttributes<AvatarPrimitive.RootRef>) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: AvatarPrimitive.ImageProps & React.RefAttributes<AvatarPrimitive.ImageRef>) {
+  return <AvatarPrimitive.Image className={cn("aspect-square size-full", className)} {...props} />
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.FallbackProps & React.RefAttributes<AvatarPrimitive.FallbackRef>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full flex-row items-center justify-center rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarFallback, AvatarImage }
diff --git a/packages/native-ui/src/components/badge.tsx b/packages/native-ui/src/components/badge.tsx
new file mode 100644
index 00000000..963dbafa
--- /dev/null
+++ b/packages/native-ui/src/components/badge.tsx
@@ -0,0 +1,68 @@
+import type { ViewProps } from "react-native"
+import { cn } from "@init/utils/ui"
+import * as Slot from "@rn-primitives/slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Platform, View } from "react-native"
+import { TextClassContext } from "./text"
+
+const badgeVariants = cva(
+  cn(
+    "group shrink-0 flex-row items-center justify-center gap-1 overflow-hidden rounded-full border border-border px-2 py-0.5",
+    Platform.select({
+      web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive w-fit whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+    })
+  ),
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: cn(
+          "border-transparent bg-primary",
+          Platform.select({ web: "[a&]:hover:bg-primary/90" })
+        ),
+        destructive: cn(
+          "border-transparent bg-destructive",
+          Platform.select({ web: "[a&]:hover:bg-destructive/90" })
+        ),
+        outline: Platform.select({ web: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground" }),
+        secondary: cn(
+          "border-transparent bg-secondary",
+          Platform.select({ web: "[a&]:hover:bg-secondary/90" })
+        ),
+      },
+    },
+  }
+)
+
+const badgeTextVariants = cva("text-xs font-medium", {
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-white",
+      outline: "text-foreground",
+      secondary: "text-secondary-foreground",
+    },
+  },
+})
+
+type BadgeProps = ViewProps &
+  React.RefAttributes<View> & {
+    asChild?: boolean
+  } & VariantProps<typeof badgeVariants>
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+  const Component = asChild ? Slot.View : View
+  return (
+    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
+      <Component className={cn(badgeVariants({ variant }), className)} {...props} />
+    </TextClassContext.Provider>
+  )
+}
+
+export { Badge, badgeTextVariants, badgeVariants }
+export type { BadgeProps }
diff --git a/packages/native-ui/src/components/button.tsx b/packages/native-ui/src/components/button.tsx
index 308dac41..1d6c24ed 100644
--- a/packages/native-ui/src/components/button.tsx
+++ b/packages/native-ui/src/components/button.tsx
@@ -1,10 +1,10 @@
-import type * as React from "react"
 import { cn } from "@init/utils/ui"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Platform, Pressable } from "react-native"
 import { TextClassContext } from "./text"
 
-// NOTE: group-* is not supported yet by Uniwind.
+// NOTE: group-* is not supported yet by Uniwind
+
 const buttonVariants = cva(
   cn(
     "group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",
@@ -42,7 +42,9 @@ const buttonVariants = cva(
         link: "",
         outline: cn(
           "border border-border bg-background shadow-sm shadow-black/5 active:bg-accent dark:border-input dark:bg-input/30 dark:active:bg-input/50",
-          Platform.select({ web: "hover:bg-accent dark:hover:bg-input/50" })
+          Platform.select({
+            web: "hover:bg-accent dark:hover:bg-input/50",
+          })
         ),
         secondary: cn(
           "bg-secondary shadow-sm shadow-black/5 active:bg-secondary/80",
diff --git a/packages/native-ui/src/components/card.tsx b/packages/native-ui/src/components/card.tsx
new file mode 100644
index 00000000..d1d9565f
--- /dev/null
+++ b/packages/native-ui/src/components/card.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@init/utils/ui"
+import { View, type ViewProps } from "react-native"
+import { Text, TextClassContext } from "./text"
+
+function Card({ className, ...props }: ViewProps & React.RefAttributes<View>) {
+  return (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View
+        className={cn(
+          "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 shadow-sm shadow-black/5",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function CardHeader({ className, ...props }: ViewProps & React.RefAttributes<View>) {
+  return <View className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return <Text className={cn("leading-none font-semibold", className)} {...props} />
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return <Text className={cn("text-sm text-muted-foreground", className)} {...props} />
+}
+
+function CardContent({ className, ...props }: ViewProps & React.RefAttributes<View>) {
+  return <View className={cn("px-6", className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: ViewProps & React.RefAttributes<View>) {
+  return <View className={cn("flex flex-row items-center px-6", className)} {...props} />
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/packages/native-ui/src/components/checkbox.tsx b/packages/native-ui/src/components/checkbox.tsx
new file mode 100644
index 00000000..6011a81e
--- /dev/null
+++ b/packages/native-ui/src/components/checkbox.tsx
@@ -0,0 +1,49 @@
+import { cn } from "@init/utils/ui"
+import * as CheckboxPrimitive from "@rn-primitives/checkbox"
+import { Platform } from "react-native"
+import { CheckIcon, Icon } from "./icon"
+
+const DEFAULT_HIT_SLOP = 24
+
+function Checkbox({
+  className,
+  checkedClassName,
+  indicatorClassName,
+  iconClassName,
+  ...props
+}: CheckboxPrimitive.RootProps &
+  React.RefAttributes<CheckboxPrimitive.RootRef> & {
+    checkedClassName?: string
+    indicatorClassName?: string
+    iconClassName?: string
+  }) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        "size-4 shrink-0 rounded-[4px] border border-input shadow-sm shadow-black/5 dark:bg-input/30",
+        Platform.select({
+          native: "overflow-hidden",
+          web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer cursor-default outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed",
+        }),
+        props.checked && cn("border-primary", checkedClassName),
+        props.disabled && "opacity-50",
+        className
+      )}
+      hitSlop={DEFAULT_HIT_SLOP}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn("h-full w-full items-center justify-center bg-primary", indicatorClassName)}
+      >
+        <Icon
+          as={CheckIcon}
+          size={12}
+          strokeWidth={Platform.OS === "web" ? 2.5 : 3.5}
+          className={cn("text-primary-foreground", iconClassName)}
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/packages/native-ui/src/components/collapsible.tsx b/packages/native-ui/src/components/collapsible.tsx
new file mode 100644
index 00000000..db443c3d
--- /dev/null
+++ b/packages/native-ui/src/components/collapsible.tsx
@@ -0,0 +1,7 @@
+import {
+  Content as CollapsibleContent,
+  Root as Collapsible,
+  Trigger as CollapsibleTrigger,
+} from "@rn-primitives/collapsible"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/packages/native-ui/src/components/context-menu.tsx b/packages/native-ui/src/components/context-menu.tsx
new file mode 100644
index 00000000..e70f3cfc
--- /dev/null
+++ b/packages/native-ui/src/components/context-menu.tsx
@@ -0,0 +1,303 @@
+import { cn } from "@init/utils/ui"
+import * as ContextMenuPrimitive from "@rn-primitives/context-menu"
+import * as React from "react"
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from "react-native"
+import { FadeIn } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, Icon } from "./icon"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: ContextMenuPrimitive.SubTriggerProps &
+  React.RefAttributes<ContextMenuPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode
+    iconClassName?: string
+    inset?: boolean
+  }) {
+  const { open } = ContextMenuPrimitive.useSubContext()
+  const icon = Platform.OS === "web" ? ChevronRightIcon : open ? ChevronUpIcon : ChevronDownIcon
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm select-none group-active:text-accent-foreground",
+        open && "text-accent-foreground"
+      )}
+    >
+      <ContextMenuPrimitive.SubTrigger
+        className={cn(
+          "group flex flex-row items-center justify-between rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+          }),
+          open && cn("bg-accent", Platform.select({ native: "mb-1" })),
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <Icon as={icon} className={cn("size-4 shrink-0 text-foreground", iconClassName)} />
+      </ContextMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ContextMenuPrimitive.SubContentProps & React.RefAttributes<ContextMenuPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <ContextMenuPrimitive.SubContent
+        className={cn(
+          "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+          Platform.select({
+            web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+          }),
+          className
+        )}
+        {...props}
+      />
+    </NativeOnlyAnimatedView>
+  )
+}
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function ContextMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: ContextMenuPrimitive.ContentProps &
+  React.RefAttributes<ContextMenuPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>
+    overlayClassName?: string
+    portalHost?: string
+  }) {
+  return (
+    <ContextMenuPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <ContextMenuPrimitive.Overlay
+          style={Platform.select({
+            native: overlayStyle
+              ? StyleSheet.flatten([
+                  StyleSheet.absoluteFill,
+                  overlayStyle as typeof StyleSheet.absoluteFill,
+                ])
+              : StyleSheet.absoluteFill,
+            web: overlayStyle ?? undefined,
+          })}
+          className={overlayClassName}
+        >
+          <NativeOnlyAnimatedView entering={FadeIn}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <ContextMenuPrimitive.Content
+                className={cn(
+                  "min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+                  Platform.select({
+                    web: cn(
+                      "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95",
+                      props.side === "bottom" && "slide-in-from-top-2",
+                      props.side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </ContextMenuPrimitive.Overlay>
+      </FullWindowOverlay>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: ContextMenuPrimitive.ItemProps &
+  React.RefAttributes<ContextMenuPrimitive.ItemRef> & {
+    className?: string
+    inset?: boolean
+    variant?: "default" | "destructive"
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm text-popover-foreground select-none group-active:text-popover-foreground",
+        variant === "destructive" && "text-destructive group-active:text-destructive"
+      )}
+    >
+      <ContextMenuPrimitive.Item
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: cn(
+              "cursor-default outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none",
+              variant === "destructive" && "focus:bg-destructive/10 dark:focus:bg-destructive/20"
+            ),
+          }),
+          variant === "destructive" && "active:bg-destructive/10 dark:active:bg-destructive/20",
+          props.disabled && "opacity-50",
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.CheckboxItemProps &
+  React.RefAttributes<ContextMenuPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <ContextMenuPrimitive.CheckboxItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <ContextMenuPrimitive.ItemIndicator>
+            <Icon
+              as={CheckIcon}
+              className={cn(
+                "size-4 text-foreground",
+                Platform.select({ web: "pointer-events-none" })
+              )}
+            />
+          </ContextMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </ContextMenuPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItemProps &
+  React.RefAttributes<ContextMenuPrimitive.RadioItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <ContextMenuPrimitive.RadioItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <ContextMenuPrimitive.ItemIndicator>
+            <View className="h-2 w-2 rounded-full bg-foreground" />
+          </ContextMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </ContextMenuPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.LabelProps &
+  React.RefAttributes<ContextMenuPrimitive.LabelRef> & {
+    className?: string
+    inset?: boolean
+  }) {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn(
+        "px-2 py-2 text-sm font-medium text-foreground sm:py-1.5",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.SeparatorProps & React.RefAttributes<ContextMenuPrimitive.SeparatorRef>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({ className, ...props }: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+}
diff --git a/packages/native-ui/src/components/dialog.tsx b/packages/native-ui/src/components/dialog.tsx
new file mode 100644
index 00000000..020857fd
--- /dev/null
+++ b/packages/native-ui/src/components/dialog.tsx
@@ -0,0 +1,144 @@
+import { cn } from "@init/utils/ui"
+import * as DialogPrimitive from "@rn-primitives/dialog"
+import * as React from "react"
+import { Platform, Text, View, type ViewProps } from "react-native"
+import { FadeIn, FadeOut } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { Icon, XIcon } from "./icon"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function DialogOverlay({
+  className,
+  children,
+  ...props
+}: Omit<DialogPrimitive.OverlayProps, "asChild"> &
+  React.RefAttributes<DialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <FullWindowOverlay>
+      <DialogPrimitive.Overlay
+        className={cn(
+          "absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-black/50 p-2",
+          Platform.select({
+            web: "animate-in fade-in-0 fixed cursor-default [&>*]:cursor-auto",
+          }),
+          className
+        )}
+        {...props}
+        asChild={Platform.OS !== "web"}
+      >
+        <NativeOnlyAnimatedView entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)}>
+          <NativeOnlyAnimatedView entering={FadeIn.delay(50)} exiting={FadeOut.duration(150)}>
+            {children}
+          </NativeOnlyAnimatedView>
+        </NativeOnlyAnimatedView>
+      </DialogPrimitive.Overlay>
+    </FullWindowOverlay>
+  )
+}
+function DialogContent({
+  className,
+  portalHost,
+  children,
+  ...props
+}: DialogPrimitive.ContentProps &
+  React.RefAttributes<DialogPrimitive.ContentRef> & {
+    portalHost?: string
+  }) {
+  return (
+    <DialogPortal hostName={portalHost}>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          className={cn(
+            "z-50 mx-auto flex w-full flex-col gap-4 rounded-lg border border-border bg-background p-6 shadow-lg shadow-black/5 sm:max-w-lg",
+            Platform.select({
+              web: "animate-in fade-in-0 zoom-in-95 web:max-w-[calc(100%-2rem)] duration-200",
+            }),
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <DialogPrimitive.Close
+            className={cn(
+              "absolute top-4 right-4 rounded opacity-70 active:opacity-100",
+              Platform.select({
+                web: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
+              })
+            )}
+            hitSlop={12}
+          >
+            <Icon
+              as={XIcon}
+              className={cn("web:pointer-events-none size-4 shrink-0 text-accent-foreground")}
+            />
+            <Text className="sr-only">Close</Text>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} />
+  )
+}
+
+function DialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.TitleProps & React.RefAttributes<DialogPrimitive.TitleRef>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-lg leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.DescriptionProps & React.RefAttributes<DialogPrimitive.DescriptionRef>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/native-ui/src/components/dropdown-menu.tsx b/packages/native-ui/src/components/dropdown-menu.tsx
new file mode 100644
index 00000000..c2c512c8
--- /dev/null
+++ b/packages/native-ui/src/components/dropdown-menu.tsx
@@ -0,0 +1,311 @@
+import { cn } from "@init/utils/ui"
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu"
+import * as React from "react"
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from "react-native"
+import { FadeIn } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, Icon } from "./icon"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: DropdownMenuPrimitive.SubTriggerProps &
+  React.RefAttributes<DropdownMenuPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode
+    iconClassName?: string
+    inset?: boolean
+  }) {
+  const { open } = DropdownMenuPrimitive.useSubContext()
+  const icon = Platform.OS === "web" ? ChevronRightIcon : open ? ChevronUpIcon : ChevronDownIcon
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm select-none group-active:text-accent-foreground",
+        open && "text-accent-foreground"
+      )}
+    >
+      <DropdownMenuPrimitive.SubTrigger
+        className={cn(
+          "group flex flex-row items-center justify-between rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+          }),
+          open && "bg-accent",
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <Icon as={icon} className={cn("size-4 shrink-0 text-foreground", iconClassName)} />
+      </DropdownMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SubContentProps &
+  React.RefAttributes<DropdownMenuPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <DropdownMenuPrimitive.SubContent
+        className={cn(
+          "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+          Platform.select({
+            web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+          }),
+          className
+        )}
+        {...props}
+      />
+    </NativeOnlyAnimatedView>
+  )
+}
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function DropdownMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: DropdownMenuPrimitive.ContentProps &
+  React.RefAttributes<DropdownMenuPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>
+    overlayClassName?: string
+    portalHost?: string
+  }) {
+  return (
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <DropdownMenuPrimitive.Overlay
+          style={Platform.select({
+            native: overlayStyle
+              ? StyleSheet.flatten([
+                  StyleSheet.absoluteFill,
+                  overlayStyle as typeof StyleSheet.absoluteFill,
+                ])
+              : StyleSheet.absoluteFill,
+            web: overlayStyle ?? undefined,
+          })}
+          className={overlayClassName}
+        >
+          <NativeOnlyAnimatedView entering={FadeIn}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <DropdownMenuPrimitive.Content
+                className={cn(
+                  "min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+                  Platform.select({
+                    web: cn(
+                      "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95",
+                      props.side === "bottom" && "slide-in-from-top-2",
+                      props.side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </DropdownMenuPrimitive.Overlay>
+      </FullWindowOverlay>
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: DropdownMenuPrimitive.ItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.ItemRef> & {
+    className?: string
+    inset?: boolean
+    variant?: "default" | "destructive"
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm text-popover-foreground select-none group-active:text-popover-foreground",
+        variant === "destructive" && "text-destructive group-active:text-destructive"
+      )}
+    >
+      <DropdownMenuPrimitive.Item
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: cn(
+              "cursor-default outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none",
+              variant === "destructive" && "focus:bg-destructive/10 dark:focus:bg-destructive/20"
+            ),
+          }),
+          variant === "destructive" && "active:bg-destructive/10 dark:active:bg-destructive/20",
+          props.disabled && "opacity-50",
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.CheckboxItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <DropdownMenuPrimitive.CheckboxItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <DropdownMenuPrimitive.ItemIndicator>
+            <Icon
+              as={CheckIcon}
+              className={cn(
+                "size-4 text-foreground",
+                Platform.select({ web: "pointer-events-none" })
+              )}
+            />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </DropdownMenuPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.RadioItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.RadioItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <DropdownMenuPrimitive.RadioItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <DropdownMenuPrimitive.ItemIndicator>
+            <View className="h-2 w-2 rounded-full bg-foreground" />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </DropdownMenuPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.LabelProps &
+  React.RefAttributes<DropdownMenuPrimitive.LabelRef> & {
+    className?: string
+    inset?: boolean
+  }) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn(
+        "px-2 py-2 text-sm font-medium text-foreground sm:py-1.5",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SeparatorProps & React.RefAttributes<DropdownMenuPrimitive.SeparatorRef>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({ className, ...props }: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+}
diff --git a/packages/native-ui/src/components/hover-card.tsx b/packages/native-ui/src/components/hover-card.tsx
new file mode 100644
index 00000000..6232645c
--- /dev/null
+++ b/packages/native-ui/src/components/hover-card.tsx
@@ -0,0 +1,52 @@
+import { cn } from "@init/utils/ui"
+import * as HoverCardPrimitive from "@rn-primitives/hover-card"
+import * as React from "react"
+import { Platform, StyleSheet } 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"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: HoverCardPrimitive.ContentProps & React.RefAttributes<HoverCardPrimitive.ContentRef>) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <FullWindowOverlay>
+        <HoverCardPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+          <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <HoverCardPrimitive.Content
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                  "z-50 w-64 rounded-md border border-border bg-popover p-4 shadow-md shadow-black/5 outline-hidden",
+                  Platform.select({
+                    web: cn(
+                      "origin-(--radix-hover-card-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95 [&>*]:cursor-auto",
+                      props.side === "bottom" && "slide-in-from-top-2",
+                      props.side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </HoverCardPrimitive.Overlay>
+      </FullWindowOverlay>
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger }
diff --git a/packages/native-ui/src/components/icon.tsx b/packages/native-ui/src/components/icon.tsx
index 64c25214..2b0e4d9b 100644
--- a/packages/native-ui/src/components/icon.tsx
+++ b/packages/native-ui/src/components/icon.tsx
@@ -1,4 +1,5 @@
-import type { ElementType } from "react"
+import type { ComponentProps, ElementType } from "react"
+import Feather from "@expo/vector-icons/Feather"
 import { cn } from "@init/utils/ui"
 import { withUniwind } from "uniwind"
 
@@ -31,4 +32,29 @@ function Icon({ as: IconComponent, className, ...props }: IconProps) {
   )
 }
 
-export { Icon }
+type FeatherIconProps = Omit<ComponentProps<typeof Feather>, "name">
+
+const CheckIcon = (props: FeatherIconProps) => <Feather name="check" {...props} />
+
+const ChevronLeftIcon = (props: FeatherIconProps) => <Feather name="chevron-left" {...props} />
+
+const ChevronDownIcon = (props: FeatherIconProps) => <Feather name="chevron-down" {...props} />
+
+const ChevronRightIcon = (props: FeatherIconProps) => <Feather name="chevron-right" {...props} />
+
+const ChevronUpIcon = (props: FeatherIconProps) => <Feather name="chevron-up" {...props} />
+
+const SearchIcon = (props: FeatherIconProps) => <Feather name="search" {...props} />
+
+const XIcon = (props: FeatherIconProps) => <Feather name="x" {...props} />
+
+export {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  Icon,
+  SearchIcon,
+  XIcon,
+}
diff --git a/packages/native-ui/src/components/input.tsx b/packages/native-ui/src/components/input.tsx
new file mode 100644
index 00000000..a2678743
--- /dev/null
+++ b/packages/native-ui/src/components/input.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@init/utils/ui"
+import { Platform, TextInput, type TextInputProps } from "react-native"
+
+type InputProps = TextInputProps &
+  React.RefAttributes<TextInput> & {
+    placeholderClassName?: string
+  }
+
+function Input({ className, placeholderClassName: _placeholderClassName, ...props }: InputProps) {
+  return (
+    <TextInput
+      className={cn(
+        "flex h-10 w-full min-w-0 flex-row items-center rounded-md border border-input bg-background px-3 py-1 text-base leading-5 text-foreground shadow-sm shadow-black/5 sm:h-9 dark:bg-input/30",
+        props.editable === false &&
+          cn(
+            "opacity-50",
+            Platform.select({ web: "disabled:pointer-events-none disabled:cursor-not-allowed" })
+          ),
+        Platform.select({
+          native: "placeholder:text-muted-foreground/50",
+          web: cn(
+            "transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground md:text-sm",
+            "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+          ),
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/packages/native-ui/src/components/label.tsx b/packages/native-ui/src/components/label.tsx
new file mode 100644
index 00000000..4e11eed4
--- /dev/null
+++ b/packages/native-ui/src/components/label.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@init/utils/ui"
+import * as LabelPrimitive from "@rn-primitives/label"
+import { Platform } from "react-native"
+
+function Label({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  ...props
+}: LabelPrimitive.TextProps & React.RefAttributes<LabelPrimitive.TextRef>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        "flex flex-row items-center gap-2 select-none",
+        Platform.select({
+          web: "cursor-default leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        }),
+        disabled && "opacity-50"
+      )}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+    >
+      <LabelPrimitive.Text
+        className={cn(
+          "text-sm font-medium text-foreground",
+          Platform.select({ web: "leading-none" }),
+          className
+        )}
+        {...props}
+      />
+    </LabelPrimitive.Root>
+  )
+}
+
+export { Label }
diff --git a/packages/native-ui/src/components/large-title-header.tsx b/packages/native-ui/src/components/large-title-header.tsx
deleted file mode 100644
index d5f61070..00000000
--- a/packages/native-ui/src/components/large-title-header.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export { LargeTitleHeader } from "#components/large-title-header/index.ts"
-export type {
-  LargeTitleHeaderProps,
-  LargeTitleSearchBarRef,
-} from "#components/large-title-header/index.ts"
diff --git a/packages/native-ui/src/components/large-title-header/index.ts b/packages/native-ui/src/components/large-title-header/index.ts
deleted file mode 100644
index 5152242e..00000000
--- a/packages/native-ui/src/components/large-title-header/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { LargeTitleHeader } from "./large-title-header"
-export type { LargeTitleHeaderProps, LargeTitleSearchBarRef } from "./types"
diff --git a/packages/native-ui/src/components/large-title-header/large-title-header.ios.tsx b/packages/native-ui/src/components/large-title-header/large-title-header.ios.tsx
deleted file mode 100644
index 1b9c1b7a..00000000
--- a/packages/native-ui/src/components/large-title-header/large-title-header.ios.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Stack } from "expo-router"
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated"
-import { useCSSVariable } from "uniwind"
-import type {
-  LargeTitleHeaderProps,
-  NativeStackNavigationOptions,
-  NativeStackNavigationSearchBarOptions,
-} from "./types"
-import { checkIsLiquidGlassSupported } from "../../utils"
-
-const isLiquidGlassSupported = checkIsLiquidGlassSupported()
-
-function LargeTitleHeader(props: LargeTitleHeaderProps) {
-  const [searchValue, setSearchValue] = React.useState("")
-  const [isFocused, setIsFocused] = React.useState(false)
-  const backgroundValue = useCSSVariable("--color-background")
-  const cardValue = useCSSVariable("--color-card")
-  const foregroundValue = useCSSVariable("--color-foreground")
-  const mutedValue = useCSSVariable("--color-muted-foreground")
-
-  const background = typeof backgroundValue === "string" ? backgroundValue : undefined
-  const card = typeof cardValue === "string" ? cardValue : background
-  const foreground = typeof foregroundValue === "string" ? foregroundValue : undefined
-  const mutedForeground = typeof mutedValue === "string" ? mutedValue : foreground
-
-  return (
-    <>
-      <Stack.Screen
-        options={propsToScreenOptions(
-          props,
-          card,
-          foreground,
-          mutedForeground,
-          setIsFocused,
-          setSearchValue
-        )}
-      />
-      {props.searchBar?.content && (isFocused || searchValue.length > 0) ? (
-        <Animated.View
-          entering={FadeIn.delay(100).duration(200)}
-          exiting={FadeOut}
-          style={[StyleSheet.absoluteFill, { zIndex: 99_999 }]}
-        >
-          <Animated.View entering={FadeIn.delay(200).duration(400)} style={StyleSheet.absoluteFill}>
-            {props.searchBar.content}
-          </Animated.View>
-        </Animated.View>
-      ) : null}
-    </>
-  )
-}
-
-function propsToScreenOptions(
-  props: LargeTitleHeaderProps,
-  backgroundColor: string | undefined,
-  foregroundColor: string | undefined,
-  mutedForegroundColor: string | undefined,
-  setIsFocused: React.Dispatch<React.SetStateAction<boolean>>,
-  setSearchValue: React.Dispatch<React.SetStateAction<string>>
-): NativeStackNavigationOptions {
-  return {
-    headerBackButtonMenuEnabled: props.iosBackButtonMenuEnabled,
-    headerBackTitle: props.iosBackButtonTitle,
-    headerBackVisible: props.backVisible,
-    headerBlurEffect: isLiquidGlassSupported
-      ? undefined
-      : props.iosBlurEffect === "none"
-        ? undefined
-        : (props.iosBlurEffect ?? "systemMaterial"),
-    headerLargeStyle: isLiquidGlassSupported
-      ? undefined
-      : { backgroundColor: props.backgroundColor ?? backgroundColor },
-    headerLargeTitle: true,
-    headerLargeTitleShadowVisible: props.shadowVisible,
-    headerLargeTitleStyle: foregroundColor ? { color: foregroundColor } : undefined,
-    headerLeft: props.leftView
-      ? (headerProps) => (
-          <View className="flex-row justify-center gap-4">
-            {typeof props.leftView === "function" ? props.leftView(headerProps) : props.leftView}
-          </View>
-        )
-      : undefined,
-    headerRight: props.rightView
-      ? (headerProps) => (
-          <View className="flex-row justify-center gap-4">
-            {typeof props.rightView === "function" ? props.rightView(headerProps) : props.rightView}
-          </View>
-        )
-      : undefined,
-    headerSearchBarOptions: props.searchBar
-      ? {
-          autoCapitalize: props.searchBar.autoCapitalize,
-          cancelButtonText: props.searchBar.iosCancelButtonText,
-          hideWhenScrolling: props.searchBar.iosHideWhenScrolling ?? false,
-          inputType: props.searchBar.inputType,
-          onBlur: () => {
-            setIsFocused(false)
-            props.searchBar?.onBlur?.()
-          },
-          onCancelButtonPress: props.searchBar.onCancelButtonPress,
-          onChangeText: (event) => {
-            const text = event.nativeEvent.text
-            setSearchValue(text)
-            props.searchBar?.onChangeText?.(text)
-          },
-          onFocus: () => {
-            setIsFocused(true)
-            props.searchBar?.onFocus?.()
-          },
-          onSearchButtonPress: props.searchBar.onSearchButtonPress,
-          placeholder: props.searchBar.placeholder ?? "Search...",
-          ref: props.searchBar.ref as NativeStackNavigationSearchBarOptions["ref"],
-          textColor: props.searchBar.textColor ?? foregroundColor,
-          tintColor: props.searchBar.iosTintColor ?? mutedForegroundColor,
-        }
-      : undefined,
-    headerShadowVisible: props.shadowVisible,
-    headerShown: props.shown,
-    headerStyle:
-      props.iosBlurEffect === "none"
-        ? { backgroundColor: props.backgroundColor ?? backgroundColor }
-        : undefined,
-    headerTintColor: foregroundColor,
-    headerTitle: props.title,
-    headerTitleStyle: foregroundColor ? { color: foregroundColor } : undefined,
-    headerTransparent: isLiquidGlassSupported ? true : props.iosBlurEffect !== "none",
-    ...props.screen,
-  }
-}
-
-export { LargeTitleHeader }
diff --git a/packages/native-ui/src/components/large-title-header/large-title-header.tsx b/packages/native-ui/src/components/large-title-header/large-title-header.tsx
deleted file mode 100644
index 551fbdb1..00000000
--- a/packages/native-ui/src/components/large-title-header/large-title-header.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import type { ReactNode } from "react"
-import { Stack } from "expo-router"
-import * as React from "react"
-import { StyleSheet, Text, TextInput, View } from "react-native"
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated"
-import { useCSSVariable } from "uniwind"
-import type { LargeTitleHeaderProps, NativeStackNavigationSearchBarOptions } from "./types"
-
-function LargeTitleHeader(props: LargeTitleHeaderProps) {
-  const [searchValue, setSearchValue] = React.useState("")
-  const [isFocused, setIsFocused] = React.useState(false)
-  const [showSearchBar, setShowSearchBar] = React.useState(false)
-
-  const backgroundValue = useCSSVariable("--color-background")
-  const cardValue = useCSSVariable("--color-card")
-  const foregroundValue = useCSSVariable("--color-foreground")
-  const inputValue = useCSSVariable("--color-input")
-  const primaryValue = useCSSVariable("--color-primary")
-  const borderValue = useCSSVariable("--color-border")
-  const mutedValue = useCSSVariable("--color-muted-foreground")
-
-  const background = typeof backgroundValue === "string" ? backgroundValue : undefined
-  const card = typeof cardValue === "string" ? cardValue : background
-  const foreground = typeof foregroundValue === "string" ? foregroundValue : undefined
-  const borderColor = typeof borderValue === "string" ? borderValue : undefined
-  const input = typeof inputValue === "string" ? inputValue : borderColor
-  const primary = typeof primaryValue === "string" ? primaryValue : foreground
-  const muted = typeof mutedValue === "string" ? mutedValue : undefined
-
-  const canShowOverlay = Boolean(props.searchBar?.content) && (isFocused || searchValue.length > 0)
-  const isInline = props.materialPreset === "inline"
-  const searchBarRef = props.searchBar?.ref
-  const handleSubmitEditing = props.searchBar?.materialOnSubmitEditing
-  const onChangeText = props.searchBar?.onChangeText
-
-  React.useEffect(() => {
-    if (!searchBarRef) return
-
-    searchBarRef.current = {
-      cancelSearch: () => {
-        setShowSearchBar(false)
-        setSearchValue("")
-        onChangeText?.("")
-      },
-      clearText: () => {
-        setSearchValue("")
-        onChangeText?.("")
-      },
-      focus: () => {
-        setShowSearchBar(true)
-      },
-      setText: (text) => {
-        setSearchValue(text)
-        onChangeText?.(text)
-      },
-    }
-
-    return () => {
-      searchBarRef.current = null
-    }
-  }, [onChangeText, searchBarRef])
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          headerShown: false,
-          ...props.screen,
-        }}
-      />
-      <View
-        className="px-4 pt-3 pb-4"
-        style={{
-          backgroundColor: props.backgroundColor ?? card,
-          borderBottomColor: borderColor,
-          borderBottomWidth: props.shadowVisible ? StyleSheet.hairlineWidth : 0,
-        }}
-      >
-        <View className="min-h-11 flex-row items-center justify-between">
-          <View className="flex-1 flex-row items-center">
-            {renderHeaderView(props.leftView, foreground)}
-            {isInline ? (
-              <Text
-                numberOfLines={1}
-                className={
-                  props.materialTitleClassName ?? "pl-3 text-2xl font-semibold text-foreground"
-                }
-              >
-                {props.title}
-              </Text>
-            ) : null}
-          </View>
-          <View className="flex-row items-center gap-3">
-            {props.searchBar ? (
-              <Text
-                className="text-base font-medium"
-                style={{ color: primary }}
-                onPress={() => {
-                  setShowSearchBar(true)
-                  props.searchBar?.onSearchButtonPress?.()
-                }}
-              >
-                Search
-              </Text>
-            ) : null}
-            {renderHeaderView(props.rightView, foreground)}
-          </View>
-        </View>
-        {isInline ? null : (
-          <View className="pt-5">
-            <Text
-              className={props.materialTitleClassName ?? "text-4xl font-bold text-foreground"}
-              numberOfLines={1}
-            >
-              {props.title}
-            </Text>
-          </View>
-        )}
-      </View>
-      {props.searchBar && showSearchBar ? (
-        <Animated.View entering={FadeIn} exiting={FadeOut} className="absolute inset-0 z-[99999]">
-          <View
-            className="px-4 pt-6 pb-3"
-            style={{ backgroundColor: props.backgroundColor ?? background }}
-          >
-            <View
-              className="flex-row items-center rounded-full px-4 py-2"
-              style={{
-                backgroundColor: input,
-                borderColor,
-                borderWidth: StyleSheet.hairlineWidth,
-              }}
-            >
-              <TextInput
-                autoCapitalize={props.searchBar.autoCapitalize}
-                blurOnSubmit={props.searchBar.materialBlurOnSubmit}
-                className="flex-1 text-base text-foreground"
-                keyboardType={searchBarInputTypeToKeyboardType(props.searchBar.inputType)}
-                onBlur={() => {
-                  setIsFocused(false)
-                  if (searchValue.length === 0) setShowSearchBar(false)
-                  props.searchBar?.onBlur?.()
-                }}
-                onChangeText={(text) => {
-                  setSearchValue(text)
-                  props.searchBar?.onChangeText?.(text)
-                }}
-                onFocus={() => {
-                  setIsFocused(true)
-                  props.searchBar?.onFocus?.()
-                }}
-                onSubmitEditing={handleSubmitEditing}
-                placeholder={props.searchBar.placeholder ?? "Search..."}
-                placeholderTextColor={muted}
-                returnKeyType="search"
-                style={{ color: props.searchBar.textColor ?? foreground }}
-                value={searchValue}
-              />
-              {searchValue.length > 0 ? (
-                <Text
-                  className="pl-3 text-sm font-medium"
-                  style={{ color: primary }}
-                  onPress={() => {
-                    setSearchValue("")
-                    props.searchBar?.onChangeText?.("")
-                    props.searchBar?.onCancelButtonPress?.()
-                  }}
-                >
-                  Clear
-                </Text>
-              ) : null}
-            </View>
-          </View>
-          <View className="flex-1">{props.searchBar.content}</View>
-        </Animated.View>
-      ) : null}
-      {canShowOverlay ? (
-        <Animated.View
-          entering={FadeIn.delay(100).duration(200)}
-          exiting={FadeOut}
-          style={[StyleSheet.absoluteFill, { zIndex: 99_998 }]}
-        >
-          <Animated.View entering={FadeIn.delay(200).duration(400)} style={StyleSheet.absoluteFill}>
-            {props.searchBar?.content}
-          </Animated.View>
-        </Animated.View>
-      ) : null}
-    </>
-  )
-}
-
-function renderHeaderView(view: unknown, tintColor: string | undefined): ReactNode {
-  if (typeof view === "function") {
-    const renderView = view as (headerProps: {
-      canGoBack: boolean
-      tintColor?: string
-    }) => ReactNode
-
-    return renderView({ canGoBack: false, tintColor })
-  }
-
-  return view as ReactNode
-}
-
-function searchBarInputTypeToKeyboardType(
-  inputType: NativeStackNavigationSearchBarOptions["inputType"]
-) {
-  const keyboardTypeByInputType = {
-    email: "email-address",
-    number: "numeric",
-    phone: "phone-pad",
-  } as const
-
-  return inputType && inputType in keyboardTypeByInputType
-    ? keyboardTypeByInputType[inputType as keyof typeof keyboardTypeByInputType]
-    : "default"
-}
-
-export { LargeTitleHeader }
diff --git a/packages/native-ui/src/components/large-title-header/types.ts b/packages/native-ui/src/components/large-title-header/types.ts
deleted file mode 100644
index faa4c0c3..00000000
--- a/packages/native-ui/src/components/large-title-header/types.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { Stack } from "expo-router"
-import type * as React from "react"
-import type { TextInputSubmitEditingEvent } from "react-native"
-import type { SearchBarCommands } from "react-native-screens"
-
-type NativeStackNavigationOptions = Exclude<
-  NonNullable<React.ComponentPropsWithoutRef<typeof Stack.Screen>["options"]>,
-  // oxlint-disable-next-line no-explicit-any
-  (props: any) => any
->
-
-type ScreenOptions = Pick<
-  NativeStackNavigationOptions,
-  | "animation"
-  | "animationDuration"
-  | "contentStyle"
-  | "navigationBarColor"
-  | "animationTypeForReplace"
-  | "autoHideHomeIndicator"
-  | "gestureEnabled"
-  | "freezeOnBlur"
-  | "fullScreenGestureEnabled"
-  | "gestureDirection"
-  | "navigationBarHidden"
-  | "orientation"
-  | "presentation"
-  | "statusBarTranslucent"
-  | "statusBarStyle"
-  | "statusBarHidden"
-  | "statusBarAnimation"
-  | "title"
-  | "animationMatchesGesture"
-  | "fullScreenGestureShadowEnabled"
-  | "gestureResponseDistance"
-  | "navigationBarTranslucent"
-  | "keyboardHandlingEnabled"
-  | "sheetAllowedDetents"
-  | "sheetCornerRadius"
-  | "sheetElevation"
-  | "sheetExpandsWhenScrolledToEdge"
-  | "sheetGrabberVisible"
-  | "sheetInitialDetentIndex"
-  | "sheetLargestUndimmedDetentIndex"
-  | "unstable_sheetFooter"
->
-
-type HeaderOptions = Omit<NativeStackNavigationOptions, keyof ScreenOptions>
-
-type NativeStackNavigationSearchBarOptions = NonNullable<HeaderOptions["headerSearchBarOptions"]>
-
-type LargeTitleSearchBarRef = Omit<SearchBarCommands, "blur" | "toggleCancelButton">
-
-type LargeTitleHeaderProps = {
-  iosBackButtonMenuEnabled?: boolean
-  iosBackButtonTitle?: string
-  iosBackButtonTitleVisible?: boolean
-  /**
-   * Default is 'systemMaterial'
-   */
-  iosBlurEffect?: "none" | "systemMaterial"
-  materialPreset?: "stack" | "inline"
-  materialTitleClassName?: string
-  backVisible?: boolean
-  /**
-   * IOS - iosBlurEffect must be set to 'none' for this to work
-   * @default iOS: true | Material: false
-   */
-  shadowVisible?: boolean
-  leftView?: HeaderOptions["headerLeft"]
-  rightView?: HeaderOptions["headerRight"]
-  shown?: boolean
-  title?: string
-  backgroundColor?: string
-  screen?: ScreenOptions
-  searchBar?: {
-    iosCancelButtonText?: string
-    iosHideWhenScrolling?: boolean
-    iosTintColor?: string
-    materialRightView?: HeaderOptions["headerRight"]
-    materialBlurOnSubmit?: boolean
-    materialOnSubmitEditing?: ((event: TextInputSubmitEditingEvent) => void) | undefined
-    autoCapitalize?: NativeStackNavigationSearchBarOptions["autoCapitalize"]
-    inputType?: NativeStackNavigationSearchBarOptions["inputType"]
-    onBlur?: () => void
-    onCancelButtonPress?: () => void
-    onChangeText?: (text: string) => void
-    onFocus?: () => void
-    onSearchButtonPress?: () => void
-    placeholder?: string
-    ref?: React.MutableRefObject<LargeTitleSearchBarRef | null>
-    textColor?: string
-    content?: React.ReactNode
-  }
-}
-
-export type {
-  LargeTitleHeaderProps,
-  LargeTitleSearchBarRef,
-  NativeStackNavigationOptions,
-  NativeStackNavigationSearchBarOptions,
-}
diff --git a/packages/native-ui/src/components/menubar.tsx b/packages/native-ui/src/components/menubar.tsx
new file mode 100644
index 00000000..3e5e247d
--- /dev/null
+++ b/packages/native-ui/src/components/menubar.tsx
@@ -0,0 +1,377 @@
+import { cn } from "@init/utils/ui"
+import * as MenubarPrimitive from "@rn-primitives/menubar"
+import { Portal } from "@rn-primitives/portal"
+import * as React from "react"
+import {
+  Platform,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from "react-native"
+import { FadeIn } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, Icon } from "./icon"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+type MenubarProps = Omit<MenubarPrimitive.RootProps, "onValueChange" | "value"> &
+  React.RefAttributes<MenubarPrimitive.RootRef> & {
+    onValueChange?: (value?: string) => void
+    value?: string
+  }
+
+function Menubar({
+  className,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  ...props
+}: MenubarProps) {
+  const id = React.useId()
+  const [value, setValue] = React.useState<string | undefined>()
+
+  function closeMenu() {
+    if (onValueChangeProp) {
+      onValueChangeProp()
+      return
+    }
+    setValue(undefined)
+  }
+
+  return (
+    <>
+      {Platform.OS !== "web" && (value || valueProp) ? (
+        <Portal name={`menubar-overlay-${id}`}>
+          <Pressable onPress={closeMenu} style={StyleSheet.absoluteFill} />
+        </Portal>
+      ) : null}
+      <MenubarPrimitive.Root
+        className={cn(
+          "flex h-10 flex-row items-center gap-1 rounded-md border border-border bg-background p-1 shadow-sm shadow-black/5 sm:h-9",
+          className
+        )}
+        value={value ?? valueProp}
+        onValueChange={onValueChangeProp ?? setValue}
+        {...props}
+      />
+    </>
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: MenubarPrimitive.TriggerProps & React.RefAttributes<MenubarPrimitive.TriggerRef>) {
+  const { value } = MenubarPrimitive.useRootContext()
+  const { value: itemValue } = MenubarPrimitive.useMenuContext()
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm font-medium select-none group-active:text-accent-foreground",
+        value === itemValue && "text-accent-foreground"
+      )}
+    >
+      <MenubarPrimitive.Trigger
+        className={cn(
+          "group flex items-center rounded-md px-2 py-1.5 sm:py-1",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none",
+          }),
+          value === itemValue && "bg-accent",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: MenubarPrimitive.SubTriggerProps &
+  React.RefAttributes<MenubarPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode
+    iconClassName?: string
+    inset?: boolean
+  }) {
+  const { open } = MenubarPrimitive.useSubContext()
+  const icon = Platform.OS === "web" ? ChevronRightIcon : open ? ChevronUpIcon : ChevronDownIcon
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm select-none group-active:text-accent-foreground",
+        open && "text-accent-foreground"
+      )}
+    >
+      <MenubarPrimitive.SubTrigger
+        className={cn(
+          "group flex flex-row items-center justify-between rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+          }),
+          open && "bg-accent",
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <Icon as={icon} className={cn("size-4 shrink-0 text-foreground", iconClassName)} />
+      </MenubarPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: MenubarPrimitive.SubContentProps & React.RefAttributes<MenubarPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <MenubarPrimitive.SubContent
+        className={cn(
+          "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+          Platform.select({
+            web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+          }),
+          className
+        )}
+        {...props}
+      />
+    </NativeOnlyAnimatedView>
+  )
+}
+
+function MenubarContent({
+  className,
+  overlayClassName: _overlayClassName,
+  overlayStyle: _overlayStyle,
+  portalHost,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: MenubarPrimitive.ContentProps &
+  React.RefAttributes<MenubarPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>
+    overlayClassName?: string
+    portalHost?: string
+  }) {
+  return (
+    <MenubarPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <NativeOnlyAnimatedView
+          entering={FadeIn}
+          style={StyleSheet.absoluteFill}
+          pointerEvents="box-none"
+        >
+          <TextClassContext.Provider value="text-popover-foreground">
+            <MenubarPrimitive.Content
+              className={cn(
+                "min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5",
+                Platform.select({
+                  web: cn(
+                    "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95",
+                    props.side === "bottom" && "slide-in-from-top-2",
+                    props.side === "top" && "slide-in-from-bottom-2"
+                  ),
+                }),
+                className
+              )}
+              align={align}
+              alignOffset={alignOffset}
+              sideOffset={sideOffset}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </NativeOnlyAnimatedView>
+      </FullWindowOverlay>
+    </MenubarPrimitive.Portal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: MenubarPrimitive.ItemProps &
+  React.RefAttributes<MenubarPrimitive.ItemRef> & {
+    className?: string
+    inset?: boolean
+    variant?: "default" | "destructive"
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm text-popover-foreground select-none group-active:text-popover-foreground",
+        variant === "destructive" && "text-destructive group-active:text-destructive"
+      )}
+    >
+      <MenubarPrimitive.Item
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: cn(
+              "cursor-default outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none",
+              variant === "destructive" && "focus:bg-destructive/10 dark:focus:bg-destructive/20"
+            ),
+          }),
+          variant === "destructive" && "active:bg-destructive/10 dark:active:bg-destructive/20",
+          props.disabled && "opacity-50",
+          inset && "pl-8",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.CheckboxItemProps &
+  React.RefAttributes<MenubarPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <MenubarPrimitive.CheckboxItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <MenubarPrimitive.ItemIndicator>
+            <Icon
+              as={CheckIcon}
+              className={cn(
+                "size-4 text-foreground",
+                Platform.select({ web: "pointer-events-none" })
+              )}
+            />
+          </MenubarPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </MenubarPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.RadioItemProps &
+  React.RefAttributes<MenubarPrimitive.RadioItemRef> & {
+    children?: React.ReactNode
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <MenubarPrimitive.RadioItem
+        className={cn(
+          "group relative flex flex-row items-center gap-2 rounded-sm py-2 pr-2 pl-8 active:bg-accent sm:py-1.5",
+          Platform.select({
+            web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+          }),
+          props.disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <MenubarPrimitive.ItemIndicator>
+            <View className="h-2 w-2 rounded-full bg-foreground" />
+          </MenubarPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </MenubarPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.LabelProps &
+  React.RefAttributes<MenubarPrimitive.LabelRef> & {
+    className?: string
+    inset?: boolean
+  }) {
+  return (
+    <MenubarPrimitive.Label
+      className={cn(
+        "px-2 py-2 text-sm font-medium text-foreground sm:py-1.5",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: MenubarPrimitive.SeparatorProps & React.RefAttributes<MenubarPrimitive.SeparatorRef>) {
+  return (
+    <MenubarPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+  )
+}
+
+function MenubarShortcut({ className, ...props }: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+}
diff --git a/packages/native-ui/src/components/native-only-animated-view.tsx b/packages/native-ui/src/components/native-only-animated-view.tsx
new file mode 100644
index 00000000..086885b0
--- /dev/null
+++ b/packages/native-ui/src/components/native-only-animated-view.tsx
@@ -0,0 +1,22 @@
+import { Platform } from "react-native"
+import Animated from "react-native-reanimated"
+
+/**
+ * This component is used to wrap animated views that should only be animated on native.
+ * @param props - The props for the animated view.
+ * @returns The animated view if the platform is native, otherwise the children.
+ * @example
+ * <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+ *   <Text>I am only animated on native</Text>
+ * </NativeOnlyAnimatedView>
+ */
+function NativeOnlyAnimatedView(
+  props: React.ComponentProps<typeof Animated.View> & React.RefAttributes<Animated.View>
+) {
+  if (Platform.OS === "web") {
+    return props.children as React.ReactNode
+  }
+  return <Animated.View {...props} />
+}
+
+export { NativeOnlyAnimatedView }
diff --git a/packages/native-ui/src/components/popover.tsx b/packages/native-ui/src/components/popover.tsx
new file mode 100644
index 00000000..d661787d
--- /dev/null
+++ b/packages/native-ui/src/components/popover.tsx
@@ -0,0 +1,56 @@
+import { cn } from "@init/utils/ui"
+import * as PopoverPrimitive from "@rn-primitives/popover"
+import * as React from "react"
+import { Platform, StyleSheet } 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"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: PopoverPrimitive.ContentProps &
+  React.RefAttributes<PopoverPrimitive.ContentRef> & {
+    portalHost?: string
+  }) {
+  return (
+    <PopoverPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <PopoverPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+          <NativeOnlyAnimatedView entering={FadeIn.duration(200)} exiting={FadeOut}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <PopoverPrimitive.Content
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                  "z-50 w-72 rounded-md border border-border bg-popover p-4 shadow-md shadow-black/5 outline-hidden",
+                  Platform.select({
+                    web: cn(
+                      "origin-(--radix-popover-content-transform-origin) animate-in cursor-auto fade-in-0 zoom-in-95",
+                      props.side === "bottom" && "slide-in-from-top-2",
+                      props.side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </PopoverPrimitive.Overlay>
+      </FullWindowOverlay>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverContent, PopoverTrigger }
diff --git a/packages/native-ui/src/components/progress.tsx b/packages/native-ui/src/components/progress.tsx
new file mode 100644
index 00000000..432022d9
--- /dev/null
+++ b/packages/native-ui/src/components/progress.tsx
@@ -0,0 +1,85 @@
+import { cn } from "@init/utils/ui"
+import * as ProgressPrimitive from "@rn-primitives/progress"
+import { Platform, View } from "react-native"
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring,
+} from "react-native-reanimated"
+
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: ProgressPrimitive.RootProps &
+  React.RefAttributes<ProgressPrimitive.RootRef> & {
+    indicatorClassName?: string
+  }) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+      {...props}
+    >
+      <Indicator value={value} className={indicatorClassName} />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
+
+const Indicator = Platform.select({
+  default: NullIndicator,
+  native: NativeIndicator,
+  web: WebIndicator,
+})
+
+type IndicatorProps = {
+  value: number | undefined | null
+  className?: string
+}
+
+function WebIndicator({ value, className }: IndicatorProps) {
+  if (Platform.OS !== "web") {
+    return null
+  }
+
+  return (
+    <View
+      className={cn("h-full w-full flex-1 bg-primary transition-all", className)}
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    >
+      <ProgressPrimitive.Indicator className={cn("h-full w-full", className)} />
+    </View>
+  )
+}
+
+function NativeIndicator({ value, className }: IndicatorProps) {
+  const progress = useDerivedValue(() => value ?? 0)
+
+  const indicator = useAnimatedStyle(
+    () => ({
+      width: withSpring(
+        `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
+        { overshootClamping: true }
+      ),
+    }),
+    [value]
+  )
+
+  if (Platform.OS === "web") {
+    return null
+  }
+
+  return (
+    <ProgressPrimitive.Indicator asChild>
+      <Animated.View style={indicator} className={cn("h-full bg-foreground", className)} />
+    </ProgressPrimitive.Indicator>
+  )
+}
+
+function NullIndicator(_props: IndicatorProps) {
+  return null
+}
diff --git a/packages/native-ui/src/components/radio-group.tsx b/packages/native-ui/src/components/radio-group.tsx
new file mode 100644
index 00000000..323e634c
--- /dev/null
+++ b/packages/native-ui/src/components/radio-group.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@init/utils/ui"
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group"
+import { Platform } from "react-native"
+
+function RadioGroup({
+  className,
+  ...props
+}: RadioGroupPrimitive.RootProps & React.RefAttributes<RadioGroupPrimitive.RootRef>) {
+  return <RadioGroupPrimitive.Root className={cn("gap-3", className)} {...props} />
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupPrimitive.ItemProps & React.RefAttributes<RadioGroupPrimitive.ItemRef>) {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        "aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input shadow-sm shadow-black/5 dark:bg-input/30",
+        Platform.select({
+          web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed",
+        }),
+        props.disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-primary" />
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/packages/native-ui/src/components/select.tsx b/packages/native-ui/src/components/select.tsx
new file mode 100644
index 00000000..512d2357
--- /dev/null
+++ b/packages/native-ui/src/components/select.tsx
@@ -0,0 +1,254 @@
+import { cn } from "@init/utils/ui"
+import * as SelectPrimitive from "@rn-primitives/select"
+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 { CheckIcon, ChevronDownIcon, ChevronUpIcon, Icon } from "./icon"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+type Option = SelectPrimitive.Option
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+function SelectValue({
+  ref,
+  className,
+  ...props
+}: SelectPrimitive.ValueProps &
+  React.RefAttributes<SelectPrimitive.ValueRef> & {
+    className?: string
+  }) {
+  const { value } = SelectPrimitive.useRootContext()
+  return (
+    <SelectPrimitive.Value
+      ref={ref}
+      className={cn(
+        "line-clamp-1 flex flex-row items-center gap-2 text-sm text-foreground",
+        !value && "text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  size = "default",
+  ...props
+}: SelectPrimitive.TriggerProps &
+  React.RefAttributes<SelectPrimitive.TriggerRef> & {
+    children?: React.ReactNode
+    size?: "default" | "sm"
+  }) {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex h-10 flex-row items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 shadow-sm shadow-black/5 sm:h-9 dark:bg-input/30 dark:active:bg-input/50",
+        Platform.select({
+          web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 w-fit whitespace-nowrap text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        }),
+        props.disabled && "opacity-50",
+        size === "sm" && "h-8 py-2 sm:py-1.5",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <Icon as={ChevronDownIcon} aria-hidden className="size-4 text-muted-foreground" />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  portalHost,
+  ...props
+}: SelectPrimitive.ContentProps &
+  React.RefAttributes<SelectPrimitive.ContentRef> & {
+    className?: string
+    portalHost?: string
+  }) {
+  return (
+    <SelectPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <SelectPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+          <TextClassContext.Provider value="text-popover-foreground">
+            <NativeOnlyAnimatedView className="z-50" entering={FadeIn} exiting={FadeOut}>
+              <SelectPrimitive.Content
+                className={cn(
+                  "relative z-50 min-w-[8rem] rounded-md border border-border bg-popover shadow-md shadow-black/5",
+                  Platform.select({
+                    native: "p-1",
+                    web: cn(
+                      "max-h-52 origin-(--radix-select-content-transform-origin) animate-in overflow-x-hidden overflow-y-auto fade-in-0 zoom-in-95",
+                      props.side === "bottom" && "slide-in-from-top-2",
+                      props.side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  position === "popper" &&
+                    Platform.select({
+                      web: cn(
+                        props.side === "bottom" && "translate-y-1",
+                        props.side === "top" && "-translate-y-1"
+                      ),
+                    }),
+                  className
+                )}
+                position={position}
+                {...props}
+              >
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                  className={cn(
+                    "p-1",
+                    position === "popper" &&
+                      cn(
+                        "w-full",
+                        Platform.select({
+                          web: "h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]",
+                        })
+                      )
+                  )}
+                >
+                  {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+              </SelectPrimitive.Content>
+            </NativeOnlyAnimatedView>
+          </TextClassContext.Provider>
+        </SelectPrimitive.Overlay>
+      </FullWindowOverlay>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.LabelProps & React.RefAttributes<SelectPrimitive.LabelRef>) {
+  return (
+    <SelectPrimitive.Label
+      className={cn("px-2 py-2 text-xs text-muted-foreground sm:py-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  ...props
+}: SelectPrimitive.ItemProps & React.RefAttributes<SelectPrimitive.ItemRef>) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "group relative flex w-full flex-row items-center gap-2 rounded-sm py-2 pr-8 pl-2 active:bg-accent sm:py-1.5",
+        Platform.select({
+          web: "focus:bg-accent focus:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-default outline-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none",
+        }),
+        props.disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <View className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Icon as={CheckIcon} className="size-4 shrink-0 text-muted-foreground" />
+        </SelectPrimitive.ItemIndicator>
+      </View>
+      <SelectPrimitive.ItemText className="text-sm text-foreground select-none group-active:text-accent-foreground" />
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.SeparatorProps & React.RefAttributes<SelectPrimitive.SeparatorRef>) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn(
+        "-mx-1 my-1 h-px bg-border",
+        Platform.select({ web: "pointer-events-none" }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Web-only helper that returns null on native platforms.
+ */
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  if (Platform.OS !== "web") {
+    return null
+  }
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <Icon as={ChevronUpIcon} className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+/**
+ * Web-only helper that returns null on native platforms.
+ */
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  if (Platform.OS !== "web") {
+    return null
+  }
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <Icon as={ChevronDownIcon} className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+/**
+ * Native-only wrapper that falls back to rendering children directly on web.
+ */
+function NativeSelectScrollView({ className, ...props }: React.ComponentProps<typeof ScrollView>) {
+  if (Platform.OS === "web") {
+    return props.children
+  }
+  return <ScrollView className={cn("max-h-52", className)} {...props} />
+}
+
+export {
+  NativeSelectScrollView,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type Option,
+}
diff --git a/packages/native-ui/src/components/separator.tsx b/packages/native-ui/src/components/separator.tsx
new file mode 100644
index 00000000..b2d9ba30
--- /dev/null
+++ b/packages/native-ui/src/components/separator.tsx
@@ -0,0 +1,24 @@
+import { cn } from "@init/utils/ui"
+import * as SeparatorPrimitive from "@rn-primitives/separator"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorPrimitive.RootProps & React.RefAttributes<SeparatorPrimitive.RootRef>) {
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/native-ui/src/components/skeleton.tsx b/packages/native-ui/src/components/skeleton.tsx
new file mode 100644
index 00000000..18eb96e6
--- /dev/null
+++ b/packages/native-ui/src/components/skeleton.tsx
@@ -0,0 +1,38 @@
+import type { View } from "react-native"
+import { cn } from "@init/utils/ui"
+import * as React from "react"
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated"
+
+const duration = 1000
+
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  const sv = useSharedValue(1)
+
+  React.useEffect(() => {
+    sv.value = withRepeat(withTiming(0.5, { duration }), -1, true)
+  }, [sv, sv.value])
+
+  const style = useAnimatedStyle(
+    () => ({
+      opacity: sv.value,
+    }),
+    [sv]
+  )
+  return (
+    <Animated.View
+      style={style}
+      className={cn("rounded-md bg-secondary dark:bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/native-ui/src/components/switch.tsx b/packages/native-ui/src/components/switch.tsx
new file mode 100644
index 00000000..82acb87e
--- /dev/null
+++ b/packages/native-ui/src/components/switch.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@init/utils/ui"
+import * as SwitchPrimitives from "@rn-primitives/switch"
+import { Platform } from "react-native"
+
+function Switch({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & React.RefAttributes<SwitchPrimitives.RootRef>) {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        "flex h-[1.15rem] w-8 shrink-0 flex-row items-center rounded-full border border-transparent shadow-sm shadow-black/5",
+        Platform.select({
+          web: "focus-visible:border-ring focus-visible:ring-ring/50 peer inline-flex outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed",
+        }),
+        props.checked ? "bg-primary" : "bg-input dark:bg-input/80",
+        props.disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "size-4 rounded-full bg-background transition-transform",
+          Platform.select({
+            web: "pointer-events-none block ring-0",
+          }),
+          props.checked
+            ? "translate-x-3.5 dark:bg-primary-foreground"
+            : "translate-x-0 dark:bg-foreground"
+        )}
+      />
+    </SwitchPrimitives.Root>
+  )
+}
+
+export { Switch }
diff --git a/packages/native-ui/src/components/tabs.tsx b/packages/native-ui/src/components/tabs.tsx
new file mode 100644
index 00000000..0987d317
--- /dev/null
+++ b/packages/native-ui/src/components/tabs.tsx
@@ -0,0 +1,69 @@
+import { cn } from "@init/utils/ui"
+import * as TabsPrimitive from "@rn-primitives/tabs"
+import { Platform } from "react-native"
+import { TextClassContext } from "./text"
+
+function Tabs({
+  className,
+  ...props
+}: TabsPrimitive.RootProps & React.RefAttributes<TabsPrimitive.RootRef>) {
+  return <TabsPrimitive.Root className={cn("flex flex-col gap-2", className)} {...props} />
+}
+
+function TabsList({
+  className,
+  ...props
+}: TabsPrimitive.ListProps & React.RefAttributes<TabsPrimitive.ListRef>) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "flex h-9 flex-row items-center justify-center rounded-lg bg-muted p-[3px]",
+        Platform.select({ native: "mr-auto", web: "inline-flex w-fit" }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: TabsPrimitive.TriggerProps & React.RefAttributes<TabsPrimitive.TriggerRef>) {
+  const { value } = TabsPrimitive.useRootContext()
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm font-medium text-foreground dark:text-muted-foreground",
+        value === props.value && "dark:text-foreground"
+      )}
+    >
+      <TabsPrimitive.Trigger
+        className={cn(
+          "flex flex-row items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 shadow-none shadow-black/5",
+          Platform.select({
+            web: "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring web:h-[calc(100%-1px)] inline-flex cursor-default whitespace-nowrap transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          }),
+          props.disabled && "opacity-50",
+          props.value === value && "bg-background dark:border-foreground/10 dark:bg-input/30",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: TabsPrimitive.ContentProps & React.RefAttributes<TabsPrimitive.ContentRef>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(Platform.select({ web: "flex-1 outline-none" }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }
diff --git a/packages/native-ui/src/components/text.tsx b/packages/native-ui/src/components/text.tsx
index 64372034..85150cad 100644
--- a/packages/native-ui/src/components/text.tsx
+++ b/packages/native-ui/src/components/text.tsx
@@ -2,7 +2,7 @@ import { cn } from "@init/utils/ui"
 import * as Slot from "@rn-primitives/slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import * as React from "react"
-import { Platform, type Role, Text as RNText } from "react-native"
+import { Platform, Text as RNText, type Role } from "react-native"
 
 const textVariants = cva(
   cn(
@@ -17,8 +17,10 @@ const textVariants = cva(
     },
     variants: {
       variant: {
-        blockquote: "mt-4 border-l-2 border-border pl-3 italic sm:mt-6 sm:pl-6",
-        code: "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+        blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",
+        code: cn(
+          "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+        ),
         default: "",
         h1: cn(
           "text-center text-4xl font-extrabold tracking-tight",
@@ -41,6 +43,7 @@ const textVariants = cva(
 )
 
 type TextVariantProps = VariantProps<typeof textVariants>
+
 type TextVariant = NonNullable<TextVariantProps["variant"]>
 
 const ROLE: Partial<Record<TextVariant, Role>> = {
@@ -62,8 +65,8 @@ const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
 const TextClassContext = React.createContext<string | undefined>(undefined)
 
 function Text({
-  asChild = false,
   className,
+  asChild = false,
   variant = "default",
   ...props
 }: React.ComponentProps<typeof RNText> &
@@ -71,15 +74,13 @@ function Text({
   React.RefAttributes<RNText> & {
     asChild?: boolean
   }) {
-  const resolvedVariant: TextVariant = variant ?? "default"
   const textClass = React.useContext(TextClassContext)
   const Component = asChild ? Slot.Text : RNText
-
   return (
     <Component
-      className={cn(textVariants({ variant: resolvedVariant }), textClass, className)}
-      role={resolvedVariant ? ROLE[resolvedVariant] : undefined}
-      aria-level={resolvedVariant ? ARIA_LEVEL[resolvedVariant] : undefined}
+      className={cn(textVariants({ variant }), textClass, className)}
+      role={variant ? ROLE[variant] : undefined}
+      aria-level={variant ? ARIA_LEVEL[variant] : undefined}
       {...props}
     />
   )
diff --git a/packages/native-ui/src/components/textarea.tsx b/packages/native-ui/src/components/textarea.tsx
new file mode 100644
index 00000000..77495bb5
--- /dev/null
+++ b/packages/native-ui/src/components/textarea.tsx
@@ -0,0 +1,42 @@
+import { cn } from "@init/utils/ui"
+import { Platform, TextInput, type TextInputProps } from "react-native"
+
+type TextareaProps = TextInputProps &
+  React.RefAttributes<TextInput> & {
+    placeholderClassName?: string
+  }
+
+type UniwindTextInputProps = TextInputProps & {
+  className?: string
+  placeholderClassName?: string
+}
+
+const UniwindTextInput = TextInput as React.ComponentType<UniwindTextInputProps>
+
+function Textarea({
+  className,
+  multiline = true,
+  numberOfLines = Platform.select({ native: 8, web: 2 }), // On web, numberOfLines also determines initial height. On native, it determines the maximum height.
+  placeholderClassName,
+  ...props
+}: TextareaProps) {
+  return (
+    <UniwindTextInput
+      className={cn(
+        "flex min-h-16 w-full flex-row rounded-md border border-input bg-transparent px-3 py-2 text-base text-foreground shadow-sm shadow-black/5 md:text-sm dark:bg-input/30",
+        Platform.select({
+          web: "placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content resize-y outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed",
+        }),
+        props.editable === false && "opacity-50",
+        className
+      )}
+      placeholderClassName={cn("text-muted-foreground", placeholderClassName)}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/native-ui/src/components/toggle-group.tsx b/packages/native-ui/src/components/toggle-group.tsx
new file mode 100644
index 00000000..9ac54a8c
--- /dev/null
+++ b/packages/native-ui/src/components/toggle-group.tsx
@@ -0,0 +1,105 @@
+import type { VariantProps } from "class-variance-authority"
+import { cn } from "@init/utils/ui"
+import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group"
+import * as React from "react"
+import { Platform } from "react-native"
+import { Icon } from "./icon"
+import { TextClassContext } from "./text"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null)
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ToggleGroupPrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<ToggleGroupPrimitive.RootRef>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      className={cn(
+        "flex flex-row items-center rounded-md shadow-none",
+        Platform.select({ web: "w-fit" }),
+        variant === "outline" && "shadow-sm shadow-black/5",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ size, variant }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext)
+  if (context === null) {
+    throw new Error(
+      "ToggleGroup compound components cannot be rendered outside the ToggleGroup component"
+    )
+  }
+  return context
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  isFirst,
+  isLast,
+  ...props
+}: ToggleGroupPrimitive.ItemProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<ToggleGroupPrimitive.ItemRef> & {
+    isFirst?: boolean
+    isLast?: boolean
+  }) {
+  const context = useToggleGroupContext()
+  const { value } = ToggleGroupPrimitive.useRootContext()
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm font-medium text-foreground",
+        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+          ? "text-accent-foreground"
+          : Platform.select({ web: "group-hover:text-muted-foreground" })
+      )}
+    >
+      <ToggleGroupPrimitive.Item
+        className={cn(
+          toggleVariants({
+            size: context.size ?? size,
+            variant: context.variant ?? variant,
+          }),
+          props.disabled && "opacity-50",
+          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) && "bg-accent",
+          "min-w-0 shrink-0 rounded-none shadow-none",
+          isFirst && "rounded-l-md",
+          isLast && "rounded-r-md",
+          (context.variant === "outline" || variant === "outline") && "border-l-0",
+          (context.variant === "outline" || variant === "outline") && isFirst && "border-l",
+          Platform.select({
+            web: "flex-1 focus:z-10 focus-visible:z-10",
+          }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Item>
+    </TextClassContext.Provider>
+  )
+}
+
+function ToggleGroupIcon({ className, ...props }: React.ComponentProps<typeof Icon>) {
+  const textClass = React.useContext(TextClassContext)
+  return <Icon className={cn("size-4 shrink-0", textClass, className)} {...props} />
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem }
diff --git a/packages/native-ui/src/components/toggle.tsx b/packages/native-ui/src/components/toggle.tsx
new file mode 100644
index 00000000..528f5948
--- /dev/null
+++ b/packages/native-ui/src/components/toggle.tsx
@@ -0,0 +1,76 @@
+import { cn } from "@init/utils/ui"
+import * as TogglePrimitive from "@rn-primitives/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+import { Platform } from "react-native"
+import { Icon } from "./icon"
+import { TextClassContext } from "./text"
+
+const toggleVariants = cva(
+  cn(
+    "group flex flex-row items-center justify-center gap-2 rounded-md active:bg-muted",
+    Platform.select({
+      web: "hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex cursor-default whitespace-nowrap outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none",
+    })
+  ),
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-10 min-w-10 px-2.5 sm:h-9 sm:min-w-9 sm:px-2",
+        lg: "h-11 min-w-11 px-3 sm:h-10 sm:min-w-10 sm:px-2.5",
+        sm: "h-9 min-w-9 px-2 sm:h-8 sm:min-w-8 sm:px-1.5",
+      },
+      variant: {
+        default: "bg-transparent",
+        outline: cn(
+          "border border-input bg-transparent shadow-sm shadow-black/5 active:bg-accent",
+          Platform.select({
+            web: "hover:bg-accent hover:text-accent-foreground",
+          })
+        ),
+      },
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<TogglePrimitive.RootRef>) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm font-medium text-foreground",
+        props.pressed
+          ? "text-accent-foreground"
+          : Platform.select({ web: "group-hover:text-muted-foreground" }),
+        className
+      )}
+    >
+      <TogglePrimitive.Root
+        className={cn(
+          toggleVariants({ size, variant }),
+          props.disabled && "opacity-50",
+          props.pressed && "bg-accent",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+}
+
+function ToggleIcon({ className, ...props }: React.ComponentProps<typeof Icon>) {
+  const textClass = React.useContext(TextClassContext)
+  return <Icon className={cn("size-4 shrink-0", textClass, className)} {...props} />
+}
+
+export { Toggle, ToggleIcon, toggleVariants }
diff --git a/packages/native-ui/src/components/tooltip.tsx b/packages/native-ui/src/components/tooltip.tsx
new file mode 100644
index 00000000..2d9cc3e0
--- /dev/null
+++ b/packages/native-ui/src/components/tooltip.tsx
@@ -0,0 +1,65 @@
+import { cn } from "@init/utils/ui"
+import * as TooltipPrimitive from "@rn-primitives/tooltip"
+import * as React from "react"
+import { Platform, StyleSheet } from "react-native"
+import { FadeInDown, FadeInUp, FadeOut } from "react-native-reanimated"
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
+import { NativeOnlyAnimatedView } from "./native-only-animated-view"
+import { TextClassContext } from "./text"
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  portalHost,
+  side = "top",
+  ...props
+}: TooltipPrimitive.ContentProps &
+  React.RefAttributes<TooltipPrimitive.ContentRef> & {
+    portalHost?: string
+  }) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <TooltipPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+          <NativeOnlyAnimatedView
+            entering={
+              side === "top"
+                ? FadeInDown.withInitialValues({ transform: [{ translateY: 3 }] }).duration(150)
+                : FadeInUp.withInitialValues({ transform: [{ translateY: -5 }] })
+            }
+            exiting={FadeOut}
+          >
+            <TextClassContext.Provider value="text-xs text-primary-foreground">
+              <TooltipPrimitive.Content
+                sideOffset={sideOffset}
+                className={cn(
+                  "z-50 rounded-md bg-primary px-3 py-2 sm:py-1.5",
+                  Platform.select({
+                    web: cn(
+                      "w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance fade-in-0 zoom-in-95",
+                      side === "bottom" && "slide-in-from-top-2",
+                      side === "left" && "slide-in-from-right-2",
+                      side === "right" && "slide-in-from-left-2",
+                      side === "top" && "slide-in-from-bottom-2"
+                    ),
+                  }),
+                  className
+                )}
+                side={side}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </TooltipPrimitive.Overlay>
+      </FullWindowOverlay>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger }