fix(date): corrige campo date

src/components/ui/form/builder/form-control.tsx

@@ -167,7 +167,8 @@ export function FormControl<
 	if (props.fieldConfig.type === "date") {
 		return (
 			<Calendar
-				selected={props.field.value}
+				value={props.field.value}
+				// @ts-ignore
 				onSelect={props.field.onChange}
 				disabled={disabled}
 				mode="single"

src/components/ui/form/calendar.tsx

@@ -6,7 +6,7 @@ import { DayPicker, type DayPickerProps } from "react-day-picker";
 import { buttonVariants } from "../../../components/ui/button";
 import { cn } from "../../../lib/utils";
 
-import { format } from "date-fns";
+import { format, isValid } from "date-fns";
 import { ptBR } from "date-fns/locale/pt-BR";
 import { Popover } from "../popover";
 import { inputVariants } from "./input";
@@ -17,19 +17,30 @@ function Calendar({
 	className,
 	classNames,
 	showOutsideDays = true,
+	value,
+	mode,
 	...props
-}: DayPickerProps & { placeholder?: string }) {
+}: Omit<DayPickerProps, "selected"> & {
+	placeholder?: string;
+	value?: string;
+}) {
+	const iso8601Regex = /^(\d{4})-(\d{2})-(\d{2})/;
+
+	const isValid = !value ? false : iso8601Regex.test(value);
+
+	const selected = isValid && value ? new Date(value) : undefined;
+
 	return (
 		<Popover.Root>
 			<Popover.Trigger
 				className={cn(
 					inputVariants(),
 					"text-left font-normal",
-					props.mode === "single" && !props.selected && "text-gray-9",
+					mode === "single" && !selected && "text-gray-9",
 				)}
 			>
-				{props.mode === "single" && props.selected ? (
-					format(props.selected, "dd/MM/yyyy")
+				{mode === "single" && selected ? (
+					format(selected, "dd/MM/yyyy")
 				) : (
 					<span>{props.placeholder || "pick a date"}</span>
 				)}
@@ -51,6 +62,18 @@ function Calendar({
 						weekday: "text-xs uppercase text-gray-11 font-medium py-2",
 					}}
 					{...props}
+					mode="single"
+					selected={selected}
+					// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+					onSelect={(newdate: any) => {
+						if (newdate instanceof Date && mode === "single") {
+							// @ts-ignore
+							props.onSelect(newdate.toJSON());
+							return;
+						}
+						// @ts-ignore
+						props.onSelect(null);
+					}}
 				/>
 				<Popover.Arrow className="fill-gray-6" />
 			</Popover.Content>

src/stories/form/form-item-builder-date.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta } from "@storybook/react";
+import { useForm } from "react-hook-form";
+import { Button, FormBuilder } from "../../index";
+
+const meta = {
+  title: "Form/DateOnBuilder",
+  component: FormBuilder.FormFields,
+} satisfies Meta<typeof FormBuilder.FormFields>;
+
+export default meta;
+
+export const DateOnBuilder = () => {
+  const form = useForm({
+    values: {
+      date: null,
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((data) => {
+        console.log(data);
+      })}
+    >
+      <FormBuilder.Root>
+        <FormBuilder.FormFields
+          control={form.control}
+          fields={[
+            {
+              name: "date",
+              type: "date",
+              label: "Date",
+              required: true,
+              size: 6,
+            },
+          ]}
+        />
+      </FormBuilder.Root>
+      <Button type="submit">Submeter</Button>
+    </form>
+  );
+};