@herca/r-kit 0.0.20 → 0.0.22

package/dist/clients.cjs

@@ -10206,7 +10206,7 @@ function createDateStyleHelpers({
 // src/components/calendar/partials/calendar-day-item.tsx
 var import_jsx_runtime308 = require("react/jsx-runtime");
 var date_size_map = {
-  md: "size-9",
+  md: "size-7.5",
   sm: "size-6",
   lg: "size-9"
 };
@@ -10418,70 +10418,80 @@ function CalendarGrid({
     { length: Math.ceil(days2.length / 7) },
     (_, i) => days2.slice(i * 7, i * 7 + 7)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "relative", children: weeks.map((week, weekIndex) => {
-    const segments = getWeekEventSegments({
-      week,
-      events
-    });
-    const columnEventCount = Array(7).fill(0);
-    segments.forEach((seg) => {
-      for (let i = 0; i < seg.span; i++) {
-        const colIndex = seg.startCol + i;
-        if (colIndex >= 0 && colIndex < 7) {
-          columnEventCount[colIndex]++;
-        }
-      }
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
-      "div",
-      {
-        className: (0, import_clsx5.default)(
-          "relative",
-          variant === "default" && "border-b border-gray-300 last:border-b-0!",
-          //prettier-ignore
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
-            "div",
-            {
-              className: (0, import_clsx5.default)(
-                "grid w-full grid-cols-7",
-                variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0"
-                //prettier-ignore
-              ),
-              children: week.map((day, dayIndex) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
-                CalendarDayItem,
-                {
-                  day,
-                  helpers,
-                  size,
-                  mode,
-                  styleConfig,
-                  onClick,
-                  variant,
-                  events
-                },
-                dayIndex
-              ))
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+    "div",
+    {
+      className: (0, import_clsx5.default)(
+        "relative",
+        variant === "compact" && size === "sm" && "space-y-1"
+      ),
+      children: weeks.map((week, weekIndex) => {
+        const segments = getWeekEventSegments({
+          week,
+          events
+        });
+        const columnEventCount = Array(7).fill(0);
+        segments.forEach((seg) => {
+          for (let i = 0; i < seg.span; i++) {
+            const colIndex = seg.startCol + i;
+            if (colIndex >= 0 && colIndex < 7) {
+              columnEventCount[colIndex]++;
             }
-          ),
-          segments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "absolute inset-x-0 bottom-2 grid grid-cols-7 gap-0.5", children: [
-            segments.slice(0, isMobile ? 1 : 2).map((seg, index) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
-              EventBar,
-              {
-                segment: seg,
-                showTooltip: showCalendarTooltip
-              },
-              index
-            )),
-            /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(ButtonMore, { segments })
-          ] })
-        ]
-      },
-      weekIndex
-    );
-  }) });
+          }
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx5.default)(
+              "relative",
+              variant === "default" && "border-b border-gray-300 last:border-b-0!",
+              //prettier-ignore
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx5.default)(
+                    "grid w-full grid-cols-7",
+                    variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
+                    //prettier-ignore
+                    variant === "compact" && "place-items-center"
+                  ),
+                  children: week.map((day, dayIndex) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+                    CalendarDayItem,
+                    {
+                      day,
+                      helpers,
+                      size,
+                      mode,
+                      styleConfig,
+                      onClick,
+                      variant,
+                      events
+                    },
+                    dayIndex
+                  ))
+                }
+              ),
+              segments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "absolute inset-x-0 bottom-2 grid grid-cols-7 gap-0.5", children: [
+                segments.slice(0, isMobile ? 1 : 2).map((seg, index) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+                  EventBar,
+                  {
+                    segment: seg,
+                    showTooltip: showCalendarTooltip
+                  },
+                  index
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(ButtonMore, { segments })
+              ] })
+            ]
+          },
+          weekIndex
+        );
+      })
+    }
+  );
 }
 
 // src/components/calendar/partials/calendar-header.tsx
