@shoplflow/base 0.26.10 → 0.27.1

package/dist/index.cjs

@@ -1558,6 +1558,22 @@ var StyledButton = styled6__default.default.button`
   ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
+var LoadingSpinner = ({ color = "neutral0" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", stroke: exports.colorTokens[color], viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .spinner { transform-origin: center; animation: spinner_rotation 2s linear infinite; }
+          .spinner circle { stroke-linecap: round; animation: spinner_dash 1.5s ease-in-out infinite; }
+          @keyframes spinner_rotation { 100% { transform: rotate(360deg); } }
+          @keyframes spinner_dash { 
+            0% { stroke-dasharray: 0 150; stroke-dashoffset: 0; }
+            47.5% { stroke-dasharray: 42 150; stroke-dashoffset: -16; }
+            95%, 100% { stroke-dasharray: 42 150; stroke-dashoffset: -59; }
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { className: "spinner", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "2" }) })
+  ] });
+};
+var LoadingSpinner_default = LoadingSpinner;
 var Button = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -1569,6 +1585,7 @@ var Button = React3.forwardRef(
       children,
       leftSource,
       rightSource,
+      isLoading = false,
       lineClamp
     } = _b, rest = __objRest(_b, [
       "styleVar",
@@ -1579,6 +1596,7 @@ var Button = React3.forwardRef(
       "children",
       "leftSource",
       "rightSource",
+      "isLoading",
       "lineClamp"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1595,7 +1613,7 @@ var Button = React3.forwardRef(
         "data-shoplflow": "Button",
         children: [
           leftSource,
-          /* @__PURE__ */ jsxRuntime.jsx(
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_default, { color: styleVar === "SECONDARY" || styleVar === "GHOST" ? "neutral500" : "neutral0" }) : /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
               lineClamp,
@@ -1715,7 +1733,25 @@ var StyledIconButton = styled6__default.default.button`
 `;
 var IconButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { styleVar, sizeVar, disabled, children, color, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color", "onMouseEnter", "onMouseLeave"]);
+    var _b = _a, {
+      styleVar,
+      sizeVar,
+      disabled,
+      children,
+      color,
+      onMouseEnter,
+      onMouseLeave,
+      isLoading = false
+    } = _b, rest = __objRest(_b, [
+      "styleVar",
+      "sizeVar",
+      "disabled",
+      "children",
+      "color",
+      "onMouseEnter",
+      "onMouseLeave",
+      "isLoading"
+    ]);
     const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnMouseEnter = (e) => {
       setIsHovered(true);
@@ -1738,7 +1774,7 @@ var IconButton = React3.forwardRef(
         isHovered
       }, rest), {
         "data-shoplflow": "IconButton",
-        children
+        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_default, { color: styleVar === "SECONDARY" || styleVar === "GHOST" ? "neutral500" : "neutral0" }) : children
       })
     );
   }
@@ -2794,11 +2830,129 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledTree = styled6__default.default.div``;
+var StyledTree = styled6__default.default(framerMotion.motion.ul)`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 48px;
+  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: initial;
+  ${({ depth }) => depth && react$1.css`
+      padding-left: ${depth * 16}px;
+    `};
+  &:hover {
+    background: ${exports.colorTokens.neutral400_5};
+  }
+`;
+var LeftElementWrapper = styled6__default.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+var RightElementWrapper = styled6__default.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+var IconWrapper = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+`;
+
+// src/components/Tree/Tree.types.ts
+exports.TREE_SYMBOL_KEY = Symbol("SHOPLFLOW_TREE");
+
+// src/animation/AnimateKey.ts
+var AnimateKey = {
+  initial: "initial",
+  animate: "animate",
+  exit: "exit"
+};
 var Tree = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", children: "Tree" }));
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  const [isMounted, setIsMounted] = React3__namespace.default.useState(false);
+  React3.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", layout: true, layoutRoot: true, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children }) }) }));
 };
+exports.TreeItem = (_a) => {
+  var _b = _a, {
+    children,
+    label,
+    leftSource,
+    rightSource,
+    depth = 0,
+    initialIsOpen,
+    isOpen
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "label",
+    "leftSource",
+    "rightSource",
+    "depth",
+    "initialIsOpen",
+    "isOpen"
+  ]);
+  const [isOpened, setIsOpened] = React3__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
+  const CloneChildren = React3__namespace.default.Children.map(children, (child) => {
+    if (!React3__namespace.default.isValidElement(child)) {
+      return child;
+    }
+    if (child.type[exports.TREE_SYMBOL_KEY]) {
+      return React3__namespace.default.cloneElement(child, {
+        depth: depth + 1
+      });
+    }
+    return child;
+  });
+  const handleToggle = () => {
+    setIsOpened((prev) => !prev);
+  };
+  React3.useEffect(() => {
+    if (isOpen !== void 0) {
+      setIsOpened(isOpen);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ React3.createElement(StyledTreeItem, __spreadValues(__spreadProps(__spreadValues({ depth, variants: fadeInOut }, AnimateKey), { layout: true, key: String(label) }), rest), /* @__PURE__ */ jsxRuntime.jsxs(LeftElementWrapper, { children: [
+      leftSource,
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: label })
+    ] }), /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
+      rightSource,
+      children && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconWrapper,
+        {
+          animate: {
+            rotate: isOpened ? 180 : 0,
+            transition: {
+              duration: 0.2
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowIcon, sizeVar: "S" })
+        }
+      ) })
+    ] })),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
+  ] });
+};
+exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
+Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
 var StyledInput = styled6__default.default.input`
   padding: 4px 0 4px 12px;
@@ -2833,7 +2987,7 @@ var StyledInput = styled6__default.default.input`
     box-sizing: inherit;
   }
 `;
-var RightElementWrapper = styled6__default.default.div`
+var RightElementWrapper2 = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3024,7 +3178,7 @@ var Input = React3.forwardRef(
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
-          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
+          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { children: [
             maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
             isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
             initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3855,7 +4009,7 @@ var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopperPortal_default, {}),
     /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
-    children
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children })
   ] });
 };
 exports.ShoplflowProvider = ShoplflowProvider;