analytica-frontend-lib 1.0.42 → 1.0.44

package/dist/index.mjs

@@ -1254,7 +1254,7 @@ var STATE_CLASSES4 = {
   default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
   error: "border-2 border-indicator-error placeholder:text-text-600",
   disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
-  "read-only": "border-border-300 !text-text-600 cursor-default focus:outline-none bg-background-50"
+  "read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
 };
 var VARIANT_CLASSES = {
   outlined: "border rounded-lg",
@@ -1293,6 +1293,9 @@ var getCombinedClasses = (actualState, variant) => {
   if (actualState === "error" && variant === "underlined") {
     return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
   }
+  if (actualState === "read-only" && variant === "underlined") {
+    return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
+  }
   return `${stateClasses} ${variantClasses}`;
 };
 var Input = forwardRef8(
@@ -1323,7 +1326,7 @@ var Input = forwardRef8(
       [actualState, variant]
     );
     const iconSize = getIconSize(size);
-    const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
+    const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
     const generatedId = useId4();
     const inputId = id ?? `input-${generatedId}`;
     const togglePasswordVisibility = () => setShowPassword(!showPassword);
@@ -1434,7 +1437,7 @@ var Chips = ({
 var Chips_default = Chips;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var SIZE_CLASSES7 = {
   small: {
     container: "h-1",
@@ -1475,101 +1478,397 @@ var VARIANT_CLASSES2 = {
     // Green for performance (#84D3A2)
   }
 };
-var ProgressBar = ({
-  value,
-  max = 100,
-  size = "medium",
-  variant = "blue",
-  label,
-  showPercentage = false,
-  className = "",
-  labelClassName = "",
-  percentageClassName = ""
-}) => {
+var calculateProgressValues = (value, max) => {
   const safeValue = isNaN(value) ? 0 : value;
   const clampedValue = Math.max(0, Math.min(safeValue, max));
   const percentage = max === 0 ? 0 : clampedValue / max * 100;
-  const sizeClasses = SIZE_CLASSES7[size];
-  const variantClasses = VARIANT_CLASSES2[variant];
-  return /* @__PURE__ */ jsxs13(
+  return { clampedValue, percentage };
+};
+var shouldShowHeader = (label, showPercentage, showHitCount) => {
+  return !!(label || showPercentage || showHitCount);
+};
+var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
+  if (showHitCount) {
+    return {
+      type: "hitCount",
+      content: `${Math.round(clampedValue)} de ${max}`,
+      hasMetrics: true
+    };
+  }
+  if (showPercentage) {
+    return {
+      type: "percentage",
+      content: `${Math.round(percentage)}%`,
+      hasMetrics: true
+    };
+  }
+  return {
+    type: "label",
+    content: label,
+    hasMetrics: false
+  };
+};
+var getCompactLayoutConfig = ({
+  showPercentage,
+  showHitCount,
+  percentage,
+  clampedValue,
+  max,
+  label,
+  percentageClassName,
+  labelClassName
+}) => {
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    label,
+    clampedValue,
+    max,
+    percentage
+  );
+  return {
+    color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
+    className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
+    content: displayPriority.content
+  };
+};
+var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
+  showHeader: size === "small" && !!(label || showPercentage),
+  showPercentage: size === "medium" && showPercentage,
+  showLabel: size === "medium" && !!label && !showPercentage
+  // Only show label when percentage is not shown
+});
+var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
+  if (!showHitCount && !showPercentage) return null;
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    null,
+    // label is not relevant for stacked layout metrics display
+    clampedValue,
+    max,
+    percentage
+  );
+  return /* @__PURE__ */ jsx18(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
-      children: [
-        size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-between w-full", children: [
-          label && /* @__PURE__ */ jsx18(
-            Text_default,
-            {
-              as: "div",
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
-              children: label
-            }
-          ),
-          showPercentage && /* @__PURE__ */ jsxs13(
-            Text_default,
-            {
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
-              children: [
-                Math.round(percentage),
-                "%"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
-            children: [
-              /* @__PURE__ */ jsx18(
-                "progress",
-                {
-                  value: clampedValue,
-                  max,
-                  "aria-label": typeof label === "string" ? label : "Progress",
-                  className: "absolute inset-0 w-full h-full opacity-0"
-                }
-              ),
-              /* @__PURE__ */ jsx18(
-                "div",
-                {
-                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
-                  style: { width: `${percentage}%` }
-                }
-              )
-            ]
-          }
-        ),
-        size === "medium" && showPercentage && /* @__PURE__ */ jsxs13(
+      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+        /* @__PURE__ */ jsx18("span", { className: "text-success-200", children: Math.round(clampedValue) }),
+        /* @__PURE__ */ jsxs13("span", { className: "text-text-600", children: [
+          " de ",
+          max
+        ] })
+      ] }) : /* @__PURE__ */ jsxs13(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    }
+  );
+};
+var ProgressBarBase = ({
+  clampedValue,
+  max,
+  percentage,
+  label,
+  variantClasses,
+  containerClassName,
+  fillClassName
+}) => /* @__PURE__ */ jsxs13(
+  "div",
+  {
+    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    children: [
+      /* @__PURE__ */ jsx18(
+        "progress",
+        {
+          value: clampedValue,
+          max,
+          "aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
+          className: "absolute inset-0 w-full h-full opacity-0"
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: `${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`,
+          style: { width: `${percentage}%` }
+        }
+      )
+    ]
+  }
+);
+var StackedLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => /* @__PURE__ */ jsxs13(
+  "div",
+  {
+    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    children: [
+      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
+        label && /* @__PURE__ */ jsx18(
           Text_default,
           {
-            size: "xs",
+            as: "div",
+            size: "md",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
-            children: [
-              Math.round(percentage),
-              "%"
-            ]
+            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            children: label
           }
         ),
-        size === "medium" && label && !showPercentage && /* @__PURE__ */ jsx18(
+        renderStackedHitCountDisplay(
+          showHitCount,
+          showPercentage,
+          clampedValue,
+          max,
+          percentage,
+          percentageClassName
+        )
+      ] }),
+      /* @__PURE__ */ jsx18(
+        ProgressBarBase,
+        {
+          clampedValue,
+          max,
+          percentage,
+          label,
+          variantClasses,
+          containerClassName: "w-full h-2 rounded-lg",
+          fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
+        }
+      )
+    ]
+  }
+);
+var CompactLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => {
+  const {
+    color,
+    className: compactClassName,
+    content
+  } = getCompactLayoutConfig({
+    showPercentage,
+    showHitCount,
+    percentage,
+    clampedValue,
+    max,
+    label,
+    percentageClassName,
+    labelClassName
+  });
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      children: [
+        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsx18(
           Text_default,
           {
             as: "div",
-            size: "xs",
+            size: "sm",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
-            children: label
+            color,
+            className: `leading-4 w-full ${compactClassName}`,
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          ProgressBarBase,
+          {
+            clampedValue,
+            max,
+            percentage,
+            label,
+            variantClasses,
+            containerClassName: "w-full h-1 rounded-full",
+            fillClassName: "h-1 rounded-full"
           }
         )
       ]
     }
   );
 };
