@shoplflow/base 0.31.19 → 0.31.20

package/dist/index.cjs

@@ -3112,7 +3112,8 @@ var Input = React3.forwardRef(
       className,
       width,
       borderRadius,
-      customNumberInputHeight
+      customNumberInputHeight,
+      onKeyDown
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3129,7 +3130,8 @@ var Input = React3.forwardRef(
       "className",
       "width",
       "borderRadius",
-      "customNumberInputHeight"
+      "customNumberInputHeight",
+      "onKeyDown"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(false);
@@ -3165,7 +3167,12 @@ var Input = React3.forwardRef(
     };
     const handleOnBlur = (event) => {
       onBlur && onBlur(event);
-      setIsFocused(false);
+    };
+    const handleOnKeyDown = (event) => {
+      if (event.code === "Tab") {
+        setIsFocused(false);
+      }
+      onKeyDown && onKeyDown(event);
     };
     const handleOnChange = (event) => {
       onChange && onChange(event);
@@ -3237,6 +3244,7 @@ var Input = React3.forwardRef(
               onFocus: handleOnFocus,
               onBlur: handleOnBlur,
               onChange: handleOnChange,
+              onKeyDown: handleOnKeyDown,
               maxLength,
               disabled,
               value: text,
@@ -5709,6 +5717,57 @@ var WeekDatepicker = ({
   ] });
 };
 exports.WeekDatepicker = WeekDatepicker;
+var Title = ({
+  title,
+  titleTypography = "body1_700",
+  titleColor = "neutral700",
+  total,
+  description,
+  tooltipPlacement = "right",
+  isRequired,
+  isShowHelpIcon,
+  tooltipOffsetValue,
+  tooltipMessage = "",
+  rightSource
+}) => {
+  const domain = exports.getDomain();
+  const descriptionTypography = domain === "hada" ? "body2_400" : "body1_400";
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Vertical, { width: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      exports.StackContainer,
+      {
+        direction: "row",
+        align: "center",
+        width: "100%",
+        minHeight: "40px",
+        height: "auto",
+        justify: "space-between",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { color: titleColor, typography: titleTypography, wordBreak: "break-all", children: [
+              title,
+              " ",
+              isRequired && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_700", color: "red300", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { color: "primary300", typography: "body1_700", children: total }),
+            isShowHelpIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Tooltip,
+              {
+                placement: tooltipPlacement,
+                offset: tooltipOffsetValue,
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(ShoplAssets.HelpIcon, { width: 20, height: 20 }),
+                popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Tooltip.Content, { content: tooltipMessage })
+              }
+            )
+          ] }),
+          rightSource && rightSource
+        ]
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { minHeight: "30px", height: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: descriptionTypography, color: "neutral500", wordBreak: "break-all", children: description }) })
+  ] });
+};
+exports.Title = Title;
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;