refactor(registry): move registry files to public/r directory

app/(site)/docs/components/button/page.tsx

@@ -15,7 +15,7 @@ export default function ButtonPage() {
   {
     "title": "Variants",
     "value": "variants",
-    "content": "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Button variant=\"default\">Default</Button>\n      <Button variant=\"destructive\">Destructive</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"link\">Link</Button>\n    </div>\n  );\n}",
+    "content": "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Button variant=\"default\">Default</Button>\n      <Button variant=\"destructive\">Destructive</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"link\">Link</Button>\n      <Button variant=\"selection\">Selection</Button>\n    </div>\n  );\n}",
     "language": "tsx"
   },
   {
@@ -25,75 +25,97 @@ export default function ButtonPage() {
     "language": "tsx"
   }
 ]}
-      componentCode={`import * as React from "react";
+      componentCode={`import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 import {
   Pressable,
-  PressableProps as RNPressableProps,
+  type PressableStateCallbackType,
+  type PressableProps as RNPressableProps,
   View,
-  ViewStyle,
-  PressableStateCallbackType,
+  type ViewStyle,
 } from "react-native";
-import { cn } from "@/lib/utils";
-
-import { cva, type VariantProps } from "class-variance-authority";
 
 export const buttonVariants = cva(
-  "flex-row items-center justify-center rounded-md",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow",
-        destructive:
-          "bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm",
-        outline:
-          "border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm",
-        secondary:
-          "bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm",
-        ghost: "text-foreground dark:text-foreground",
-        link: "text-primary dark:text-primary underline",
-      },
-      size: {
-        default: "h-12 px-6",
-        sm: "h-10 px-4",
-        lg: "h-14 px-8",
-        icon: "h-12 w-12",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
+	"flex-row items-center justify-center rounded-lg",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-sm",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm",
+				outline: "border-2 border-border bg-background text-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm",
+				ghost: "text-foreground",
+				link: "text-primary underline",
+				selection: "border-2 border-border bg-background",
+			},
+			size: {
+				default: "h-12 px-4",
+				sm: "h-10 px-3",
+				lg: "h-14 px-6",
+				icon: "h-12 w-12",
+			},
+			selected: {
+				true: "",
+				false: "",
+			},
+		},
+		compoundVariants: [
+			{
+				variant: "selection",
+				selected: true,
+				className: "border-primary bg-primary/5",
+			},
+			{
+				variant: "outline",
+				selected: true,
+				className: "border-primary ring-1 ring-primary/20",
+			},
+		],
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			selected: false,
+		},
+	},
 );
 
 export interface ButtonProps
-  extends Omit<RNPressableProps, "style">,
-  VariantProps<typeof buttonVariants> {
-  className?: string;
-  style?: ViewStyle;
-  asChild?: boolean;
+	extends Omit<RNPressableProps, "style">,
+		VariantProps<typeof buttonVariants> {
+	className?: string;
+	style?: ViewStyle;
+	asChild?: boolean;
+	selected?: boolean;
 }
 
 const Button = React.forwardRef<View, ButtonProps>(
-  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
-    return (
-      <Pressable
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {(state: PressableStateCallbackType) => (
-          <View
-            className={\`flex-row items-center justify-center gap-2 \${state.pressed ? "opacity-80" : ""
-              }\`}
-          >
-            {typeof children === "function" ? children(state) : children}
-          </View>
-        )}
-      </Pressable>
-    );
-  }
+	(
+		{ className, variant, size, selected, asChild = false, children, ...props },
+		ref,
+	) => {
+		const [isPressed, setIsPressed] = React.useState(false);
+
+		return (
+			<Pressable
+				className={cn(buttonVariants({ variant, size, selected, className }))}
+				ref={ref}
+				onPressIn={() => setIsPressed(true)}
+				onPressOut={() => setIsPressed(false)}
+				{...props}
+			>
+				{(state: PressableStateCallbackType) => (
+					<View
+						className={\`flex-row items-center justify-center gap-2 \${
+							state.pressed || isPressed ? "opacity-80" : ""
+						}\`}
+					>
+						{typeof children === "function" ? children(state) : children}
+					</View>
+				)}
+			</Pressable>
+		);
+	},
 );
 
 Button.displayName = "Button";

app/(site)/docs/components/input/page.tsx

@@ -13,37 +13,40 @@ export default function InputPage() {
     "language": "tsx"
   }
 ]}
-      componentCode={`import * as React from "react"
-import { TextInput, Platform } from "react-native"
-import { cn } from "@/lib/utils"
+      componentCode={`import { cn } from "@/lib/utils";
+import * as React from "react";
+import { Platform, TextInput } from "react-native";
 
-const Input = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(
-  ({ className, ...props }, ref) => {
-    const [isFocused, setIsFocused] = React.useState(false)
+const Input = React.forwardRef<
+	TextInput,
+	React.ComponentProps<typeof TextInput>
+>(({ className, ...props }, ref) => {
+	const [isFocused, setIsFocused] = React.useState(false);
 
-    return (
-      <TextInput
-        className={cn(
-          "h-12 w-full rounded-md border border-input bg-transparent px-3 text-primary shadow-sm",
-          "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          isFocused ? "border-ring ring-1 ring-ring" : "",
-          Platform.OS === "ios" ? "ios:shadow-sm ios:shadow-foreground/10" : "android:elevation-1",
-          className
-        )}
-        ref={ref}
-        textAlignVertical="center"
-        underlineColorAndroid="transparent"
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        {...props}
-      />
-    )
-  }
-)
+	return (
+		<TextInput
+			className={cn(
+				"h-12 w-full rounded-lg border bg-background px-3 text-foreground shadow-sm",
+				"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				isFocused ? "border-ring" : "border-input",
+				Platform.OS === "ios"
+					? "ios:shadow-sm ios:shadow-foreground/10"
+					: "android:elevation-1",
+				className,
+			)}
+			ref={ref}
+			textAlignVertical="center"
+			underlineColorAndroid="transparent"
+			onFocus={() => setIsFocused(true)}
+			onBlur={() => setIsFocused(false)}
+			{...props}
+		/>
+	);
+});
 
-Input.displayName = "Input"
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
 `}
       previewCode={`import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";

app/(site)/docs/layout.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
-import registry from "@/registry.json";
+import registry from "@/public/r/registry.json";
 
 const docsConfig = {
   sidebarNav: [

components/command-menu.tsx

@@ -9,7 +9,7 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import registry from "@/registry.json";
+import registry from "@/public/r/registry.json";
 
 export function CommandMenu() {
   const [open, setOpen] = React.useState(false);

public/r/button.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/button/button.tsx",
-      "content": "import * as React from \"react\";\nimport {\n  Pressable,\n  PressableProps as RNPressableProps,\n  View,\n  ViewStyle,\n  PressableStateCallbackType,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n  \"flex-row items-center justify-center rounded-md\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow\",\n        destructive:\n          \"bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm\",\n        outline:\n          \"border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm\",\n        secondary:\n          \"bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm\",\n        ghost: \"text-foreground dark:text-foreground\",\n        link: \"text-primary dark:text-primary underline\",\n      },\n      size: {\n        default: \"h-12 px-6\",\n        sm: \"h-10 px-4\",\n        lg: \"h-14 px-8\",\n        icon: \"h-12 w-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends Omit<RNPressableProps, \"style\">,\n  VariantProps<typeof buttonVariants> {\n  className?: string;\n  style?: ViewStyle;\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<View, ButtonProps>(\n  ({ className, variant, size, asChild = false, children, ...props }, ref) => {\n    return (\n      <Pressable\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      >\n        {(state: PressableStateCallbackType) => (\n          <View\n            className={`flex-row items-center justify-center gap-2 ${state.pressed ? \"opacity-80\" : \"\"\n              }`}\n          >\n            {typeof children === \"function\" ? children(state) : children}\n          </View>\n        )}\n      </Pressable>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport {\n  Pressable,\n  type PressableStateCallbackType,\n  type PressableProps as RNPressableProps,\n  View,\n  type ViewStyle,\n} from \"react-native\";\n\nexport const buttonVariants = cva(\n\t\"flex-row items-center justify-center rounded-lg\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-primary text-primary-foreground shadow-sm\",\n\t\t\t\tdestructive: \"bg-destructive text-destructive-foreground shadow-sm\",\n\t\t\t\toutline: \"border-2 border-border bg-background text-foreground\",\n\t\t\t\tsecondary: \"bg-secondary text-secondary-foreground shadow-sm\",\n\t\t\t\tghost: \"text-foreground\",\n\t\t\t\tlink: \"text-primary underline\",\n\t\t\t\tselection: \"border-2 border-border bg-background\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-12 px-4\",\n\t\t\t\tsm: \"h-10 px-3\",\n\t\t\t\tlg: \"h-14 px-6\",\n\t\t\t\ticon: \"h-12 w-12\",\n\t\t\t},\n\t\t\tselected: {\n\t\t\t\ttrue: \"\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: \"selection\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary bg-primary/5\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: \"outline\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary ring-1 ring-primary/20\",\n\t\t\t},\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t\tselected: false,\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<RNPressableProps, \"style\">,\n\t\tVariantProps<typeof buttonVariants> {\n\tclassName?: string;\n\tstyle?: ViewStyle;\n\tasChild?: boolean;\n\tselected?: boolean;\n}\n\nconst Button = React.forwardRef<View, ButtonProps>(\n\t(\n\t\t{ className, variant, size, selected, asChild = false, children, ...props },\n\t\tref,\n\t) => {\n\t\tconst [isPressed, setIsPressed] = React.useState(false);\n\n\t\treturn (\n\t\t\t<Pressable\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, selected, className }))}\n\t\t\t\tref={ref}\n\t\t\t\tonPressIn={() => setIsPressed(true)}\n\t\t\t\tonPressOut={() => setIsPressed(false)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(state: PressableStateCallbackType) => (\n\t\t\t\t\t<View\n\t\t\t\t\t\tclassName={`flex-row items-center justify-center gap-2 ${\n\t\t\t\t\t\t\tstate.pressed || isPressed ? \"opacity-80\" : \"\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{typeof children === \"function\" ? children(state) : children}\n\t\t\t\t\t</View>\n\t\t\t\t)}\n\t\t\t</Pressable>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n",
       "type": "registry:ui"
     }
   ],

public/r/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/input/input.tsx",
-      "content": "import * as React from \"react\"\nimport { TextInput, Platform } from \"react-native\"\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(\n  ({ className, ...props }, ref) => {\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    return (\n      <TextInput\n        className={cn(\n          \"h-12 w-full rounded-md border border-input bg-transparent px-3 text-primary shadow-sm\",\n          \"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          isFocused ? \"border-ring ring-1 ring-ring\" : \"\",\n          Platform.OS === \"ios\" ? \"ios:shadow-sm ios:shadow-foreground/10\" : \"android:elevation-1\",\n          className\n        )}\n        ref={ref}\n        textAlignVertical=\"center\"\n        underlineColorAndroid=\"transparent\"\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        {...props}\n      />\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, TextInput } from \"react-native\";\n\nconst Input = React.forwardRef<\n\tTextInput,\n\tReact.ComponentProps<typeof TextInput>\n>(({ className, ...props }, ref) => {\n\tconst [isFocused, setIsFocused] = React.useState(false);\n\n\treturn (\n\t\t<TextInput\n\t\t\tclassName={cn(\n\t\t\t\t\"h-12 w-full rounded-lg border bg-background px-3 text-foreground shadow-sm\",\n\t\t\t\t\"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tisFocused ? \"border-ring\" : \"border-input\",\n\t\t\t\tPlatform.OS === \"ios\"\n\t\t\t\t\t? \"ios:shadow-sm ios:shadow-foreground/10\"\n\t\t\t\t\t: \"android:elevation-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttextAlignVertical=\"center\"\n\t\t\tunderlineColorAndroid=\"transparent\"\n\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\tonBlur={() => setIsFocused(false)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nInput.displayName = \"Input\";\n\nexport { Input };\n",
       "type": "registry:ui"
     }
   ],

registry/CONTRIBUTING.md

@@ -61,7 +61,7 @@ registry/
 After creating your component files, you need to add the component to the registry:
 
 1. Create a JSON file in `public/r/[component-name].json`
-2. Add the component entry to `registry.json`
+2. Add the component entry to `public/r/registry.json`
 
 ### Generate component files