@herca/r-kit 0.0.20 → 0.0.22

package/dist/clients.js

@@ -10082,7 +10082,7 @@ function createDateStyleHelpers({
 // src/components/calendar/partials/calendar-day-item.tsx
 import { jsx as jsx308, jsxs as jsxs40 } from "react/jsx-runtime";
 var date_size_map = {
-  md: "size-9",
+  md: "size-7.5",
   sm: "size-6",
   lg: "size-9"
 };
@@ -10294,70 +10294,80 @@ function CalendarGrid({
     { length: Math.ceil(days2.length / 7) },
     (_, i) => days2.slice(i * 7, i * 7 + 7)
   );
-  return /* @__PURE__ */ jsx310("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__ */ jsxs42(
-      "div",
-      {
-        className: clsx5(
-          "relative",
-          variant === "default" && "border-b border-gray-300 last:border-b-0!",
-          //prettier-ignore
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx310(
-            "div",
-            {
-              className: clsx5(
-                "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__ */ jsx310(
-                CalendarDayItem,
-                {
-                  day,
-                  helpers,
-                  size,
-                  mode,
-                  styleConfig,
-                  onClick,
-                  variant,
-                  events
-                },
-                dayIndex
-              ))
+  return /* @__PURE__ */ jsx310(
+    "div",
+    {
+      className: clsx5(
+        "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__ */ jsxs42("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__ */ jsx310(
-              EventBar,
-              {
-                segment: seg,
-                showTooltip: showCalendarTooltip
-              },
-              index
-            )),
-            /* @__PURE__ */ jsx310(ButtonMore, { segments })
-          ] })
-        ]
-      },
-      weekIndex
-    );
-  }) });
+          }
+        });
+        return /* @__PURE__ */ jsxs42(
+          "div",
+          {
+            className: clsx5(
+              "relative",
+              variant === "default" && "border-b border-gray-300 last:border-b-0!",
+              //prettier-ignore
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx310(
+                "div",
+                {
+                  className: clsx5(
+                    "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__ */ jsx310(
+                    CalendarDayItem,
+                    {
+                      day,
+                      helpers,
+                      size,
+                      mode,
+                      styleConfig,
+                      onClick,
+                      variant,
+                      events
+                    },
+                    dayIndex
+                  ))
+                }
+              ),
+              segments.length > 0 && /* @__PURE__ */ jsxs42("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__ */ jsx310(
+                  EventBar,
+                  {
+                    segment: seg,
+                    showTooltip: showCalendarTooltip
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsx310(ButtonMore, { segments })
+              ] })
+            ]
+          },
+          weekIndex
+        );
+      })
+    }
+  );
 }
 
 // src/components/calendar/partials/calendar-header.tsx
