@geomak/ui 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React9 = require('react');
 var Dialog = require('@radix-ui/react-dialog');
+var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Accordion = require('@radix-ui/react-accordion');
@@ -321,33 +322,57 @@ function Modal({
   title,
   children
 }) {
+  const reduced = framerMotion.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.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__ */ jsxRuntime.jsxs(
-      Dialog__namespace.Content,
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.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__ */ jsxRuntime.jsxs("div", { className: "h-[12%] flex items-center justify-between border-b border-ice dark:border-independence p-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-prussian-blue dark:text-white font-bold text-lg", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 flex-shrink-0 items-center justify-between border-b border-ice dark:border-independence px-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-prussian-blue dark:text-white tracking-tight", children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 "aria-label": "Close",
-                className: "cursor-pointer rounded p-1 hover:bg-ice dark:hover:bg-independence transition-colors",
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${hasFooter ? "max-h-[77%]" : "max-h-[90%]"} p-2 overflow-y-auto`, children: isOpen && children }),
-          hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end items-center gap-5 border-t border-ice dark:border-independence h-max p-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: isOpen && children }),
+          hasFooter && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               Button,
               {
-                style: { width: 100, margin: "0" },
+                style: { width: 90 },
                 content: cancelText,
                 onClick: onCancel
               }
@@ -355,7 +380,7 @@ function Modal({
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
-                style: { width: 100, margin: "0" },
+                style: { width: 90 },
                 content: okText,
                 onClick: onOk
               }
@@ -363,7 +388,7 @@ function Modal({
           ] })
         ]
       }
-    )
+    ) }) })
   ] }) });
 }
 function Drawer({
@@ -379,48 +404,59 @@ function Drawer({
   title,
   children
 }) {
+  const reduced = framerMotion.useReducedMotion();
   const isRight = placement === "right";
+  const hiddenX = isRight ? "100%" : "-100%";
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.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__ */ jsxRuntime.jsxs(
-      Dialog__namespace.Content,
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-prussian-blue dark:text-white font-bold text-lg", children: title }),
-                /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    "aria-label": "Close drawer",
-                    className: "cursor-pointer rounded p-1 hover:bg-ice dark:hover:bg-independence transition-colors",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${hasFooter ? "h-[88%]" : "h-[95%]"} overflow-y-auto`, children: isOpen && children }),
-          hasFooter && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { style: { width: 100 }, content: cancelText, onClick: onCancel }),
-                /* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 100 }, content: okText, onClick: onOk })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-prussian-blue dark:text-white tracking-tight", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children: isOpen && children }),
+          hasFooter && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: okText, onClick: onOk })
+          ] })
         ]
       }
-    )
+    ) }) })
   ] }) });
 }
 function Tooltip({
@@ -557,27 +593,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 })
         ]
       }
     );
@@ -588,47 +625,47 @@ function TreeNodeItem({
     {
       type: "multiple",
       defaultValue: initialOpen,
-      style: { marginLeft: depth * 10 },
+      style: { paddingLeft: depth * 12 },
       children: /* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Item, { value: item.key, className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Accordion__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+        /* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-[7px] border-l border-prussian-blue dark:border-ice-dark", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-ice-dark dark:border-independence py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
           TreeNodeItem,
           {
             item: child,
-            onItemClick,
+            onNodeClick,
             defaultExpandAll,
             defaultExpandedKeys,
             depth: depth + 1
@@ -640,16 +677,16 @@ function TreeNodeItem({
   );
 }
 function Tree({
-  structure,
-  onItemClick,
+  nodes,
+  onNodeClick,
   defaultExpandAll = false,
   defaultExpandedKeys = []
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: structure.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1 w-full", children: nodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     TreeNodeItem,
     {
       item,
-      onItemClick,
+      onNodeClick,
       defaultExpandAll,
       defaultExpandedKeys
     },