@codapet/design-system 0.4.0 → 0.4.1

package/dist/index.d.mts

@@ -249,6 +249,7 @@ interface InputProps extends Omit<React$1.ComponentProps<'input'>, 'size'>, Vari
 }
 declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
+type DateFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY' | 'DD.MM.YYYY' | 'MMMM D, YYYY' | 'D MMMM YYYY';
 type NativeInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect'>;
 type FlattenedCalendarProps = Omit<React$1.ComponentProps<typeof Calendar>, keyof React$1.InputHTMLAttributes<HTMLInputElement> | 'className' | 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'disabled' | 'captionLayout' | 'showOutsideDays' | 'classNames'>;
 interface DateInputProps extends NativeInputProps, FlattenedCalendarProps {
@@ -261,6 +262,7 @@ interface DateInputProps extends NativeInputProps, FlattenedCalendarProps {
     size?: VariantProps<typeof inputVariants>['size'];
     inputClassName?: string;
     calendarClassName?: string;
+    dateFormat?: DateFormat;
     mode?: React$1.ComponentProps<typeof Calendar>['mode'];
     selected?: Date;
     onSelect?: (selectedDate: Date | undefined) => void;
@@ -271,7 +273,7 @@ interface DateInputProps extends NativeInputProps, FlattenedCalendarProps {
     showOutsideDays?: React$1.ComponentProps<typeof Calendar>['showOutsideDays'];
     classNames?: React$1.ComponentProps<typeof Calendar>['classNames'];
 }
-declare function DateInput({ date, setDate, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, inputDisabled, mode, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, placeholder, onBlur, ...restProps }: DateInputProps): react_jsx_runtime.JSX.Element;
+declare function DateInput({ date, setDate, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, inputDisabled, dateFormat, mode, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, placeholder, onBlur, ...restProps }: DateInputProps): react_jsx_runtime.JSX.Element;
 
 declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
@@ -593,4 +595,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateInput, type DateInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingM, HeadingS, HeadingXL, HeadingXS, HeadingXXS, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingM, HeadingS, HeadingXL, HeadingXS, HeadingXXS, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, toggleVariants, useFormField, useIsMobile, useSidebar };

package/dist/index.mjs

@@ -1886,6 +1886,7 @@ function ContextMenuShortcut({
 
 // src/components/ui/date-input.tsx
 import "class-variance-authority";
+import { format as dateFnsFormat, parse as dateFnsParse, isValid } from "date-fns";
 import { CalendarDays } from "lucide-react";
 import * as React20 from "react";
 
@@ -2063,6 +2064,26 @@ function PopoverAnchor({
 
 // src/components/ui/date-input.tsx
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var DATE_FORMAT_TOKENS = {
+  "MM/DD/YYYY": "MM/dd/yyyy",
+  "DD/MM/YYYY": "dd/MM/yyyy",
+  "YYYY-MM-DD": "yyyy-MM-dd",
+  "DD-MM-YYYY": "dd-MM-yyyy",
+  "MM-DD-YYYY": "MM-dd-yyyy",
+  "DD.MM.YYYY": "dd.MM.yyyy",
+  "MMMM D, YYYY": "MMMM d, yyyy",
+  "D MMMM YYYY": "d MMMM yyyy"
+};
+var DATE_FORMAT_PLACEHOLDER = {
+  "MM/DD/YYYY": "mm/dd/yyyy",
+  "DD/MM/YYYY": "dd/mm/yyyy",
+  "YYYY-MM-DD": "yyyy-mm-dd",
+  "DD-MM-YYYY": "dd-mm-yyyy",
+  "MM-DD-YYYY": "mm-dd-yyyy",
+  "DD.MM.YYYY": "dd.mm.yyyy",
+  "MMMM D, YYYY": "Month d, yyyy",
+  "D MMMM YYYY": "d Month yyyy"
+};
 var INPUT_PROP_KEYS = /* @__PURE__ */ new Set([
   "accept",
   "alt",
@@ -2122,21 +2143,16 @@ var INPUT_PROP_KEYS = /* @__PURE__ */ new Set([
   "onCompositionStart",
   "onCompositionUpdate"
 ]);
-function formatDate(date) {
-  if (!date) {
+function formatDate(date, dateFormat = "MM/DD/YYYY") {
+  if (!date || !isValid(date)) {
     return "";
   }
-  return date.toLocaleDateString("en-US", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric"
-  });
-}
-function isValidDate(date) {
-  if (!date) {
-    return false;
-  }
-  return !isNaN(date.getTime());
+  return dateFnsFormat(date, DATE_FORMAT_TOKENS[dateFormat]);
+}
+function parseDate(value, dateFormat = "MM/DD/YYYY") {
+  if (!value) return null;
+  const parsed = dateFnsParse(value, DATE_FORMAT_TOKENS[dateFormat], /* @__PURE__ */ new Date());
+  return isValid(parsed) ? parsed : null;
 }
 function DateInput({
   date,
@@ -2148,6 +2164,7 @@ function DateInput({
   inputClassName,
   calendarClassName,
   inputDisabled,
+  dateFormat = "MM/DD/YYYY",
   mode,
   selected,
   onSelect,
@@ -2157,13 +2174,14 @@ function DateInput({
   captionLayout = "dropdown",
   showOutsideDays = false,
   classNames,
-  placeholder = "mm/dd/yyyy",
+  placeholder,
   onBlur,
   ...restProps
 }) {
+  const resolvedPlaceholder = placeholder ?? DATE_FORMAT_PLACEHOLDER[dateFormat];
   const [open, setOpen] = React20.useState(false);
   const [monthState, setMonthState] = React20.useState(date ?? null);
-  const [value, setValue] = React20.useState(formatDate(date ?? null));
+  const [value, setValue] = React20.useState(formatDate(date ?? null, dateFormat));
   const [inputProps, calendarProps] = React20.useMemo(() => {
     const nextInputProps = {};
     const nextCalendarProps = {};
@@ -2211,10 +2229,10 @@ function DateInput({
   }, [minDate]);
   React20.useEffect(() => {
     if (date) {
-      setValue(formatDate(date));
+      setValue(formatDate(date, dateFormat));
       setMonthState(date);
     }
-  }, [date]);
+  }, [date, dateFormat]);
   const effectiveMonth = month ?? monthState ?? void 0;
   const effectiveSelected = selected ?? date ?? void 0;
   const isInputDisabled = inputDisabled ?? (typeof calendarDisabled === "boolean" ? calendarDisabled : false);
@@ -2226,7 +2244,7 @@ function DateInput({
       const isBeforeMax = !effectiveMaxDate || dateObj <= effectiveMaxDate;
       if (isAfterMin && isBeforeMax) {
         setDate(selectedDate);
-        setValue(formatDate(selectedDate));
+        setValue(formatDate(selectedDate, dateFormat));
         setOpen(false);
       }
     }
@@ -2257,8 +2275,8 @@ function DateInput({
   const handleInputChange = (e) => {
     const inputValue = e.target.value;
     setValue(inputValue);
-    const parsedDate = new Date(inputValue);
-    if (isValidDate(parsedDate)) {
+    const parsedDate = parseDate(inputValue, dateFormat);
+    if (parsedDate) {
       const selectedDate = new Date(parsedDate);
       selectedDate.setHours(0, 0, 0, 0);
       const isAfterMin = !effectiveMinDate || selectedDate >= effectiveMinDate;
@@ -2281,16 +2299,16 @@ function DateInput({
       }
       return;
     }
-    const parsedDate = new Date(value);
-    if (!isValidDate(parsedDate)) {
-      setValue(formatDate(date));
+    const parsedDate = parseDate(value, dateFormat);
+    if (!parsedDate) {
+      setValue(formatDate(date, dateFormat));
     } else {
       const selectedDate = new Date(parsedDate);
       selectedDate.setHours(0, 0, 0, 0);
       const isAfterMin = !effectiveMinDate || selectedDate >= effectiveMinDate;
       const isBeforeMax = !effectiveMaxDate || selectedDate <= effectiveMaxDate;
       if (!isAfterMin || !isBeforeMax) {
-        setValue(formatDate(date));
+        setValue(formatDate(date, dateFormat));
       }
     }
   };
@@ -2300,7 +2318,7 @@ function DateInput({
       {
         id: "date",
         value,
-        placeholder,
+        placeholder: resolvedPlaceholder,
         className: cn("bg-background cursor-pointer", inputClassName),
         onChange: handleInputChange,
         onBlur: handleBlur,