@@ -10679,7 +10689,7 @@ function NavigatorButton({
 var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var day_of_week_size = {
-  sm: "t3",
+  sm: "t2",
   md: "t2",
   lg: "t1"
 };
@@ -10687,38 +10697,75 @@ function DaysOfWeek({
   daysOfWeek,
   size = "md",
   wrapperClassName,
-  variant = "default"
+  variant = "default",
+  type = "month",
+  renderItem
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
     "div",
     {
       className: (0, import_clsx6.default)(
         "grid justify-items-center",
         variant === "compact" && "calendar-cols mb-3 gap-x-1 *:text-center!",
-        variant === "default" && "w-full grid-cols-7 bg-gray-100 *:p-3 *:w-full *:text-start! *:border-r *:border-gray-300 *:last:border-r-0",
+        variant === "default" && "w-full bg-gray-100 *:p-3 *:w-full *:text-start! *:border-r *:border-gray-300 *:last:border-r-0",
+        //prettier-ignore
+        variant === "default" && type === "month" && "grid-cols-7",
+        variant === "default" && type === "week" && "grid-cols-[60px_1fr_1fr_1fr_1fr_1fr_1fr_1fr]",
         //prettier-ignore
         wrapperClassName
       ),
-      children: daysOfWeek.map((day) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
-        Text,
-        {
-          as: "h5",
-          weight: variant === "compact" ? "medium" : "semibold",
-          value: day,
-          className: (0, import_clsx6.default)(
-            variant === "compact" && "text-gray-600!",
-            variant === "default" && "text-gray-900! uppercase"
-          ),
-          variant: variant === "compact" ? day_of_week_size[size] : "t1"
-        },
-        day
-      ))
+      children: [
+        type === "week" && variant === "default" && renderItem === void 0 && /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_jsx_runtime313.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", {}),
+          daysOfWeek.map((day) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Text, { as: "h5", value: day, variant: "t1" }, day))
+        ] }),
+        type === "month" && renderItem === void 0 && daysOfWeek.map((day) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+          Text,
+          {
+            as: "h5",
+            weight: variant === "compact" ? "medium" : "semibold",
+            value: day,
+            className: (0, import_clsx6.default)(
+              variant === "compact" && "text-gray-600!",
+              variant === "default" && "text-gray-900! uppercase"
+            ),
+            variant: variant === "compact" ? day_of_week_size[size] : "t1"
+          },
+          day
+        ))
+      ]
     }
   );
 }
 
 // src/components/calendar/calendar.tsx
 var import_clsx7 = __toESM(require("clsx"), 1);
