fix: remove date-fns, add formatDate func for DatePickerTrigger, add aria-disabled for input-group-control

Author: SupakornNetsuwan

examples/ui-playground/src/app/playground/shadcn/date-picker-section.tsx

@@ -35,7 +35,13 @@ function BasicDatePicker() {
   return (
     <div>
       <DatePickerProvider>
-        <DatePickerTrigger value={date} />
+        <DatePickerTrigger
+          value={date}
+          formatDate={(value) => {
+            // `formatDate` is optional
+            return value?.getTime()
+          }}
+        />
         <DatePickerContent>
           <Calendar
             mode="single"

packages/react/package.json

@@ -86,7 +86,6 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "cookie-es": "^2.0.0",
-    "date-fns": "^4.1.0",
     "deepmerge-ts": "^7.1.5",
     "defu": "^6.1.4",
     "input-otp": "^1.4.2",

packages/react/v2/components/primitives/date-picker.tsx

@@ -4,7 +4,6 @@ import * as React from 'react'
 
 import { CalendarBlankIcon } from '@phosphor-icons/react'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
-import { format } from 'date-fns'
 
 import { Button } from './button'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
@@ -36,13 +35,17 @@ export function DatePickerTrigger({
   asChild,
   value,
   children,
+  formatDate,
   ...props
 }: {
   asChild?: boolean
   value?: Date
+  formatDate?: (value: Date | undefined) => string | number | undefined
 } & Omit<React.ComponentPropsWithRef<typeof PopoverTrigger>, 'value'>) {
   const { onOpenChange } = useDatePickerProvider()
 
+  const displayValue = formatDate ? formatDate(value) : value?.toLocaleDateString()
+
   return (
     <PopoverTrigger
       asChild
@@ -66,7 +69,7 @@ export function DatePickerTrigger({
           )}
         >
           <CalendarBlankIcon />
-          {value ? format(value, 'PPP') : <Typography>Pick a date</Typography>}
+          <Typography>{displayValue || 'Pick a date'}</Typography>
         </Button>
       )}
     </PopoverTrigger>

packages/react/v2/components/primitives/input-group.tsx

@@ -152,10 +152,14 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
 
 function InputGroupControl({ className, disabled, ...props }: React.ComponentProps<typeof Input>) {
   const ctx = useInputGroup()
+
+  const isDisabled = ctx.disabled || disabled
+
   return (
     <Slot
       data-slot="input-group-control"
-      disabled={ctx.disabled || disabled}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
       className={cn(
         'flex-2 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
         className