prep: Setup nativecn-ui

2 files changed, 109 insertions, 0 deletions

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 00000000..069fe116
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,81 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { Text, TouchableOpacity } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "flex flex-row items-center justify-center rounded-md",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary",
+        secondary: "bg-secondary",
+        destructive: "bg-destructive",
+        ghost: "bg-slate-700",
+        link: "text-primary underline-offset-4",
+      },
+      size: {
+        default: "h-10 px-4",
+        sm: "h-8 px-2",
+        lg: "h-12 px-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonTextVariants = cva("text-center font-medium", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      ghost: "text-primary-foreground",
+      link: "text-primary-foreground underline",
+    },
+    size: {
+      default: "text-base",
+      sm: "text-sm",
+      lg: "text-xl",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+interface ButtonProps
+  extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
+  VariantProps<typeof buttonVariants> {
+  label: string;
+  labelClasses?: string;
+}
+function Button({
+  label,
+  labelClasses,
+  className,
+  variant,
+  size,
+  ...props
+}: ButtonProps) {
+  return (
+    <TouchableOpacity
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      <Text
+        className={cn(
+          buttonTextVariants({ variant, size, className: labelClasses }),
+        )}
+      >
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+export { Button, buttonVariants, buttonTextVariants };
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
new file mode 100644
index 00000000..6843917a
--- /dev/null
+++ b/components/ui/Input.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { Text, TextInput, View } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+    extends React.ComponentPropsWithoutRef<typeof TextInput> {
+    label?: string;
+    labelClasses?: string;
+    inputClasses?: string;
+}
+
+const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+    ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
+        <View className={cn("flex flex-col gap-1.5", className)}>
+            {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>}
+            <TextInput
+                className={cn(
+                    inputClasses,
+                    "border border-input py-2.5 px-4 rounded-lg",
+                )}
+                {...props}
+            />
+        </View>
+    ),
+);
+
+export { Input };