+
+// src/components/calendar/constants.tsx
+var typeOptions = [
+  {
+    label: "Year",
+    value: "year"
+  },
+  {
+    label: "Month",
+    value: "month"
+  },
+  {
+    label: "Week",
+    value: "week"
+  },
+  {
+    label: "Day",
+    value: "day"
+  },
+  {
+    label: "Agenda",
+    value: "agenda"
+  }
+];
+
+// src/components/calendar/calendar.tsx
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var days = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
 var month = [
@@ -10770,6 +10817,14 @@ var Calendar2 = ({
   const [selectedTypeIndex, setSelectedTypeIndex] = (0, import_react295.useState)(
     null
   );
+  const [currentWeekStart, setCurrentWeekStart] = (0, import_react295.useState)(() => {
+    const today = /* @__PURE__ */ new Date();
+    const day = today.getDay();
+    const start = new Date(today);
+    start.setDate(today.getDate() - day);
+    start.setHours(0, 0, 0, 0);
+    return start;
+  });
   const calendarDays = getCalendarDays({ currentMonth, currentYear });
   const calendarHelpers = createCalendarHelpers({
     disabledDates,
@@ -10798,6 +10853,24 @@ var Calendar2 = ({
     }
     onChange?.(day.fullDate);
   };
+  const getWeekDaysLabel = (weekStart) => {
+    return Array.from({ length: 7 }, (_, i) => {
+      const d = new Date(weekStart);
+      d.setDate(weekStart.getDate() + i);
+      const dayName = daysOfWeek[d.getDay()];
+      const date = d.getDate();
+      return `${dayName} ${date}`;
+    });
+  };
+  const changeWeek = (delta) => {
+    setCurrentWeekStart((prev) => {
+      const next = new Date(prev);
+      next.setDate(prev.getDate() + delta * 7);
+      setCurrentMonth(next.getMonth());
+      setCurrentYear(next.getFullYear());
+      return next;
+    });
+  };
   const changeMonth = (delta) => {
     let newMonth = currentMonth + delta;
     let newYear = currentYear;
@@ -10811,28 +10884,22 @@ var Calendar2 = ({
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   };
-  const typeOptions = [
-    {
-      label: "Year",
-      value: "year"
-    },
-    {
-      label: "Month",
-      value: "month"
-    },
-    {
-      label: "Week",
-      value: "week"
-    },
-    {
-      label: "Day",
-      value: "day"
-    },
-    {
-      label: "Agenda",
-      value: "agenda"
+  const handleNavigationDefault = (type2, action) => {
+    if (type2 === "month") {
+      if (action === "next") {
+        return changeMonth(-1);
+      } else {
+        return changeMonth(1);
+      }
     }
-  ];
+    if (type2 === "week") {
+      if (action === "next") {
+        return changeWeek(1);
+      } else {
+        return changeWeek(-1);
+      }
+    }
+  };
   (0, import_react295.useEffect)(() => {
     if (value !== void 0) {
       setCurrentMonth(
@@ -10852,22 +10919,20 @@ var Calendar2 = ({
     variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "*:cursor-pointer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { onClick: () => changeMonth(-1), children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-            Icon_default,
+          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+            ButtonNavigation,
             {
-              name: "angle-left-small",
-              size: 30,
-              className: "text-gray-900"
+              onClick: () => handleNavigationDefault(selectedType, "prev"),
+              type: "prev"
             }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { onClick: () => changeMonth(1), children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-            Icon_default,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+            ButtonNavigation,
             {
-              name: "angle-right-small",
-              size: 30,
-              className: "text-gray-900"
+              onClick: () => handleNavigationDefault(selectedType, "next"),
+              type: "next"
             }
-          ) })
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
           Text,
@@ -10891,6 +10956,7 @@ var Calendar2 = ({
             color: "gray",
             variant: "outline",
             className: "capitalize",
+            onClick: () => setCurrentMonth((/* @__PURE__ */ new Date()).getMonth()),
             children: "Today"
           }
         ),
@@ -10946,6 +11012,16 @@ var Calendar2 = ({
           wrapperClassname
         ),
         children: [
+          selectedType === "week" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+            DaysOfWeek,
+            {
+              type: "week",
+              size,
+              variant,
+              daysOfWeek: getWeekDaysLabel(currentWeekStart),
+              wrapperClassName: weekWrapperClassname
+            }
+          ) }),
           type === "year" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "grid w-full grid-cols-3", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
             CalendarGrid,
             {
@@ -11006,6 +11082,19 @@ var Calendar2 = ({
     )
   ] });
 };
+var ButtonNavigation = ({
+  onClick,
+  type
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    Icon_default,
+    {
+      name: type === "next" ? "angle-right-small" : "angle-left-small",
+      size: 30,
+      className: "text-gray-900"
+    }
+  ) });
+};
 
 // src/components/date-picker/helpers.ts
 var monthsShort = [
@@ -12220,7 +12309,8 @@ var Select = ({
     }
   }, [isOpen, isSearchable]);
   const getDisplayValue = () => {
-    if (value !== null || value !== void 0 || isMulti && asArray(value).length === 0) {
+    const isEmpty = value == null || isMulti && asArray(value).length === 0;
+    if (isEmpty) {
       return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: "text-gray-500", children: placeholder });
     }
     if (isMulti) {
@@ -12229,7 +12319,7 @@ var Select = ({
         {
           className: "border-primary-200 flex items-center gap-1 rounded border bg-white px-2 py-0.5 text-xs text-gray-900",
           children: [
-            renderValue !== void 0 ? renderValue?.(item) : item.label,
+            renderValue !== void 0 && renderValue !== null ? renderValue?.(item) : item.label,
             /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
               "button",
               {
@@ -12243,7 +12333,7 @@ var Select = ({
         item.value
       )) });
     }
-    return renderValue !== void 0 ? renderValue?.(value) : value.label;
+    return renderValue !== void 0 && renderValue !== null ? renderValue?.(value) : value.label;
   };
   const showClearButton = isClearable && (isMulti && asArray(value).length > 0 || !isMulti && value !== null);
   const hasError = fieldHasError(errorMessages);
@@ -12344,7 +12434,7 @@ var Select = ({
                                 highlighted && "bg-primary-100",
                                 selected ? "bg-primary-50 border-primary-300" : "hover:bg-gray-50"
                               ),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "flex-1", children: renderOption !== void 0 ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: cn(selected && "font-medium"), children: option.label }) })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: cn(selected && "font-medium"), children: option.label }) })
                             },
                             option.value
                           );