dialkit 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -398,8 +398,6 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
   const [isCollapsed, setIsCollapsed] = (0, import_react2.useState)(!defaultOpen);
   const contentRef = (0, import_react2.useRef)(null);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(void 0);
-  const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const panelTransition = { type: "spring", visualDuration: 0.4, bounce: 0.2 };
   (0, import_react2.useEffect)(() => {
     const el = contentRef.current;
     if (!el) return;
@@ -412,25 +410,20 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ro.observe(el);
     return () => ro.disconnect();
   }, [isOpen]);
+  const handleToggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next) {
+      setIsCollapsed(false);
+    } else {
+      setIsCollapsed(true);
+    }
+    onOpenChange?.(next);
+  };
   const folderContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: () => {
-      const next = !isOpen;
-      setIsOpen(next);
-      if (next) setIsCollapsed(false);
-      onOpenChange?.(next);
-    }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header-top", children: [
-        isRoot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, mode: "popLayout", children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react3.motion.div,
-          {
-            className: "dialkit-folder-title-row",
-            initial: { opacity: 1 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.15 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title })
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
+        isRoot ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
         isRoot ? (
           // Root panel icon — fixed position, container morphs around it
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -467,53 +460,32 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
           )
         )
       ] }),
-      isRoot && toolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react3.motion.div,
-        {
-          initial: { opacity: 1 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.15 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
-        }
-      ) })
+      isRoot && toolbar && isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react3.motion.div,
       {
         className: "dialkit-folder-content",
-        initial: isRoot ? { opacity: 1 } : { height: 0, opacity: 0 },
-        animate: isRoot ? { opacity: 1 } : { height: "auto", opacity: 1 },
-        exit: isRoot ? { opacity: 0 } : { height: 0, opacity: 0 },
-        transition: isRoot ? { duration: 0.15 } : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
-        style: isRoot ? void 0 : { overflow: "hidden" },
+        initial: isRoot ? void 0 : { height: 0, opacity: 0 },
+        animate: isRoot ? void 0 : { height: "auto", opacity: 1 },
+        exit: isRoot ? void 0 : { height: 0, opacity: 0 },
+        transition: isRoot ? void 0 : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
+        style: isRoot ? void 0 : { clipPath: "inset(0 -20px)" },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-inner", children })
       }
     ) })
   ] });
   if (isRoot) {
+    const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? contentHeight + 24 : "auto", borderRadius: 14, boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)", cursor: void 0 } : { width: 42, height: 42, borderRadius: 21, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.25)", overflow: "hidden", cursor: "pointer" };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react3.motion.div,
       {
         className: "dialkit-panel-inner",
-        initial: false,
-        animate: {
-          width: isOpen ? 280 : 42,
-          height: isOpen ? contentHeight !== void 0 ? contentHeight + 24 : "auto" : 42,
-          borderRadius: isOpen ? 14 : 21,
-          boxShadow: isOpen ? "0 8px 32px rgba(0, 0, 0, 0.5)" : "0 4px 16px rgba(0, 0, 0, 0.25)"
-        },
-        transition: panelTransition,
-        style: { overflow: isOpen ? void 0 : "hidden", cursor: isOpen ? void 0 : "pointer" },
-        onClick: !isOpen ? () => {
-          setIsOpen(true);
-          setIsCollapsed(false);
-          onOpenChange?.(true);
-        } : void 0,
-        onAnimationComplete: () => {
-          if (!isOpen) setIsCollapsed(true);
-        },
+        style: panelStyle,
+        onClick: !isOpen ? handleToggle : void 0,
         "data-collapsed": isCollapsed,
+        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: folderContent
       }
     );
@@ -1184,9 +1156,12 @@ function TextControl({ label, value, onChange, placeholder }) {
 var import_react9 = require("react");
 var import_react10 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function toTitleCase(s) {
+  return s.replace(/\b\w/g, (c) => c.toUpperCase());
+}
 function normalizeOptions(options) {
   return options.map(
-    (opt) => typeof opt === "string" ? { value: opt, label: opt } : opt
+    (opt) => typeof opt === "string" ? { value: opt, label: toTitleCase(opt) } : opt
   );
 }
 function SelectControl({ label, value, options, onChange }) {
@@ -1407,7 +1382,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
               strokeWidth: "2.5",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              animate: { rotate: isOpen ? 180 : 0 },
+              animate: { rotate: isOpen ? 180 : 0, opacity: hasPresets ? 0.6 : 0.25 },
               transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
               children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
             }
@@ -1603,11 +1578,13 @@ Apply these values as the new defaults in the useDialKit call.`;
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
   const toolbar = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "button",
+      import_react15.motion.button,
       {
         className: "dialkit-toolbar-add",
         onClick: handleAddPreset,
         title: "Add preset",
+        whileTap: { scale: 0.9 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 6H20" }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 12H10" }),
@@ -1627,13 +1604,15 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "button",
+      import_react15.motion.button,
       {
         className: "dialkit-toolbar-copy",
         onClick: handleCopy,
         title: "Copy parameters",
+        whileTap: { scale: 0.95 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react15.AnimatePresence, { mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react15.AnimatePresence, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             import_react15.motion.svg,
             {
               className: "dialkit-toolbar-copy-icon",