@shoplflow/base 0.24.26 → 0.24.28

package/dist/index.cjs

@@ -1859,30 +1859,45 @@ 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;
-  width: ${({ width }) => {
-  var _a;
-  return (_a = `calc(${width} - 2px)`) != null ? _a : "calc(100% - 2px)";
-}};
-  min-width: ${({ minWidth }) => {
-  var _a;
-  return (_a = `calc(${minWidth} - 2px)`) != null ? _a : "fit-content";
-}};
-  height: ${({ height }) => {
-  var _a;
-  return (_a = `calc(${height} - 2px)`) != null ? _a : "fit-content";
-}};
   flex-direction: ${({ direction }) => direction || "row"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth }) => getStyleByType({ type, height, minHeight, maxHeight, width, maxWidth, minWidth })};
   justify-content: space-between;
-  min-height: ${({ minHeight }) => {
-  var _a;
-  return (_a = `calc(${minHeight} - 2px)`) != null ? _a : "fit-content";
-}};
-  margin: 1px;
   gap: 8px;
-  box-shadow: 0 0 0 1px ${(props) => getBorderColorByStatus(props)};
+  border: 1px solid ${(props) => getBorderColorByStatus(props)};
   border-radius: 6px;
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -2614,7 +2629,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 {
@@ -2635,6 +2651,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;
@@ -2670,6 +2692,17 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
+
+// src/components/Inputs/Input/utils/getNumberLimiteRange.ts
+var getNumberLimitRange = (value, min, max) => {
+  if (min && value < min) {
+    return String(min);
+  }
+  if (max && value > max) {
+    return String(max);
+  }
+  return String(value);
+};
 var Input = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2686,7 +2719,7 @@ var Input = React2.forwardRef(
       min,
       max,
       className,
-      width = "100%"
+      width
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2705,7 +2738,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);
@@ -2725,18 +2758,6 @@ var Input = React2.forwardRef(
       },
       [maxLength]
     );
-    const limitRange = React2.useCallback(
-      (value2) => {
-        if (min && Number(value2) < Number(min)) {
-          return String(min);
-        }
-        if (max && Number(value2) > Number(max)) {
-          return String(max);
-        }
-        return value2;
-      },
-      [max, min]
-    );
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -2755,19 +2776,15 @@ var Input = React2.forwardRef(
       onChange && onChange(event);
       const slicedText = sliceText(event.target.value);
       if (type === "number") {
-        const limitedText = limitRange(slicedText);
+        const numberValue = Number(slicedText);
+        const numberMin = Number(min);
+        const numberMax = Number(max);
+        const limitedText = getNumberLimitRange(numberValue, numberMin, numberMax);
         setText(limitedText);
         return;
       }
       setText(slicedText);
     };
-    const getWidth = () => {
-      if (type === "number") {
-        return "64px";
-      } else {
-        return width;
-      }
-    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2811,8 +2828,10 @@ var Input = React2.forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width: getWidth(),
-        height: type === "number" ? "32px" : "40px",
+        type,
+        width,
+        height: "40px",
+        maxHeight: "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2952,6 +2971,7 @@ var InputButton = React2.forwardRef(
         isFocused: isSelected,
         disabled,
         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)),