@shoplflow/base 0.32.19 → 0.32.20

package/dist/index.cjs

@@ -11,8 +11,8 @@ var Scrollbars = require('react-custom-scrollbars-2');
 var react = require('@floating-ui/react');
 var reactDom = require('@floating-ui/react-dom');
 var ShoplAssets = require('@shoplflow/shopl-assets');
-var HadaAssets = require('@shoplflow/hada-assets');
 var core = require('@floating-ui/core');
+var HadaAssets = require('@shoplflow/hada-assets');
 var DatePicker2 = require('react-datepicker');
 require('react-datepicker/dist/react-datepicker.css');
 var SimpleBarReact = require('simplebar-react');
@@ -1811,12 +1811,19 @@ exports.IconButtonStyleVariants = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
+var getPopoverContentStyle = () => {
+  return react$1.css`
+    min-width: 112px;
+    padding: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background-color: ${exports.colorTokens.neutral0};
+  `;
+};
+
+// src/components/Buttons/DropdownButton/DropdownButton.styled.ts
 var StyledPopoverContentWrapper = styled6__default.default.div`
-  min-width: 112px;
-  padding: 4px;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  background-color: ${exports.colorTokens.neutral0};
+  ${getPopoverContentStyle()}
 `;
 var StyledArrowIcon = styled6__default.default(framerMotion.motion.div)`
   display: flex;
@@ -2425,11 +2432,10 @@ var DropdownButton = (_a) => {
     _styleVar = "SOLID";
     color = "coolgray50";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, middlewares: [core.shift({ crossAxis: true, padding: 4 })], children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsxRuntime.jsx(
       exports.Button,
       __spreadProps(__spreadValues({
-        "data-shoplflow": "DropdownButton",
         className: _className,
         sizeVar,
         styleVar: _styleVar,
@@ -2479,6 +2485,209 @@ exports.DropdownButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
+var getStyleByStyleVar3 = (styleVar, color, disabled) => {
+  switch (styleVar) {
+    case "PRIMARY":
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.primary400};
+        background-color: ${exports.colorTokens.primary300};
+        :hover {
+          background-color: ${!disabled && exports.colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.neutral350};
+        background-color: ${exports.colorTokens.neutral0};
+        :hover {
+          background-color: ${!disabled && exports.colorTokens.neutral100};
+        }
+      `;
+    default:
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.primary400};
+        background-color: ${exports.colorTokens.primary300};
+      `;
+  }
+};
+var getStyleBySizeVar3 = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return react$1.css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+    case "S":
+      return react$1.css`
+        min-width: 54px;
+        min-height: 32px;
+      `;
+    default:
+      return react$1.css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+  }
+};
+var StyledPopoverContentWrapper2 = styled6__default.default.div`
+  ${getPopoverContentStyle()}
+`;
+var StyledArrowIcon2 = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var SplitButtonDivider = styled6__default.default.div`
+  height: ${({ sizeVar }) => sizeVar === "M" ? "38px" : "30px"};
+  width: 1px;
+  background-color: ${({ styleVar }) => styleVar === "PRIMARY" ? exports.colorTokens.shopl400 : exports.colorTokens.neutral350};
+`;
+var StyledSplitButton = styled6__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  gap: 8px;
+  padding: 0 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar3(styleVar, color, disabled)};
+  ${({ sizeVar }) => getStyleBySizeVar3(sizeVar)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+exports.SplitButtonContext = React3.createContext(null);
+exports.useSplitButtonContext = () => {
+  const context = React3.useContext(exports.SplitButtonContext);
+  if (!context) {
+    throw new Error("SplitButtonContext must be used within a SplitButton component");
+  }
+  return context;
+};
+var SplitButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = exports.useSplitButtonContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Menu,
+    __spreadProps(__spreadValues({
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onClick == null ? void 0 : onClick(event);
+        setIsOpen(false);
+      }
+    }, rest), {
+      children
+    })
+  );
+};
+var SplitButton = (_a) => {
+  var _b = _a, {
+    children,
+    color,
+    onClick,
+    disabled,
+    placement = "bottom-start",
+    floatingZIndex,
+    leftSource,
+    rightSource,
+    styleVar = "PRIMARY",
+    sizeVar = "M",
+    lineClamp = 1,
+    text
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "color",
+    "onClick",
+    "disabled",
+    "placement",
+    "floatingZIndex",
+    "leftSource",
+    "rightSource",
+    "styleVar",
+    "sizeVar",
+    "lineClamp",
+    "text"
+  ]);
+  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
+  const [isOpen, setIsOpen] = utils.useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.SplitButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, middlewares: [core.shift({ crossAxis: true, padding: 4 })], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: selector, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledSplitButton,
+      __spreadProps(__spreadValues({
+        "data-shoplflow": "SplitButton",
+        color,
+        styleVar,
+        sizeVar,
+        disabled
+      }, rest), {
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          if (disabled) {
+            return;
+          }
+          onClick == null ? void 0 : onClick(event);
+          setIsOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { spacing: "spacing04", align: "center", children: [
+            leftSource,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Text,
+              {
+                lineClamp,
+                whiteSpace: "nowrap",
+                wordBreak: "keep-all",
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: text
+              }
+            ),
+            rightSource
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SplitButtonDivider, { sizeVar, styleVar }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledArrowIcon2,
+            {
+              animate: {
+                rotate: isOpen ? 180 : 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Icon,
+                {
+                  iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
+                  color: styleVar === "PRIMARY" ? "neutral0" : "neutral600",
+                  sizeVar: "XS"
+                }
+              )
+            }
+          )
+        ]
+      })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(StyledPopoverContentWrapper2, { children }) })
+  ] }) });
+};
+SplitButton.Menu = SplitButtonMenu;
+exports.SplitButton = SplitButton;
+
+// src/components/Buttons/SplitButton/SplitButton.types.ts
+exports.SplitButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
+exports.SplitButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral100};
   & > span {
@@ -3839,22 +4048,32 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      exports.Popper.Trigger,
-      {
-        ref: triggerRef,
-        isOpen: isOpen || open,
-        onMouseOver: showHandler,
-        onMouseLeave: hideHandler,
-        onFocus: showHandler,
-        onBlur: hideHandler,
-        style: { display: "flex", alignItems: "center", justifyContent: "center" },
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
-  ] }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Popper,
+    __spreadProps(__spreadValues({
+      offset: offset4,
+      placement,
+      middlewares: [core.flip(), core.shift({ padding: 5 })],
+      "data-shoplflow": "Tooltip"
+    }, popperProps), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Popper.Trigger,
+          {
+            ref: triggerRef,
+            isOpen: isOpen || open,
+            onMouseOver: showHandler,
+            onMouseLeave: hideHandler,
+            onFocus: showHandler,
+            onBlur: hideHandler,
+            style: { display: "flex", alignItems: "center", justifyContent: "center" },
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
+      ]
+    })
+  );
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;