@mbao01/common 0.0.41 → 0.0.43

package/src/components/Calendar/Calendar.tsx

@@ -2,9 +2,9 @@
 
 import { DayPicker } from "react-day-picker";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
-import { type CalendarProps } from "./types";
 import { cn } from "../../utilities";
 import { getButtonClasses } from "../Button/constants";
+import { type CalendarProps } from "./types";
 
 export const Calendar = ({
   className,
@@ -17,46 +17,52 @@ export const Calendar = ({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
-        caption_dropdowns: "flex justify-center items-center",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        day: "h-9 w-9 text-center flex items-center justify-center text-sm p-0 relative focus-within:relative focus-within:z-20",
+        day_button: cn(
+          getButtonClasses({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal group-has-[*]/today:bg-accent group-aria-[selected]/today:bg-primary group-[.day-in-range]/today:!bg-primary/50 group-has-[*]/today:text-accent-content group-has-[*]/today:rounded-full"
+        ),
+        disabled: "!opacity-30",
+        dropdown: "bg-transparent",
+        dropdown_root: "text-sm [&>[aria-hidden='true']]:hidden",
+        dropdowns: "flex justify-center items-center",
+        hidden: "hidden",
+        button_previous: cn(
           getButtonClasses({ outline: true }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 [&:disabled]:text-opacity-50"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          getButtonClasses({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        button_next: cn(
+          getButtonClasses({ outline: true }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 [&:disabled]:text-opacity-50"
         ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-content disabled:bg-primary disabled:text-primary-content hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content",
-        day_today: "outline outline-accent",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-content",
-        day_hidden: "hidden",
-        vhidden: "hidden",
-        dropdown_month: "text-sm [&>[aria-hidden='true']]:hidden",
-        dropdown_year: "text-sm [&>[aria-hidden='true']]:hidden",
+        footer: "text-sm py-2",
+        month: "space-y-4",
+        month_caption: "flex justify-start pt-1 relative items-center",
+        month_grid: "w-full border-collapse space-y-1",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 relative",
+        nav: "absolute flex gap-2 items-center rtl:left-0 rtl:right-auto right-0 z-10",
+        outside: "opacity-50",
+        range_end: "!opacity-100",
+        range_start: "!opacity-100",
+        range_middle: "day-in-range [&>*]:bg-primary/50 [&>*]:text-primary-content",
+        selected:
+          "[&>*]:bg-primary [&>*]:text-primary-content [&:disabled>*]:bg-primary [&:disabled>*]:text-primary-content [&:hover>*]:bg-primary [&:hover>*]:text-primary-content [&:focus>*]:bg-primary [&:focus>*]:text-primary-content",
+        today: "group/today [&:has(*)]:ring-0 ring-1 ring-accent ring-inset rounded-full",
+        weekdays: "flex",
+        weekday: "rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        week_number: "flex items-center text-sm italic w-6",
+        week_number_header: "w-6",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+        Chevron: ({ orientation, className }) => {
+          if (orientation === "left") {
+            return <ChevronLeftIcon className={cn("h-4 w-4", className)} />;
+          }
+          return <ChevronRightIcon className={cn("h-4 w-4", className)} />;
+        },
       }}
       {...props}
     />

package/src/components/Card/Card.tsx

@@ -1,30 +1,20 @@
 import type {
   CardActionsProps,
+  CardBodyProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
   CardHeaderProps,
   CardImageProps,
-  CardTitleProps,
   CardProps,
-  CardBodyProps,
+  CardTitleProps,
 } from "./types";
 import { cn } from "../../utilities";
 import { getCardClasses } from "./constants";
 
-const Card = ({
-  compact,
-  bordered,
-  horizontal,
-  overlay,
-  className,
-  ...props
-}: CardProps) => (
+const Card = ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps) => (
   <div
-    className={cn(
-      getCardClasses({ bordered, compact, horizontal, overlay }),
-      className
-    )}
+    className={cn(getCardClasses({ bordered, compact, horizontal, overlay }), className)}
     {...props}
   />
 );

package/src/components/Card/types.ts

@@ -2,8 +2,7 @@ import React from "react";
 import { type VariantProps } from "../../libs";
 import { getCardClasses } from "./constants";
 
-export type CardProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof getCardClasses>;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getCardClasses>;
 
 export type CardActionsProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardBodyProps = React.HTMLAttributes<HTMLDivElement>;

package/src/components/Carousel/Carousel.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { forwardRef, useCallback, useEffect, useState } from "react";
-import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import useEmblaCarousel from "embla-carousel-react";
 import type { CarouselApi, CarouselProps } from "./types";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
+import { CarouselContext } from "./CarouselContext";
 import {
   getCarouselContentClasses,
   getCarouselItemClasses,
   getCarouselNextClasses,
   getCarouselPreviousClasses,
 } from "./constants";
-import { CarouselContext } from "./CarouselContext";
 import { useCarousel } from "./useCarousel";
 
 const Carousel = ({
@@ -92,8 +92,7 @@ const Carousel = ({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -114,86 +113,82 @@ const Carousel = ({
 };
 Carousel.displayName = "Carousel";
 
-const CarouselContent = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+const CarouselContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(getCarouselContentClasses({ orientation }), className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+const CarouselItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
       <div
         ref={ref}
-        className={cn(getCarouselContentClasses({ orientation }), className)}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(getCarouselItemClasses({ orientation }), className)}
         {...props}
       />
-    </div>
-  );
-});
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(getCarouselItemClasses({ orientation }), className)}
-      {...props}
-    />
-  );
-});
+    );
+  }
+);
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "ghost", outline = true, ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+const CarouselPrevious = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "ghost", outline = true, ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      outline={outline}
-      variant={variant}
-      className={cn(getCarouselPreviousClasses({ orientation }), className)}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeftIcon className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        outline={outline}
+        variant={variant}
+        className={cn(getCarouselPreviousClasses({ orientation }), className)}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, outline = true, variant = "ghost", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+const CarouselNext = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, outline = true, variant = "ghost", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      outline={outline}
-      variant={variant}
-      className={cn(getCarouselNextClasses({ orientation }), className)}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRightIcon className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        outline={outline}
+        variant={variant}
+        className={cn(getCarouselNextClasses({ orientation }), className)}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRightIcon className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
 CarouselNext.displayName = "CarouselNext";
 
 Carousel.Content = CarouselContent;

package/src/components/Carousel/constants.ts

@@ -12,20 +12,17 @@ export const getCarouselContentClasses = cva("flex", {
   },
 });
 
-export const getCarouselItemClasses = cva(
-  "min-w-0 shrink-0 grow-0 basis-full",
-  {
-    variants: {
-      orientation: {
-        horizontal: "pl-4",
-        vertical: "pt-4",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
+export const getCarouselItemClasses = cva("min-w-0 shrink-0 grow-0 basis-full", {
+  variants: {
+    orientation: {
+      horizontal: "pl-4",
+      vertical: "pt-4",
     },
-  }
-);
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
 
 export const getCarouselNextClasses = cva(
   "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",

package/src/components/Carousel/types.ts

@@ -1,4 +1,4 @@
-import { type UseEmblaCarouselType } from "embla-carousel-react";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
 import useEmblaCarousel from "embla-carousel-react";
 
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

package/src/components/Collapsible/Collapsible.tsx

@@ -1,11 +1,9 @@
 "use client";
 
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { type CollapsibleProps } from "@radix-ui/react-accordion";
+import { type CollapsibleProps } from "@radix-ui/react-collapsible";
 
-const Collapsible = (props: CollapsibleProps) => (
-  <CollapsiblePrimitive.Root {...props} />
-);
+const Collapsible = (props: CollapsibleProps) => <CollapsiblePrimitive.Root {...props} />;
 
 Collapsible.Trigger = CollapsiblePrimitive.CollapsibleTrigger;
 Collapsible.Content = CollapsiblePrimitive.CollapsibleContent;

package/src/components/Collapsible/types.ts

@@ -1,5 +1,3 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-export type CollapsibleProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.Root
->;
+export type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;

package/src/components/Combobox/Combobox.tsx

@@ -4,9 +4,9 @@ import * as React from "react";
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import type { ComboboxProps, Item } from "./types";
 import { cn } from "../../utilities";
+import { Button } from "../Button";
 import { Command } from "../Command";
 import { Popover } from "../Popover";
-import { Button } from "../Button";
 
 export const Combobox = <T extends Item>({
   label,
@@ -39,13 +39,8 @@ export const Combobox = <T extends Item>({
       </Popover.Trigger>
       <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>
         <Command className={cn(classes?.content)}>
-          <Command.Input
-            placeholder={placeholder}
-            className={cn(classes?.input)}
-          />
-          <Command.Empty className={cn(classes?.empty)}>
-            {emptyText}
-          </Command.Empty>
+          <Command.Input placeholder={placeholder} className={cn(classes?.input)} />
+          <Command.Empty className={cn(classes?.empty)}>{emptyText}</Command.Empty>
           <Command.List>
             <Command.Group className={cn(classes?.group)}>
               {items?.map((item) => (

package/src/components/Command/Command.tsx

@@ -1,27 +1,23 @@
 "use client";
-/* eslint-disable react/prop-types */
+
 import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import type {
-  CommandProps,
-  CommandDialogProps,
-  CommandInputProps,
-} from "./types";
-import { Dialog } from "../Dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import type { CommandDialogProps, CommandInputProps, CommandProps } from "./types";
 import { cn } from "../../utilities";
+import { Dialog } from "../Dialog";
 import {
-  getDialogContentClasses,
   getCommandClasses,
   getCommandDialogClasses,
   getCommandEmptyClasses,
+  getCommandGroupClasses,
   getCommandInputClasses,
   getCommandInputWrapperClasses,
+  getCommandItemClasses,
   getCommandListClasses,
-  getCommandGroupClasses,
   getCommandSeparatorClasses,
-  getCommandItemClasses,
   getCommandShortcutClasses,
+  getDialogContentClasses,
 } from "./constants";
 
 const Command = ({ className, ...props }: CommandProps) => (
@@ -60,11 +56,7 @@ const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn(getCommandListClasses(), className)}
-    {...props}
-  />
+  <CommandPrimitive.List ref={ref} className={cn(getCommandListClasses(), className)} {...props} />
 ));
 
 CommandList.displayName = CommandPrimitive.List.displayName;
@@ -111,22 +103,13 @@ const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(getCommandItemClasses(), className)}
-    {...props}
-  />
+  <CommandPrimitive.Item ref={ref} className={cn(getCommandItemClasses(), className)} {...props} />
 ));
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span className={cn(getCommandShortcutClasses(), className)} {...props} />
-  );
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn(getCommandShortcutClasses(), className)} {...props} />;
 };
 CommandShortcut.displayName = "CommandShortcut";
 

package/src/components/Command/constants.ts

@@ -10,17 +10,13 @@ export const getCommandDialogClasses = cva(
   "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
 );
 
-export const getCommandInputWrapperClasses = cva(
-  "flex items-center border-b px-3"
-);
+export const getCommandInputWrapperClasses = cva("flex items-center border-b px-3");
 
 export const getCommandInputClasses = cva(
   "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
 );
 
-export const getCommandListClasses = cva(
-  "max-h-[300px] overflow-y-auto overflow-x-hidden"
-);
+export const getCommandListClasses = cva("max-h-[300px] overflow-y-auto overflow-x-hidden");
 
 export const getCommandEmptyClasses = cva("py-6 text-center text-sm");
 

package/src/components/Command/types.ts

@@ -1,16 +1,12 @@
 import { Command as CommandPrimitive } from "cmdk";
-import { type DialogProps } from "../Dialog/types";
 import { type VariantProps } from "../../libs";
+import { type DialogProps } from "../Dialog/types";
 import { getCommandClasses, getCommandInputClasses } from "./constants";
 
-export type CommandProps = React.ComponentPropsWithoutRef<
-  typeof CommandPrimitive
-> &
+export type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> &
   VariantProps<typeof getCommandClasses>;
 
-export type CommandInputProps = React.ComponentPropsWithoutRef<
-  typeof CommandPrimitive.Input
-> &
+export type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> &
   VariantProps<typeof getCommandInputClasses>;
 
 export type CommandDialogProps = DialogProps;

package/src/components/DatePicker/DatePicker.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 DatePickerProps } 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 DatePickerProps } from "./types";
 
 export const DatePicker = ({
   name,
@@ -31,11 +31,11 @@ export const DatePicker = ({
 
   const calendar = (
     <Calendar
-      initialFocus
+      autoFocus
       mode="single"
       selected={date}
       onSelect={setDate}
-      captionLayout="dropdown-buttons"
+      captionLayout="label"
       {...props}
     />
   );
@@ -50,11 +50,7 @@ export const DatePicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn(
-            "justify-start",
-            !date && "font-normal",
-            triggerClassName
-          )}
+          className={cn("justify-start", !date && "font-normal", triggerClassName)}
           value={dateValue}
         >
           {dateLabel ?? <span>{label ?? "Pick a date"}</span>}

package/src/components/DatePicker/DateRangePicker.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { format } from "date-fns";
 import { type DateRange } from "react-day-picker";
 import { CalendarIcon } from "@radix-ui/react-icons";
-import { type DateRangePickerProps } 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 DateRangePickerProps } from "./types";
 
 export const DateRangePicker = ({
   name,
@@ -69,11 +69,7 @@ export const DateRangePicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn(
-            "justify-start flex-nowrap",
-            !range && "font-normal",
-            triggerClassName
-          )}
+          className={cn("justify-start flex-nowrap", !range && "font-normal", triggerClassName)}
         >
           <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick a range"}
@@ -83,11 +79,11 @@ export const DateRangePicker = ({
       </Popover.Trigger>
       <Popover.Content className="w-auto p-0">
         <Calendar
-          initialFocus
+          autoFocus
           mode="range"
           selected={range}
           onSelect={setRange}
-          captionLayout="dropdown-buttons"
+          captionLayout="label"
           {...props}
         />
       </Popover.Content>