[WIP] feat: V2

apps/docs/astro.config.mjs

@@ -1,13 +1,12 @@
 import react from '@astrojs/react';
 import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
-import vercel from '@astrojs/vercel/static';
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
   output: 'static',
-  adapters: [vercel()],
+  adapters: [],
   integrations: [
     starlight({
       favicon: '/favicon.png',
@@ -17,9 +16,9 @@ export default defineConfig({
         ThemeSelect: './src/components/ThemeSelect.astro',
         Head: './src/components/Head.astro',
       },
-      social: {
-        github: 'https://github.com/roninoss/rn-primitives',
-      },
+      social: [
+        { icon: 'github', label: 'GitHub', href: 'https://github.com/roninoss/rn-primitives' },
+      ],
       sidebar: [
         {
           label: 'Introduction',

apps/docs/package.json

@@ -11,12 +11,11 @@
     "clean": "rm -rf .turbo node_modules dist .astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.6",
-    "@astrojs/react": "^3.0.10",
-    "@astrojs/starlight": "^0.21.0",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/react": "^4.2.7",
+    "@astrojs/starlight": "^0.34.3",
     "@astrojs/starlight-tailwind": "^2.0.1",
     "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^7.3.4",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
@@ -52,19 +51,19 @@
     "@rn-primitives/tooltip": "workspace:*",
     "@rn-primitives/types": "workspace:*",
     "@rn-primitives/utils": "workspace:*",
-    "@types/react": "~18.3.12",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@vercel/analytics": "^1.3.1",
-    "astro": "^4.4.9",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "lucide-react": "^0.334.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "astro": "^5.7.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.503.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "sharp": "^0.32.5",
-    "tailwind-merge": "^2.5.3",
+    "tailwind-merge": "^3.0.2",
     "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.3.3"
+    "typescript": "^5.8.3"
   }
 }

apps/docs/src/components/ui/button.tsx

@@ -37,14 +37,19 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  }
-);
+const Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const Comp = asChild ? Slot : 'button';
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+};
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };

apps/docs/src/components/ui/dropdown-menu.tsx

@@ -16,12 +16,17 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
+const DropdownMenuSubTrigger = ({
+  ref,
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>;
+}) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
@@ -34,13 +39,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className='ml-auto h-4 w-4' />
   </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+}) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -49,13 +57,17 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = ({
+  ref,
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+}) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -67,15 +79,19 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuItem = ({
+  ref,
+  className,
+  inset,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+} & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Item>>;
+}) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -85,13 +101,18 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = ({
+  ref,
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+}) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -108,13 +129,17 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = ({
+  ref,
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+}) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
@@ -130,33 +155,40 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuLabel = ({
+  ref,
+  className,
+  inset,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+} & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Label>>;
+}) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const DropdownMenuSeparator = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+  ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+}) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {

apps/docs/src/content/config.ts

@@ -1,6 +1,7 @@
 import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
 
 export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
 };

apps/docs/src/content/docs/accordion.mdx

@@ -9,76 +9,17 @@ description: A vertically stacked set of interactive headings that each reveal a
 import Code from '@/components/ManualCode.astro';
 import { LinkButton } from '@/components/react/LinkButton';
 import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
-import importedNativeCode from '@/../node_modules/@rn-primitives/accordion/src/accordion.tsx?raw';
-import importedWebCode from '@/../node_modules/@rn-primitives/accordion/src/accordion.web.tsx?raw';
-import importedTypesCode from '@/../node_modules/@rn-primitives/accordion/src/types.ts?raw';
-import importedIndexCode from '@/../node_modules/@rn-primitives/accordion/src/index.ts?raw';
 
 A vertically stacked set of interactive headings that each reveal a section of content.
 
 ## Installation
 
-<Tabs>
-  <TabItem label="NPM">
 
-  Install the component via your command line.
-
-    ```bash
-    npx expo install @rn-primitives/accordion
-    ```
-
-  </TabItem>
-  <TabItem label="Manual">
-    <Aside title="Uses shared primitives">
-    If you do not already have these primitives in your project, you will need to add them.
-
-    - [Types Primitive](/types)
-    - [Hooks Primitive](/hooks)
-    - [Slot Primitive](/slot)
-
-    </Aside>
-
-    <br />
-
-    <Tabs>
-      <TabItem label="Universal">
-        **Install <a target="_blank" href="https://www.radix-ui.com/primitives/docs/components/accordion">@radix-ui/react-accordion</a>**
-
-        ```bash
-        npx expo install @radix-ui/react-accordion
-        ```
-
-        <br />
-
-        **Copy/paste the following code for web to  `~/components/primitives/accordion/accordion.web.tsx`**
-
-        <Code code={importedWebCode} lang="tsx" title="~/components/primitives/accordion/accordion.web.tsx" />
-
-        **Copy/paste the following code for native to  `~/components/primitives/accordion/accordion.tsx`**
-
-        <Code code={importedNativeCode} lang="tsx" title="~/components/primitives/accordion/accordion.tsx" />
-
-        **Copy/paste the following code for types to  `~/components/primitives/accordion/types.ts`**
-
-        <Code code={importedTypesCode} lang="tsx" title="~/components/primitives/accordion/types.ts" />
-
-        **Copy/paste the following code for exporting to  `~/components/primitives/accordion/index.ts`**
-
-        <Code code={importedIndexCode} lang="tsx" title="~/components/primitives/accordion/index.ts" />
-      </TabItem>
-      <TabItem label="Native Only">
-        **Copy/paste the following code for native to  `~/components/primitives/accordion/index.tsx`**
-
-        <Code code={importedNativeCode} lang="tsx" title="~/components/primitives/accordion/index.tsx" />
-
-        **Copy/paste the following code for types to  `~/components/primitives/accordion/types.ts`**
-
-        <Code code={importedTypesCode} lang="tsx" title="~/components/primitives/accordion/types.ts" />
-      </TabItem>
-    </Tabs>
-    </TabItem>
-</Tabs>
+Install the component via your command line.
 
+```bash
+npx expo install @rn-primitives/accordion
+```
 
 
 ## Usage