@shoplflow/base 0.24.27 → 0.24.29

package/dist/index.cjs

@@ -12,6 +12,7 @@ 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1644,7 +1645,7 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-exports.StyledPopper = styled5__default.default.div`
+var StyledPopper = styled5__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
@@ -1717,7 +1718,7 @@ exports.PopperTrigger = React2.forwardRef(
     React2.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
-    return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
 exports.PopperPortal = React2.forwardRef(
@@ -1741,7 +1742,7 @@ exports.PopperPortal = React2.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
-exports.getDropdownHeightBySizeVar = (size2) => {
+var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return "40px";
@@ -1751,7 +1752,7 @@ exports.getDropdownHeightBySizeVar = (size2) => {
       return "40px";
   }
 };
-exports.getDropdownFontSizeBySizeVar = (size2) => {
+var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return "body1_400";
@@ -1761,7 +1762,7 @@ exports.getDropdownFontSizeBySizeVar = (size2) => {
       return "body1_400";
   }
 };
-exports.getDropdownStyleBySizeVar = (size2) => {
+var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return react$1.css`
@@ -1778,7 +1779,7 @@ exports.getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
-exports.getDropdownIconSizeBySizeVar = (size2) => {
+var getDropdownIconSizeBySizeVar = (size2) => {
   switch (size2) {
     case "S":
       return react$1.css`
@@ -1803,10 +1804,10 @@ exports.getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-exports.StyledDropdown = styled5__default.default.div`
+var StyledDropdown = styled5__default.default.div`
   width: ${({ width }) => width};
 `;
-exports.StyledDropdownContent = styled5__default.default.div`
+var StyledDropdownContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
@@ -1815,7 +1816,7 @@ exports.StyledDropdownContent = styled5__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-exports.StyledDropdownButton = styled5__default.default.button`
+var StyledDropdownButton = styled5__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1825,17 +1826,17 @@ exports.StyledDropdownButton = styled5__default.default.button`
   gap: 8px;
   cursor: pointer;
   background-color: ${exports.colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && exports.getDropdownStyleBySizeVar(sizeVar)};
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => disabled && react$1.css`
       cursor: not-allowed;
     `}
 `;
-exports.DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
+var DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ sizeVar }) => sizeVar && exports.getDropdownIconSizeBySizeVar(sizeVar)};
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
 `;
 var DropdownContext = React2.createContext(null);
 var useDropdown = () => {
@@ -1859,16 +1860,42 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
+var getStyleByType = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth
+}) => {
+  if (type === "number") {
+    return react$1.css`
+      width: 64px;
+      height: 32px;
+    `;
+  }
+  if (type === "text" || type === "password") {
+    return react$1.css`
+      width: ${width != null ? width : "100%"};
+      min-width: ${minWidth != null ? minWidth : "initial"};
+      max-width: ${maxWidth != null ? maxWidth : "initial"};
+      height: ${height != null ? height : "initial"};
+      min-height: ${minHeight != null ? minHeight : "initial"};
+      max-height: ${maxHeight != null ? maxHeight : "initial"};
+    `;
+  }
+  return react$1.css`
+    width: 64px;
+    height: 32px;
+  `;
+};
 var InputWrapper = styled5__default.default.label`
+  position: relative;
   display: flex;
   align-items: center;
   flex-direction: ${({ direction }) => direction || "row"};
-  width: ${({ width }) => width != null ? width : "100%"};
-  min-width: ${({ minWidth }) => minWidth != null ? minWidth : "initial"};
-  max-width: ${({ maxWidth }) => maxWidth != null ? maxWidth : "initial"};
-  min-height: ${({ minHeight }) => minHeight != null ? minHeight : "initial"};
-  max-height: ${({ maxHeight }) => maxHeight != null ? maxHeight : "initial"};
-  height: ${({ height }) => height != null ? height : "initial"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth }) => getStyleByType({ type, height, minHeight, maxHeight, width, maxWidth, minWidth })};
   justify-content: space-between;
   gap: 8px;
   border: 1px solid ${(props) => getBorderColorByStatus(props)};
