@mlw-packages/react-components 1.7.11 → 1.7.13

package/dist/index.mjs

@@ -889,7 +889,7 @@ var CommandItemBase = React5.forwardRef(({ className, testid: dataTestId = "comm
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
+      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50 aria-[selected=true]:bg-accent hover:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
       className
     ),
     "data-testid": dataTestId,
@@ -958,6 +958,7 @@ function ComboboxBase({
   keepOpen = false,
   closeAll,
   searchPlaceholder,
+  empty = "Nenhum dado encontrado",
   error,
   testIds = {}
 }) {
@@ -1023,7 +1024,7 @@ function ComboboxBase({
                       }
                     ),
                     /* @__PURE__ */ jsxs5(CommandListBase, { "data-testid": testIds.list ?? "combobox-list", children: [
-                      /* @__PURE__ */ jsx8(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: "Nenhum dado encontrado" }),
+                      /* @__PURE__ */ jsx8(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: empty }),
                       /* @__PURE__ */ jsx8(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
                         const isSelected = checkIsSelected(item.value);
                         return /* @__PURE__ */ jsxs5(
@@ -1088,6 +1089,7 @@ function Combobox({
   className,
   placeholder,
   searchPlaceholder,
+  empty,
   label,
   labelClassname,
   testIds,
@@ -1124,6 +1126,7 @@ function Combobox({
         handleSelection,
         checkIsSelected,
         searchPlaceholder,
+        empty,
         error,
         testIds
       }
@@ -1415,7 +1418,7 @@ var SelectItemBase = React8.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5  hover:bg-accent text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50",
+      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50",
       className
     ),
     ...props,
@@ -1796,7 +1799,7 @@ function Select({
   className
 }) {
   return /* @__PURE__ */ jsxs13("div", { "data-testid": testIds.root ?? "select-root", children: [
-    label ? /* @__PURE__ */ jsx18("label", { className: cn("block text-sm font-medium", labelClassname), children: label }) : null,
+    label && /* @__PURE__ */ jsx18(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsxs13(
       SelectBase,
       {
@@ -7265,44 +7268,50 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon as CheckIcon8, MinusIcon } from "@phosphor-icons/react";
 import { motion as motion11 } from "framer-motion";
 import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
-var CheckboxBase = React24.forwardRef(({ className, testid: dataTestId = "checkbox-base", ...props }, ref) => /* @__PURE__ */ jsx44(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-md border border-primary shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground transition-colors",
-      className
-    ),
-    "data-testid": dataTestId,
-    ...props,
-    children: /* @__PURE__ */ jsx44(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsxs33(
-      motion11.div,
-      {
-        initial: { scale: 0, opacity: 0, rotate: -90 },
-        animate: { scale: 1, opacity: 1, rotate: 0 },
-        exit: { scale: 0, opacity: 0, rotate: 90 },
-        transition: { type: "spring", stiffness: 500, damping: 30 },
-        className: "flex items-center justify-center text-current group",
-        children: [
-          /* @__PURE__ */ jsx44(
-            CheckIcon8,
-            {
-              className: "h-4 w-4 hidden group-data-[state=checked]:block",
-              weight: "bold"
-            }
-          ),
-          /* @__PURE__ */ jsx44(
-            MinusIcon,
-            {
-              className: "h-4 w-4 hidden group-data-[state=indeterminate]:block",
-              weight: "bold"
-            }
-          )
-        ]
-      }
-    ) })
-  }
-));
+var CheckboxBase = React24.forwardRef(({ className, testid: dataTestId = "checkbox-base", checked: checkedProp, defaultChecked, onCheckedChange, ...props }, ref) => {
+  const isControlled = checkedProp !== void 0;
+  const [checkedState, setCheckedState] = React24.useState(
+    isControlled ? checkedProp : defaultChecked ?? false
+  );
+  React24.useEffect(() => {
+    if (isControlled) setCheckedState(checkedProp);
+  }, [checkedProp, isControlled]);
+  const handleCheckedChange = (next) => {
+    if (!isControlled) setCheckedState(next);
+    onCheckedChange?.(next);
+  };
+  const stateClass = checkedState === true || checkedState === "indeterminate" ? "bg-primary text-primary-foreground" : "";
+  return /* @__PURE__ */ jsx44(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange: handleCheckedChange,
+      className: cn(
+        "group h-4 w-4 shrink-0 rounded-md border border-primary shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+        stateClass,
+        className
+      ),
+      "data-testid": dataTestId,
+      ...props,
+      children: /* @__PURE__ */ jsx44(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsxs33(
+        motion11.div,
+        {
+          initial: { scale: 0, opacity: 0, rotate: -90 },
+          animate: { scale: 1, opacity: 1, rotate: 0 },
+          exit: { scale: 0, opacity: 0, rotate: 90 },
+          transition: { type: "spring", stiffness: 500, damping: 30 },
+          className: "flex items-center justify-center text-current",
+          children: [
+            checkedState === true && /* @__PURE__ */ jsx44(CheckIcon8, { className: "h-4 w-4", weight: "bold" }),
+            checkedState === "indeterminate" && /* @__PURE__ */ jsx44(MinusIcon, { className: "h-4 w-4", weight: "bold" })
+          ]
+        }
+      ) })
+    }
+  );
+});
 CheckboxBase.displayName = CheckboxPrimitive.Root.displayName;
 
 // src/components/ui/form/CollapsibleBase.tsx
@@ -9917,7 +9926,7 @@ function DrawerDescriptionBase({
 }
 
 // src/hooks/use-universal-tooltip.tsx
-import { createContext as createContext4, useContext as useContext5, useState as useState16, useCallback as useCallback11, useEffect as useEffect14, useRef as useRef7 } from "react";
+import { createContext as createContext4, useContext as useContext5, useState as useState17, useCallback as useCallback11, useEffect as useEffect15, useRef as useRef7 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var UniversalTooltipContext = createContext4(null);
 var useUniversalTooltip = () => {
@@ -10217,7 +10226,7 @@ CalendarBase2.displayName = "CalendarBase";
 
 // src/components/picker/DateTimePicker.tsx
 import { ptBR } from "date-fns/locale";
-import { useEffect as useEffect15, useState as useState18 } from "react";
+import { useEffect as useEffect16, useState as useState19 } from "react";
 
 // src/components/picker/TimePicker.tsx
 import { motion as motion14, AnimatePresence as AnimatePresence10 } from "framer-motion";
@@ -10678,9 +10687,9 @@ function DateTimePicker({
   className,
   error
 }) {
-  const [internalDate, setInternalDate] = useState18(date);
-  const [open, setOpen] = useState18(false);
-  const [timePickerOpen, setTimePickerOpen] = useState18(false);
+  const [internalDate, setInternalDate] = useState19(date);
+  const [open, setOpen] = useState19(false);
+  const [timePickerOpen, setTimePickerOpen] = useState19(false);
   const handleSelect = (newDay) => {
     if (!newDay) return;
     if (!internalDate) {
@@ -10711,7 +10720,7 @@ function DateTimePicker({
     if (!timeFormat) return "dd MMMM yyyy";
     return `dd MMMM yyyy - ${timeFormat}`;
   };
-  useEffect15(() => {
+  useEffect16(() => {
     setInternalDate(date);
   }, [date, open]);
   return /* @__PURE__ */ jsxs49("div", { className: cn("w-full sm:w-auto", className), children: [
@@ -10728,7 +10737,7 @@ function DateTimePicker({
             {
               variant: "outline",
               className: cn(
-                "w-full justify-start text-left min-w-0 overflow-hidden no-active-animation",
+                "w-full justify-start text-left min-w-0 overflow-hidden",
                 !date && "text-muted-foreground"
               ),
               children: [
@@ -11665,7 +11674,7 @@ function StatusIndicator({
 }
 
 // src/components/ui/form/DebouncedInput.tsx
-import { useEffect as useEffect17, useState as useState20 } from "react";
+import { useEffect as useEffect18, useState as useState21 } from "react";
 import { CircleNotchIcon as CircleNotchIcon2 } from "@phosphor-icons/react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 function DebouncedInput({
@@ -11681,12 +11690,12 @@ function DebouncedInput({
   error,
   ...props
 }) {
-  const [value, setValue] = useState20(initialValue);
-  const [isDebouncing, setIsDebouncing] = useState20(false);
-  useEffect17(() => {
+  const [value, setValue] = useState21(initialValue);
+  const [isDebouncing, setIsDebouncing] = useState21(false);
+  useEffect18(() => {
     setValue(initialValue);
   }, [initialValue]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (value !== initialValue) {
       setIsDebouncing(true);
     }
@@ -11797,7 +11806,7 @@ import {
   useSensors
 } from "@dnd-kit/core";
 import { addMinutes, differenceInMinutes } from "date-fns";
-import { useId as useId2, useRef as useRef9, useState as useState21 } from "react";
+import { useId as useId2, useRef as useRef9, useState as useState22 } from "react";
 
 // src/components/event-calendar/hooks.ts
 import { createContext as createContext5, useContext as useContext6 } from "react";
@@ -11819,16 +11828,16 @@ function CalendarDndProvider({
   children,
   onEventUpdate
 }) {
-  const [activeEvent, setActiveEvent] = useState21(null);
-  const [activeId, setActiveId] = useState21(null);
-  const [activeView, setActiveView] = useState21(
+  const [activeEvent, setActiveEvent] = useState22(null);
+  const [activeId, setActiveId] = useState22(null);
+  const [activeView, setActiveView] = useState22(
     null
   );
-  const [currentTime, setCurrentTime] = useState21(null);
-  const [eventHeight, setEventHeight] = useState21(null);
-  const [isMultiDay, setIsMultiDay] = useState21(false);
-  const [multiDayWidth, setMultiDayWidth] = useState21(null);
-  const [dragHandlePosition, setDragHandlePosition] = useState21(null);
+  const [currentTime, setCurrentTime] = useState22(null);
+  const [eventHeight, setEventHeight] = useState22(null);
+  const [isMultiDay, setIsMultiDay] = useState22(false);
+  const [multiDayWidth, setMultiDayWidth] = useState22(null);
+  const [dragHandlePosition, setDragHandlePosition] = useState22(null);
   const eventDimensions = useRef9({ height: 0 });
   const sensors = useSensors(
     useSensor(MouseSensor, {
@@ -12268,7 +12277,7 @@ function DayView({
 import { useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { differenceInDays } from "date-fns";
-import { useRef as useRef10, useState as useState22 } from "react";
+import { useRef as useRef10, useState as useState23 } from "react";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function DraggableEvent({
   event,
@@ -12284,7 +12293,7 @@ function DraggableEvent({
 }) {
   const { activeId } = useCalendarDnd();
   const elementRef = useRef10(null);
-  const [dragHandlePosition, setDragHandlePosition] = useState22(null);
+  const [dragHandlePosition, setDragHandlePosition] = useState23(null);
   const eventStart = new Date(event.start);
   const eventEnd = new Date(event.end);
   const isMultiDayEvent2 = isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1;
@@ -12419,7 +12428,7 @@ import {
   subWeeks
 } from "date-fns";
 import { ptBR as ptBR4 } from "date-fns/locale";
-import { useEffect as useEffect18, useMemo as useMemo11, useState as useState23, useCallback as useCallback12 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo11, useState as useState24, useCallback as useCallback12 } from "react";
 import { toast as toast3 } from "sonner";
 import {
   ArrowDownIcon,
@@ -12437,9 +12446,9 @@ function EventCalendar({
   className,
   initialView = "month"
 }) {
-  const [currentDate, setCurrentDate] = useState23(/* @__PURE__ */ new Date());
-  const [view, setView] = useState23(initialView);
-  const [isFading, setIsFading] = useState23(false);
+  const [currentDate, setCurrentDate] = useState24(/* @__PURE__ */ new Date());
+  const [view, setView] = useState24(initialView);
+  const [isFading, setIsFading] = useState24(false);
   const FADE_DURATION = 220;
   const changeView = useCallback12(
     (next) => {
@@ -12452,8 +12461,8 @@ function EventCalendar({
     },
     [view]
   );
-  const [isPaging, setIsPaging] = useState23(false);
-  const [pageDirection, setPageDirection] = useState23(
+  const [isPaging, setIsPaging] = useState24(false);
+  const [pageDirection, setPageDirection] = useState24(
     null
   );
   const PAGE_DURATION = 200;
@@ -12471,11 +12480,11 @@ function EventCalendar({
     },
     []
   );
-  const [isEventDialogOpen, setIsEventDialogOpen] = useState23(false);
-  const [selectedEvent, setSelectedEvent] = useState23(
+  const [isEventDialogOpen, setIsEventDialogOpen] = useState24(false);
+  const [selectedEvent, setSelectedEvent] = useState24(
     null
   );
-  useEffect18(() => {
+  useEffect19(() => {
     const handleKeyDown = (e) => {
       if (isEventDialogOpen || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLElement && e.target.isContentEditable) {
         return;
@@ -12862,7 +12871,7 @@ function EventCalendar({
 
 // src/components/event-calendar/EventDialog.tsx
 import { format as format6, isBefore } from "date-fns";
-import { useCallback as useCallback13, useEffect as useEffect19, useMemo as useMemo12, useState as useState24 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect20, useMemo as useMemo12, useState as useState25 } from "react";
 import { RadioGroup as RadioGroup3, RadioGroupItem } from "@radix-ui/react-radio-group";
 import { motion as motion16 } from "framer-motion";
 import { ptBR as ptBR5 } from "date-fns/locale";
@@ -12875,19 +12884,19 @@ function EventDialog({
   onSave,
   onDelete
 }) {
-  const [title, setTitle] = useState24("");
-  const [description, setDescription] = useState24("");
-  const [startDate, setStartDate] = useState24(/* @__PURE__ */ new Date());
-  const [endDate, setEndDate] = useState24(/* @__PURE__ */ new Date());
-  const [startTime, setStartTime] = useState24(`${DefaultStartHour}:00`);
-  const [endTime, setEndTime] = useState24(`${DefaultEndHour}:00`);
-  const [allDay, setAllDay] = useState24(false);
-  const [location, setLocation] = useState24("");
-  const [color, setColor] = useState24("sky");
-  const [error, setError] = useState24(null);
-  const [startDateOpen, setStartDateOpen] = useState24(false);
-  const [endDateOpen, setEndDateOpen] = useState24(false);
-  useEffect19(() => {
+  const [title, setTitle] = useState25("");
+  const [description, setDescription] = useState25("");
+  const [startDate, setStartDate] = useState25(/* @__PURE__ */ new Date());
+  const [endDate, setEndDate] = useState25(/* @__PURE__ */ new Date());
+  const [startTime, setStartTime] = useState25(`${DefaultStartHour}:00`);
+  const [endTime, setEndTime] = useState25(`${DefaultEndHour}:00`);
+  const [allDay, setAllDay] = useState25(false);
+  const [location, setLocation] = useState25("");
+  const [color, setColor] = useState25("sky");
+  const [error, setError] = useState25(null);
+  const [startDateOpen, setStartDateOpen] = useState25(false);
+  const [endDateOpen, setEndDateOpen] = useState25(false);
+  useEffect20(() => {
   }, [event]);
   const resetForm = useCallback13(() => {
     setTitle("");
@@ -12906,7 +12915,7 @@ function EventDialog({
     const minutes = Math.floor(date.getMinutes() / 15) * 15;
     return `${hours}:${minutes.toString().padStart(2, "0")}`;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (event) {
       setTitle(event.title || "");
       setDescription(event.description || "");
@@ -13518,7 +13527,7 @@ function EventItem({
 // src/components/event-calendar/EventsPopUp.tsx
 import { format as format8, isSameDay as isSameDay2 } from "date-fns";
 import { ptBR as ptBR6 } from "date-fns/locale";
-import { useEffect as useEffect20, useMemo as useMemo14, useRef as useRef11 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo14, useRef as useRef11 } from "react";
 import { motion as motion17 } from "framer-motion";
 import { XIcon as XIcon11 } from "@phosphor-icons/react";
 import { jsx as jsx80, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -13530,7 +13539,7 @@ function EventsPopup({
   onEventSelect
 }) {
   const popupRef = useRef11(null);
-  useEffect20(() => {
+  useEffect21(() => {
     const handleClickOutside = (event) => {
       if (popupRef.current && !popupRef.current.contains(event.target)) {
         onClose();
@@ -13541,7 +13550,7 @@ function EventsPopup({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
-  useEffect20(() => {
+  useEffect21(() => {
     const handleEscKey = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -13635,11 +13644,11 @@ function EventsPopup({
 // src/components/event-calendar/hooks/use-current-time-indicator.ts
 import { endOfWeek as endOfWeek2, isSameDay as isSameDay3, isWithinInterval, startOfWeek as startOfWeek2 } from "date-fns";
 import { ptBR as ptBR7 } from "date-fns/locale";
-import { useEffect as useEffect21, useState as useState25 } from "react";
+import { useEffect as useEffect22, useState as useState26 } from "react";
 function useCurrentTimeIndicator(currentDate, view) {
-  const [currentTimePosition, setCurrentTimePosition] = useState25(0);
-  const [currentTimeVisible, setCurrentTimeVisible] = useState25(false);
-  useEffect21(() => {
+  const [currentTimePosition, setCurrentTimePosition] = useState26(0);
+  const [currentTimeVisible, setCurrentTimeVisible] = useState26(false);
+  useEffect22(() => {
     const calculateTimePosition = () => {
       const now = /* @__PURE__ */ new Date();
       const hours = now.getHours();
@@ -13670,14 +13679,14 @@ function useCurrentTimeIndicator(currentDate, view) {
 }
 
 // src/components/event-calendar/hooks/use-event-visibility.ts
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo15, useRef as useRef12, useState as useState26 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo15, useRef as useRef12, useState as useState27 } from "react";
 function useEventVisibility({
   eventHeight,
   eventGap
 }) {
   const contentRef = useRef12(null);
   const observerRef = useRef12(null);
-  const [contentHeight, setContentHeight] = useState26(null);
+  const [contentHeight, setContentHeight] = useState27(null);
   useLayoutEffect2(() => {
     if (!contentRef.current) return;
     const updateHeight = () => {
@@ -13729,7 +13738,7 @@ import {
   startOfWeek as startOfWeek3
 } from "date-fns";
 import { ptBR as ptBR8 } from "date-fns/locale";
-import { useEffect as useEffect22, useMemo as useMemo16, useState as useState27 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo16, useState as useState28 } from "react";
 import { jsx as jsx81, jsxs as jsxs61 } from "react/jsx-runtime";
 function MonthView({
   currentDate,
@@ -13767,12 +13776,12 @@ function MonthView({
     e.stopPropagation();
     onEventSelect(event);
   };
-  const [isMounted, setIsMounted] = useState27(false);
+  const [isMounted, setIsMounted] = useState28(false);
   const { contentRef, getVisibleEventCount } = useEventVisibility({
     eventGap: EventGap,
     eventHeight: EventHeight
   });
-  useEffect22(() => {
+  useEffect23(() => {
     setIsMounted(true);
   }, []);
   return /* @__PURE__ */ jsxs61("div", { className: "contents", "data-slot": "month-view", children: [
@@ -14324,14 +14333,164 @@ function WeekView({
   ] });
 }
 
+// src/components/ui/form/CheckBoxThree.tsx
+import { useCallback as useCallback14, useMemo as useMemo18, useState as useState29, useEffect as useEffect24, useRef as useRef13 } from "react";
+import { motion as motion18, AnimatePresence as AnimatePresence12 } from "framer-motion";
+import { jsx as jsx83, jsxs as jsxs63 } from "react/jsx-runtime";
+function useCheckboxTree(initialTree) {
+  const initialCheckedNodes = useMemo18(() => {
+    const checkedSet = /* @__PURE__ */ new Set();
+    const initializeCheckedNodes = (node) => {
+      if (node.defaultChecked) {
+        checkedSet.add(node.id);
+      }
+      node.children?.forEach(initializeCheckedNodes);
+    };
+    initializeCheckedNodes(initialTree);
+    return checkedSet;
+  }, [initialTree]);
+  const [checkedNodes, setCheckedNodes] = useState29(initialCheckedNodes);
+  const isChecked = useCallback14(
+    (node) => {
+      if (!node.children) {
+        return checkedNodes.has(node.id);
+      }
+      const childrenChecked = node.children.map((child) => isChecked(child));
+      if (childrenChecked.every((status) => status === true)) {
+        return true;
+      }
+      if (childrenChecked.some(
+        (status) => status === true || status === "indeterminate"
+      )) {
+        return "indeterminate";
+      }
+      return false;
+    },
+    [checkedNodes]
+  );
+  const handleCheck = useCallback14(
+    (node) => {
+      const newCheckedNodes = new Set(checkedNodes);
+      const toggleNode = (n, check) => {
+        if (check) {
+          newCheckedNodes.add(n.id);
+        } else {
+          newCheckedNodes.delete(n.id);
+        }
+        for (const child of n.children ?? []) {
+          toggleNode(child, check);
+        }
+      };
+      const currentStatus = isChecked(node);
+      const newCheck = currentStatus !== true;
+      toggleNode(node, newCheck);
+      setCheckedNodes(newCheckedNodes);
+    },
+    [checkedNodes, isChecked]
+  );
+  return { handleCheck, isChecked };
+}
+function CheckboxTree({ tree, renderNode }) {
+  const { isChecked, handleCheck } = useCheckboxTree(tree);
+  const DefaultNode = ({
+    node,
+    isChecked: status,
+    onCheckedChange,
+    children
+  }) => {
+    const [open, setOpen] = useState29(() => !!node.children && status !== false);
+    const checkboxRef = useRef13(null);
+    useEffect24(() => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = status === "indeterminate";
+      }
+      if (node.children) {
+        setOpen(status !== false);
+      }
+    }, [status, node.children]);
+    return /* @__PURE__ */ jsxs63("div", { className: "pl-1", children: [
+      /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-2", children: [
+        node.children ? /* @__PURE__ */ jsx83(
+          "button",
+          {
+            "aria-label": open ? "Fechar" : "Abrir",
+            onClick: () => setOpen((v) => !v),
+            className: "w-6 h-6 flex items-center justify-center rounded hover:bg-slate-100 dark:hover:bg-slate-800",
+            children: /* @__PURE__ */ jsx83(
+              motion18.span,
+              {
+                animate: { rotate: open ? 90 : 0 },
+                transition: { duration: 0.18 },
+                className: "inline-block text-slate-500",
+                children: "\u25B6"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx83("div", { className: "w-6 h-6" }),
+        /* @__PURE__ */ jsxs63("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ jsxs63("span", { className: "relative", children: [
+            /* @__PURE__ */ jsx83(
+              "input",
+              {
+                ref: checkboxRef,
+                type: "checkbox",
+                checked: status === true,
+                onChange: onCheckedChange,
+                className: "appearance-none w-5 h-5 rounded border border-slate-300 dark:border-slate-700 flex items-center justify-center bg-white dark:bg-slate-900 checked:bg-blue-600 checked:border-blue-600 focus:outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx83(
+              motion18.span,
+              {
+                initial: false,
+                animate: { scale: status === true ? 1 : 0.8, opacity: status === true ? 1 : 0 },
+                transition: { duration: 0.14 },
+                className: "pointer-events-none absolute left-0 top-0 w-5 h-5 flex items-center justify-center text-white",
+                children: status === true ? /* @__PURE__ */ jsx83("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx83("path", { d: "M1 5L4 8L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx83("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: node.label })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx83(AnimatePresence12, { initial: false, children: open && node.children && /* @__PURE__ */ jsx83(
+        motion18.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.18 },
+          className: "ml-6 mt-2 overflow-hidden",
+          children: /* @__PURE__ */ jsx83("div", { className: "flex flex-col gap-1", children })
+        },
+        "children"
+      ) })
+    ] });
+  };
+  const renderTreeNode = (node) => {
+    const children = node.children?.map(renderTreeNode);
+    const nodePayload = {
+      children,
+      isChecked: isChecked(node),
+      node,
+      onCheckedChange: () => handleCheck(node)
+    };
+    if (renderNode) {
+      return renderNode(nodePayload);
+    }
+    return /* @__PURE__ */ jsx83(DefaultNode, { ...nodePayload });
+  };
+  return renderTreeNode(tree);
+}
+
 // src/hooks/use-drag.tsx
-import { useState as useState28, useCallback as useCallback14, useRef as useRef13, useEffect as useEffect23 } from "react";
+import { useState as useState30, useCallback as useCallback15, useRef as useRef14, useEffect as useEffect25 } from "react";
 var useDrag = (options = {}) => {
-  const [isDragging, setIsDragging] = useState28(null);
-  const [positions, setPositions] = useState28({});
-  const dragStartPos = useRef13(null);
-  const dragId = useRef13(null);
-  const handleMouseDown = useCallback14((id, e) => {
+  const [isDragging, setIsDragging] = useState30(null);
+  const [positions, setPositions] = useState30({});
+  const dragStartPos = useRef14(null);
+  const dragId = useRef14(null);
+  const handleMouseDown = useCallback15((id, e) => {
     e.preventDefault();
     const currentPosition = positions[id] || { top: 0, left: 0 };
     dragStartPos.current = {
@@ -14344,7 +14503,7 @@ var useDrag = (options = {}) => {
     setIsDragging(id);
     options.onDragStart?.(id);
   }, [positions, options]);
-  const handleMouseMove = useCallback14((e) => {
+  const handleMouseMove = useCallback15((e) => {
     if (!isDragging || !dragStartPos.current || !dragId.current) return;
     const deltaX = e.clientX - dragStartPos.current.x;
     const deltaY = e.clientY - dragStartPos.current.y;
@@ -14360,7 +14519,7 @@ var useDrag = (options = {}) => {
     }));
     options.onDrag?.(dragId.current, newPosition);
   }, [isDragging, options]);
-  const handleMouseUp = useCallback14(() => {
+  const handleMouseUp = useCallback15(() => {
     if (dragId.current) {
       options.onDragEnd?.(dragId.current);
     }
@@ -14368,7 +14527,7 @@ var useDrag = (options = {}) => {
     dragStartPos.current = null;
     dragId.current = null;
   }, [options]);
-  useEffect23(() => {
+  useEffect25(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -14380,16 +14539,16 @@ var useDrag = (options = {}) => {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const setPosition = useCallback14((id, position) => {
+  const setPosition = useCallback15((id, position) => {
     setPositions((prev) => ({
       ...prev,
       [id]: position
     }));
   }, []);
-  const getPosition = useCallback14((id) => {
+  const getPosition = useCallback15((id) => {
     return positions[id] || { top: 0, left: 0 };
   }, [positions]);
-  const isElementDragging = useCallback14((id) => {
+  const isElementDragging = useCallback15((id) => {
     return isDragging === id;
   }, [isDragging]);
   return {
@@ -14448,6 +14607,7 @@ export {
   Chart_default as Chart,
   CheckButton,
   CheckboxBase,
+  CheckboxTree,
   CloseAllButton_default as CloseAllButton,
   CloseButton,
   CodeBlock,