@@ -10553,9 +10563,9 @@ function NavigatorButton({
 
 // src/components/calendar/partials/days-of-week.tsx
 import clsx6 from "clsx";
-import { jsx as jsx313 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx313, jsxs as jsxs44 } from "react/jsx-runtime";
 var day_of_week_size = {
-  sm: "t3",
+  sm: "t2",
   md: "t2",
   lg: "t1"
 };
@@ -10563,39 +10573,76 @@ function DaysOfWeek({
   daysOfWeek,
   size = "md",
   wrapperClassName,
-  variant = "default"
+  variant = "default",
+  type = "month",
+  renderItem
 }) {
-  return /* @__PURE__ */ jsx313(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: clsx6(
         "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__ */ jsx313(
-        Text,
-        {
-          as: "h5",
-          weight: variant === "compact" ? "medium" : "semibold",
-          value: day,
-          className: clsx6(
-            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__ */ jsxs44(Fragment7, { children: [
+          /* @__PURE__ */ jsx313("div", {}),
+          daysOfWeek.map((day) => /* @__PURE__ */ jsx313(Text, { as: "h5", value: day, variant: "t1" }, day))
+        ] }),
+        type === "month" && renderItem === void 0 && daysOfWeek.map((day) => /* @__PURE__ */ jsx313(
+          Text,
+          {
+            as: "h5",
+            weight: variant === "compact" ? "medium" : "semibold",
+            value: day,
+            className: clsx6(
+              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
 import clsx7 from "clsx";
-import { Fragment as Fragment7, jsx as jsx314, jsxs as jsxs44 } from "react/jsx-runtime";
+
+// 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
+import { Fragment as Fragment8, jsx as jsx314, jsxs as jsxs45 } from "react/jsx-runtime";
 var days = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
 var month = [
   "Januari",
@@ -10646,6 +10693,14 @@ var Calendar2 = ({
   const [selectedTypeIndex, setSelectedTypeIndex] = useState10(
     null
   );
+  const [currentWeekStart, setCurrentWeekStart] = useState10(() => {
+    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,
@@ -10674,6 +10729,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;
@@ -10687,28 +10760,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);
+      }
+    }
+  };
   useEffect7(() => {
     if (value !== void 0) {
       setCurrentMonth(
@@ -10724,28 +10791,26 @@ var Calendar2 = ({
       setSelectedType(type);
     }
   }, [type]);
-  return /* @__PURE__ */ jsxs44("div", { className: clsx7(variant === "default" && "flex flex-col gap-2"), children: [
-    variant === "default" && /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-6", children: [
-        /* @__PURE__ */ jsxs44("div", { className: "*:cursor-pointer", children: [
-          /* @__PURE__ */ jsx314("button", { onClick: () => changeMonth(-1), children: /* @__PURE__ */ jsx314(
-            Icon_default,
+  return /* @__PURE__ */ jsxs45("div", { className: clsx7(variant === "default" && "flex flex-col gap-2"), children: [
+    variant === "default" && /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-6", children: [
+        /* @__PURE__ */ jsxs45("div", { className: "*:cursor-pointer", children: [
+          /* @__PURE__ */ jsx314(
+            ButtonNavigation,
             {
-              name: "angle-left-small",
-              size: 30,
-              className: "text-gray-900"
+              onClick: () => handleNavigationDefault(selectedType, "prev"),
+              type: "prev"
             }
-          ) }),
-          /* @__PURE__ */ jsx314("button", { onClick: () => changeMonth(1), children: /* @__PURE__ */ jsx314(
-            Icon_default,
+          ),
+          /* @__PURE__ */ jsx314(
+            ButtonNavigation,
             {
-              name: "angle-right-small",
-              size: 30,
-              className: "text-gray-900"
+              onClick: () => handleNavigationDefault(selectedType, "next"),
+              type: "next"
             }
-          ) })
+          )
         ] }),
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(
           Text,
           {
             variant: "h4",
@@ -10759,7 +10824,7 @@ var Calendar2 = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx314(
           Button,
           {
@@ -10767,11 +10832,12 @@ var Calendar2 = ({
             color: "gray",
             variant: "outline",
             className: "capitalize",
+            onClick: () => setCurrentMonth((/* @__PURE__ */ new Date()).getMonth()),
             children: "Today"
           }
         ),
-        /* @__PURE__ */ jsxs44(Dropdown, { children: [
-          /* @__PURE__ */ jsx314(DropdownTrigger, { children: /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(Dropdown, { children: [
+          /* @__PURE__ */ jsx314(DropdownTrigger, { children: /* @__PURE__ */ jsxs45(
             Button,
             {
               size: "sm",
@@ -10810,7 +10876,7 @@ var Calendar2 = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs44(
+    /* @__PURE__ */ jsxs45(
       "div",
       {
         className: cn(
@@ -10822,6 +10888,16 @@ var Calendar2 = ({
           wrapperClassname
         ),
         children: [
+          selectedType === "week" && /* @__PURE__ */ jsx314("div", { children: /* @__PURE__ */ jsx314(
+            DaysOfWeek,
+            {
+              type: "week",
+              size,
+              variant,
+              daysOfWeek: getWeekDaysLabel(currentWeekStart),
+              wrapperClassName: weekWrapperClassname
+            }
+          ) }),
           type === "year" && /* @__PURE__ */ jsx314("div", { className: "grid w-full grid-cols-3", children: /* @__PURE__ */ jsx314(
             CalendarGrid,
             {
@@ -10837,7 +10913,7 @@ var Calendar2 = ({
               showCalendarTooltip
             }
           ) }),
-          selectedType === "month" && /* @__PURE__ */ jsxs44(Fragment7, { children: [
+          selectedType === "month" && /* @__PURE__ */ jsxs45(Fragment8, { children: [
             showHeader && variant === "compact" && /* @__PURE__ */ jsx314(
               CalendarHeader,
               {
@@ -10882,6 +10958,19 @@ var Calendar2 = ({
     )
   ] });
 };
+var ButtonNavigation = ({
+  onClick,
+  type
+}) => {
+  return /* @__PURE__ */ jsx314("button", { onClick, children: /* @__PURE__ */ jsx314(
+    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 = [
@@ -10991,7 +11080,7 @@ var parseMonthName = (monthStr) => {
 
 // src/components/date-picker/date-picker.tsx
 import clsx8 from "clsx";
-import { jsx as jsx315, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx315, jsxs as jsxs46 } from "react/jsx-runtime";
 var DatePicker = ({
   format = "DD-MM-YYYY",
   mode = "single",
@@ -11240,7 +11329,7 @@ var DatePicker = ({
     {
       ref: containerRef,
       className: clsx8("relative flex max-w-sm flex-col", containerClassName),
-      children: /* @__PURE__ */ jsxs45(
+      children: /* @__PURE__ */ jsxs46(
         Dropdown,
         {
           open: isCalendarShow,
@@ -11284,8 +11373,8 @@ var DatePicker = ({
                     value: selectedDate,
                     ...calendarProps
                   }
-                ) : /* @__PURE__ */ jsxs45("div", { className: "flex", children: [
-                  showController && /* @__PURE__ */ jsxs45("div", { className: "flex flex-col items-start gap-2 border-r border-gray-400 px-3 py-6.5", children: [
+                ) : /* @__PURE__ */ jsxs46("div", { className: "flex", children: [
+                  showController && /* @__PURE__ */ jsxs46("div", { className: "flex flex-col items-start gap-2 border-r border-gray-400 px-3 py-6.5", children: [
                     /* @__PURE__ */ jsx315(
                       ChipGroup,
                       {
@@ -11375,8 +11464,8 @@ var DatePicker = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs45("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ jsxs45(
+                  /* @__PURE__ */ jsxs46("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxs46(
                       "div",
                       {
                         className: cn("flex", isMobile ? "flex-col" : "flex-row"),
@@ -11416,8 +11505,8 @@ var DatePicker = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs45("div", { className: "flex flex-col items-end justify-between gap-2 border-t border-gray-300 px-4 py-3 md:flex-row md:items-center", children: [
-                      /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs46("div", { className: "flex flex-col items-end justify-between gap-2 border-t border-gray-300 px-4 py-3 md:flex-row md:items-center", children: [
+                      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-2", children: [
                         /* @__PURE__ */ jsx315(
                           Input,
                           {
@@ -11443,7 +11532,7 @@ var DatePicker = ({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-2", children: [
                         /* @__PURE__ */ jsx315(
                           Button,
                           {
@@ -11562,7 +11651,7 @@ var SwitchThumbVariants = cva10(
 );
 
 // src/components/switch/switch.tsx
-import { jsx as jsx317, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx317, jsxs as jsxs47 } from "react/jsx-runtime";
 var BaseSwitch = ({
   id: providedId,
   checked,
@@ -11589,7 +11678,7 @@ var BaseSwitch = ({
     }
     onCheckedChange?.(newChecked);
   };
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     "button",
     {
       type: "button",
@@ -11648,7 +11737,7 @@ var Switch = ({
     md: "text-xs",
     lg: "text-base"
   };
-  return /* @__PURE__ */ jsx317(FormField, { hint, errorMessages, className, children: /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsx317(FormField, { hint, errorMessages, className, children: /* @__PURE__ */ jsxs47(
     "div",
     {
       className: cn(
@@ -11701,7 +11790,7 @@ var ToastVariants = cva11("", {
 });
 
 // src/components/toast/toast-card.tsx
-import { jsx as jsx318, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs48 } from "react/jsx-runtime";
 function ToastCard({
   color = "secondary",
   description = "Toast Description",
@@ -11720,7 +11809,7 @@ function ToastCard({
     if (color2 === "secondary" && variant === "outline") return "secondary";
     return color2;
   };
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     "div",
     {
       className: clsx9(
@@ -11732,7 +11821,7 @@ function ToastCard({
         ToastVariants({ bg: color })
       ),
       children: [
-        /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-2", children: [
           icon && /* @__PURE__ */ jsx318(
             Icon_default,
             {
@@ -11745,7 +11834,7 @@ function ToastCard({
               )
             }
           ),
-          /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsxs48(
             "div",
             {
               className: clsx9(
@@ -11761,7 +11850,7 @@ function ToastCard({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-2", children: [
           onClickAction && /* @__PURE__ */ jsx318(
             Button,
             {
@@ -11825,7 +11914,7 @@ function ToastItem({
 }
 
 // src/components/toast/toast-provider.tsx
-import { jsx as jsx320, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs49 } from "react/jsx-runtime";
 function ToastProvider({
   children,
   position = "top-right"
@@ -11838,7 +11927,7 @@ function ToastProvider({
     const id = crypto.randomUUID();
     setToasts((t) => [...t, { ...props, id }]);
   }, []);
-  return /* @__PURE__ */ jsxs48(ToastContext.Provider, { value: { show }, children: [
+  return /* @__PURE__ */ jsxs49(ToastContext.Provider, { value: { show }, children: [
     children,
     /* @__PURE__ */ jsx320(
       "div",
@@ -11883,7 +11972,7 @@ import React293, {
 } from "react";
 
 // src/components/loading/rounded-spinner.tsx
-import { jsx as jsx321, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs50 } from "react/jsx-runtime";
 var COLOR_MAP = {
   primary: { bg: "stroke-primary-1000/30", fg: "stroke-primary-1000" },
   secondary: { bg: "stroke-white/30", fg: "stroke-white" },
@@ -11905,7 +11994,7 @@ function RoundedSpinner({
   const inner = size - stroke;
   const offset = stroke / 2;
   const variant = COLOR_MAP[color];
-  return /* @__PURE__ */ jsx321("div", { style: { width: size, height: size, display: "inline-block" }, children: /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsx321("div", { style: { width: size, height: size, display: "inline-block" }, children: /* @__PURE__ */ jsxs50(
     "svg",
     {
       width: size,
@@ -11957,7 +12046,7 @@ function RoundedSpinner({
 
 // src/components/select/select.tsx
 import clsx11 from "clsx";
-import { jsx as jsx322, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs51 } from "react/jsx-runtime";
 var Select = ({
   options = [],
   value = null,
@@ -12100,16 +12189,17 @@ 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__ */ jsx322("span", { className: "text-gray-500", children: placeholder });
     }
     if (isMulti) {
-      return /* @__PURE__ */ jsx322("div", { className: "flex flex-wrap gap-1", children: asArray(value).map((item) => /* @__PURE__ */ jsxs50(
+      return /* @__PURE__ */ jsx322("div", { className: "flex flex-wrap gap-1", children: asArray(value).map((item) => /* @__PURE__ */ jsxs51(
         "div",
         {
           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__ */ jsx322(
               "button",
               {
@@ -12123,7 +12213,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);
@@ -12134,7 +12224,7 @@ var Select = ({
       errorMessages,
       description,
       hint,
-      children: /* @__PURE__ */ jsxs50(
+      children: /* @__PURE__ */ jsxs51(
         "div",
         {
           ref: containerRef,
@@ -12142,7 +12232,7 @@ var Select = ({
           onKeyDown: handleKeyDown2,
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsxs50(
+            /* @__PURE__ */ jsxs51(
               "div",
               {
                 "aria-selected": isOpen,
@@ -12156,7 +12246,7 @@ var Select = ({
                 tabIndex: isDisabled ? -1 : 0,
                 children: [
                   /* @__PURE__ */ jsx322("div", { className: "flex-1 overflow-hidden text-xs font-medium text-gray-900", children: getDisplayValue() }),
-                  /* @__PURE__ */ jsxs50("div", { className: "ml-2 flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxs51("div", { className: "ml-2 flex items-center gap-1", children: [
                     showClearButton && /* @__PURE__ */ jsx322(
                       "button",
                       {
@@ -12178,7 +12268,7 @@ var Select = ({
                 ]
               }
             ),
-            isOpen && /* @__PURE__ */ jsxs50(
+            isOpen && /* @__PURE__ */ jsxs51(
               "div",
               {
                 className: cn(
@@ -12186,7 +12276,7 @@ var Select = ({
                   "border-gray-200"
                 ),
                 children: [
-                  isSearchable && /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3.5 py-2.5", children: [
+                  isSearchable && /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3.5 py-2.5", children: [
                     /* @__PURE__ */ jsx322(Icon_default, { name: "search", size: 20, className: "text-gray-400" }),
                     /* @__PURE__ */ jsx322(
                       "input",
@@ -12201,7 +12291,7 @@ var Select = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs50(
+                  /* @__PURE__ */ jsxs51(
                     "div",
                     {
                       className: "max-h-62.5 space-y-2 overflow-y-auto focus:outline-none",
@@ -12224,7 +12314,7 @@ var Select = ({
                                 highlighted && "bg-primary-100",
                                 selected ? "bg-primary-50 border-primary-300" : "hover:bg-gray-50"
                               ),
-                              children: /* @__PURE__ */ jsx322("div", { className: "flex-1", children: renderOption !== void 0 ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsx322("div", { className: cn(selected && "font-medium"), children: option.label }) })
+                              children: /* @__PURE__ */ jsx322("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsx322("div", { className: cn(selected && "font-medium"), children: option.label }) })
                             },
                             option.value
                           );
@@ -12259,7 +12349,7 @@ import {
   useRef as useRef7,
   useEffect as useEffect11
 } from "react";
-import { jsx as jsx323, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs52 } from "react/jsx-runtime";
 var TabsContext = createContext5(void 0);
 var useTabsContext = () => {
   const context = useContext5(TabsContext);
@@ -12349,7 +12439,7 @@ var TabsList = ({ className, children }) => {
       clearTimeout(timer);
     };
   }, [value, orientation, isInitialized]);
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "div",
     {
       ref: listRef,