feat: add all rn-primitives components to native-ui package

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": "*"
   }
 }

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 }