@yuva-devlab/ui 1.4.3 → 1.4.4

package/dist/components.css

@@ -486,6 +486,246 @@
     text-decoration: underline;
   }
 
+  /* ── calendar ── */
+  .dl-calendar {
+    --cell-size: 2rem;
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
+    padding: 0.75rem;
+    box-sizing: border-box;
+    color: var(--foreground);
+  }
+
+  .dl-calendar .rdp-root {
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  .dl-calendar .rdp-months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: calc(var(--cell-size, 2rem) * 7);
+    box-sizing: border-box;
+  }
+
+  .dl-calendar .rdp-month {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .dl-calendar .rdp-month_caption {
+    position: relative;
+    display: flex;
+    height: var(--cell-size, 2rem);
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--cell-size, 2rem);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+    box-sizing: border-box;
+  }
+
+  .dl-calendar .rdp-caption_label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+    line-height: 1;
+  }
+
+  /* Navigation prev / next arrows */
+  .dl-calendar .rdp-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: var(--cell-size, 2rem);
+    pointer-events: none;
+  }
+
+  .dl-calendar .rdp-button_previous,
+  .dl-calendar .rdp-button_next {
+    pointer-events: auto;
+    width: var(--cell-size, 2rem) !important;
+    height: var(--cell-size, 2rem) !important;
+    min-width: var(--cell-size, 2rem) !important;
+    padding: 0 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .dl-calendar .rdp-button_previous:hover,
+  .dl-calendar .rdp-button_next:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .dl-calendar .rdp-button_previous svg,
+  .dl-calendar .rdp-button_next svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  /* Grid Table */
+  .dl-calendar table.rdp-month_grid,
+  .dl-calendar table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+  }
+
+  /* Weekday header cells */
+  .dl-calendar th.rdp-weekday,
+  .dl-calendar th {
+    width: calc(100% / 7);
+    height: var(--cell-size, 2rem);
+    text-align: center;
+    vertical-align: middle;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  /* Day table cells */
+  .dl-calendar td.rdp-day,
+  .dl-calendar td {
+    width: calc(100% / 7);
+    height: var(--cell-size, 2rem);
+    padding: 2px !important;
+    margin: 0;
+    text-align: center;
+    vertical-align: middle;
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-sizing: border-box;
+  }
+
+  /* Day Button inside td */
+  .dl-calendar button.rdp-day_button,
+  .dl-calendar .dl-calendar__day-button {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    border: none !important;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--foreground);
+    background: transparent;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: all 0.15s ease;
+  }
+
+  .dl-calendar button.rdp-day_button:hover:not(:disabled) {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* Selected Date Highlight */
+  .dl-calendar td[aria-selected="true"] button.rdp-day_button,
+  .dl-calendar td.rdp-selected button.rdp-day_button,
+  .dl-calendar button.rdp-day_button[data-selected="true"],
+  .dl-calendar button.rdp-day_button[data-selected-single="true"] {
+    background-color: var(--primary) !important;
+    color: var(--primary-foreground) !important;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    font-weight: 600;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+  }
+
+  .dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
+  .dl-calendar td.rdp-selected button.rdp-day_button:hover,
+  .dl-calendar button.rdp-day_button[data-selected="true"]:hover,
+  .dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
+    background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
+    color: var(--primary-foreground) !important;
+  }
+
+  /* Today indicator (when not selected) */
+  .dl-calendar
+    td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
+    button.rdp-day_button {
+    background-color: color-mix(
+      in oklch,
+      var(--secondary) 60%,
+      transparent
+    ) !important;
+    color: var(--foreground) !important;
+    font-weight: 600;
+    border: 1px solid var(--border) !important;
+  }
+
+  /* Range selection styles */
+  .dl-calendar td.rdp-range_start {
+    background-color: var(--accent) !important;
+    border-top-left-radius: var(--radius-md, 0.375rem) !important;
+    border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
+  }
+
+  .dl-calendar td.rdp-range_middle {
+    background-color: var(--accent) !important;
+    border-radius: 0 !important;
+  }
+
+  .dl-calendar td.rdp-range_middle button.rdp-day_button {
+    background: transparent !important;
+    color: var(--accent-foreground) !important;
+    border-radius: 0 !important;
+  }
+
+  .dl-calendar td.rdp-range_end {
+    background-color: var(--accent) !important;
+    border-top-right-radius: var(--radius-md, 0.375rem) !important;
+    border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
+  }
+
+  .dl-calendar td.rdp-outside button.rdp-day_button {
+    color: var(--muted-foreground) !important;
+    opacity: 0.35;
+  }
+
+  .dl-calendar button.rdp-day_button:disabled {
+    color: var(--muted-foreground) !important;
+    opacity: 0.25;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .dl-calendar td.rdp-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   /* ── card ── */
   .dl-card {
     border-radius: var(--radius-lg, 0.5rem);
@@ -820,6 +1060,8 @@
     cursor: pointer;
     transition: all 0.15s ease;
     user-select: none;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .dl-copy-button:hover {
@@ -865,9 +1107,15 @@
     flex-shrink: 0;
   }
 
-  .dl-date-picker-content {
-    width: auto;
-    padding: 0;
+  .dl-date-picker-content,
+  .dl-popover.dl-date-picker-content {
+    width: fit-content !important;
+    max-width: fit-content !important;
+    padding: 0 !important;
+    box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover);
   }
 
   /* ── dialog ── */
@@ -1755,6 +2003,11 @@
     animation: dl-fade-out 150ms ease;
   }
 
+  .dl-popover.dl-date-picker-content {
+    width: auto;
+    padding: 0;
+  }
+
   /* ── progress ── */
   .dl-progress {
     position: relative;
@@ -2073,6 +2326,7 @@
     border: 1px solid var(--border);
     border-radius: calc(var(--radius, 0.5rem) - 2px);
     padding: 0.5rem 0.75rem;
+    flex-wrap: nowrap;
   }
 
   .dl-secret-reveal__code {
@@ -2081,6 +2335,8 @@
     color: var(--primary);
     word-break: break-all;
     user-select: all;
+    min-width: 0;
+    flex: 1;
   }
 
   /* ── select ── */

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
       }
     ) })
   ] });