From ede8a125080faa8f5b6145f73e9ca11317c730de Mon Sep 17 00:00:00 2001
From: Wesley Souza | Neo <cusaowesley1@gmail.com>
Date: Fri, 8 Nov 2024 23:26:34 -0300
Subject: [PATCH] feat: :sparkles: add money input

---
 app/_components/money-input.tsx | 25 +++++++++++++++++++++++++
 app/_components/ui/input.tsx    | 25 +++++++++++++++++++++++++
 app/_components/ui/label.tsx    | 26 ++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 app/_components/money-input.tsx
 create mode 100644 app/_components/ui/input.tsx
 create mode 100644 app/_components/ui/label.tsx

diff --git a/app/_components/money-input.tsx b/app/_components/money-input.tsx
new file mode 100644
index 0000000..694e2d9
--- /dev/null
+++ b/app/_components/money-input.tsx
@@ -0,0 +1,25 @@
+import { NumericFormat, NumericFormatProps } from "react-number-format";
+
+import { Input, InputProps } from "@/app/_components/ui/input";
+import { forwardRef } from "react";
+
+export const MoneyInput = forwardRef(
+  (
+    props: NumericFormatProps<InputProps>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <NumericFormat
+        {...props}
+        thousandSeparator="."
+        decimalSeparator=","
+        prefix="R$ "
+        allowNegative={false}
+        customInput={Input}
+        getInputRef={ref}
+      />
+    );
+  },
+);
+
+MoneyInput.displayName = "MoneyInput";
diff --git a/app/_components/ui/input.tsx b/app/_components/ui/input.tsx
new file mode 100644
index 0000000..ee612e3
--- /dev/null
+++ b/app/_components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/app/_lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/app/_components/ui/label.tsx b/app/_components/ui/label.tsx
new file mode 100644
index 0000000..0aa0934
--- /dev/null
+++ b/app/_components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/_lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };