@geomak/ui 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -322,14 +322,15 @@ interface ModalProps {
     children?: React$1.ReactNode;
 }
 /**
- * Centred modal dialog powered by Radix Dialog.
+ * Centred modal dialog powered by Radix Dialog + Framer Motion.
  *
- * The Radix primitive handles focus-trap, escape-to-close, and ARIA roles.
- * The VesOPS visual style (scale-in animation, prussian-blue header) is preserved.
+ * Radix handles focus-trap, escape-to-close, and ARIA roles.
+ * Framer Motion drives the scale + fade enter/exit animation.
+ * prefers-reduced-motion is respected via useReducedMotion().
  *
  * @example
  * <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm" onOk={handleOk}>
- *   Are you sure?
+ *   Are you sure you want to delete this item?
  * </Modal>
  */
 declare function Modal({ size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
@@ -338,7 +339,7 @@ interface DrawerProps {
     isOpen?: boolean;
     onClose?: () => void;
     hasFooter?: boolean;
-    /** 'left' | 'right' */
+    /** 'left' | 'right' — which edge the panel slides from */
     placement?: 'left' | 'right';
     width?: number;
     okText?: string;
@@ -349,10 +350,11 @@ interface DrawerProps {
     children?: React$1.ReactNode;
 }
 /**
- * Side-sliding drawer panel powered by Radix Dialog.
+ * Side-sliding drawer panel powered by Radix Dialog + Framer Motion.
  *
  * Radix handles focus-trap, escape-to-close, and ARIA roles.
- * The drawer slides in from the left or right depending on `placement`.
+ * Framer Motion drives the slide enter/exit animation.
+ * prefers-reduced-motion is respected via useReducedMotion().
  *
  * @example
  * <Drawer isOpen={open} placement="right" onClose={() => setOpen(false)} title="Filters">
@@ -421,7 +423,7 @@ declare function Tabs({ tabs, onTabChange, onTabClose, isLazy, tabsClosable, def
 
 interface TreeNode {
     key: string;
-    value: string;
+    label: string;
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
@@ -434,26 +436,27 @@ interface TreeItemClickPayload {
     parentLabel?: string;
 }
 interface TreeProps {
-    structure: TreeNode[];
-    onItemClick: (payload: TreeItemClickPayload) => void;
+    nodes: TreeNode[];
+    onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
 }
 /** ─────────────────── public component ─────────────────── */
 /**
- * Hierarchical tree view powered by Radix Accordion (nested).
+ * Hierarchical tree view powered by Radix Accordion.
  *
- * Each parent node is an independent Accordion.Root with `type="multiple"` so
- * sibling branches are independent. Leaf nodes are plain clickable rows.
+ * Each parent node is an independent Accordion.Root with type="multiple" so
+ * sibling branches expand independently. Leaf nodes are plain buttons.
+ * Expand/collapse is animated via CSS keyframes.
  *
  * @example
  * <Tree
- *   structure={fleetTree}
- *   onItemClick={({ key, isParent }) => selectNode(key)}
+ *   nodes={fleetTree}
+ *   onNodeClick={({ key, isParent }) => selectNode(key)}
  *   defaultExpandAll
  * />
  */
-declare function Tree({ structure, onItemClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleItem {
     key: string;

package/dist/index.d.ts

@@ -322,14 +322,15 @@ interface ModalProps {
     children?: React$1.ReactNode;
 }
 /**
- * Centred modal dialog powered by Radix Dialog.
+ * Centred modal dialog powered by Radix Dialog + Framer Motion.
  *
- * The Radix primitive handles focus-trap, escape-to-close, and ARIA roles.
- * The VesOPS visual style (scale-in animation, prussian-blue header) is preserved.
+ * Radix handles focus-trap, escape-to-close, and ARIA roles.
+ * Framer Motion drives the scale + fade enter/exit animation.
+ * prefers-reduced-motion is respected via useReducedMotion().
  *
  * @example
  * <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm" onOk={handleOk}>
- *   Are you sure?
+ *   Are you sure you want to delete this item?
  * </Modal>
  */
 declare function Modal({ size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
@@ -338,7 +339,7 @@ interface DrawerProps {
     isOpen?: boolean;
     onClose?: () => void;
     hasFooter?: boolean;
-    /** 'left' | 'right' */
+    /** 'left' | 'right' — which edge the panel slides from */
     placement?: 'left' | 'right';
     width?: number;
     okText?: string;
@@ -349,10 +350,11 @@ interface DrawerProps {
     children?: React$1.ReactNode;
 }
 /**
- * Side-sliding drawer panel powered by Radix Dialog.
+ * Side-sliding drawer panel powered by Radix Dialog + Framer Motion.
  *
  * Radix handles focus-trap, escape-to-close, and ARIA roles.
- * The drawer slides in from the left or right depending on `placement`.
+ * Framer Motion drives the slide enter/exit animation.
+ * prefers-reduced-motion is respected via useReducedMotion().
  *
  * @example
  * <Drawer isOpen={open} placement="right" onClose={() => setOpen(false)} title="Filters">
@@ -421,7 +423,7 @@ declare function Tabs({ tabs, onTabChange, onTabClose, isLazy, tabsClosable, def
 
 interface TreeNode {
     key: string;
-    value: string;
+    label: string;
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
@@ -434,26 +436,27 @@ interface TreeItemClickPayload {
     parentLabel?: string;
 }
 interface TreeProps {
-    structure: TreeNode[];
-    onItemClick: (payload: TreeItemClickPayload) => void;
+    nodes: TreeNode[];
+    onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
 }
 /** ─────────────────── public component ─────────────────── */
 /**
- * Hierarchical tree view powered by Radix Accordion (nested).
+ * Hierarchical tree view powered by Radix Accordion.
  *
- * Each parent node is an independent Accordion.Root with `type="multiple"` so
- * sibling branches are independent. Leaf nodes are plain clickable rows.
+ * Each parent node is an independent Accordion.Root with type="multiple" so
+ * sibling branches expand independently. Leaf nodes are plain buttons.
+ * Expand/collapse is animated via CSS keyframes.
  *
  * @example
  * <Tree
- *   structure={fleetTree}
- *   onItemClick={({ key, isParent }) => selectNode(key)}
+ *   nodes={fleetTree}
+ *   onNodeClick={({ key, isParent }) => selectNode(key)}
  *   defaultExpandAll
  * />
  */
-declare function Tree({ structure, onItemClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleItem {
     key: string;

package/dist/index.js

@@ -1,6 +1,7 @@
 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';
@@ -288,33 +289,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 +347,7 @@ function Modal({
             /* @__PURE__ */ jsx(
               Button,
               {
-                style: { width: 100, margin: "0" },
+                style: { width: 90 },
                 content: okText,
                 onClick: onOk
               }
@@ -330,7 +355,7 @@ function Modal({
           ] })
         ]
       }
-    )
+    ) }) })
   ] }) });
 }
 function Drawer({
@@ -346,48 +371,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 +560,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 +592,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 +644,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
     },