@yuva-devlab/ui 1.4.2 → 1.4.4

package/dist/index.cjs

@@ -760,19 +760,14 @@ function Calendar({
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
-      className: cn(
-        "group/calendar p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
+      className: cn("dl-calendar group/calendar", className),
       captionLayout,
       formatters: {
         formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
         ...formatters
       },
       classNames: {
-        root: cn("w-fit", defaultClassNames.root),
+        root: cn("dl-calendar w-fit", defaultClassNames.root),
         months: cn(
           "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
@@ -783,25 +778,25 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "select-none p-0 aria-disabled:opacity-50 size-(--cell-size)",
+          buttonVariants({ variant: buttonVariant, size: "icon" }),
+          "select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "select-none p-0 aria-disabled:opacity-50 size-(--cell-size)",
+          buttonVariants({ variant: buttonVariant, size: "icon" }),
+          "select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          "flex w-full items-center justify-center",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          "relative rounded-md border border-input shadow-xs",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -809,81 +804,68 @@ function Calendar({
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          "select-none font-medium text-sm",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md size-full",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        table: cn("w-full border-collapse", defaultClassNames.month_grid),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: defaultClassNames.weekdays,
+        weekday: defaultClassNames.weekday,
+        week: defaultClassNames.week,
+        day: defaultClassNames.day,
+        range_start: defaultClassNames.range_start,
+        range_middle: defaultClassNames.range_middle,
+        range_end: defaultClassNames.range_end,
+        today: defaultClassNames.today,
+        outside: defaultClassNames.outside,
+        disabled: defaultClassNames.disabled,
+        hidden: defaultClassNames.hidden,
         ...classNames
       },
       components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
+        Root: ({ className: rootClassName, rootRef, ...rootProps }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: rootRef,
+            className: cn("dl-calendar", rootClassName),
+            ...rootProps
+          }
+        ),
+        Chevron: ({
+          className: chevronClassName,
+          orientation,
+          ...chevronProps
+        }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_lucide_react3.ChevronLeftIcon,
+              {
+                className: cn("size-4", chevronClassName),
+                ...chevronProps
+              }
+            );
           }
           if (orientation === "right") {
             return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               import_lucide_react3.ChevronRightIcon,
               {
-                className: cn("size-4", className2),
-                ...props2
+                className: cn("size-4", chevronClassName),
+                ...chevronProps
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_lucide_react3.ChevronDownIcon,
+            {
+              className: cn("size-4", chevronClassName),
+              ...chevronProps
+            }
+          );
         },
         DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
+        WeekNumber: ({ children, ...weekProps }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { ...weekProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) }),
         ...components
       },
       ...props
@@ -905,16 +887,17 @@ function CalendarDayButton({
     Button,
     {
       ref,
-      variant: "ghost",
+      variant: modifiers["selected"] ? "default" : "ghost",
       size: "icon",
       "data-day": day.date.toLocaleDateString(),
+      "data-selected": modifiers["selected"] ? "true" : void 0,
       "data-selected-single": modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"],
       "data-range-start": modifiers["range_start"],
       "data-range-end": modifiers["range_end"],
       "data-range-middle": modifiers["range_middle"],
       className: cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
+        "dl-calendar__day-button flex aspect-square items-center justify-center font-normal leading-none",
+        defaultClassNames.day_button,
         className
       ),
       ...props
@@ -1727,7 +1710,7 @@ function DatePicker({
         mode: "single",
         selected: date,
         onSelect: (selectedDate) => onChange?.(selectedDate ? (0, import_date_fns.format)(selectedDate, "yyyy-MM-dd") : ""),
-        initialFocus: true
+        autoFocus: true
       }
     ) })
   ] });
@@ -2819,12 +2802,7 @@ var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        import_lucide_react18.ChevronDown,
-        {
-          style: { opacity: 0.5, width: "0.75rem", height: "0.75rem" }
-        }
-      ) })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronDown, { style: { opacity: 0.5, width: "1rem", height: "1rem" } }) })
     ]
   }
 ));