+var DefaultLayout = ({
+  className,
+  size,
+  sizeClasses,
+  variantClasses,
+  label,
+  showPercentage,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage
+}) => {
+  const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
+  const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
+  const displayConfig = getDefaultLayoutDisplayConfig(
+    size,
+    label,
+    showPercentage
+  );
+  return /* @__PURE__ */ jsxs13("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+    displayConfig.showHeader && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-between w-full", children: [
+      label && /* @__PURE__ */ jsx18(
+        Text_default,
+        {
+          as: "div",
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          children: label
+        }
+      ),
+      showPercentage && /* @__PURE__ */ jsxs13(
+        Text_default,
+        {
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          children: [
+            Math.round(percentage),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx18(
+      ProgressBarBase,
+      {
+        clampedValue,
+        max,
+        percentage,
+        label,
+        variantClasses,
+        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
+        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+      }
+    ),
+    displayConfig.showPercentage && /* @__PURE__ */ jsxs13(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
+        children: [
+          Math.round(percentage),
+          "%"
+        ]
+      }
+    ),
+    displayConfig.showLabel && /* @__PURE__ */ jsx18(
+      Text_default,
+      {
+        as: "div",
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
+        children: label
+      }
+    )
+  ] });
+};
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "medium",
+  variant = "blue",
+  layout = "default",
+  label,
+  showPercentage = false,
+  showHitCount = false,
+  className = "",
+  labelClassName = "",
+  percentageClassName = "",
+  stackedWidth,
+  stackedHeight,
+  compactWidth,
+  compactHeight
+}) => {
+  const { clampedValue, percentage } = calculateProgressValues(value, max);
+  const sizeClasses = SIZE_CLASSES7[size];
+  const variantClasses = VARIANT_CLASSES2[variant];
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsx18(
+      StackedLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: stackedWidth ?? "w-[380px]",
+          height: stackedHeight ?? "h-[35px]"
+        }
+      }
+    );
+  }
+  if (layout === "compact") {
+    return /* @__PURE__ */ jsx18(
+      CompactLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: compactWidth ?? "w-[131px]",
+          height: compactHeight ?? "h-[24px]"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18(
+    DefaultLayout,
+    {
+      className,
+      size,
+      sizeClasses,
+      variantClasses,
+      label,
+      showPercentage,
+      labelClassName,
+      percentageClassName,
+      clampedValue,
+      max,
+      percentage
+    }
+  );
+};
 var ProgressBar_default = ProgressBar;
 
 // src/components/ProgressCircle/ProgressCircle.tsx
@@ -1742,19 +2041,516 @@ var ProgressCircle = ({
 };
 var ProgressCircle_default = ProgressCircle;
 
+// src/components/Calendar/Calendar.tsx
+import { useState as useState5, useMemo as useMemo2, useEffect, useRef } from "react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var WEEK_DAYS = ["SEG", "TER", "QUA", "QUI", "SEX", "S\xC1B", "DOM"];
+var WEEK_DAYS_SHORT = ["S", "T", "Q", "Q", "S", "S", "D"];
+var MONTH_NAMES = [
+  "Janeiro",
+  "Fevereiro",
+  "Mar\xE7o",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+var MonthYearPicker = ({
+  monthPickerRef,
+  availableYears,
+  currentDate,
+  onYearChange,
+  onMonthChange
+}) => /* @__PURE__ */ jsxs15(
+  "div",
+  {
+    ref: monthPickerRef,
+    className: "absolute top-full left-0 z-50 mt-1 bg-white rounded-lg shadow-lg border border-border-200 p-4 min-w-[280px]",
+    children: [
+      /* @__PURE__ */ jsxs15("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx20("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
+        /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-4 gap-1 max-h-32 overflow-y-auto", children: availableYears.map((year) => /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => onYearChange(year),
+            className: `
+              px-2 py-1 text-xs rounded text-center hover:bg-background-100 transition-colors
+              ${year === currentDate.getFullYear() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
+            `,
+            children: year
+          },
+          year
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx20("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar M\xEAs" }),
+        /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((month, index) => /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => onMonthChange(index, currentDate.getFullYear()),
+            className: `
+              px-2 py-2 text-xs rounded text-center hover:bg-background-100 transition-colors
+              ${index === currentDate.getMonth() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
+            `,
+            children: month.substring(0, 3)
+          },
+          month
+        )) })
+      ] })
+    ]
+  }
+);
+var getDayStyles = (day, variant, showActivities) => {
+  let dayStyle = "";
+  let textStyle = "";
+  if (variant === "selection" && day.isSelected) {
+    dayStyle = "bg-primary-800";
+    textStyle = "text-white";
+  } else if (day.isToday) {
+    textStyle = "text-[#1c61b2]";
+  } else if (variant === "navigation" && showActivities && day.activities?.length) {
+    const primaryActivity = day.activities[0];
+    if (primaryActivity.status === "near-deadline") {
+      dayStyle = "bg-warning-background border-2 border-warning-400";
+      textStyle = "text-text-950";
+    } else if (primaryActivity.status === "in-deadline") {
+      dayStyle = "bg-success-background border-2 border-success-300";
+      textStyle = "text-text-950";
+    } else if (primaryActivity.status === "overdue") {
+      dayStyle = "bg-error-background border-2 border-error-300";
+      textStyle = "text-text-950";
+    } else {
+      dayStyle = "border-2 border-blue-500";
+      textStyle = "text-blue-500";
+    }
+  } else {
+    textStyle = "text-text-950 hover:bg-background-100";
+  }
+  return { dayStyle, textStyle };
+};
+var Calendar = ({
+  variant = "selection",
+  selectedDate,
+  onDateSelect,
+  onMonthChange,
+  activities = {},
+  showActivities = true,
+  className = ""
+}) => {
+  const [currentDate, setCurrentDate] = useState5(selectedDate || /* @__PURE__ */ new Date());
+  const [isMonthPickerOpen, setIsMonthPickerOpen] = useState5(false);
+  const monthPickerRef = useRef(null);
+  const monthPickerContainerRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (monthPickerContainerRef.current && !monthPickerContainerRef.current.contains(event.target)) {
+        setIsMonthPickerOpen(false);
+      }
+    };
+    if (isMonthPickerOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isMonthPickerOpen]);
+  const today = /* @__PURE__ */ new Date();
+  const availableYears = useMemo2(() => {
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const years = [];
+    for (let year = currentYear - 10; year <= currentYear + 10; year++) {
+      years.push(year);
+    }
+    return years;
+  }, []);
+  const calendarData = useMemo2(() => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const startDate = new Date(firstDay);
+    const firstDayOfWeek = (firstDay.getDay() + 6) % 7;
+    startDate.setDate(startDate.getDate() - firstDayOfWeek);
+    const days = [];
+    const currentCalendarDate = new Date(startDate);
+    for (let i = 0; i < 42; i++) {
+      const dateKey = currentCalendarDate.toISOString().split("T")[0];
+      const dayActivities = activities[dateKey] || [];
+      days.push({
+        date: new Date(currentCalendarDate),
+        isCurrentMonth: currentCalendarDate.getMonth() === month,
+        isToday: currentCalendarDate.getFullYear() === today.getFullYear() && currentCalendarDate.getMonth() === today.getMonth() && currentCalendarDate.getDate() === today.getDate(),
+        isSelected: selectedDate ? currentCalendarDate.getFullYear() === selectedDate.getFullYear() && currentCalendarDate.getMonth() === selectedDate.getMonth() && currentCalendarDate.getDate() === selectedDate.getDate() : false,
+        activities: dayActivities
+      });
+      currentCalendarDate.setDate(currentCalendarDate.getDate() + 1);
+    }
+    return days;
+  }, [currentDate, selectedDate, activities]);
+  const goToPreviousMonth = () => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    setCurrentDate(newDate);
+    onMonthChange?.(newDate);
+  };
+  const goToNextMonth = () => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    setCurrentDate(newDate);
+    onMonthChange?.(newDate);
+  };
+  const goToMonth = (month, year) => {
+    const newDate = new Date(year, month, 1);
+    setCurrentDate(newDate);
+    setIsMonthPickerOpen(false);
+    onMonthChange?.(newDate);
+  };
+  const handleYearChange = (year) => {
+    const newDate = new Date(year, currentDate.getMonth(), 1);
+    setCurrentDate(newDate);
+  };
+  const toggleMonthPicker = (event) => {
+    event.stopPropagation();
+    setIsMonthPickerOpen(!isMonthPickerOpen);
+  };
+  const handleDateSelect = (day) => {
+    onDateSelect?.(day.date);
+  };
+  if (variant === "navigation") {
+    return /* @__PURE__ */ jsxs15("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between mb-4 px-6", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "relative", ref: monthPickerContainerRef, children: [
+          /* @__PURE__ */ jsxs15(
+            "button",
+            {
+              onClick: toggleMonthPicker,
+              className: "flex items-center gap-1 hover:bg-background-100 rounded px-2 py-1 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxs15("span", { className: "text-sm font-medium text-text-600", children: [
+                  MONTH_NAMES[currentDate.getMonth()],
+                  " ",
+                  currentDate.getFullYear()
+                ] }),
+                /* @__PURE__ */ jsx20(
+                  "svg",
+                  {
+                    className: `w-4 h-4 text-primary-950 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx20(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          isMonthPickerOpen && /* @__PURE__ */ jsx20(
+            MonthYearPicker,
+            {
+              monthPickerRef,
+              availableYears,
+              currentDate,
+              onYearChange: handleYearChange,
+              onMonthChange: goToMonth
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-10", children: [
+          /* @__PURE__ */ jsx20(
+            "button",
+            {
+              onClick: goToPreviousMonth,
+              className: "p-1 rounded hover:bg-background-100 transition-colors",
+              "aria-label": "M\xEAs anterior",
+              children: /* @__PURE__ */ jsx20(
+                "svg",
+                {
+                  className: "w-6 h-6 text-primary-950",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx20(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M15 19l-7-7 7-7"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            "button",
+            {
+              onClick: goToNextMonth,
+              className: "p-1 rounded hover:bg-background-100 transition-colors",
+              "aria-label": "Pr\xF3ximo m\xEAs",
+              children: /* @__PURE__ */ jsx20(
+                "svg",
+                {
+                  className: "w-6 h-6 text-primary-950",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx20(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M9 5l7 7-7 7"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
+          children: day
+        },
+        `${day}-${index}`
+      )) }),
+      /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+        if (!day.isCurrentMonth) {
+          return /* @__PURE__ */ jsx20(
+            "div",
+            {
+              className: "flex items-center justify-center",
+              children: /* @__PURE__ */ jsx20("div", { className: "w-9 h-9" })
+            },
+            day.date.getTime()
+          );
+        }
+        const { dayStyle, textStyle } = getDayStyles(
+          day,
+          variant,
+          showActivities
+        );
+        let spanClass = "";
+        if (day.isSelected && day.isToday) {
+          spanClass = "h-6 w-6 rounded-full bg-[#1c61b2] text-text";
+        } else if (day.isSelected) {
+          spanClass = "h-6 w-6 rounded-full bg-primary-950 text-text";
+        }
+        return /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            children: /* @__PURE__ */ jsx20(
+              "button",
+              {
+                className: `
+                    w-9 h-9 
+                    flex items-center justify-center 
+                    text-md font-normal 
+                    cursor-pointer 
+                    rounded-full
+                    ${dayStyle} 
+                    ${textStyle}
+                  `,
+                onClick: () => handleDateSelect(day),
+                "aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
+                "aria-current": day.isToday ? "date" : void 0,
+                tabIndex: 0,
+                children: /* @__PURE__ */ jsx20("span", { className: spanClass, children: day.date.getDate() })
+              }
+            )
+          },
+          day.date.getTime()
+        );
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs15("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between mb-3.5", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "relative", ref: monthPickerContainerRef, children: [
+        /* @__PURE__ */ jsxs15(
+          "button",
+          {
+            onClick: toggleMonthPicker,
+            className: "flex items-center gap-2 hover:bg-background-100 rounded px-2 py-1 transition-colors",
+            children: [
+              /* @__PURE__ */ jsxs15("h2", { className: "text-lg font-semibold text-text-950", children: [
+                MONTH_NAMES[currentDate.getMonth()],
+                " ",
+                currentDate.getFullYear()
+              ] }),
+              /* @__PURE__ */ jsx20(
+                "svg",
+                {
+                  className: `w-4 h-4 text-text-400 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx20(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isMonthPickerOpen && /* @__PURE__ */ jsx20(
+          MonthYearPicker,
+          {
+            monthPickerRef,
+            availableYears,
+            currentDate,
+            onYearChange: handleYearChange,
+            onMonthChange: goToMonth
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: goToPreviousMonth,
+            className: "p-1 rounded-md hover:bg-background-100 transition-colors",
+            "aria-label": "M\xEAs anterior",
+            children: /* @__PURE__ */ jsx20(
+              "svg",
+              {
+                className: "w-6 h-6 text-primary-950",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx20(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15 19l-7-7 7-7"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: goToNextMonth,
+            className: "p-1 rounded-md hover:bg-background-100 transition-colors",
+            "aria-label": "Pr\xF3ximo m\xEAs",
+            children: /* @__PURE__ */ jsx20(
+              "svg",
+              {
+                className: "w-6 h-6 text-primary-950",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx20(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: "h-4 flex items-center justify-center text-xs font-semibold text-text-500",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+      if (!day.isCurrentMonth) {
+        return /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            children: /* @__PURE__ */ jsx20("div", { className: "w-10 h-10" })
+          },
+          day.date.getTime()
+        );
+      }
+      const { dayStyle, textStyle } = getDayStyles(
+        day,
+        variant,
+        showActivities
+      );
+      return /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ jsx20(
+            "button",
+            {
+              className: `
+                  w-10 h-10 
+                  flex items-center justify-center 
+                  text-xl font-normal 
+                  cursor-pointer 
+                  rounded-full
+                  focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-1
+                  ${dayStyle} 
+                  ${textStyle}
+                `,
+              onClick: () => handleDateSelect(day),
+              "aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
+              "aria-current": day.isToday ? "date" : void 0,
+              tabIndex: 0,
+              children: day.date.getDate()
+            }
+          )
+        },
+        day.date.getTime()
+      );
+    }) })
+  ] });
+};
+var Calendar_default = Calendar;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { SignOut, User } from "phosphor-react";
 import {
   forwardRef as forwardRef9,
-  useEffect,
-  useRef,
+  useEffect as useEffect2,
+  useRef as useRef2,
   isValidElement,
   Children,
   cloneElement,
-  useState as useState5
+  useState as useState6
 } from "react";
 import { create as create2, useStore } from "zustand";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function createDropdownStore() {
   return create2((set) => ({
     open: false,
@@ -1785,7 +2581,7 @@ var injectStore = (children, store) => {
   });
 };
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const storeRef = useRef(null);
+  const storeRef = useRef2(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
   const isControlled = open !== void 0;
@@ -1795,7 +2591,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     onOpenChange?.(newOpen);
     if (!isControlled) store.setState({ open: newOpen });
   };
-  const menuRef = useRef(null);
+  const menuRef = useRef2(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -1829,7 +2625,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       setOpen(false);
     }
   };
-  useEffect(() => {
+  useEffect2(() => {
     onOpenChange?.(currentOpen);
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
@@ -1840,12 +2636,12 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isControlled) {
       store.setState({ open });
     }
   }, []);
-  return /* @__PURE__ */ jsx20("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  return /* @__PURE__ */ jsx21("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
 var DropdownMenuTrigger = ({
   className,
@@ -1857,7 +2653,7 @@ var DropdownMenuTrigger = ({
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Button_default,
     {
       variant: "outline",
@@ -1894,7 +2690,7 @@ var MENUCONTENT_VARIANT_CLASSES = {
   profile: "p-6"
 };
 var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ref,
@@ -1917,8 +2713,8 @@ var MenuContent = forwardRef9(
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = useStore(store, (s) => s.open);
-    const [isVisible, setIsVisible] = useState5(open);
-    useEffect(() => {
+    const [isVisible, setIsVisible] = useState6(open);
+    useEffect2(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -1933,7 +2729,7 @@ var MenuContent = forwardRef9(
       return `absolute ${vertical} ${horizontal}`;
     };
     const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         ref,
@@ -1992,7 +2788,7 @@ var DropdownMenuItem = forwardRef9(
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -2014,7 +2810,7 @@ var DropdownMenuItem = forwardRef9(
         ...props,
         children: [
           iconLeft,
-          /* @__PURE__ */ jsx20("span", { className: "w-full text-md", children }),
+          /* @__PURE__ */ jsx21("span", { className: "w-full text-md", children }),
           iconRight
         ]
       }
@@ -2022,7 +2818,7 @@ var DropdownMenuItem = forwardRef9(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DropdownMenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx21(
   "div",
   {
     ref,
@@ -2035,7 +2831,7 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       ref,
@@ -2047,13 +2843,13 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ jsx20("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx20(User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ jsx21("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx21(User, { className: "text-background-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
 var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref,
@@ -2064,10 +2860,10 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
         `,
       ...props,
       children: [
-        /* @__PURE__ */ jsx20("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx20(User, { size: 34, className: "text-background-950" }) }),
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ jsx20("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ jsx20("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ jsx21("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx21(User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ jsx21("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ jsx21("p", { className: "text-md text-text-600", children: email })
         ] })
       ]
     }
@@ -2075,7 +2871,7 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileMenuSection = forwardRef9(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ref,
@@ -2098,7 +2894,7 @@ var ProfileMenuFooter = ({
 }) => {
   const store = useDropdownStore(externalStore);
   const setOpen = useStore(store, (s) => s.setOpen);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     Button_default,
     {
       variant: "outline",
@@ -2110,8 +2906,8 @@ var ProfileMenuFooter = ({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx20("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx20(SignOut, {}) }),
-        /* @__PURE__ */ jsx20("span", { children: "Sair" })
+        /* @__PURE__ */ jsx21("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx21(SignOut, {}) }),
+        /* @__PURE__ */ jsx21("span", { children: "Sair" })
       ]
     }
   );
@@ -2122,15 +2918,15 @@ var DropdownMenu_default = DropdownMenu;
 // src/components/Select/Select.tsx
 import { create as create3, useStore as useStore2 } from "zustand";
 import {
-  useEffect as useEffect2,
-  useRef as useRef2,
+  useEffect as useEffect3,
+  useRef as useRef3,
   forwardRef as forwardRef10,
   isValidElement as isValidElement2,
   Children as Children2,
   cloneElement as cloneElement2
 } from "react";
 import { CaretDown, Check as Check3 } from "phosphor-react";
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var VARIANT_CLASSES4 = {
   outlined: "border-2 rounded-sm focus:border-primary-950",
   underlined: "border-b-2 focus:border-primary-950",
@@ -2176,7 +2972,7 @@ function getLabelAsNode(children) {
   }
   const flattened = Children2.toArray(children);
   if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ jsx21(Fragment2, { children: flattened });
+  return /* @__PURE__ */ jsx22(Fragment3, { children: flattened });
 }
 var injectStore2 = (children, store) => {
   return Children2.map(children, (child) => {
@@ -2200,10 +2996,10 @@ var Select = ({
   onValueChange,
   size = "small"
 }) => {
-  const storeRef = useRef2(null);
+  const storeRef = useRef3(null);
   storeRef.current ??= createSelectStore();
   const store = storeRef.current;
-  const selectRef = useRef2(null);
+  const selectRef = useRef3(null);
   const { open, setOpen, setValue, value, selectedLabel } = useStore2(
     store,
     (s) => s
@@ -2227,13 +3023,13 @@ var Select = ({
     search(children2);
     return found;
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (!selectedLabel && defaultValue) {
       const label = findLabelForValue(children, defaultValue);
       if (label) store.setState({ selectedLabel: label });
     }
   }, [children, defaultValue, selectedLabel]);
-  useEffect2(() => {
+  useEffect3(() => {
     setValue(currentValue);
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
@@ -2269,13 +3065,13 @@ var Select = ({
       document.removeEventListener("keydown", handleArrowKeys);
     };
   }, [open]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (onValueChange) {
       onValueChange(value);
     }
   }, [value]);
   const sizeClasses = SIZE_CLASSES9[size];
-  return /* @__PURE__ */ jsx21("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  return /* @__PURE__ */ jsx22("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
 };
 var SelectValue = ({
   placeholder,
@@ -2284,7 +3080,7 @@ var SelectValue = ({
   const store = useSelectStore(externalStore);
   const selectedLabel = useStore2(store, (s) => s.selectedLabel);
   const value = useStore2(store, (s) => s.value);
-  return /* @__PURE__ */ jsx21("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+  return /* @__PURE__ */ jsx22("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
 };
 var SelectTrigger = forwardRef10(
   ({
@@ -2299,7 +3095,7 @@ var SelectTrigger = forwardRef10(
     const open = useStore2(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
     const variantClasses = VARIANT_CLASSES4[variant];
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "button",
       {
         ref,
@@ -2318,7 +3114,7 @@ var SelectTrigger = forwardRef10(
         ...props,
         children: [
           props.children,
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             CaretDown,
             {
               className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
@@ -2343,7 +3139,7 @@ var SelectContent = forwardRef10(
     const open = useStore2(store, (s) => s.open);
     if (!open) return null;
     const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "div",
       {
         role: "menu",
@@ -2377,7 +3173,7 @@ var SelectItem = forwardRef10(
       }
       props.onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         role: "menuitem",
@@ -2397,7 +3193,7 @@ var SelectItem = forwardRef10(
         tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsx21("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx21(Check3, { className: "" }) }),
+          /* @__PURE__ */ jsx22("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx22(Check3, { className: "" }) }),
           children
         ]
       }
@@ -2410,16 +3206,16 @@ var Select_default = Select;
 // src/components/Menu/Menu.tsx
 import { create as create4, useStore as useStore3 } from "zustand";
 import {
-  useEffect as useEffect3,
-  useRef as useRef3,
+  useEffect as useEffect4,
+  useRef as useRef4,
   forwardRef as forwardRef11,
   isValidElement as isValidElement3,
   Children as Children3,
   cloneElement as cloneElement3,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { CaretLeft, CaretRight } from "phosphor-react";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var createMenuStore = () => create4((set) => ({
   value: "",
   setValue: (value) => set({ value })
@@ -2443,19 +3239,19 @@ var Menu = forwardRef11(
     onValueChange,
     ...props
   }, ref) => {
-    const storeRef = useRef3(null);
+    const storeRef = useRef4(null);
     storeRef.current ??= createMenuStore();
     const store = storeRef.current;
     const { setValue, value } = useStore3(store, (s) => s);
-    useEffect3(() => {
+    useEffect4(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
-    useEffect3(() => {
+    useEffect4(() => {
       onValueChange?.(value);
     }, [value, onValueChange]);
     const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
     const variantClasses = VARIANT_CLASSES5[variant];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "ul",
       {
         ref,
@@ -2500,7 +3296,7 @@ var MenuItem = forwardRef11(
       ...props
     };
     const variants = {
-      menu: /* @__PURE__ */ jsx22(
+      menu: /* @__PURE__ */ jsx23(
         "li",
         {
           "data-variant": "menu",
@@ -2515,7 +3311,7 @@ var MenuItem = forwardRef11(
           children
         }
       ),
-      menu2: /* @__PURE__ */ jsx22(
+      menu2: /* @__PURE__ */ jsx23(
         "li",
         {
           "data-variant": "menu2",
@@ -2527,7 +3323,7 @@ var MenuItem = forwardRef11(
           children
         }
       ),
-      breadcrumb: /* @__PURE__ */ jsx22(
+      breadcrumb: /* @__PURE__ */ jsx23(
         "li",
         {
           "data-variant": "breadcrumb",
@@ -2538,7 +3334,7 @@ var MenuItem = forwardRef11(
             ${className ?? ""}
           `,
           ...commonProps,
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             "span",
             {
               className: `
@@ -2556,14 +3352,14 @@ var MenuItem = forwardRef11(
 );
 MenuItem.displayName = "MenuItem";
 var MenuSeparator = forwardRef11(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx23(
     "li",
     {
       ref,
       "aria-hidden": "true",
       className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
       ...props,
-      children: children ?? /* @__PURE__ */ jsx22(CaretRight, {})
+      children: children ?? /* @__PURE__ */ jsx23(CaretRight, {})
     }
   )
 );
@@ -2582,6 +3378,7 @@ export {
   Alert_default as Alert,
   Badge_default as Badge,
   Button_default as Button,
+  Calendar_default as Calendar,
   CheckBox_default as CheckBox,
   Chips_default as Chips,
   Divider_default as Divider,