@herca/r-kit 0.0.20 → 0.0.21

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,74 @@ function DaysOfWeek({
   daysOfWeek,
   size = "md",
   wrapperClassName,
-  variant = "default"
+  variant = "default",
+  type = "month"
 }) {
-  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" && /* @__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" && 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 = [
@@ -10811,28 +10857,6 @@ 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"
-    }
-  ];
   (0, import_react295.useEffect)(() => {
     if (value !== void 0) {
       setCurrentMonth(
@@ -10852,22 +10876,8 @@ 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,
-            {
-              name: "angle-left-small",
-              size: 30,
-              className: "text-gray-900"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { onClick: () => changeMonth(1), children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-            Icon_default,
-            {
-              name: "angle-right-small",
-              size: 30,
-              className: "text-gray-900"
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ButtonNavigation, { onClick: () => changeMonth(-1), type: "prev" }),
+          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ButtonNavigation, { onClick: () => changeMonth(1), type: "next" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
           Text,
@@ -10946,6 +10956,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,
+              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 +11026,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 = [