Update DatePicker Component Width Based on Internal Popover

package/src/App.tsx

@@ -1,8 +1,8 @@
 import LayoutDefault from './layout/Default'
-import { Button, DateRange, Drawer, Form, Icon } from './library'
+import { Form, DatePicker } from './library'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Eraser, X } from '@phosphor-icons/react'
+import { Eraser, Calendar as CalendarIcon } from '@phosphor-icons/react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -13,6 +13,10 @@ const formSchema = z.object({
 
 type FormSchemaProps = z.infer<typeof formSchema>
 
+type DateRange = {
+  from: Date | undefined
+  to?: Date | undefined
+}
 function App() {
   const [test, setTest] = useState<DateRange>()
   const {
@@ -43,8 +47,6 @@ function App() {
     }
   }
 
-  console.log(selectedDates)
-
   return (
     <LayoutDefault
       asChild
@@ -53,32 +55,21 @@ function App() {
     >
       <Form.Root onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
-        <Drawer.Root>
-          <Drawer.Trigger asChild>
-            <Button>Open</Button>
-          </Drawer.Trigger>
-          <Drawer.Content>
-            <Drawer.Header>
-              <Drawer.Title>Title</Drawer.Title>
-              <Drawer.Close asChild>
-                <Icon size="sm" className="absolute right-8 top-8">
-                  <X />
-                </Icon>
-              </Drawer.Close>
-            </Drawer.Header>
-            <Drawer.Body>
-              <div className="h-[2500px] bg-error">Anything</div>
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close asChild>
-                <Button ghost className="flex-1">
-                  Close
-                </Button>
-              </Drawer.Close>
-              <Button className="flex-1">Save</Button>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
+        <div className="w-full">
+          <DatePicker
+            className="w-full"
+            align="center"
+            placeholder="Selecione uma data"
+            icon={<CalendarIcon />}
+            mode="multiple"
+            options={{
+              weekday: 'long',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            }}
+          />
+        </div>
         {/* ================================= TEST AREA ================================= */}
       </Form.Root>
     </LayoutDefault>

package/src/library/DatePicker/index.tsx

@@ -8,6 +8,8 @@ type DatePickerProps = CalendarProps & {
   placeholder?: string
   icon?: InputIconProps['icon']
   options?: Intl.DateTimeFormatOptions
+  className?: string
+  align?: 'center' | 'start' | 'end' | undefined
 }
 
 export const formatDate = (
@@ -25,7 +27,8 @@ const DatePicker = ({
   placeholder,
   icon,
   options,
-
+  className,
+  align,
   ...rest
 }: DatePickerProps) => {
   const formatDates = (dates: Date[]) => {
@@ -58,24 +61,22 @@ const DatePicker = ({
   }
 
   return (
-    <div className="relative">
-      <Popover.Root>
-        <Popover.Trigger>
-          <Input.Root className="mb-2">
-            <Input.Input
-              type="text"
-              placeholder={placeholder}
-              value={getInputValue(rest.selected)}
-              readOnly
-            />
-            <Input.Icon icon={icon} />
-          </Input.Root>
-        </Popover.Trigger>
-        <Popover.Content>
-          <Calendar {...rest} className="shadow-lg" />
-        </Popover.Content>
-      </Popover.Root>
-    </div>
+    <Popover.Root>
+      <Popover.Trigger className={className}>
+        <Input.Root className="mb-2">
+          <Input.Input
+            type="text"
+            placeholder={placeholder}
+            value={getInputValue(rest.selected)}
+            readOnly
+          />
+          <Input.Icon icon={icon} />
+        </Input.Root>
+      </Popover.Trigger>
+      <Popover.Content align={align}>
+        <Calendar className="shadow-lg" />
+      </Popover.Content>
+    </Popover.Root>
   )
 }
 

package/src/library/Popover/Content.tsx

@@ -3,20 +3,28 @@ import { cn } from '@/src/utils/class-merge.helper'
 import * as RadixPopover from '@radix-ui/react-popover'
 import { FC } from 'react'
 
-export interface PopoverContentProps extends RadixPopover.PopoverContentProps {}
+export interface PopoverContentProps extends RadixPopover.PopoverContentProps {
+  autoSize?: boolean
+}
 
-const PopoverContent: FC<PopoverContentProps> = ({ className, ...rest }) => {
+const PopoverContent: FC<PopoverContentProps> = ({
+  className,
+  autoSize,
+  ...rest
+}) => {
   return (
     <RadixPopover.Portal>
       <RadixPopover.Content
-        className={cn('z-100', className)}
+        className={cn(
+          'z-100',
+          autoSize && 'w-[--radix-popover-trigger-width]',
+          className,
+        )}
         sideOffset={5}
         {...rest}
       />
     </RadixPopover.Portal>
   )
 }
-
 PopoverContent.displayName = 'Popover.Content'
-
 export default PopoverContent