@mbao01/common 0.0.41 → 0.0.43

package/src/components/DatePicker/MultipleDatesPicker.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { format } from "date-fns";
 import { CalendarIcon } from "@radix-ui/react-icons";
-import { type MultipleDatesPickerProps } from "./types";
+import { format } from "date-fns";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
 import { Calendar } from "../Calendar";
 import { Popover } from "../Popover";
+import { type MultipleDatesPickerProps } from "./types";
 
 export const MultipleDatesPicker = ({
   name,
@@ -21,8 +21,7 @@ export const MultipleDatesPicker = ({
   getDatesValue = (dates) => dates?.map((date) => date.toUTCString()),
   getDatesLabel = (dates) => {
     if (!dates?.length) return undefined;
-    if (dates.length < 3)
-      return dates.map((date) => format(date, "LLL dd, y")).join(" and ");
+    if (dates.length < 3) return dates.map((date) => format(date, "LLL dd, y")).join(" and ");
 
     return `${dates.length} dates selected`;
   },
@@ -54,10 +53,7 @@ export const MultipleDatesPicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn(
-            "justify-start flex-nowrap",
-            !dates?.length && "font-normal"
-          )}
+          className={cn("justify-start flex-nowrap", !dates?.length && "font-normal")}
         >
           <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick one or more dates"}
@@ -67,11 +63,11 @@ export const MultipleDatesPicker = ({
       </Popover.Trigger>
       <Popover.Content className="w-auto p-0">
         <Calendar
-          initialFocus
+          autoFocus
           mode="multiple"
           selected={dates}
           onSelect={setDates}
-          captionLayout="dropdown-buttons"
+          captionLayout="label"
           {...props}
         />
       </Popover.Content>

package/src/components/DatePicker/types.ts

@@ -1,21 +1,14 @@
-import {
-  DateRange,
-  DayPickerMultipleProps,
-  DayPickerRangeProps,
-  DayPickerSingleProps,
-} from "react-day-picker";
-import { ButtonProps } from "../Button/types";
+import type { DateRange, PropsBase, PropsMulti, PropsRange, PropsSingle } from "react-day-picker";
+import { type ButtonProps } from "../Button/types";
 
-type BaseDatePickerProps = Pick<
-  ButtonProps,
-  "variant" | "outline" | "wide" | "size" | "name" | "disabled"
-> & {
-  label?: string;
-  triggerClassName?: string;
-};
+type BaseDatePickerProps = Omit<PropsBase, "mode"> &
+  Pick<ButtonProps, "variant" | "outline" | "wide" | "size" | "name" | "disabled"> & {
+    label?: string;
+    triggerClassName?: string;
+  };
 
 export type DatePickerProps = BaseDatePickerProps &
-  Omit<DayPickerSingleProps, "mode"> & {
+  Omit<PropsSingle, "mode"> & {
     children?: ({
       date,
       setDate,
@@ -29,22 +22,18 @@ export type DatePickerProps = BaseDatePickerProps &
   };
 
 export type DateRangePickerProps = BaseDatePickerProps &
-  Omit<DayPickerRangeProps, "mode"> & {
+  Omit<PropsRange, "mode"> & {
     defaultRange?: DateRange;
     getRangeValue?: (range: DateRange | undefined) => {
       from: string | undefined;
       to: string | undefined;
     };
-    getRangeLabel?: (
-      range: DateRange | undefined
-    ) => string | JSX.Element | undefined;
+    getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
   };
 
 export type MultipleDatesPickerProps = BaseDatePickerProps &
-  Omit<DayPickerMultipleProps, "mode"> & {
+  Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
-    getDatesLabel?: (
-      dates: Date[] | undefined
-    ) => string | JSX.Element | undefined;
+    getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;
   };

package/src/components/Description/Description.tsx

@@ -1,31 +1,16 @@
-import type {
-  DescriptionProps,
-  DescriptionTermProps,
-  DescriptionDetailProps,
-} from "./types";
+import type { DescriptionDetailProps, DescriptionProps, DescriptionTermProps } from "./types";
 import { cn } from "../../utilities";
 
 const Description = (props: DescriptionProps) => {
-  return <dl role="list" {...props} />;
+  return <dl {...props} />;
 };
 
 const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
-  return (
-    <dt
-      role="listitem"
-      className={cn("py-2 text-sm font-semibold", className)}
-      {...props}
-    />
-  );
+  return <dt className={cn("py-2 text-sm font-semibold", className)} {...props} />;
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {
-  return (
-    <dd
-      className={cn("text-base [&:not(:last-child)]:mb-1", className)}
-      {...props}
-    />
-  );
+  return <dd className={cn("text-base [&:not(:last-child)]:mb-1", className)} {...props} />;
 };
 
 Description.Term = DescriptionTerm;

package/src/components/Dialog/Dialog.tsx

@@ -4,13 +4,13 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import type {
-  DialogProps,
+  DialogContentProps,
+  DialogDescriptionProps,
   DialogFooterProps,
   DialogHeaderProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
   DialogOverlayProps,
-  DialogContentProps,
+  DialogProps,
+  DialogTitleProps,
 } from "./types";
 import { cn } from "../../utilities";
 import {
@@ -96,11 +96,7 @@ const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   DialogTitleProps
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(getDialogTitleClasses(), className)}
-    {...props}
-  />
+  <DialogPrimitive.Title ref={ref} className={cn(getDialogTitleClasses(), className)} {...props} />
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 

package/src/components/Dialog/constants.ts

@@ -29,17 +29,13 @@ export const getDialogContentClasses = cva(
   }
 );
 
-export const getDialogHeaderClasses = cva(
-  "flex flex-col space-y-1.5 text-center sm:text-left"
-);
+export const getDialogHeaderClasses = cva("flex flex-col space-y-1.5 text-center sm:text-left");
 
 export const getDialogFooterClasses = cva(
   "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
 );
 
-export const getDialogTitleClasses = cva(
-  "text-lg font-semibold leading-none tracking-tight"
-);
+export const getDialogTitleClasses = cva("text-lg font-semibold leading-none tracking-tight");
 
 export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
 

package/src/components/Dialog/types.ts

@@ -10,23 +10,15 @@ import {
   getDialogTitleClasses,
 } from "./constants";
 
-export type DialogProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Root
->;
+export type DialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 
-export type DialogOverlayProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Overlay
-> &
+export type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> &
   VariantProps<typeof getDialogOverlayClasses>;
 
-export type DialogCloseProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Close
-> &
+export type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> &
   VariantProps<typeof getDialogCloseClasses>;
 
-export type DialogContentProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
-> &
+export type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
   VariantProps<typeof getDialogContentClasses> & {
     showClose?: boolean;
     closeProps?: DialogCloseProps;
@@ -38,9 +30,7 @@ export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> &
 export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof getDialogFooterClasses>;
 
-export type DialogTitleProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Title
-> &
+export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> &
   VariantProps<typeof getDialogTitleClasses>;
 
 export type DialogDescriptionProps = React.ComponentPropsWithoutRef<

package/src/components/Drawer/Drawer.tsx

@@ -1,9 +1,8 @@
 "use client";
 
+import { forwardRef } from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../../utilities";
-import { forwardRef } from "react";
-import { DrawerProps } from "./types";
 import {
   getDrawerContentClasses,
   getDrawerDescriptionClasses,
@@ -12,12 +11,10 @@ import {
   getDrawerOverlayClasses,
   getDrawerTitleClasses,
 } from "./constants";
+import { DrawerProps } from "./types";
 
 const Drawer = ({ shouldScaleBackground = true, ...props }: DrawerProps) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
 );
 Drawer.displayName = "Drawer";
 
@@ -57,18 +54,12 @@ const DrawerContent = forwardRef<
 ));
 DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn(getDrawerHeaderClasses(), className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn(getDrawerFooterClasses(), className)} {...props} />
 );
 DrawerFooter.displayName = "DrawerFooter";
@@ -77,11 +68,7 @@ const DrawerTitle = forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(getDrawerTitleClasses(), className)}
-    {...props}
-  />
+  <DrawerPrimitive.Title ref={ref} className={cn(getDrawerTitleClasses(), className)} {...props} />
 ));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 

package/src/components/Drawer/constants.ts

@@ -6,14 +6,10 @@ export const getDrawerContentClasses = cva(
 
 export const getDrawerDescriptionClasses = cva("text-sm");
 
-export const getDrawerHeaderClasses = cva(
-  "grid gap-1.5 p-4 text-center sm:text-left"
-);
+export const getDrawerHeaderClasses = cva("grid gap-1.5 p-4 text-center sm:text-left");
 
 export const getDrawerFooterClasses = cva("mt-auto flex flex-col gap-2 p-4");
 
 export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/80");
 
-export const getDrawerTitleClasses = cva(
-  "text-lg font-semibold leading-none tracking-tight"
-);
+export const getDrawerTitleClasses = cva("text-lg font-semibold leading-none tracking-tight");

package/src/components/FileUploader/FileUploader.tsx

@@ -1,14 +1,10 @@
 "use client";
 
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { useDropzone, FileRejection } from "react-dropzone";
-import { toast } from "sonner";
+import { FileRejection, useDropzone } from "react-dropzone";
 import { TrashIcon } from "@radix-ui/react-icons";
-import type {
-  DirectionOptions,
-  FileUploaderInputProps,
-  FileUploaderProps,
-} from "./types";
+import { toast } from "sonner";
+import type { DirectionOptions, FileUploaderInputProps, FileUploaderProps } from "./types";
 import { cn } from "../../utilities";
 import { FileUploaderContext } from "./FileUploaderContext";
 import { useFileUpload } from "./useFileUpload";
@@ -158,9 +154,7 @@ export const FileUploader = ({
       if (rejectedFiles.length > 0) {
         for (const rejectedFile of rejectedFiles) {
           if (rejectedFile.errors[0]?.code === "file-too-large") {
-            toast.error(
-              `File is too large. Max size is ${maxSize / 1024 / 1024}MB`
-            );
+            toast.error(`File is too large. Max size is ${maxSize / 1024 / 1024}MB`);
             break;
           }
           if (rejectedFile.errors[0]?.message) {
@@ -183,9 +177,7 @@ export const FileUploader = ({
     setIsLOF(false);
   }, [value, maxFiles]);
 
-  const opts = dropzoneOptions
-    ? dropzoneOptions
-    : { accept, maxFiles, maxSize, multiple };
+  const opts = dropzoneOptions ? dropzoneOptions : { accept, maxFiles, maxSize, multiple };
 
   const dropzoneState = useDropzone({
     ...opts,
@@ -226,33 +218,28 @@ export const FileUploader = ({
 
 FileUploader.displayName = "FileUploader";
 
-const FileUploaderContent = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
-  const { orientation } = useFileUpload();
-  const containerRef = useRef<HTMLDivElement>(null);
+const FileUploaderContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => {
+    const { orientation } = useFileUpload();
+    const containerRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <div
-      className={cn("w-full px-1")}
-      ref={containerRef}
-      aria-description="content file holder"
-    >
-      <div
-        {...props}
-        ref={ref}
-        className={cn(
-          "flex rounded-xl gap-1",
-          orientation === "horizontal" ? "flex-raw flex-wrap" : "flex-col",
-          className
-        )}
-      >
-        {children}
+    return (
+      <div className={cn("w-full px-1")} ref={containerRef} aria-description="content file holder">
+        <div
+          {...props}
+          ref={ref}
+          className={cn(
+            "flex rounded-xl gap-1",
+            orientation === "horizontal" ? "flex-raw flex-wrap" : "flex-col",
+            className
+          )}
+        >
+          {children}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 FileUploaderContent.displayName = "FileUploaderContent";
 
@@ -277,18 +264,14 @@ const FileUploaderItem = forwardRef<
       </div>
       <button
         type="button"
-        className={cn(
-          "absolute",
-          direction === "rtl" ? "top-1 left-1" : "top-1 right-1"
-        )}
+        className={cn("absolute", direction === "rtl" ? "top-1 left-1" : "top-1 right-1")}
         onClick={() => removeFileFromSet(index)}
       >
         <span className="sr-only">remove item {index}</span>
         <TrashIcon
-          className={cn(
-            "w-4 h-4 shrink-0 hover:stroke-destructive duration-200 ease-in-out",
-            { "text-error": isSelected }
-          )}
+          className={cn("w-4 h-4 shrink-0 hover:stroke-destructive duration-200 ease-in-out", {
+            "text-error": isSelected,
+          })}
         />
       </button>
     </div>
@@ -297,13 +280,8 @@ const FileUploaderItem = forwardRef<
 
 FileUploaderItem.displayName = "FileUploaderItem";
 
-const FileUploaderInput = ({
-  classes,
-  children,
-  ...props
-}: FileUploaderInputProps) => {
-  const { dropzoneState, isFileTooBig, isLOF, hiddenInputRef } =
-    useFileUpload();
+const FileUploaderInput = ({ classes, children, ...props }: FileUploaderInputProps) => {
+  const { dropzoneState, isFileTooBig, isLOF, hiddenInputRef } = useFileUpload();
   const rootProps = isLOF ? {} : dropzoneState.getRootProps();
   return (
     <div {...props} className="relative w-full">

package/src/components/FileUploader/FileUploaderContext.tsx

@@ -1,5 +1,4 @@
 import { createContext } from "react";
 import { type FileUploaderContextType } from "./types";
 
-export const FileUploaderContext =
-  createContext<FileUploaderContextType | null>(null);
+export const FileUploaderContext = createContext<FileUploaderContextType | null>(null);

package/src/components/FileUploader/types.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, Ref, SetStateAction } from "react";
-import type { DropzoneState, DropzoneOptions } from "react-dropzone";
+import type { DropzoneOptions, DropzoneState } from "react-dropzone";
 
 export type FileUploaderProps = {
   value: File[] | null;

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type CheckboxProps } from "./types";
-import { getCheckboxClasses } from "./constants";
 import { cn } from "../../../utilities";
+import { getCheckboxClasses } from "./constants";
+import { type CheckboxProps } from "./types";
 
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   ({ className, size, variant, ...props }, ref) => (

package/src/components/Form/Checkbox/types.ts

@@ -1,8 +1,5 @@
 import { type VariantProps } from "../../../libs";
 import { getCheckboxClasses } from "./constants";
 
-export type CheckboxProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "size" | "ref" | "type"
-> &
+export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
   VariantProps<typeof getCheckboxClasses>;

package/src/components/Form/Input/Input.tsx

@@ -1,20 +1,14 @@
 import React from "react";
-import { type InputProps } from "./types";
 import { cn } from "../../../utilities";
 import { getInputClasses } from "./constants";
+import { type InputProps } from "./types";
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    { size, variant, wide, outline, className, type, ...props }: InputProps,
-    ref
-  ) => (
+  ({ size, variant, wide, outline, className, type, ...props }: InputProps, ref) => (
     <input
       ref={ref}
       type={type}
-      className={cn(
-        getInputClasses({ type, size, wide, variant, outline }),
-        className
-      )}
+      className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
       {...props}
     />
   )

package/src/components/Form/Input/constants.ts

@@ -1,52 +1,49 @@
 import { cva } from "../../../libs";
 
-export const getInputClasses = cva(
-  "input rounded-md transition-all duration-100",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        accent: "input-accent",
-        error: "input-error",
-        ghost: "input-ghost",
-        info: "input-info",
-        primary: "input-primary",
-        secondary: "input-secondary",
-        success: "input-success",
-        warning: "input-warning",
-      },
-      outline: {
-        true: "input-bordered",
-      },
-      wide: {
-        true: "w-full",
-      },
-      size: {
-        xs: "input-xs",
-        sm: "input-sm",
-        md: "input-md",
-        lg: "input-lg",
-      },
-      type: {
-        ["file" as string]:
-          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:h-full",
-      },
-    },
-    compoundVariants: [
-      {
-        size: undefined,
-        className: "min-h-fit h-10",
-      },
-      {
-        variant: undefined,
-        outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
-      },
-    ],
-  }
-);
+export const getInputClasses = cva("input rounded-md transition-all duration-100", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      accent: "input-accent",
+      error: "input-error",
+      ghost: "input-ghost",
+      info: "input-info",
+      primary: "input-primary",
+      secondary: "input-secondary",
+      success: "input-success",
+      warning: "input-warning",
+    },
+    outline: {
+      true: "input-bordered",
+    },
+    wide: {
+      true: "w-full",
+    },
+    size: {
+      xs: "input-xs",
+      sm: "input-sm",
+      md: "input-md",
+      lg: "input-lg",
+    },
+    type: {
+      ["file" as string]:
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:h-full",
+    },
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "min-h-fit h-10",
+    },
+    {
+      variant: undefined,
+      outline: true,
+      className: "border-neutral-content",
+    },
+    {
+      variant: "default",
+      outline: true,
+      className: "border-base-content",
+    },
+  ],
+});

package/src/components/Form/Input/types.ts

@@ -1,8 +1,5 @@
 import { type VariantProps } from "../../../libs";
 import { getInputClasses } from "./constants";
 
-export type InputProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "size" | "ref"
-> &
+export type InputProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref"> &
   Omit<VariantProps<typeof getInputClasses>, "type">;

package/src/components/Form/OtpInput/OtpInput.tsx

@@ -1,14 +1,10 @@
+import { useState } from "react";
 import OTPInput from "react-otp-input";
-import { type OtpInputProps } from "./types";
-import { Input } from "../Input";
 import { cn } from "../../../utilities";
-import { useState } from "react";
+import { Input } from "../Input";
+import { type OtpInputProps } from "./types";
 
-export const OtpInput = ({
-  className,
-  inputProps,
-  ...props
-}: OtpInputProps) => {
+export const OtpInput = ({ className, inputProps, ...props }: OtpInputProps) => {
   const [otp, setOtp] = useState("");
 
   return (
@@ -20,10 +16,7 @@ export const OtpInput = ({
         <Input
           {...inputProps}
           {...renderProps}
-          className={cn(
-            "!w-12 !appearance-none selection:bg-base text-base-content",
-            className
-          )}
+          className={cn("!w-12 !appearance-none selection:bg-base text-base-content", className)}
         />
       )}
       containerStyle={`flex justify-center items-center flex-wrap text-2xl font-bold ${