@geomak/ui 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,6 +1,9 @@
+import { colors_default } from './chunk-DNQSZOYD.js';
+export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-DNQSZOYD.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React9, { createContext, useMemo, useState, useEffect, useContext, useRef, useCallback, useId } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
@@ -10,43 +13,6 @@ import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 
-// src/utils/colors.ts
-var PALETTE = {
-  "true-blue": "#0466C8",
-  "usafa-blue": "#0353A4",
-  "dark-cornflower-blue": "#023E7D",
-  "oxford-blue-700": "#002855",
-  "oxford-blue-800": "#001845",
-  "oxford-blue-900": "#001233",
-  independence: "#33415C",
-  "black-coral": "#5C677D",
-  "roman-silver": "#7D8597",
-  manatee: "#979DAC",
-  white: "#fff",
-  ice: "#DBF1FD",
-  "ice-dark": "#d0e3ed",
-  "midnight-green-eagle-900": "#013E53",
-  "midnight-green-eagle-700": "#125F6C",
-  "midnight-green-eagle-500": "#125F6C",
-  "rich-black-fogra": "#000202",
-  "rich-black-fogra-opaque": "#0000005b",
-  "prussian-blue": "#00273A",
-  "indigo-dye": "#013C54",
-  ming: "#0F6372",
-  skobeloff: "#217479",
-  "dark-cyan": "#2A8784",
-  "celadon-green": "#297E74",
-  turquise: "#2EB8B0",
-  "oxford-blue-700-opaque": "rgba(0, 40, 85, .3)",
-  disabled: "#dee2e6",
-  error: "tomato",
-  warning: "orange",
-  success: "lightgreen",
-  info: "lightblue",
-  transparent: "rgba(255, 255, 255, .0)"
-};
-var COLORS = { PALETTE };
-var colors_default = COLORS;
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
 var CheckCircle = ({ color = "#fff", size = 28 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 0.25C6.40625 0.25 0.25 6.40625 0.25 14C0.25 21.5937 6.40625 27.75 14 27.75C21.5937 27.75 27.75 21.5937 27.75 14C27.75 6.40625 21.5937 0.25 14 0.25ZM19.96 11.675C20.0697 11.5496 20.1533 11.4034 20.2057 11.2452C20.2582 11.087 20.2784 10.9199 20.2653 10.7537C20.2522 10.5876 20.206 10.4257 20.1295 10.2777C20.0529 10.1296 19.9475 9.99838 19.8194 9.89168C19.6914 9.78497 19.5433 9.70495 19.3839 9.65633C19.2244 9.6077 19.0569 9.59145 18.8911 9.60853C18.7253 9.62562 18.5646 9.67568 18.4184 9.75579C18.2723 9.8359 18.1436 9.94443 18.04 10.075L12.665 16.5237L9.88375 13.7412C9.648 13.5136 9.33224 13.3876 9.0045 13.3904C8.67675 13.3933 8.36324 13.5247 8.13148 13.7565C7.89972 13.9882 7.76825 14.3018 7.76541 14.6295C7.76256 14.9572 7.88855 15.273 8.11625 15.5087L11.8662 19.2587C11.9891 19.3815 12.1361 19.4773 12.298 19.5401C12.4599 19.6028 12.6331 19.6312 12.8066 19.6233C12.98 19.6154 13.15 19.5715 13.3055 19.4943C13.4611 19.4171 13.5988 19.3084 13.71 19.175L19.96 11.675Z", fill: color }) });
@@ -288,33 +254,57 @@ function Modal({
   title,
   children
 }) {
+  const reduced = useReducedMotion();
   return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
-  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 bg-oxford-blue-700-opaque z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 transition-all duration-300" }),
-    /* @__PURE__ */ jsxs(
-      Dialog.Content,
+  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "fixed inset-0 bg-oxford-blue-700-opaque z-50",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
+      motion.div,
       {
-        style: { width: size[0], height: size[1] },
-        className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 shadow-md rounded-lg bg-white dark:bg-prussian-blue p-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-300 focus:outline-none",
+        className: "fixed left-1/2 top-1/2 z-50 flex flex-col bg-white dark:bg-prussian-blue rounded-2xl shadow-2xl shadow-black/20 overflow-hidden focus:outline-none",
+        style: {
+          width: size[0],
+          height: size[1],
+          x: "-50%",
+          y: "-50%"
+        },
+        initial: { opacity: 0, scale: reduced ? 1 : 0.96 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: reduced ? 1 : 0.96 },
+        transition: reduced ? { duration: 0 } : {
+          type: "spring",
+          damping: 28,
+          stiffness: 380,
+          duration: 0.25
+        },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "h-[12%] flex items-center justify-between border-b border-ice dark:border-independence p-2", children: [
-            /* @__PURE__ */ jsx(Dialog.Title, { className: "text-prussian-blue dark:text-white font-bold text-lg", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-14 flex-shrink-0 items-center justify-between border-b border-ice dark:border-independence px-5", children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "text-base font-semibold text-prussian-blue dark:text-white tracking-tight", children: title }),
             /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
               "button",
               {
                 "aria-label": "Close",
-                className: "cursor-pointer rounded p-1 hover:bg-ice dark:hover:bg-independence transition-colors",
-                children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "dark:stroke-white" }) })
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-black-coral dark:text-manatee hover:bg-ice hover:text-prussian-blue dark:hover:bg-oxford-blue-700 dark:hover:text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-true-blue",
+                children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: `${hasFooter ? "max-h-[77%]" : "max-h-[90%]"} p-2 overflow-y-auto`, children: isOpen && children }),
-          hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-5 border-t border-ice dark:border-independence h-max p-2", children: [
+          /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: isOpen && children }),
+          hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-ice dark:border-independence px-5 py-3", children: [
             /* @__PURE__ */ jsx(
               Button,
               {
-                style: { width: 100, margin: "0" },
+                style: { width: 90 },
                 content: cancelText,
                 onClick: onCancel
               }
@@ -322,7 +312,7 @@ function Modal({
             /* @__PURE__ */ jsx(
               Button,
               {
-                style: { width: 100, margin: "0" },
+                style: { width: 90 },
                 content: okText,
                 onClick: onOk
               }
@@ -330,7 +320,7 @@ function Modal({
           ] })
         ]
       }
-    )
+    ) }) })
   ] }) });
 }
 function Drawer({
@@ -346,48 +336,59 @@ function Drawer({
   title,
   children
 }) {
+  const reduced = useReducedMotion();
   const isRight = placement === "right";
+  const hiddenX = isRight ? "100%" : "-100%";
   return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
-  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 bg-oxford-blue-700-opaque z-[5000] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-300" }),
-    /* @__PURE__ */ jsxs(
-      Dialog.Content,
+  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(
+      motion.div,
       {
+        className: "fixed inset-0 bg-oxford-blue-700-opaque z-[5000]",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: reduced ? 0 : 0.2, ease: "easeOut" }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-[5000] flex flex-col bg-white dark:bg-prussian-blue shadow-2xl shadow-black/25 focus:outline-none`,
         style: { width },
-        className: `fixed top-0 bottom-0 ${isRight ? "right-0 data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right" : "left-0 data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"} z-[5000] h-full shadow-md bg-white dark:bg-prussian-blue p-1 data-[state=open]:animate-in data-[state=closed]:animate-out duration-300 focus:outline-none`,
+        initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
+        animate: { x: 0, opacity: 1 },
+        exit: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
+        transition: reduced ? { duration: 0 } : {
+          x: {
+            type: "tween",
+            duration: 0.26,
+            ease: [0.16, 1, 0.3, 1]
+            // ease-out-expo
+          },
+          opacity: { duration: 0 }
+        },
         children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `h-[5%] border-b border-ice dark:border-independence p-2 flex items-center justify-between ${isRight && "flex-row-reverse"}`,
-              children: [
-                /* @__PURE__ */ jsx(Dialog.Title, { className: "text-prussian-blue dark:text-white font-bold text-lg", children: title }),
-                /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": "Close drawer",
-                    className: "cursor-pointer rounded p-1 hover:bg-ice dark:hover:bg-independence transition-colors",
-                    children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "dark:stroke-white" }) })
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: `${hasFooter ? "h-[88%]" : "h-[95%]"} overflow-y-auto`, children: isOpen && children }),
-          hasFooter && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `gap-5 h-[7%] pr-2 pl-2 border-t border-ice dark:border-independence flex items-center ${isRight ? "justify-start" : "justify-end"}`,
-              children: [
-                /* @__PURE__ */ jsx(Button, { style: { width: 100 }, content: cancelText, onClick: onCancel }),
-                /* @__PURE__ */ jsx(Button, { style: { width: 100 }, content: okText, onClick: onOk })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: `flex h-14 flex-shrink-0 items-center justify-between border-b border-ice dark:border-independence px-5 ${isRight ? "flex-row-reverse" : ""}`, children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "text-base font-semibold text-prussian-blue dark:text-white tracking-tight", children: title }),
+            /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": "Close drawer",
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-black-coral dark:text-manatee hover:bg-ice hover:text-prussian-blue dark:hover:bg-oxford-blue-700 dark:hover:text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-true-blue",
+                children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5", children: isOpen && children }),
+          hasFooter && /* @__PURE__ */ jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-ice dark:border-independence px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
+            /* @__PURE__ */ jsx(Button, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
+            /* @__PURE__ */ jsx(Button, { style: { width: 90 }, content: okText, onClick: onOk })
+          ] })
         ]
       }
-    )
+    ) }) })
   ] }) });
 }
 function Tooltip({
@@ -524,27 +525,28 @@ function Tabs({
 var isParent = (item) => Boolean(item.children && item.children.length > 0);
 function TreeNodeItem({
   item,
-  onItemClick,
+  onNodeClick,
   defaultExpandAll,
   defaultExpandedKeys,
   depth = 0
 }) {
   if (!isParent(item)) {
     return /* @__PURE__ */ jsxs(
-      "div",
+      "button",
       {
-        style: { marginLeft: depth * 10 + 16 },
-        className: "flex items-center gap-2 cursor-pointer py-0.5",
-        onClick: () => onItemClick({
+        type: "button",
+        className: "flex w-full items-center gap-2.5 cursor-pointer select-none group text-left rounded-md px-2 py-1.5 hover:bg-ice dark:hover:bg-oxford-blue-700 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-true-blue",
+        style: { paddingLeft: depth * 12 + 8 },
+        onClick: () => onNodeClick({
           isParent: false,
           key: item.key,
-          label: item.value,
+          label: item.label,
           data: item.nodeData,
           parentLabel: item.parentLabel
         }),
         children: [
-          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4 flex-shrink-0 dark:stroke-white", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-prussian-blue dark:text-white select-none transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rounded-lg p-1", children: item.value })
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0 bg-roman-silver dark:bg-manatee group-hover:bg-true-blue dark:group-hover:bg-true-blue transition-colors duration-150" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-independence dark:text-manatee group-hover:text-prussian-blue dark:group-hover:text-white transition-colors duration-150", children: item.label })
         ]
       }
     );
@@ -555,47 +557,47 @@ function TreeNodeItem({
     {
       type: "multiple",
       defaultValue: initialOpen,
-      style: { marginLeft: depth * 10 },
+      style: { paddingLeft: depth * 12 },
       children: /* @__PURE__ */ jsxs(Accordion.Item, { value: item.key, className: "border-none", children: [
-        /* @__PURE__ */ jsxs(
-          Accordion.Trigger,
-          {
-            className: "flex items-center gap-2 cursor-pointer py-0.5 group focus:outline-none w-full text-left",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: colors_default.PALETTE["prussian-blue"],
-                  strokeWidth: 2,
-                  className: "h-4 w-4 flex-shrink-0 transition-transform duration-300 group-data-[state=closed]:-rotate-90 dark:stroke-white",
-                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
+        /* @__PURE__ */ jsxs(Accordion.Trigger, { className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-true-blue w-full text-left rounded-md hover:bg-ice dark:hover:bg-oxford-blue-700 transition-colors duration-150", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2.5,
+              className: "h-3.5 w-3.5 flex-shrink-0 text-black-coral dark:text-manatee transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
+              children: /* @__PURE__ */ jsx(
+                "path",
                 {
-                  className: "text-sm font-bold text-prussian-blue dark:text-white select-none transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rounded-lg p-1",
-                  onClick: () => onItemClick({
-                    isParent: true,
-                    key: item.key,
-                    label: item.value,
-                    data: item.nodeData,
-                    parentLabel: item.parentLabel
-                  }),
-                  children: item.value
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M19 9l-7 7-7-7"
                 }
               )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Accordion.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsx("div", { className: "ml-[7px] border-l border-prussian-blue dark:border-ice-dark", children: item.children.map((child) => /* @__PURE__ */ jsx(
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm font-semibold text-prussian-blue dark:text-white select-none",
+              onClick: () => onNodeClick({
+                isParent: true,
+                key: item.key,
+                label: item.label,
+                data: item.nodeData,
+                parentLabel: item.parentLabel
+              }),
+              children: item.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Accordion.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsx("div", { className: "ml-3.5 border-l border-ice-dark dark:border-independence py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsx(
           TreeNodeItem,
           {
             item: child,
-            onItemClick,
+            onNodeClick,
             defaultExpandAll,
             defaultExpandedKeys,
             depth: depth + 1
@@ -607,16 +609,16 @@ function TreeNodeItem({
   );
 }
 function Tree({
-  structure,
-  onItemClick,
+  nodes,
+  onNodeClick,
   defaultExpandAll = false,
   defaultExpandedKeys = []
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "p-2", children: structure.map((item) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "p-1 w-full", children: nodes.map((item) => /* @__PURE__ */ jsx(
     TreeNodeItem,
     {
       item,
-      onItemClick,
+      onNodeClick,
       defaultExpandAll,
       defaultExpandedKeys
     },
@@ -2597,6 +2599,6 @@ Temporal.DatePicker = DatePickerBase;
 Temporal.TemporalPicker = TemporalPickerBase;
 var DatePicker_default = Temporal;
 
-export { AutoComplete, Button, colors_default as COLORS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Switch2 as Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, Switch as ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, Tree, TreeSelect, Wizard, useNotification };
+export { AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Switch2 as Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, Switch as ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map