@@ -1948,13 +1975,13 @@ var DropdownButton = React2.forwardRef(
         disabled,
         width,
         isError,
-        height: exports.getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
+        height: getDropdownHeightBySizeVar(sizeVar),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
           value || /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
-              typography: exports.getDropdownFontSizeBySizeVar(sizeVar),
+              typography: getDropdownFontSizeBySizeVar(sizeVar),
               color: "neutral400",
               textOverflow: "ellipsis",
               lineClamp: 1,
@@ -1962,7 +1989,7 @@ var DropdownButton = React2.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            exports.DropdownButtonIcon,
+            DropdownButtonIcon,
             {
               sizeVar,
               animate: {
@@ -1999,7 +2026,7 @@ var DropdownContent = (_a) => {
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
 };
 var Dropdown = ({
   isOpen: initialIsOpen = false,
@@ -2025,7 +2052,7 @@ var Dropdown = ({
     }
     setIsOpen(initialIsOpen);
   }, [initialIsOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Popper,
     {
       offset: 4,
@@ -2345,7 +2372,7 @@ var getStylesBySizeVar = (sizeVar) => {
       `;
   }
 };
-exports.getFontStylesBySizeVar = (sizeVar) => {
+var getFontStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
       return "body2_400";
@@ -2357,7 +2384,7 @@ exports.getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-exports.StyledMenu = styled5__default.default.li`
+var StyledMenu = styled5__default.default.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2408,7 +2435,7 @@ var Menu = (_a) => {
     !disabled && onClick && onClick(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    exports.StyledMenu,
+    StyledMenu,
     __spreadProps(__spreadValues({
       sizeVar,
       isSelected: selected,
@@ -2418,7 +2445,7 @@ var Menu = (_a) => {
       "data-shoplflow": "Menu",
       children: [
         leftSource && LeftSourceClone,
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: exports.getFontStylesBySizeVar(sizeVar), children }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
         rightSource && rightSource
       ]
     })
@@ -2432,7 +2459,7 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-exports.StyledList = styled5__default.default.li`
+var StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2447,7 +2474,7 @@ exports.StyledList = styled5__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
 `;
-exports.StyledText2Rows = styled5__default.default.div`
+var StyledText2Rows = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2459,14 +2486,14 @@ var List = (_a) => {
   if (!children && rightSource) {
     throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
     LeftSourceClone && LeftSourceClone,
     /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { height: "36px", width: "100%", spacing: "spacing08", align: "center", children }),
     rightSource && rightSource
   ] }));
 };
 exports.Text2Rows = ({ title, subTitle }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledText2Rows, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledText2Rows, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_500", color: "neutral700", lineClamp: 1, wordBreak: "break-all", children: title }),
     subTitle && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_400", color: "neutral400", lineClamp: 1, wordBreak: "break-all", children: subTitle })
   ] });
@@ -2603,7 +2630,8 @@ exports.TagSizeVariants = {
 var StyledInput = styled5__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
-  width: 100%;
+  display: flex;
+  min-width: 64px;
   border: none;
   box-sizing: border-box;
   &::placeholder {
@@ -2624,6 +2652,12 @@ var StyledInput = styled5__default.default.input`
     text-align: center;
     -moz-appearance: textfield;
   }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
 `;
 var RightElementWrapper = styled5__default.default.div`
   display: flex;
@@ -2686,7 +2720,7 @@ var Input = React2.forwardRef(
       min,
       max,
       className,
-      width = "100%"
+      width
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2705,7 +2739,7 @@ var Input = React2.forwardRef(
     ]);
     const [text, setText] = React2.useState("");
     const [isFocused, setIsFocused] = React2.useState(false);
-    const [type, setType] = React2.useState("text");
+    const [type, setType] = React2.useState(void 0);
     const [isHovered, setIsHovered] = React2.useState(false);
     const uniqueId = React2.useId();
     const inputRef = React2__namespace.default.useRef(null);
@@ -2752,13 +2786,6 @@ var Input = React2.forwardRef(
       }
       setText(slicedText);
     };
-    const getWidth = () => {
-      if (type === "number") {
-        return "64px";
-      } else {
-        return width;
-      }
-    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2802,9 +2829,10 @@ var Input = React2.forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width: getWidth(),
-        height: type === "number" ? "32px" : "40px",
-        maxHeight: type === "number" ? "32px" : "40px",
+        type,
+        width,
+        height: "40px",
+        maxHeight: "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2839,7 +2867,7 @@ var Input = React2.forwardRef(
   }
 );
 exports.Input = Input;
-exports.StyledInputButton = styled5__default.default.div`
+var StyledInputButton = styled5__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2854,7 +2882,7 @@ exports.StyledInputButton = styled5__default.default.div`
       cursor: not-allowed;
     `}
 `;
-exports.StyledInputButtonContent = styled5__default.default.input`
+var StyledInputButtonContent = styled5__default.default.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2946,8 +2974,8 @@ var InputButton = React2.forwardRef(
         minHeight: "40px",
         maxHeight: "40px",
         width,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, { onClick: handleOnClick, disabled, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(exports.StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledInputButton, { onClick: handleOnClick, disabled, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
             text && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
             rightSource
@@ -3191,6 +3219,57 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
+var StyledTooltipContent = styled5__default.default.div`
+  background-color: ${exports.colorTokens.neutral700};
+  padding: 4px 8px;
+  max-width: 240px;
+  border-radius: 4px;
+`;
+var TooltipContent = (_a) => {
+  var _b = _a, { content } = _b, args = __objRest(_b, ["content"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTooltipContent, __spreadProps(__spreadValues({}, args), { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral0", wordBreak: "break-all", children: content }) }));
+};
+var Tooltip = (_a) => {
+  var _b = _a, {
+    trigger,
+    popper,
+    placement = "bottom-start",
+    offset: offset3 = 4,
+    triggerRef,
+    portalRef
+  } = _b, popperProps = __objRest(_b, [
+    "trigger",
+    "popper",
+    "placement",
+    "offset",
+    "triggerRef",
+    "portalRef"
+  ]);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const showHandler = React2.useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const hideHandler = React2.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset3, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Popper.Trigger,
+      {
+        ref: triggerRef,
+        isOpen,
+        onMouseOver: showHandler,
+        onMouseLeave: hideHandler,
+        onFocus: showHandler,
+        onBlur: hideHandler,
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
+  ] }));
+};
+Tooltip.Content = TooltipContent;
+exports.Tooltip = Tooltip;
 var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;